@extends('layouts.customer')
@section('page-title', 'نتیجه خرید بهینه')

@section('content')
    <div class="max-w-md mx-auto py-8">

        <div class="bg-white rounded-2xl shadow-2xl overflow-hidden border border-gray-100">

            <div class="bg-gradient-to-r from-[#0ea5e9] to-[#0284c7] p-6 text-white text-center">
                <div class="lamp-container inline-block mb-3">
                    <i class="lamp-bulb fas fa-lightbulb"></i>
                </div>
                <h1 class="text-xl font-bold">نتیجه محاسبه بهینه</h1>
                <p class="text-xs opacity-90 mt-1">پیشنهاد هوشمند خرید برق</p>
            </div>

            <div class="p-6 space-y-5">

                <div class="bg-gray-50 p-4 rounded-xl border border-gray-200">
                    <h2 class="text-sm font-semibold text-gray-700 mb-3 text-center">مصرف این ماه شما</h2>
                    <div class="grid grid-cols-3 gap-3 text-center">
                        <div>
                            <p class="text-xs text-green-700 font-medium">کم‌بار</p>
                            <p class="text-lg font-mono text-green-800">{{ number_format($lowLoad) }} kWh</p>
                        </div>
                        <div>
                            <p class="text-xs text-amber-700 font-medium">میان‌بار</p>
                            <p class="text-lg font-mono text-amber-800">{{ number_format($midLoad) }} kWh</p>
                        </div>
                        <div>
                            <p class="text-xs text-red-700 font-medium">اوج‌بار</p>
                            <p class="text-lg font-mono text-red-800">{{ number_format($peakLoad) }} kWh</p>
                        </div>
                    </div>
                    <div class="mt-3 pt-3 border-t border-gray-300 text-center">
                        <p class="text-xs text-gray-600">جمع کل مصرف</p>
                        <p class="text-xl font-mono font-bold text-gray-800">{{ number_format($lowLoad + $midLoad + $peakLoad) }} kWh</p>
                    </div>
                </div>

                <div class="bg-gradient-to-r from-emerald-50 to-teal-50 p-5 rounded-xl border-2 border-emerald-200">
                    <h2 class="text-sm font-bold text-emerald-800 mb-4 text-center">پیشنهاد بهینه خرید</h2>
                    <div class="space-y-4">
                        <div class="flex justify-between items-center bg-white/70 p-3 rounded-lg">
                            <span class="text-sm text-gray-700">حجم بهینه</span>
                            <span class="text-xl font-mono font-bold text-emerald-700">{{ number_format($optimalVolume) }} kWh</span>
                        </div>
                        <div class="flex justify-between items-center bg-white/70 p-3 rounded-lg">
                            <span class="text-sm text-gray-700">صرفه‌جویی</span>
                            <span class="text-xl font-mono font-bold text-amber-600">{{ number_format($savings) }} ریال</span>
                        </div>
                    </div>
                </div>

                <div class="flex gap-3">
                    <button onclick="history.back()"
                            class="flex-1 bg-gray-200 text-gray-700 py-3 rounded-xl text-sm font-medium hover:bg-gray-300 transition">
                        بازگشت
                    </button>
                    <button id="register-contract-btn"
                            class="flex-1 bg-gradient-to-r from-[#f97316] to-[#ea580c] text-white py-3 rounded-xl text-sm font-bold hover:shadow-xl transition">
                        ثبت قرارداد
                    </button>
                </div>

                <!-- وضعیت -->
                <div id="contract-status" class="hidden p-3 bg-amber-50 border border-amber-300 rounded-xl text-xs text-amber-800 text-center">
                    <i class="fas fa-clock mr-1"></i>
                    در انتظار تأیید ادمین...
                </div>
            </div>
        </div>
    </div>

    <style>
        .lamp-container { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
        .lamp-bulb { font-size: 28px; color: #fbbf24; animation: blink 1.8s infinite; text-shadow: 0 0 12px #fbbf24, 0 0 24px #fbbf24; }
        @keyframes blink { 0%, 100% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.15); } }
    </style>

    <script>
        document.getElementById('register-contract-btn').onclick = () => {
            if (!confirm('قرارداد ثبت شود؟')) return;
            const btn = this;
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> در حال ارسال...';
            document.getElementById('contract-status').classList.remove('hidden');
        };
    </script>
@endsection