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

@section('content')

@php
    $aTypes    = ['' => 'Tous', 'demande_achat' => 'D. Achat', 'commande_achat' => 'Commande', 'br' => 'Bon Réc.', 'facture_achat' => 'Facture', 'avoir_achat' => 'Avoir'];
    $tabIcons  = ['' => 'fa-th-list', 'demande_achat' => 'fa-file-alt', 'commande_achat' => 'fa-shopping-basket', 'br' => 'fa-boxes', 'facture_achat' => 'fa-file-invoice', 'avoir_achat' => 'fa-undo-alt'];
    $activeTab = request('type', '');
    $tabBase   = request()->except(['type', 'page']);
    $achatColors = ['demande_achat'=>'btn-secondary','commande_achat'=>'btn-primary','br'=>'btn-success','facture_achat'=>'btn-warning'];
    $achatLabels = ['demande_achat'=>'D. Achat','commande_achat'=>'Commande','br'=>'Bon Réc.','facture_achat'=>'Facture'];

    // Pre-compute JS data — @json() cannot span multiple lines in Blade
    $amFournisseurs  = $fournisseurs->map(fn($f) => ['id' => $f->id, 'nom' => $f->nom])->values();
    $amProduits      = $produits->map(fn($p) => ['id' => $p->id, 'nom' => $p->nom, 'code_article' => $p->code_article, 'prix_achat_ht' => (float) $p->prix_achat_ht, 'tva_id' => (string) ($p->tva_achat_id ?? '')])->values();
    $amTvaList       = $tvaList->map(fn($t) => ['id' => $t->id, 'taux' => (float) $t->taux])->values();
    $amChantiers     = $chantiers->map(fn($c) => ['id' => $c->id, 'nom' => $c->nom])->values();
    $amEmplacements  = $emplacements->map(fn($e) => ['id' => $e->id, 'label' => $e->label, 'children' => $e->enfants->map(fn($c) => ['id' => $c->id, 'label' => $c->label])->values()])->values();
@endphp

{{-- ── Page data injected once for Alpine ── --}}
<script>
const AM_DATA = {
    csrf:         '{{ csrf_token() }}',
    fournisseurs: @json($amFournisseurs),
    produits:     @json($amProduits),
    tvaList:      @json($amTvaList),
    chantiers:    @json($amChantiers),
    emplacements: @json($amEmplacements),
};
</script>

{{-- ── Page header ── --}}
<div class="page-header">
    <div>
        <h1 class="page-title"><i class="fas fa-cart-shopping" style="color:var(--warning)"></i> Documents d'achat</h1>
        <p class="page-subtitle">{{ $docs->total() }} document(s){{ $activeTab ? ' — ' . ($aTypes[$activeTab] ?? $activeTab) : '' }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('achat.export', array_merge(request()->query(), [])) }}" class="btn btn-info btn-sm">
            <i class="fas fa-download"></i> CSV
        </a>
        @foreach($achatLabels as $t => $l)
            <button type="button" onclick="window.achatModal && window.achatModal.open('{{ $t }}')"
                    class="btn btn-sm {{ $achatColors[$t] }}">
                <i class="fas fa-plus"></i> {{ $l }}
            </button>
        @endforeach
    </div>
</div>

{{-- ── Type tabs (pill Q-ACHAT) ── --}}
<div class="doc-type-tabs">
    @foreach($aTypes as $t => $l)
        @php
            $isActive = $activeTab === $t;
            $href     = $t ? route('achat.index', array_merge($tabBase, ['type' => $t])) : ($tabBase ? route('achat.index', $tabBase) : route('achat.index'));
            $cnt      = $t ? ($typeCounts[$t] ?? 0) : $typeCounts->sum();
        @endphp
        <a href="{{ $href }}" class="doc-type-tab Q-ACHAT {{ $isActive ? 'active' : '' }}" style="text-decoration:none;">
            <i class="fas {{ $tabIcons[$t] }}"></i> {{ $l }}
            <span class="badge-pill {{ $isActive ? 'badge-warning' : 'badge-muted' }}" style="margin-left:5px;">{{ $cnt }}</span>
        </a>
    @endforeach
