@extends('layouts.app')
@section('title', $conducteur ? 'Modifier un conducteur' : 'Nouveau conducteur')
@section('page-title', 'Fichiers de base — Conducteurs')

@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);}
    .frow-1{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:6px 12px;margin-bottom:10px;}
    .frow-2{display:grid;grid-template-columns:180px 1fr 180px 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;}
</style>
@endpush

@section('content')

@php $c = $conducteur; @endphp

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

<div class="c-card">
    <h2 style="font-size:16px;font-weight:900;color:var(--navy);margin:0;">
        {{ $c ? $c->nom.($c->prenom ? ' '.$c->prenom : '') : 'Nouveau conducteur' }}
    </h2>
</div>

<div class="c-card">
    <div class="s-title">Identité & Coordonnées</div>

    <div class="frow-1">
        <label class="f-label">Nom</label>
        <input type="text" class="f-input" name="nom" value="{{ old('nom', $c?->nom) }}" required>
    </div>
    <div class="frow-1">
        <label class="f-label">Prénom</label>
        <input type="text" class="f-input" name="prenom" value="{{ old('prenom', $c?->prenom) }}">
    </div>

    <div class="frow-1" style="margin-bottom:4px;">
        <label class="f-label">Adresse</label>
        <input type="text" class="f-input" name="adresse1" value="{{ old('adresse1', $c?->adresse1) }}">
    </div>
    <div class="frow-1" style="margin-bottom:4px;">
        <label class="f-label"></label>
        <input type="text" class="f-input" name="adresse2" value="{{ old('adresse2', $c?->adresse2) }}">
    </div>
    <div class="frow-1" style="margin-bottom:10px;">
        <label class="f-label"></label>
        <input type="text" class="f-input" name="adresse3" value="{{ old('adresse3', $c?->adresse3) }}">
    </div>

    <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;">
        <label class="f-label">Code Postal</label>
        <input type="text" class="f-input" style="width:80px;" name="cp" value="{{ old('cp', $c?->code_postal) }}">
        <label class="f-label">Ville</label>
        <input type="text" class="f-input" style="width:200px;" name="ville" value="{{ old('ville', $c?->ville) }}">
    </div>

    <div class="frow-1">
        <label class="f-label">Date de naissance</label>
        <input type="date" class="f-input" style="width:160px;" name="ddn" value="{{ old('ddn', $c?->date_naissance?->format('Y-m-d')) }}">
    </div>

    <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;">
        <label class="f-label">No INSEE</label>
        <input type="text" class="f-input" style="width:150px;" name="insee" value="{{ old('insee', $c?->no_insee) }}">
        <span style="color:var(--text-muted);font-weight:700;">/</span>
        <input type="text" class="f-input" style="width:50px;" name="insee_cle" value="{{ old('insee_cle', $c?->no_insee_cle) }}">
    </div>

    <div class="frow-1">
        <label class="f-label">Téléphone</label>
        <input type="tel" class="f-input" style="max-width:200px;" name="telephone" value="{{ old('telephone', $c?->telephone) }}">
    </div>
    <div class="frow-1">
        <label class="f-label">Mail</label>
        <input type="email" class="f-input" name="mail" value="{{ old('mail', $c?->mail) }}">
    </div>
    <div class="frow-1">
        <label class="f-label">Carte professionnelle</label>
        <input type="text" class="f-input" style="max-width:220px;" name="carte_pro" value="{{ old('carte_pro', $c?->carte_pro) }}">
    </div>
    <div class="frow-1">
        <label class="f-label">Date de Sortie</label>
        <input type="date" class="f-input" style="width:160px;" name="date_sortie" value="{{ old('date_sortie', $c?->date_sortie?->format('Y-m-d')) }}">
    </div>
</div>

{{-- Planning --}}
<div class="c-card">
    <div class="s-title">Planning</div>
    <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
        <label class="f-label">Nom</label>
        <input type="text" class="f-input" style="width:160px;" name="planning_nom" value="{{ old('planning_nom', $c?->planning_nom) }}">
        <label class="f-label">Initiale</label>
        <input type="text" class="f-input" style="width:60px;" name="planning_ini" value="{{ old('planning_ini', $c?->planning_ini) }}" maxlength="3">
        <label class="f-label">Tri</label>
        <input type="text" class="f-input" style="width:50px;" name="planning_tri" value="{{ old('planning_tri', $c?->planning_tri) }}" maxlength="2">
    </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 30px;">
            <div>
                <div class="frow-1" style="grid-template-columns:190px 1fr;">
                    <label class="f-label">Date visite médicale</label>
                    <input type="date" class="f-input" style="width:150px;" name="dt_visite" value="{{ old('dt_visite', $c?->dt_visite?->format('Y-m-d')) }}">
                </div>
                <div style="height:10px;"></div>
                <div class="frow-1" style="grid-template-columns:190px 1fr;">
                    <label class="f-label">Date formation</label>
                    <input type="date" class="f-input" style="width:150px;" name="dt_formation" value="{{ old('dt_formation', $c?->dt_formation?->format('Y-m-d')) }}">
                </div>
            </div>
            <div>
                <div class="frow-1" style="grid-template-columns:210px 1fr;margin-bottom:6px;">
                    <label class="f-label">Date prochaine visite médicale</label>
                    <input type="date" class="f-input" style="width:150px;" name="dt_proch_visite" value="{{ old('dt_proch_visite', $c?->dt_proch_visite?->format('Y-m-d')) }}">
                </div>
                <div class="frow-1" style="grid-template-columns:210px 1fr;margin-bottom:6px;">
                    <label class="f-label">Date alerte médicale</label>
                    <input type="date" class="f-input" style="width:150px;" name="dt_alerte_med" value="{{ old('dt_alerte_med', $c?->dt_alerte_med?->format('Y-m-d')) }}">
                </div>
                <div class="frow-1" style="grid-template-columns:210px 1fr;margin-bottom:6px;">
                    <label class="f-label">Date prochaine formation</label>
                    <input type="date" class="f-input" style="width:150px;" name="dt_proch_form" value="{{ old('dt_proch_form', $c?->dt_proch_form?->format('Y-m-d')) }}">
                </div>
                <div class="frow-1" style="grid-template-columns:210px 1fr;">
                    <label class="f-label">Date alerte formation</label>
                    <input type="date" class="f-input" style="width:150px;" name="dt_alerte_form" value="{{ old('dt_alerte_form', $c?->dt_alerte_form?->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($c)
        <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('conducteurs.index') }}" class="btn-ghost">Quitter</a>
    </div>
</div>

</form>

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

@endsection