@extends('layouts.app')
@section('title', $vehicule ? 'Modifier un véhicule' : 'Nouveau véhicule')
@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:12px;font-weight:700;color:var(--text-muted);white-space:nowrap;}
    .f-input{border:1.5px solid var(--border);border-radius:7px;padding:5px 9px;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);}
    .f-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:14px;padding-right:28px;}
    .frow-1{display:grid;grid-template-columns:220px 1fr;align-items:center;gap:6px 12px;margin-bottom:10px;}
    .frow-2{display:grid;grid-template-columns:220px 1fr 220px 1fr;align-items:center;gap:6px 12px;margin-bottom:10px;}
    .s-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;color:var(--navy);border-bottom:2px solid var(--yellow);padding-bottom:5px;margin-bottom:14px;}
    .data-part{border:2px solid var(--navy);border-radius:10px;padding:16px 18px;background:#F8F9FF;}
    .data-part-title{font-size:12px;font-weight:800;color:var(--navy);margin-bottom:12px;}
    .action-bar{display:flex;align-items:center;gap:10px;border-top:2px solid var(--border);padding-top:14px;}
    .btn-y{background:var(--yellow);color:var(--navy);border:none;border-radius:20px;padding:8px 22px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
    .btn-y:hover{background:var(--yellow-dark);}
    .btn-ghost{background:#fff;color:var(--text-muted);border:1.5px solid var(--border);border-radius:20px;padding:7px 18px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;}
    .btn-ghost:hover{background:#F4F6FB;}
    .btn-danger{background:#fff;color:#E53E3E;border:1.5px solid #E53E3E;border-radius:20px;padding:7px 18px;font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:6px;}
    .btn-danger:hover{background:#FFF5F5;}
    .icon-btn{background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:5px;display:inline-flex;align-items:center;}
    .icon-btn:hover{background:#F4F6FB;}
</style>
@endpush

@section('content')

@php $v = $vehicule; @endphp

<form method="POST" action="{{ $v ? route('vehicules.update', $v->id) : route('vehicules.store') }}" autocomplete="off">
@csrf
@if($v) @method('PUT') @endif

<div class="c-card">
    <h2 style="font-size:16px;font-weight:900;color:var(--navy);margin:0;">
        {{ $v ? ($v->denomination ?? 'Modifier le véhicule') : 'Nouveau véhicule' }}
    </h2>
</div>

<div class="c-card">
    <div class="s-title">Identification</div>

    <div style="display:grid;grid-template-columns:1fr 320px;gap:0 30px;align-items:start;">
        <div>
            <div class="frow-1">
                <label class="f-label">Dénomination</label>
                <input type="text" class="f-input" style="max-width:200px;" name="denomination" value="{{ old('denomination', $v?->denomination) }}" required>
            </div>
            <div class="frow-1">
                <label class="f-label">N° minéralogique</label>
                <input type="text" class="f-input" style="max-width:150px;font-family:monospace;letter-spacing:2px;" name="plaque" value="{{ old('plaque', $v?->plaque) }}">
            </div>
            <div class="frow-1">
                <label class="f-label">N° autorisation stationnement</label>
                <input type="text" class="f-input" style="max-width:150px;" name="no_autorisation" value="{{ old('no_autorisation', $v?->no_autorisation) }}">
            </div>
            <div class="frow-1">
                <label class="f-label">Commune de rattachement</label>
                <input type="text" class="f-input" style="max-width:220px;" name="commune" value="{{ old('commune', $v?->commune) }}">
            </div>
            <div class="frow-1">
                <label class="f-label">N° carte télépéage</label>
                <input type="text" class="f-input" style="max-width:200px;" name="carte_telepeage" value="{{ old('carte_telepeage', $v?->carte_telepeage) }}">
            </div>
            <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
                <label class="f-label" style="min-width:220px;">Conducteur habituel</label>
                <select class="f-input f-select" style="flex:1;max-width:260px;" name="conducteur_id">
                    <option value=""></option>
                    @foreach($conducteurs as $c)
                    <option value="{{ $c->id }}" {{ old('conducteur_id', $v?->conducteur_id) == $c->id ? 'selected' : '' }}>
                        {{ $c->nom }}{{ $c->prenom ? ' '.$c->prenom : '' }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="frow-1">
                <label class="f-label">Date de fin de circulation</label>
                <input type="date" class="f-input" style="width:160px;" name="date_fin_circ" value="{{ old('date_fin_circ', $v?->date_fin_circ?->format('Y-m-d')) }}">
            </div>
            <div class="frow-1">
                <label class="f-label">Agréments</label>
                <select class="f-input f-select" style="max-width:260px;" name="agrement">
                    <option value=""></option>
                    @foreach(['Taxi','VSL','Ambulance','Taxi + VSL'] as $ag)
                    <option {{ old('agrement', $v?->agrement) === $ag ? 'selected' : '' }}>{{ $ag }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        {{-- IdVehicule + print icon --}}
        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:12px;padding-top:4px;">
            <div style="display:flex;align-items:center;gap:8px;">
                <label class="f-label">IdVehicule</label>
                <input type="text" class="f-input" style="width:120px;" name="id_vehicule" value="{{ old('id_vehicule', $v?->id_vehicule) }}">
            </div>
            <button type="button" title="Imprimer" style="background:none;border:none;cursor:pointer;margin-top:20px;" onclick="window.print()">
                <svg viewBox="0 0 24 24" style="width:36px;height:36px;stroke:var(--navy);fill:none;stroke-width:1.5;stroke-linecap:round;">
                    <polyline points="6 9 6 2 18 2 18 9"/>
                    <path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/>
                    <rect x="6" y="14" width="12" height="8"/>
                </svg>
            </button>
        </div>
    </div>
</div>

{{-- Planning --}}
<div class="c-card">
    <div class="s-title">Planning</div>
    <div style="display:flex;align-items:center;gap:10px;">
        <label class="f-label">Code véhicule</label>
        <input type="text" class="f-input" style="width:100px;" name="code_vehicule" value="{{ old('code_vehicule', $v?->code_vehicule) }}" maxlength="6">
    </div>
</div>

{{-- Données particulières --}}
<div class="c-card">
    <div class="data-part">
        <div class="data-part-title">Données Particulières</div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;">
            <div>
                <div class="frow-1" style="grid-template-columns:220px 1fr;margin-bottom:8px;">
                    <label class="f-label">Dernier contrôle technique</label>
                    <input type="date" class="f-input" style="width:150px;" name="dt_ct" value="{{ old('dt_ct', $v?->dt_ct?->format('Y-m-d')) }}">
                </div>
                <div class="frow-1" style="grid-template-columns:220px 1fr;margin-bottom:8px;">
                    <label class="f-label">Prochain contrôle technique</label>
                    <input type="date" class="f-input" style="width:150px;" name="dt_proch_ct" value="{{ old('dt_proch_ct', $v?->dt_proch_ct?->format('Y-m-d')) }}">
                </div>
                <div class="frow-1" style="grid-template-columns:220px 1fr;margin-bottom:8px;">
                    <label class="f-label">Dernier contrôle taximètre</label>
                    <input type="date" class="f-input" style="width:150px;" name="dt_taxi" value="{{ old('dt_taxi', $v?->dt_taxi?->format('Y-m-d')) }}">
                </div>
                <div class="frow-1" style="grid-template-columns:220px 1fr;">
                    <label class="f-label">Prochain contrôle taximètre</label>
                    <input type="date" class="f-input" style="width:150px;" name="dt_proch_taxi" value="{{ old('dt_proch_taxi', $v?->dt_proch_taxi?->format('Y-m-d')) }}">
                </div>
            </div>
            <div>
                <div class="frow-1" style="grid-template-columns:100px 1fr;margin-bottom:8px;">
                    <label class="f-label">Alerte le</label>
                    <input type="date" class="f-input" style="width:150px;" name="alerte_ct" value="{{ old('alerte_ct', $v?->alerte_ct?->format('Y-m-d')) }}">
                </div>
                <div style="height:46px;"></div>
                <div class="frow-1" style="grid-template-columns:100px 1fr;">
                    <label class="f-label">Alerte le</label>
                    <input type="date" class="f-input" style="width:150px;" name="alerte_taxi" value="{{ old('alerte_taxi', $v?->alerte_taxi?->format('Y-m-d')) }}">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="c-card">
    <div class="action-bar">
        <button type="submit" class="btn-y">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;stroke:var(--navy);fill:none;stroke-width:2.5;stroke-linecap:round;"><polyline points="20 6 9 17 4 12"/></svg>
            Valider
        </button>
        @if($v)
        <button type="button" class="btn-danger" onclick="document.getElementById('del-form').submit()">
            <svg viewBox="0 0 24 24" style="width:14px;height:14px;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="M9 6V4h6v2"/></svg>
            Supprimer
        </button>
        @endif
        <a href="{{ route('vehicules.index') }}" class="btn-ghost">Quitter</a>
    </div>
</div>

</form>

@if($v)
<form id="del-form" method="POST" action="{{ route('vehicules.destroy', $v->id) }}" onsubmit="return confirm('Supprimer ce véhicule ?')">
    @csrf @method('DELETE')
</form>
@endif

@endsection