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

@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);}
    .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;}
    .icon-btn{background:none;border:none;cursor:pointer;padding:3px 6px;border-radius:5px;display:inline-flex;align-items:center;}
    .icon-btn:hover{background:#F4F6FB;}
    .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{display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start;}
    .list-wrap{border:1.5px solid var(--border);border-radius:8px;overflow:hidden;max-height:460px;overflow-y:auto;}
    .list-wrap::-webkit-scrollbar{width:6px;}
    .list-wrap::-webkit-scrollbar-thumb{background:#CBD0DC;border-radius:3px;}
    .dt{width:100%;border-collapse:collapse;}
    .dt thead th{background:#F4F6FB;padding:9px 12px;font-size:11px;font-weight:800;color:var(--text-muted);text-align:left;border-bottom:1.5px solid var(--border);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:9px 12px;font-size:13px;font-weight:600;color:var(--text);}
    @media(max-width:800px){.split{grid-template-columns:1fr;}}
</style>
@endpush

@section('content')
<div class="split">
    {{-- Liste --}}
    <div>
        <div class="c-card" style="padding:12px 16px;margin-bottom:8px;">
            <input type="text" class="f-input" style="width:100%;" placeholder="Recherche motif…" id="searchInput" oninput="filterTable()">
        </div>
        <div class="list-wrap">
            <table class="dt" id="mainTable">
                <thead><tr><th>Motif de course</th><th style="width:80px;text-align:center;">Actions</th></tr></thead>
                <tbody id="tbody">
                    @forelse($motifs as $m)
                    <tr id="row-{{ $m->id }}" onclick="selectItem({{ $m->id }},'{{ addslashes($m->libelle) }}')">
                        <td>{{ $m->libelle }}</td>
                        <td style="text-align:center;">
                            <button class="icon-btn" title="Modifier" onclick="event.stopPropagation();selectItem({{ $m->id }},'{{ addslashes($m->libelle) }}')">
                                <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:#3182CE;fill:none;stroke-width:2;stroke-linecap:round;"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                            </button>
                            <button class="icon-btn" title="Supprimer" onclick="event.stopPropagation();supprimerDirect({{ $m->id }},'{{ addslashes($m->libelle) }}')">
                                <svg viewBox="0 0 24 24" style="width:15px;height:15px;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="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
                            </button>
                        </td>
                    </tr>
                    @empty
                    <tr id="empty-row"><td colspan="2" style="text-align:center;padding:24px;color:var(--text-muted);">Aucun motif enregistré.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Formulaire --}}
    <div class="c-card">
        <div class="s-title" id="formTitle">Gestion des Motifs de course</div>
        <div style="margin-bottom:16px;">
            <label class="f-label" style="display:block;margin-bottom:6px;">Motif de course</label>
            <input type="text" class="f-input" style="width:100%;" id="fMotif" placeholder="Saisir le motif…">
        </div>
        <div style="display:flex;gap:10px;align-items:center;border-top:1.5px solid var(--border);padding-top:14px;flex-wrap:wrap;">
            <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>
            <a href="{{ route('dashboard') }}" class="btn-ghost">Quitter</a>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
const CSRF = '{{ csrf_token() }}';
let currentId = null;

function filterTable() {
    const q = document.getElementById('searchInput').value.toLowerCase();
    document.querySelectorAll('#mainTable tbody tr[id^="row-"]').forEach(r =>
        r.style.display = r.textContent.toLowerCase().includes(q) ? '' : 'none'
    );
}

function selectItem(id, libelle) {
    currentId = id;
    document.querySelectorAll('#mainTable tbody tr').forEach(r => r.classList.remove('selected'));
    document.getElementById('row-' + id)?.classList.add('selected');
    document.getElementById('fMotif').value = libelle;
    document.getElementById('btnSuppr').style.display = 'inline-flex';
    document.getElementById('formTitle').textContent = 'Modifier : ' + libelle;
}

function resetForm() {
    currentId = null;
    document.querySelectorAll('#mainTable tbody tr').forEach(r => r.classList.remove('selected'));
    document.getElementById('fMotif').value = '';
    document.getElementById('btnSuppr').style.display = 'none';
    document.getElementById('formTitle').textContent = 'Gestion des Motifs de course';
    document.getElementById('fMotif').focus();
}

async function valider() {
    const libelle = document.getElementById('fMotif').value.trim();
    if (!libelle) { document.getElementById('fMotif').focus(); return; }

    const url    = currentId ? '/motifs-course/' + currentId : '/motifs-course';
    const method = currentId ? 'PUT' : 'POST';

    const r = await fetch(url, {
        method,
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
        body: JSON.stringify({ libelle }),
    });
    const d = await r.json();
    if (!d.success) return;

    if (currentId) {
        // Mise à jour de la ligne
        const td = document.querySelector('#row-' + currentId + ' td:first-child');
        if (td) td.textContent = d.motif.libelle;
        document.getElementById('formTitle').textContent = 'Modifier : ' + d.motif.libelle;
    } else {
        // Ajout d'une nouvelle ligne
        document.getElementById('empty-row')?.remove();
        const tr = document.createElement('tr');
        tr.id = 'row-' + d.motif.id;
        tr.innerHTML = `
            <td>${d.motif.libelle}</td>
            <td style="text-align:center;">
                <button class="icon-btn" onclick="event.stopPropagation();selectItem(${d.motif.id},'${d.motif.libelle.replace(/'/g,"\\'")}')">
                    <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:#3182CE;fill:none;stroke-width:2;stroke-linecap:round;"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                </button>
                <button class="icon-btn" onclick="event.stopPropagation();supprimerDirect(${d.motif.id},'${d.motif.libelle.replace(/'/g,"\\'")}')">
                    <svg viewBox="0 0 24 24" style="width:15px;height:15px;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="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/></svg>
                </button>
            </td>`;
        tr.setAttribute('onclick', `selectItem(${d.motif.id},'${d.motif.libelle.replace(/'/g,"\\'")}')`);
        document.getElementById('tbody').appendChild(tr);
        selectItem(d.motif.id, d.motif.libelle);
    }
}

async function supprimer() {
    if (!currentId) return;
    const libelle = document.getElementById('fMotif').value;
    if (!confirm('Supprimer "' + libelle + '" ?')) return;
    await supprimerDirect(currentId, libelle);
}

async function supprimerDirect(id, libelle) {
    if (!confirm('Supprimer "' + libelle + '" ?')) return;
    const r = await fetch('/motifs-course/' + id, {
        method: 'DELETE',
        headers: { 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
    });
    const d = await r.json();
    if (!d.success) return;

    document.getElementById('row-' + id)?.remove();
    if (currentId === id) resetForm();

    // Si plus aucune ligne
    if (!document.querySelector('#tbody tr[id^="row-"]')) {
        const tr = document.createElement('tr');
        tr.id = 'empty-row';
        tr.innerHTML = '<td colspan="2" style="text-align:center;padding:24px;color:var(--text-muted);">Aucun motif enregistré.</td>';
        document.getElementById('tbody').appendChild(tr);
    }
}
</script>
@endpush