@extends('layouts.admin')
@section('page-title', 'داشبورد مدیریت')

@section('content')
    <div class="p-4 md:p-6 max-w-7xl mx-auto space-y-6">

        <div class="bg-gradient-to-r from-[#0284c7] to-[#0c4a6e] rounded-xl p-6 text-white shadow-lg relative overflow-hidden">
            <div class="absolute inset-0 bg-white/10 backdrop-blur-sm"></div>
            <div class="absolute -top-4 -right-4 opacity-10">
                <i class="fas fa-bolt text-8xl"></i>
            </div>
            <div class="relative z-10 flex items-center justify-between">
                <div>
                    <h1 class="text-xl font-bold">{{ auth()->user()->name ?? 'مدیر' }}!</h1>
                    <p class="text-sm opacity-90 mt-1">مدیریت هوشمند تیوان انرژی</p>
                </div>
                <div class="text-right">
                    <p class="text-xs opacity-80 iran-date">{{ now()->setTimezone('Asia/Tehran')->translatedFormat('l d F Y') }}</p>
                    <p class="text-2xl font-bold mt-1 iran-time">{{ now()->setTimezone('Asia/Tehran')->format('H:i') }}</p>
                </div>
            </div>
        </div>

        @php
            $totalContracts = \App\Models\Contract::count();
            $pendingContracts = \App\Models\Contract::where('status', 'pending')->count();
            $rateAssignedContracts = \App\Models\Contract::where('status', 'rate_assigned')->count();
            $confirmedContracts = \App\Models\Contract::where('status', 'confirmed')->count();
            $rejectedContracts = \App\Models\Contract::where('status', 'rejected')->count();
            $expiredContracts = \App\Models\Contract::where('status', 'expired')->orWhere('end_date', '<', now())->count();
        @endphp

        <div class="grid grid-cols-2 md:grid-cols-6 gap-4">
            <div class="bg-white rounded-lg shadow-sm p-4 border-t-4 border-gray-400">
                <p class="text-xs text-gray-600">کل قراردادها</p>
                <p class="text-xl font-bold text-gray-800 mt-1">{{ number_format($totalContracts) }}</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-4 border-t-4 border-orange-400">
                <p class="text-xs text-gray-600">در انتظار بررسی</p>
                <p class="text-xl font-bold text-orange-600 mt-1">{{ number_format($pendingContracts) }}</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-4 border-t-4 border-blue-400">
                <p class="text-xs text-gray-600">نرخ تعیین شده</p>
                <p class="text-xl font-bold text-blue-600 mt-1">{{ number_format($rateAssignedContracts) }}</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-4 border-t-4 border-green-400">
                <p class="text-xs text-gray-600">تأیید نهایی</p>
                <p class="text-xl font-bold text-green-600 mt-1">{{ number_format($confirmedContracts) }}</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-4 border-t-4 border-red-400">
                <p class="text-xs text-gray-600">رد شده</p>
                <p class="text-xl font-bold text-red-600 mt-1">{{ number_format($rejectedContracts) }}</p>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-4 border-t-4 border-gray-600">
                <p class="text-xs text-gray-600">منقضی شده</p>
                <p class="text-xl font-bold text-gray-800 mt-1">{{ number_format($expiredContracts) }}</p>
            </div>
        </div>

        <!-- charts -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div class="bg-white rounded-lg shadow-sm p-5">
                <h3 class="text-sm font-bold text-gray-700 mb-4">وضعیت قراردادها</h3>
                <canvas id="contractChart" height="200"></canvas>
            </div>
            <div class="bg-white rounded-lg shadow-sm p-5">
                <h3 class="text-sm font-bold text-gray-700 mb-4">مصرف ماهانه (مگاوات ساعت)</h3>
                <canvas id="consumptionChart" height="200"></canvas>
            </div>
        </div>

        <!--last contract -->
        <div class="bg-white rounded-lg shadow-sm p-5">
            <h3 class="text-sm font-bold text-gray-700 mb-4">آخرین قراردادهای فعال</h3>
            <div class="overflow-x-auto">
                <table class="min-w-full text-xs">
                    <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-right text-gray-600">مشتری</th>
                        <th class="px-4 py-3 text-right text-gray-600">شناسه قبض</th>
                        <th class="px-4 py-3 text-right text-gray-600">نرخ فروش (ریال/kWh)</th>
                        <th class="px-4 py-3 text-right text-gray-600">قدرت قراردادی (kW)</th>
                        <th class="px-4 py-3 text-right text-gray-600">وضعیت</th>
                    </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                    @php
                        $latestContracts = \App\Models\Contract::with('customer')
                            ->whereIn('status', ['rate_assigned', 'confirmed'])
                            ->orderBy('created_at', 'desc')
                            ->limit(10)
                            ->get();
                    @endphp

                    @forelse($latestContracts as $contract)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-right">
                                {{ $contract->customer->company_name ?? $contract->customer->full_name ?? 'نامشخص' }}
                            </td>
                            <td class="px-4 py-3 text-right">
                                {{ $contract->customer->bill_id ?? '—' }}
                            </td>
                            <td class="px-4 py-3 text-right font-mono">
                                {{ $contract->base_rate ? number_format($contract->base_rate) : '—' }}
                            </td>
                            <td class="px-4 py-3 text-right font-mono">
                                {{ $contract->customer->subscription->contract_power ?? '—' }}
                            </td>
                            <td class="px-4 py-3 text-right">
                                @if($contract->status == 'rate_assigned')
                                    <span class="bg-blue-100 text-blue-700 px-2 py-1 rounded">نرخ تعیین شده</span>
                                @elseif($contract->status == 'confirmed')
                                    <span class="bg-green-100 text-green-700 px-2 py-1 rounded">تأیید شده</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="py-8 text-center text-gray-500 text-sm">
                                هنوز قراردادی تأیید نشده است
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        function updateIranTime() {
            const now = new Date();
            const time = now.toLocaleTimeString('fa-IR', { timeZone: 'Asia/Tehran', hour: '2-digit', minute: '2-digit' });
            const date = now.toLocaleDateString('fa-IR', { timeZone: 'Asia/Tehran', weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
            document.querySelectorAll('.iran-time').forEach(el => el.textContent = time);
            document.querySelectorAll('.iran-date').forEach(el => el.textContent = date);
        }
        updateIranTime();
        setInterval(updateIranTime, 1000);

        //chart contract
        new Chart(document.getElementById('contractChart'), {
            type: 'doughnut',
            data: {
                labels: [
                    'تأیید نهایی',
                    'نرخ تعیین شده',
                    'در انتظار بررسی',
                    'رد یا منقضی شده'
                ],
                datasets: [{
                    data: [{{ $confirmedContracts }}, {{ $rateAssignedContracts }}, {{ $pendingContracts }}, {{ $rejectedContracts + $expiredContracts }}],
                    backgroundColor: ['#10b981', '#3b82f6', '#fbbf24', '#ef4444'],
                    borderWidth: 3,
                    borderColor: '#fff',
                    cutout: '75%'
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                        labels: {
                            padding: 20,
                            usePointStyle: true,
                            pointStyle: 'circle',
                            font: {
                                size: 12,
                                family: 'Vazir, sans-serif'
                            },
                            generateLabels: function(chart) {
                                const data = chart.data;
                                if (data.labels.length && data.datasets.length) {
                                    return data.labels.map((label, i) => {
                                        const value = data.datasets[0].data[i];
                                        return {
                                            text: `${label}: ${value}`,
                                            fillStyle: data.datasets[0].backgroundColor[i],
                                            strokeStyle: '#fff',
                                            lineWidth: 3,
                                            pointStyle: 'circle',
                                            hidden: isNaN(data.datasets[0].data[i]),
                                            index: i
                                        };
                                    });
                                }
                                return [];
                            }
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return context.label + ': ' + context.raw;
                            }
                        }
                    }
                }
            }
        });

        // chart static
        new Chart(document.getElementById('consumptionChart'), {
            type: 'bar',
            data: {
                labels: ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور'],
                datasets: [{
                    data: [2450, 3120, 2890, 4200, 5100, 3800],
                    backgroundColor: '#0284c7',
                    borderRadius: 8,
                    barThickness: 30
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { display: false } },
                scales: {
                    y: { beginAtZero: true, grid: { color: '#f3f4f6' } },
                    x: { grid: { display: false } }
                }
            }
        });
    </script>


@endsection