@extends('layouts.admin')
@section('page-title', 'ساعات TOU')

@section('content')
    @php
        $monthNames = ['','فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'];
    @endphp

    <div class="bg-white p-4 sm:p-5 rounded-lg shadow-sm text-sm">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-4 gap-4">
            <h1 class="text-lg font-bold text-gray-800">ساعات TOU</h1>
            <button onclick="openModal()"
                    class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-full text-xs font-bold flex items-center shadow-md transition self-start sm:self-auto">
                <i class="fas fa-plus ml-1"></i> افزودن TOU جدید
            </button>
        </div>

        @if(session('error') && !session('open_modal'))
            <div class="mx-5 mt-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded flex items-center">
                <i class="fas fa-exclamation-triangle ml-2"></i> {{ session('error') }}
            </div>
        @endif

        <div class="hidden sm:block overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200 text-xs">
                <thead class="bg-gradient-to-r from-orange-400 to-yellow-400 text-white">
                <tr>
                    <th class="px-3 py-2 text-center border-l border-white/20 first:border-l-0">ماه</th>
                    <th class="px-3 py-2 text-center border-l border-white/20">سال</th>
                    <th class="px-3 py-2 text-center border-l border-white/20">کم‌باری(ساعت)</th>
                    <th class="px-3 py-2 text-center border-l border-white/20">میان‌باری(ساعت)</th>
                    <th class="px-3 py-2 text-center border-l border-white/20">اوج‌بار(ساعت)</th>
                    <th class="px-3 py-2 text-center">عملیات</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                @forelse($tous as $tou)
                    <tr class="{{ $loop->even ? 'bg-gray-50/50' : 'bg-white' }} hover:bg-gray-100 transition">
                        <td class="px-3 py-2 text-center">
                            {{ $monthNames[$tou['month']] }}
                        </td>
                        <td class="px-3 py-2 text-center font-bold text-blue-700">{{ $tou['year'] }}</td>
                        <td class="px-3 py-2 text-center text-green-600">{{ $tou['lowLoadHours'] }}</td>
                        <td class="px-3 py-2 text-center text-blue-600">{{ $tou['midLoadHours'] }}</td>
                        <td class="px-3 py-2 text-center text-orange-600">{{ $tou['peakLoadHours'] }}</td>
                        <td class="px-3 py-2 text-center">
                            <div class="flex items-center justify-center gap-4">
                                <button type="button" onclick="editTou({{ $tou['id'] }}, {{ $tou['month'] }}, {{ $tou['year'] }}, {{ $tou['lowLoadHours'] }}, {{ $tou['midLoadHours'] }}, {{ $tou['peakLoadHours'] }})"
                                        class="text-blue-600 hover:text-blue-800 transition" title="ویرایش">
                                    <i class="fas fa-edit text-sm"></i>
                                </button>
                                <button type="button" onclick="confirmDelete('{{ $tou['id'] }}', '{{ $monthNames[$tou['month']] }} {{ $tou['year'] }}')"
                                        class="text-red-600 hover:text-red-800 transition" title="حذف">
                                    <i class="fas fa-trash-alt text-sm"></i>
                                </button>
                            </div>
                            <form id="delete-form-{{ $tou['id'] }}" action="{{ route('admin.tou.destroy', $tou['id']) }}" method="POST" class="hidden">
                                @csrf
                                @method('DELETE')
                            </form>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="p-12 text-center text-gray-500">
                            <i class="fas fa-plug text-6xl mb-4 block text-gray-300"></i>
                            <p class="font-bold">هیچ TOU ثبت نشده</p>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="sm:hidden space-y-4">
            @forelse($tous as $tou)
                <div class="bg-gray-50 p-3 rounded-lg shadow-sm flex flex-col gap-2">
                    <div class="flex justify-between items-start">
                        <div class="text-right">
                            <span class="font-medium">
                                {{ $monthNames[$tou['month']] }} {{ $tou['year'] }}
                            </span>
                            <div class="text-xs text-gray-600 mt-1">
                                کم‌باری: <span class="text-green-600 font-medium">{{ $tou['lowLoadHours'] }} ساعت</span><br>
                                میان‌باری: <span class="text-blue-600 font-medium">{{ $tou['midLoadHours'] }} ساعت</span><br>
                                اوج‌بار: <span class="text-orange-600 font-medium">{{ $tou['peakLoadHours'] }} ساعت</span>
                            </div>
                        </div>
                        <div class="flex flex-row-reverse items-center gap-4">
                            <button type="button" onclick="editTou({{ $tou['id'] }}, {{ $tou['month'] }}, {{ $tou['year'] }}, {{ $tou['lowLoadHours'] }}, {{ $tou['midLoadHours'] }}, {{ $tou['peakLoadHours'] }})"
                                    class="text-blue-600 hover:text-blue-800 transition" title="ویرایش">
                                <i class="fas fa-edit text-sm"></i>
                            </button>
                            <button type="button" onclick="confirmDelete('{{ $tou['id'] }}', '{{ $monthNames[$tou['month']] }} {{ $tou['year'] }}')"
                                    class="text-red-600 hover:text-red-800 transition" title="حذف">
                                <i class="fas fa-trash-alt text-sm"></i>
                            </button>
                            <form id="delete-form-{{ $tou['id'] }}" action="{{ route('admin.tou.destroy', $tou['id']) }}" method="POST" class="hidden">
                                @csrf
                                @method('DELETE')
                            </form>
                        </div>
                    </div>
                </div>
            @empty
                <div class="bg-gray-50 p-8 rounded-lg shadow-sm text-center text-gray-500">
                    <i class="fas fa-plug text-6xl mb-4 block text-gray-300"></i>
                    <p class="font-bold">هیچ TOU ثبت نشده</p>
                </div>
            @endforelse
        </div>
    </div>

    <div id="touModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-start justify-center overflow-y-auto pt-10 pb-10">
        <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md mx-4 my-auto">
            <h3 class="text-lg font-bold mb-4 text-right" id="modalTitle">افزودن TOU جدید</h3>

            <form id="touForm" action="{{ route('admin.tou.store') }}" method="POST">
                @csrf
                <input type="hidden" name="_method" id="formMethod" value="POST">

                <div class="grid grid-cols-2 gap-4 mb-4">

                    <div id="modal-month-dropdown-container" class="relative">
                        <button id="modal-month-dropdown-btn" type="button"
                                class="text-xs bg-white rounded-lg border border-gray-300 outline-none font-medium text-gray-700 w-full px-4 py-2.5 flex items-center justify-between transition duration-150 ease-in-out focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            <span id="modal-selected-month-text">ماه را انتخاب کنید</span>
                            <i id="modal-month-icon" class="fas fa-chevron-down mr-2 text-gray-400 text-xs"></i>
                        </button>
                        <div id="modal-month-dropdown-menu"
                             class="absolute z-50 mt-1 w-full rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden overflow-y-auto max-h-60"
                             role="menu">
                            @for($i=1;$i<=12;$i++)
                                <a href="#" data-value="{{ $i }}"
                                   class="modal-month-option block px-4 py-2 text-xs text-gray-700 hover:bg-indigo-50 hover:text-indigo-700">
                                    {{ $monthNames[$i] }}
                                </a>
                            @endfor
                        </div>
                        {{-- input واقعی برای ارسال داده به سرور --}}
                        <input type="hidden" name="month" id="modalMonth" required>
                    </div>

                    <div id="modal-year-dropdown-container" class="relative">
                        <button id="modal-year-dropdown-btn" type="button"
                                class="text-xs bg-white rounded-lg border border-gray-300 outline-none font-medium text-gray-700 w-full px-4 py-2.5 flex items-center justify-between transition duration-150 ease-in-out focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            <span id="modal-selected-year-text">سال را انتخاب کنید</span>
                            <i id="modal-year-icon" class="fas fa-chevron-down mr-2 text-gray-400 text-xs"></i>
                        </button>
                        <div id="modal-year-dropdown-menu"
                             class="absolute z-50 mt-1 w-full rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden overflow-y-auto max-h-60"
                             role="menu">
                            @for($y = 1403; $y <= 1410; $y++)
                                <a href="#" data-value="{{ $y }}"
                                   class="modal-year-option block px-4 py-2 text-xs text-gray-700 hover:bg-indigo-50 hover:text-indigo-700">
                                    {{ $y }}
                                </a>
                            @endfor
                        </div>
                        {{-- input واقعی برای ارسال داده به سرور --}}
                        <input type="hidden" name="year" id="modalYear" required>
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-4 mb-6">
                    <input type="number" name="lowLoadHours" id="modalLow" placeholder="کم‌باری" required min="0" max="24"
                           class="p-3 border rounded-lg text-xs text-center">
                    <input type="number" name="midLoadHours" id="modalMid" placeholder="میان‌باری" required min="0" max="24"
                           class="p-3 border rounded-lg text-xs text-center">
                    <input type="number" name="peakLoadHours" id="modalPeak" placeholder="اوج‌بار" required min="0" max="24"
                           class="p-3 border rounded-lg text-xs text-center">
                </div>

                @if(session('error'))
                    <div class="bg-red-100 border-2 border-red-500 text-red-700 p-4 rounded-lg mb-4 text-xs text-center font-bold shadow-lg animate-pulse">
                        <i class="fas fa-exclamation-triangle ml-2"></i>
                        {{ session('error') }}
                    </div>
                @endif

                <div class="flex justify-end gap-3">
                    <button type="button" onclick="closeModal()"
                            class="px-5 py-2.5 bg-gray-500 text-white rounded-lg hover:bg-gray-600 text-xs">
                        لغو
                    </button>
                    <button type="submit"
                            class="px-6 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-xs font-bold">
                        <i class="fas fa-save ml-1"></i> ذخیره
                    </button>
                </div>
            </form>
        </div>
    </div>

    <script>
        const modalMonthHidden = document.getElementById('modalMonth');
        const modalYearHidden = document.getElementById('modalYear');
        const monthNames = ['', 'فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند'];

        function closeAllModalDropdowns() {
            const monthMenu = document.getElementById('modal-month-dropdown-menu');
            const yearMenu = document.getElementById('modal-year-dropdown-menu');
            const monthIcon = document.getElementById('modal-month-icon');
            const yearIcon = document.getElementById('modal-year-icon');

            if (monthMenu && !monthMenu.classList.contains('hidden')) {
                monthMenu.classList.add('hidden');
                monthIcon?.classList.remove('fa-chevron-up');
                monthIcon?.classList.add('fa-chevron-down');
            }
            if (yearMenu && !yearMenu.classList.contains('hidden')) {
                yearMenu.classList.add('hidden');
                yearIcon?.classList.remove('fa-chevron-up');
                yearIcon?.classList.add('fa-chevron-down');
            }
        }

        function openModal() {
            document.getElementById('touModal').classList.remove('hidden');
        }

        function closeModal() {
            document.getElementById('touModal').classList.add('hidden');
            document.getElementById('touForm').reset();
            document.getElementById('formMethod').value = 'POST';
            document.getElementById('touForm').action = '{{ route('admin.tou.store') }}';
            document.getElementById('modalTitle').textContent = 'افزودن TOU جدید';

            document.getElementById('modal-selected-month-text').textContent = 'ماه را انتخاب کنید';
            document.getElementById('modal-selected-year-text').textContent = 'سال را انتخاب کنید';
            if (modalMonthHidden) modalMonthHidden.value = '';
            if (modalYearHidden) modalYearHidden.value = '';
            closeAllModalDropdowns();
        }

        function editTou(id, month, year, low, mid, peak) {
            openModal();
            document.getElementById('modalTitle').textContent = 'ویرایش TOU';

            document.getElementById('modal-selected-month-text').textContent = monthNames[month];
            document.getElementById('modal-selected-year-text').textContent = year;
            if (modalMonthHidden) modalMonthHidden.value = month;
            if (modalYearHidden) modalYearHidden.value = year;

            document.getElementById('modalLow').value = low;
            document.getElementById('modalMid').value = mid;
            document.getElementById('modalPeak').value = peak;
            document.getElementById('formMethod').value = 'PUT';
            document.getElementById('touForm').action = '{{ url('admin/tou') }}/' + id;
        }


        function setupModalDropdowns() {
            const monthBtn = document.getElementById('modal-month-dropdown-btn');
            const monthMenu = document.getElementById('modal-month-dropdown-menu');
            const yearBtn = document.getElementById('modal-year-dropdown-btn');
            const yearMenu = document.getElementById('modal-year-dropdown-menu');

            [
                { btn: monthBtn, menu: monthMenu, iconId: 'modal-month-icon' },
                { btn: yearBtn, menu: yearMenu, iconId: 'modal-year-icon' }
            ].forEach(d => {
                d.btn?.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const isCurrentlyOpen = !d.menu.classList.contains('hidden');
                    closeAllModalDropdowns(); // بستن بقیه

                    if (!isCurrentlyOpen) {
                        d.menu.classList.remove('hidden');
                        const icon = document.getElementById(d.iconId);
                        icon?.classList.remove('fa-chevron-down');
                        icon?.classList.add('fa-chevron-up');
                    }
                });
            });

            document.querySelectorAll('.modal-month-option').forEach(item => {
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    const value = e.target.dataset.value;
                    const text = e.target.textContent.trim();

                    document.getElementById('modal-selected-month-text').textContent = text;
                    if (modalMonthHidden) modalMonthHidden.value = value;
                    closeAllModalDropdowns();
                });
            });

            document.querySelectorAll('.modal-year-option').forEach(item => {
                item.addEventListener('click', (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    const value = e.target.dataset.value;
                    const text = e.target.textContent.trim();

                    document.getElementById('modal-selected-year-text').textContent = text;
                    if (modalYearHidden) modalYearHidden.value = value;
                    closeAllModalDropdowns();
                });
            });

            document.getElementById('touModal')?.addEventListener('click', (e) => {
                const monthContainer = document.getElementById('modal-month-dropdown-container');
                const yearContainer = document.getElementById('modal-year-dropdown-container');

                if (e.target.closest('#touModal') &&
                    !e.target.closest('#modal-month-dropdown-container') &&
                    !e.target.closest('#modal-year-dropdown-container')) {
                    closeAllModalDropdowns();
                }
            });
        }

        function confirmDelete(id, name) {
            Swal.fire({
                title: 'مطمئنی می‌خوای حذف کنی؟',
                text: `"${name}" حذف بشه؟`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'بله',
                cancelButtonText: 'خیر',
                reverseButtons: true,
                heightAuto: false,
                width: '360px',
                padding: '1.5rem',
                buttonsStyling: false,
                customClass: {
                    title: 'text-lg font-bold',
                    text: 'text-sm text-gray-600',
                    confirmButton: 'bg-red-600 hover:bg-red-700 text-white font-medium py-2 px-6 rounded-lg mx-1',
                    cancelButton: 'bg-gray-500 hover:bg-gray-600 text-white font-medium py-2 px-6 rounded-lg mx-1',
                    popup: 'rounded-xl shadow-2xl'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            setupModalDropdowns();

            @if(session('success'))
            Swal.fire({
                title: 'موفقیت‌آمیز!',
                text: '{{ session('success') }}',
                icon: 'success',
                confirmButtonText: 'باشه',
                heightAuto: false,
                width: '360px',
                padding: '1.5rem',
                buttonsStyling: false,
                customClass: {
                    title: 'text-lg font-bold',
                    text: 'text-sm text-gray-600',
                    confirmButton: 'bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg mx-1',
                    popup: 'rounded-xl shadow-2xl'
                }
            });
            @endif

            @if(session('open_modal'))
            openModal();

            @if(old('month'))
            document.getElementById('modal-selected-month-text').textContent = monthNames[{{ old('month') }}];
            if (modalMonthHidden) modalMonthHidden.value = '{{ old('month') }}';

            document.getElementById('modal-selected-year-text').textContent = '{{ old('year') }}';
            if (modalYearHidden) modalYearHidden.value = '{{ old('year') }}';

            document.getElementById('modalLow').value = '{{ old('lowLoadHours') }}';
            document.getElementById('modalMid').value = '{{ old('midLoadHours') }}';
            document.getElementById('modalPeak').value = '{{ old('peakLoadHours') }}';

            @if(url()->current() != route('admin.tou.store') && old('_method') === 'PUT')
            document.getElementById('modalTitle').textContent = 'ویرایش TOU';
            document.getElementById('formMethod').value = 'PUT';
            @else
            document.getElementById('modalTitle').textContent = 'افزودن TOU جدید';
            @endif
            @endif
            @endif
        });
    </script>
@endsection