@extends('layouts.erp')
@section('title', 'Nouveau document')
@section('page_title', 'Nouveau document commercial')
@section('content')
<form method="POST" action="{{ route('sales.store') }}" id="sale-form">
    @csrf
    <div class="sale-layout">
        <div class="card">
            <div class="card-body">
                <div class="form-grid">
                    <div class="form-group">
                        <label>Type de document *</label>
                        <select name="document_type" class="form-control" required>
                            @foreach(['devis','commande','facture','livraison','recu','avoir'] as $t)
                                <option value="{{ $t }}" @selected(old('document_type', $document_type ?? 'facture')===$t)>{{ $t }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Client</label>
                        <select name="client_id" id="client_id" class="form-control" onchange="toggleNewClient()">
                            <option value="">— Comptoir —</option>
                            <option value="new" @selected(old('client_id')==='new')>+ Nouveau client</option>
                            @foreach($clients as $c)<option value="{{ $c->id }}" @selected(old('client_id', request('client_id'))==$c->id)>{{ $c->name }}</option>@endforeach
                        </select>
                    </div>
                    <x-boutique-field :boutiques="$boutiques" :value="session('scope_boutique_id')" />
                    <div class="form-group"><label>Date *</label><input type="date" name="sale_date" class="form-control" value="{{ old('sale_date', date('Y-m-d')) }}" required></div>
                </div>
                <div id="new-client" class="form-grid" style="margin-top:12px;{{ old('client_id')==='new' ? '' : 'display:none' }}">
                    <div class="form-group"><label>Nom du nouveau client *</label><input type="text" name="new_client_name" id="new_client_name" class="form-control" value="{{ old('new_client_name') }}" placeholder="Nom et prénom ou raison sociale"></div>
                    <div class="form-group"><label>Téléphone</label><input type="text" name="new_client_phone" class="form-control" value="{{ old('new_client_phone') }}" placeholder="07 …"></div>
                    <div class="form-group"><label>Ville</label><input type="text" name="new_client_city" class="form-control" value="{{ old('new_client_city') }}"></div>
                </div>
                <h3 style="margin:16px 0 8px;">Lignes</h3>
                <table class="data" id="sale-lines">
                    <thead><tr><th>Article</th><th>Description *</th><th>Qté</th><th>P.U.</th><th></th></tr></thead>
                    <tbody>
                    @for($i=0;$i<3;$i++)
                    <tr>
                        <td>
                            <select name="product_id[]" class="form-control" onchange="fillDesc(this)">
                                <option value="">—</option>
                                @foreach($products as $p)
                                    <option value="{{ $p->id }}" data-name="{{ $p->name }}" data-price="{{ $p->sale_price }}" @selected($i===0 && (string) request('product_id')===(string) $p->id)>{{ $p->reference }} — {{ $p->name }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td><input type="text" name="description[]" class="form-control" {{ $i===0?'required':'' }}></td>
                        <td><input type="number" name="quantity[]" class="form-control" value="1" min="1" oninput="recalc()"></td>
                        <td><input type="number" step="0.01" name="unit_price[]" class="form-control" value="0" min="0" oninput="recalc()"></td>
                        <td><button type="button" class="btn btn-outline btn-sm" onclick="removeSaleLine(this)">Retirer</button></td>
                    </tr>
                    @endfor
                    </tbody>
                </table>
                <button type="button" class="btn btn-outline btn-sm" style="margin-top:8px;" onclick="addSaleLine()">+ Ajouter une ligne</button>
                <details class="more">
                    <summary>Plus de détails</summary>
                    <div class="form-grid">
                        <div class="form-group">
                            <label>Statut *</label>
                            <select name="status" class="form-control" required>
                                @foreach(['brouillon','valide','paye','partiel','annule'] as $s)
                                    <option value="{{ $s }}" @selected(old('status','valide')===$s)>{{ $s }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group"><label>Mode de paiement</label><input type="text" name="payment_method" class="form-control" value="{{ old('payment_method') }}" placeholder="espèces, mobile money…"></div>
                        <div class="form-group full"><label>Notes</label><textarea name="notes" class="form-control" rows="2">{{ old('notes') }}</textarea></div>
                    </div>
                </details>
            </div>
        </div>
        <aside class="card sale-recap">
            <div class="card-header">Récapitulatif</div>
            <div class="card-body">
                <div class="recap">
                    <div class="row"><span>Sous-total</span><b id="recap-sub">0 F</b></div>
                    <div class="row"><span>Payé</span><b id="recap-paid">0 F</b></div>
                    <div class="total"><span>Reste</span><span id="recap-due">0 F</span></div>
                </div>
                <div class="form-group" style="margin-top:14px">
                    <label>Montant payé</label>
                    <input type="number" step="0.01" name="paid_amount" id="paid_amount" class="form-control" value="{{ old('paid_amount', 0) }}" oninput="recalc()">
                </div>
                <button type="submit" class="btn btn-primary" style="width:100%;margin-top:8px">Enregistrer</button>
            </div>
        </aside>
    </div>
</form>
<script>
function money(n){ return new Intl.NumberFormat('fr-FR').format(Math.round(n||0))+' F'; }
function fillDesc(sel){
    const opt=sel.options[sel.selectedIndex];
    const row=sel.closest('tr');
    if(opt.dataset.name){ row.querySelector('[name="description[]"]').value=opt.dataset.name; }
    if(opt.dataset.price){ row.querySelector('[name="unit_price[]"]').value=opt.dataset.price; }
    recalc();
}
function recalc(){
    let sub=0;
    document.querySelectorAll('#sale-lines tbody tr').forEach(row=>{
        const q=parseFloat(row.querySelector('[name="quantity[]"]').value)||0;
        const p=parseFloat(row.querySelector('[name="unit_price[]"]').value)||0;
        const desc=(row.querySelector('[name="description[]"]').value||'').trim();
        if(desc) sub += q*p;
    });
    const paid=parseFloat(document.getElementById('paid_amount').value)||0;
    document.getElementById('recap-sub').textContent=money(sub);
    document.getElementById('recap-paid').textContent=money(paid);
    document.getElementById('recap-due').textContent=money(Math.max(0, sub-paid));
}
function toggleNewClient(){
    const sel=document.getElementById('client_id');
    const box=document.getElementById('new-client');
    const name=document.getElementById('new_client_name');
    const open=sel && sel.value==='new';
    box.style.display=open?'grid':'none';
    name.required=open;
}
document.querySelectorAll('#sale-lines select').forEach(sel => { if (sel.value) fillDesc(sel); });
toggleNewClient();
recalc();
function addSaleLine(){
    const tbody=document.querySelector('#sale-lines tbody');
    const row=tbody.rows[0].cloneNode(true);
    row.querySelectorAll('input').forEach(i=>{ if(i.name==='quantity[]') i.value=1; else if(i.name==='unit_price[]') i.value=0; else i.value=''; i.required=false; i.oninput=recalc; });
    const sel=row.querySelector('select');
    sel.selectedIndex=0;
    sel.onchange=function(){ fillDesc(this); };
    tbody.appendChild(row);
    recalc();
}
function removeSaleLine(btn){
    const tbody=document.querySelector('#sale-lines tbody');
    const row=btn.closest('tr');
    if(tbody.rows.length<=1){
        row.querySelectorAll('input').forEach(i=>{ if(i.name==='quantity[]') i.value=1; else if(i.name==='unit_price[]') i.value=0; else i.value=''; });
        row.querySelector('select').selectedIndex=0;
    } else {
        row.remove();
    }
    const first=tbody.querySelector('[name="description[]"]');
    if(first) first.required=true;
    recalc();
}
</script>
@endsection