@extends('layouts.app')
@section('title', 'Clients')
@section('breadcrumb', 'Commercial / Clients')

@section('content')
<div x-data="clientImportData()">

<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-users" style="color:var(--primary)"></i> Clients</h1>
        <p class="page-subtitle">{{ $clients->total() }} client(s)</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('clients.export') }}" class="btn btn-info"><i class="fas fa-download"></i> Export CSV</a>
        <button type="button" class="btn btn-warning" @click="openModal()"><i class="fas fa-file-upload"></i> Importer CSV</button>
        <a href="{{ route('clients.create') }}" class="btn btn-success"><i class="fas fa-plus"></i> Nouveau client</a>
    </div>
</div>

{{-- ======= MODAL IMPORT ======= --}}
<div class="modal-overlay" :class="{ open: showImport }" @click="closeModal()"></div>
<div class="modal" :class="{ open: showImport }" :style="preview ? 'max-width:900px' : 'max-width:540px'">
    <div class="modal-header">
        <h3><i class="fas fa-file-upload" style="color:var(--primary);margin-right:8px;"></i>Importation de clients</h3>
        <button type="button" @click="closeModal()"><i class="fas fa-times"></i></button>
    </div>
    <form method="POST" action="{{ route('clients.import') }}" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">

            <div style="background:var(--primary-light);border:1px solid var(--primary);border-radius:8px;padding:11px 14px;margin-bottom:14px;font-size:12.5px;">
                <p style="margin:0 0 5px;font-weight:600;color:var(--primary);"><i class="fas fa-info-circle"></i> Format CSV — séparateur <code>;</code> — UTF-8</p>
                <p style="margin:0 0 3px;color:var(--text-muted);">
                    <code>code</code> · <strong>nom*</strong> · <code>groupe</code> · <code>matricule_fiscale</code> · <code>tel</code> · <code>email</code> · <code>adresse</code> · <code>remise_accordee</code> · <code>plafond_credit</code>
                </p>
                <p style="margin:4px 0 0;font-size:12px;color:var(--text-muted);">Groupe créé auto · code existant = mise à jour</p>
                <a href="{{ route('clients.import.template') }}" class="btn btn-sm btn-secondary" style="margin-top:8px;display:inline-flex;align-items:center;gap:5px;font-size:12px;">
                    <i class="fas fa-download"></i> Télécharger le modèle CSV
                </a>
            </div>

            <div class="form-group" style="margin-bottom:0;">
                <label class="form-label">Fichier CSV <span style="color:var(--danger)">*</span></label>
                <input type="file" name="fichier" id="clientImportFile" class="form-control" accept=".csv,.txt"
                       required @change="onFileChange($event)">
                @error('fichier')<div class="form-error">{{ $message }}</div>@enderror
            </div>

            <div x-show="preview" x-cloak style="margin-top:16px;">
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-wrap:wrap;gap:8px;">
                    <div style="font-size:13px;font-weight:600;">
                        <i class="fas fa-table" style="color:var(--primary);margin-right:5px;"></i>
                        Aperçu — <span x-text="preview ? preview.total : 0"></span> ligne(s) détectée(s)
                        <template x-if="preview && preview.total > 5">
                            <span style="color:var(--text-muted);font-weight:400;"> (5 premières affichées)</span>
                        </template>
                    </div>
                    <div style="display:flex;gap:8px;font-size:12px;">
                        <span class="badge-pill badge-success" x-text="(preview ? preview.validCount : 0) + ' valide(s)'"></span>
                        <template x-if="preview && preview.total - preview.validCount > 0">
                            <span class="badge-pill badge-danger" x-text="(preview.total - preview.validCount) + ' ignorée(s) — nom manquant'"></span>
                        </template>
                    </div>
                </div>
                <div style="overflow-x:auto;border:1px solid var(--border);border-radius:8px;max-height:280px;overflow-y:auto;">
                    <table style="width:100%;border-collapse:collapse;font-size:12px;">
                        <thead>
                            <tr style="background:var(--bg-sidebar);position:sticky;top:0;z-index:1;">
                                <template x-for="(h, i) in (preview ? preview.headers : [])" :key="i">
                                    <th style="padding:7px 10px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--border);font-weight:600;"
                                        :style="(preview && i === preview.nomIdx) ? 'color:var(--primary)' : ''"
                                        x-text="h"></th>
                                </template>
                                <th style="padding:7px 10px;border-bottom:1px solid var(--border);">Statut</th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(row, ri) in (preview ? preview.rows : [])" :key="ri">
                                <tr :style="row.valid ? '' : 'background:#fef2f2;'" style="border-bottom:1px solid var(--border);">
                                    <template x-for="(cell, ci) in row.cells" :key="ci">
                                        <td style="padding:6px 10px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"
                                            :title="cell"
                                            :style="(!row.valid && preview && ci === preview.nomIdx) ? 'color:var(--danger);font-weight:600;' : ''"
                                            x-text="cell || '—'"></td>
                                    </template>
                                    <td style="padding:6px 10px;white-space:nowrap;">
                                        <template x-if="row.valid">
                                            <span class="badge-pill badge-success" style="font-size:10px;"><i class="fas fa-check"></i> OK</span>
                                        </template>
                                        <template x-if="!row.valid">
                                            <span class="badge-pill badge-danger" style="font-size:10px;"><i class="fas fa-times"></i> Nom vide</span>
                                        </template>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="closeModal()">Annuler</button>
            <button type="submit" class="btn btn-primary" :disabled="preview && preview.validCount === 0">
                <i class="fas fa-upload"></i>
                <span x-text="preview ? 'Importer ' + preview.validCount + ' client(s)' : 'Lancer l\'import'"></span>
            </button>
        </div>
    </form>
