@extends('layouts.app')
@section('title', 'Véhicules')
@section('page-title', 'Fichiers de base — Véhicules')

@push('styles')
<style>
    .c-card{background:#fff;border-radius:12px;border:1px solid var(--border);padding:18px 22px;margin-bottom:14px;}
    .f-label{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;}
    .f-input{border:1.5px solid var(--border);border-radius:7px;padding:6px 10px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:600;color:var(--text);background:#fff;outline:none;transition:border-color 0.2s;}
    .f-input:focus{border-color:var(--yellow);}
    .icon-btn{background:none;border:none;cursor:pointer;padding:3px 6px;border-radius:5px;display:inline-flex;align-items:center;transition:background 0.15s;}
    .icon-btn:hover{background:var(--bg);}
    .btn-navy{background:var(--navy);color:#fff;border:none;border-radius:20px;padding:8px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:7px;}
    .btn-navy:hover{background:var(--navy-light);color:#fff;}
    .list-wrap{border:1.5px solid var(--border);border-radius:8px;overflow:hidden;max-height:420px;overflow-y:auto;}
    .list-wrap::-webkit-scrollbar{width:6px;}
    .list-wrap::-webkit-scrollbar-thumb{background:#CBD0DC;border-radius:3px;}
    .dt{width:100%;border-collapse:collapse;}
    .dt thead th{background:#F4F6FB;padding:9px 12px;font-size:11px;font-weight:800;color:var(--text-muted);text-align:left;border-bottom:1.5px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:1;}
    .dt tbody tr{border-bottom:1px solid var(--border);transition:background 0.12s;cursor:pointer;}
    .dt tbody tr:hover{background:#F0F4FF;}
    .dt tbody td{padding:9px 12px;font-size:13px;font-weight:600;color:var(--text);vertical-align:middle;}
    .badge-ok{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:4px;background:#E6FFFA;color:#276749;}
    .badge-exp{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:4px;background:#FFF5F5;color:#C53030;}
    .alert-success{background:#F0FFF4;border:1px solid #9AE6B4;color:#276749;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:600;margin-bottom:14px;display:flex;align-items:center;gap:8px;}
</style>
@endpush

@section('content')

@if(session('success'))
<div class="alert-success">
    <svg viewBox="0 0 24 24" width="14" height="14" style="stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0;"><polyline points="20 6 9 17 4 12"/></svg>
    {{ session('success') }}
</div>
@endif

<div class="c-card">
    <form method="GET" action="{{ route('vehicules.index') }}">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;">
        <div style="display:flex;align-items:center;gap:8px;">
            <span class="f-label">Recherche</span>
            <input type="text" name="q" class="f-input" style="width:240px;" placeholder="Immatriculation, dénomination…" value="{{ $q }}">
            <button type="submit" class="icon-btn">
                <svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            </button>
        </div>
        <a href="{{ route('vehicules.create') }}" class="btn-navy">
            <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Nouveau véhicule
        </a>
    </div>
    </form>
</div>

<div class="c-card" style="padding:0;overflow:hidden;">
    <div class="list-wrap">
        <table class="dt" id="mainTable">
            <thead>
                <tr>
                    <th>Dénomination</th>
                    <th>N° minéralogique</th>
                    <th>Conducteur habituel</th>
                    <th>Code véhicule</th>
                    <th>Agrément</th>
                    <th>CT</th>
                    <th style="width:90px;text-align:center;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($vehicules as $v)
                <tr onclick="window.location='{{ route('vehicules.edit', $v->id) }}'">
                    <td style="font-weight:800;">{{ $v->denomination }}</td>
                    <td style="font-family:monospace;font-weight:800;letter-spacing:1px;">{{ $v->plaque ?? '—' }}</td>
                    <td>
                        @if($v->conducteur)
                            {{ $v->conducteur->nom }}{{ $v->conducteur->prenom ? ' '.$v->conducteur->prenom : '' }}
                        @else
                            <span style="color:var(--text-muted);">—</span>
                        @endif
                    </td>
                    <td style="font-family:monospace;color:var(--text-muted);">{{ $v->code_vehicule ?? '—' }}</td>
                    <td style="font-size:12px;color:var(--text-muted);">{{ $v->agrement ?? '—' }}</td>
                    <td>
                        @if($v->dt_proch_ct && $v->dt_proch_ct->isFuture())
                            <span class="badge-ok">Valide</span>
                        @elseif($v->dt_proch_ct)
                            <span class="badge-exp">Expiré</span>
                        @else
                            <span style="color:var(--text-muted);">—</span>
                        @endif
                    </td>
                    <td style="text-align:center;" onclick="event.stopPropagation()">
                        <a href="{{ route('vehicules.edit', $v->id) }}" class="icon-btn" title="Modifier">
                            <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:#3182CE;fill:none;stroke-width:2;stroke-linecap:round;"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                        </a>
                        <form method="POST" action="{{ route('vehicules.destroy', $v->id) }}" style="display:inline;" onsubmit="return confirm('Supprimer ce véhicule ?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="icon-btn" title="Supprimer">
                                <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:#E53E3E;fill:none;stroke-width:2;stroke-linecap:round;"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" style="text-align:center;padding:32px;color:var(--text-muted);font-size:13px;">
                        Aucun véhicule enregistré.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection