@extends('layouts.app')
@section('title', 'Produits')
@section('breadcrumb', 'Catalogue / Produits')

@section('content')
<div x-data="produitImportData()">
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-box" style="color:var(--primary)"></i> Produits</h1>
        <p class="page-subtitle">{{ $produits->total() }} produit(s)</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('produits.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('produits.create') }}" class="btn btn-success"><i class="fas fa-plus"></i> Nouveau produit</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 produits</h3>
        <button type="button" @click="closeModal()"><i class="fas fa-times"></i></button>
    </div>
    <form method="POST" action="{{ route('produits.import') }}" enctype="multipart/form-data">
        @csrf
        <div class="modal-body">

            {{-- Bloc info --}}
            <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_article</code> · <code>code_barre</code> · <strong>nom*</strong> · <code>famille</code> · <code>categorie</code> · <code>unite</code> · <code>prix_achat_ht</code> · <code>prix_vente_ht</code> · <code>stock</code> · <code>description</code>
                </p>
                <p style="margin:4px 0 0;font-size:12px;color:var(--text-muted);">Famille / catégorie / unité créés auto · code_article existant = mise à jour</p>
                <a href="{{ route('produits.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>

            {{-- Sélection fichier --}}
            <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="importFile" class="form-control" accept=".csv,.txt"
                       required @change="onFileChange($event)">
                @error('fichier')<div class="form-error">{{ $message }}</div>@enderror
            </div>

            {{-- Aperçu --}}
            <div x-show="preview" x-cloak style="margin-top:16px;">

                {{-- Résumé --}}
                <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>

                {{-- Table aperçu --}}
                <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 + ' produit(s)' : 'Lancer l\'import'"></span>
            </button>
        </div>
    </form>
</div>
{{-- ======= /MODAL IMPORT ======= --}}

{{-- Filtres --}}
<div class="card" style="margin-bottom:16px;" x-data="produitIndexFilter()">
    <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="Code, nom..." style="max-width:200px;">
            <select name="famille_id" class="form-control" style="max-width:160px;"
                    x-model="familleId" @change="onFamilleChange()">
                <option value="">Toutes familles</option>
                @foreach($familles as $f)
                    <option value="{{ $f->id }}">{{ $f->label }}</option>
                @endforeach
            </select>
            <select name="categorie_id" class="form-control" style="max-width:160px;" x-model="catId">
                <option value="">Toutes catégories</option>
                <template x-for="c in filteredCats" :key="c.id">
                    <option :value="c.id" :selected="c.id == catId" x-text="c.label"></option>
                </template>
            </select>
            <select name="stock_alert" class="form-control" style="max-width:150px;">
                <option value="">Stock : tous</option>
                <option value="rupture" {{ request('stock_alert') === 'rupture' ? 'selected' : '' }}>Rupture (≤ 0)</option>
                <option value="faible" {{ request('stock_alert') === 'faible' ? 'selected' : '' }}>Stock faible (≤ 5)</option>
            </select>
            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
            <a href="{{ route('produits.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>Image</th><th>Code</th><th>Nom</th><th>Famille</th><th>Unité</th>
                    <th>Prix Achat HT</th><th>Prix Vente HT</th><th>Marge %</th>
                    <th>Stock</th><th>Statut</th><th>Actions</th>
                </tr>
            </thead>
            <tbody>
            @forelse($produits as $p)
                <tr>
                    <td>
                        <div style="width:36px;height:36px;border-radius:8px;background:var(--primary-light);display:flex;align-items:center;justify-content:center;overflow:hidden;">
                            @if($p->image)
                                <img src="{{ asset('storage/'.$p->image) }}" alt="{{ $p->nom }}" style="width:100%;height:100%;object-fit:cover;">
                            @else
                                <i class="fas fa-box-open" style="color:var(--primary);font-size:14px;"></i>
                            @endif
                        </div>
                    </td>
                    <td><code>{{ $p->code_article }}</code></td>
                    <td>
                        <div style="font-weight:500;">{{ $p->nom }}</div>
                        @if($p->code_barre)<div style="font-size:11px;color:#64748b;">{{ $p->code_barre }}</div>@endif
                    </td>
                    <td>{{ $p->famille?->label ?? '-' }}</td>
                    <td>{{ $p->unite?->code ?? '-' }}</td>
                    <td>{{ number_format($p->prix_achat_ht, 3, ',', ' ') }}</td>
                    <td>{{ number_format($p->prix_vente_ht, 3, ',', ' ') }}</td>
                    <td>
                        <span class="badge-pill {{ $p->marge >= 20 ? 'badge-success' : ($p->marge >= 10 ? 'badge-warning' : 'badge-danger') }}">
                            {{ number_format($p->marge, 1) }}%
                        </span>
                    </td>
                    <td>
                        <span class="badge-pill {{ $p->qte_stock <= 0 ? 'badge-danger' : ($p->qte_stock <= 5 ? 'badge-warning' : 'badge-success') }}">
                            {{ number_format($p->qte_stock, 0) }}
                        </span>
                    </td>
                    <td>
                        <span class="badge-pill {{ $p->actif ? 'badge-success' : 'badge-danger' }}">
                            {{ $p->actif ? 'Actif' : 'Inactif' }}
                        </span>
                    </td>
                    <td>
                        <div class="table-actions">
                            <a href="{{ route('produits.show', $p) }}" class="action-btn" title="Consulter"><i class="fas fa-eye"></i></a>
                            <a href="{{ route('produits.edit', $p) }}" class="action-btn" title="Modifier"><i class="fas fa-pen"></i></a>
                            <form method="POST" action="{{ route('produits.destroy', $p) }}" onsubmit="return confirm('Supprimer ce produit ?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-btn danger" title="Supprimer"><i class="fas fa-trash"></i></button>
                            </form>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="11" class="empty-state">Aucun produit trouvé</td></tr>
            @endforelse
            </tbody>
        </table>
    </div>
    @if($produits->hasPages())
        <div style="padding:12px 16px;border-top:1px solid var(--border);">{{ $produits->links() }}</div>
    @endif
</div>

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

@push('scripts')
<script>
function produitIndexFilter() {
    return {
        familleId: '{{ request('famille_id') }}',
        catId:     '{{ request('categorie_id') }}',
        allCats:   {!! json_encode($categories->map(fn($c) => ['id' => $c->id, 'label' => $c->label, 'famille_id' => $c->famille_id])->values()) !!},
        get filteredCats() {
            if (!this.familleId) return this.allCats;
            return this.allCats.filter(c => c.famille_id == this.familleId);
        },
        onFamilleChange() {
            const still = this.filteredCats.find(c => c.id == this.catId);
            if (!still) this.catId = '';
        },
    };
}

function produitImportData() {
    return {
        showImport: false,
        preview: null,

        openModal() {
            this.showImport = true;
            this.preview = null;
            const f = document.getElementById('importFile');
            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;
                // Strip UTF-8 BOM
                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]);
                // Find index of "nom" column (strip * and spaces)
                const nomIdx = (() => {
                    const i = headers.findIndex(h => h.replace(/\*/g,'').trim().toLowerCase() === 'nom');
                    return i >= 0 ? i : 2;
                })();

                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