@extends('layouts.app')
@section('title', ($doc ? 'Modifier' : 'Nouveau') . ' ' . $typeLabel)
@section('breadcrumb', 'Vente / ' . ($doc ? 'Modifier' : 'Nouveau') . ' ' . $typeLabel)

@section('content')
<div class="page-header">
    <h1 class="page-title"><i class="fas fa-file-invoice" style="color:var(--success)"></i> {{ $doc ? 'Modifier : '.$doc->numero : 'Nouveau '.$typeLabel }}</h1>
    <a href="{{ route('vente.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-left"></i> Retour</a>
</div>

@php
    $produitsJson = $produits->map(fn($p) => [
        'id'           => $p->id,
        'nom'          => $p->nom,
        'code_article' => $p->code_article,
        'prix_vente_ht'=> (float) $p->prix_vente_ht,
        'tva_id'       => $p->tva_id ? (string) $p->tva_id : '',
    ]);
@endphp

<form method="POST" action="{{ $doc ? route('vente.update', $doc) : route('vente.store') }}"
      x-data="venteForm({{ 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">Client <span style="color:#ef4444">*</span></label>
                        <select name="client_id" class="form-control" required>
                            <option value="">-- Choisir un client --</option>
                            @foreach($clients as $c)
                                <option value="{{ $c->id }}" {{ old('client_id', $doc?->client_id) == $c->id ? 'selected' : '' }}>{{ $c->nom }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Date <span style="color:#ef4444">*</span></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">Date échéance</label>
                        <input type="date" name="date_echeance" class="form-control" value="{{ old('date_echeance', $doc?->date_echeance?->format('Y-m-d')) }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Statut</label>
                        <select name="statut" class="form-control">
                            @foreach(['brouillon'=>'Brouillon','confirme'=>'Confirmé','livre'=>'Livré','facture'=>'Facturé'] 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 class="form-group">
                        <label class="form-label">Remise globale (%)</label>
                        <input type="number" name="remise_globale" class="form-control" step="0.01" min="0" max="100" value="{{ old('remise_globale', $doc?->remise_globale ?? 0) }}">
                    </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 class="form-group">
                    <label style="display:flex;align-items:center;gap:8px;cursor:pointer;">
                        <input type="checkbox" name="timbre_fiscal" value="1" {{ old('timbre_fiscal', $doc?->timbre_fiscal) ? 'checked' : '' }}>
                        Appliquer timbre fiscal
                    </label>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h3 class="card-title">Totaux</h3></div>
            <div class="card-body">
                <div 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>Total 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>

    {{-- Lignes --}}
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Lignes de document</h3>
            <button type="button" class="btn btn-sm btn-primary" @click="addLigne()"><i class="fas fa-plus"></i> Ajouter ligne</button>
        </div>
        <div class="table-wrap">
            <table class="table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Désignation</th>
                        <th style="width:80px;">Qté</th>
                        <th style="width:110px;">PU HT</th>
                        <th style="width:70px;">Rem%</th>
                        <th style="width:100px;">TVA</th>
                        <th style="width:110px;">Total HT</th>
                        <th style="width:32px;"></th>
                    </tr>
                </thead>
                <tbody>
                <template x-for="(ligne, i) in lignes" :key="i">
                    <tr>
                        <td x-text="i+1" style="width:30px;"></td>

                        {{-- Désignation avec autocomplete produit --}}
                        <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" min="0" 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" min="0" 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" min="0" max="100" 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>
        <a href="{{ route('vente.index') }}" class="btn btn-secondary">Annuler</a>
    </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 venteForm(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_vente_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