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

@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;}
    .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;flex-wrap:wrap;}
    .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;}

    /* split layout */
    .dest-layout{display:grid;grid-template-columns:1fr 400px;gap:16px;align-items:start;}
    .dest-list-wrap{border:1.5px solid var(--border);border-radius:8px;overflow:hidden;max-height:520px;overflow-y:auto;}
    .dest-list-wrap::-webkit-scrollbar{width:6px;}
    .dest-list-wrap::-webkit-scrollbar-thumb{background:#CBD0DC;border-radius:3px;}
    .dt{width:100%;border-collapse:collapse;}
    .dt thead th{background:#F4F6FB;padding:8px 10px;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 tr.selected{background:#DBEAFE;}
    .dt tbody td{padding:7px 10px;font-size:13px;font-weight:600;color:var(--text);vertical-align:middle;}
    .dt tbody tr:nth-child(even){background:#FAFBFF;}
    .dt tbody tr:nth-child(even):hover{background:#F0F4FF;}
    .dt tbody tr.selected:nth-child(even){background:#DBEAFE;}

    /* commune autocomplete */
    .commune-wrap{position:relative;flex:1;}
    .commune-dropdown{position:absolute;top:100%;left:0;right:0;background:#fff;border:1.5px solid var(--yellow);border-radius:7px;box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:100;max-height:200px;overflow-y:auto;display:none;}
    .commune-dropdown::-webkit-scrollbar{width:5px;}
    .commune-dropdown::-webkit-scrollbar-thumb{background:#CBD0DC;border-radius:3px;}
    .commune-item{padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--border);}
    .commune-item:last-child{border-bottom:none;}
    .commune-item:hover{background:#F0F4FF;}
    .commune-item small{font-size:11px;color:var(--text-muted);font-weight:600;margin-left:6px;}

    .alert-ok{background:#F0FFF4;border:1px solid #9AE6B4;color:#276749;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:600;margin-bottom:12px;display:none;}
    .alert-err{background:#FFF5F5;border:1px solid #FED7D7;color:#C53030;padding:9px 14px;border-radius:8px;font-size:13px;font-weight:600;margin-bottom:12px;display:none;}

    .frow-form{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
    .frow-form .f-label{min-width:130px;}

    @media(max-width:960px){.dest-layout{grid-template-columns:1fr;}}
</style>
@endpush

@section('content')

<div class="dest-layout">

    {{-- ── Colonne gauche : liste ── --}}
    <div>
        <div class="c-card" style="padding:10px 14px;margin-bottom:8px;">
            <input type="text" class="f-input" style="width:100%;" placeholder="Recherche…" id="searchInput" oninput="filterDest()">
        </div>
        <div class="dest-list-wrap">
            <table class="dt" id="destTable">
                <thead>
                    <tr><th>Code</th><th>Nom</th><th>Code postal</th><th>Code INSEE</th></tr>
                </thead>
                <tbody id="destTbody">
                    @forelse($destinations as $d)
                    <tr onclick="selectDest({{ $d->id }}, '{{ addslashes($d->code) }}', '{{ addslashes($d->nom ?? '') }}', '{{ $d->code_postal ?? '' }}', '{{ addslashes($d->commune ?? '') }}', '{{ $d->code_insee ?? '' }}')">
                        <td style="font-weight:800;font-family:monospace;">{{ $d->code }}</td>
                        <td>{{ $d->nom }}</td>
                        <td>{{ $d->code_postal }}</td>
                        <td>{{ $d->code_insee }}</td>
                    </tr>
                    @empty
                    <tr id="empty-row">
                        <td colspan="4" style="text-align:center;padding:28px;color:var(--text-muted);font-size:13px;">
                            Aucune destination. Cliquez sur "Nouveau" pour en ajouter.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div style="margin-top:6px;font-size:12px;color:var(--text-muted);">
            {{ $destinations->count() }} destination{{ $destinations->count() > 1 ? 's' : '' }}
        </div>
    </div>

    {{-- ── Colonne droite : formulaire ── --}}
    <div>
        <div class="c-card">
            <div class="s-title" id="formTitle">Nouvelle destination</div>

            <div id="alert-ok"  class="alert-ok"></div>
            <div id="alert-err" class="alert-err"></div>

            <input type="hidden" id="fId">

            <div class="frow-form">
                <label class="f-label">Code destination</label>
                <input type="text" class="f-input" style="width:90px;text-transform:uppercase;" id="fCode" placeholder="Ex : AGEN" maxlength="20">
            </div>
            <div class="frow-form">
                <label class="f-label">Nom destination</label>
                <input type="text" class="f-input" style="flex:1;" id="fNom" placeholder="Facultatif">
            </div>

            <div class="frow-form">
                <label class="f-label">Commune</label>
                <div class="commune-wrap">
                    <input type="text" class="f-input" style="width:100%;" id="fCommune" placeholder="Tapez le nom pour chercher…" oninput="onCommuneInput()" autocomplete="off">
                    <div class="commune-dropdown" id="communeDropdown"></div>
                </div>
            </div>
            <div class="frow-form">
                <label class="f-label">Code Postal</label>
                <input type="text" class="f-input" style="width:90px;" id="fCp" placeholder="47000" maxlength="10" oninput="onCpChange()">
            </div>
            <div class="frow-form">
                <label class="f-label">Code INSEE</label>
                <input type="text" class="f-input" style="width:100px;" id="fInsee" placeholder="Auto" readonly style="background:#F4F6FB;color:var(--text-muted);">
            </div>

            <div class="action-bar">
                <button type="button" class="btn-y" onclick="valider()">
                    <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>
                <button type="button" class="btn-danger" id="btnSuppr" style="display:none;" onclick="supprimer()">
                    <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>
                <button type="button" class="btn-ghost" onclick="resetForm()">Nouveau</button>
            </div>
        </div>
    </div>

</div>

@endsection

@push('scripts')
<script>
const CSRF       = '{{ csrf_token() }}';
const URL_SEARCH = '{{ route("destinations.communes-search") }}';
const URL_STORE  = '{{ route("destinations.store") }}';
const URL_BASE   = '/destinations/';

let currentId    = null;
let searchTimer  = null;

// ── Filtre liste gauche ────────────────────────────────────────────────────
function filterDest() {
    const q = document.getElementById('searchInput').value.toLowerCase();
    document.querySelectorAll('#destTbody tr').forEach(r => {
        r.style.display = r.textContent.toLowerCase().includes(q) ? '' : 'none';
    });
}

// ── Sélection d'une ligne ──────────────────────────────────────────────────
function selectDest(id, code, nom, cp, commune, insee) {
    currentId = id;
    document.querySelectorAll('#destTbody tr').forEach(r => r.classList.remove('selected'));
    document.querySelector(`#destTbody tr[onclick*="selectDest(${id},"]`)?.classList.add('selected');

    document.getElementById('fId').value      = id;
    document.getElementById('fCode').value    = code;
    document.getElementById('fNom').value     = nom;
    document.getElementById('fCp').value      = cp;
    document.getElementById('fCommune').value = commune;
    document.getElementById('fInsee').value   = insee;

    document.getElementById('btnSuppr').style.display = 'inline-flex';
    document.getElementById('formTitle').textContent  = 'Modifier : ' + code + (nom ? ' — ' + nom : '');
    hideAlerts();
}

// ── Reset formulaire ───────────────────────────────────────────────────────
function resetForm() {
    currentId = null;
    ['fId','fCode','fNom','fCp','fCommune','fInsee'].forEach(id => {
        const el = document.getElementById(id); if (el) el.value = '';
    });
    document.getElementById('btnSuppr').style.display = 'none';
    document.getElementById('formTitle').textContent  = 'Nouvelle destination';
    document.querySelectorAll('#destTbody tr').forEach(r => r.classList.remove('selected'));
    closeDropdown();
    hideAlerts();
    document.getElementById('fCode').focus();
}

// ── Autocomplétion commune (quand on tape dans le champ commune) ───────────
function onCommuneInput() {
    clearTimeout(searchTimer);
    const commune = document.getElementById('fCommune').value.trim();
    const cp      = document.getElementById('fCp').value.trim();
    document.getElementById('fInsee').value = '';
    if (commune.length < 2) { closeDropdown(); return; }
    searchTimer = setTimeout(() => fetchCommunes({ commune, cp }), 300);
}

// ── Quand le CP change → chercher les communes correspondantes ─────────────
function onCpChange() {
    clearTimeout(searchTimer);
    const cp = document.getElementById('fCp').value.trim();
    document.getElementById('fInsee').value = '';
    if (cp.length < 2) { closeDropdown(); return; }
    searchTimer = setTimeout(() => fetchCommunes({ cp }), 400);
}

async function fetchCommunes(params) {
    const res    = await fetch(URL_SEARCH + '?' + new URLSearchParams(params));
    const data   = await res.json();
    if (!data.length) { closeDropdown(); return; }
    showDropdown(data);
}

function showDropdown(items) {
    const dd = document.getElementById('communeDropdown');
    dd.innerHTML = items.map(c =>
        `<div class="commune-item" onclick="pickCommune('${c.commune.replace(/'/g,"\\'")}','${c.code_postal}','${c.code_insee}')">
            ${c.commune}<small>${c.code_postal}</small>
         </div>`
    ).join('');
    dd.style.display = 'block';
}

function pickCommune(commune, cp, insee) {
    document.getElementById('fCommune').value = commune;
    document.getElementById('fCp').value      = cp;
    document.getElementById('fInsee').value   = insee;
    closeDropdown();
}

function closeDropdown() {
    document.getElementById('communeDropdown').style.display = 'none';
}

document.addEventListener('click', e => {
    if (!e.target.closest('.commune-wrap')) closeDropdown();
});

// ── Valider (create / update) ──────────────────────────────────────────────
async function valider() {
    hideAlerts();
    const code = document.getElementById('fCode').value.trim().toUpperCase();
    if (!code) { showErr('Le code destination est obligatoire.'); return; }

    const body = {
        code,
        nom:         document.getElementById('fNom').value.trim(),
        code_postal: document.getElementById('fCp').value.trim(),
        commune:     document.getElementById('fCommune').value.trim(),
        code_insee:  document.getElementById('fInsee').value.trim(),
    };

    const url    = currentId ? URL_BASE + currentId : URL_STORE;
    const method = currentId ? 'PUT' : 'POST';

    const res  = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF },
        body: JSON.stringify(body),
    });
    const json = await res.json();

    if (json.success) {
        showOk(currentId ? 'Destination mise à jour.' : 'Destination ajoutée.');
        refreshRow(json.data);
        if (!currentId) { currentId = json.data.id; }
        document.getElementById('formTitle').textContent = 'Modifier : ' + json.data.code + (json.data.nom ? ' — ' + json.data.nom : '');
        document.getElementById('btnSuppr').style.display = 'inline-flex';
    } else {
        showErr(json.message || 'Une erreur est survenue.');
    }
}

// ── Met à jour ou insère une ligne dans le tableau ─────────────────────────
function refreshRow(d) {
    document.getElementById('empty-row')?.remove();
    let tr = document.querySelector(`#destTbody tr[data-id="${d.id}"]`);
    if (!tr) {
        tr = document.createElement('tr');
        tr.setAttribute('data-id', d.id);
        document.getElementById('destTbody').prepend(tr);
    }
    tr.setAttribute('onclick', `selectDest(${d.id},'${esc(d.code)}','${esc(d.nom??'')}','${d.code_postal??''}','${esc(d.commune??'')}','${d.code_insee??''}')`);
    tr.classList.add('selected');
    tr.innerHTML = `
        <td style="font-weight:800;font-family:monospace;">${d.code}</td>
        <td>${d.nom ?? ''}</td>
        <td>${d.code_postal ?? ''}</td>
        <td>${d.code_insee ?? ''}</td>`;
    document.querySelectorAll('#destTbody tr').forEach(r => r.classList.remove('selected'));
    tr.classList.add('selected');
}

// ── Supprimer ──────────────────────────────────────────────────────────────
async function supprimer() {
    if (!currentId || !confirm('Supprimer cette destination ?')) return;
    const res  = await fetch(URL_BASE + currentId, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': CSRF } });
    const json = await res.json();
    if (json.success) {
        document.querySelector(`#destTbody tr[data-id="${currentId}"]`)?.remove();
        resetForm();
        showOk('Destination supprimée.');
        if (!document.querySelector('#destTbody tr:not(#empty-row)')) {
            const tr = document.createElement('tr');
            tr.id = 'empty-row';
            tr.innerHTML = `<td colspan="4" style="text-align:center;padding:28px;color:var(--text-muted);font-size:13px;">Aucune destination.</td>`;
            document.getElementById('destTbody').appendChild(tr);
        }
    } else { showErr('Erreur lors de la suppression.'); }
}

function showOk(m)  { const e=document.getElementById('alert-ok');  e.textContent=m; e.style.display='block'; setTimeout(()=>e.style.display='none',4000); }
function showErr(m) { const e=document.getElementById('alert-err'); e.textContent=m; e.style.display='block'; }
function hideAlerts(){ document.getElementById('alert-ok').style.display='none'; document.getElementById('alert-err').style.display='none'; }
function esc(s)     { return String(s).replace(/'/g,"\\'"); }
</script>
@endpush