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

@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:13px; font-weight:700; color:var(--text); white-space:nowrap; }
    .f-input { border:1.5px solid var(--border); border-radius:7px; padding:6px 10px; 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); }
    .check-lbl { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--text); cursor:pointer; white-space:nowrap; }
    .check-lbl input { accent-color:var(--navy); cursor:pointer; }
    .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; transition:background 0.2s; white-space:nowrap; }
    .btn-y:hover { background:var(--yellow-dark); }
    .btn-navy { background:var(--navy); color:#fff; border:none; border-radius:20px; padding:8px 22px; font-family:'Nunito',sans-serif; font-size:13px; font-weight:800; cursor:pointer; transition:background 0.2s; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
    .btn-navy:hover { background:var(--navy-light); color:#fff; }
    .icon-btn { background:none; border:none; cursor:pointer; padding:3px 6px; border-radius:5px; display:inline-flex; align-items:center; transition:background 0.15s; }
    .icon-btn:hover { background:var(--bg); }

    .client-table { width:100%; border-collapse:collapse; }
    .client-table 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); white-space:nowrap; position:sticky; top:0; z-index:1; }
    .client-table tbody tr { border-bottom:1px solid var(--border); transition:background 0.12s; cursor:pointer; }
    .client-table tbody tr:hover { background:#F0F4FF; }
    .client-table tbody tr.selected { background:#DBEAFE; }
    .client-table tbody td { padding:9px 12px; font-size:13px; font-weight:600; color:var(--text); vertical-align:middle; }
    .client-list { border:1.5px solid var(--border); border-radius:8px; overflow:hidden; max-height:500px; overflow-y:auto; }
    .client-list::-webkit-scrollbar { width:6px; }
    .client-list::-webkit-scrollbar-thumb { background:#CBD0DC; border-radius:3px; }

    .badge { display:inline-block; font-size:11px; font-weight:800; padding:2px 8px; border-radius:4px; }
    .badge-tap     { background:#EEF2FF; color:var(--navy); }
    .badge-libre   { background:#E6FFFA; color:#276749; }
    .badge-contrat { background:#FFF3E0; color:#C05621; }

    .alert-success { background:#F0FFF4; border:1px solid #9AE6B4; color:#276749; padding:10px 16px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:14px; display:flex; align-items:center; gap:8px; }
</style>
@endpush

@section('content')

@if(session('success'))
<div class="alert-success">
    <svg viewBox="0 0 24 24" width="14" height="14" style="stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;flex-shrink:0;"><polyline points="20 6 9 17 4 12"/></svg>
    {{ session('success') }}
</div>
@endif

{{-- Barre recherche + actions --}}
<div class="c-card">
    <form method="GET" action="{{ route('clients.index') }}">
    <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
        <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
            <div style="display:flex; align-items:center; gap:8px;">
                <span class="f-label">Recherche</span>
                <input type="text" name="q" class="f-input" style="width:200px;" placeholder="Nom, prénom…" value="{{ $q }}" id="searchInput">
                <button type="submit" class="icon-btn">
                    <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>
            </div>
            <label class="check-lbl"><input type="checkbox" id="filterTap"     onchange="filterLocal()"> Client TAP</label>
            <label class="check-lbl"><input type="checkbox" id="filterLibre"   onchange="filterLocal()"> Client Libre</label>
            <label class="check-lbl"><input type="checkbox" id="filterContrat" onchange="filterLocal()"> Client contrat</label>
        </div>
        <a href="{{ route('clients.create') }}" class="btn-navy">
            <svg viewBox="0 0 24 24" style="width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Nouveau client
        </a>
    </div>
    </form>
</div>

{{-- Liste clients --}}
<div class="c-card" style="padding:0; overflow:hidden;">
    <div class="client-list">
        <table class="client-table" id="clientTable">
            <thead>
                <tr>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>Date naissance</th>
                    <th>Téléphone</th>
                    <th>Type</th>
                    <th>Caisse</th>
                    <th style="width:100px; text-align:center;">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse($clients as $c)
                <tr data-tap="{{ $c->is_tap ? '1' : '0' }}"
                    data-libre="{{ $c->is_libre ? '1' : '0' }}"
                    data-contrat="{{ $c->is_contrat ? '1' : '0' }}"
                    onclick="window.location='{{ route('clients.edit', $c->id) }}'">
                    <td style="font-weight:800;">{{ $c->nom_patronymique }}</td>
                    <td>{{ $c->prenom }}</td>
                    <td style="color:var(--text-muted);">
                        {{ $c->date_naissance ? $c->date_naissance->format('d/m/Y') : '—' }}
                    </td>
                    <td>{{ $c->telephone ?? $c->portable ?? '—' }}</td>
                    <td>
                        @if($c->is_tap)    <span class="badge badge-tap">TAP</span>
                        @elseif($c->is_libre)  <span class="badge badge-libre">Libre</span>
                        @elseif($c->is_contrat)<span class="badge badge-contrat">Contrat</span>
                        @endif
                    </td>
                    <td style="color:var(--text-muted); font-size:12px;">
                        {{ $c->caisse ? $c->caisse->nom : '—' }}
                    </td>
                    <td style="text-align:center;" onclick="event.stopPropagation()">
                        <a href="{{ route('clients.edit', $c->id) }}" class="icon-btn" title="Modifier">
                            <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>
                        </a>
                        <form method="POST" action="{{ route('clients.destroy', $c->id) }}" style="display:inline;" onsubmit="return confirm('Supprimer ce client ?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="icon-btn" title="Supprimer">
                                <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="M9 6V4h6v2"/></svg>
                            </button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" style="text-align:center; padding:32px; color:var(--text-muted); font-size:13px;">
                        Aucun client trouvé.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

@endsection

@push('scripts')
<script>
function filterLocal() {
    const tapF     = document.getElementById('filterTap').checked;
    const libreF   = document.getElementById('filterLibre').checked;
    const contratF = document.getElementById('filterContrat').checked;
    const anyFilter = tapF || libreF || contratF;

    document.querySelectorAll('#clientTable tbody tr[data-tap]').forEach(function(row) {
        if (!anyFilter) { row.style.display = ''; return; }
        const show = (tapF     && row.dataset.tap     === '1')
                  || (libreF   && row.dataset.libre   === '1')
                  || (contratF && row.dataset.contrat === '1');
        row.style.display = show ? '' : 'none';
    });
}
</script>
@endpush