@include('Partials.sidebar')
<section class="main_content dashboard_part large_header_bg">
@include('Partials.header')
<div class="main_content_iner default_main_contaner_iner">
<div class="page-body">

    <div class="container-fluid">
        <div class="page-title">
            <div class="row align-items-center">
                <div class="col-sm-6 ps-0">
                    <h3><i class="fas fa-chart-pie mr-2" style="color:#c9a96e"></i>Reports Overview</h3>
                    <p class="text-muted mb-0" style="font-size:13px">All-time performance snapshot</p>
                </div>
                <div class="col-sm-6 pe-0">
                    <ol class="bc">
                        <li><a href="/admin/dashboard" class="bc-home"><i class="fas fa-home"></i></a></li>
                        <li class="bc-sep">›</li>
                        <li class="bc-active">Reports</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    {{-- Quick nav --}}
    <div class="container-fluid mb-3">
        <div class="d-flex flex-wrap" style="gap:8px">
            @foreach([
                ['/admin/reports/overview',   'fa-chart-pie',   'Overview',     true],
                ['/admin/reports/revenue',    'fa-chart-line',  'Revenue',      false],
                ['/admin/reports/bookings',   'fa-chart-bar',   'Bookings',     false],
                ['/admin/reports/sales',      'fa-trophy',      'Sales',        false],
                ['/admin/reports/tour-views', 'fa-walking',     'Tour Analytics',false],
            ] as [$url, $icon, $label, $active])
            <a href="{{ $url }}" class="btn btn-sm {{ $active ? 'btn-warning' : 'btn-outline-secondary' }}" style="{{ $active ? 'color:#fff;font-weight:700' : '' }}">
                <i class="fas {{ $icon }} mr-1"></i>{{ $label }}
            </a>
            @endforeach
        </div>
    </div>

    {{-- KPI Cards --}}
    <div class="container-fluid mb-3">
        <div class="row">
            @foreach([
                ['Total Revenue',     $currency.$stats['total_revenue'],      '#22c55e', 'fa-rupee-sign'],
                ['This Month',        $currency.$stats['this_month_revenue'],  '#3b82f6', 'fa-calendar'],
                ['Confirmed Bookings',$stats['confirmed_bookings'],                             '#c9a96e', 'fa-check-circle'],
                ['Pending Bookings',  $stats['pending_bookings'],                               '#f59e0b', 'fa-clock'],
                ['Total Leads',       $stats['total_leads'],                                    '#8b5cf6', 'fa-funnel-dollar'],
                ['Leads Won',         $stats['leads_won'].' ('.$stats['lead_conversion_rate'].'%)', '#22c55e', 'fa-trophy'],
                ['Plots Available',   $stats['plots_available'].'/'.$stats['plots_total'],      '#06b6d4', 'fa-home'],
                ['Inventory Sold',    $stats['inventory_sold_pct'].'%',                         '#ef4444', 'fa-percentage'],
            ] as [$label, $val, $color, $icon])
            <div class="col-xl-3 col-md-4 col-sm-6 mb-3">
                <div class="card shadow-sm h-100" style="border-left:4px solid {{ $color }}">
                    <div class="card-body py-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <div style="font-size:11px;text-transform:uppercase;color:#94a3b8;letter-spacing:.5px">{{ $label }}</div>
                                <div style="font-size:22px;font-weight:800;color:{{ $color }};margin-top:2px">{{ $val }}</div>
                            </div>
                            <div style="width:44px;height:44px;border-radius:50%;background:{{ $color }}18;display:flex;align-items:center;justify-content:center">
                                <i class="fas {{ $icon }}" style="color:{{ $color }};font-size:18px"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">

            {{-- Revenue 12-month chart --}}
            <div class="col-lg-8 mb-3">
                <div class="card shadow-sm" style="border-top:3px solid #22c55e">
                    <div class="card-header"><h6 class="mb-0">📈 Revenue — Last 12 Months</h6></div>
                    <div class="card-body"><canvas id="revenueChart" height="100"></canvas></div>
                </div>
            </div>

            {{-- Lead sources donut --}}
            <div class="col-lg-4 mb-3">
                <div class="card shadow-sm" style="border-top:3px solid #8b5cf6">
                    <div class="card-header"><h6 class="mb-0">🎯 Lead Sources</h6></div>
                    <div class="card-body"><canvas id="leadSourceChart" height="200"></canvas></div>
                </div>
            </div>

            {{-- Bookings trend --}}
            <div class="col-lg-6 mb-3">
                <div class="card shadow-sm" style="border-top:3px solid #c9a96e">
                    <div class="card-header"><h6 class="mb-0">🏠 Bookings — Last 12 Months</h6></div>
                    <div class="card-body"><canvas id="bookingChart" height="120"></canvas></div>
                </div>
            </div>

            {{-- Gateway breakdown --}}
            <div class="col-lg-6 mb-3">
                <div class="card shadow-sm" style="border-top:3px solid #3b82f6">
                    <div class="card-header"><h6 class="mb-0">💳 Revenue by Gateway</h6></div>
                    <div class="card-body p-0">
                        <table class="table table-sm mb-0" style="font-size:13px">
                            <thead style="background:#f8f9fa"><tr><th>Gateway</th><th>Transactions</th><th>Revenue</th></tr></thead>
                            <tbody>
                                @foreach($gatewayBreakdown as $g)
                                <tr>
                                    <td><span class="badge badge-primary">{{ ucfirst($g->gateway) }}</span></td>
                                    <td>{{ $g->count }}</td>
                                    <td style="font-weight:700;color:#22c55e">{{ $currency }}{{ $g->total }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Inventory progress --}}
            <div class="col-lg-4 mb-3">
                <div class="card shadow-sm" style="border-top:3px solid #c9a96e">
                    <div class="card-header"><h6 class="mb-0">🏘️ Inventory Status</h6></div>
                    <div class="card-body">
                        @php
                            $booked    = $stats['plots_booked'];
                            $available = $stats['plots_available'];
                            $total     = $stats['plots_total'];
                            $other     = max(0, $total - $booked - $available);
                        @endphp
                        <canvas id="inventoryChart" height="200"></canvas>
                        <div class="mt-3">
                            @foreach([['Booked','#ef4444',$booked],['Available','#22c55e',$available],['Other','#94a3b8',$other]] as [$l,$c,$v])
                            <div class="d-flex justify-content-between mb-1" style="font-size:12px">
                                <span><span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:{{$c}};margin-right:6px"></span>{{$l}}</span>
                                <strong>{{$v}}</strong>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

            {{-- Quick links to detailed reports --}}
            <div class="col-lg-8 mb-3">
                <div class="card shadow-sm">
                    <div class="card-header"><h6 class="mb-0">📊 Detailed Reports</h6></div>
                    <div class="card-body">
                        <div class="row">
                            @foreach([
                                ['/admin/reports/revenue',    'fa-chart-line',  'Revenue Report',   'View transaction history, gateway breakdown, date range export', '#22c55e'],
                                ['/admin/reports/bookings',   'fa-chart-bar',   'Booking Report',   'Booking trends, status breakdown, plot type analysis', '#c9a96e'],
                                ['/admin/reports/sales',      'fa-trophy',      'Sales Report',     'Agent leaderboard, broker performance, lead conversion', '#f59e0b'],
                                ['/admin/reports/tour-views', 'fa-walking',     'Tour Analytics',   'Most wishlisted units, lead source ROI, inventory sell-through', '#8b5cf6'],
                            ] as [$url, $icon, $title, $desc, $color])
                            <div class="col-md-6 mb-3">
                                <a href="{{ $url }}" style="text-decoration:none">
                                    <div class="card h-100" style="border-left:3px solid {{ $color }};transition:transform .15s" onmouseover="this.style.transform='translateX(3px)'" onmouseout="this.style.transform=''">
                                        <div class="card-body py-3">
                                            <div style="font-weight:700;color:{{ $color }}"><i class="fas {{ $icon }} mr-2"></i>{{ $title }}</div>
                                            <div style="font-size:12px;color:#64748b;margin-top:4px">{{ $desc }}</div>
                                        </div>
                                    </div>
                                </a>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>