</div>

{{-- ── Filters ── --}}
<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;">
        @if($activeTab)<input type="hidden" name="type" value="{{ $activeTab }}">@endif
        <select name="statut" class="form-control" style="max-width:130px;">
            <option value="">Tous statuts</option>
            @foreach(['brouillon'=>'Brouillon','confirme'=>'Confirmé','recu'=>'Reçu','annule'=>'Annulé'] as $s=>$sl)
                <option value="{{ $s }}" {{ request('statut')===$s?'selected':'' }}>{{ $sl }}</option>
            @endforeach
        </select>
        <input type="text" name="search" value="{{ request('search') }}" class="form-control" placeholder="N° ou fournisseur..." style="max-width:200px;">
        <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control" style="max-width:140px;" title="Date début">
        <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control" style="max-width:140px;" title="Date fin">
        <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> Filtrer</button>
        <a href="{{ $activeTab ? route('achat.index', ['type' => $activeTab]) : route('achat.index') }}" class="btn btn-secondary"><i class="fas fa-times"></i></a>
    </form>
</div></div>

{{-- ── Table ── --}}
<div class="card"><div class="table-wrap"><table class="table">
    <thead><tr><th>Numéro</th><th>Type</th><th>Fournisseur</th><th>Date</th><th>Total TTC</th><th>Statut</th><th>Actions</th></tr></thead>
    <tbody>
    @forelse($docs as $doc)
        <tr>
            <td><a href="{{ route('achat.show', $doc) }}" style="color:var(--primary);font-weight:500;">{{ $doc->numero }}</a></td>
            <td><span class="badge-pill badge-info">{{ $doc->type_libelle }}</span></td>
            <td>{{ $doc->fournisseur?->nom ?? '-' }}</td>
            <td>{{ $doc->date->format('d/m/Y') }}</td>
            <td>{{ number_format($doc->total_ttc,3,',',' ') }}</td>
            <td><span class="badge-pill {{ $doc->statut==='annule'?'badge-danger':($doc->statut==='recu'?'badge-success':'badge-info') }}">{{ ucfirst($doc->statut) }}</span></td>
            <td>
                <div class="table-actions">
                    <a href="{{ route('achat.show', $doc) }}" class="action-btn" title="Consulter"><i class="fas fa-eye"></i></a>
                    @if($doc->statut !== 'annule')
                        <button type="button" class="action-btn" title="Modifier"
                                @click.prevent="window.achatModal && window.achatModal.openEdit({{ $doc->id }})">
                            <i class="fas fa-pen"></i>
                        </button>
                    @endif
                    <a href="{{ route('achat.pdf', $doc) }}" class="action-btn" title="Imprimer PDF" target="_blank"><i class="fas fa-file-pdf"></i></a>
                    @php
                        $achatRowAllowed = ['demande_achat'=>['commande_achat'=>'Commande Achat','br'=>'Bon de Réception','facture_achat'=>'Facture Achat'],'commande_achat'=>['br'=>'Bon de Réception','facture_achat'=>'Facture Achat'],'br'=>['facture_achat'=>'Facture Achat'],'facture_achat'=>['avoir_achat'=>'Avoir Achat']];
                        $rowCibles = !$doc->converted ? ($achatRowAllowed[$doc->type] ?? []) : [];
                    @endphp
                    @if(count($rowCibles) > 0)
                        <button type="button" class="action-btn" title="Convertir"
                            @click="$dispatch('open-achat-convert', { url: '{{ route('achat.convertir', $doc) }}', numero: '{{ $doc->numero }}', cibles: {{ json_encode($rowCibles) }}, firstTarget: '{{ array_key_first($rowCibles) }}' })">
                            <i class="fas fa-exchange-alt"></i>
                        </button>
                    @endif
                    @if($doc->type === 'commande_achat' && !in_array($doc->statut, ['annule', 'recu']))
                        <form method="POST" action="{{ route('achat.destroy', $doc) }}" onsubmit="return confirm('Annuler cette commande achat ?')">@csrf @method('DELETE')
                            <button type="submit" class="action-btn danger" title="Annuler"><i class="fas fa-ban"></i></button>
                        </form>
                    @endif
                </div>
            </td>
        </tr>
    @empty
        <tr><td colspan="7" class="empty-state">Aucun document</td></tr>
    @endforelse
    </tbody>
