@php use App\Models\Contract; @endphp
@extends('layouts.customer')
@section('page-title', 'داشبورد مشترک')

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

        @php
            $customer = auth('customer')->user();
            $profileCompleted = $customer->profile_completed ?? false;

            // Active or ongoing contract
            $activeContract = Contract::where('customer_id', $customer->id)
                ->whereIn('status', ['rate_assigned', 'confirmed'])
                ->where('end_date', '>=', now())
                ->first();
        @endphp

        @if(!$profileCompleted)
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center max-w-3xl mx-auto">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-5">
                    <i class="fas fa-user-edit text-2xl text-blue-600"></i>
                </div>

                <h2 class="text-xl font-bold text-gray-800 mb-3">
                    خوش آمدید به تیوان!
                </h2>

                <p class="text-sm text-gray-600 leading-relaxed mb-8 max-w-xl mx-auto">
                    برای استفاده از تمام امکانات سامانه (خرید برق، مشاهده قرارداد، محاسبه قبض و ...) لطفاً اطلاعات خود را تکمیل کنید.
                </p>

                <a href="{{ route('customer.profile') }}"
                   class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white font-medium px-8 py-3 rounded-full shadow-md hover:shadow-lg transition text-sm">
                    تکمیل اطلاعات
                    <i class="fas fa-arrow-left text-sm"></i>
                </a>
            </div>
        @else
            <div class="space-y-6">
                <div class="bg-gradient-to-r from-[#0284c7] to-[#0c4a6e] rounded-xl p-5 text-white shadow-xl relative overflow-hidden border border-white/20">
                    <div class="absolute inset-0 bg-white/10 backdrop-blur-sm"></div>
                    <div class="absolute -top-6 -left-6 opacity-10">
                        <i class="fas fa-bolt text-9xl"></i>
                    </div>
                    <div class="relative z-10 flex items-center justify-between">
                        <div>
                            <h1 class="text-lg font-bold">
                                خوش آمدید، {{ $customer->company_name ?? 'مشترک عزیز' }}
                            </h1>
                            <p class="text-xs opacity-90 mt-1 font-mono">
                                شناسه قبض: {{ $customer->bill_id ?? '—' }}
                            </p>
                            <div class="flex gap-2 mt-2">
                            <span class="px-3 py-1 rounded-full text-xs bg-white/30 backdrop-blur border border-white/40 font-medium">
                                {{ $customer->type === 'legal' ? 'حقوقی' : 'حقیقی' }}
                            </span>
                                <span class="px-3 py-1 rounded-full text-xs bg-emerald-400/50 backdrop-blur border border-emerald-300 font-medium">
                                فعال
                            </span>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-xs opacity-80 iran-date">{{ now()->setTimezone('Asia/Tehran')->translatedFormat('l d F') }}</p>
                            <p class="text-2xl font-bold mt-1 iran-time">{{ now()->setTimezone('Asia/Tehran')->format('H:i') }}</p>
                        </div>
                    </div>
                </div>

                <!-- Active contract card -->
                @if($activeContract)
                    <div class="bg-gradient-to-r from-green-50 to-emerald-50 border border-green-200 rounded-xl p-5 shadow-md">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-4">
                                <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                                    <i class="fas fa-file-contract text-2xl text-green-700"></i>
                                </div>
                                <div>
                                    <p class="font-bold text-green-900">قرارداد فعال</p>
                                    <p class="text-sm text-green-700">
                                        از {{ \Morilog\Jalali\Jalalian::fromCarbon(\Carbon\Carbon::parse($activeContract->start_date))->format('j F Y') }}
                                        تا {{ \Morilog\Jalali\Jalalian::fromCarbon(\Carbon\Carbon::parse($activeContract->end_date))->format('j F Y') }}
                                    </p>
                                    <p class="text-sm text-green-800 mt-1">
                                        نرخ توافق شده: <span class="font-bold">{{ number_format($activeContract->base_rate) }} ریال/kwh</span>
                                    </p>
                                </div>
                            </div>
                            <div class="text-left">
                            <span class="inline-block bg-green-600 text-white px-4 py-2 rounded-full text-xs font-medium shadow">
                                ✓ فعال
                            </span>
                            </div>
                        </div>
                    </div>
                @endif

                <!-- Statistical cards -->
{{--                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">--}}
{{--                    <div class="bg-white rounded-xl p-4 shadow-md border-t-4 border-[#0284c7] hover:shadow-xl transition">--}}
{{--                        <p class="text-xs text-gray-600">قبض پرداخت نشده</p>--}}
{{--                        <p class="text-xl font-bold text-[#0284c7] mt-1">۱۲</p>--}}
{{--                        <span class="text-xs text-red-600 flex items-center mt-1">۲ تاخیر</span>--}}
{{--                    </div>--}}
{{--                    <div class="bg-white rounded-xl p-4 shadow-md border-t-4 border-[#10b981] hover:shadow-xl transition">--}}
{{--                        <p class="text-xs text-gray-600">مصرف این ماه</p>--}}
{{--                        <p class="text-xl font-bold text-[#10b981] mt-1">۸.۵M</p>--}}
{{--                        <span class="text-xs text-green-600 flex items-center mt-1">+۱۲٪</span>--}}
{{--                    </div>--}}
{{--                    <div class="bg-white rounded-xl p-4 shadow-md border-t-4 border-[#8b5cf6] hover:shadow-xl transition">--}}
{{--                        <p class="text-xs text-gray-600">کیلووات ساعت</p>--}}
{{--                        <p class="text-xl font-bold text-[#8b5cf6] mt-1">۲۱۵</p>--}}
{{--                        <span class="text-xs text-purple-600 flex items-center mt-1">پیک</span>--}}
{{--                    </div>--}}
{{--                    <div class="bg-white rounded-xl p-4 shadow-md border-t-4 border-[#f59e0b] hover:shadow-xl transition">--}}
{{--                        <p class="text-xs text-gray-600">اعتبار</p>--}}
{{--                        <p class="text-xl font-bold text-[#f59e0b] mt-1">۳.۲M</p>--}}
{{--                        <span class="text-xs text-amber-600 flex items-center mt-1">باقی‌مانده</span>--}}
{{--                    </div>--}}
{{--                </div>--}}

                <!--  Charts and quick actions -->
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
                    <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-5 border border-gray-100">
                        <h3 class="text-sm font-bold text-gray-700 mb-3">نرخ‌های این ماه (ریال/kWh)</h3>
                        <canvas id="ratesChart" height="180"></canvas>
                    </div>
                    <div class="bg-white rounded-xl shadow-md p-5 border border-gray-100">
                        <h3 class="text-sm font-bold text-gray-700 mb-4">اقدامات سریع</h3>
                        <div class="space-y-3">
                            <a href="{{ route('customer.purchase') }}" class="flex items-center justify-between p-3 bg-gradient-to-r from-[#0284c7] to-[#0c4a6e] text-white rounded-xl hover:shadow-lg transform hover:-translate-y-0.5 transition text-sm font-medium">
                                <span>خرید برق جدید</span>
                                <i class="fas fa-plus"></i>
                            </a>
                            <a href="{{ route('customer.purchases.index') }}" class="flex items-center justify-between p-3 bg-gradient-to-r from-gray-600 to-gray-700 text-white rounded-xl hover:shadow-lg transform hover:-translate-y-0.5 transition text-sm font-medium">
                                <span>سوابق خرید</span>
                                <i class="fas fa-history"></i>
                            </a>
                            <a href="{{ route('customer.bill-calculator') }}" class="flex items-center justify-between p-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl hover:shadow-lg transform hover:-translate-y-0.5 transition text-sm font-medium">
                                <span>محاسبه قبض</span>
                                <i class="fas fa-calculator"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </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);

        @if($profileCompleted)
        new Chart(document.getElementById('ratesChart'), {
            type: 'bar',
            data: {
                labels: ['کم‌بار', 'میان‌بار', 'اوج‌بار'],
                datasets: [{
                    data: [820, 1420, 2850],
                    backgroundColor: ['#10b981', '#f59e0b', '#ef4444'],
                    borderRadius: 12,
                    barThickness: 40
                }]
            },
            options: {
                responsive: true,
                plugins: { legend: { display: false } },
                scales: {
                    y: { beginAtZero: true, grid: { color: '#f3f4f6' } },
                    x: { grid: { display: false } }
                }
            }
        });
        @endif
    </script>
@endsection