@extends('layouts.theme1')

@section('title', 'Réservations')

@section('style')

    <!-- Custom CSS -->
<link href="{{ asset('theme1/dist/css/style.min.css') }}" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<style>
    th, td {
        max-width: 113px !important;
        word-wrap: break-word;
    }

    .small-column {
        font-size: 9px;
    }

</style>
@endsection

@section('content')

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="border-bottom title-part-padding">
                    <h4 class="card-title mb-0">Liste des réservations</h4>
                </div>
                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif

                    <div class="table-responsive">
                        <table id="reservations-table" class="table table-striped table-bordered">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>ID</th>
                                    <th>Trajet</th>
                                    <th>Date départ</th>
                                    <th>Client</th>
                                    <th>Compagnie</th>
                                    <th>Passagers</th>
                                    <th>Prix (FCFA)</th>
                                    <th>Statut</th>
                                    <th>Actions</th>
                                    <th>Paiement</th>
                                    <th>Date création</th>
                                    
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
 
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/v/dt/dt-1.11.5/datatables.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#reservations-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route("reservations.index") }}',
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'id', name: 'id' },
                    { data: 'trip_info', name: 'trip_info' },
                    { data: 'departureTime', name: 'departureTime' },
                    { data: 'client_info', name: 'client_info' },
                    { data: 'compagnie', name: 'compagnie' },
                    { data: 'passengers_count', name: 'passengers_count' },
                    { 
                        data: 'price', 
                        name: 'price',
                        render: function(data) {
                            return data + ' FCFA';
                        }
                    },
                    { 
                        data: 'status_badge', 
                        name: 'status_badge',
                        render: function(data) {
                            const badges = {
                                'draft': '<span class="badge bg-secondary">Brouillon</span>',
                                'pending': '<span class="badge bg-warning">En attente</span>',
                                'confirmed': '<span class="badge bg-success">Confirmé</span>',
                                'cancelled': '<span class="badge bg-danger">Annulé</span>',
                                'completed': '<span class="badge bg-info">Terminé</span>'
                            };
                            return badges[data] || '<span class="badge bg-dark">' + data + '</span>';
                        }
                    },
                    { data: 'action', name: 'action', orderable: false, searchable: false },
                    { data: 'payment', name: 'payment', defaultContent: '-' },
                    { data: 'created_at', name: 'created_at', defaultContent: '-' }
                    
                ],
                columnDefs: [
                    {
                        targets: 0, // colonne #
                        width: "10px",
                        className: "small-column text-center"
                    },
                    {
                        targets: 1, // colonne ID
                        width: "10px",
                        className: "small-column"
                    },
                    {
                        targets: 6, // colonne ID
                        width: "10px",
                        className: "small-column"
                    }
                ],
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/French.json"
                },
                order: [[9, 'desc']] // Tri par date de création (colonne 9)
            });
        });
    </script>
@endsection