@extends('layouts.admin')

@section('content')

<div class="max-w-7xl mx-auto px-6 py-2 space-y-6 mb-4">

    <div>
        <h1 class="text-3xl font-bold text-gray-800 mb-1">
            Admin Dashboard - <span class="text-indigo-600">{{ $dewanName }}</span>
        </h1>
        <p class="text-gray-500">Real-time performance, revenue insights, and usage analytics for your Dewan and facilities.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-lg shadow text-center">
            <p class="text-gray-500 text-sm uppercase mb-1">Pending Bookings</p>
            <p class="text-3xl font-bold text-yellow-600">{{ $pending_awaiting ?? 0 }}</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow text-center">
            <p class="text-gray-500 text-sm uppercase mb-1">Approved Bookings</p>
            <p class="text-3xl font-bold text-green-600">{{ $approved ?? 0 }}</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow text-center">
            <p class="text-gray-500 text-sm uppercase mb-1">Total Revenue</p>
            <p class="text-3xl font-bold text-blue-600">RM{{ number_format($revenue ?? 0, 2) }}</p>
        </div>
    </div>

    <h2 class="text-xl font-bold text-gray-800 mt-8">Dewan Reservation Stats</h2>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <!-- 🕓 Pending + Need Payment -->
        <div class="bg-white p-6 rounded-lg shadow text-center">
            <p class="text-gray-500 text-sm uppercase mb-1">Pending (Incl. Need Payment)</p>
            <p class="text-3xl font-bold text-yellow-600">{{ $dewanPendingTotal ?? 0 }}</p>
        </div>

        <!-- ✅ Fully Booked -->
        <div class="bg-white p-6 rounded-lg shadow text-center">
            <p class="text-gray-500 text-sm uppercase mb-1">Fully Booked</p>
            <p class="text-3xl font-bold text-green-600">{{ $dewanApproved ?? 0 }}</p>
        </div>

        <!-- 💰 Total Dewan Revenue -->
        <div class="bg-white p-6 rounded-lg shadow text-center">
            <p class="text-gray-500 text-sm uppercase mb-1">Total Dewan Revenue</p>
            <p class="text-3xl font-bold text-blue-600">RM{{ number_format($dewanRevenue ?? 0, 2) }}</p>
        </div>
    </div>

    <div class="bg-white p-6 rounded-lg shadow mt-8">
        <div class="flex justify-between items-center mb-4 flex-wrap gap-3">
            <h2 class="text-xl font-semibold text-gray-700 flex items-center">Booking & Revenue Analytics</h2>
            <div class="flex flex-wrap items-center gap-2">
                <select id="chartType" class="border border-gray-300 rounded-md px-2 py-1 text-sm">
                    <option value="line" selected>Line</option>
                    <option value="bar">Bar</option>
                    <option value="pie">Pie</option>
                    <option value="area">Area</option>
                </select>
                <select id="metricFilter" class="border border-gray-300 rounded-md px-2 py-1 text-sm">
                    <option value="count" selected>Bookings</option>
                    <option value="revenue">Revenue (RM)</option>
                </select>
                <select id="categoryFilter" class="border border-gray-300 rounded-md px-2 py-1 text-sm">
                    <option value="overall" selected>Overall</option>
                    <option value="facility">Facility</option>
                    <option value="dewan">Dewan</option>
                </select>
                <select id="chartFilter" class="border border-gray-300 rounded-md px-2 py-1 text-sm">
                    <option value="monthly" selected>Monthly</option>
                    <option value="weekly">Weekly</option>
                    <option value="daily">Daily</option>
                </select>
                <button id="exportCSV" class="bg-indigo-500 text-white px-3 py-1 rounded-md text-sm hover:bg-indigo-600">Export CSV</button>
                <button id="exportPNG" class="bg-gray-100 text-gray-800 px-3 py-1 rounded-md text-sm hover:bg-gray-200">Download PNG</button>
            </div>
        </div>
        
        <div class="relative" style="height: 350px; min-height: 300px;">
            <canvas id="bookingChart"
                    data-url="{{ route('admin.dashboard.chart', ['type' => 'TIMETYPE_PLACEHOLDER']) }}">
            </canvas>
        </div>
    </div>

    <div class="bg-indigo-50 border-l-4 border-indigo-600 p-4 rounded-md shadow mt-4">
        <h3 class="text-lg font-semibold text-indigo-800">Monthly Facility Booking Summary</h3>
        <p class="text-gray-700 mt-2 text-sm">
            This month,<strong> {{ $dewanName }}</strong> has processed:
            <ul class="list-disc list-inside">
                <li><strong>{{ $approved ?? 0 }}</strong> confirmed Faciltiy bookings</li>
                <li><strong>{{ $pending_awaiting ?? 0 }}</strong> still pending or awaiting verification</li>
                <li><strong>RM{{ number_format($revenue ?? 0, 2) }}</strong> Facility revenue collected</li>
            </ul>
        </p>
    </div>

    <div class="bg-indigo-50 border-l-4 border-indigo-600 p-4 rounded-md shadow mt-4 mb-6">
        <h3 class="text-lg font-semibold text-indigo-800">Monthly Dewan Reservations Summary</h3>
        <p class="text-gray-700 mt-2 text-sm">
            This month, <strong>{{ $dewanName }}</strong> has:
            <ul class="list-disc list-inside">
                <li><strong>{{ $dewanApproved ?? 0 }}</strong> confirmed Dewan bookings</li>
                <li><strong>{{ $dewanPendingTotal ?? 0 }}</strong> still pending or awaiting payment</li>
                <li><strong>RM{{ number_format($dewanRevenue ?? 0, 2) }}</strong> Dewan revenue collected</li>
            </ul>
        </p>
    </div>


    <!-- 📄 Generate Report Button (Fixed Bottom Right) 
    <div class="fixed bottom-6 right-6">
        <a href="{{ route('admin.reports.dewan') }}"
        class="bg-red-500 text-white px-5 py-3 rounded-full shadow-lg text-sm font-semibold hover:bg-red-600 hover:scale-105 transition-transform">
            📊 Generate PDF Report
        </a>
    </div>-->
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jspdf@2.5.1/dist/jspdf.umd.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('bookingChart');
    const ctx = canvas.getContext('2d');
    const baseUrlTemplate = canvas.dataset.url;

    const chartType = document.getElementById('chartType');
    const chartFilter = document.getElementById('chartFilter');
    const categoryFilter = document.getElementById('categoryFilter');
    const metricFilter = document.getElementById('metricFilter');
    const exportCSV = document.getElementById('exportCSV');
    const exportPNG = document.getElementById('exportPNG');
    const generateReportBtn = document.getElementById('generateReport');

    let chart;

    // ========================
    // 📊 CHART FUNCTION
    // ========================
    async function loadChartData(timeType = 'monthly', category = 'overall', metric = 'count', type = 'line') {
        try {
            const fetchUrl = baseUrlTemplate.replace('TIMETYPE_PLACEHOLDER', timeType);

            // ✅ Authenticated Fetch (important fix)
            const res = await fetch(`${fetchUrl}?metric=${metric}`, {
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            });

            if (!res.ok) throw new Error(`Fetch failed: ${res.status}`);

            const data = await res.json();
            const labels = data.labels || [];
            const datasetValues = data[category] || data.overall || [];

            if (chart) chart.destroy();

            const colors = { count: '#3B82F6', revenue: '#F59E0B' };

            // ✅ Handle empty data gracefully
            if (!labels.length || datasetValues.every(v => v === 0)) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.font = "16px sans-serif";
                ctx.fillStyle = "#999";
                ctx.textAlign = "center";
                ctx.fillText("No booking or revenue data available", canvas.width / 2, canvas.height / 2);
                return;
            }

            chart = new Chart(ctx, {
                type: type === 'area' ? 'line' : type,
                data: {
                    labels,
                    datasets: [{
                        label: metric === 'count' ? 'Bookings' : 'Revenue (RM)',
                        data: datasetValues,
                        borderColor: colors[metric],
                        backgroundColor: type === 'area' ? `${colors[metric]}33` : colors[metric],
                        tension: 0.4,
                        fill: type === 'area'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: true },
                        tooltip: {
                            callbacks: {
                                label: ctx => metric === 'revenue'
                                    ? `RM ${ctx.raw.toFixed(2)}`
                                    : `${ctx.raw} bookings`
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            title: {
                                display: true,
                                text: metric === 'count' ? 'Bookings' : 'Revenue (RM)'
                            }
                        },
                        x: {
                            title: {
                                display: true,
                                text: `${timeType.charAt(0).toUpperCase() + timeType.slice(1)} Trend`
                            }
                        }
                    }
                }
            });

            // 📄 Export CSV
            exportCSV.onclick = () => {
                let csv = 'Label,Value\n';
                labels.forEach((label, i) => csv += `${label},${datasetValues[i] ?? 0}\n`);
                const blob = new Blob([csv], { type: 'text/csv' });
                const link = document.createElement('a');
                link.href = URL.createObjectURL(blob);
                link.download = 'dashboard-data.csv';
                link.click();
            };

            // 🖼 Export PNG
            exportPNG.onclick = () => {
                const url = chart.toBase64Image();
                const link = document.createElement('a');
                link.href = url;
                link.download = 'dashboard-chart.png';
                link.click();
            };

        } catch (err) {
            console.error('⚠️ Chart fetch failed:', err);
        }
    }

    // ========================
    // 🥧 SAVE PIE CHART FOR PDF (server-side)
    // ========================
    document.getElementById('exportPNG').addEventListener('click', () => {
        const pieCanvas = document.createElement('canvas');
        const pieChart = new Chart(pieCanvas, {
            type: 'pie',
            data: {
                labels: ['Pending/Awaiting', 'Approved', 'Need Payment'],
                datasets: [{
                    data: [{{ $pending_awaiting }}, {{ $approved }}, {{ $dewanPendingTotal }}],
                    backgroundColor: ['#FCD34D', '#34D399', '#60A5FA']
                }]
            }
        });
        const base64 = pieChart.toBase64Image();

        fetch('/save-pie-chart', {
            method: 'POST',
            headers: { 
                'Content-Type': 'application/json', 
                'X-CSRF-TOKEN': '{{ csrf_token() }}' 
            },
            body: JSON.stringify({ image: base64 })
        });
    });

    // ========================
    // 📄 PDF GENERATION
    // ========================
    if (generateReportBtn) {
        generateReportBtn.addEventListener('click', async () => {
            try {
                generateReportBtn.textContent = '📄 Generating...';
                generateReportBtn.disabled = true;

                const { jsPDF } = window.jspdf;
                const dashboard = document.querySelector('.max-w-7xl');
                const pdf = new jsPDF('p', 'mm', 'a4');

                const snapshot = await html2canvas(dashboard, { scale: 2, useCORS: true });
                const imgData = snapshot.toDataURL('image/png');
                const imgProps = pdf.getImageProperties(imgData);
                const pdfWidth = pdf.internal.pageSize.getWidth();
                const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
                let position = 25;
                let heightLeft = pdfHeight;

                pdf.setFontSize(14);
                pdf.text("Smart Booking Platform - Dewan Dashboard Report", 10, 10);
                pdf.setFontSize(11);
                pdf.text("Dewan: {{ $dewanName }}", 10, 17);
                pdf.text("Generated on: {{ now()->format('d M Y, h:i A') }}", 10, 23);

                pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight - 25);
                heightLeft -= pdf.internal.pageSize.getHeight();

                while (heightLeft > 0) {
                    pdf.addPage();
                    position = 0;
                    heightLeft -= pdf.internal.pageSize.getHeight();
                    pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pdfHeight - 25);
                }

                pdf.save(`Dewan_Report_{{ $dewanName }}_{{ date('Y-m-d') }}.pdf`);

            } catch (error) {
                console.error('❌ PDF generation failed:', error);
                alert('Something went wrong while generating the report.');
            } finally {
                generateReportBtn.textContent = '📄 Generate Report (PDF)';
                generateReportBtn.disabled = false;
            }
        });
    }

    // ========================
    // INITIALIZE
    // ========================
    loadChartData('monthly', 'overall', 'revenue', 'line');

    [chartType, chartFilter, categoryFilter, metricFilter].forEach(select => {
        select.addEventListener('change', () => {
            loadChartData(chartFilter.value, categoryFilter.value, metricFilter.value, chartType.value);
        });
    });
});
</script>

<style>
#generateReport {
  animation: pulse 2.5s infinite ease-in-out;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}
@media print {
  #generateReport { display: none !important; }
}
</style>

@endsection