</table></div>
@if($docs->hasPages()) <div style="padding:12px 16px;border-top:1px solid var(--border);">{{ $docs->links() }}</div> @endif
</div>

{{-- ═══════════════════════════════════════════════════════
     MODAL ACHAT — création + modification (Alpine inline)
     ═══════════════════════════════════════════════════════ --}}
<div id="amWrap" x-data="achatMState()" x-init="init()">

    {{-- Overlay --}}
    <div class="modal-overlay" :class="{ open: show }" @click="close()"></div>

    {{-- Modal --}}
    <div class="modal modal-xl" :class="{ open: show }" style="max-height:92vh;">

        {{-- ── Header ── --}}
        <div class="modal-header" style="flex-direction:column;align-items:stretch;gap:10px;padding-bottom:12px;">
            <div style="display:flex;align-items:center;justify-content:space-between;">
                <h3 style="display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;">
                    <i class="fas fa-cart-shopping" style="color:#f59e0b;"></i>
                    <span x-text="modalTitle()"></span>
                </h3>
                <button @click="close()"
                        style="background:none;border:none;font-size:18px;color:var(--text-muted);
                               width:32px;height:32px;border-radius:6px;display:flex;align-items:center;
                               justify-content:center;cursor:pointer;transition:all .15s;"
                        onmouseover="this.style.background='#fee2e2';this.style.color='#ef4444'"
                        onmouseout="this.style.background='none';this.style.color='var(--text-muted)'">
                    <i class="fas fa-xmark"></i>
                </button>
            </div>

            {{-- Doc-type tabs (hidden in edit mode — type is fixed) --}}
            <div class="doc-type-tabs" style="margin:0;" x-show="!isEdit">
                <button type="button" class="doc-type-tab Q-ACHAT" :class="{ active: type === 'demande_achat' }" @click="setType('demande_achat')">
                    <i class="fas fa-file-alt"></i> D. Achat
                </button>
                <button type="button" class="doc-type-tab Q-ACHAT" :class="{ active: type === 'commande_achat' }" @click="setType('commande_achat')">
                    <i class="fas fa-shopping-basket"></i> Commande
                </button>
                <button type="button" class="doc-type-tab Q-ACHAT" :class="{ active: type === 'br' }" @click="setType('br')">
                    <i class="fas fa-boxes"></i> Bon Réc.
                </button>
                <button type="button" class="doc-type-tab Q-ACHAT" :class="{ active: type === 'facture_achat' }" @click="setType('facture_achat')">
                    <i class="fas fa-file-invoice"></i> Facture
                </button>
            </div>
        </div>

        {{-- ── Body ── --}}
        <div class="modal-body" style="overflow-y:auto;">

            {{-- Loading spinner --}}
            <div x-show="loading" style="text-align:center;padding:60px;color:#94a3b8;">
                <i class="fas fa-spinner fa-spin fa-2x"></i>
            </div>

            <div x-show="!loading">

                {{-- Error alert --}}
                <div x-show="errMsg" class="alert alert-danger" style="margin-bottom:16px;">
                    <i class="fas fa-exclamation-circle"></i>
                    <span x-text="errMsg"></span>
                </div>

                {{-- ── En-tête du document ── --}}
                <div class="form-grid form-grid-2" style="margin-bottom:16px;">
                    <div class="form-group">
                        <label class="form-label required">Fournisseur</label>
                        <select class="form-control" x-model="fournisseur_id">
                            <option value="">-- Choisir --</option>
                            <template x-for="f in fournisseurs" :key="f.id">
                                <option :value="String(f.id)" x-text="f.nom"></option>
                            </template>
                        </select>
                        <span class="form-hint" style="color:var(--danger);" x-show="errors.fournisseur_id" x-text="(errors.fournisseur_id||[])[0]"></span>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Date</label>
                        <input type="date" class="form-control" x-model="date">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Statut</label>
                        <select class="form-control" x-model="statut">
                            <option value="brouillon">Brouillon</option>
                            <option value="confirme">Confirmé</option>
                            <option value="recu">Reçu</option>
                            <option value="annule">Annulé</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Réf. doc. fournisseur</label>
                        <input type="text" class="form-control" x-model="ref_doc_fou" placeholder="Référence externe...">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Chantier</label>
                        <select class="form-control" x-model="chantier_id">
                            <option value="">-- Aucun --</option>
                            <template x-for="c in chantiers" :key="c.id">
                                <option :value="String(c.id)" x-text="c.nom"></option>
                            </template>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Emplacement de réception</label>
                        <select class="form-control" x-model="empParentId" @change="empSousId = ''">
                            <option value="">-- Aucun --</option>
                            <template x-for="e in emplacements" :key="e.id">
                                <option :value="String(e.id)" x-text="e.label"></option>
                            </template>
                        </select>
                    </div>
                    <div class="form-group" x-show="empEnfants.length > 0" x-cloak>
                        <label class="form-label">Sous-emplacement</label>
                        <select class="form-control" x-model="empSousId">
                            <option value="">-- Emplacement principal --</option>
                            <template x-for="e in empEnfants" :key="e.id">
                                <option :value="String(e.id)" x-text="e.label"></option>
                            </template>
                        </select>
                    </div>
                </div>

                {{-- ── Lignes articles ── --}}
                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;">
                    <strong style="font-size:14px;">Articles</strong>
                    <button type="button" class="btn btn-sm btn-primary" @click="addLigne()">
                        <i class="fas fa-plus"></i> Ligne
                    </button>
                </div>
                <div x-show="errors.lignes" class="alert alert-danger" style="padding:8px 12px;margin-bottom:8px;font-size:12px;">
                    <span x-text="(errors.lignes||[])[0]"></span>
                </div>
                <div class="table-wrap" style="margin-bottom:16px;">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Désignation</th>
                                <th>Qté</th>
                                <th>PU HT</th>
                                <th>Rem%</th>
                                <th>TVA</th>
                                <th>Total HT</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            <template x-for="(ligne, i) in lignes" :key="i">
                                <tr>
                                    <td x-text="i + 1" style="color:var(--text-muted);font-size:12px;"></td>
                                    <td style="position:relative;min-width:220px;">
                                        <input type="text"
                                               class="form-control form-control-sm"
                                               x-model="ligne.designation"
                                               @input="onDesignationInput(i)"
                                               @keydown.arrow-down.prevent="navigateSuggestion(i, 1)"
                                               @keydown.arrow-up.prevent="navigateSuggestion(i, -1)"
                                               @keydown.enter.prevent="selectSuggestion(i)"
                                               @keydown.escape="closeSuggestions(i)"
                                               @blur="closeSuggestionsDelayed(i)"
                                               autocomplete="off"
                                               required
                                               placeholder="Tapez pour rechercher...">
                                        <div x-show="ligne.showSuggestions && ligne.suggestions.length > 0"
                                             x-cloak class="ac-dropdown">
                                            <template x-for="(s, si) in ligne.suggestions" :key="s.id">
                                                <div class="ac-item"
                                                     :class="{ 'ac-item-active': ligne.suggestionIndex === si }"
                                                     @mousedown.prevent="pickProduct(i, s)">
                                                    <span class="ac-item-nom" x-text="s.nom"></span>
                                                    <span class="ac-item-code" x-text="s.code_article"></span>
                                                </div>
                                            </template>
                                        </div>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control form-control-sm"
                                               x-model="ligne.qte" @input="calcLigne(i)"
                                               step="0.001" style="width:80px;">
                                    </td>
                                    <td>
                                        <input type="number" class="form-control form-control-sm"
                                               x-model="ligne.prix_unit_ht" @input="calcLigne(i)"
                                               step="0.001" style="width:100px;">
                                    </td>
                                    <td>
                                        <input type="number" class="form-control form-control-sm"
                                               x-model="ligne.remise" @input="calcLigne(i)"
                                               step="0.01" style="width:70px;">
                                    </td>
                                    <td>
                                        <select class="form-control form-control-sm"
                                                x-model="ligne.tva_id" @change="calcLigne(i)"
                                                style="width:90px;">
                                            <option value="">0%</option>
                                            <template x-for="t in tvaList" :key="t.id">
                                                <option :value="String(t.id)" x-text="t.taux + '%'"></option>
                                            </template>
                                        </select>
                                    </td>
                                    <td>
                                        <strong x-text="fmtNum(ligne.total_ht)"></strong>
                                    </td>
                                    <td>
                                        <button type="button" @click="removeLigne(i)"
                                                style="color:#ef4444;background:none;border:none;cursor:pointer;padding:4px;">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>

                {{-- ── Notes + Totaux ── --}}
                <div style="display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start;">
                    <div class="form-group">
                        <label class="form-label">Notes</label>
                        <textarea class="form-control" rows="3" x-model="notes"></textarea>
                    </div>
                    <div style="background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:16px;">
                        <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;">
                            <span>Total HT</span><strong x-text="fmtNum(totalHt)"></strong>
                        </div>
                        <div style="display:flex;justify-content:space-between;margin-bottom:8px;font-size:13px;">
                            <span>TVA</span><strong x-text="fmtNum(totalTva)"></strong>
                        </div>
                        <hr style="border:none;border-top:2px solid var(--border);margin:10px 0;">
                        <div style="display:flex;justify-content:space-between;font-size:16px;font-weight:700;">
                            <span>Total TTC</span>
                            <span style="color:#f59e0b;" x-text="fmtNum(totalTtc)"></span>
                        </div>
                    </div>
                </div>

            </div>{{-- /!loading --}}
        </div>{{-- /modal-body --}}

        {{-- ── Footer ── --}}
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="close()">
                <i class="fas fa-times"></i> Annuler
            </button>
            <button type="button" class="btn btn-success" @click="submitForm(false)" :disabled="saving || loading">
                <i class="fas" :class="saving ? 'fa-spinner fa-spin' : 'fa-save'"></i>
                <span x-text="saving ? 'Enregistrement...' : 'Enregistrer'"></span>
            </button>
            <button type="button" class="btn btn-primary" @click="submitForm(true)" :disabled="saving || loading">
                <i class="fas fa-print"></i> Enreg. &amp; Imprimer
            </button>
        </div>

    </div>{{-- /modal --}}
