@extends('temple.layouts.app')

@section('title', 'Temple Reports')

@php
    // Single source of truth for all figures (cards + charts stay in sync)
    $paidAmount    = (float) ($totals['paid_amount'] ?? $totals['receipts'] ?? 0);
    $paidCount     = (int)   ($totals['paid_count'] ?? $totals['receipts_count'] ?? 0);
    $pendingAmount = (float) ($totals['pending_amount'] ?? $totalPending ?? 0);
    $pendingCnt    = (int)   ($totals['pending_count'] ?? $pendingCount ?? 0);
    $vazhipadCount = (int)   ($totals['vazhipad_count'] ?? 0);
    $trendData     = collect($trend ?? []);
@endphp

@section('content')

<div class="page-header">
    <div class="page-header-left">
        <div class="page-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14 2 14 8 20 8"/>
                <line x1="16" y1="13" x2="8" y2="13"/>
                <line x1="16" y1="17" x2="8" y2="17"/>
                <polyline points="10 9 9 9 8 9"/>
            </svg>
        </div>
        <div>
            <h1 class="page-title">Temple Reports</h1>
            <p class="page-subtitle">Overview of collections, receipts, vazhipads and devotees</p>
        </div>
    </div>
</div>

{{-- Date Filter --}}
<div class="report-filter-panel">
    <form method="GET" action="{{ route('temple.reports.index') }}" class="report-filter-form">

        <div class="report-filter-field report-filter-field--date">
            <label for="from_date">
                <i class="fas fa-calendar-alt"></i> From
            </label>
            <input type="date" name="from_date" id="from_date" value="{{ $from }}" class="form-input">
        </div>

        <div class="report-filter-field report-filter-field--date">
            <label for="to_date">
                <i class="fas fa-calendar-alt"></i> To
            </label>
            <input type="date" name="to_date" id="to_date" value="{{ $to }}" class="form-input">
            <div id="date-error" style="display:none;color:#dc2626;font-size:13px;margin-top:6px;">
                To date cannot be before From date.
            </div>
        </div>

        <button type="submit" class="btn btn-primary">
            <i class="fas fa-filter"></i> Filter
        </button>

    </form>
</div>

{{-- Summary Cards --}}
<div class="report-index-stat-grid">

    {{-- Total Paid Amount --}}
    <a href="{{ route('temple.reports.receipts', ['from_date' => $from, 'to_date' => $to]) }}" class="report-index-stat-card">
        <div class="stat-card">
            <div class="stat-top">
                <div class="stat-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="9" y1="7" x2="15" y2="7"/><line x1="9" y1="11" x2="15" y2="11"/><line x1="9" y1="15" x2="13" y2="15"/></svg>
                </div>
                <span class="stat-delta">{{ number_format($paidCount) }} paid</span>
            </div>
            <div class="stat-value">₹{{ number_format($paidAmount, 2) }}</div>
            <div class="stat-label">Total Paid Amount</div>
        </div>
    </a>

    {{-- Total Vazhipads --}}
    <a href="{{ route('temple.reports.vazhipads', ['from_date' => $from, 'to_date' => $to]) }}" class="report-index-stat-card">
        <div class="stat-card stat-card--orange">
            <div class="stat-top">
                <div class="stat-icon stat-icon--orange">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M8 3c0 2.5-1.5 4-1.5 6.5A2.5 2.5 0 0 0 9 12M16 3c0 2.5 1.5 4 1.5 6.5a2.5 2.5 0 0 1-2.5 2.5M12 2c0 3-2 4.5-2 8a2 2 0 0 0 4 0c0-3.5-2-5-2-8Z"/><path d="M6 21v-3a6 6 0 0 1 12 0v3"/></svg>
                </div>
            </div>
            <div class="stat-value">{{ number_format($vazhipadCount) }}</div>
            <div class="stat-label">Total Vazhipads</div>
        </div>
    </a>

    {{-- Pending Payments (links to pending report if the route exists) --}}
    @php
        $pendingUrl = Route::has('temple.reports.pending')
            ? route('temple.reports.pending', ['from_date' => $from, 'to_date' => $to])
            : null;
    @endphp
    <{{ $pendingUrl ? 'a href='.$pendingUrl : 'div' }} class="report-index-stat-card">
        <div class="stat-card stat-card--red">
            <div class="stat-top">
                <div class="stat-icon stat-icon--red">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
                        <circle cx="12" cy="12" r="10"/>
                        <line x1="12" y1="8" x2="12" y2="12"/>
                        <line x1="12" y1="16" x2="12.01" y2="16"/>
                    </svg>
                </div>
                <span class="stat-delta">{{ number_format($pendingCnt) }} pending</span>
            </div>
            <div class="stat-value">₹{{ number_format($pendingAmount, 2) }}</div>
            <div class="stat-label">Pending Payments</div>
        </div>
    </{{ $pendingUrl ? 'a' : 'div' }}>

</div>

