@extends('layouts.admin')
@section('page-title', 'نرخ‌های انرژی')

@section('content')
    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
        <div class="bg-gradient-to-r from-blue-700 to-blue-800 text-white p-5">
            <div class="flex justify-between items-center">
                <div>
                    <h1 class="text-xl font-bold flex items-center gap-3">
                        <i class="fas fa-coins"></i>
                        نرخ‌های انرژی
                    </h1>
                    <p class="text-xs mt-1 opacity-90">لیست نرخ‌های انرژی</p>
                </div>
            </div>
        </div>

        <div class="p-5">
            <div class="flex justify-between items-center mb-5">
                <div class="relative flex-1 max-w-md">
                    <input type="text" id="search" placeholder="جستجو در نام، ماه یا سال..."
                           class="w-full px-4 py-2.5 pr-10 border border-gray-300 rounded-lg text-xs focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
                    <i class="fas fa-search absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 text-xs"></i>
                </div>

                <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg text-xs font-bold flex items-center shadow-md transition mr-3">
                    <i class="fas fa-plus ml-1"></i>
                    افزودن نرخ جدید
                </a>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full text-xs border-collapse">
                    <thead>
                    <tr class="bg-sky-100 text-blue-800 font-bold">
                        <th class="p-3 text-right border-b border-sky-200">نام نرخ</th>
                        <th class="p-3 text-center border-b border-sky-200">ماه</th>
                        <th class="p-3 text-center border-b border-sky-200">سال</th>
                        <th class="p-3 text-right border-b border-sky-200">کم‌باری</th>
                        <th class="p-3 text-right border-b border-sky-200">میان‌باری</th>
                        <th class="p-3 text-right border-b border-sky-200">اوج‌بار</th>
                        <th class="p-3 text-right border-b border-sky-200">برق سبز</th>
                    </tr>
                    </thead>
                    <tbody id="ratesTable">
                    <tr class="hover:bg-sky-50 transition">
                        <td class="p-3 text-right font-bold text-blue-700 border-b">بازار عمده‌فروشی</td>
                        <td class="p-3 text-center border-b">آذر</td>
                        <td class="p-3 text-center font-bold border-b">۱۴۰۴</td>
                        <td class="p-3 text-right text-green-600 border-b">۴۵۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-blue-600 border-b">۸۵۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-orange-600 border-b">۱,۲۰۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-emerald-600 border-b">۳۰۰,۰۰۰ ریال</td>
                    </tr>
                    <tr class="hover:bg-sky-50 transition">
                        <td class="p-3 text-right font-bold text-blue-700 border-b">تعرفه صنعتی</td>
                        <td class="p-3 text-center border-b">مهر</td>
                        <td class="p-3 text-center font-bold border-b">۱۴۰۴</td>
                        <td class="p-3 text-right text-green-600 border-b">۳۸۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-blue-600 border-b">۷۲۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-orange-600 border-b">۱,۱۰۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-emerald-600 border-b">۲۸۰,۰۰۰ ریال</td>
                    </tr>
                    <tr class="hover:bg-sky-50 transition">
                        <td class="p-3 text-right font-bold text-blue-700 border-b">تعرفه کشاورزی</td>
                        <td class="p-3 text-center border-b">شهریور</td>
                        <td class="p-3 text-center font-bold border-b">۱۴۰۳</td>
                        <td class="p-3 text-right text-green-600 border-b">۲۵۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-blue-600 border-b">۴۸۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-orange-600 border-b">۷۵۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-emerald-600 border-b">۲۰۰,۰۰۰ ریال</td>
                    </tr>
                    <tr class="hover:bg-sky-50 transition">
                        <td class="p-3 text-right font-bold text-blue-700 border-b">بازار خرده‌فروشی</td>
                        <td class="p-3 text-center border-b">دی</td>
                        <td class="p-3 text-center font-bold border-b">۱۴۰۴</td>
                        <td class="p-3 text-right text-green-600 border-b">۵۲۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-blue-600 border-b">۹۵۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-orange-600 border-b">۱,۴۰۰,۰۰۰ ریال</td>
                        <td class="p-3 text-right text-emerald-600 border-b">۳۵۰,۰۰۰ ریال</td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div id="noResult" class="hidden text-center p-10 text-gray-500 mt-5">
                <i class="fas fa-inbox text-5xl mb-4 block"></i>
                <p class="text-sm">هیچ نرخی با این مشخصات پیدا نشد!</p>
            </div>
        </div>
    </div>

    <script>
        const rows = Array.from(document.querySelectorAll('#ratesTable tr'));

        function filterTable() {
            const search = document.getElementById('search').value.toLowerCase().trim();
            let visibleCount = 0;

            rows.forEach(row => {
                const cells = row.querySelectorAll('td');
                const name = cells[0].textContent.toLowerCase();
                const month = cells[1].textContent;
                const year = cells[2].textContent;

                const match = name.includes(search) || month.includes(search) || year.includes(search);

                if (match || search === '') {
                    row.style.display = '';
                    visibleCount++;
                } else {
                    row.style.display = 'none';
                }
            });

            document.getElementById('noResult').classList.toggle('hidden', visibleCount > 0);
        }

        document.getElementById('search').addEventListener('input', filterTable);
        filterTable();
    </script>
@endsection