</div>{{-- /amWrap --}}

@push('scripts')
<script>
function achatMState() {
    const tvaMap = () => Object.fromEntries(AM_DATA.tvaList.map(t => [String(t.id), t.taux]));
    const today  = () => new Date().toISOString().slice(0, 10);
    const newLigne = () => ({
        produit_id: '', designation: '', qte: 1,
        prix_unit_ht: 0, remise: 0, tva_id: '',
        total_ht: 0, total_ttc: 0,
        suggestions: [], suggestionIndex: -1, showSuggestions: false,
    });

    return {
        /* ── state ── */
        show:    false,
        loading: false,
        saving:  false,
        isEdit:  false,
        editId:  null,

        /* ── form fields ── */
        type:         'demande_achat',
        fournisseur_id: '',
        date:         today(),
        statut:       'brouillon',
        ref_doc_fou:  '',
        chantier_id:  '',
        empParentId:  '',
        empSousId:    '',
        notes:        '',
        lignes:       [],

        /* ── totaux ── */
        totalHt: 0, totalTva: 0, totalTtc: 0,

        /* ── errors ── */
        errors: {}, errMsg: '',

        /* ── refs ── */
        get fournisseurs() { return AM_DATA.fournisseurs; },
        get produits()     { return AM_DATA.produits; },
        get tvaList()      { return AM_DATA.tvaList; },
        get chantiers()    { return AM_DATA.chantiers; },
        get emplacements() { return AM_DATA.emplacements; },
        get empEnfants() {
            const p = AM_DATA.emplacements.find(e => String(e.id) === String(this.empParentId));
            return p ? (p.children || []) : [];
        },
        get finalEmpId() { return this.empSousId || this.empParentId; },

        /* ── helpers ── */
        modalTitle() {
            const labels = {
                demande_achat:  "Demande d'Achat",
                commande_achat: 'Commande Achat',
                br:             'Bon de Réception',
                facture_achat:  'Facture Achat',
                avoir_achat:    'Avoir Achat',
            };
            return (this.isEdit ? 'Modifier — ' : 'Nouveau — ') + (labels[this.type] || this.type);
        },
        fmtNum(n) {
            return parseFloat(n || 0).toLocaleString('fr-TN', { minimumFractionDigits: 3, maximumFractionDigits: 3 });
        },

        /* ── open / close ── */
        open(type) {
            this.isEdit = false;
            this.editId = null;
            this.type   = type || 'demande_achat';
            this._reset();
            this.show = true;
            document.body.style.overflow = 'hidden';
        },
        async openEdit(id) {
            this.isEdit  = true;
            this.editId  = id;
            this.loading = true;
            this.show    = true;
            this.errMsg  = '';
            this.errors  = {};
            document.body.style.overflow = 'hidden';
            try {
                const r   = await fetch(`/achat/${id}/json-data`, { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
                const doc = await r.json();
                this.type           = doc.type;
                this.fournisseur_id = String(doc.fournisseur_id || '');
                this.date           = doc.date;
                this.statut         = doc.statut;
                this.ref_doc_fou    = doc.ref_doc_fou || '';
                this.chantier_id    = String(doc.chantier_id || '');
                this.notes          = doc.notes || '';
                this._setEmplacement(doc.emplacement_id);
                this.lignes = (doc.lignes || []).map(l => ({
                    produit_id:   String(l.produit_id || ''),
                    designation:  l.designation || '',
                    qte:          parseFloat(l.qte) || 1,
                    prix_unit_ht: parseFloat(l.prix_unit_ht) || 0,
                    remise:       parseFloat(l.remise) || 0,
                    tva_id:       String(l.tva_id || ''),
                    total_ht:     parseFloat(l.total_ht) || 0,
                    total_ttc:    parseFloat(l.total_ttc) || 0,
                    suggestions: [], suggestionIndex: -1, showSuggestions: false,
                }));
                this.calcTotaux();
            } catch(e) {
                this.errMsg = 'Erreur lors du chargement du document.';
            } finally {
                this.loading = false;
            }
        },
        close() {
            this.show   = false;
            this.errors = {};
            this.errMsg = '';
            document.body.style.overflow = '';
        },
        setType(t) {
            if (!this.isEdit) { this.type = t; }
        },
        _reset() {
            this.fournisseur_id = '';
            this.date           = new Date().toISOString().slice(0, 10);
            this.statut         = 'brouillon';
            this.ref_doc_fou    = '';
            this.chantier_id    = '';
            this.empParentId    = '';
            this.empSousId      = '';
            this.notes          = '';
            this.lignes         = [newLigne()];
            this.totalHt        = 0;
            this.totalTva       = 0;
            this.totalTtc       = 0;
            this.errors         = {};
            this.errMsg         = '';
        },
        _setEmplacement(empId) {
            this.empParentId = '';
            this.empSousId   = '';
            if (!empId) return;
            const id = String(empId);
            for (const parent of AM_DATA.emplacements) {
                if (String(parent.id) === id) { this.empParentId = id; return; }
                const child = (parent.children || []).find(c => String(c.id) === id);
                if (child) { this.empParentId = String(parent.id); this.empSousId = id; return; }
            }
        },

        /* ── lignes ── */
        addLigne()      { this.lignes.push(newLigne()); },
        removeLigne(i)  { if (this.lignes.length > 1) { this.lignes.splice(i, 1); this.calcTotaux(); } },

        /* ── autocomplete ── */
        onDesignationInput(i) {
            const q = (this.lignes[i].designation || '').trim().toLowerCase();
            this.lignes[i].suggestionIndex = -1;
            if (q.length < 1) {
                this.lignes[i].suggestions    = [];
                this.lignes[i].showSuggestions = false;
                this.lignes[i].produit_id     = '';
                return;
            }
            this.lignes[i].suggestions    = AM_DATA.produits.filter(p =>
                p.nom.toLowerCase().includes(q) || p.code_article.toLowerCase().includes(q)
            ).slice(0, 8);
            this.lignes[i].showSuggestions = this.lignes[i].suggestions.length > 0;
        },
        pickProduct(i, p) {
            this.lignes[i].produit_id    = String(p.id);
            this.lignes[i].designation   = p.nom;
            this.lignes[i].prix_unit_ht  = p.prix_achat_ht;
            this.lignes[i].tva_id        = p.tva_id;
            this.lignes[i].suggestions   = [];
            this.lignes[i].showSuggestions = false;
            this.calcLigne(i);
        },
        navigateSuggestion(i, dir) {
            const len = this.lignes[i].suggestions.length;
            if (!len) return;
            this.lignes[i].suggestionIndex = (this.lignes[i].suggestionIndex + dir + len) % len;
        },
        selectSuggestion(i) {
            const idx = this.lignes[i].suggestionIndex;
            if (idx >= 0 && this.lignes[i].suggestions[idx]) this.pickProduct(i, this.lignes[i].suggestions[idx]);
        },
        closeSuggestions(i)        { this.lignes[i].suggestions = []; this.lignes[i].showSuggestions = false; },
        closeSuggestionsDelayed(i) { setTimeout(() => this.closeSuggestions(i), 150); },

        /* ── calculs ── */
        calcLigne(i) {
            const l     = this.lignes[i];
            const ht    = parseFloat(l.qte || 0) * parseFloat(l.prix_unit_ht || 0) * (1 - parseFloat(l.remise || 0) / 100);
            l.total_ht  = Math.round(ht * 1000) / 1000;
            const taux  = tvaMap()[String(l.tva_id)] || 0;
            l.total_ttc = Math.round(ht * (1 + taux / 100) * 1000) / 1000;
            this.calcTotaux();
        },
        calcTotaux() {
            this.totalHt  = this.lignes.reduce((s, l) => s + (parseFloat(l.total_ht)  || 0), 0);
            this.totalTtc = this.lignes.reduce((s, l) => s + (parseFloat(l.total_ttc) || 0), 0);
            this.totalTva = this.totalTtc - this.totalHt;
        },

        /* ── AJAX submit ── */
        async submitForm(andPrint = false) {
            this.saving = true;
            this.errors = {};
            this.errMsg = '';

            const fd = new FormData();
            fd.append('_token', AM_DATA.csrf);
            if (this.isEdit) fd.append('_method', 'PUT');
            fd.append('type',           this.type);
            fd.append('fournisseur_id', this.fournisseur_id);
            fd.append('date',           this.date);
            fd.append('statut',         this.statut);
            fd.append('ref_doc_fou',    this.ref_doc_fou);
            fd.append('chantier_id',    this.chantier_id);
            fd.append('emplacement_id', this.finalEmpId);
            fd.append('notes',          this.notes);
            this.lignes.forEach((l, i) => {
                fd.append(`lignes[${i}][produit_id]`,   l.produit_id  || '');
                fd.append(`lignes[${i}][designation]`,  l.designation);
                fd.append(`lignes[${i}][qte]`,          l.qte);
                fd.append(`lignes[${i}][prix_unit_ht]`, l.prix_unit_ht);
                fd.append(`lignes[${i}][remise]`,       l.remise || 0);
                fd.append(`lignes[${i}][tva_id]`,       l.tva_id || '');
            });

            const url = this.isEdit ? `/achat/${this.editId}` : '/achat';
            try {
                const r    = await fetch(url, {
                    method:  'POST',
                    body:    fd,
                    headers: { 'X-Requested-With': 'XMLHttpRequest', 'Accept': 'application/json' },
                });
                const data = await r.json();
                if (r.ok && data.success) {
                    this.close();
                    if (andPrint && data.id) window.open(`/achat/${data.id}/pdf`, '_blank');
                    window.location.reload();
                } else if (data.errors) {
                    this.errors = data.errors;
                    this.errMsg = data.message || 'Veuillez corriger les erreurs ci-dessous.';
                } else {
                    this.errMsg = data.message || 'Une erreur est survenue.';
                }
            } catch(e) {
                this.errMsg = 'Erreur de connexion au serveur.';
            } finally {
                this.saving = false;
            }
        },

        /* ── init ── */
        init() {
            window.achatModal = this;
            this.lignes = [newLigne()];
            document.addEventListener('keydown', e => { if (e.key === 'Escape' && this.show) this.close(); });
        },
    };
}
</script>

<style>
.ac-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 300;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
    max-height: 220px; overflow-y: auto; margin-top: 2px;
}
.ac-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 12px; cursor: pointer; font-size: 13px; gap: 8px;
}
.ac-item:hover, .ac-item-active { background: var(--primary-light); color: var(--primary); }
.ac-item-nom  { font-weight: 500; flex: 1; }
.ac-item-code { font-size: 11px; color: var(--text-muted); white-space: nowrap; font-family: monospace; }
</style>
@endpush

