@extends('layouts.master')

@section('title', 'Camions')

@section('content')
    <div class="main-content">
        <section class="section">
            <h1 class="section-header">
                <div>@yield('title')</div>
            </h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}">Récaputilatifs</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('camion.index') }}">Camion</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Détails</li>
                </ol>
            </nav>
        </section>

        <div class="row">
            <div class="col-md-12">
                {{-- Header --}}
                <div class="mb-4 text-center">
                    <h2 class="fw-bold text-primary">Camion : {{ $camion->plaque_immatriculation_tracteur }}</h2>
                    <p class="text-muted">{{ $camion->marque }} {{ $camion->modele }} | Capacité : {{ $camion->capacity }} {{ $camion->unite->short_code }}</p>
                </div>

                <div class="row g-4">
                    {{-- Carte infos principales --}}
                    <div class="col-md-4">
                        <div class="card shadow-sm rounded-4 p-3 h-100">
                            <h5 class="fw-bold mb-3">Informations principales</h5>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item"><strong>Chauffeur :</strong> {{ $camion->chauffeur->first_name }} {{ $camion->chauffeur->last_name }}</li>
                                <li class="list-group-item"><strong>Immatriculation :</strong> <br>
                                    {{ $camion->plaque_immatriculation_tracteur }} <br>
                                    {{ $camion->plaque_immatriculation_equipement ?? '-' }}
                                </li>
                                <li class="list-group-item"><strong>Châssis :</strong> <br>
                                    {{ $camion->chassis_tracteur }} <br>
                                    {{ $camion->chassis_equipement ?? '-' }}
                                </li>
                                <li class="list-group-item"><strong>Type carburant :</strong> {{ $camion->type_carburant ?? '-' }}</li>
                            </ul>
                        </div>
                    </div>

                    {{-- Carte GPS / Kilométrage --}}
                    <div class="col-md-4">
                        <div class="card shadow-sm rounded-4 p-3 h-100">
                            <h5 class="fw-bold mb-3">Données GPS & Moteur</h5>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item"><strong>Carburant :</strong>  L</li>
                                <li class="list-group-item"><strong>Kilométrage :</strong>  km</li>
                                <li class="list-group-item"><strong>Batterie externe :</strong>  V</li>
                                <li class="list-group-item"><strong>Batterie interne :</strong> V</li>
                                <li class="list-group-item"><strong>État du moteur :</strong> </li>
                                <li class="list-group-item"><strong>Dernière transmission :</strong> </li>
                            </ul>
                        </div>
                    </div>

                    {{-- Menu --}}
                    <div class="col-md-4">
                        <div class="d-flex flex-column bg-white shadow-sm rounded-4 p-3 h-100">
                            <h5 class="fw-bold text-primary mb-3">Gestion du camion</h5>
                            <ul class="list-group list-group-flush">
                                {{-- Pneus --}}
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ asset('assets/img/avatar/pneu.png') }}" width="35" class="rounded-circle" alt="Pneus">
                                    <div style="margin-left: 20px">
                                        <a href="{{ route('property.pneu.index', ['id' => $camion->id]) }}" class="text-decoration-none fw-semibold text-dark">Pneus</a>
                                        <div class="small text-muted">Historique des consommations de pneus</div>
                                    </div>
                                </li>

                                {{-- Réparations --}}
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ asset('assets/img/avatar/reparation.png') }}" width="35" class="rounded-circle" alt="Réparations">
                                    <div style="margin-left: 20px">
                                        <a href="{{ route('property.reparation.index', ['id' => $camion->id]) }}" class="text-decoration-none fw-semibold text-dark">Réparations</a>
                                        <div class="small text-muted">Historique des réparations et maintenances</div>
                                    </div>
                                </li>

                                {{-- Vidanges --}}
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ asset('assets/img/avatar/vidange.png') }}" width="35" class="rounded-circle" alt="Vidanges">
                                    <div style="margin-left: 20px">
                                        <a href="{{ route('property.vidange.index', ['id' => $camion->id]) }}" class="text-decoration-none fw-semibold text-dark">Vidanges</a>
                                        <div class="small text-muted">Historique des vidanges</div>
                                    </div>
                                </li>

                                {{-- Documents --}}
                                <li class="list-group-item d-flex align-items-center gap-3">
                                    <img src="{{ asset('assets/img/avatar/document.png') }}" width="35" class="rounded-circle" alt="Documents">
                                    <div style="margin-left: 20px">
                                        <a href="{{ route('property.document.index', $camion->id) }}" class="text-decoration-none fw-semibold text-dark">Documents</a>
                                        <div class="small text-muted">Carte grise, assurances, vignettes…</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection