@extends('base')

@section('content')

<style>
    /* Même fond que les pages plein écran (planning_laravel/layout.blade.php) */
    html, body { background: #f4f6f3; }
    /* Plein écran : seule la zone de la page passe en plein écran, sans le menu de gauche ni le haut */
    .etat-camions:fullscreen { background: #f4f6f3; overflow-y: auto; padding: 8px 12px; }
    /* Titre de la feuille comme sur le Suivi de livraison : sans fond, même vert, souligné */
    .etat-camions .entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; margin: 10px 0 12px; padding-bottom: 8px; border-bottom: 3px solid #28a745; }
    .etat-camions .entete h2 { font-size: 1.5rem; font-weight: 700; margin: 0; color: #28a745; }
    .etat-camions .entete .sous-titre { color: #5d665f; font-size: .9rem; }
    .etat-camions .entete .liens { display: flex; gap: 8px; }
</style>

<div class="etat-camions">
    <div class="entete">
        <div>
            <h2>État des camions</h2>
            <div class="sous-titre">{{ \Carbon\Carbon::today()->format('d/m/Y') }} · statut déduit des heures du BL en cours, tour suivant d'après le planning réel</div>
        </div>
        <div class="liens">
            <a href="{{ route('suivi_livraison.index') }}" class="btn btn-sm btn-success">Suivi de livraison</a>
            <a href="{{ route('suivi_livraison.carte') }}" class="btn btn-sm btn-success" target="_blank">Carte</a>
            <button type="button" class="btn btn-sm btn-outline-success" id="plein_ecran" title="Plein écran (Échap pour sortir)"><i class="fas fa-expand"></i> <span>Plein écran</span></button>
        </div>
    </div>

    @include('suivi_livraison._etat_camions')
</div>

<script>
    $(function () {
        $('title').text("ÉTAT DES CAMIONS - SMART CENTRAL");

        $('#plein_ecran').click(function () {
            var zone = document.querySelector('.etat-camions');
            if (document.fullscreenElement) {
                document.exitFullscreen();
            } else if (zone.requestFullscreen) {
                zone.requestFullscreen();
            }
        });
        $(document).on('fullscreenchange', function () {
            var actif = Boolean(document.fullscreenElement);
            $('#plein_ecran i').toggleClass('fa-expand', !actif).toggleClass('fa-compress', actif);
            $('#plein_ecran span').text(actif ? 'Quitter le plein écran' : 'Plein écran');
        });
    });
</script>

@endsection