@extends('layouts.app')

@section('title', 'Transport')
@section('page-title', 'Transport')

@push('styles')
<style>
    .transport-card {
        background: #fff;
        border-radius: 12px;
        border: 1px solid var(--border);
        padding: 20px 24px;
        margin-bottom: 20px;
    }

    /* Barre de recherche */
    .search-bar {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }
    .search-field {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .search-field label {
        font-size: 14px;
        font-weight: 700;
        color: var(--text);
        white-space: nowrap;
    }
    .search-input {
        border: 1.5px solid var(--border);
        border-radius: 8px;
        padding: 7px 12px;
        font-family: 'Nunito', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: var(--text);
        outline: none;
        width: 200px;
        transition: border-color 0.2s;
    }
    .search-input:focus { border-color: var(--yellow); }
    .search-btn {
        background: var(--yellow);
        border: none;
        border-radius: 8px;
        padding: 7px 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.2s;
    }
    .search-btn:hover { background: var(--yellow-dark); }
    .search-btn svg { width: 16px; height: 16px; stroke: var(--navy); fill: none; stroke-width: 2.5; stroke-linecap: round; }

    .checkbox-group {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: wrap;
    }
    .checkbox-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        cursor: pointer;
        white-space: nowrap;
    }
    .checkbox-label input[type=checkbox] {
        accent-color: var(--navy);
        width: 15px;
        height: 15px;
        cursor: pointer;
    }

    .btn-yellow {
        background: var(--yellow);
        color: var(--navy);
        border: none;
        border-radius: 20px;
        padding: 8px 20px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: background 0.2s;
        white-space: nowrap;
    }
    .btn-yellow:hover { background: var(--yellow-dark); }

    .btn-outline {
        background: transparent;
        color: var(--navy);
        border: 2px solid var(--navy);
        border-radius: 20px;
        padding: 7px 20px;
        font-family: 'Nunito', sans-serif;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
        text-decoration: none;
        display: inline-block;
    }
    .btn-outline:hover { background: var(--navy); color: #fff; }

    /* Liste clients */
    .client-list {
        min-height: 160px;
        border: 1.5px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
    }
    .client-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        padding: 10px 16px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.15s;
        border-bottom: 1px solid var(--border);
    }
    .client-row:last-child { border-bottom: none; }
    .client-row:hover { background: #EEF2FF; }
    .client-row.selected { background: #CBD5E0; color: var(--navy); }
    .client-nom { font-weight: 800; }
    .client-empty {
        padding: 40px;
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 600;
    }

    /* Section dossiers */
    .dossiers-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
    }
    .dossiers-title {
        font-size: 15px;
        font-weight: 800;
        color: var(--text);
    }
    .dossier-table {
        width: 100%;
        border-collapse: collapse;
    }
    .dossier-table tr.dossier-main {
        border-bottom: 1px solid var(--border);
    }
    .dossier-table tr.dossier-main td {
        padding: 10px 12px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text);
        vertical-align: middle;
    }
    .dossier-table tr.dossier-detail td {
        padding: 6px 12px 10px 24px;
        font-size: 12px;
        font-weight: 600;
        color: #555;
        background: #EEF2FF;
    }
    .dossier-table tr.dossier-main:hover td { background: #F7F9FC; }
    .badge-tap {
        display: inline-block;
        background: var(--navy);
        color: #fff;
        font-size: 11px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 4px;
    }
    .badge-tap-serie {
        display: inline-block;
        background: var(--navy-light);
        color: var(--yellow);
        font-size: 11px;
        font-weight: 800;
        padding: 2px 8px;
        border-radius: 4px;
    }
    .transport-status {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-muted);
    }
    .transport-status.has-transport { color: #38A169; font-weight: 700; }

    .btn-actions {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 20px;
    }

    .dossiers-loading {
        padding: 30px;
        text-align: center;
        color: var(--text-muted);
        font-size: 13px;
        font-weight: 600;
    }
</style>
@endpush

@section('content')

{{-- Barre de recherche --}}
<div class="transport-card">
    <div class="search-bar" style="justify-content: space-between;">
        <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
            <div class="search-field">
                <label for="recherche">Recherche</label>
                <input type="text" id="recherche" class="search-input" placeholder="Nom du client..." autocomplete="off" value="{{ $q ?? '' }}">
                <button class="search-btn" onclick="rechercherClient()">
                    <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                </button>
            </div>
            <div class="checkbox-group">
                <label class="checkbox-label"><input type="checkbox" id="f-tap" checked> Client TAP</label>
                <label class="checkbox-label"><input type="checkbox" id="f-libre"> Client Libre</label>
                <label class="checkbox-label"><input type="checkbox" id="f-contrat"> Client contrat</label>
                <label class="checkbox-label"><input type="checkbox" id="f-annule"> Afficher les dossiers annulés</label>
            </div>
        </div>
        <button class="btn-yellow" style="border-radius:10px; padding:10px 18px; font-size:13px; line-height:1.3;" onclick="tousLesDossiers()">Tous les Dossiers<br>en cours</button>
    </div>
</div>

{{-- Liste clients --}}
<div class="transport-card" style="padding: 16px;">
    <div class="client-list" id="clientList">
        <div class="client-empty">Saisissez un nom pour rechercher un client</div>
    </div>
</div>

<div class="btn-actions">
    <button class="btn-yellow" onclick="nouveauDossier()">Nouveau Dossier</button>
</div>

{{-- Dossiers du client sélectionné --}}
<div class="transport-card" id="dossiersCard" style="margin-top: 24px; display:none;">
    <div class="dossiers-header">
        <span class="dossiers-title" id="dossiersTitle">Dossiers</span>
    </div>
    <div id="dossiersContent">
        <div class="dossiers-loading">Chargement…</div>
    </div>
</div>

<div class="btn-actions">
    <a href="{{ route('dashboard') }}" class="btn-outline">Quitter</a>
</div>

{{-- Formulaire caché pour créer un dossier --}}
<form id="formNouveauDossier" method="POST" action="{{ route('transport.dossier.store') }}" style="display:none;">
    @csrf
    <input type="hidden" name="client_id" id="formClientId">
</form>

@endsection

@push('scripts')
<script>
let selectedClientId   = null;
let selectedClientNom  = null;

// Recherche dynamique avec debounce
let searchTimer = null;
document.getElementById('recherche').addEventListener('input', function() {
    clearTimeout(searchTimer);
    const q = this.value.trim();
    if (q.length === 0) {
        document.getElementById('clientList').innerHTML = '<div class="client-empty">Saisissez un nom pour rechercher un client</div>';
        hideDossiers();
        return;
    }
    searchTimer = setTimeout(() => rechercherClient(), 250);
});
document.getElementById('recherche').addEventListener('keydown', function(e) {
    if (e.key === 'Enter') { clearTimeout(searchTimer); rechercherClient(); }
});

function rechercherClient() {
    const q = document.getElementById('recherche').value.trim();
    if (q.length < 1) return;

    fetch('{{ route("transport.clients.search") }}?q=' + encodeURIComponent(q))
        .then(r => r.json())
        .then(clients => {
            const list = document.getElementById('clientList');
            if (clients.length === 0) {
                list.innerHTML = '<div class="client-empty">Aucun client trouvé pour « ' + q + ' »</div>';
                return;
            }
            list.innerHTML = clients.map(c => {
                const nom    = (c.nom_patronymique || '').toUpperCase();
                const prenom = c.prenom || '';
                const nomSafe = nom.replace(/'/g, "\\'");
                return `<div class="client-row" data-id="${c.id}" onclick="selectClient(this, ${c.id}, '${nomSafe} ${prenom}')">
                    <span class="client-nom">${nom}</span>
                    <span>${prenom}</span>
                </div>`;
            }).join('');
        });
}

function selectClient(el, id, nom) {
    document.querySelectorAll('.client-row').forEach(r => r.classList.remove('selected'));
    el.classList.add('selected');
    selectedClientId  = id;
    selectedClientNom = nom;
    chargerDossiers(id, nom);
}

function chargerDossiers(clientId, clientNom) {
    const card = document.getElementById('dossiersCard');
    card.style.display = 'block';
    document.getElementById('dossiersTitle').textContent = 'Dossiers — ' + clientNom;
    document.getElementById('dossiersContent').innerHTML = '<div class="dossiers-loading">Chargement…</div>';

    fetch(`/transport/clients/${clientId}/dossiers`)
        .then(r => r.json())
        .then(dossiers => renderDossiers(dossiers));
}

function hideDossiers() {
    document.getElementById('dossiersCard').style.display = 'none';
    selectedClientId  = null;
    selectedClientNom = null;
}

function renderDossiers(dossiers) {
    const tbody = document.getElementById('dossiersContent');
    if (dossiers.length === 0) {
        tbody.innerHTML = '<div class="dossiers-loading">Aucun dossier en cours pour ce client</div>';
        return;
    }

    let html = '<table class="dossier-table">';
    dossiers.forEach(d => {
        const badge = d.type_dossier === 'serie'
            ? `<span class="badge-tap-serie">TAP Série</span>`
            : `<span class="badge-tap">TAP</span>`;
        const status = d.nb_trajets > 0
            ? `<span class="transport-status has-transport">${d.nb_trajets} transport${d.nb_trajets > 1 ? 's' : ''}</span>`
            : `<span class="transport-status">Pas de Transport</span>`;

        html += `
        <tr class="dossier-main">
            <td>${d.date_dossier}</td>
            <td>${badge}</td>
            <td><strong>${d.num_dossier}</strong></td>
            <td>${status}</td>
            <td style="text-align:right;">
                <a href="/transport/dossier/${d.id}" title="Ouvrir" style="background:none;border:none;cursor:pointer;display:inline-flex;">
                    <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:#8A93A8;fill:none;stroke-width:2;stroke-linecap:round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                </a>
            </td>
        </tr>
        <tr class="dossier-detail"><td colspan="5">&nbsp;</td></tr>`;
    });
    html += '</table>';
    tbody.innerHTML = html;
}

function tousLesDossiers() {
    const card = document.getElementById('dossiersCard');
    card.style.display = 'block';
    document.getElementById('dossiersTitle').textContent = 'Tous les dossiers en cours';
    document.getElementById('dossiersContent').innerHTML = '<div class="dossiers-loading">Chargement…</div>';

    fetch('{{ route("transport.dossiers.all") }}')
        .then(r => r.json())
        .then(dossiers => {
            const tbody = document.getElementById('dossiersContent');
            if (dossiers.length === 0) {
                tbody.innerHTML = '<div class="dossiers-loading">Aucun dossier en cours</div>';
                return;
            }
            let html = '<table class="dossier-table">';
            dossiers.forEach(d => {
                const badge = d.type_dossier === 'serie'
                    ? `<span class="badge-tap-serie">TAP Série</span>`
                    : `<span class="badge-tap">TAP</span>`;
                const status = d.nb_trajets > 0
                    ? `<span class="transport-status has-transport">${d.nb_trajets} transport${d.nb_trajets > 1 ? 's' : ''}</span>`
                    : `<span class="transport-status">Pas de Transport</span>`;
                html += `
                <tr class="dossier-main">
                    <td>${d.date_dossier}</td>
                    <td>${badge}</td>
                    <td><strong>${d.num_dossier}</strong></td>
                    <td style="font-weight:800;">${d.client_nom}</td>
                    <td>${status}</td>
                    <td style="text-align:right;">
                        <a href="/transport/dossier/${d.id}" title="Ouvrir" style="background:none;border:none;cursor:pointer;display:inline-flex;">
                            <svg viewBox="0 0 24 24" style="width:18px;height:18px;stroke:#8A93A8;fill:none;stroke-width:2;stroke-linecap:round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                        </a>
                    </td>
                </tr>
                <tr class="dossier-detail"><td colspan="6">&nbsp;</td></tr>`;
            });
            html += '</table>';
            tbody.innerHTML = html;
        });
}

function nouveauDossier() {
    if (!selectedClientId) {
        alert('Veuillez sélectionner un client d\'abord.');
        return;
    }
    document.getElementById('formClientId').value = selectedClientId;
    document.getElementById('formNouveauDossier').submit();
}

// Auto-déclencher la recherche si ?q= est dans l'URL
window.addEventListener('DOMContentLoaded', () => { if (document.getElementById('recherche').value.trim()) rechercherClient(); });
</script>
@endpush