@extends('layouts.admin')
@section('page-title', 'ثبت خرید جدید')

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

        @if($errors->any())
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-5 text-xs">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.our-purchases.store') }}" method="POST" class="space-y-6">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                <div>
                    <label class="block text-xs font-medium text-gray-700 mb-1">تأمین‌کننده</label>
                    <select name="supplier_id" required class="w-full px-4 py-2.5 border rounded-lg text-xs focus:ring-2 focus:ring-blue-500">
                        <option value="">انتخاب کنید</option>
                        @foreach(\App\Models\Supplier::orderBy('name')->get() as $s)
                            <option value="{{ $s->id }}">{{ $s->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    @php
                        use Morilog\Jalali\Jalalian;
                        $jalaliYear = Jalalian::now()->getYear();
                        $jalaliMonth = Jalalian::now()->getMonth();
                    @endphp
                    <label class="block text-xs font-medium text-gray-700 mb-1">سال</label>
                    <input type="number" name="year" value="{{ old('year', $jalaliYear) }}" required min="1400" max="1500"
                           class="w-full px-4 py-2.5 border rounded-lg text-xs">
                </div>

                <div>
                    <label class="block text-xs font-medium text-gray-700 mb-1">ماه</label>
                    <select name="month" required class="w-full px-4 py-2.5 border rounded-lg text-xs">
                        @php $months = ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند']; @endphp
                        @for($m=1; $m<=12; $m++)
                            <option value="{{ $m }}" {{ old('month', $jalaliMonth) == $m ? 'selected' : '' }}>{{ $months[$m-1] }}</option>
                        @endfor
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-xs font-medium text-gray-700 mb-1">توضیحات (اختیاری)</label>
                <textarea name="description" rows="3" class="w-full px-4 py-2.5 border rounded-lg text-xs">{{ old('description') }}</textarea>
            </div>

            <div class="border-t pt-6">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-sm font-bold text-gray-800">آیتم‌های خرید</h3>
                    <button type="button" id="add-item" class="bg-blue-600 text-white px-5 py-2 rounded text-xs hover:bg-blue-700 transition">
                        افزودن آیتم
                    </button>
                </div>

                <div id="items-container" class="space-y-4">
                    <div class="item-row grid grid-cols-1 md:grid-cols-12 gap-4 p-4 bg-gray-50 rounded-lg border">
                        <div class="md:col-span-3">
                            <select name="items[0][load_type]" required class="load-type w-full px-3 py-2 border rounded text-xs">
                                <option value="">نوع بار</option>
                                <option value="base_load">بار پایه</option>
                                <option value="peak_load">اوج‌بار</option>
                                <option value="mid_load">میان‌بار</option>
                                <option value="low_load">کم‌بار</option>
                                <option value="green">برق سبز</option>
                            </select>
                        </div>
                        <div class="md:col-span-2">
                            <input type="number" step="0.001" name="items[0][amount_purchase]" required placeholder="بار خریداری شده" class="amount w-full px-3 py-2 border rounded text-xs">
                        </div>
                        <div class="md:col-span-3">
                            <input type="number" name="items[0][rate_per_kw]" required placeholder="نرخ (ریال)" class="rate w-full px-3 py-2 border rounded text-xs">
                        </div>
                        <div class="md:col-span-3">
                            <input type="text" readonly class="total-kwh w-full px-3 py-2 bg-gray-100 border rounded text-xs font-bold text-blue-700 text-left" placeholder="مقدارکل(کیلووات‌ساعت)">
                        </div>
                        <div class="md:col-span-1 flex items-center justify-center">
                            <button type="button" class="remove-item text-red-600 hover:text-red-800 text-xs">حذف</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-end gap-4 pt-6 border-t">
                <button type="submit" class="bg-gradient-to-r from-green-600 to-emerald-600 text-white px-8 py-3 rounded-lg font-bold text-sm hover:shadow-lg transition">
                    ثبت خرید
                </button>
            </div>
        </form>
    </div>
    <script>
        window.touHours = @json($touHours ?? null);

        if (!window.touHours) {
            console.error('خطا: جدول TOU برای این ماه/سال در دیتابیس تعریف نشده است!');
        }
    </script>
    <script>
        let itemIndex = 1;

        // add new row
        document.getElementById('add-item').addEventListener('click', function() {
            const container = document.getElementById('items-container');
            const row = document.createElement('div');
            row.className = 'item-row grid grid-cols-1 md:grid-cols-12 gap-4 p-4 bg-gray-50 rounded-lg border mt-4';
            row.innerHTML = `
            <div class="md:col-span-3">
                <select name="items[${itemIndex}][load_type]" required class="load-type w-full px-3 py-2 border rounded text-xs">
                    <option value="">نوع بار</option>
                    <option value="base_load">بار پایه</option>
                    <option value="peak_load">اوج‌بار</option>
                    <option value="mid_load">میان‌بار</option>
                    <option value="low_load">کم‌بار</option>
                    <option value="green">برق سبز</option>
                </select>
            </div>
            <div class="md:col-span-2">
                <input type="number" step="0.001" name="items[${itemIndex}][amount_purchase]" required placeholder="بار خریداری شده" class="amount w-full px-3 py-2 border rounded text-xs">
            </div>
            <div class="md:col-span-3">
                <input type="number" name="items[${itemIndex}][rate_per_kw]" required placeholder="نرخ(ریال)" class="rate w-full px-3 py-2 border rounded text-xs">
            </div>
            <div class="md:col-span-3">
                <input type="text" readonly class="total-kwh w-full px-3 py-2 bg-gray-100 border rounded text-xs font-bold text-blue-700 text-left" placeholder="مقدارکل(کیلووات‌ساعت)">
            </div>
            <div class="md:col-span-1 flex items-center justify-center">
                <button type="button" class="remove-item text-red-600 hover:text-red-800 text-xs">حذف</button>
            </div>
        `;
            container.appendChild(row);
            itemIndex++;
        });

        //delete row
        document.addEventListener('click', e => {
            if (e.target.classList.contains('remove-item') && document.querySelectorAll('.item-row').length > 1) {
                e.target.closest('.item-row').remove();
            }
        });

        // The main calculation function — only if touhours came from the database
        function calculateAllKwh() {
            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 year = document.querySelector('[name="year"]')?.value || new Date().getFullYear();
            const month = document.querySelector('[name="month"]')?.value || (new Date().getMonth() + 1);
            // const daysInMonth = new Date(year, month, 0).getDate();
            const daysInMonth = getJalaliDaysInMonth(parseInt(month), parseInt(year));

            document.querySelectorAll('.item-row').forEach(row => {
                const type = row.querySelector('.load-type')?.value;
                const amount = parseFloat(row.querySelector('.amount')?.value) || 0;
                const kwhField = row.querySelector('.total-kwh');

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

                const hours = window.touHours[type];

                if (typeof hours === 'undefined' || hours === null) {
                    kwhField.value = 'ساعت تعریف نشده';
                    kwhField.style.color = 'red';
                    return;
                }

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

        // Any change → recalculation
        document.addEventListener('input', calculateAllKwh);
        document.addEventListener('change', calculateAllKwh);

        // When the page loads
        document.addEventListener('DOMContentLoaded', calculateAllKwh);

        // when a new row added
        const container = document.getElementById('items-container');
        if (container) {
            new MutationObserver(calculateAllKwh).observe(container, { childList: true, subtree: true });
        }
    </script>
@endsection