</div>
{{-- ======= /MODAL IMPORT ======= --}}

<div class="card" style="margin-bottom:16px;">
    <div class="card-body" style="padding:12px 16px;">
        <form method="GET" style="display:flex;gap:10px;flex-wrap:wrap;align-items:center;">
            <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="Nom, code, tél..." style="max-width:220px;">
            <select name="groupe_id" class="form-control" style="max-width:160px;">
                <option value="">Tous les groupes</option>
                @foreach($groupes as $g)
                    <option value="{{ $g->id }}" {{ request('groupe_id') == $g->id ? 'selected' : '' }}>{{ $g->label }}</option>
                @endforeach
            </select>
            <select name="actif" class="form-control" style="max-width:130px;">
                <option value="">Actif &amp; inactif</option>
                <option value="1" {{ request('actif') === '1' ? 'selected' : '' }}>Actifs</option>
                <option value="0" {{ request('actif') === '0' ? 'selected' : '' }}>Inactifs</option>
            </select>
            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
            <a href="{{ route('clients.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i></a>
        </form>
    </div>
</div>

<div class="card">
    <div class="table-wrap">
        <table class="table">
            <thead>
                <tr><th>Code</th><th>Nom</th><th>Groupe</th><th>Tél</th><th>Remise</th><th>Solde</th><th>Statut</th><th>Actions</th></tr>
            </thead>
            <tbody>
            @forelse($clients as $c)
                <tr>
                    <td><code>{{ $c->code }}</code></td>
                    <td><a href="{{ route('clients.show', $c) }}" style="font-weight:500;color:var(--primary);">{{ $c->nom }}</a></td>
                    <td>{{ $c->groupe?->label ?? '-' }}</td>
                    <td>{{ $c->tel ?? '-' }}</td>
                    <td>{{ $c->remise_accordee }}%</td>
                    <td style="{{ $c->solde > 0 ? 'color:#ef4444;font-weight:600;' : '' }}">{{ number_format($c->solde, 3, ',', ' ') }}</td>
                    <td><span class="badge-pill {{ $c->actif ? 'badge-success' : 'badge-muted' }}">{{ $c->actif ? 'Actif' : 'Inactif' }}</span></td>
                    <td>
                        <div class="table-actions">
                            <a href="{{ route('clients.show', $c) }}" class="action-btn" title="Consulter"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('clients.edit', $c) }}" class="action-btn" title="Modifier"><i class="fas fa-pen"></i></a>
                            <form method="POST" action="{{ route('clients.destroy', $c) }}" onsubmit="return confirm('Désactiver ce client ?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn danger" title="Désactiver"><i class="fas fa-times-circle"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="8" class="empty-state">Aucun client trouvé</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($clients->hasPages()) <div style="padding:12px 16px;border-top:1px solid var(--border);">{{ $clients->links() }}</div> @endif
</div>

</div>{{-- /x-data clientImportData --}}
@endsection

@push('scripts')
<script>
function clientImportData() {
    return {
        showImport: false,
        preview: null,

        openModal() {
            this.showImport = true;
            this.preview = null;
            const f = document.getElementById('clientImportFile');
            if (f) f.value = '';
        },
        closeModal() {
            this.showImport = false;
            this.preview = null;
        },

        onFileChange(event) {
            const file = event.target.files[0];
            if (!file) { this.preview = null; return; }

            const reader = new FileReader();
            reader.onload = (e) => {
                let text = e.target.result;
                if (text.charCodeAt(0) === 0xFEFF) text = text.slice(1);

                const parseRow = (line) => {
                    const cells = []; let cur = ''; let inQ = false;
                    for (const ch of line) {
                        if (ch === '"') { inQ = !inQ; }
                        else if (ch === ';' && !inQ) { cells.push(cur.trim()); cur = ''; }
                        else { cur += ch; }
                    }
                    cells.push(cur.trim());
                    return cells;
                };

                const lines = text.split(/\r?\n/).filter(l => l.trim());
                if (lines.length < 2) { this.preview = null; return; }

                const headers = parseRow(lines[0]);
                const nomIdx = (() => {
                    const i = headers.findIndex(h => h.replace(/\*/g,'').trim().toLowerCase() === 'nom');
                    return i >= 0 ? i : 1;
                })();

                const allDataRows = lines.slice(1).map(parseRow);
                const validCount = allDataRows.filter(r => r[nomIdx] && r[nomIdx].trim()).length;

                this.preview = {
                    headers,
                    rows: allDataRows.slice(0, 5).map(r => ({
                        cells: r,
                        valid: !!(r[nomIdx] && r[nomIdx].trim()),
                    })),
                    total: allDataRows.length,
                    validCount,
                    nomIdx,
                };
            };
            reader.readAsText(file, 'UTF-8');
        },
    };
}
</script>
@endpush