@extends('layouts.customer')
@section('page-title', 'محاسبه‌ قبض')

@section('content')
    @php
        $persianMonths = ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'];
        function gToJYear() {
            $gd = new DateTime();
            $jy = $gd->format('Y') - 621;
            if ($gd->format('md') < '0321') $jy--;
            return $jy;
        }
        $currentYear = gToJYear();
        $currentMonth = date('n');
    @endphp

    <div class="max-w-3xl mx-auto p-2 text-xs">
        <!-- هدر -->
        <div class="bg-gradient-to-r from-blue-700 to-blue-900 text-white p-2.5 rounded-t-lg shadow flex justify-between items-center">
            <div><h1 class="text-sm font-bold">محاسبه‌گر قبض برق</h1></div>
            <div class="lamp-container"><i class="lamp-bulb fas fa-lightbulb"></i></div>
        </div>

        <form id="bill-form" class="bg-white shadow-xl rounded-b-lg">
            @csrf
            <div class="p-3 bg-gray-50 space-y-3">
                <input type="hidden" name="consumptionTypeId" value="4">

{{--                 month and year--}}
                <div class="grid grid-cols-2 gap-2 bg-blue-50 p-2 rounded border">
                    <div>
                        <label class="block font-bold text-blue-800 mb-1">ماه</label>
                        <select name="month" required class="w-full p-1.5 border rounded text-xs">
                            <option value="">انتخاب کنید</option>
                            @foreach($persianMonths as $i => $m)
                                <option value="{{ $i+1 }}" {{ ($i+1)==$currentMonth ? 'selected' : '' }}>{{ $m }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block font-bold text-blue-800 mb-1">سال</label>
                        <select name="year" required class="w-full p-1.5 border rounded text-xs">
                            <option value="">انتخاب کنید</option>
                            @for($y=$currentYear-2;$y<=$currentYear+2;$y++)
                                <option value="{{ $y }}" {{ $y==$currentYear ? 'selected' : '' }}>{{ $y }}</option>
                            @endfor
                        </select>
                    </div>
                </div>
                {{--powers--}}
                <div class="grid grid-cols-2 gap-2">
                    <div><label class="block font-bold mb-0.5">قدرت قراردادی (kW)</label><input type="number" name="contractPower" class="w-full p-1.5 border rounded" value="1500" required step="any"></div>
                    <div><label class="block font-bold mb-0.5">قدرت مصرفی (kW)</label><input type="number" name="consumedPower" class="w-full p-1.5 border rounded" value="746" required step="any"></div>
                </div>

                <div class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="block font-bold mb-0.5">نوع مشترک <span class="text-red-500">*</span></label>
                        <select id="consumption_type_id" name="consumption_type_id" required class="w-full p-1.5 border rounded text-xs">
                            <option value="">انتخاب کنید</option>
                            @foreach($consumptionTypes as $id => $name)
                                <option value="{{ $id }}">{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="block font-bold mb-0.5">کد مشترک <span class="text-red-500">*</span></label>
                        <select id="tariff_code_id" name="tariff_code_id" required class="w-full p-1.5 border rounded text-xs" disabled>
                            <option value="">ابتدا نوع مشترک را انتخاب کنید</option>
                        </select>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-3">
                    <div class="space-y-2">
                        <div>
                            <label class="block font-bold mb-1">سطح ولتاژ <span class="text-red-500">*</span></label>
                            <select name="voltageLevelId" required class="w-full p-2 border rounded text-xs">
                                <option value="">انتخاب کنید</option>
                                @foreach($voltageLevels as $level)
                                    <option value="{{ $level['id'] }}">{{ $level['name'] }} @if($level['description'] || $level['voltageRange'])({{ trim(($level['description'] ?? '') . ' ' . ($level['voltageRange'] ?? '')) }})@endif</option>
                                @endforeach
                            </select>
                        </div>
                        <div><label class="block font-bold">کم‌باری (kWh)</label><input type="number" name="lowLoad" value="47980" class="w-full p-1.5 border rounded" step="any"></div>
{{--                        <div><label class="block font-bold">اوج‌بار جمعه (kWh)</label><input type="number" name="peakLoadFriday" value="0" class="w-full p-1.5 border rounded" step="any"></div>--}}
                        <div><label class="block font-bold">اوج‌بار (kWh)</label><input type="number" name="peakLoad" value="55900" class="w-full p-1.5 border rounded" step="any"></div>
                        <div><label class="block font-bold">بدهکاری (ریال)</label><input type="number" name="debtAmount" value="6865144" class="w-full p-1.5 border rounded" step="any"></div>
                    </div>
                    <div class="space-y-2">
                        <div>
                            <label class="block font-bold mb-1">نوع خرید <span class="text-red-500">*</span></label>
                            <select name="purchaseTypeId" required class="w-full p-2 border rounded text-xs">
                                <option value="">انتخاب کنید</option>
                                @foreach($purchaseTypes as $type)
                                    <option value="{{ $type['id'] }}">{{ $type['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div><label class="block font-bold">میان‌باری (kWh)</label><input type="number" name="midLoad" value="104420" class="w-full p-1.5 border rounded" step="any"></div>
{{--                        <div><label class="block font-bold">اوج‌بار (kWh)</label><input type="number" name="peakLoad" value="55900" class="w-full p-1.5 border rounded" step="any"></div>--}}
                        <div><label class="block font-bold">اوج‌بار جمعه (kWh)</label><input type="number" name="peakLoadFriday" value="0" class="w-full p-1.5 border rounded" step="any"></div>
                        <div><label class="block font-bold">بستانکاری (ریال)</label><input type="number" name="creditAmount" value="534" class="w-full p-1.5 border rounded" step="any"></div>
                    </div>
                </div>

                <div class="grid grid-cols-3 gap-2">
                    <div><label class="block font-bold">انرژی راکتیو (kVArh)</label><input type="number" name="reactiveEnergy" value="54180" class="w-full p-1.5 border rounded" step="any"></div>
{{--                    <div><label class="block font-bold">برق دوجانبه خریداری شده (kWh)</label><input type="number" name="bilateralPower" value="301" class="w-full p-1.5 border rounded" step="any"></div>--}}
                    <div>
                        <label class="block font-bold">برق دوجانبه کم‌باری (kWh)</label>
                        <input type="number" name="energyBilateralPowerLowLoad" value="55986" class="w-full p-1.5 border rounded" step="any">
                    </div>
                    <div>
                        <label class="block font-bold">برق دوجانبه میان‌باری (kWh)</label>
                        <input type="number" name="energyBilateralPowerMidLoad" value="111972" class="w-full p-1.5 border rounded" step="any">
                    </div>
                    <div>
                        <label class="block font-bold">برق دوجانبه اوج‌باری (kWh)</label>
                        <input type="number" name="energyBilateralPowerPeakLoad" value="55986" class="w-full p-1.5 border rounded" step="any">
                    </div>
                    <div>
                        <label class="block font-bold">نرخ خرید دوجانبه (ریال/kWh)</label>
                        <input type="number" name="rateOfBilateralPower" value="2060" class="w-full p-1.5 border rounded" step="any">
                    </div>


                    <div><label class="block font-bold">برق سبز خریداری شده (kWh)</label><input type="number" name="greenPower" value="0" class="w-full p-1.5 border rounded" step="any"></div>
                </div>

                <div class="flex justify-center gap-6 py-2 bg-gradient-to-r from-blue-50 to-cyan-50 rounded">
                    <label class="flex items-center gap-1 font-bold"><input type="checkbox" name="taxable" checked class="w-4 h-4"> مشمول مالیات</label>
                    <label class="flex items-center gap-1 font-bold"><input type="checkbox" name="subjectToDuty" checked class="w-4 h-4"> مشمول عوارض</label>
                </div>

                <div class="text-center py-2">
                    <button type="submit" class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-8 py-2 rounded-full font-bold shadow hover:shadow-lg transition">
                        محاسبه کن
                    </button>
                </div>
            </div>
        </form>

        <!--bill result -->
        <div id="bill-result" class="mt-4 hidden text-xs">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

                <!-- with bilateralPower -->
                <div class="bg-white shadow-xl rounded-lg border-2 border-green-600">
                    <div class="bg-green-600 text-white p-2 text-center rounded-t font-bold">
                        سایر آیتم‌ها با خرید دوجانبه
                    </div>
                    <div class="p-3 overflow-x-auto">
                        <table class="w-full min-w-full text-xs border-collapse">
                            <tr class="bg-gray-50">
                                <th class="p-1.5 font-bold border text-right">آیتم‌های صورت حساب</th>
                                <th class="p-1.5 font-bold border text-center">مبلغ (ریال)</th>
                                <th class="p-1.5 font-bold border text-center">درصد از کل</th>
                            </tr>
                            <tr><td class="p-1.5 font-bold border">بهای انرژی تامین شده به نیابت(پشتیبانی شده)</td><td id="with-supported-energy" class="p-1.5 border text-left">0 ریال</td><td id="with-supported-energy-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr><td class="p-1.5 font-bold border">ما به التفاوت اجرای ماده ۱۶</td><td id="with-article-16-diff" class="p-1.5 border text-left">0 ریال</td><td id="with-article-16-diff-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr class="bg-gray-50"><td class="p-1.5 font-bold border">ما به التفاوت اجرای مقرارت</td><td id="with-tariff-4d-diff" class="p-1.5 border text-left">0 ریال</td><td id="with-tariff-4d-diff-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr><td class="p-1.5 font-bold border">هزینه ترانزیت</td><td id="with-transit-cost" class="p-1.5 border text-left">0 ریال</td><td id="with-transit-cost-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr class="bg-gray-50"><td class="p-1.5 font-bold border">هزینه سوخت نیروگاهی</td><td id="with-fuel-cost" class="p-1.5 border text-left">0 ریال</td><td id="with-fuel-cost-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr>
                                <td class="p-1.5 font-bold border">بستانکاری خرید خارج از بازار</td>
                                <td id="with-off-market-credit" class="p-1.5 border text-left text-red-600 font-bold" dir="ltr">0 ریال</td>
                                <td id="with-off-market-credit-pct" class="p-1.5 border text-center text-red-600 font-bold" dir="ltr">0%</td>
                            </tr>
                            <tr class="bg-gray-50"><td class="p-1.5 font-bold border">بهای تجاوز از قدرت</td><td id="with-overload-cost" class="p-1.5 border text-left">0 ریال</td><td id="with-overload-cost-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr><td class="p-1.5 font-bold border">بهای انرژی راکتیو</td><td id="with-reactive-cost" class="p-1.5 border text-left">0 ریال</td><td id="with-reactive-cost-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr class="bg-gray-50"><td class="p-1.5 font-bold border">عوارض برق</td><td id="with-electricity-duty" class="p-1.5 border text-left">0 ریال</td><td id="with-electricity-duty-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr><td class="p-1.5 font-bold border">مالیات بر ارزش افزوده</td><td id="with-vat" class="p-1.5 border text-left">0 ریال</td><td id="with-vat-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr class="bg-gray-50"><td class="p-1.5 font-bold border">بدهی/بستانکاری</td><td id="with-debt-credit" class="p-1.5 border text-left">0 ریال</td><td id="with-debt-credit-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr class="bg-amber-100 font-bold"><td class="p-2 border">مبلغ قابل پرداخت دوره</td><td id="with-payable-amount" class="p-2 border text-left text-red-600">0 ریال</td><td class="p-2 border text-center">100%</td></tr>
                            <tr class="bg-blue-50"><td class="p-1.5 font-bold border">بهای انرژی تامین شده با خرید دوجانبه(صورت حساب خرده‌فروش)</td><td id="with-total-energy-price" class="p-1.5 border text-left font-bold">0</td><td class="p-1.5 border text-center">-</td></tr>
                            <tr class="bg-blue-100 font-bold"><td class="p-1.5 border">مبلغ کل قابل پرداخت با خرید دوجانبه</td><td id="with-total-payment" class="p-1.5 border text-left font-bold text-green-700">0</td><td class="p-1.5 border text-center">100%</td></tr>
                        </table>
                    </div>
                    <div class="bg-gray-700 text-white p-1.5 text-center rounded-b text-xs"><span id="with-issue-date"></span></div>
                </div>

                <!-- without bilateralPower -->
                <div class="bg-white shadow-xl rounded-lg border-2 border-red-600">
                    <div class="bg-red-600 text-white p-2 text-center rounded-t font-bold">سایر آیتم‌ها بدون خرید دوجانبه</div>
                    <div class="p-3 overflow-x-auto">
                        <table class="w-full min-w-full text-xs border-collapse">
                            <tr class="bg-gray-50">
                                <th class="p-1.5 font-bold border text-right">آیتم‌های صورت حساب</th>
                                <th class="p-1.5 font-bold border text-center">مبلغ (ریال)</th>
                                <th class="p-1.5 font-bold border text-center">درصد از کل</th>
                            </tr>
                            <tr><td class="p-1.5 font-bold border">بهای انرژی تامین شده به نیابت(پشتیبانی شده)</td><td id="without-supported-energy" class="p-1.5 border text-left">0 ریال</td><td id="without-supported-energy-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr><td class="p-1.5 font-bold border">ما به التفاوت اجرای ماده ۱۶</td><td id="without-article-16-diff" class="p-1.5 border text-left">0 ریال</td><td id="without-article-16-diff-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr class="bg-gray-50"><td class="p-1.5 font-bold border">ما به التفاوت اجرای مقرارت</td><td id="without-tariff-4d-diff" class="p-1.5 border text-left">0 ریال</td><td id="without-tariff-4d-diff-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr><td class="p-1.5 font-bold border">هزینه ترانزیت</td><td id="without-transit-cost" class="p-1.5 border text-left">0 ریال</td><td id="without-transit-cost-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr class="bg-gray-50"><td class="p-1.5 font-bold border">هزینه سوخت نیروگاهی</td><td id="without-fuel-cost" class="p-1.5 border text-left">0 ریال</td><td id="without-fuel-cost-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr>
                                <td class="p-1.5 font-bold border">بستانکاری خرید خارج از بازار</td>
                                <td id="without-off-market-credit" class="p-1.5 border text-left text-red-600 font-bold" dir="ltr">0 ریال</td>
                                <td id="without-off-market-credit-pct" class="p-1.5 border text-center text-red-600 font-bold" dir="ltr">0%</td>
                            </tr>
                            <tr class="bg-gray-50"><td class="p-1.5 font-bold border">بهای تجاوز از قدرت</td><td id="without-overload-cost" class="p-1.5 border text-left">0 ریال</td><td id="without-overload-cost-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr><td class="p-1.5 font-bold border">بهای انرژی راکتیو</td><td id="without-reactive-cost" class="p-1.5 border text-left">0 ریال</td><td id="without-reactive-cost-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr class="bg-gray-50"><td class="p-1.5 font-bold border">عوارض برق</td><td id="without-electricity-duty" class="p-1.5 border text-left">0 ریال</td><td id="without-electricity-duty-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr><td class="p-1.5 font-bold border">مالیات بر ارزش افزوده</td><td id="without-vat" class="p-1.5 border text-left">0 ریال</td><td id="without-vat-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr class="bg-gray-50"><td class="p-1.5 font-bold border">بدهی/بستانکاری</td><td id="without-debt-credit" class="p-1.5 border text-left">0 ریال</td><td id="without-debt-credit-pct" class="p-1.5 border text-center">0%</td></tr>
                            <tr class="bg-amber-100 font-bold"><td class="p-2 border">مبلغ قابل پرداخت دوره</td><td id="without-payable-amount" class="p-2 border text-left text-red-600">0 ریال</td><td class="p-2 border text-center">100%</td></tr>
                            <tr class="bg-blue-50"><td class="p-1.5 font-bold border">بهای انرژی تامین شده بدون خرید دوجانبه</td><td id="without-total-energy-price" class="p-1.5 border text-left font-bold">0</td><td class="p-1.5 border text-center">-</td></tr>
                            <tr class="bg-blue-100 font-bold"><td class="p-1.5 border">مبلغ کل قابل پرداخت بدون خرید دوجانبه</td><td id="without-total-payment" class="p-1.5 border text-left font-bold text-red-700">0</td><td class="p-1.5 border text-center">100%</td></tr>
                        </table>
                    </div>
                    <div class="bg-gray-700 text-white p-1.5 text-center rounded-b text-xs"><span id="without-issue-date"></span></div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-10">
                <div class="bg-gradient-to-br from-indigo-50 to-blue-100 p-8 rounded-3xl shadow-2xl border-2 border-indigo-200">
                    <h3 class="text-center font-bold text-indigo-900 text-sm mb-6">مقایسه بهای انرژی تامین شده با خرید دوجانبه و بدون خرید دوجانبه</h3>
                    <canvas id="chart-energy" height="340"></canvas>
                    <p class="text-center mt-6 text-l font-bold text-indigo-800" id="energy-profit-text">مبلغ سود شما با خرید دوجانبه: ۰ ریال (۰٪)</p>
                </div>

                <div class="bg-gradient-to-br from-emerald-50 to-teal-100 p-8 rounded-3xl shadow-2xl border-2 border-emerald-200">
                    <h3 class="text-center font-bold text-emerald-900 text-sm mb-6">مقایسه کل مبلغ پرداختی با خرید دوجانبه و بدون خرید دوجانبه</h3>
                    <canvas id="chart-payment" height="340"></canvas>
                    <p class="text-center mt-6 text-l font-bold text-emerald-800" id="payment-profit-text">مبلغ سود شما با خرید دوجانبه: ۰ ریال (۰٪)</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        const allTariffCodes = @json($tariffCodes);
        let chartEnergy, chartPayment;

        function createCharts(withBill, withoutBill) {
            const energyWith = withBill.totalEnergyPriceWithBilateralPower || 0;
            const energyWithout = withoutBill.totalEnergyPriceWithoutBilateralPower || 0;
            const energyProfit = energyWithout - energyWith;
            const energyProfitPct = energyWithout > 0 ? ((energyProfit / energyWithout) * 100).toFixed(1) : 0;

            const paymentWith = withBill.totalPaymentWithBilateralPower || 0;
            const paymentWithout = withoutBill.totalPaymentWithoutBilateralPower || 0;
            const paymentProfit = paymentWithout - paymentWith;
            const paymentProfitPct = paymentWithout > 0 ? ((paymentProfit / paymentWithout) * 100).toFixed(1) : 0;

            document.getElementById('energy-profit-text').textContent = `مبلغ سود شما با خرید دوجانبه: ${energyProfit.toLocaleString()} ریال (${energyProfitPct}%)`;
            document.getElementById('payment-profit-text').textContent = `مبلغ سود شما با خرید دوجانبه: ${paymentProfit.toLocaleString()} ریال (${paymentProfitPct}%)`;

            // const commonOptions = {
            //     type: 'pie',
            //     options: {
            //         responsive: true,
            //         maintainAspectRatio: false,
            //         // cutout: '62%',
            //         plugins: {
            //             legend: { position: 'bottom', labels: { padding: 20, font: { size: 14, weight: 'bold' } } },
            //             tooltip: { callbacks: { label: ctx => `${ctx.label}: ${ctx.parsed.toLocaleString()} ریال` } }
            //         }
            //     },
            //     plugins: [{
            //         id: 'centerProfit',
            //         afterDatasetsDraw(chart) {
            //             const { ctx, chartArea: { width, height } } = chart;
            //             const pct = chart === chartEnergy ? energyProfitPct : paymentProfitPct;
            //             ctx.save();
            //             ctx.font = 'bold 30px sans-serif';
            //             ctx.fillStyle = '#1e3a8a';
            //             ctx.textAlign = 'center';
            //             ctx.textBaseline = 'middle';
            //             ctx.fillText(`${pct}%`, width / 2, height / 2);
            //             ctx.restore();
            //         }
            //     }]
            // };
            const commonOptions = {
                type: 'doughnut',
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '78%',
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: { padding: 16, font: { size: 13 } }
                        },
                        tooltip: {
                            callbacks: {
                                label: ctx => `${ctx.label}: ${ctx.parsed.toLocaleString()} ریال`
                            }
                        }
                    }
                },
                plugins: [{
                    id: 'centerProfit',
                    afterDatasetsDraw(chart) {
                        const { ctx, chartArea: { width, height } } = chart;
                        const pct = chart === chartEnergy ? energyProfitPct : paymentProfitPct;

                        ctx.save();
                        ctx.font = 'bold 36px vazir, sans-serif';   // ← اینجا سایز درصد رو کوچیک‌تر و قشنگ‌تر کردیم (قبلاً 48px بود)
                        ctx.fillStyle = '#1e40af';
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'middle';
                        ctx.fillText(`${pct}%`, width / 2, height / 2 - 8);

                        ctx.font = '13px vazir, sans-serif';
                        ctx.fillStyle = '#64748b';
                        ctx.fillText('سود با خرید دوجانبه', width / 2, height / 2 + 18);

                        ctx.restore();
                    }
                }]
            };
            const energyData = {
                labels: ['با خرید دوجانبه', 'بدون خرید دوجانبه', 'مبلغ سود شما با خرید دوجانبه'],
                datasets: [{
                    data: [energyWith, energyWithout, energyProfit],
                    backgroundColor: ['#10b981', '#ef4444', '#3b82f6'],
                    borderColor: '#ffffff',
                    borderWidth: 5,
                    hoverBorderWidth: 8
                }]
            };

            const paymentData = {
                labels: ['با خرید دوجانبه', 'بدون خرید دوجانبه', 'مبلغ سود شما با خرید دوجانبه'],
                datasets: [{
                    data: [paymentWith, paymentWithout, paymentProfit],
                    backgroundColor: ['#059669', '#dc2626', '#7c3aed'],
                    borderColor: '#ffffff',
                    borderWidth: 5,
                    hoverBorderWidth: 8
                }]
            };

            if (!chartEnergy) {
                chartEnergy = new Chart(document.getElementById('chart-energy'), { ...commonOptions, data: energyData });
                chartPayment = new Chart(document.getElementById('chart-payment'), { ...commonOptions, data: paymentData });
            } else {
                chartEnergy.data = energyData;
                chartPayment.data = paymentData;
                chartEnergy.update();
                chartPayment.update();
            }
        }

        document.getElementById('consumption_type_id').addEventListener('change', function() {
            const typeId = this.value;
            const tariffSelect = document.getElementById('tariff_code_id');
            if (!typeId) { tariffSelect.innerHTML = '<option value="">ابتدا نوع مشترک را انتخاب کنید</option>'; tariffSelect.disabled = true; return; }
            const filtered = allTariffCodes.filter(code => code.consumptionTypeId == typeId);
            if (filtered.length === 0) { tariffSelect.innerHTML = '<option value="">کد مشترکی یافت نشد</option>'; tariffSelect.disabled = true; return; }
            tariffSelect.innerHTML = '<option value="">انتخاب کنید</option>';
            filtered.forEach(code => {
                const opt = document.createElement('option');
                opt.value = code.id;
                opt.textContent = `${code.name}(${code.fullCode})`;
                tariffSelect.appendChild(opt);
            });
            tariffSelect.disabled = false;
        });

        function calculatePercentages(bill, totalKey) {
            const total = bill[totalKey] || 0;
            if (total === 0) return {};
            const keys = ['totalSupportedEnergyPrice','totalArticle16Difference','totalTariff4dDifferencePrice','transitCost','powerPlantFuelCost','totalOffMarketCreditEnergy','overLoadCost','reactiveEnergyCost','electricityDuty','totalVat','debtOrCreditAmount'];
            const percentages = {};
            keys.forEach(key => {
                const value = bill[key] || 0;
                percentages[key] = total > 0 ? ((value / total) * 100).toFixed(1) : '0.0';
            });
            percentages[totalKey] = '100.0';
            return percentages;
        }

        const formatNegativeNumber = (value) => {
            const abs = Math.abs(value);
            const str = abs.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            return value < 0 ? `<span dir="ltr" style="font-family:'Courier New',monospace;">−${str}</span>` : str;
        };

        document.getElementById('bill-form').onsubmit = async function (e) {
            e.preventDefault();
            const formData = new FormData(e.target);
            const data = Object.fromEntries(formData.entries());
            data.taxable = formData.has('taxable');
            data.subjectToDuty = formData.has('subjectToDuty');
            data.consumptionTypeId = parseInt(data.consumption_type_id);
            const selectedTariff = allTariffCodes.find(c => c.id == data.tariff_code_id);
            data.fullCode = selectedTariff ? selectedTariff.fullCode : null;
            delete data.tariff_code_id; delete data.consumption_type_id;

            data.month = parseInt(data.month); data.year = parseInt(data.year);
            data.contractPower = parseFloat(data.contractPower) || 0;
            data.consumedPower = parseFloat(data.consumedPower) || 0;
            data.lowLoad = parseFloat(data.lowLoad) || 0;
            data.midLoad = parseFloat(data.midLoad) || 0;
            data.peakLoad = parseFloat(data.peakLoad) || 0;
            data.peakLoadFriday = parseFloat(data.peakLoadFriday) || 0;
            // data.bilateralPower = parseFloat(data.bilateralPower) || 0;
            data.energyBilateralPowerLowLoad = parseFloat(formData.get('energyBilateralPowerLowLoad')) || 0;
            data.energyBilateralPowerMidLoad = parseFloat(formData.get('energyBilateralPowerMidLoad')) || 0;
            data.energyBilateralPowerPeakLoad = parseFloat(formData.get('energyBilateralPowerPeakLoad')) || 0;
            data.rateOfBilateralPower = parseFloat(formData.get('rateOfBilateralPower')) || 0;
            data.greenPower = parseFloat(data.greenPower) || 0;
            data.reactiveEnergy = parseFloat(data.reactiveEnergy) || 0;
            data.debtAmount = parseFloat(data.debtAmount) || 0;
            data.creditAmount = parseFloat(data.creditAmount) || 0;
            data.voltageLevelId = parseInt(data.voltageLevelId);
            data.purchaseTypeId = parseInt(data.purchaseTypeId);

            try {
                console.log(data);
                const response = await fetch('/api/v1/bill/calculate', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify(data)
                });
                const result = await response.json();

                if (result.statusCode === 200) {
                    const withBill = result.data.billDetailsWithBilateralPower[0];
                    const withoutBill = result.data.billDetailsWithoutBilateralPower[0];
                    const issueDate = new Date().toLocaleDateString('fa-IR');

                    const withPercentages = calculatePercentages(withBill, 'payableAmount');
                    const withoutPercentages = calculatePercentages(withoutBill, 'payableAmount');

                    //full tables
                    document.getElementById('with-supported-energy').innerHTML = (withBill.totalSupportedEnergyPrice || 0).toLocaleString();
                    document.getElementById('with-article-16-diff').innerHTML = (withBill.totalArticle16Difference || 0).toLocaleString();
                    document.getElementById('with-tariff-4d-diff').innerHTML = (withBill.totalTariff4dDifferencePrice || 0).toLocaleString();
                    document.getElementById('with-transit-cost').innerHTML = (withBill.transitCost || 0).toLocaleString();
                    document.getElementById('with-fuel-cost').innerHTML = (withBill.powerPlantFuelCost || 0).toLocaleString();
                    document.getElementById('with-overload-cost').innerHTML = (withBill.overLoadCost || 0).toLocaleString();
                    document.getElementById('with-reactive-cost').innerHTML = (withBill.reactiveEnergyCost || 0).toLocaleString();
                    document.getElementById('with-electricity-duty').innerHTML = (withBill.electricityDuty || 0).toLocaleString();
                    document.getElementById('with-vat').innerHTML = (withBill.totalVat || 0).toLocaleString();
                    document.getElementById('with-debt-credit').innerHTML = (withBill.debtOrCreditAmount || 0).toLocaleString();
                    document.getElementById('with-payable-amount').innerHTML = (withBill.payableAmount || 0).toLocaleString();
                    document.getElementById('with-total-energy-price').innerHTML = (withBill.totalEnergyPriceWithBilateralPower || 0).toLocaleString();
                    document.getElementById('with-total-payment').innerHTML = (withBill.totalPaymentWithBilateralPower || 0).toLocaleString();

                    document.getElementById('without-supported-energy').innerHTML = (withoutBill.totalSupportedEnergyPrice || 0).toLocaleString();
                    document.getElementById('without-article-16-diff').innerHTML = (withoutBill.totalArticle16Difference || 0).toLocaleString();
                    document.getElementById('without-tariff-4d-diff').innerHTML = (withoutBill.totalTariff4dDifferencePrice || 0).toLocaleString();
                    document.getElementById('without-transit-cost').innerHTML = (withoutBill.transitCost || 0).toLocaleString();
                    document.getElementById('without-fuel-cost').innerHTML = (withoutBill.powerPlantFuelCost || 0).toLocaleString();
                    document.getElementById('without-overload-cost').innerHTML = (withoutBill.overLoadCost || 0).toLocaleString();
                    document.getElementById('without-reactive-cost').innerHTML = (withoutBill.reactiveEnergyCost || 0).toLocaleString();
                    document.getElementById('without-electricity-duty').innerHTML = (withoutBill.electricityDuty || 0).toLocaleString();
                    document.getElementById('without-vat').innerHTML = (withoutBill.totalVat || 0).toLocaleString();
                    document.getElementById('without-debt-credit').innerHTML = (withoutBill.debtOrCreditAmount || 0).toLocaleString();
                    document.getElementById('without-payable-amount').innerHTML = (withoutBill.payableAmount || 0).toLocaleString();
                    document.getElementById('without-total-energy-price').innerHTML = (withoutBill.totalEnergyPriceWithoutBilateralPower || 0).toLocaleString();
                    document.getElementById('without-total-payment').innerHTML = (withoutBill.totalPaymentWithoutBilateralPower || 0).toLocaleString();

                    const withOff = withBill.totalOffMarketCreditEnergy || 0;
                    document.getElementById('with-off-market-credit').innerHTML = formatNegativeNumber(withOff);
                    document.getElementById('with-off-market-credit-pct').innerHTML = (withOff < 0 ? '−' : '') + Math.abs(parseFloat(withPercentages.totalOffMarketCreditEnergy || 0)).toFixed(1) + '%';

                    const withoutOff = withoutBill.totalOffMarketCreditEnergy || 0;
                    document.getElementById('without-off-market-credit').innerHTML = formatNegativeNumber(withoutOff);
                    document.getElementById('without-off-market-credit-pct').innerHTML = (withoutOff < 0 ? '−' : '') + Math.abs(parseFloat(withoutPercentages.totalOffMarketCreditEnergy || 0)).toFixed(1) + '%';

                    // percent
                    document.getElementById('with-supported-energy-pct').textContent = withPercentages.totalSupportedEnergyPrice + '%';
                    document.getElementById('with-article-16-diff-pct').textContent = withPercentages.totalArticle16Difference + '%';
                    document.getElementById('with-tariff-4d-diff-pct').textContent = withPercentages.totalTariff4dDifferencePrice + '%';
                    document.getElementById('with-transit-cost-pct').textContent = withPercentages.transitCost + '%';
                    document.getElementById('with-fuel-cost-pct').textContent = withPercentages.powerPlantFuelCost + '%';
                    document.getElementById('with-overload-cost-pct').textContent = withPercentages.overLoadCost + '%';
                    document.getElementById('with-reactive-cost-pct').textContent = withPercentages.reactiveEnergyCost + '%';
                    document.getElementById('with-electricity-duty-pct').textContent = withPercentages.electricityDuty + '%';
                    document.getElementById('with-vat-pct').textContent = withPercentages.totalVat + '%';
                    document.getElementById('with-debt-credit-pct').textContent = withPercentages.debtOrCreditAmount + '%';

                    document.getElementById('without-supported-energy-pct').textContent = withoutPercentages.totalSupportedEnergyPrice + '%';
                    document.getElementById('without-article-16-diff-pct').textContent = withoutPercentages.totalArticle16Difference + '%';
                    document.getElementById('without-tariff-4d-diff-pct').textContent = withoutPercentages.totalTariff4dDifferencePrice + '%';
                    document.getElementById('without-transit-cost-pct').textContent = withoutPercentages.transitCost + '%';
                    document.getElementById('without-fuel-cost-pct').textContent = withoutPercentages.powerPlantFuelCost + '%';
                    document.getElementById('without-overload-cost-pct').textContent = withoutPercentages.overLoadCost + '%';
                    document.getElementById('without-reactive-cost-pct').textContent = withoutPercentages.reactiveEnergyCost + '%';
                    document.getElementById('without-electricity-duty-pct').textContent = withoutPercentages.electricityDuty + '%';
                    document.getElementById('without-vat-pct').textContent = withoutPercentages.totalVat + '%';
                    document.getElementById('without-debt-credit-pct').textContent = withoutPercentages.debtOrCreditAmount + '%';

                    document.getElementById('with-issue-date').textContent = issueDate;
                    document.getElementById('without-issue-date').textContent = issueDate;

                    // console.log(withBill);
                    // console.log(withBill.totalEnergyPriceWithBilateralPower);

                    // create chart
                    createCharts(withBill, withoutBill);

                    document.getElementById('bill-result').classList.remove('hidden');
                    document.getElementById('bill-result').scrollIntoView({ behavior: 'smooth' });
                } else {
                    alert('خطا: ' + (result.errors?.error?.[0] || result.message || 'نامشخص'));
                }
            } catch (err) {
                console.error(err);
                alert('خطا در ارتباط با سرور.');
            }
        };
    </script>

    <style>
        .lamp-container { width: 24px; height: 24px; }
        .lamp-bulb { font-size: 20px; color: #fff; animation: blink 2s infinite; text-shadow: 0 0 8px #ff0; }
        @keyframes blink { 0%,100% { opacity: .4; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.1); } }
        canvas { max-height: 340px !important; width: 100% !important; }
        @media (max-width: 768px) { canvas { height: 300px !important; } }
    </style>
@endsection