@extends('backend.app')

@section('title', 'Dashboard')

@push('style')
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,700&display=swap" rel="stylesheet">
    <style>
        :root {
            --dash-ink: #0b1220;
            --dash-muted: #5b6b83;
            --dash-ice: #eef3ff;
            --dash-sky: #d3e6ff;
            --dash-lime: #d7f2d3;
            --dash-rose: #ffd8d8;
            --dash-gold: #ffe8b5;
        }

        .dash-font-title {
            font-family: 'Newsreader', serif;
            letter-spacing: -0.02em;
            color: var(--dash-ink);
        }
        .stat-value {
            color: var(--dash-ink);
        }
        .dash-font-body {
            font-family: 'Space Grotesk', sans-serif;
        }

        .dashboard-hero {
            background: radial-gradient(circle at top left, #f4f7ff, #ffffff 55%, #f7fbff 100%);
            border: 1px solid #e6edf7;
            box-shadow: 0 22px 50px rgba(12, 26, 54, 0.08);
        }

        .dash-kicker {
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 0.65rem;
            color: var(--dash-muted);
            margin-bottom: 0.4rem;
        }

        .dash-chip {
            background: linear-gradient(135deg, #0c1f3f, #304b92);
            color: #fff;
            padding: 1rem 1.2rem;
            border-radius: 1rem;
            min-width: 170px;
            text-align: center;
            box-shadow: 0 16px 30px rgba(16, 32, 72, 0.22);
        }

        .dash-chip-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            opacity: 0.8;
        }

        .dash-chip-value {
            font-size: 1.8rem;
            font-weight: 700;
            margin-top: 0.2rem;
        }

        .dash-stat {
            border: 1px solid #ecf0f6;
            border-radius: 1rem;
            padding: 1.1rem 1.2rem;
            background: #fff;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .dash-stat:hover {
            transform: translateY(-4px);
            box-shadow: 0 14px 30px rgba(20, 28, 55, 0.08);
        }

        .dash-stat .stat-label {
            color: var(--dash-muted);
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.16em;
        }

        .dash-stat .stat-value {
            font-size: 1.6rem;
            font-weight: 700;
            margin-top: 0.4rem;
        }

        .stat-tone-primary {
            background: linear-gradient(135deg, #eef4ff 0%, #ffffff 60%);
        }

        .stat-tone-rose {
            background: linear-gradient(135deg, var(--dash-rose), #fff6f6 60%);
        }

        .stat-tone-lime {
            background: linear-gradient(135deg, var(--dash-lime), #f5fff4 60%);
        }

        .stat-tone-gold {
            background: linear-gradient(135deg, var(--dash-gold), #fffdf6 60%);
        }

        .stat-tone-sky {
            background: linear-gradient(135deg, var(--dash-sky), #f7fbff 60%);
        }

        .dash-table thead th {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--dash-muted);
            border-bottom: 1px solid #e9eef6;
        }

        .dash-table tbody tr:hover {
            background-color: #f7faff;
        }

        .dash-chart {
            min-height: 320px;
        }

        .dash-legend {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            color: var(--dash-muted);
        }

        .legend-dot {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            background: #335bff;
        }

        .card-quiet {
            border: 1px solid #e8edf6;
            box-shadow: 0 12px 22px rgba(20, 28, 55, 0.05);
        }
    </style>
@endpush

@section('content')
    @php
        $property_status_map = [
            'draft' => 'secondary',
            'pending' => 'warning',
            'available' => 'success',
            'under_contract' => 'info',
            'sold' => 'dark',
        ];

        $raffle_status_map = [
            'pending' => 'warning',
            'upcoming' => 'info',
            'in_progress' => 'success',
            'completed' => 'secondary',
        ];
    @endphp

    {{-- PAGE-HEADER --}}
    <div class="page-header">
        <div>
            <h1 class="page-title dash-font-title">Dashboard</h1>
        </div>
        <div class="ms-auto pageheader-btn">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
            </ol>
        </div>
    </div>
    {{-- PAGE-HEADER --}}

    <div class="row">
        <div class="col-12">
            <div class="card dashboard-hero dash-font-body">
                <div class="card-body">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
                        <div>
                            <div class="dash-kicker">Admin Overview</div>
                            <h2 class="dash-font-title mb-2">Operations at a glance</h2>
                            <p class="mb-0 text-muted">Live snapshots of submissions, raffles, and property demand.</p>
                        </div>
                        <div class="dash-chip">
                            <div class="dash-chip-label">Active Raffles</div>
                            <div class="dash-chip-value">{{ $active_raffles ?? 0 }}</div>
                            <div class="small opacity-75">{{ $pending_raffles ?? 0 }} pending</div>
                        </div>
                    </div>

                    <div class="row g-3 mt-3">
                        <div class="col-sm-6 col-lg-4">
                            <div class="dash-stat stat-tone-primary">
                                <div class="stat-label">Total Registered Customers</div>
                                <div class="stat-value">{{ $total_users ?? 0 }}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4">
                            <div class="dash-stat stat-tone-lime">
                                <div class="stat-label">Agents Users</div>
                                <div class="stat-value">{{ $premium_users ?? 0 }}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4">
                            <div class="dash-stat stat-tone-sky">
                                <div class="stat-label">Total Properties</div>
                                <div class="stat-value">{{ $total_properties ?? 0 }}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4">
                            <div class="dash-stat stat-tone-rose">
                                <div class="stat-label">Pending Properties</div>
                                <div class="stat-value">{{ $pending_properties ?? 0 }}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4">
                            <div class="dash-stat stat-tone-gold">
                                <div class="stat-label">Total Raffles</div>
                                <div class="stat-value">{{ $total_raffles ?? 0 }}</div>
                            </div>
                        </div>
                        <div class="col-sm-6 col-lg-4">
                            <div class="dash-stat stat-tone-primary">
                                <div class="stat-label">Total Property Views</div>
                                <div class="stat-value">{{ number_format($total_views ?? 0) }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-4 col-lg-6 mb-4">
            <div class="card card-quiet dash-font-body h-100">
                <div class="card-header bg-transparent border-0">
                    <div class="d-flex w-100 flex-column flex-md-row align-items-start justify-content-between gap-2">
                        <div class="w-100">
                            <h4 class="dash-font-title mb-1">Recent Property Submissions</h4>
                            <p class="text-muted mb-0">Newest listings from agents.</p>
                        </div>
                        <a href="{{ route('admin.property.index') }}" class="btn btn-sm btn-outline-primary ms-md-auto">View all</a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 dash-table">
                        <thead>
                            <tr>
                                <th>Property</th>
                                <th>Agent</th>
                                <th>Status</th>
                                <th class="text-end">Views</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($recent_properties as $property)
                                @php
                                    $status_class = $property_status_map[$property->status] ?? 'secondary';
                                @endphp
                                <tr>
                                    <td>
                                        <div class="fw-semibold">{{ \Illuminate\Support\Str::limit($property->title, 32) }}</div>
                                        <small class="text-muted">{{ $property->created_at?->diffForHumans() }}</small>
                                    </td>
                                    <td>{{ $property->agent?->name ?? 'Unknown' }}</td>
                                    <td><span class="badge bg-{{ $status_class }}">{{ ucfirst(str_replace('_', ' ', $property->status)) }}</span></td>
                                    <td class="text-end">{{ number_format($property->views ?? 0) }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">No recent submissions yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-6 mb-4">
            <div class="card card-quiet dash-font-body h-100">
                <div class="card-header bg-transparent border-0">
                    <div class="d-flex w-100 flex-column flex-md-row align-items-start justify-content-between gap-2">
                        <div class="w-100">
                            <h4 class="dash-font-title mb-1">Raffles Near Deadline</h4>
                            <p class="text-muted mb-0">Pending and active raffles closing soon.</p>
                        </div>
                        <a href="{{ route('admin.raffle.index') }}" class="btn btn-sm btn-outline-primary ms-md-auto">Review</a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 dash-table">
                        <thead>
                            <tr>
                                <th>Property</th>
                                <th>Status</th>
                                <th>Deadline</th>
                                <th class="text-end">Tickets</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($nearing_deadline_raffles as $raffle)
                                @php
                                    $raffle_status_class = $raffle_status_map[$raffle->status] ?? 'secondary';
                                @endphp
                                <tr>
                                    <td>
                                        <div class="fw-semibold">{{ \Illuminate\Support\Str::limit($raffle->property?->title ?? 'Unknown', 28) }}</div>
                                        <small class="text-muted">{{ $raffle->dead_line?->diffForHumans() ?? 'No deadline' }}</small>
                                    </td>
                                    <td><span class="badge bg-{{ $raffle_status_class }}">{{ ucfirst(str_replace('_', ' ', $raffle->status)) }}</span></td>
                                    <td>{{ $raffle->dead_line?->format('M d, Y') ?? '-' }}</td>
                                    <td class="text-end">{{ $raffle->tickets_available ?? 0 }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-4">No deadlines in the next 7 days.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-xl-4 col-lg-12 mb-4">
            <div class="card card-quiet dash-font-body h-100">
                <div class="card-header bg-transparent border-0">
                    <div class="d-flex w-100 flex-column flex-md-row align-items-start justify-content-between gap-2">
                        <div class="w-100">
                            <h4 class="dash-font-title mb-1">Upcoming Draw Dates</h4>
                            <p class="text-muted mb-0">Next raffles ready for draw.</p>
                        </div>
                        <a href="{{ route('admin.raffle.draw.index') }}" class="btn btn-sm btn-outline-primary text-center  ms-md-auto">Draw board</a>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0 dash-table">
                        <thead>
                            <tr>
                                <th>Property</th>
                                <th>Draw Date</th>
                                <th class="text-end">Tickets Sold</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($upcoming_draws as $raffle)
                                <tr>
                                    <td>
                                        <div class="fw-semibold">{{ \Illuminate\Support\Str::limit($raffle->property?->title ?? 'Unknown', 30) }}</div>
                                        <small class="text-muted">{{ ucfirst(str_replace('_', ' ', $raffle->status)) }}</small>
                                    </td>
                                    <td>{{ $raffle->draw_date?->format('M d, Y') ?? '-' }}</td>
                                    <td class="text-end">{{ $raffle->tickets_sold ?? 0 }}</td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="3" class="text-center text-muted py-4">No upcoming draws yet.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 mb-4">
            <div class="card card-quiet dash-font-body h-100">
                <div class="card-header bg-transparent border-0">
                    <div class="d-flex w-100 flex-column flex-md-row align-items-start justify-content-between gap-2">
                        <div>
                            <h4 class="dash-font-title mb-1">Property Views by Month</h4>
                            <p class="text-muted mb-0">Based on listings created in {{ $current_year }}.</p>
                        </div>
                        <span class="dash-legend"><span class="legend-dot"></span> Views</span>
                    </div>
                </div>
                <div class="card-body">
                    <div id="property-views-chart" class="dash-chart"></div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 mb-4">
            <div class="card card-quiet dash-font-body h-100">
                <div class="card-header bg-transparent border-0">
                    <div class="d-flex w-100 flex-column flex-md-row align-items-start justify-content-between gap-2">
                        <h4 class="dash-font-title mb-1">Top Viewed Properties</h4>
                        <p class="text-muted mb-0">Highest demand right now.</p>
                    </div>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        @forelse ($top_viewed_properties as $property)
                            <div class="list-group-item border-0 px-0">
                                <div class="d-flex align-items-center justify-content-between">
                                    <div>
                                        <div class="fw-semibold">{{ \Illuminate\Support\Str::limit($property->title, 32) }}</div>
                                        <small class="text-muted">{{ $property->address ?? 'Address not set' }}</small>
                                    </div>
                                    <span class="badge bg-primary">{{ number_format($property->views ?? 0) }}</span>
                                </div>
                            </div>
                        @empty
                            <div class="text-muted">No views data available yet.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12 mb-4">
            <div class="card card-quiet dash-font-body h-100">
                <div class="card-header bg-transparent border-0">
                    <div class="d-flex w-100 flex-column flex-md-row align-items-start justify-content-between gap-2">
                        <div>
                            <h4 class="dash-font-title mb-1">Raffle Ticket Sales by Month</h4>
                            <p class="text-muted mb-0">Tickets sold in {{ $current_year }}.</p>
                        </div>
                        <span class="dash-legend"><span class="legend-dot"></span> Tickets Sold</span>
                    </div>
                </div>
                <div class="card-body">
                    <div id="raffle-ticket-sales-chart" class="dash-chart"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            function initCharts() {
                if (typeof ApexCharts === 'undefined') {
                    console.warn('ApexCharts not found, retrying...');
                    setTimeout(initCharts, 100);
                    return;
                }

                // Property Views Chart
                const viewsChartEl = document.querySelector('#property-views-chart');
                if (viewsChartEl) {
                    const viewsOptions = {
                        chart: {
                            type: 'area',
                            height: 320,
                            toolbar: { show: false },
                            fontFamily: 'Space Grotesk, sans-serif'
                        },
                        dataLabels: { enabled: false },
                        stroke: {
                            curve: 'smooth',
                            width: 3
                        },
                        series: [{
                            name: 'Views',
                            data: @json($views_by_month ?? [])
                        }],
                        colors: ['#335bff'],
                        fill: {
                            type: 'gradient',
                            gradient: {
                                shadeIntensity: 0.3,
                                opacityFrom: 0.4,
                                opacityTo: 0.05,
                                stops: [0, 90, 100]
                            }
                        },
                        grid: {
                            strokeDashArray: 4,
                            borderColor: '#e6edf7'
                        },
                        xaxis: {
                            categories: @json($month_labels ?? []),
                            axisBorder: { show: false },
                            axisTicks: { show: false }
                        },
                        yaxis: {
                            labels: {
                                formatter: function(value) {
                                    return Math.round(value).toLocaleString();
                                }
                            }
                        },
                        tooltip: {
                            y: {
                                formatter: function(value) {
                                    return `${value.toLocaleString()} views`;
                                }
                            }
                        }
                    };
                    new ApexCharts(viewsChartEl, viewsOptions).render();
                }

                // Ticket Sales Chart
                const salesChartEl = document.querySelector('#raffle-ticket-sales-chart');
                if (salesChartEl) {
                    const salesOptions = {
                        chart: {
                            type: 'bar',
                            height: 320,
                            toolbar: { show: false },
                            fontFamily: 'Space Grotesk, sans-serif'
                        },
                        dataLabels: { enabled: false },
                        series: [{
                            name: 'Tickets Sold',
                            data: @json($ticket_sales_by_month ?? [])
                        }],
                        colors: ['#1f8a70'],
                        plotOptions: {
                            bar: {
                                borderRadius: 6,
                                columnWidth: '48%'
                            }
                        },
                        grid: {
                            strokeDashArray: 4,
                            borderColor: '#e6edf7'
                        },
                        xaxis: {
                            categories: @json($month_labels ?? []),
                            axisBorder: { show: false },
                            axisTicks: { show: false }
                        },
                        yaxis: {
                            labels: {
                                formatter: function(value) {
                                    return Math.round(value).toLocaleString();
                                }
                            }
                        },
                        tooltip: {
                            y: {
                                formatter: function(value) {
                                    return `${value.toLocaleString()} tickets`;
                                }
                            }
                        }
                    };
                    new ApexCharts(salesChartEl, salesOptions).render();
                }
            }

            if (document.readyState === 'complete') {
                initCharts();
            } else {
                window.addEventListener('load', initCharts);
            }
        })();
    </script>
@endpush