@extends('mobile.template.app')

@section('content')
    <div class="p-4 space-y-6 bg-white min-h-screen font-[Poppins] text-gray-800">

        <div class="grid grid-cols-2 gap-3">
            <a href="/cs-daily-reports"
                class="flex items-center gap-3 bg-white rounded-2xl py-4 px-4 border border-[#FCDCDC] shadow hover:shadow-md transition-all active:scale-95">
                <i class="ri-calendar-check-line text-[22px] text-[#B91C1C]"></i>
                <span class="text-[13px] font-semibold">Laporan Harian</span>
            </a>

            <a href="#"
                class="flex items-center gap-3 bg-white rounded-2xl py-4 px-4 border border-[#FCDCDC] shadow hover:shadow-md transition-all active:scale-95">
                <i class="ri-bar-chart-2-line text-[22px] text-[#B91C1C]"></i>
                <span class="text-[13px] font-semibold">Laporan Bulanan</span>
            </a>
        </div>


        <div
            class="bg-gradient-to-br from-white to-[#FFF5F5] border border-[#FCDCDC] rounded-3xl p-6 shadow relative overflow-hidden">
            <div
                class="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-[#FECACA]/40 to-transparent rounded-full blur-3xl">
            </div>

            <div class="flex justify-between items-center mb-4 relative z-10">
                <p class="text-sm font-semibold text-[#991B1B]">Saldo CS</p>
                <a href="#"
                    class="flex items-center text-xs px-3 py-1 bg-white border border-[#FCDCDC] rounded-full text-[#B91C1C] shadow-sm hover:bg-[#FFF0F0] transition">
                    <i class="ri-time-line mr-1 text-base"></i>History
                </a>
            </div>

            <div class="text-center relative z-10 mb-5">
                <p class="text-3xl font-bold text-[#B91C1C] tracking-tight">Rp
                    {{ number_format(Auth::user()->balance ? Auth::user()->balance->balance : 0, 0, ',', '.') }}</p>
                <p class="text-xs text-gray-500">Saldo tersedia saat ini</p>
            </div>

            <div class="mt-3 grid grid-cols-2 gap-3 relative z-10">
                <a href="{{ route('draft-orders.add') }}"
                    class="flex items-center justify-center px-3 py-2 bg-[#B91C1C] text-white rounded-xl shadow hover:bg-[#991B1B] active:scale-95 transition-all text-[11px] font-medium text-center leading-tight">
                    Order Everpro
                </a>
                <a href="{{ route('orders.marketplace.create') }}"
                    class="flex items-center justify-center px-3 py-2 bg-[#DC2626] text-white rounded-xl shadow hover:bg-[#B91C1C] active:scale-95 transition-all text-[11px] font-medium text-center leading-tight">
                    Order Marketplace
                </a>
            </div>
        </div>


        <div class="bg-[#FFF5F5] border border-[#FCDCDC] rounded-2xl p-5 shadow space-y-4 hover:shadow-md transition-all">

            <div class="flex items-center justify-between">
                <div class="flex items-center gap-2">
                    <div class="w-9 h-9 rounded-xl bg-white flex items-center justify-center text-[#B91C1C] shadow-sm">
                        <i class="ri-rocket-2-line text-[20px]"></i>
                    </div>
                    <div>
                        <p class="text-[13px] font-semibold">CRBOX Target</p>
                        <p class="text-[11px] text-gray-500">Progress Harian</p>
                    </div>
                </div>
                <span id="crboxPercent"
                    class="px-2 py-0.5 text-[11px] font-medium rounded-full bg-[#FECACA] text-[#B91C1C]">
                    {{ $crboxPercent ?? '0%' }}
                </span>
            </div>

            <div class="w-full bg-gray-100 rounded-full h-2 overflow-hidden">
                <div id="crboxProgress" class="h-2 bg-gradient-to-r from-[#FCA5A5] to-[#B91C1C] rounded-full transition-all"
                    style="width:{{ $crboxPercent ?? 0 }}%"></div>
            </div>

            <div class="flex justify-between text-[12px] text-gray-600">
                <span>{{ $crboxAchieved ?? 0 }} box tercapai</span>
                <span class="font-medium text-[#B91C1C]">Target: {{ $crboxTarget ?? 0 }} box</span>
            </div>

            <div class="border-t border-[#FEE2E2] my-3"></div>

            <div class="space-y-3">
                <p class="text-[13px] font-semibold">Percentage Report</p>
                <div class="space-y-2 text-[12px]">
                    <div>
                        <div class="flex justify-between mb-0.5">
                            <span>Lead</span><span id="leadPercent" class="font-medium text-[#B91C1C]">0%</span>
                        </div>
                        <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                            <div id="leadBar" class="h-2 bg-[#FCA5A5] rounded-full transition-all" style="width:0%"></div>
                        </div>
                    </div>

                    <div>
                        <div class="flex justify-between mb-0.5">
                            <span>Closing</span><span id="closingPercent" class="font-medium text-[#991B1B]">0%</span>
                        </div>
                        <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                            <div id="closingBar" class="h-2 bg-[#B91C1C] rounded-full transition-all" style="width:0%">
                            </div>
                        </div>
                    </div>

                    <div>
                        <div class="flex justify-between mb-0.5">
                            <span>Revenue</span><span id="revenuePercent" class="font-medium text-[#B91C1C]">0%</span>
                        </div>
                        <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                            <div id="revenueBar"
                                class="h-2 bg-gradient-to-r from-[#FCA5A5] to-[#B91C1C] rounded-full transition-all"
                                style="width:0%"></div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ====================== -->
            <!--  📌 TOTAL ORDER SECTION -->
            <!-- ====================== -->

            <div class="grid grid-cols-3 gap-3 mt-4 text-center">
                <div class="bg-white rounded-xl py-2 text-[12px] border border-[#FCDCDC] shadow-sm">
                    <p class="text-gray-500">Total Order</p>
                    <p id="totalOrders" class="font-semibold text-[#B91C1C]">0</p>
                </div>
                <div class="bg-white rounded-xl py-2 text-[12px] border border-[#FCDCDC] shadow-sm">
                    <p class="text-gray-500">Everpro</p>
                    <p id="everproOrders" class="font-semibold text-[#B91C1C]">0</p>
                </div>
                <div class="bg-white rounded-xl py-2 text-[12px] border border-[#FCDCDC] shadow-sm">
                    <p class="text-gray-500">Marketplace</p>
                    <p id="marketplaceOrders" class="font-semibold text-[#B91C1C]">0</p>
                </div>
            </div>

        </div>


        <div class="bg-[#FFF5F5] border border-[#FCDCDC] rounded-2xl p-5 shadow hover:shadow-md transition-all">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-[14px] font-semibold text-[#B91C1C] flex items-center gap-1">
                    <i class="ri-bar-chart-box-line text-[18px]"></i> Statistik Harian
                </h2>
                <select id="reportFilter"
                    class="bg-white border border-[#FCA5A5] text-[12px] text-gray-700 rounded-lg px-2.5 py-1 focus:outline-none focus:ring-1 focus:ring-[#FCA5A5]">
                    <option value="daily">Harian</option>
                    <option value="weekly">Mingingan</option>
                    <option value="monthly">Bulanan</option>
                    <option value="this_month" selected>Bulan Ini</option>
                    <option value="last_month">Bulan Lalu</option>
                    <option value="3_months">3 Bulan Terakhir</option>
                </select>
            </div>

            <canvas id="dailyReportChart" height="160"></canvas>

            <div class="grid grid-cols-3 gap-3 mt-4 text-center">
                <div class="bg-white rounded-xl py-2 text-[12px] border border-[#FCDCDC] shadow-sm">
                    <p class="text-gray-500">Lead</p>
                    <p id="leadSum" class="font-semibold text-[#B91C1C]">-</p>
                </div>
                <div class="bg-white rounded-xl py-2 text-[12px] border border-[#FCDCDC] shadow-sm">
                    <p class="text-gray-500">Closing</p>
                    <p id="closingSum" class="font-semibold text-[#B91C1C]">-</p>
                </div>
                <div class="bg-white rounded-xl py-2 text-[12px] border border-[#FCDCDC] shadow-sm">
                    <p class="text-gray-500">Revenue</p>
                    <p id="revenueSum" class="font-semibold text-[#B91C1C]">-</p>
                </div>
            </div>
        </div>


        <div class="bg-[#FFF5F5] border border-[#FCDCDC] rounded-2xl p-5 shadow hover:shadow-md transition-all">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-[14px] font-semibold text-[#B91C1C] flex items-center gap-1">
                    <i class="ri-time-line text-[18px]"></i> Riwayat Transaksi Terakhir
                </h2>
                <a href="#" class="text-[12px] text-[#B91C1C] hover:underline">Lihat Semua</a>
            </div>
            <div class="divide-y divide-[#FCDCDC] text-[12px]">
                @forelse ($transactions as $t)
                    <div class="flex justify-between py-2">
                        <div>
                            <p class="font-medium text-gray-800 flex items-center gap-1">
                                <i class="ri-shopping-bag-3-line text-[13px] text-[#B91C1C]"></i>
                                #{{ $t->reference_no }}
                            </p>
                            <p class="text-gray-500 text-[11px] flex items-center gap-1">
                                <i class="ri-time-line text-[12px]"></i>
                                {{ \Carbon\Carbon::parse($t->created_at)->format('d M Y, H:i') }}
                            </p>
                        </div>
                        <p class="font-semibold text-[#B91C1C] flex items-center gap-1">
                            <i class="ri-money-dollar-circle-line text-[13px]"></i>
                            + Rp {{ number_format($t->total_payment, 0, ',', '.') }}
                        </p>
                    </div>
                @empty
                    <p class="text-center text-gray-400 text-[12px] py-3">
                        <i class="ri-inbox-line mr-1"></i>Belum ada transaksi
                    </p>
                @endforelse
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <script>
        document.addEventListener("DOMContentLoaded", async () => {

            // FIXED ROUTE → /dashboard/orders/daily-count
            async function loadOrderCount() {
                const res = await axios.get("/dashboard/orders/daily-count")
                document.getElementById("totalOrders").textContent = res.data.total_orders
                document.getElementById("everproOrders").textContent = res.data.everpro_orders
                document.getElementById("marketplaceOrders").textContent = res.data.marketplace_orders
            }
            loadOrderCount()


            const ctx = document.getElementById('dailyReportChart').getContext('2d');
            const filterSelect = document.getElementById('reportFilter');
            const leadSumEl = document.getElementById('leadSum');
            const closingSumEl = document.getElementById('closingSum');
            const revenueSumEl = document.getElementById('revenueSum');
            let chart;

            async function fetchData(filter = 'this_month') {
                const res = await fetch(`/dashboard/chart/cs-daily-report?filter=${filter}`);
                const data = await res.json();

                const labels = data.map(d => d.date);
                const leads = data.map(d => d.total_lead);
                const closings = data.map(d => d.total_closing);
                const revenues = data.map(d => d.total_revenue);

                const totalLead = leads.reduce((a, b) => a + Number(b), 0);
                const totalClosing = closings.reduce((a, b) => a + Number(b), 0);
                const totalRevenue = revenues.reduce((a, b) => a + Number(b), 0);

                leadSumEl.textContent = totalLead;
                closingSumEl.textContent = totalClosing;
                revenueSumEl.textContent = "Rp " + totalRevenue.toLocaleString();

                updatePercentages(totalLead, totalClosing, totalRevenue);

                return {
                    labels,
                    leads,
                    closings
                };
            }

            function updatePercentages(lead, closing, revenue) {
                const max = Math.max(lead, closing, revenue, 1);

                const leadPct = Math.round((lead / max) * 100);
                const closingPct = Math.round((closing / max) * 100);
                const revenuePct = Math.round((revenue / max) * 100);

                document.getElementById('leadPercent').textContent = `${leadPct}%`;
                document.getElementById('closingPercent').textContent = `${closingPct}%`;
                document.getElementById('revenuePercent').textContent = `${revenuePct}%`;

                document.getElementById('leadBar').style.width = `${leadPct}%`;
                document.getElementById('closingBar').style.width = `${closingPct}%`;
                document.getElementById('revenueBar').style.width = `${revenuePct}%`;
            }

            async function renderChart(filter) {
                const {
                    labels,
                    leads,
                    closings
                } = await fetchData(filter);

                if (chart) chart.destroy();

                chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels,
                        datasets: [{
                                label: 'Lead',
                                data: leads,
                                borderColor: '#FCA5A5',
                                backgroundColor: 'rgba(252,165,165,0.25)',
                                tension: 0.4,
                                fill: true,
                                pointRadius: 3
                            },
                            {
                                label: 'Closing',
                                data: closings,
                                borderColor: '#B91C1C',
                                backgroundColor: 'rgba(185,28,28,0.2)',
                                tension: 0.4,
                                fill: true,
                                pointRadius: 3
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        plugins: {
                            legend: {
                                display: true,
                                labels: {
                                    color: '#4b5563',
                                    font: {
                                        size: 11,
                                        family: 'Poppins'
                                    }
                                }
                            }
                        }
                    }
                });
            }

            await renderChart('this_month');

            filterSelect.addEventListener('change', e => renderChart(e.target.value));
        });
    </script>
@endsection