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

@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;}
    .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;}
    .btn-green{background:#38A169;color:#fff;border:none;border-radius:8px;width:32px;height:32px;font-size:22px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background 0.15s;line-height:1;}
    .btn-green:hover{background:#276749;}

    .list-wrap{border:1.5px solid var(--border);border-radius:8px;overflow:hidden;max-height:480px;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;white-space:nowrap;}
    .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);}
    .badge-tva{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:4px;background:#EEF2FF;color:var(--navy);}

    /* Modal */
    .modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:1000;align-items:center;justify-content:center;}
    .modal-backdrop.open{display:flex;}
    .modal-box{background:#fff;border-radius:14px;padding:24px 28px;min-width:420px;max-width:95vw;box-shadow:0 20px 60px rgba(0,0,0,0.2);}
    .modal-title{font-size:15px;font-weight:900;color:var(--navy);margin-bottom:18px;}
    .mrow{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:6px 12px;margin-bottom:10px;}
</style>
@endpush

@section('content')

<div class="c-card">
    {{-- Barre de filtres --}}
    <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:0;">
        <button class="btn-green" onclick="openModal()" title="Ajouter une ligne">+</button>
        <input type="text" class="f-input" style="flex:1;max-width:360px;" placeholder="Recherche" id="searchInput" oninput="filterTable()">
        <select class="f-input f-select" style="width:180px;" id="filterType" onchange="filterTable()">
            <option value="">— Type de ligne —</option>
            <option value="libre">Libre</option>
            <option value="assistance">Assistance</option>
        </select>
        <button class="icon-btn" onclick="filterTable()">
            <svg viewBox="0 0 24 24" style="width:16px;height:16px;stroke:var(--text-muted);fill:none;stroke-width:2;stroke-linecap:round;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </button>
        <a href="{{ route('dashboard') }}" class="btn-ghost" style="margin-left:auto;">Quitter</a>
    </div>
</div>

<div class="c-card" style="padding:0;overflow:hidden;">
    <div class="list-wrap">
        <table class="dt" id="mainTable">
            <thead>
                <tr>
                    <th>Désignation</th>
                    <th>Type de ligne</th>
                    <th>TVA applicable</th>
                    <th style="text-align:right;">PU H.T</th>
                    <th style="width:80px;text-align:center;">Actions</th>
                </tr>
            </thead>
            <tbody id="tbody">
                    @forelse($lignes as $l)
                    <tr id="row-{{ $l->id }}" onclick="openModalEdit({{ $l->id }},'{{ addslashes($l->designation) }}','{{ $l->type_ligne }}','{{ $l->tva }}','{{ $l->pu_ht }}')">
                        <td style="font-weight:800;">{{ $l->designation }}</td>
                        <td><span style="font-size:12px;color:var(--text-muted);font-weight:700;">{{ $l->type_label }}</span></td>
                        <td><span class="badge-tva">{{ $l->tva_label }}</span></td>
                        <td style="text-align:right;font-family:monospace;">{{ number_format($l->pu_ht,2,',',' ') }} €</td>
                        <td style="text-align:center;">
                            <button class="icon-btn" title="Modifier" onclick="event.stopPropagation();openModalEdit({{ $l->id }},'{{ addslashes($l->designation) }}','{{ $l->type_ligne }}','{{ $l->tva }}','{{ $l->pu_ht }}')">
                                <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({{ $l->id }},'{{ addslashes($l->designation) }}')">
                                <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="5" style="text-align:center;padding:24px;color:var(--text-muted);">Aucune ligne de facturation enregistrée.</td></tr>
                    @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Modal Ajouter / Modifier --}}
<div class="modal-backdrop" id="modalBackdrop" onclick="closeModal(event)">
    <div class="modal-box" onclick="event.stopPropagation()">
        <div class="modal-title" id="modalTitle">Nouvelle ligne de facturation</div>
        <div class="mrow">
            <label class="f-label">Désignation</label>
            <input type="text" class="f-input" id="mDesig" placeholder="Libellé de la ligne…">
        </div>
        <div class="mrow">
            <label class="f-label">Type de ligne</label>
            <select class="f-input f-select" id="mType">
                <option value="libre">Libre</option>
                <option value="assistance">Assistance</option>
            </select>
        </div>
        <div class="mrow">
            <label class="f-label">TVA applicable</label>
            <select class="f-input f-select" id="mTva">
                <option value="exonere">Exonéré</option>
                <option value="taux_normal">Taux Normal</option>
                <option value="taux_intermediaire">Taux Intermédiaire</option>
                <option value="taux_reduit">Taux Réduit</option>
                <option value="taux_normal_corse">Taux Normal Corse</option>
                <option value="taux_reduit_corse">Taux Réduit Corse</option>
                <option value="taux_normal_dom">Taux Normal DOM</option>
                <option value="taux_reduit_dom">Taux Réduit DOM</option>
            </select>
        </div>
        <div class="mrow">
            <label class="f-label">PU H.T</label>
            <div style="display:flex;align-items:center;gap:6px;">
                <input type="number" class="f-input" style="width:120px;" step="0.01" min="0" id="mPu" placeholder="0.00">
                <span class="f-label">€</span>
            </div>
        </div>
        <div style="display:flex;gap:10px;justify-content:flex-end;margin-top:18px;border-top:1.5px solid var(--border);padding-top:14px;">
            <button type="button" class="btn-danger" id="mBtnSuppr" style="display:none;margin-right:auto;" onclick="supprimerCurrent()">
                <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="closeModalDirect()">Annuler</button>
            <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>
        </div>
    </div>
