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

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

<div class="page-header">
    <div><h1 class="page-title"><i class="fas fa-truck" style="color:var(--primary)"></i> Fournisseurs</h1><p class="page-subtitle">{{ $fournisseurs->total() }} fournisseur(s)</p></div>
    <div class="page-actions">
        <a href="{{ route('fournisseurs.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('fournisseurs.create') }}" class="btn btn-success"><i class="fas fa-plus"></i> Nouveau</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 fournisseurs</h3>
        <button type="button" @click="closeModal()"><i class="fas fa-times"></i></button>
    </div>
    <form method="POST" action="{{ route('fournisseurs.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('fournisseurs.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="fournisseurImportFile" 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 + ' fournisseur(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>
        <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
        <a href="{{ route('fournisseurs.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>Solde</th><th>Actions</th></tr></thead>
    <tbody>
    @forelse($fournisseurs as $f)
        <tr>
            <td><code>{{ $f->code }}</code></td>
            <td><a href="{{ route('fournisseurs.show', $f) }}" style="color:var(--primary);font-weight:500;">{{ $f->nom }}</a></td>
            <td>{{ $f->groupe?->label ?? '-' }}</td>
            <td>{{ $f->tel ?? '-' }}</td>
            <td>{{ number_format($f->solde,3,',',' ') }}</td>
            <td>
                <div class="table-actions">
                    <a href="{{ route('fournisseurs.show', $f) }}" class="action-btn" title="Consulter"><i class="fas fa-eye"></i></a>
                    <a href="{{ route('fournisseurs.edit', $f) }}" class="action-btn" title="Modifier"><i class="fas fa-pen"></i></a>
                </div>
            </td>
        </tr>
    @empty
        <tr><td colspan="6" class="empty-state">Aucun fournisseur</td></tr>
    @endforelse
    </tbody>
</table></div>
@if($fournisseurs->hasPages()) <div style="padding:12px 16px;border-top:1px solid var(--border);">{{ $fournisseurs->links() }}</div> @endif
</div>

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

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

        openModal() {
            this.showImport = true;
            this.preview = null;
            const f = document.getElementById('fournisseurImportFile');
            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