@extends('layouts.app')

@section('title', 'Tarifs')
@section('page-title', 'Fichiers de base — Tarifs')

@push('styles')
<style>
    .t-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--border);
        padding: 24px 28px;
        margin-bottom: 20px;
    }
    .t-label {
        font-size: 13px; font-weight: 700;
        color: var(--text); white-space: nowrap;
    }
    .t-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;
    }
    .t-input:focus { border-color: var(--yellow); }
    .t-select {
        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; cursor: pointer;
        transition: border-color 0.2s;
    }
    .t-select:focus { border-color: var(--yellow); }

    .form-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }
    .form-table td { padding: 0 10px 0 0; vertical-align: middle; }
    .form-table td:first-child { white-space: nowrap; }

    .bloc-title {
        background: linear-gradient(135deg, var(--navy), var(--navy-light));
        color: #fff; text-align: center;
        font-size: 17px; font-weight: 800;
        padding: 12px 24px; border-radius: 10px;
        margin-bottom: 20px; letter-spacing: 0.02em;
    }
    .section-title {
        font-size: 12px; font-weight: 800; text-transform: uppercase;
        letter-spacing: 0.07em; color: var(--navy);
        padding-bottom: 5px; border-bottom: 2px solid var(--yellow);
        display: block; margin-bottom: 12px;
    }
    .pct-input {
        border: 1.5px solid #C3CFEE;
        border-radius: 7px;
        padding: 6px 10px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px; font-weight: 700;
        color: var(--navy); background: #EEF2FF;
        outline: none; width: 80px; text-align: right;
        transition: border-color 0.2s;
    }
    .pct-input:focus { border-color: var(--yellow); background: #fff; }

    .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; transition: background 0.2s; white-space: nowrap;
    }
    .btn-y:hover { background: var(--yellow-dark); }
    .btn-o {
        background: transparent; color: var(--navy);
        border: 2px solid var(--navy); border-radius: 20px; padding: 6px 22px;
        font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800;
        cursor: pointer; transition: all 0.2s; text-decoration: none; display: inline-block;
    }
    .btn-o:hover { background: var(--navy); color: #fff; }
    .btn-danger {
        background: transparent; color: #E53E3E;
        border: 2px solid #E53E3E; border-radius: 20px; padding: 6px 18px;
        font-family: 'Nunito', sans-serif; font-size: 13px; font-weight: 800;
        cursor: pointer; transition: all 0.2s;
    }
    .btn-danger:hover { background: #E53E3E; color: #fff; }

    /* Modale */
    .modal-overlay {
        display: none; position: fixed; inset: 0;
        background: rgba(0,0,0,0.45); z-index: 500;
        align-items: center; justify-content: center;
    }
    .modal-overlay.open { display: flex; }
    .modal-box {
        background: #fff; border-radius: 12px;
        box-shadow: 0 20px 60px rgba(0,0,0,0.25);
        width: 100%; max-width: 560px; overflow: hidden;
        animation: fadeUp 0.2s ease;
    }
    @keyframes fadeUp {
        from { opacity:0; transform:translateY(16px); }
        to   { opacity:1; transform:translateY(0); }
    }
    .modal-header {
        background: linear-gradient(135deg, var(--navy), var(--navy-light));
        color: #fff; padding: 14px 20px;
        font-size: 15px; font-weight: 800;
        display: flex; align-items: center; justify-content: space-between;
    }
    .modal-close { background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.7); font-size:20px; line-height:1; }
    .modal-close:hover { color:#fff; }
    .modal-body { padding: 20px; max-height:70vh; overflow-y:auto; }
    .forfait-table { width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
    .forfait-table thead th { background:#EEF2FF; padding:9px 14px; font-size:12px; font-weight:800; color:var(--navy); border-bottom:1px solid var(--border); }
    .forfait-table thead th:last-child { text-align:right; }
    .forfait-table tbody td { padding:0; border-bottom:1px solid var(--border); }
    .forfait-table tbody tr:last-child td { border-bottom:none; }
    .forfait-table tbody tr:nth-child(odd) td { background:#EEF2FF; }
    .forfait-table tbody tr:nth-child(even) td { background:#FEFEF8; }
    .forfait-table tbody tr:hover td { background:#D4E4F7; }
    .forfait-input { width:100%; border:none; background:transparent; padding:8px 14px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:600; color:var(--text); outline:none; }
    .forfait-input:focus { background:#FFF9E6; }
    .forfait-input.right { text-align:right; }
    .modal-footer { padding:14px 20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }

    .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; }
    .badge-nouveau { background:var(--navy); color:#fff; font-size:11px; font-weight:800; padding:2px 10px; border-radius:12px; margin-left:8px; vertical-align:middle; }
</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

@php
    $isNew = !$tarif;
    $t     = $tarif;
    // Prépare 8 lignes de forfaits (existants + lignes vides)
    $fors  = $t ? $t->forfaits->sortBy('ordre')->values() : collect();
    $nbFor = max($fors->count(), 1);
@endphp

{{-- ── Formulaire unique qui englobe TOUT y compris les forfaits ── --}}
<form method="POST"
      action="{{ $t ? route('tarifs.update', $t->id) : route('tarifs.store') }}"
      id="tarif-form" autocomplete="off">
@csrf
@if($t) @method('PUT') @endif

{{-- Barre de recherche / sélecteur --}}
<div class="t-card" style="padding:16px 24px;">
    <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between;">
        <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
            <span class="t-label">Tarif</span>
            <select class="t-select" style="min-width:260px;" onchange="if(this.value) window.location='{{ route('tarifs.index') }}?id='+this.value">
                <option value="">— Nouveau tarif —</option>
                @foreach($tarifs as $tl)
                <option value="{{ $tl->id }}" {{ ($t && $t->id == $tl->id) ? 'selected' : '' }}>
                    {{ $tl->reference }}
                </option>
                @endforeach
            </select>
            @if(!$isNew)
                <span style="font-size:12px;color:var(--text-muted);font-weight:600;">
                    {{ $tarifs->count() }} tarif(s)
                </span>
            @else
                <span class="badge-nouveau">Nouveau</span>
            @endif
        </div>
        <div style="display:flex; gap:10px;">
            <a href="{{ route('tarifs.index') }}" class="btn-o" title="Créer un nouveau tarif">+ Nouveau</a>
            @if($t)
            <button type="button" class="btn-danger" onclick="document.getElementById('del-form').submit()">Supprimer</button>
            @endif
        </div>
    </div>
</div>

{{-- Bloc principal --}}
<div class="t-card">
    <div class="bloc-title">Gestion des Tarifs</div>

    {{-- Ligne 1 : Date / Référence / Km seul / DROM --}}
    <div style="display:grid; grid-template-columns:auto auto 1fr auto auto auto auto auto auto; align-items:center; gap:8px 12px; margin-bottom:20px; flex-wrap:wrap;">
        <span class="t-label">Date de validité</span>
        <input type="date" name="date_validite" class="t-input" style="width:145px;"
               value="{{ $t?->date_validite?->format('Y-m-d') }}">

        <div></div>{{-- spacer --}}

        <span class="t-label">Référence</span>
        <input type="text" name="reference" class="t-input" style="width:220px;"
               value="{{ $t?->reference }}" required placeholder="Nom du tarif">

        <span class="t-label" style="margin-left:12px;">Km seul</span>
        <input type="number" name="km_seul" class="t-input" style="width:55px;"
               value="{{ $t?->km_seul ?? '' }}" min="0">

        <span class="t-label">DROM</span>
        <input type="text" name="drom" class="t-input" style="width:75px;"
               value="{{ $t ? number_format($t->drom, 2, ',', '') : '' }}" placeholder="0,00">
    </div>
    <div style="display:flex; align-items:center; gap:12px; margin-bottom:24px;">
        <span class="t-label">TPMR</span>
        <input type="text" name="tpmr" class="t-input" style="width:90px;"
               value="{{ $t ? number_format($t->tpmr, 2, ',', '') : '' }}" placeholder="0,00">
    </div>

    {{-- Ligne 2 : Gestion Forfaits + Code caisse --}}
    <div style="display:flex; align-items:center; gap:20px; margin-bottom:24px; padding:14px 16px; background:#F4F6FB; border-radius:8px; border:1px solid var(--border);">
        <button type="button" class="btn-y" onclick="openForfaits()">Gestion Forfaits
            @if($t && $t->forfaits->count())
                <span style="background:#fff;color:var(--navy);border-radius:10px;padding:1px 7px;font-size:11px;margin-left:6px;">{{ $t->forfaits->count() }}</span>
            @endif
        </button>
        <span class="t-label">Code caisse</span>
        <input type="text" name="code_caisse" class="t-input" style="width:70px;"
               value="{{ $t?->code_caisse }}">
    </div>

    {{-- Grille 2 colonnes --}}
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:0 48px;">

        {{-- Colonne gauche --}}
        <div>
            <span class="section-title">Tarification de base</span>
            <table class="form-table">
                <tr>
                    <td><span class="t-label">Prise en charge</span></td>
                    <td><input type="text" name="prise_en_charge" class="t-input" style="width:80px;"
                               value="{{ $t ? number_format($t->prise_en_charge, 2, ',', '') : '' }}" placeholder="0,00"></td>
                </tr>
                <tr>
                    <td><span class="t-label">Prix du kilomètre</span></td>
                    <td><input type="text" name="prix_km" class="t-input" style="width:80px;"
                               value="{{ $t && $t->prix_km !== null ? number_format($t->prix_km, 3, ',', '') : '' }}" placeholder="0,000"></td>
                </tr>
                <tr>
                    <td><span class="t-label">Forfait grande ville</span></td>
                    <td><input type="text" name="forfait_grande_ville" class="t-input" style="width:80px;"
                               value="{{ $t ? number_format($t->forfait_grande_ville, 2, ',', '') : '' }}" placeholder="0,00"></td>
                </tr>
            </table>

            <span class="section-title" style="margin-top:20px;">Majoration Kms (hospi)</span>
            <table class="form-table">
                <tr>
                    <td><span class="t-label">Distance ≤ 50 Kms</span></td>
                    <td><input type="text" name="maj_km_inf50" class="pct-input"
                               value="{{ $t ? number_format($t->maj_km_inf50, 2, ',', '') : '' }}" placeholder="0,00"></td>
                </tr>
                <tr>
                    <td><span class="t-label">Distance > 50 Kms</span></td>
                    <td><input type="text" name="maj_km_sup50" class="pct-input"
                               value="{{ $t ? number_format($t->maj_km_sup50, 2, ',', '') : '' }}" placeholder="0,00"></td>
                </tr>
            </table>
        </div>

        {{-- Colonne droite --}}
        <div>
            <span class="section-title">Heures de nuit</span>
            <table class="form-table">
                <tr>
                    <td><span class="t-label">De</span></td>
                    <td style="display:flex; align-items:center; gap:8px;">
                        <input type="time" name="heure_nuit_debut" class="t-input" style="width:100px;"
                               value="{{ $t?->heure_nuit_debut ?? '20:00' }}">
                        <span class="t-label">à</span>
                        <input type="time" name="heure_nuit_fin" class="t-input" style="width:100px;"
                               value="{{ $t?->heure_nuit_fin ?? '08:00' }}">
                    </td>
                </tr>
                <tr>
                    <td><span class="t-label">Majo dim/fériés/nuit</span></td>
                    <td><input type="text" name="maj_nuit_dimanche" class="pct-input"
                               value="{{ $t ? number_format($t->maj_nuit_dimanche, 2, ',', '') : '' }}" placeholder="0,00"></td>
                </tr>
                <tr>
                    <td><span class="t-label">Kilomètres inclus</span></td>
                    <td><input type="number" name="km_inclus" class="t-input" style="width:55px;"
                               value="{{ $t?->km_inclus ?? '' }}" min="0"></td>
                </tr>
            </table>
        </div>
    </div>

    {{-- Majoration personnes --}}
    <div style="margin-top:24px; padding:16px 20px; background:#F4F6FB; border-radius:8px; border:1px solid var(--border);">
        <span class="section-title" style="margin-bottom:14px;">Majoration personnes supplémentaires</span>
        <div style="display:grid; grid-template-columns:repeat(3,1fr); gap:12px 24px;">
            <div style="display:flex; align-items:center; gap:10px;">
                <span class="t-label">2 personnes</span>
                <input type="text" name="maj_2_personnes" class="pct-input"
                       value="{{ $t ? number_format($t->maj_2_personnes, 2, ',', '') : '' }}" placeholder="0,00">
            </div>
            <div style="display:flex; align-items:center; gap:10px;">
                <span class="t-label">+ de 2 personnes</span>
                <input type="text" name="maj_sup2_personnes" class="pct-input"
                       value="{{ $t ? number_format($t->maj_sup2_personnes, 2, ',', '') : '' }}" placeholder="0,00">
            </div>
            <div style="display:flex; align-items:center; gap:10px;">
                <span class="t-label">+ de 3 personnes</span>
                <input type="text" name="maj_sup3_personnes" class="pct-input"
                       value="{{ $t ? number_format($t->maj_sup3_personnes, 2, ',', '') : '' }}" placeholder="0,00">
            </div>
        </div>
    </div>
</div>

{{-- Actions --}}
<div style="display:flex; justify-content:center; gap:20px; margin-top:4px; margin-bottom:20px;">
    <button type="submit" class="btn-y">Valider</button>
    <a href="{{ route('dashboard') }}" class="btn-o">Quitter</a>
</div>

{{-- ══════════════════════════════════════════════════════════════
     MODALE FORFAITS — inputs dans le form principal pour soumission
     ══════════════════════════════════════════════════════════════ --}}
<div class="modal-overlay" id="modalForfaits">
    <div class="modal-box">
        <div class="modal-header">
            <span>Gestion des Forfaits</span>
            <button type="button" class="modal-close" onclick="closeForfaits()">✕</button>
        </div>
        <div class="modal-body">
            <table class="forfait-table">
                <thead>
                    <tr>
                        <th>Libellé</th>
                        <th style="width:80px;">Code</th>
                        <th style="text-align:right; width:110px;">Montant (€)</th>
                    </tr>
                </thead>
                <tbody id="forfait-body">
                    @for($i = 0; $i < $nbFor; $i++)
                    @php $f = $fors->get($i); @endphp
                    <tr>
                        <td><input type="text"   name="forfait_libelle[{{ $i }}]"
                                   class="forfait-input"
                                   value="{{ $f?->libelle }}" placeholder=""></td>
                        <td><input type="text"   name="forfait_code[{{ $i }}]"
                                   class="forfait-input"
                                   value="{{ $f?->code }}" placeholder=""></td>
                        <td><input type="text"   name="forfait_montant[{{ $i }}]"
                                   class="forfait-input right"
                                   value="{{ $f ? number_format($f->montant, 2, ',', '') : '' }}"
                                   placeholder="0,00"></td>
                    </tr>
                    @endfor
                </tbody>
            </table>
        </div>
        <div class="modal-footer">
            <div style="display:flex; align-items:center; gap:8px;">
                <button type="button" class="btn-o" onclick="addForfaitRow()">+ Ligne</button>
                <span style="font-size:12px; color:var(--text-muted); font-weight:600;">
                    Les forfaits sont sauvegardés avec le bouton Valider du tarif
                </span>
            </div>
            <button type="button" class="btn-y" onclick="closeForfaits()">Fermer</button>
        </div>
    </div>
</div>

</form>

{{-- Formulaire de suppression séparé --}}
@if($t)
<form id="del-form" method="POST" action="{{ route('tarifs.destroy', $t->id) }}"
      onsubmit="return confirm('Supprimer le tarif « {{ $t->reference }} » et tous ses forfaits ?')">
    @csrf @method('DELETE')
</form>
@endif

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    // Le modal RESTE dans le form pour que les inputs soient soumis
    document.getElementById('modalForfaits').addEventListener('click', function (e) {
        if (e.target === this) closeForfaits();
    });
});

function openForfaits() {
    document.getElementById('modalForfaits').classList.add('open');
    document.body.style.overflow = 'hidden';
}
function closeForfaits() {
    document.getElementById('modalForfaits').classList.remove('open');
    document.body.style.overflow = '';
}

let forfaitRow = {{ $nbFor }};
function addForfaitRow() {
    const i = forfaitRow++;
    const tr = document.createElement('tr');
    tr.innerHTML = `
        <td><input type="text" name="forfait_libelle[${i}]" class="forfait-input" value="" placeholder=""></td>
        <td><input type="text" name="forfait_code[${i}]"    class="forfait-input" value="" placeholder=""></td>
        <td><input type="text" name="forfait_montant[${i}]" class="forfait-input right" value="" placeholder="0,00"></td>
    `;
    document.getElementById('forfait-body').appendChild(tr);
}
</script>
@endpush