{{-- resources/views/admin/our-purchases/item-row.blade.php --}}

<div class="item-row grid grid-cols-1 md:grid-cols-12 gap-4 mb-6 p-4 bg-gray-50 rounded-lg border">
    <div class="md:col-span-3">
        <label class="block text-xs font-medium text-gray-600">نوع بار</label>
        <select name="items[{{ $index }}][load_type]" required class="load-type w-full px-3 py-2 border rounded mt-1 text-sm">
            <option value="">انتخاب کنید</option>
            <option value="base_load" {{ old("items.$index.load_type", $item->load_type ?? '') == 'base_load' ? 'selected' : '' }}>بار پایه (Base Load)</option>
            <option value="peak_load" {{ old("items.$index.load_type", $item->load_type ?? '') == 'peak_load' ? 'selected' : '' }}>اوج‌بار (Peak)</option>
            <option value="mid_load" {{ old("items.$index.load_type", $item->load_type ?? '') == 'mid_load' ? 'selected' : '' }}>میان‌بار (Mid)</option>
            <option value="low_load" {{ old("items.$index.load_type", $item->load_type ?? '') == 'low_load' ? 'selected' : '' }}>کم‌بار (Low)</option>
            <option value="green" {{ old("items.$index.load_type", $item->load_type ?? '') == 'green' ? 'selected' : '' }}>برق سبز (Green)</option>
        </select>
    </div>

    <div class="md:col-span-2">
        <label class="block text-xs font-medium text-gray-600">قدرت (مگاوات)</label>
        <input type="number" step="0.001" name="items[{{ $index }}][amount_purchase]"
               value="{{ old("items.$index.amount_purchase", $item->amount_purchase ?? '') }}"
               required class="amount w-full px-3 py-2 border rounded mt-1 text-sm" placeholder="مثل 50.500">
    </div>

    <div class="md:col-span-3">
        <label class="block text-xs font-medium text-gray-600">نرخ (تومان/مگاوات‌ساعت)</label>
        <input type="number" name="items[{{ $index }}][rate_per_kw]"
               value="{{ old("items.$index.rate_per_kw", $item->rate_per_kw ?? '') }}"
               required class="rate w-full px-3 py-2 border rounded mt-1 text-sm" placeholder="مثل 1180000">
    </div>

    <div class="md:col-span-2">
        <label class="block text-xs font-medium text-gray-600">مقدار کل (kWh)</label>
        <input type="text" class="total-kwh w-full px-3 py-2 bg-gray-100 border rounded mt-1 text-sm font-bold text-blue-700 text-left"
               readonly value="{{ $item->total_kwh ?? '' }}">
    </div>

    <div class="md:col-span-2 flex items-end justify-center">
        <button type="button" class="remove-item text-red-600 hover:text-red-800 font-medium text-sm">
            حذف
        </button>
    </div>

    {{-- اگر در حالت ویرایش باشد، id آیتم را بفرست --}}
    @if(isset($item) && $item->id)
        <input type="hidden" name="items[{{ $index }}][id]" value="{{ $item->id }}">
    @endif
</div>