<?php $__env->startSection('title', 'Liste des Véhicules'); ?>

<?php $__env->startPush('styles'); ?>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.bootstrap5.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    :root {
        --primary-color: #020548;
        --secondary-color: #3b5de7;
        --accent-color: #ff6b6b;
        --light-bg: #f8f9fa;
    }

    .page-header {
        background-color: white;
        padding: 1.5rem;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        margin-bottom: 2rem;
    }

    .breadcrumb-custom {
        background-color: transparent;
        padding: 0;
    }

    .breadcrumb-custom .breadcrumb-item a {
        color: var(--secondary-color);
        text-decoration: none;
    }

    .breadcrumb-custom .breadcrumb-item.active {
        color: var(--primary-color);
        font-weight: 500;
    }

    .btn-add {
        background-color: var(--primary-color);
        border: none;
        padding: 10px 20px;
        font-weight: 500;
        transition: all 0.3s;
    }

    .btn-add:hover {
        background-color: var(--secondary-color);
        transform: translateY(-2px);
    }

    .card-table {
        border: none;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(2,5,72,0.1);
        overflow: hidden;
    }

    .table-responsive {
        padding: 0;
    }

    #vehicule-table {
        width: 100% !important;
    }

    #vehicule-table thead th {
        background-color: var(--primary-color);
        color: white;
        font-weight: 500;
        padding: 15px;
    }

    #vehicule-table tbody td {
        vertical-align: middle;
        padding: 12px 15px;
    }

    #vehicule-table tbody tr:nth-child(even) {
        background-color: rgba(248, 249, 250, 0.5);
    }

    #vehicule-table tbody tr:hover {
        background-color: rgba(2, 5, 72, 0.03);
    }

    .carousel-img {
        height: 120px;
        width: 180px;
        object-fit: cover;
        border-radius: 8px;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: rgba(0,0,0,0.5);
        border-radius: 50%;
        padding: 10px;
    }

    .badge-yes {
        background-color: #28a745;
        color: white;
    }

    .badge-no {
        background-color: #6c757d;
        color: white;
    }

    .btn-action {
        padding: 6px 12px;
        font-size: 14px;
        border-radius: 6px;
        transition: all 0.2s;
    }

    .btn-edit {
        background-color: #ffc107;
        border-color: #ffc107;
        color: #212529;
    }

    .btn-edit:hover {
        background-color: #e0a800;
        border-color: #d39e00;
    }

    .btn-delete {
        background-color: #dc3545;
        border-color: #dc3545;
    }

    .btn-delete:hover {
        background-color: #c82333;
        border-color: #bd2130;
    }

    /* Modal de succès */
    .success-modal .modal-header {
        background-color: #28a745;
        color: white;
    }

    /* Modal de suppression */
    .delete-modal .modal-header {
        background-color: #dc3545;
        color: white;
    }

    .price-cell {
        font-weight: 600;
        color: var(--primary-color);
    }

    .empty-state {
        text-align: center;
        padding: 40px;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 60px;
        margin-bottom: 20px;
        color: #dee2e6;
    }

    .capacity-cell {
        max-width: 150px;
    }

    .btn-view {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: white;
}

.btn-view:hover {
    background-color: #138496;
    border-color: #117a8b;
    color: white;
}

