@extends('layouts.app')
@section('title', ($doc ? 'Modifier' : 'Nouveau') . ' ' . ($doc?->type_libelle ?? ucfirst(str_replace('_',' ',$type))))
@section('breadcrumb', 'Achat / Formulaire')
@section('content')
@if(!request()->boolean('bare'))
<div class="page-header">
    <h1 class="page-title"><i class="fas fa-cart-shopping" style="color:var(--warning)"></i> {{ $doc ? 'Modifier : '.$doc->numero : 'Nouveau '.($doc?->type_libelle ?? $type) }}</h1>
    <a href="{{ route('achat.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Retour</a>
</div>
@endif

@php
    $produitsJson = $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'       => $p->tva_achat_id ? (string) $p->tva_achat_id : '',
    ]);
@endphp

<form method="POST" action="{{ $doc ? route('achat.update', $doc) : route('achat.store') }}"
      x-data="achatForm({{ json_encode($doc?->lignes ?? []) }}, {{ json_encode($tvaList) }}, {{ $produitsJson->toJson() }})">
    @csrf @if($doc) @method('PUT') @endif
    @if($errors->any())<div class="alert alert-danger">@foreach($errors->all() as $e)<div>{{ $e }}</div>@endforeach</div>@endif
    <input type="hidden" name="type" value="{{ $doc?->type ?? $type }}">

    <div class="grid-sidebar" style="margin-bottom:20px;">
        <div class="card"><div class="card-header"><h3 class="card-title">En-tête</h3></div><div class="card-body">
            <div class="form-grid form-grid-2">
                <div class="form-group"><label class="form-label">Fournisseur *</label>
                    <select name="fournisseur_id" class="form-control" required>
                        <option value="">-- Choisir --</option>
                        @foreach($fournisseurs as $f)<option value="{{ $f->id }}" {{ old('fournisseur_id',$doc?->fournisseur_id)==$f->id?'selected':'' }}>{{ $f->nom }}</option>@endforeach
                    </select>
                </div>
                <div class="form-group"><label class="form-label">Date *</label><input type="date" name="date" class="form-control" value="{{ old('date',$doc?->date?->format('Y-m-d')??date('Y-m-d')) }}" required></div>
                <div class="form-group"><label class="form-label">Réf. doc. fournisseur</label><input type="text" name="ref_doc_fou" class="form-control" value="{{ old('ref_doc_fou',$doc?->ref_doc_fou) }}"></div>
                <div class="form-group"><label class="form-label">Statut</label>
                    <select name="statut" class="form-control">
                        @foreach(['brouillon'=>'Brouillon','confirme'=>'Confirmé','recu'=>'Reçu','annule'=>'Annulé'] as $s=>$l)<option value="{{ $s }}" {{ old('statut',$doc?->statut??'brouillon')===$s?'selected':'' }}>{{ $l }}</option>@endforeach
                    </select>
                </div>
                <div class="form-group"><label class="form-label">Chantier</label>
                    <select name="chantier_id" class="form-control"><option value="">-- Aucun --</option>
                        @foreach($chantiers as $ch)<option value="{{ $ch->id }}" {{ old('chantier_id',$doc?->chantier_id)==$ch->id?'selected':'' }}>{{ $ch->nom }}</option>@endforeach
                    </select>
                </div>
            </div>
            {{-- Emplacement de réception --}}
            @php
                $empInitial = old('emplacement_id', $doc?->emplacement_id ?? '');
                $allEmps = $emplacements->flatMap(fn($e) => collect([$e])->merge($e->enfants ?? collect()))
                    ->map(fn($e) => ['id' => $e->id, 'label' => $e->label, 'parent_id' => $e->parent_id]);
            @endphp
            <div x-data="empForm({{ $allEmps->toJson() }}, '{{ $empInitial }}')" class="form-grid form-grid-2" style="margin-top:10px;">
                <input type="hidden" name="emplacement_id" :value="finalId">
                <div class="form-group">
                    <label class="form-label">Emplacement de réception</label>
                    <select class="form-control" x-model="parentId" @change="sousId = ''">
                        <option value="">-- Aucun --</option>
                        <template x-for="e in parents" :key="e.id">
                            <option :value="String(e.id)" x-text="e.label"></option>
                        </template>
                    </select>
                </div>
                <div class="form-group" x-show="sousEmps.length > 0" x-cloak>
                    <label class="form-label">Sous-emplacement</label>
                    <select class="form-control" x-model="sousId">
                        <option value="">-- Emplacement principal --</option>
                        <template x-for="e in sousEmps" :key="e.id">
                            <option :value="String(e.id)" x-text="e.label"></option>
                        </template>
                    </select>
                </div>
            </div>
            <div class="form-group"><label class="form-label">Notes</label><textarea name="notes" class="form-control" rows="2">{{ old('notes',$doc?->notes) }}</textarea></div>
        </div></div>
        <div class="card"><div class="card-header"><h3 class="card-title">Totaux</h3></div><div class="card-body" style="font-size:13px;">
            <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;"><span>Total HT</span><strong x-text="formatNum(totalHt)"></strong></div>
            <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f1f5f9;"><span>TVA</span><strong x-text="formatNum(totalTva)"></strong></div>
            <div style="display:flex;justify-content:space-between;padding:12px 0;font-size:16px;font-weight:700;"><span>Total TTC</span><span style="color:var(--primary);" x-text="formatNum(totalTtc)"></span></div>
        </div></div>
    </div>

    <div class="card"><div class="card-header"><h3 class="card-title">Lignes</h3>
        <button type="button" class="btn btn-sm btn-primary" @click="addLigne()"><i class="fas fa-plus"></i> Ligne</button>
    </div><div class="table-wrap"><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"></td>
            <td style="position:relative;min-width:220px;">
                <input type="hidden" :name="'lignes['+i+'][produit_id]'" x-model="ligne.produit_id">
                <input type="text"
                       class="form-control form-control-sm"
                       :name="'lignes['+i+'][designation]'"
                       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" :name="'lignes['+i+'][qte]'" x-model="ligne.qte" @input="calcLigne(i)" step="0.001" style="width:80px;"></td>
            <td><input type="number" class="form-control form-control-sm" :name="'lignes['+i+'][prix_unit_ht]'" 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" :name="'lignes['+i+'][remise]'" x-model="ligne.remise" @input="calcLigne(i)" step="0.01" style="width:70px;"></td>
            <td><select class="form-control form-control-sm" :name="'lignes['+i+'][tva_id]'" x-model="ligne.tva_id" @change="calcLigne(i)" style="width:100px;">
                <option value="">0%</option>
                @foreach($tvaList as $t)<option value="{{ $t->id }}">{{ $t->taux }}%</option>@endforeach
            </select></td>
            <td><strong x-text="formatNum(ligne.total_ht)"></strong></td>
            <td><button type="button" @click="removeLigne(i)" style="color:#ef4444;background:none;border:none;cursor:pointer;"><i class="fas fa-trash"></i></button></td>
        </tr></template></tbody>
    </table></div></div>

    <div style="margin-top:20px;display:flex;gap:10px;">
        <button type="submit" class="btn btn-primary"><i class="fas fa-save"></i> {{ $doc ? 'Mettre à jour' : 'Créer' }}</button>
        @if(request()->boolean('bare'))
            <button type="button" class="btn btn-secondary"
                    onclick="try{window.parent.closeAchatModal();}catch(e){window.history.back();}">
                Annuler
            </button>
        @else
            <a href="{{ route('achat.index') }}" class="btn btn-secondary">Annuler</a>
        @endif
    </div>