{{-- Charts Section --}}
<div class="report-charts-grid" style="display:grid;grid-template-columns:1.4fr 1fr;gap:20px;margin-top:24px;">

    {{-- Collection Trend --}}
    <div class="panel" style="min-width:0;">
        <div class="panel-header">
            <h2 class="panel-title">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 3v18h18"/><path d="M18 9l-5 5-4-4-4 4"/></svg>
                Collection Trend
            </h2>
        </div>
        <div style="padding:16px;">
            @if($trendData->isEmpty())
                <p style="text-align:center;color:#6b7280;padding:40px 0;">No collections in the selected period.</p>
            @else
                <canvas id="collectionTrendChart" height="120"></canvas>
            @endif
        </div>
    </div>

    {{-- Paid vs Pending --}}
    <div class="panel" style="min-width:0;">
        <div class="panel-header">
            <h2 class="panel-title">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 10 10h-10Z"/></svg>
                Paid vs Pending
            </h2>
        </div>
        <div style="padding:16px;">
            @if($paidAmount <= 0 && $pendingAmount <= 0)
                <p style="text-align:center;color:#6b7280;padding:40px 0;">No data for the selected period.</p>
            @else
                <canvas id="revenueDistributionChart" height="200"></canvas>
            @endif
        </div>
    </div>

</div>

{{-- Quick Access --}}
<div class="panel" style="margin-top:24px;">
    <div class="panel-header">
        <h2 class="panel-title">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>
            Quick Access
        </h2>
    </div>

    <div style="display:flex;flex-wrap:wrap;gap:12px;padding:16px;">
        <a href="{{ route('temple.reports.daily') }}" class="btn btn-outline">
            <i class="fas fa-calendar-day"></i> Daily Report
        </a>

        <a href="{{ route('temple.reports.receipts', ['from_date' => $from, 'to_date' => $to]) }}" class="btn btn-outline">
            <i class="fas fa-receipt"></i> Receipts
        </a>

        <a href="{{ route('temple.reports.vazhipads', ['from_date' => $from, 'to_date' => $to]) }}" class="btn btn-outline">
            <i class="fas fa-hands-praying"></i> Vazhipads
        </a>

        @if($pendingUrl)
            <a href="{{ $pendingUrl }}" class="btn btn-outline">
                <i class="fas fa-hourglass-half"></i> Pending Payments
            </a>
        @endif
    </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {

    // ---------- Date validation ----------
    const reportForm = document.querySelector('.report-filter-form');
    const fromDate   = document.getElementById('from_date');
    const toDate     = document.getElementById('to_date');
    const dateError  = document.getElementById('date-error');

    // Same-day ranges are allowed; only reject To < From.
    function validateReportDates() {
        if (!fromDate || !toDate) return true;
        if (fromDate.value && toDate.value && toDate.value < fromDate.value) {
            dateError.style.display = 'block';
            toDate.setCustomValidity('To date cannot be before From date.');
            return false;
        }
        dateError.style.display = 'none';
        toDate.setCustomValidity('');
        return true;
    }

    if (fromDate && toDate) {
        if (fromDate.value) toDate.min = fromDate.value;

        fromDate.addEventListener('change', function () {
            toDate.min = fromDate.value || '';
            if (toDate.value && fromDate.value && toDate.value < fromDate.value) {
                toDate.value = '';
            }
            validateReportDates();
        });
        toDate.addEventListener('change', validateReportDates);
    }

    if (reportForm) {
        reportForm.addEventListener('submit', function (event) {
            if (!validateReportDates()) {
                event.preventDefault();
                toDate.focus();
            }
        });
    }

    // ---------- Chart data ----------
    // $trend: ['2026-09-01' => 1200.50, '2026-09-02' => 980, ...]
    const trendLabels = @json($trendData->keys()->values());
    const trendValues = @json($trendData->values()->map(fn ($v) => (float) $v));
    const totalPaid    = @json($paidAmount);
    const totalPending = @json($pendingAmount);

    const inr = (n) => '₹' + Number(n).toLocaleString('en-IN');

    // Pretty date labels (e.g. "01 Sep")
    const prettyLabels = trendLabels.map(function (d) {
        const dt = new Date(d + 'T00:00:00');
        return isNaN(dt) ? d : dt.toLocaleDateString('en-IN', { day: '2-digit', month: 'short' });
    });

    // ---------- Collection Trend ----------
    const trendCanvas = document.getElementById('collectionTrendChart');
    if (trendCanvas) {
        new Chart(trendCanvas, {
            type: 'line',
            data: {
                labels: prettyLabels,
                datasets: [{
                    label: 'Paid Amount (₹)',
                    data: trendValues,
                    borderColor: '#f97316',
                    backgroundColor: 'rgba(249,115,22,0.12)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.35,
                    pointRadius: 3,
                    pointBackgroundColor: '#f97316'
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { display: false },
                    tooltip: { callbacks: { label: (ctx) => inr(ctx.parsed.y) } }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { callback: (v) => inr(v) }
                    }
                }
            }
        });
    }

    // ---------- Paid vs Pending ----------
    const donutCanvas = document.getElementById('revenueDistributionChart');
    if (donutCanvas) {
        new Chart(donutCanvas, {
            type: 'doughnut',
            data: {
                labels: ['Paid', 'Pending'],
                datasets: [{
                    data: [totalPaid, totalPending],
                    backgroundColor: ['#3b82f6', '#ef4444'],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                cutout: '65%',
                plugins: {
                    legend: { position: 'bottom' },
                    tooltip: { callbacks: { label: (ctx) => ctx.label + ': ' + inr(ctx.parsed) } }
                }
            }
        });
    }

});
</script>
@endpush