@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-4 mb-6 border-b pb-5">
            <div>
                <h1 class="text-xl font-bold text-gray-800">سوابق خرید برق ما</h1>
                <p class="text-xs text-gray-500 mt-1">
                    @php
                        $monthNames = ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'];
                        $currentMonth = $month ?? now()->month;
                        $persianDate = \Morilog\Jalali\Jalalian::fromCarbon(now());
                        $currentYear = $year ?? $persianDate->getYear();
                        $displayMonth = $monthNames[$currentMonth - 1];
                        $displayYear = $year ?? $persianDate->getYear();

                        $years = collect(range(1404, 1410));
                        $defaultYear = $year ?? $persianDate->getYear();
                    @endphp
                    در حال نمایش خریدهای ماه:
                    <span class="font-bold text-indigo-700">{{ $displayMonth }} {{ $displayYear }}</span>
                </p>
            </div>

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

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

                    <div id="year-dropdown-container" class="relative w-full sm:w-auto">
                        <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 w-full sm:w-auto">
                        <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.our-purchases.create') }}"
                   class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-2.5 rounded-full text-xs font-medium hover:shadow-lg transition flex items-center justify-center w-full sm:w-auto mt-2 sm:mt-0">
                    <i class="fas fa-plus ml-1"></i>
                    ثبت خرید جدید
                </a>
            </div>
        </div>

        @if(session('success'))
            <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg mb-5 text-xs">
                {{ session('success') }}
            </div>
        @endif

        @php
            $allItems = $purchases->pluck('items')->flatten();
            $baseItems  = $allItems->where('load_type', 'base_load');
            $touItems   = $allItems->whereIn('load_type', ['peak_load', 'mid_load', 'low_load']);
            $greenItems = $allItems->where('load_type', 'green');
        @endphp

        @if($purchases->isEmpty())
            <div class="text-center py-20">
                <i class="fas fa-plug text-9xl text-gray-200 mb-6"></i>
                <p class="text-xl text-gray-500 font-medium">
                    هنوز هیچ خریدی برای <span class="text-indigo-700 font-bold">{{ $displayMonth }} {{ $displayYear }}</span> ثبت نشده است
                </p>
                <a href="{{ route('admin.our-purchases.create') }}"
                   class="mt-6 inline-block bg-blue-600 text-white px-8 py-3 rounded-full text-sm font-medium hover:bg-blue-700 transition">
                    اولین خرید این ماه را ثبت کنید
                </a>
            </div>
        @else

            <div class="space-y-4 sm:hidden">
                @foreach($allItems as $item)
                    <div class="border rounded-lg p-4 shadow-sm hover:shadow-md transition bg-white">
                        <div class="flex justify-between mb-1">
                            <span class="font-medium text-gray-800">{{ $item->purchase->supplier?->name ?? 'نامشخص' }}</span>
                            <div class="flex gap-2">
                                <a href="{{ route('admin.our-purchases.edit', $item->purchase) }}" class="text-blue-600 hover:text-blue-800 text-xs"><i class="fas fa-pen"></i></a>

                                <form action="{{ route('admin.our-purchase-items.destroy', $item) }}" method="POST" onsubmit="return confirm('آیا مطمئن هستید؟');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-800 text-xs"><i class="fas fa-trash-alt"></i></button>
                                </form>
                                <form action="{{ route('admin.our-purchase-items.destroy', $item) }}" method="POST" class="delete-form">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-800 text-xs"><i class="fas fa-trash-alt"></i></button>
                                </form>
                            </div>
                        </div>
                        <div class="text-xs text-gray-600 mb-1">
                            <span>نوع بار: </span>
                            @if($item->load_type == 'base_load') پایه
                            @elseif($item->load_type == 'peak_load') اوج
                            @elseif($item->load_type == 'mid_load') میان
                            @else کم
                            @endif
                        </div>
                        <div class="text-xs text-gray-600 mb-1">بار خریداری شده: <span class="font-mono">{{ number_format($item->amount_purchase,3) }} کیلووات</span></div>
                        <div class="text-xs text-gray-600 mb-1">نرخ: <span class="font-mono">{{ number_format($item->rate_per_kw) }} ریال</span></div>
                        <div class="text-xs text-gray-600 mb-1">مقدار: <span class="font-bold text-indigo-700">{{ number_format($item->total_kwh) }}</span>
                            @if($item->total_kwh % 1000 !== 0) <span class="text-red-600 text-xs">(!)</span> @endif
                        </div>
                        @if(in_array($item->load_type,['base_load','green']))
                            <div class="text-xs text-gray-600">هزینه: <span class="font-bold text-green-700">{{ number_format(($item->total_kwh * $item->rate_per_kw)/1_000_000_000,2) }} میلیارد</span></div>
                        @endif
                    </div>
                @endforeach
            </div>

            <div class="hidden sm:block space-y-8">
                @foreach(['base_load' => ['title'=>'خرید بار پایه','color'=>'blue-50','items'=>$baseItems],
                          'tou' => ['title'=>'خرید بار تفکیکی','color'=>'orange-50','items'=>$touItems],
                          'green' => ['title'=>'خرید برق سبز','color'=>'green-50','items'=>$greenItems]] as $type => $group)
                    @if($group['items']->count())
                        <div class="overflow-x-auto">
                            <h2 class="text-lg font-bold text-gray-800 mb-4">{{ $group['title'] }}</h2>
                            <table class="min-w-full divide-y divide-gray-200 text-xs">
                                <thead class="bg-gradient-to-r @if($type=='base_load') from-blue-600 to-blue-700 @elseif($type=='tou') from-orange-400 to-yellow-400 @else from-green-600 to-emerald-600 @endif text-white">
                                <tr>
                                    <th class="px-5 py-3 text-right">تأمین‌کننده</th>
                                    @if($type=='tou') <th class="px-5 py-3 text-right">نوع‌بار</th> @endif
                                    <th class="px-5 py-3 text-right">بار خریداری شده(کیلووات)</th>
                                    <th class="px-5 py-3 text-right">نرخ(ریال)</th>
                                    <th class="px-5 py-3 text-right">مقدار(کیلووات‌ساعت)</th>
                                    <th class="px-5 py-3 text-right">عملیات</th>
                                </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($group['items'] as $item)
                                    <tr class="hover:{{ $group['color'] }} transition">
                                        <td class="px-5 py-3 font-medium text-gray-800">{{ $item->purchase->supplier?->name ?? 'نامشخص' }}</td>
                                        @if($type=='tou')
                                            <td class="px-5 py-3 text-right">
                                                @if($item->load_type=='peak_load') اوج‌بار
                                                @elseif($item->load_type=='mid_load') میان‌بار
                                                @else کم‌بار
                                                @endif
                                            </td>
                                        @endif
                                        <td class="px-5 py-3 text-right font-mono text-blue-700">{{ number_format($item->amount_purchase,3) }}</td>
                                        <td class="px-5 py-3 text-right font-mono">{{ number_format($item->rate_per_kw) }}</td>
                                        <td class="px-5 py-3 text-right font-bold text-indigo-700">{{ number_format($item->total_kwh) }}@if($item->total_kwh%1000!==0)<span class="text-red-600 text-xs">(!)</span>@endif</td>
                                        <td class="px-5 py-3 text-right flex gap-2 justify-content-start">
                                            <a href="{{ route('admin.our-purchases.edit',$item->purchase) }}" class="text-blue-600 hover:text-blue-800" title="ویرایش"><i class="fas fa-edit"></i></a>