</div>
</section>

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
const months = @json(array_keys($revenueChart));
const labels = months.map(m => { const [y,mo] = m.split('-'); return new Date(y,mo-1).toLocaleString('default',{month:'short',year:'2-digit'}); });

// Revenue chart
new Chart(document.getElementById('revenueChart'), {
    type: 'bar',
    data: {
        labels,
        datasets: [{
            label: 'Revenue',
            data: @json(array_values($revenueChart)),
            backgroundColor: '#22c55e44',
            borderColor: '#22c55e',
            borderWidth: 2,
            borderRadius: 4,
        }]
    },
    options: { responsive: true, plugins: { legend: { display: false } }, scales: { y: { ticks: { callback: v => '{{ $currency }}' + v.toLocaleString() } } } }
});

// Booking chart
new Chart(document.getElementById('bookingChart'), {
    type: 'line',
    data: {
        labels,
        datasets: [{
            label: 'Bookings',
            data: @json(array_values($bookingsMonthly)),
            borderColor: '#c9a96e',
            backgroundColor: '#c9a96e22',
            tension: 0.4,
            fill: true,
            pointRadius: 4,
        }]
    },
    options: { responsive: true, plugins: { legend: { display: false } } }
});

// Lead source donut
const srcData = @json($leadSources);
new Chart(document.getElementById('leadSourceChart'), {
    type: 'doughnut',
    data: {
        labels: Object.keys(srcData),
        datasets: [{ data: Object.values(srcData), backgroundColor: ['#c9a96e','#3b82f6','#22c55e','#8b5cf6','#f59e0b','#ef4444','#06b6d4','#64748b','#ec4899'] }]
    },
    options: { responsive: true, plugins: { legend: { position: 'bottom', labels: { font: { size: 11 } } } } }
});

// Inventory donut
new Chart(document.getElementById('inventoryChart'), {
    type: 'doughnut',
    data: {
        labels: ['Booked','Available','Other'],
        datasets: [{ data: [{{ $stats['plots_booked'] }}, {{ $stats['plots_available'] }}, {{ max(0,$stats['plots_total']-$stats['plots_booked']-$stats['plots_available']) }}], backgroundColor: ['#ef4444','#22c55e','#94a3b8'] }]
    },
    options: { responsive: true, plugins: { legend: { display: false } } }
});
</script>

@include('Partials.footer')