@extends('layouts.customer')
@section('page-title', 'سوابق مصرف برق')

@section('content')
    <div class="bg-white p-5 rounded-lg shadow-sm text-sm flex flex-col h-full">

        <!-- box data -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-4 rounded-lg shadow text-center">
                <p class="text-xs opacity-90">مشترک</p>
                <p class="text-base font-bold truncate">{{ auth('customer')->user()->company_name ?? 'مشترک' }}</p>
            </div>
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 text-white p-4 rounded-lg shadow text-center">
                <p class="text-xs opacity-90">شناسه قبض</p>
                <p class="text-base font-bold font-mono" dir="ltr">{{ auth('customer')->user()->bill_id ?? '—' }}</p>
            </div>
            <div class="bg-gradient-to-r from-green-500 to-emerald-600 text-white p-4 rounded-lg shadow text-center">
                <p class="text-xs opacity-90">آخرین دوره</p>
                <p class="text-base font-bold">آذر ۱۴۰۴</p>
            </div>
            <div class="bg-gradient-to-r from-orange-500 to-yellow-500 text-white p-4 rounded-lg shadow text-center">
                <p class="text-xs opacity-90">کل مصرف (ماه جاری)</p>
                <p class="text-base font-bold">۱۲,۴۵۰ kWh</p>
            </div>
            <div class="bg-gradient-to-r from-red-500 to-pink-600 text-white p-4 rounded-lg shadow text-center">
                <p class="text-xs opacity-90">وضعیت کنتور</p>
                <p class="text-base font-bold flex items-center justify-center gap-1">
                    <span class="w-2 h-2 bg-green-300 rounded-full animate-pulse"></span>
                    آنلاین
                </p>
            </div>
        </div>

        <!-- عنوان + فیلتر دوره -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4 pb-3 border-b border-gray-200">
            <h1 class="text-lg font-bold text-gray-800">سوابق مصرف برق به تفکیک دوره</h1>

            <div class="flex items-center gap-3">
                <select class="px-4 py-2 border border-gray-300 rounded-lg text-xs focus:ring-2 focus:ring-blue-500">
                    <option>آذر ۱۴۰۴</option>
                    <option>آبان ۱۴۰۴</option>
                    <option>مهر ۱۴۰۴</option>
                    <option>شهریور ۱۴۰۴</option>
                </select>
                <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-xs font-medium">
                    اعمال فیلتر
                </button>
            </div>
        </div>

        <!-- table consumption -->
        <div class="flex-1 overflow-y-auto border border-gray-200 rounded-lg min-h-0">
            <table class="min-w-full text-xs">
                <thead class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white sticky top-0 z-10">
                <tr>
                    <th class="px-4 py-3 text-center border-l border-white/20 first:border-l-0">دوره</th>
                    <th class="px-4 py-3 text-center border-l border-white/20">اوج‌بار (kWh)</th>
                    <th class="px-4 py-3 text-center border-l border-white/20">میان‌بار (kWh)</th>
                    <th class="px-4 py-3 text-center border-l border-white/20">کم‌بار (kWh)</th>
                    <th class="px-4 py-3 text-center border-l border-white/20">راکتیو (kVArh)</th>
                    <th class="px-4 py-3 text-center border-l border-white/20">کل مصرف (kWh)</th>
                    <th class="px-4 py-3 text-center border-l border-white/20">ضریب توان</th>
                    <th class="px-4 py-3 text-center">عملیات</th>
                </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">

                @php
                    $consumptions = collect(); // فعلاً خالیه تا API وصل بشه
                @endphp

                @forelse($consumptions as $item)
                    <tr class="hover:bg-indigo-50 transition {{ $loop->even ? 'bg-gray-50/30' : '' }}">
                        <td class="px-4 py-3 text-center font-medium">{{ $item->period }}</td>
                        <td class="px-4 py-3 text-center font-mono text-red-600 font-bold">{{ number_format($item->peak) }}</td>
                        <td class="px-4 py-3 text-center font-mono text-yellow-600 font-bold">{{ number_format($item->mid) }}</td>
                        <td class="px-4 py-3 text-center font-mono text-green-600 font-bold">{{ number_format($item->low) }}</td>
                        <td class="px-4 py-3 text-center font-mono text-orange-600">{{ number_format($item->reactive) }}</td>
                        <td class="px-4 py-3 text-center font-mono text-indigo-700 font-bold">{{ number_format($item->total) }}</td>
                        <td class="px-4 py-3 text-center">
                            <span class="px-2 py-1 {{ $item->power_factor >= 0.9 ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700' }} rounded-full text-xs font-bold">
                                {{ number_format($item->power_factor, 2) }}
                            </span>
                        </td>
                        <td class="px-4 py-3 text-center">
                            <button class="text-indigo-600 hover:text-indigo-800 text-xs font-medium underline">
                                جزئیات کامل
                            </button>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="text-center py-16 text-gray-500">
                            <i class="fas fa-chart-line text-6xl text-gray-200 mb-4 block"></i>
{{--                            <p class="text-sm font-medium"> دریافت اطلاعات مصرف شما از سامانه برقمن ...</p>--}}
{{--                            <p class="text-xs text-gray-400 mt-2">به محض اتصال API، سوابق مصرف شما نمایش داده خواهد شد</p>--}}
                            <p class="text-xs text-gray-400 mt-2">چند ثانیه صبر کنید.سوابق مصرف شما نمایش داده خواهد شد</p>
                        </td>
                    </tr>
                @endforelse

                </tbody>
            </table>
        </div>

        <!-- pagination -->
        <div class="mt-4 flex justify-center shrink-0">
{{--            <div class="text-xs text-gray-500">در حال بارگذاری داده‌ها...</div>--}}
{{--            <div class="text-xs text-gray-500">در حال توسعه...</div>--}}
        </div>
    </div>
@endsection