</div>

@endsection

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

const TVA_LABELS = {
    exonere:'Exonéré', taux_normal:'Taux Normal', taux_intermediaire:'Taux Intermédiaire',
    taux_reduit:'Taux Réduit', taux_normal_corse:'Taux Normal Corse',
    taux_reduit_corse:'Taux Réduit Corse', taux_normal_dom:'Taux Normal DOM', taux_reduit_dom:'Taux Réduit DOM'
};
const TYPE_LABELS = { libre:'Libre', assistance:'Assistance' };

document.addEventListener('DOMContentLoaded', function() {
    var modal = document.getElementById('modalBackdrop');
    if (modal) document.body.appendChild(modal);
});

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

function openModal() {
    currentId = null;
    document.getElementById('modalTitle').textContent = 'Nouvelle ligne de facturation';
    document.getElementById('mDesig').value = '';
    document.getElementById('mType').value = 'libre';
    document.getElementById('mTva').value = 'exonere';
    document.getElementById('mPu').value = '';
    document.getElementById('mBtnSuppr').style.display = 'none';
    document.getElementById('modalBackdrop').classList.add('open');
    setTimeout(() => document.getElementById('mDesig').focus(), 80);
}

function openModalEdit(id, des, type, tva, pu) {
    currentId = id;
    document.getElementById('modalTitle').textContent = 'Modifier : ' + des;
    document.getElementById('mDesig').value = des;
    document.getElementById('mType').value = type;
    document.getElementById('mTva').value = tva;
    document.getElementById('mPu').value = parseFloat(pu).toFixed(2);
    document.getElementById('mBtnSuppr').style.display = 'inline-flex';
    document.getElementById('modalBackdrop').classList.add('open');
}

function closeModal(e) { if (e.target === document.getElementById('modalBackdrop')) closeModalDirect(); }
function closeModalDirect() { document.getElementById('modalBackdrop').classList.remove('open'); }
document.addEventListener('keydown', function(e) { if (e.key === 'Escape') closeModalDirect(); });

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

    const payload = {
        designation,
        type_ligne : document.getElementById('mType').value,
        tva        : document.getElementById('mTva').value,
        pu_ht      : parseFloat(document.getElementById('mPu').value) || 0,
    };

    const url    = currentId ? '/lignes-facturation/' + currentId : '/lignes-facturation';
    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(payload),
    });
    const d = await r.json();
    if (!d.success) return;

    const l = d.ligne;
    if (currentId) {
        const row = document.getElementById('row-' + currentId);
        if (row) {
            row.cells[0].textContent = l.designation;
            row.cells[1].querySelector('span').textContent = l.type_label;
            row.cells[2].querySelector('span').textContent = l.tva_label;
            row.cells[3].textContent = l.pu_ht_fmt + ' €';
            row.dataset.type = l.type_ligne;
            row.setAttribute('onclick', buildOnclick(l));
            row.querySelector('button').setAttribute('onclick', 'event.stopPropagation();' + buildOnclick(l));
        }
    } else {
        document.getElementById('empty-row')?.remove();
        const tr = document.createElement('tr');
        tr.id = 'row-' + l.id;
        tr.dataset.type = l.type_ligne;
        tr.setAttribute('onclick', buildOnclick(l));
        tr.innerHTML = `
            <td style="font-weight:800;">${l.designation}</td>
            <td><span style="font-size:12px;color:var(--text-muted);font-weight:700;">${l.type_label}</span></td>
            <td><span class="badge-tva">${l.tva_label}</span></td>
            <td style="text-align:right;font-family:monospace;">${l.pu_ht_fmt} €</td>
            <td style="text-align:center;">
                <button class="icon-btn" title="Modifier" onclick="event.stopPropagation();openModalEdit(${l.id},'${esc(l.designation)}','${l.type_ligne}','${l.tva}','${l.pu_ht}')">
                    <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(${l.id},'${esc(l.designation)}')">
                    <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>`;
        document.getElementById('tbody').appendChild(tr);
    }
    closeModalDirect();
}

function buildOnclick(l) {
    return `openModalEdit(${l.id},'${esc(l.designation)}','${l.type_ligne}','${l.tva}','${l.pu_ht}')`;
}
function esc(s) { return String(s).replace(/'/g,"\\'"); }

async function supprimerCurrent() {
    if (!currentId) return;
    const des = document.getElementById('mDesig').value;
    await supprimerDirect(currentId, des);
}

async function supprimerDirect(id, des) {
    if (!confirm('Supprimer "' + des + '" ?')) return;
    const r = await fetch('/lignes-facturation/' + 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();
    closeModalDirect();

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