</style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
<div class="container-fluid">
    <!-- Modal de succès -->
    <?php if(session('show_success_modal')): ?>
    <div class="modal fade success-modal show" id="successModal" tabindex="-1" style="display: block; background: rgba(0,0,0,0.5);">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fas fa-check-circle me-2"></i>Succès</h5>
                </div>
                <div class="modal-body">
                    <p><?php echo e(session('modal_message', 'Opération effectuée avec succès !')); ?></p>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var modal = new bootstrap.Modal(document.getElementById('successModal'), {
                backdrop: 'static',
                keyboard: false
            });
            modal.show();

            setTimeout(function() {
                var modalEl = document.getElementById('successModal');
                modalEl.style.transition = 'opacity 0.5s';
                modalEl.style.opacity = '0';

                setTimeout(function() {
                    modal.hide();
                    window.location.href = "<?php echo e(route('listeVehicule')); ?>";
                }, 500);
            }, 2500);
        });
    </script>
    <?php endif; ?>

    <!-- En-tête de page -->
    <div class="page-header">
        <div class="row align-items-center">
            <div class="col-md-6">
                <h2 class="mb-0">
                    <i class="fas fa-car me-2" style="color: var(--primary-color);"></i>
                    Liste des Véhicules
                </h2>
            </div>
            <div class="col-md-6">
                <div class="d-flex justify-content-end align-items-center">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb breadcrumb-custom">
                            <li class="breadcrumb-item"><a href="<?php echo e(route('dashboard')); ?>">Dashboard</a></li>
                            <li class="breadcrumb-item active">Véhicules</li>
                        </ol>
                    </nav>
                    <a href="<?php echo e(route('formVehicule')); ?>" class="btn btn-add ms-3">
                        <i class="fas fa-plus me-2"></i>Ajouter un véhicule
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Carte principale -->
    <div class="card-table">
        <div class="card-body">
            <div class="table-responsive">
                <table id="vehicule-table" class="table table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>Véhicule</th>
                            <th>Image</th>
                            <th>Capacité</th>
                            <th>Climatisation</th>
                            <th>Prix</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $__currentLoopData = $vehicules; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $vehicule): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <tr>
                            <td>
                                <strong><?php echo e($vehicule->name); ?></strong>
                            </td>
                            <td>
                                <?php if($vehicule->images->count() > 0): ?>
                                <div id="carousel-<?php echo e($vehicule->id); ?>" class="carousel slide" data-bs-ride="carousel" style="width: 180px;">
                                    <div class="carousel-inner">
                                        <?php $__currentLoopData = $vehicule->images; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                            <div class="carousel-item <?php echo e($key === 0 ? 'active' : ''); ?>">
                                                <img src="<?php echo e($image->image_url); ?>" class="d-block carousel-img" alt="<?php echo e($vehicule->name); ?>">
                                            </div>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                                    </div>
                                    <?php if($vehicule->images->count() > 1): ?>
                                        <button class="carousel-control-prev" type="button" data-bs-target="#carousel-<?php echo e($vehicule->id); ?>" data-bs-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                        </button>
                                        <button class="carousel-control-next" type="button" data-bs-target="#carousel-<?php echo e($vehicule->id); ?>" data-bs-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                        </button>
                                    <?php endif; ?>
                                </div>
                                <?php else: ?>
                                <div class="bg-light d-flex align-items-center justify-content-center" style="height: 120px; width: 180px; border-radius: 8px;">
                                    <i class="fas fa-image fa-2x text-muted"></i>
                                </div>
                                <?php endif; ?>
                            </td>
                            <td class="capacity-cell">
                                <div><i class="fas fa-suitcase me-2"></i> <?php echo e($vehicule->luggage); ?> bagages</div>
                                <div><i class="fas fa-users me-2"></i> <?php echo e($vehicule->number_of_seats); ?> sièges</div>
                            </td>
                            <td>
                                <span class="badge <?php echo e($vehicule->air_conditioning ? 'badge-yes' : 'badge-no'); ?>">
                                    <?php echo e($vehicule->air_conditioning ? 'Oui' : 'Non'); ?>

                                </span>
                            </td>
                            <td>
                                <div class="price-cell">
                                    <i class="fas fa-tag me-2"></i> <?php echo e(number_format($vehicule->price_economy, 0, ',', ' ')); ?> FCFA
                                </div>
                                <div class="price-cell">
                                    <i class="fas fa-tags me-2"></i> <?php echo e(number_format($vehicule->price_business, 0, ',', ' ')); ?> FCFA
                                </div>
                            </td>
                            <td>
                                <div class="d-flex gap-2">
                                    <a href="<?php echo e(route('formeditVehicule', $vehicule->id)); ?>" class="btn btn-action btn-edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button type="button" class="btn btn-action btn-delete" data-bs-toggle="modal" data-bs-target="#deleteModal<?php echo e($vehicule->id); ?>">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    
                                    <a href="<?php echo e(route('dashboard.showvehicule', $vehicule->id)); ?>" class="btn btn-action btn-view">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>

                        <!-- Modal de suppression -->
                        <div class="modal fade delete-modal" id="deleteModal<?php echo e($vehicule->id); ?>" tabindex="-1">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title"><i class="fas fa-exclamation-triangle me-2"></i>Confirmation</h5>
                                    </div>
                                    <div class="modal-body">
                                        <p>Êtes-vous sûr de vouloir supprimer le véhicule <strong><?php echo e($vehicule->name); ?></strong> ?</p>
                                        <p class="text-danger"><small>Cette action est irréversible.</small></p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                                        <form action="<?php echo e(route('vehicules.destroy', $vehicule->id)); ?>" method="POST">
                                            <?php echo csrf_field(); ?>
                                            <?php echo method_field('DELETE'); ?>
                                            <button type="submit" class="btn btn-danger">
                                                <i class="fas fa-trash me-1"></i> Supprimer
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.5.0/js/responsive.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function() {
    $('#vehicule-table').DataTable({
        responsive: true,
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.7/i18n/fr-FR.json'
        },
        dom: '<"top"f>rt<"bottom"lip><"clear">',
        columnDefs: [
            { responsivePriority: 1, targets: 0 }, // Nom du véhicule
            { responsivePriority: 2, targets: -1 }, // Actions
            {
                responsivePriority: 3,
                targets: 1, // Images
                orderable: false // Désactive le tri
            },
            { responsivePriority: 4, targets: 2 }, // Capacité
            { responsivePriority: 5, targets: 3 }  // Climatisation
        ]
    });

    // Initialiser les carousels
    $('.carousel').carousel({
        interval: false,
        wrap: false
    });

    // Initialiser les tooltips Bootstrap
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
});
</script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\Users\LENOVO\Documents\voyagedifiantDashboard\resources\views/page/listeVehicule.blade.php ENDPATH**/ ?>