@extends(backpack_view('blank'))

@section('header')
    <section class="container-fluid">
        <h1 class="text-body-secondary">{{ trans('backpack::base.dashboard') }}</h1>
    </section>
@endsection

@section('content')
    {{-- ── Row 1: Ticket counters ──────────────────────────────────────────────── --}}
    <div class="row row-cards mb-3">
        <div class="col-sm-6 col-lg-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-blue text-white avatar"><i class="ti ti-ticket fs-3"></i></span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ __('crud.dashboard_tickets') }}</div>
                            <div class="text-muted">{{ number_format($ticketCount) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-red text-white avatar"><i class="ti ti-ban fs-3"></i></span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ __('crud.dashboard_cancelled') }}</div>
                            <div class="text-muted">{{ number_format($ticketCancelCount) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-yellow text-white avatar"><i class="ti ti-trophy fs-3"></i></span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ __('crud.dashboard_winners') }}</div>
                            <div class="text-muted">{{ number_format($ticketWinnerCount) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card card-sm">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <span class="bg-teal text-white avatar"><i class="ti ti-cash fs-3"></i></span>
                        </div>
                        <div class="col">
                            <div class="font-weight-medium">{{ __('crud.dashboard_payments') }}</div>
                            <div class="text-muted">{{ number_format($paymentCount) }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Row 2: Financial totals ─────────────────────────────────────────────── --}}
    <div class="row row-cards mb-3">
        <div class="col-sm-6 col-lg-2">
            <div class="card bg-blue text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <i class="ti ti-chart-bar me-2 fs-4"></i>
                        <div class="subheader text-white-50">{{ __('crud.dashboard_total_sale') }}</div>
                    </div>
                    <div class="h3 mb-1">{{ number_format($totalSale, 2) }}</div>
                    <div class="text-white-75 small">{{ __('crud.dashboard_total_sale_desc') }}</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card bg-green text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <i class="ti ti-trophy me-2 fs-4"></i>
                        <div class="subheader text-white-50">{{ __('crud.dashboard_total_winner') }}</div>
                    </div>
                    <div class="h3 mb-1">{{ number_format($totalWinner, 2) }}</div>
                    <div class="text-white-75 small">{{ __('crud.dashboard_total_winner_desc') }}</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card bg-yellow text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <i class="ti ti-calendar-dollar me-2 fs-4"></i>
                        <div class="subheader text-white-50">{{ __('crud.dashboard_total_paid') }}</div>
                    </div>
                    <div class="h3 mb-1">{{ number_format($totalPaid, 2) }}</div>
                    <div class="text-white-75 small">{{ __('crud.dashboard_total_paid_desc') }}</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card bg-red text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <i class="ti ti-trending-up me-2 fs-4"></i>
                        <div class="subheader text-white-50">{{ __('crud.dashboard_gain') }}</div>
                    </div>
                    <div class="h3 mb-1">{{ number_format($gain, 2) }}</div>
                    <div class="text-white-75 small">{{ __('crud.dashboard_gain_desc') }}</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card bg-cyan text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <i class="ti ti-device-mobile me-2 fs-4"></i>
                        <div class="subheader text-white-50">{{ __('crud.dashboard_pos') }}</div>
                    </div>
                    <div class="h3 mb-1">{{ $posCount }}</div>
                    <div class="text-white-75 small">{{ __('crud.dashboard_pos_desc') }}</div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-2">
            <div class="card bg-purple text-white">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-1">
                        <i class="ti ti-users me-2 fs-4"></i>
                        <div class="subheader text-white-50">{{ __('crud.dashboard_users') }}</div>
                    </div>
                    <div class="h3 mb-1">{{ $userCount }}</div>
                    <div class="text-white-75 small">{{ __('crud.dashboard_users_desc') }}</div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Row 3: Borlette charts ──────────────────────────────────────────────── --}}
    <div class="row row-cards mb-3">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('crud.chart_borlette_morning') }}</h3>
                </div>
                <div class="card-body">
                    {!! $boulChart->container() !!}
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('crud.chart_borlette_evening') }}</h3>
                </div>
                <div class="card-body">
                    {!! $boulSoir->container() !!}
                </div>
            </div>
        </div>
    </div>

    {{-- ── Row 4: Mariage & 3chif ─────────────────────────────────────────────── --}}
    <div class="row row-cards mb-3">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('crud.chart_mariage') }}</h3>
                    <div class="card-options">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" data-bs-toggle="tab" href="#mariage-midi" role="tab">{{ __('crud.draw_morning') }}</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" data-bs-toggle="tab" href="#mariage-soir" role="tab">{{ __('crud.draw_evening') }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body tab-content">
                    <div class="tab-pane active" id="mariage-midi" role="tabpanel">
                        {!! $mariageAm->container() !!}
                    </div>
                    <div class="tab-pane" id="mariage-soir" role="tabpanel">
                        {!! $mariagePM->container() !!}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('crud.chart_3chif') }}</h3>
                    <div class="card-options">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" data-bs-toggle="tab" href="#chif3-midi" role="tab">{{ __('crud.draw_morning') }}</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" data-bs-toggle="tab" href="#chif3-soir" role="tab">{{ __('crud.draw_evening') }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body tab-content">
                    <div class="tab-pane active" id="chif3-midi" role="tabpanel">
                        {!! $troischifAM->container() !!}
                    </div>
                    <div class="tab-pane" id="chif3-soir" role="tabpanel">
                        {!! $troischifPM->container() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Row 5: Loto4 & Loto5 ──────────────────────────────────────────────── --}}
    <div class="row row-cards mb-3">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('crud.chart_loto4') }}</h3>
                    <div class="card-options">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" data-bs-toggle="tab" href="#loto4-midi" role="tab">{{ __('crud.draw_morning') }}</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" data-bs-toggle="tab" href="#loto4-soir" role="tab">{{ __('crud.draw_evening') }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body tab-content">
                    <div class="tab-pane active" id="loto4-midi" role="tabpanel">
                        {!! $lotto4AM->container() !!}
                    </div>
                    <div class="tab-pane" id="loto4-soir" role="tabpanel">
                        {!! $lotto4PM->container() !!}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ __('crud.chart_loto5') }}</h3>
                    <div class="card-options">
                        <ul class="nav nav-tabs card-header-tabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" data-bs-toggle="tab" href="#loto5-midi" role="tab">{{ __('crud.draw_morning') }}</a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" data-bs-toggle="tab" href="#loto5-soir" role="tab">{{ __('crud.draw_evening') }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="card-body tab-content">
                    <div class="tab-pane active" id="loto5-midi" role="tabpanel">
                        {!! $lotto5AM->container() !!}
                    </div>
                    <div class="tab-pane" id="loto5-soir" role="tabpanel">
                        {!! $lotto5PM->container() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('after_scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
    {!! $boulChart->script() !!}
    {!! $boulSoir->script() !!}
    {!! $mariageAm->script() !!}
    {!! $mariagePM->script() !!}
    {!! $troischifAM->script() !!}
    {!! $troischifPM->script() !!}
    {!! $lotto4AM->script() !!}
    {!! $lotto4PM->script() !!}
    {!! $lotto5AM->script() !!}
    {!! $lotto5PM->script() !!}
@endsection