</form>

<style>
.ac-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 200;
    background: var(--card-bg, #fff); 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, #eff6ff); 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>

@push('scripts')
<script>
function empForm(allEmps, initialId) {
    return {
        allEmps,
        parentId: '',
        sousId: '',
        get parents() { return this.allEmps.filter(e => !e.parent_id); },
        get sousEmps() { return this.allEmps.filter(e => String(e.parent_id) === String(this.parentId)); },
        get finalId() { return this.sousId || this.parentId; },
        init() {
            if (!initialId) return;
            const emp = this.allEmps.find(e => String(e.id) === String(initialId));
            if (!emp) return;
            if (emp.parent_id) {
                this.parentId = String(emp.parent_id);
                this.sousId   = String(emp.id);
            } else {
                this.parentId = String(emp.id);
            }
        },
    };
}

function achatForm(existingLignes, tvaList, produits) {
    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 {
        produits,
        lignes: existingLignes.length
            ? existingLignes.map(l => ({...l, total_ht: parseFloat(l.total_ht)||0,
                                         suggestions:[], suggestionIndex:-1, showSuggestions:false}))
            : [newLigne()],
        totalHt:0, totalTva:0, totalTtc:0,
        tvaMap: Object.fromEntries(tvaList.map(t => [String(t.id), parseFloat(t.taux)])),

        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 = this.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  = this.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;
        },
        formatNum(n) { return parseFloat(n||0).toLocaleString('fr-TN',{minimumFractionDigits:3,maximumFractionDigits:3}); },
        init() { this.lignes.forEach((_,i) => this.calcLigne(i)); }
    }
}
</script>
@endpush
@endsection