@extends('layouts.app')

@section('title', 'Codes INSEE')

@section('content')
<style>
    .page-header {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 24px;
    }
    .page-title {
        font-size: 20px; font-weight: 800; color: var(--navy);
        display: flex; align-items: center; gap: 10px;
    }
    .page-title svg { stroke: var(--yellow); fill: none; stroke-width: 2; stroke-linecap: round; }

    .filter-bar {
        background: #fff; border: 1px solid var(--border);
        border-radius: 10px; padding: 16px 20px;
        display: flex; align-items: center; gap: 12px;
        flex-wrap: wrap; margin-bottom: 20px;
    }
    .filter-bar input[type="text"] {
        height: 36px; padding: 0 12px; border: 1px solid var(--border);
        border-radius: 7px; font-size: 13px; font-family: inherit;
        color: var(--text); background: #f8f9fb; transition: border-color .2s;
    }
    .filter-bar input[type="text"]:focus { outline: none; border-color: var(--navy); background: #fff; }
    .filter-bar input[type="text"].wide  { width: 220px; }
    .filter-bar input[type="text"].small { width: 110px; }
    .filter-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
    .btn-search {
        height: 36px; padding: 0 18px; border-radius: 7px;
        border: none; background: var(--navy); color: #fff;
        font-size: 13px; font-weight: 700; cursor: pointer;
        display: flex; align-items: center; gap: 6px; transition: background .2s;
    }
    .btn-search:hover { background: #253160; }
    .btn-search svg { stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; }
    .btn-add {
        height: 36px; padding: 0 18px; border-radius: 7px;
        border: none; background: var(--yellow); color: var(--navy);
        font-size: 13px; font-weight: 800; cursor: pointer;
        display: flex; align-items: center; gap: 6px; transition: background .2s;
        margin-left: auto;
    }
    .btn-add:hover { background: #e0b000; }

    .table-card {
        background: #fff; border: 1px solid var(--border);
        border-radius: 10px; overflow: hidden; margin-bottom: 28px;
    }
    .table-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .table-card thead th {
        background: #f4f6fb; padding: 11px 14px;
        text-align: left; font-size: 11px; font-weight: 800;
        color: var(--text-muted); text-transform: uppercase; letter-spacing: .6px;
        border-bottom: 1px solid var(--border); white-space: nowrap;
    }
    .table-card tbody tr { border-bottom: 1px solid #f0f2f7; transition: background .15s; cursor: pointer; }
    .table-card tbody tr:last-child { border-bottom: none; }
    .table-card tbody tr:hover { background: #f8f9fb; }
    .table-card tbody tr.selected { background: rgba(245,197,24,.08); }
    .table-card td { padding: 10px 14px; color: var(--text); vertical-align: middle; }
    .badge-dept {
        display: inline-block; padding: 2px 8px; border-radius: 20px;
        font-size: 11px; font-weight: 700;
        background: rgba(26,35,64,.08); color: var(--navy);
    }
    .table-footer {
        padding: 10px 16px; font-size: 12px; color: var(--text-muted);
        background: #f8f9fb; border-top: 1px solid var(--border);
    }
    .empty-msg {
        padding: 40px; text-align: center; color: var(--text-muted);
        font-size: 13px; font-weight: 600;
    }

    .form-card {
        background: #fff; border: 1px solid var(--border);
        border-radius: 10px; padding: 24px 28px;
    }
    .form-card-title {
        font-size: 14px; font-weight: 800; color: var(--navy);
        margin-bottom: 20px; padding-bottom: 12px;
        border-bottom: 1px solid var(--border);
        display: flex; align-items: center; gap: 8px;
    }
    .form-card-title svg { stroke: var(--yellow); fill: none; stroke-width: 2; stroke-linecap: round; }

    .form-grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .form-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 16px; }
    .form-group  { display: flex; flex-direction: column; gap: 5px; }
    .form-group label {
        font-size: 12px; font-weight: 700; color: var(--text-muted);
        text-transform: uppercase; letter-spacing: .5px;
    }
    .form-control {
        height: 38px; padding: 0 12px;
        border: 1px solid var(--border); border-radius: 7px;
        font-size: 13px; font-family: inherit; color: var(--text);
        background: #f8f9fb; transition: border-color .2s, background .2s;
    }
    .form-control:focus { outline: none; border-color: var(--navy); background: #fff; }
    .form-control[readonly] { background: #f0f2f7; color: var(--text-muted); cursor: default; }

    .form-actions {
        display: flex; align-items: center; gap: 10px;
        margin-top: 24px; padding-top: 18px;
        border-top: 1px solid var(--border);
    }
    .btn-valider {
        height: 38px; padding: 0 24px; border-radius: 7px;
        border: none; background: var(--yellow); color: var(--navy);
        font-size: 13px; font-weight: 800; cursor: pointer; transition: background .2s;
    }
    .btn-valider:hover { background: #e0b000; }
    .btn-nouveau {
        height: 38px; padding: 0 20px; border-radius: 7px;
        border: 1.5px solid var(--navy); background: transparent; color: var(--navy);
        font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s;
    }
    .btn-nouveau:hover { background: var(--navy); color: #fff; }
    .btn-supprimer {
        height: 38px; padding: 0 20px; border-radius: 7px;
        border: 1.5px solid #e53e3e; background: transparent; color: #e53e3e;
        font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s;
        margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
        font-family: inherit;
    }
    .btn-supprimer:hover { background: #e53e3e; color: #fff; }
    .btn-quitter {
        height: 38px; padding: 0 20px; border-radius: 7px;
        border: 1.5px solid var(--border); background: transparent; color: var(--text-muted);
        font-size: 13px; font-weight: 700; cursor: pointer; transition: all .2s;
    }
    .btn-quitter:hover { border-color: var(--text-muted); color: var(--text); }
    .alert-success {
        background: #f0fff4; border: 1px solid #9ae6b4; border-radius: 7px;
        padding: 10px 16px; font-size: 13px; font-weight: 700; color: #276749;
        margin-bottom: 16px; display: none;
    }
    .alert-error {
        background: #fff5f5; border: 1px solid #fed7d7; border-radius: 7px;
        padding: 10px 16px; font-size: 13px; font-weight: 700; color: #c53030;
        margin-bottom: 16px; display: none;
    }
</style>

<div class="page-header">
    <div class="page-title">
        <svg viewBox="0 0 24 24" width="22" height="22">
            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/>
            <circle cx="12" cy="9" r="2.5"/>
        </svg>
        Codes INSEE
    </div>
</div>

{{-- Barre de recherche --}}
<div class="filter-bar">
    <span class="filter-label">Recherche :</span>
    <input type="text" class="small" id="search-cp"      placeholder="Code postal"  onkeydown="if(event.key==='Enter')filterTable()">
    <input type="text" class="small" id="search-insee"   placeholder="Code INSEE"   onkeydown="if(event.key==='Enter')filterTable()">
    <input type="text" class="wide"  id="search-commune" placeholder="Commune..."   onkeydown="if(event.key==='Enter')filterTable()">
    <input type="text" class="small" id="search-dept"    placeholder="Dép."         onkeydown="if(event.key==='Enter')filterTable()">
    <button class="btn-search" onclick="filterTable()">
        <svg viewBox="0 0 24 24" width="14" height="14"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        Rechercher
    </button>
    <button class="btn-add" onclick="nouveauCode()">+ Nouveau</button>
</div>

{{-- Table --}}
<div class="table-card">
    <table id="insee-table">
        <thead>
            <tr>
                <th>Code INSEE</th>
                <th>Code postal</th>
                <th>Commune</th>
                <th>N° commune</th>
                <th>Dép.</th>
                <th>Région</th>
                <th>Latitude</th>
                <th>Longitude</th>
            </tr>
        </thead>
        <tbody id="insee-tbody">
            <tr><td colspan="8" class="empty-msg">Utilisez la recherche ci-dessus pour afficher les communes.</td></tr>
        </tbody>
    </table>
    <div class="table-footer" id="table-footer">—</div>
</div>

{{-- Formulaire --}}
<div class="form-card" id="form-insee">
    <div class="form-card-title">
        <svg viewBox="0 0 24 24" width="16" height="16"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg>
        <span id="form-title">Nouvelle commune</span>
    </div>

    <div id="alert-success" class="alert-success"></div>
    <div id="alert-error"   class="alert-error"></div>

    <input type="hidden" id="f-id">

    <div class="form-grid">
        <div class="form-group">
            <label>Code INSEE *</label>
            <input type="text" class="form-control" id="f-insee" placeholder="Ex: 47001" maxlength="5">
        </div>
        <div class="form-group">
            <label>Code postal *</label>
            <input type="text" class="form-control" id="f-cp" placeholder="Ex: 47000" maxlength="5">
        </div>
        <div class="form-group">
            <label>Nom de la commune *</label>
            <input type="text" class="form-control" id="f-commune" placeholder="Ex: Agen">
        </div>
        <div class="form-group">
            <label>N° commune</label>
            <input type="text" class="form-control" id="f-num-commune" placeholder="Ex: 001" maxlength="5">
        </div>
        <div class="form-group">
            <label>N° département</label>
            <input type="text" class="form-control" id="f-dept" placeholder="Ex: 47" maxlength="3">
        </div>
        <div class="form-group">
            <label>Région</label>
            <input type="text" class="form-control" id="f-region" placeholder="Ex: Nouvelle-Aquitaine" maxlength="100">
        </div>
        {{-- champs cachés pour les noms réels en BDD --}}
    </div>

    <div class="form-grid-2">
        <div class="form-group">
            <label>Latitude</label>
            <input type="text" class="form-control" id="f-lat" placeholder="Ex: 44.2002">
        </div>
        <div class="form-group">
            <label>Longitude</label>
            <input type="text" class="form-control" id="f-lng" placeholder="Ex: 0.6197">
        </div>
    </div>

    <div class="form-actions">
        <button class="btn-valider"   onclick="validerCode()">Valider</button>
        <button class="btn-nouveau"   onclick="nouveauCode()">Nouveau</button>
<button class="btn-supprimer" id="btn-suppr" style="display:none" onclick="supprimerCode()">Supprimer</button>
    </div>
</div>

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

let currentId = null;

// ── Recherche AJAX ──
async function filterTable() {
    const cp      = document.getElementById('search-cp').value.trim();
    const insee   = document.getElementById('search-insee').value.trim();
    const commune = document.getElementById('search-commune').value.trim();
    const dept    = document.getElementById('search-dept').value.trim();


    if (!cp && !insee && !commune && !dept) {
        showTbody('<tr><td colspan="8" class="empty-msg">Veuillez saisir au moins un critère de recherche.</td></tr>', '—');
        return;
    }

    showTbody('<tr><td colspan="8" class="empty-msg">Recherche en cours...</td></tr>', '...');

    const params = new URLSearchParams({ cp, insee, commune, dept });
    const res    = await fetch(URL_SEARCH + '?' + params.toString());
    const json   = await res.json();

    if (!json.data.length) {
        showTbody('<tr><td colspan="8" class="empty-msg">Aucune commune trouvée.</td></tr>', '0 résultat');
        return;
    }

    window._inseeData = json.data;
    let html = '';
    json.data.forEach((c, i) => {
        html += `<tr onclick="selectRow(this, ${i})">
            <td>${c.code_insee}</td>
            <td>${c.code_postal}</td>
            <td>${c.commune}</td>
            <td>${c.num_commune ?? ''}</td>
            <td><span class="badge-dept">${c.num_departement ?? ''}</span></td>
            <td>${c.region_nom ?? c.code_region ?? ''}</td>
            <td>${c.latitude ?? ''}</td>
            <td>${c.longitude ?? ''}</td>
        </tr>`;
    });

    const suffix = json.total >= 200 ? ' affichées sur 34 964 — affinez la recherche pour voir plus' : '';
    showTbody(html, json.total + ' commune' + (json.total > 1 ? 's' : '') + ' trouvée' + (json.total > 1 ? 's' : '') + suffix);
}

function showTbody(html, footer) {
    document.getElementById('insee-tbody').innerHTML = html;
    document.getElementById('table-footer').textContent = footer;
}

// ── Sélection d'une ligne ──
function selectRow(tr, i) {
    const c = window._inseeData[i];
    document.querySelectorAll('#insee-tbody tr').forEach(r => r.classList.remove('selected'));
    tr.classList.add('selected');
    currentId = c.id;

    document.getElementById('f-id').value          = c.id;
    document.getElementById('f-insee').value        = c.code_insee;
    document.getElementById('f-cp').value           = c.code_postal;
    document.getElementById('f-commune').value      = c.commune;
    document.getElementById('f-num-commune').value  = c.num_commune ?? '';
    document.getElementById('f-dept').value         = c.num_departement ?? '';
    document.getElementById('f-region').value       = c.code_region ?? '';
    document.getElementById('f-lat').value          = c.latitude ?? '';
    document.getElementById('f-lng').value          = c.longitude ?? '';

    document.getElementById('f-insee').readOnly = true;
    document.getElementById('form-title').textContent = 'Modifier – ' + c.commune;
    document.getElementById('btn-suppr').style.display = 'flex';
    hideAlerts();
    document.getElementById('form-insee').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

// ── Nouveau ──
function nouveauCode() {
    currentId = null;
    document.querySelectorAll('#insee-tbody tr').forEach(r => r.classList.remove('selected'));
    ['f-id','f-insee','f-cp','f-commune','f-num-commune','f-dept','f-region','f-lat','f-lng']
        .forEach(id => { const el = document.getElementById(id); if(el) el.value = ''; });
    document.getElementById('f-insee').readOnly = false;
    document.getElementById('form-title').textContent = 'Nouvelle commune';
    document.getElementById('btn-suppr').style.display = 'none';
    hideAlerts();
    document.getElementById('f-insee').focus();
}

// ── Valider (create ou update) ──
async function validerCode() {
    hideAlerts();
    const insee   = document.getElementById('f-insee').value.trim();
    const cp      = document.getElementById('f-cp').value.trim();
    const commune = document.getElementById('f-commune').value.trim();
    if (!insee || !cp || !commune) {
        showError('Veuillez renseigner au minimum : Code INSEE, Code postal et Commune.');
        return;
    }

    const body = {
        code_insee:      insee,
        code_postal:     cp,
        commune,
        num_commune:     document.getElementById('f-num-commune').value.trim(),
        num_departement: document.getElementById('f-dept').value.trim(),
        code_region:     document.getElementById('f-region').value.trim(),
        latitude:        document.getElementById('f-lat').value.trim(),
        longitude:       document.getElementById('f-lng').value.trim(),
        _token:          CSRF,
    };

    let url, method;
    if (currentId) {
        url    = URL_BASE + currentId;
        method = 'PUT';
    } else {
        url    = URL_STORE;
        method = '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) {
        showSuccess(currentId ? 'Commune mise à jour avec succès.' : 'Commune ajoutée avec succès.');
        if (!currentId) nouveauCode();
        filterTable();
    } else {
        showError(json.message || 'Une erreur est survenue.');
    }
}

// ── Supprimer ──
async function supprimerCode() {
    if (!currentId || !confirm('Supprimer cette commune ?')) return;
    const res  = await fetch(URL_BASE + currentId, { method: 'DELETE', headers: { 'X-CSRF-TOKEN': CSRF } });
    const json = await res.json();
    if (json.success) {
        showSuccess('Commune supprimée.');
        filterTable();
        nouveauCode();
    } else {
        showError('Erreur lors de la suppression.');
    }
}

function showSuccess(msg) { const e=document.getElementById('alert-success'); e.textContent=msg; e.style.display='block'; }
function showError(msg)   { const e=document.getElementById('alert-error');   e.textContent=msg; e.style.display='block'; }
function hideAlerts()     { document.getElementById('alert-success').style.display='none'; document.getElementById('alert-error').style.display='none'; }

</script>
@endpush
@endsection