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

@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: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;}
    .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;}
    .arrow-icon{display:inline-flex;align-items:center;padding:4px;color:var(--navy);}
</style>
@endpush

@section('content')

@php $tr = $trajet; @endphp

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

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

<div class="c-card">
    <div class="s-title">Itinéraire</div>

    {{-- Départ --}}
    <div style="display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;">
        <label class="f-label" style="min-width:60px;">Départ</label>
        <select class="f-input f-select" style="flex:1;min-width:220px;" name="code_depart" onchange="syncNom(this,'nom_depart')">
            <option value="">-- Sélectionner --</option>
            @foreach($destinations as $dest)
            <option value="{{ $dest->code }}"
                    data-nom="{{ $dest->nom ?? $dest->code }}"
                    {{ old('code_depart', $tr?->code_depart) === $dest->code ? 'selected' : '' }}>
                {{ $dest->code }}{{ $dest->nom ? ' — '.$dest->nom : '' }}
            </option>
            @endforeach
        </select>
        <span class="arrow-icon">
            <svg viewBox="0 0 24 24" style="width:20px;height:20px;fill:var(--navy);"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
        </span>
    </div>

    {{-- Arrivée --}}
    <div style="display:flex;align-items:center;gap:8px;margin-bottom:20px;flex-wrap:wrap;">
        <label class="f-label" style="min-width:60px;">Arrivée</label>
        <select class="f-input f-select" style="flex:1;min-width:220px;" name="code_arrivee" onchange="syncNom(this,'nom_arrivee')">
            <option value="">-- Sélectionner --</option>
            @foreach($destinations as $dest)
            <option value="{{ $dest->code }}"
                    data-nom="{{ $dest->nom ?? $dest->code }}"
                    {{ old('code_arrivee', $tr?->code_arrivee) === $dest->code ? 'selected' : '' }}>
                {{ $dest->code }}{{ $dest->nom ? ' — '.$dest->nom : '' }}
            </option>
            @endforeach
        </select>
        <span class="arrow-icon">
            <svg viewBox="0 0 24 24" style="width:20px;height:20px;fill:var(--navy);"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
        </span>
    </div>
</div>

<div class="c-card">
    <div class="s-title">Données du trajet</div>

    <div class="frow-1">
        <label class="f-label">Nombre de Kms</label>
        <div style="display:flex;align-items:center;gap:6px;">
            <input type="number" class="f-input" style="width:100px;" step="0.1" name="kms" value="{{ old('kms', $tr?->kms ?? '') }}" min="0">
            <span class="f-label">km</span>
        </div>
    </div>
    <div class="frow-1">
        <label class="f-label">Durée du trajet</label>
        <div style="display:flex;align-items:center;gap:6px;">
            @php $dureeMin = old('duree', $tr?->duree ?? 0); $hh = intdiv($dureeMin, 60); $mm = $dureeMin % 60; @endphp
            <input type="number" id="duree_hh" style="width:60px;" placeholder="HH" min="0" value="{{ $hh }}" oninput="syncDuree()">
            <span class="f-label">h</span>
            <input type="number" id="duree_mm" style="width:60px;" placeholder="MM" min="0" max="59" value="{{ $mm }}" oninput="syncDuree()">
            <span class="f-label">min</span>
            <input type="hidden" name="duree" id="duree_total" value="{{ $dureeMin }}">
        </div>
    </div>
    <div class="frow-1">
        <label class="f-label">Montant du péage</label>
        <div style="display:flex;align-items:center;gap:6px;">
            <input type="number" class="f-input" style="width:100px;" step="0.01" name="peage" value="{{ old('peage', $tr?->peage ?? '') }}" min="0">
            <span class="f-label">€</span>
        </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($tr)
        <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('gestion-trajets.index') }}" class="btn-ghost">Quitter</a>
    </div>
</div>

</form>

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

@endsection

@push('scripts')
<script>
function syncDuree() {
    const hh = parseInt(document.getElementById('duree_hh').value) || 0;
    const mm = parseInt(document.getElementById('duree_mm').value) || 0;
    document.getElementById('duree_total').value = hh * 60 + mm;
}
</script>
@endpush