@extends('layouts.admin')
@section('page-title', 'ویرایش خرید برق')

@section('content')
    <div class="bg-white p-6 rounded-lg shadow-lg">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">ویرایش خرید برق</h1>
            <a href="{{ route('admin.our-purchases.index') }}" class="text-blue-600 hover:text-blue-800">
                بازگشت به لیست
            </a>
        </div>

        <!-- نمایش اطلاعات اصلی -->
        <div class="bg-gray-50 p-5 rounded-lg mb-6 border">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 text-sm">
                <div><span class="font-medium text-gray-600">تأمین‌کننده:</span>
                    <span class="font-bold text-indigo-700 ml-2">
                    {{ $purchase->supplier?->name ?? 'تأمین‌کننده حذف شده' }}
                </span>
                </div>
                <div><span class="font-medium text-gray-600">سال:</span>
                    <span class="font-bold text-indigo-700 ml-2">{{ $purchase->year }}</span>
                </div>
                <div><span class="font-medium text-gray-600">ماه:</span>
                    <span class="font-bold text-indigo-700 ml-2">
                    @php
                        $monthNames = ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'];
                        $monthName = ($purchase->month >= 1 && $purchase->month <= 12) ? $monthNames[$purchase->month - 1] : 'نامشخص';
                    @endphp
                        {{ $monthName }}
                </span>
                </div>
            </div>
        </div>

        @if($errors->any())
            <div class="bg-red-50 border border-red-300 text-red-700 p-4 rounded-lg mb-6">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ is_array($error) ? implode(' ', $error) : $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.our-purchases.update', $purchase) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">توضیحات (اختیاری)</label>
                <textarea name="description" rows="3"
                          class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500">
                {{ old('description', $purchase->description) }}
                </textarea>
            </div>

            <div class="space-y-6">
                <h3 class="text-lg font-bold text-gray-800">آیتم‌های خرید</h3>

                @foreach($purchase->items as $index => $item)
                    <div class="bg-gray-50 p-6 rounded-lg border border-gray-300">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">نوع بار</label>
                                <input type="text" disabled value="{{ [
                                'base_load' => 'بار پایه', 'peak_load' => 'اوج‌بار',
                                'mid_load' => 'میان‌بار', 'low_load' => 'کم‌بار', 'green' => 'برق سبز'
                            ][$item->load_type] }}" class="w-full px-4 py-2 bg-gray-100 rounded">
                                <input type="hidden" name="items[{{ $index }}][id]" value="{{ $item->id }}">
                                <input type="hidden" name="items[{{ $index }}][load_type]"
                                       value="{{ $item->load_type }}">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">بار خریداری
                                    شده(کیلووات)</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-4 py-2 border rounded focus:ring-2 focus:ring-blue-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">نرخ (ریال)</label>
                                <input type="number" name="items[{{ $index }}][rate_per_kw]"
                                       value="{{ old('items.'.$index.'.rate_per_kw', $item->rate_per_kw) }}"
                                       required
                                       class="w-full px-4 py-2 border rounded focus:ring-2 focus:ring-blue-500">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-2">مقدار
                                    کل(کیلووات‌ساعت)</label>
                                <input type="text" readonly
                                       class="total-kwh w-full px-4 py-2 bg-blue-50 border rounded font-bold text-blue-700 text-left"
                                       value="{{ number_format($item->total_kwh) }}">
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-8 flex justify-end gap-4">
                <a href="{{ route('admin.our-purchases.index') }}"
                   class="px-6 py-3 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition">
                    انصراف
                </a>
                <button type="submit"
                        class="px-8 py-3 bg-gradient-to-r from-emerald-600 to-green-600 text-white rounded-lg font-bold hover:shadow-xl transition">
                    ذخیره تغییرات
                </button>
            </div>
        </form>
    </div>

    {{-- فقط این اسکریپت رو عوض کردم — ۱۰۰٪ کار می‌کنه --}}
    <script>
        window.touHours = @json($touHours ?? null);

        function recalculateKwh() {
            if (!window.touHours) {
                document.querySelectorAll('.total-kwh').forEach(el => {
                    el.value = 'جدول TOU موجود نیست';
                    el.style.color = 'red';
                });
                return;
            }

            function getJalaliDaysInMonth(month, year) {
                if (month <= 6) return 31;
                if (month <= 11) return 30;
                const mod = year % 33;
                return [1, 5, 9, 13, 17, 22, 26, 30].includes(mod) ? 30 : 29;
            }


            {{--            const daysInMonth = new Date({{ $purchase->year }}, {{ $purchase->month }}, 0).getDate();--}}
            const daysInMonth = getJalaliDaysInMonth(parseInt(month), parseInt(year));

            document.querySelectorAll('.bg-gray-50').forEach(row => {
                const typeInput = row.querySelector('input[name*="load_type"]');
                const amountInput = row.querySelector('.amount');
                const kwhField = row.querySelector('.total-kwh');

                if (!typeInput || !amountInput || !kwhField) return;

                const type = typeInput.value;
                const amount = parseFloat(amountInput.value) || 0;

                if (!type || amount <= 0) {
                    kwhField.value = '';
                    return;
                }

                const hours = window.touHours[type];
                if (!hours || hours <= 0) {
                    kwhField.value = 'ساعت تعریف نشده';
                    kwhField.style.color = 'red';
                    return;
                }

                const total = amount * hours * daysInMonth * 1000;
                kwhField.value = total.toLocaleString('fa-IR');
                kwhField.style.color = '';
            });
        }

        // Show the initial value first, then update any changes
        document.addEventListener('DOMContentLoaded', () => {
            setTimeout(recalculateKwh, 100);
        });

        document.addEventListener('input', e => {
            if (e.target.classList.contains('amount')) {
                recalculateKwh();
            }
        });
    </script>
@endsection