@extends('layouts.app')
@section('title', 'Dashboard')
@section('css')
    <link rel="stylesheet" href="{{ url('assets/vendor/libs/apex-charts/apex-charts.css') }}" />
@endsection
@section('content')

    <div class="flex-grow-1 container-p-y container-fluid" style="opacity:0">

        <!-- Dashboard Header -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h4 class="mb-1">Dashboard Overview</h4>
                <p class="text-muted mb-0">Comprehensive event metrics and analytics</p>
            </div>
        </div>

        <!-- Row 1: Basic Overview, Registration Types Detailed Breakdown -->
        <div class="row g-4 mb-4">
            <div class="col-12 col-xl-8 col-lg-8 col-md-12">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Basic Overview</h5>
                        <small class="text-muted">Key metrics at a glance</small>
                    </div>
                    <div class="card-body">
                        <div id="basicOverviewChart"></div>
                    </div>
                </div>
            </div>

            <!-- Registration Types Detailed Breakdown -->
            <div class="col-12 col-xl-4 col-lg-4 col-md-12">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h5 class="card-title mb-0">Conference Types Detail</h5>
                        <small class="text-muted">Detailed Registration Types Breakdown</small>
                    </div>
                    <div class="card-body">
                        <div id="registrationTypesDetailChart"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 2: Relationship, Professions & Room Types -->
        <div class="row g-4 mb-4">
            <!-- Relationship Pie Chart -->
            <div class="col-12 col-lg-4 col-md-6">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h5 class="card-title mb-0">Relationship Distribution</h5>
                        <small class="text-muted">Registrant relationships</small>
                    </div>
                    <div class="card-body">
                        <div id="relationshipPieChart"></div>
                    </div>
                </div>
            </div>

            <!-- Professions Pie Chart with Tabs -->
            <div class="col-12 col-lg-4 col-md-6">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h5 class="card-title mb-0">Professions Distribution</h5>
                    </div>
                    <div class="card-body">
                        <!-- Tabs -->
                        <ul class="nav nav-pills mb-3 gap-2 mt-2" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="medical-tab" data-bs-toggle="pill" data-bs-target="#medical-professions" type="button" role="tab">
                                    Medical
                                </button>
                            </li>
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="non-medical-tab" data-bs-toggle="pill" data-bs-target="#non-medical-professions" type="button" role="tab">
                                    Non-Medical
                                </button>
                            </li>
                        </ul>
                        <!-- Tab Content -->
                        <div class="tab-content p-0 shadow-none">
                            <div class="tab-pane fade show active" id="medical-professions" role="tabpanel">
                                <div id="medicalProfessionsPieChart"></div>
                            </div>
                            <div class="tab-pane fade" id="non-medical-professions" role="tabpanel">
                                <div id="nonMedicalProfessionsPieChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Room Types Chart -->
            <div class="col-12 col-lg-4 col-md-12">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Room Type Frequency</h5>
                        <small class="text-muted">Distribution of room allocations</small>
                    </div>
                    <div class="card-body">
                        <div id="roomTypesChart"></div>
                    </div>
                </div>
            </div>
        </div>




        <div class="divider mt-8">
            <div class="divider-text">Suggested</div>
        </div>
        <!-- Row 3: Check-in Status, Total RequestQuotes & Registrants Breakdown -->
        <div class="row g-4 mb-4">
            <!-- Check-in Status Widget (Small - with percentage) -->
            <div class="col-12 col-xl-3 col-lg-4 col-md-6">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h5 class="card-title mb-0">Check-in Status</h5>
                        <small class="text-muted">Real-time tracking</small>
                    </div>
                    <div class="card-body">
                        <div id="checkinRadialChart"></div>
                        <div class="d-flex flex-column gap-2 mt-3">
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge badge-dot bg-success"></span>
                                    <span class="text-muted">Checked-in</span>
                                </div>
                                <strong>412</strong>
                            </div>
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-2">
                                    <span class="badge badge-dot bg-warning"></span>
                                    <span class="text-muted">Pending</span>
                                </div>
                                <strong>298</strong>
                            </div>
                            <div class="d-flex align-items-center justify-content-between border-top pt-2 mt-1">
                                <strong>Total</strong>
                                <strong class="text-primary">710</strong>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Total RequestQuotes Widget -->
            <div class="col-12 col-xl-5 col-lg-8 col-md-12">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center pb-0">
                        <div>
                            <h5 class="card-title mb-0">Total RequestQuotes</h5>
                            <small class="text-muted">Breakdown by conference type</small>
                        </div>
                        <select class="form-select form-select-sm w-auto" id="registrationTimeFilter">
                            <option value="today">Today</option>
                            <option value="this_week">This Week</option>
                            <option value="this_month" selected>This Month</option>
                            <option value="all">All Time</option>
                        </select>
                    </div>
                    <div class="card-body">
                        <div class="row align-items-center">
                            <div class="col-lg-4 col-md-12 mb-3 mb-lg-0">
                                <div class="text-center">
                                    <h2 class="display-4 fw-bold text-primary mb-2">245</h2>
                                    <p class="text-muted mb-1">Total</p>
{{--                                    <small class="text-success"><i class="ti tabler-arrow-up"></i> 12.5%</small>--}}
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-12">
                                <div id="registrationBreakdownChart"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Registrants Breakdown Widget -->
            <div class="col-12 col-xl-4 col-lg-12 col-md-6">
                <div class="card h-100">
                    <div class="card-header pb-0">
                        <h5 class="card-title mb-0">Registrants Breakdown</h5>
                        <small class="text-muted">Total registrants by type</small>
                    </div>
                    <div class="card-body">
                        <div id="registrantsDonutChart"></div>
                    </div>
                </div>
            </div>
        </div>


        <!-- Row 4: Revenue Widget (Full Width) -->
        <div class="row g-4 mb-4">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="card-title mb-0">Total Revenue</h5>
                            <small class="text-muted">Payment status and revenue breakdown</small>
                        </div>
                        <div class="text-end">
                            <h4 class="mb-0 text-success">$529,800</h4>
                            <small class="text-muted">Total Revenue</small>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-lg-7 col-md-12 mb-3 mb-lg-0">
                                <div id="revenueChart"></div>
                            </div>
                            <div class="col-lg-5 col-md-12">
                                <div class="d-flex flex-column gap-3">
                                    <div class="d-flex align-items-center justify-content-between p-3 border rounded">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="avatar avatar-sm">
                                                <span class="avatar-initial rounded bg-label-success">
                                                    <i class="ti tabler-check"></i>
                                                </span>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Fully Paid</h6>
                                                <small class="text-muted">198 RequestQuotes</small>
                                            </div>
                                        </div>
                                        <h5 class="mb-0 text-success">$487,500</h5>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between p-3 border rounded">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="avatar avatar-sm">
                                                <span class="avatar-initial rounded bg-label-warning">
                                                    <i class="ti tabler-clock"></i>
                                                </span>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Partial Payment</h6>
                                                <small class="text-muted">24 RequestQuotes</small>
                                            </div>
                                        </div>
                                        <h5 class="mb-0 text-warning">$42,300</h5>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between p-3 border rounded">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="avatar avatar-sm">
                                                <span class="avatar-initial rounded bg-label-danger">
                                                    <i class="ti tabler-alert-circle"></i>
                                                </span>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Payment Due</h6>
                                                <small class="text-muted">18 RequestQuotes</small>
                                            </div>
                                        </div>
                                        <h5 class="mb-0 text-danger">$51,200</h5>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between p-3 border rounded">
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="avatar avatar-sm">
                                                <span class="avatar-initial rounded bg-label-secondary">
                                                    <i class="ti tabler-arrow-back-up"></i>
                                                </span>
                                            </div>
                                            <div>
                                                <h6 class="mb-0">Refunds</h6>
                                                <small class="text-muted">5 RequestQuotes</small>
                                            </div>
                                        </div>
                                        <h5 class="mb-0 text-secondary">$12,800</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 5: Children -->
        <div class="row g-4 mb-4">
            <!-- Children & Babysitting Widget -->
            <div class="col-12 col-lg-5 col-md-12">
                <div class="card h-100">
                    <div class="card-header">
                        <h5 class="card-title mb-0">Children & Babysitting</h5>
                        <small class="text-muted">Age distribution and babysitting requests</small>
                    </div>
                    <div class="card-body">
                        <div class="row g-3 mb-4">
                            <div class="col-4">
                                <div class="text-center p-3 border rounded">
                                    <h4 class="mb-1 text-warning">34</h4>
                                    <small class="text-muted">Age 0-3</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="text-center p-3 border rounded">
                                    <h4 class="mb-1 text-danger">78</h4>
                                    <small class="text-muted">Age 4-12</small>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="text-center p-3 border rounded">
                                    <h4 class="mb-1 text-secondary">35</h4>
                                    <small class="text-muted">Age 13-17</small>
                                </div>
                            </div>
                        </div>
                        <div class="border rounded p-3 mb-3" style="background-color: rgba(var(--bs-info-rgb), 0.08);">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <div class="d-flex align-items-center gap-2">
                                    <i class="ti tabler-baby-carriage text-info ti-md"></i>
                                    <h6 class="mb-0">Babysitting Requests</h6>
                                </div>
                                <h4 class="mb-0 text-info">45</h4>
                            </div>
                            <small class="text-muted">Number of RequestQuotes that opted for babysitting</small>
                        </div>
                        <div class="border rounded p-3" style="background-color: rgba(var(--bs-primary-rgb), 0.08);">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <div class="d-flex align-items-center gap-2">
                                    <i class="ti tabler-users text-primary ti-md"></i>
                                    <h6 class="mb-0">Children Needing Babysitting</h6>
                                </div>
                                <h4 class="mb-0 text-primary">67</h4>
                            </div>
                            <small class="text-muted">Actual count of children requiring babysitting service</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

@endsection

@push('scripts')
    <script src="{{ url('assets/vendor/libs/apex-charts/apexcharts.js') }}?v={{ time() }}"></script>
    <script src="{{ asset('js/dashboard.js') }}?v={{ time() }}"></script>
@endpush