{{--                                            <form action="{{ route('admin.our-purchase-items.destroy', $item) }}" method="POST" onsubmit="return confirm('آیا مطمئن هستید؟');">--}}
{{--                                                @csrf--}}
{{--                                                @method('DELETE')--}}
{{--                                                <button type="submit" class="text-red-600 hover:text-red-800" title="حذف"><i class="fas fa-trash"></i></button>--}}
{{--                                            </form>--}}
                                            <form action="{{ route('admin.our-purchase-items.destroy', $item) }}" method="POST" class="delete-form">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="text-red-600 hover:text-red-800" title="حذف"><i class="fas fa-trash-alt"></i></button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                @endforeach
            </div>

        @endif

    </div>

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

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

        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.our-purchases.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.our-purchases.index') }}?year=${currentYear}&month=${newMonth}`;
            });
        });
    </script>
    <script>

        document.querySelectorAll('.delete-form').forEach(form => {
            form.addEventListener('submit', function(e) {
                e.preventDefault();

                Swal.fire({
                    title: 'مطمئنی می‌خوای حذف کنی؟',
                    text: "این آیتم خرید برای این تأمین‌کننده حذف خواهد شد.",
                    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',
                        actions: 'flex flex-row-reverse'
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        this.submit();
                    }
                });
            });
        });
        @if(session('swal'))
        Swal.fire({
            title: "{{ session('swal.title') }}",
            text: "{{ session('swal.text') }}",
            icon: "{{ session('swal.icon') }}",
            confirmButtonText: 'باشه',
            heightAuto: false,
            width: '360px',
            padding: '1.5rem',
            buttonsStyling: false,
            customClass: {
                confirmButton: 'bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg',
                popup: 'rounded-xl shadow-2xl'
            }
        });
        @endif
    </script>
@endsection