@extends('layouts.admin')

@section('page-title', 'تخصیص ماهانه')

@section('content')

    <div class="bg-white p-4 sm:p-6 rounded-lg shadow-sm text-sm">

        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3 mb-6 border-b pb-5 w-full">
            <div>
                <h1 class="text-lg sm:text-xl font-bold text-gray-800">تخصیص‌های ماهانه مشترکان</h1>
                <p class="text-xs text-gray-500 mt-1">
                    @php
                        $monthNames = ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'];
                        //Define current variables for use in scripts and displays
                        //assume $month and $year come from the controller
                        $currentMonth = $month ?? \Morilog\Jalali\Jalalian::now()->getMonth();
                        $currentYear = $year ?? \Morilog\Jalali\Jalalian::now()->getYear();
                        $displayMonth = $monthNames[$currentMonth - 1];
                        $displayYear = $currentYear;

                        $years = collect(range(1404, 1410));
                        $defaultYear = $currentYear;
                    @endphp
                    در حال نمایش تخصیص‌های ماه:
                    <span class="font-bold text-indigo-700">{{ $displayMonth }} {{ $displayYear }}</span>
                    — تعداد: {{ $allocations->count() }} مشترک
                </p>
            </div>

            <div class="flex flex-col sm:flex-row items-start sm:items-center gap-3 mt-2 sm:mt-0 w-full sm:w-auto sm:mr-auto">

                <div class="flex flex-wrap sm:flex-row items-center gap-2 w-full sm:w-auto">

                    <div id="year-dropdown-container" class="relative flex-1 sm:flex-initial">
                        <button id="year-dropdown-btn" type="button"
                                class="text-xs bg-gray-100 rounded-lg border border-gray-300 outline-none font-medium text-gray-700 w-full px-4 py-2 flex items-center justify-between transition duration-150 ease-in-out hover:border-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            {{ $displayYear }}
                            <i class="fas fa-chevron-down mr-2 text-gray-400 text-xs"></i>
                        </button>

                        <div id="year-dropdown-menu"
                             class="absolute z-50 mt-1 w-full sm:w-32 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden overflow-y-auto max-h-60"
                             role="menu" aria-orientation="vertical" aria-labelledby="year-dropdown-btn">
                            @foreach($years as $y)
                                <a href="#" data-year="{{ $y }}"
                                   class="year-option block px-4 py-2 text-xs text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 {{ $y == $defaultYear ? 'bg-indigo-50 text-indigo-700 font-bold' : '' }}">
                                    {{ $y }}
                                </a>
                            @endforeach
                        </div>
                    </div>

                    <div id="month-dropdown-container" class="relative flex-1 sm:flex-initial">
                        <button id="month-dropdown-btn" type="button"
                                class="text-xs bg-gray-100 rounded-lg border border-gray-300 outline-none font-medium text-gray-700 w-full px-4 py-2 flex items-center justify-between transition duration-150 ease-in-out hover:border-gray-400 focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                            {{ $displayMonth }}
                            <i class="fas fa-chevron-down mr-2 text-gray-400 text-xs"></i>
                        </button>

                        <div id="month-dropdown-menu"
                             class="absolute z-50 mt-1 w-full sm:w-40 rounded-lg shadow-lg bg-white ring-1 ring-black ring-opacity-5 hidden overflow-y-auto max-h-60"
                             role="menu" aria-orientation="vertical" aria-labelledby="month-dropdown-btn">
                            @for($m = 1; $m <= 12; $m++)
                                <a href="#" data-month="{{ $m }}"
                                   class="month-option block px-4 py-2 text-xs text-gray-700 hover:bg-indigo-50 hover:text-indigo-700 {{ $m == $currentMonth ? 'bg-indigo-50 text-indigo-700 font-bold' : '' }}">
                                    {{ $monthNames[$m - 1] }}
                                </a>
                            @endfor
                        </div>
                    </div>
                </div>

                <a href="{{ route('admin.monthly-allocations.create', ['year' => $currentYear, 'month' => $currentMonth]) }}"
                   class="bg-blue-600 text-white px-4 py-2 rounded-full text-xs hover:bg-blue-700 transition flex items-center justify-center w-full sm:w-auto">
                    <i class="fas fa-plus ml-1"></i>
                    افزودن تخصیص جدید
                </a>
            </div>
        </div>

        <div class="hidden sm:block overflow-x-auto">
            <table class="min-w-[1200px] divide-y divide-gray-200 text-xs">
                <thead class="bg-gradient-to-r from-orange-400 to-yellow-400 text-white font-bold">
                <tr>
                    <th class="px-2 py-2 text-right border-l border-white/20 first:border-l-0">نام‌مشترک</th>
                    <th class="px-2 py-2 text-right border-l border-white/20">مالک‌شبکه</th>
                    <th class="px-2 py-2 text-right border-l border-white/20">شناسه‌قبض</th>
                    <th class="px-2 py-2 text-right border-l border-white/20">دیماند</th>
                    <th class="px-2 py-2 text-right border-l border-white/20">بار پایه</th>
                    <th class="px-2 py-2 text-right border-l border-white/20">میان‌باری</th>
                    <th class="px-2 py-2 text-right border-l border-white/20">اوج‌بار</th>
                    <th class="px-2 py-2 text-right border-l border-white/20">کم‌باری</th>
                    <th class="px-2 py-2 text-right border-l border-white/20">نرخ</th>
                    <th class="px-2 py-2 text-right hidden md:table-cell">برق سبز</th>
                    <th class="px-2 py-2 text-right hidden md:table-cell">نرخ‌برق‌سبز</th>
                    <th class="px-2 py-2 text-right">هزینه‌کل</th>
                    <th class="px-2 py-2 text-right">پیگیری‌کننده</th>
                    <th class="px-2 py-2 text-right">عملیات</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                @forelse($allocations as $alloc)
                    <tr class="{{ $loop->even ? 'bg-gray-50/50' : 'bg-white' }} hover:bg-gray-100 transition">
                        <td class="px-2 py-1 text-right font-medium">{{ Str::limit($alloc->customer->company_name, 20) }}</td>
                        <td class="px-2 py-1 text-right text-xs"><span title="{{ $alloc->customer->subscription?->networkOwner?->name ?? 'نامشخص' }}" class="inline-block max-w-40 truncate hover:text-blue-600 cursor-help transition-colors duration-200 border-b border-dotted border-transparent hover:border-blue-400">{{ Str::limit($alloc->customer->subscription?->networkOwner?->name ?? '-', 20) }}</span></td>
                        <td class="px-2 py-1 text-right font-mono text-blue-700">{{ $alloc->customer->bill_id }}</td>
                        <td class="px-2 py-1 text-center text-xs">{{ $alloc->customer->subscription?->contract_power ?? '-' }}</td>
                        <td class="px-2 py-1 text-center font-medium text-gray-800">{{ $alloc->base_load }}</td>
                        <td class="px-2 py-1 text-center text-yellow-600 font-medium">{{ $alloc->mid_load }}</td>
                        <td class="px-2 py-1 text-center text-red-600 font-medium">{{ $alloc->peak_load }}</td>
                        <td class="px-2 py-1 text-center text-green-600 font-medium">{{ $alloc->low_load }}</td>
                        <td class="px-2 py-1 text-center font-mono text-gray-700">{{ number_format($alloc->rate) }}</td>
                        <td class="px-2 py-1 text-center text-emerald-600 font-medium hidden md:table-cell">{{ $alloc->green_power }}</td>
                        <td class="px-2 py-1 text-center text-emerald-600 font-medium hidden md:table-cell">{{ $alloc->green_rate }}</td>
                        <td class="px-2 py-1 text-right font-bold text-green-700 text-xs">{{ number_format($alloc->calculateTotalCost() ?? 0) }}</td>
                        <td class="px-2 py-1 text-center"><span class="inline-block px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs font-medium whitespace-nowrap">{{ $alloc->customer->admin?->name ?? 'تعیین نشده' }}</span></td>
                        <td class="px-2 py-1 text-center whitespace-nowrap">
                            <div class="flex justify-center items-center gap-2">
                                <a href="{{ route('admin.monthly-allocations.edit', $alloc->id) }}" class="text-indigo-600 hover:text-indigo-800 transition" title="ویرایش"><i class="fas fa-edit text-sm"></i></a>
                                <button type="button" onclick="confirmDelete({{ $alloc->id }}, '{{ addslashes($alloc->customer->company_name) }}')" class="text-red-600 hover:text-red-800 transition" title="حذف"><i class="fas fa-trash-alt text-sm"></i></button>
                                <form id="delete-form-{{ $alloc->id }}" action="{{ route('admin.monthly-allocations.destroy', $alloc->id) }}" method="POST" class="hidden">@csrf @method('DELETE')</form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="14" class="text-center py-8 text-gray-500">
                            <i class="fas fa-inbox text-4xl mb-3 block text-gray-300"></i>
                            <p class="text-sm">هنوز هیچ تخصیصی ثبت نشده</p>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>

        <div class="sm:hidden space-y-3">
            @foreach($allocations as $alloc)
                <div class="bg-gray-50 p-3 rounded-lg shadow-sm flex flex-col gap-1">
                    <div class="flex justify-between items-start">
                        <span class="font-medium text-right text-sm">{{ Str::limit($alloc->customer->company_name, 20) }}</span>
                        <div class="flex flex-row-reverse items-center gap-2">
                            <a href="{{ route('admin.monthly-allocations.edit', $alloc->id) }}" class="text-indigo-600 hover:text-indigo-800 transition"><i class="fas fa-edit text-sm"></i></a>
                            <button type="button" onclick="confirmDelete({{ $alloc->id }}, '{{ addslashes($alloc->customer->company_name) }}')" class="text-red-600 hover:text-red-800 transition"><i class="fas fa-trash text-sm"></i></button>
                            <form id="delete-form-{{ $alloc->id }}" action="{{ route('admin.monthly-allocations.destroy', $alloc->id) }}" method="POST" class="hidden">@csrf @method('DELETE')</form>
                        </div>
                    </div>
                    <p class="text-gray-600 text-right text-xs font-medium">مالک شبکه: {{ Str::limit($alloc->customer->subscription?->networkOwner?->name ?? '-', 15) }}</p>
                    <p class="text-gray-600 text-right text-xs font-mono">شناسه قبض: {{ $alloc->customer->bill_id }}</p>
                    <p class="text-gray-600 text-right text-xs text-center">دیماند: {{ $alloc->customer->subscription?->contract_power ?? '-' }}</p>
                    <div class="flex flex-wrap justify-between text-xs gap-1 mt-1">
                        <span>بار پایه: {{ $alloc->base_load }}</span>
                        <span class="text-yellow-600">میان‌باری: {{ $alloc->mid_load }}</span>
                        <span class="text-red-600">اوج‌بار: {{ $alloc->peak_load }}</span>
                        <span class="text-green-600">کم‌باری: {{ $alloc->low_load }}</span>
                    </div>
                    <div class="flex flex-wrap justify-between text-xs gap-1 mt-1">
                        <span>نرخ: {{ number_format($alloc->rate) }}</span>
                        <span>برق سبز: {{ $alloc->green_power }}</span>
                        <span>نرخ برق سبز: {{ $alloc->green_rate }}</span>
                    </div>
                    <p class="text-gray-700 font-bold text-xs text-right mt-1">هزینه کل: {{ number_format($alloc->calculateTotalCost() ?? 0) }}</p>
                    <p class="text-gray-600 text-right text-xs mt-0.5">پیگیری‌کننده: {{ $alloc->customer->admin?->name ?? 'تعیین نشده' }}</p>
                </div>
            @endforeach
        </div>

        <div class="mt-6 bg-gradient-to-r from-indigo-600 to-blue-700 text-white rounded-xl shadow-lg p-4 sm:p-5">
            <h3 class="text-lg font-bold mb-3 text-center">
                جمع کل تخصیص‌های ماه {{ $displayMonth }} {{ $displayYear }}
            </h3>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-4 text-center">
                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3">
                    <p class="text-xs opacity-90">بار پایه</p>
                    <p class="text-sm sm:text-l font-bold">{{ number_format($totals['base_load']) }} کیلووات</p>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3">
                    <p class="text-xs opacity-90">اوج‌بار</p>
                    <p class="text-sm sm:text-l font-bold text-red-300">{{ number_format($totals['peak_load']) }} کیلووات</p>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3">
                    <p class="text-xs opacity-90">میان‌بار</p>
                    <p class="text-sm sm:text-l font-bold text-yellow-300">{{ number_format($totals['mid_load']) }} کیلووات</p>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3">
                    <p class="text-xs opacity-90">کم‌بار</p>
                    <p class="text-sm sm:text-l font-bold text-green-300">{{ number_format($totals['low_load']) }} کیلووات</p>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3">
                    <p class="text-xs opacity-90">برق سبز</p>
                    <p class="text-sm sm:text-l font-bold text-emerald-300">{{ number_format($totals['green_power']) }} کیلووات</p>
                </div>
                <div class="bg-white/10 backdrop-blur-sm rounded-lg p-2 sm:p-3 col-span-2 md:col-span-3 lg:col-span-1">
                    <p class="text-xs opacity-90">جمع کل توان</p>
                    <p class="text-sm sm:text-l font-extra-bold text-yellow-300">{{ number_format($totals['total_power']) }} کیلووات</p>
                </div>
            </div>
        </div>

        @if(method_exists($allocations, 'links'))
            <div class="mt-4 flex justify-center">
                {{ $allocations->appends(request()->query())->links('pagination::tailwind') }}
            </div>
        @endif

    </div>

    <script>
        // Month Dropdown Variables
        const monthDropdownBtn = document.getElementById('month-dropdown-btn');
        const monthDropdownMenu = document.getElementById('month-dropdown-menu');

        // Year Dropdown Variables
        const yearDropdownBtn = document.getElementById('year-dropdown-btn');
        const yearDropdownMenu = document.getElementById('year-dropdown-menu');

        // PHP variables for use in JS
        const currentMonth = {{ $currentMonth }};
        const currentYear = {{ $currentYear }};

        function closeAllDropdowns() {
            [
                { btn: monthDropdownBtn, menu: monthDropdownMenu },
                { btn: yearDropdownBtn, menu: yearDropdownMenu }
            ].forEach(d => {
                if (d.menu && !d.menu.classList.contains('hidden')) {
                    d.menu.classList.add('hidden');
                    const icon = d.btn.querySelector('i');
                    if (icon) {
                        icon.classList.remove('fa-chevron-up');
                        icon.classList.add('fa-chevron-down');
                    }
                }
            });
        }

        function setupDropdownToggle(btn, menu) {
            btn?.addEventListener('click', (e) => {
                e.stopPropagation();

                const isCurrentlyOpen = !menu.classList.contains('hidden');
                closeAllDropdowns();

                if (!isCurrentlyOpen) {
                    menu.classList.remove('hidden');
                    const icon = btn.querySelector('i');
                    if (icon) {
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-up');
                    }
                }
            });

            menu?.addEventListener('click', (e) => {
                if (!e.target.matches('a')) {
                    closeAllDropdowns();
                }
            });
        }

        setupDropdownToggle(yearDropdownBtn, yearDropdownMenu);
        setupDropdownToggle(monthDropdownBtn, monthDropdownMenu);

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

            if (yearContainer && !yearContainer.contains(event.target) &&
                monthContainer && !monthContainer.contains(event.target)) {
                closeAllDropdowns();
            }
        });

        document.querySelectorAll('.year-option').forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                closeAllDropdowns();

                const newYear = e.target.dataset.year;
                window.location = `{{ route('admin.monthly-allocations.index') }}?year=${newYear}&month=${currentMonth}`;
            });
        });

        document.querySelectorAll('.month-option').forEach(item => {
            item.addEventListener('click', (e) => {
                e.preventDefault();
                closeAllDropdowns();

                const newMonth = e.target.dataset.month;
                window.location = `{{ route('admin.monthly-allocations.index') }}?year=${currentYear}&month=${newMonth}`;
            });
        });

        function confirmDelete(id, name) {
            Swal.fire({
                title: 'حذف تخصیص؟',
                text: ` ${name} مطمئنی حذف بشه؟`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'بله، حذف کن',
                cancelButtonText: 'نه، لغو',
                reverseButtons: true,
                width: '380px',
                padding: '1.8rem',
                buttonsStyling: false,
                customClass: {
                    confirmButton: 'bg-red-600 hover:bg-red-700 text-white font-bold py-2.5 px-7 rounded-lg mx-2 shadow-lg',
                    cancelButton: 'bg-gray-500 hover:bg-gray-600 text-white font-bold py-2.5 px-7 rounded-lg mx-2 shadow-lg',
                    popup: 'rounded-2xl shadow-2xl'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('delete-form-' + id).submit();
                }
            });
        }
    </script>

@endsection