@extends('layouts.base')

@section('title')
    Dashboard Tickets à Grattage
@endsection

@section('style')
    <style>
        .app-wrapper {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .app-content {
            flex: 1 0 auto;
            display: flex;
            flex-direction: column;
        }
        .app-content main {
            flex: 1 0 auto;
            display: flex;
            flex-direction: column;
        }
        .app-content main > .container-fluid {
            flex: 1 0 auto;
            display: flex;
            flex-direction: column;
        }
        .main-nav li.nav-item-active > a {
            background-color: {{ config('colors.lnb_green') }};
            color: #fff !important;
            border-radius: 5px;
        }
        .main-nav li.nav-item-active > a i {
            color: #fff !important;
        }
    </style>
@endsection

@section('content')
<div class="row">
    <div class="col-lg-12 text-end">
        {{-- Boutons actionnel si nécessaire --}}
        {{-- <a href="{{ route('tickets.form') }}" class="btn btn-outline-primary">
            <i class="ph-light ph-plus-circle"></i> Nouveau ticket
        </a> --}}
    </div>
</div>

{{-- Cartes statistiques --}}
<div class="row mt-4">
    <div class="col-sm-3 col-lg-3">
        <div class="card project-profit-card">
            <div class="card-body">
                <div class="profit-arrow">
                    <span class="bg-white text-primary h-45 w-45 d-flex-center">
                        <i class="ph-bold ph-arrow-up-right f-s-18"></i>
                    </span>
                </div>
                <span class="bg-info h-45 w-45 d-flex-center b-r-50">
                    <i class="ph-bold ph-ticket f-s-24"></i>
                </span>
                <div class="mt-3">
                    <h4 class="text-dark">{{ $totalTickets ?? 0 }}</h4>
                    <p class="f-w-500 mb-0 txt-ellipsis-1">Total Tickets</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3 col-lg-3">
        <div class="card project-profit-card">
            <div class="card-body">
                <div class="profit-arrow">
                    <span class="bg-white text-primary h-45 w-45 d-flex-center">
                        <i class="ph-bold ph-arrow-up-right f-s-18"></i>
                    </span>
                </div>
                <span class="bg-success h-45 w-45 d-flex-center b-r-50">
                    <i class="ph-bold ph-check-circle f-s-24"></i>
                </span>
                <div class="mt-3">
                    <h4 class="text-dark">{{ $soldTickets ?? 0 }}</h4>
                    <p class="f-w-500 mb-0 txt-ellipsis-1">Vendus</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3 col-lg-3">
        <div class="card project-profit-card">
            <div class="card-body">
                <div class="profit-arrow">
                    <span class="bg-white text-primary h-45 w-45 d-flex-center">
                        <i class="ph-bold ph-arrow-up-right f-s-18"></i>
                    </span>
                </div>
                <span class="bg-warning h-45 w-45 d-flex-center b-r-50">
                    <i class="ph-bold ph-clock f-s-24"></i>
                </span>
                <div class="mt-3">
                    <h4 class="text-dark">{{ $availableTickets ?? 0 }}</h4>
                    <p class="f-w-500 mb-0 txt-ellipsis-1">Disponibles</p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-3 col-lg-3">
        <div class="card project-profit-card">
            <div class="card-body">
                <div class="profit-arrow">
                    <span class="bg-white text-primary h-45 w-45 d-flex-center">
                        <i class="ph-bold ph-arrow-up-right f-s-18"></i>
                    </span>
                </div>
                <span class="bg-danger h-45 w-45 d-flex-center b-r-50">
                    <i class="ph-bold ph-prohibit f-s-24"></i>
                </span>
                <div class="mt-3">
                    <h4 class="text-dark">{{ $winnerTickets ?? 0 }}</h4>
                    <p class="f-w-500 mb-0 txt-ellipsis-1">Gagnants</p>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Graphiques --}}
<div class="row mt-4">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Évolution des ventes</h5>
                <select id="tickets-period" class="form-select w-auto">
                    <option value="this_month" selected>Ce mois</option>
                    <option value="last_month">Mois passé</option>
                    <option value="this_year">Cette année</option>
                    <option value="last_year">Année passée</option>
                </select>
            </div>
            <div class="card-body">
                <div id="tickets-chart"></div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Répartition des tickets</h5>
                <select id="tickets-status-period" class="form-select w-auto">
                    <option value="this_month" selected>Ce mois</option>
                    <option value="last_month">Mois passé</option>
                    <option value="this_year">Cette année</option>
                    <option value="last_year">Année passée</option>
                </select>
            </div>
            <div class="card-body">
                <div id="tickets-donut"></div>
            </div>
        </div>
    </div>
</div>

{{-- Tickets récents --}}
<div class="row mt-4">
    <div class="col-lg-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5>Tickets récents</h5>
                <ul class="nav nav-tabs tab-outline-primary" id="ticketsTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#all-tab" type="button" role="tab">
                            Tous
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sold-tab" type="button" role="tab">
                            Vendus
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#available-tab" type="button" role="tab">
                            Disponibles
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#winner-tab" type="button" role="tab">
                            Gagnants
                        </button>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="tab-content">
                    {{-- Tous --}}
                    <div class="tab-pane fade show active" id="all-tab" role="tabpanel">
                        <div class="app-datatable-default overflow-auto">
                            <table id="recentAll" class="display app-data-table default-data-table">
                                <thead>
                                    <tr>
                                        <th>Numéro Ticket</th>
                                        <th>Type</th>
                                        <th>Prix (FCFA)</th>
                                        <th>Commission</th>
                                        <th>Status</th>
                                        <th>Date Vente</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recentAll as $ticket)
                                    <tr>
                                        <td>{{ $ticket->ticket_number }}</td>
                                        <td>{{ $ticket->type }}</td>
                                        <td>{{ $ticket->commission }}</td>
                                        <td>{{ number_format($ticket->price,0,',',' ') }}</td>
                                        <td>
                                            <span class="badge 
                                                @if($ticket->status == 'available') bg-warning
                                                @elseif($ticket->status == 'sold') bg-success
                                                @elseif($ticket->status == 'claimed') bg-primary
                                                @elseif($ticket->status == 'invalid') bg-danger
                                                @endif">
                                                Disponible
                                            </span>
                                        </td>
                                        <td>{{ optional($ticket->payment_date)->format('d/m/Y') ?? '-' }}</td>
                                    </tr>
                                    @empty
                                    <tr><td colspan="6" class="text-center">Aucune donnée</td></tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {{-- Autres onglets (vendus, disponibles, gagnants) à copier selon le même pattern --}}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

{{-- @section('script')
<script src="{{ asset('assets/vendor/apexcharts/apexcharts.min.js --}}