{{-- ═══════════════════════════════════════════════════════
     MODAL CONVERSION — partagé pour la liste achat
     ═══════════════════════════════════════════════════════ --}}
<div x-data="{
    show: false, url: '', numero: '', cibles: {}, convTarget: '',
    open(d) { this.url = d.url; this.numero = d.numero; this.cibles = d.cibles; this.convTarget = d.firstTarget; this.show = true; },
    close() { this.show = false; }
}" @open-achat-convert.window="open($event.detail)">
    <div class="modal-overlay" :class="{ open: show }" @click="close()"></div>
    <div class="modal modal-sm" :class="{ open: show }">
        <div class="modal-header">
            <h3><i class="fas fa-exchange-alt" style="color:var(--warning)"></i> Convertir <span x-text="numero"></span></h3>
            <button class="modal-close" @click="close()"><i class="fas fa-times"></i></button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">Convertir en :</label>
                <select class="form-control" x-model="convTarget">
                    <template x-for="[t, label] in Object.entries(cibles)" :key="t">
                        <option :value="t" x-text="label"></option>
                    </template>
                </select>
            </div>
            <p style="font-size:12px;color:#64748b;margin-top:8px;">Le document original sera marqué comme traité.</p>
        </div>
        <div class="modal-footer">
            <button type="button" @click="close()" class="btn btn-secondary">Annuler</button>
            <form method="POST" :action="url" style="display:inline;">
                @csrf
                <input type="hidden" name="target" x-bind:value="convTarget">
                <button type="submit" class="btn btn-warning"><i class="fas fa-arrow-right"></i> Convertir</button>
            </form>
        </div>
    </div>
</div>

@endsection