@extends('layouts.app')
@section('title', $quote->exists ? 'Modifier devis' : 'Nouveau devis')
@section('heading', $quote->exists ? 'Modifier '.$quote->number : 'Nouveau devis')
@section('content')
@php
$services_json = $services->map(fn($s)=>['id'=>$s->id,'name'=>$s->name,'price'=>$s->fixed_price ?: $s->hourly_price,'vat'=>$s->vat_rate])->values();
$existing = $quote->exists ? $quote->lines->map(fn($l)=>['service_id'=>$l->service_id,'description'=>$l->description,'quantity'=>(float)$l->quantity,'unit_price'=>(float)$l->unit_price,'vat_rate'=>(float)$l->vat_rate,'is_option'=>(bool)$l->is_option])->values() : collect([['service_id'=>null,'description'=>'','quantity'=>1,'unit_price'=>0,'vat_rate'=>20,'is_option'=>false]]);
@endphp
<form method="POST" action="{{ $quote->exists ? route('quotes.update',$quote) : route('quotes.store') }}"
      x-data="quoteForm({{ Illuminate\Support\Js::from($services_json) }}, {{ Illuminate\Support\Js::from($existing) }}, {{ (float)($quote->discount_rate ?? 0) }})">
    @csrf @if($quote->exists)@method('PUT')@endif
    <div class="grid lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 space-y-6">
            <x-card title="En-tête">
                <div class="grid grid-cols-2 gap-3">
                    <div class="col-span-2" x-data="{ dest: '{{ $quote->prospect_id ? 'prospect' : 'client' }}' }">
                        <div class="inline-flex rounded-lg border border-slate-300 p-0.5 mb-2 text-sm">
                            <button type="button" @click="dest='client'" :class="dest==='client' ? 'bg-brand-600 text-white' : 'text-slate-600'" class="px-3 py-1 rounded-md">Client</button>
                            <button type="button" @click="dest='prospect'" :class="dest==='prospect' ? 'bg-brand-600 text-white' : 'text-slate-600'" class="px-3 py-1 rounded-md">Prospect</button>
                        </div>
                        <label class="text-sm block" x-show="dest==='client'">Client
                            <select name="client_id" x-bind:disabled="dest!=='client'" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"><option value="">—</option>@foreach($clients as $c)<option value="{{ $c->id }}" @selected($quote->client_id==$c->id)>{{ $c->company }}</option>@endforeach</select>
                        </label>
                        <label class="text-sm block" x-show="dest==='prospect'" x-cloak>Prospect
                            <select name="prospect_id" x-bind:disabled="dest!=='prospect'" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"><option value="">—</option>@foreach($prospects as $p)<option value="{{ $p->id }}" @selected($quote->prospect_id==$p->id)>{{ $p->company ? $p->company.' — '.$p->fullName() : $p->fullName() }}</option>@endforeach</select>
                        </label>
                    </div>
                    <label class="text-sm block">Commercial<select name="commercial_id" class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">@foreach($commercials as $u)<option value="{{ $u->id }}" @selected(($quote->commercial_id??auth()->id())==$u->id)>{{ $u->name }}</option>@endforeach</select></label>
                    @include('partials.field',['name'=>'date','label'=>'Date *','type'=>'date','value'=>optional($quote->date)->format('Y-m-d') ?? now()->format('Y-m-d')])
                    @include('partials.field',['name'=>'valid_until','label'=>'Valide jusqu\'au','type'=>'date','value'=>optional($quote->valid_until)->format('Y-m-d')])
                    <label class="text-sm block col-span-2">Objet @include('partials.rawfield',['name'=>'title','value'=>$quote->title])</label>
                </div>
            </x-card>
            <x-card title="Lignes de prestations">
                <template x-for="(line,i) in lines" :key="i">
                    <div class="grid grid-cols-12 gap-2 items-center mb-2 pb-2 border-b border-slate-50">
                        <div class="col-span-5">
                            <select :name="`lines[${i}][service_id]`" x-model="line.service_id" @change="applyService(i)" class="w-full rounded-lg border border-slate-300 px-2 py-1.5 text-xs">
                                <option value="">— libre —</option>
                                <template x-for="s in services" :key="s.id"><option :value="s.id" x-text="s.name"></option></template>
                            </select>
                            <input :name="`lines[${i}][description]`" x-model="line.description" placeholder="Description" class="mt-1 w-full rounded-lg border border-slate-300 px-2 py-1.5 text-xs">
                        </div>
                        <input type="number" step="0.5" :name="`lines[${i}][quantity]`" x-model.number="line.quantity" class="col-span-1 rounded-lg border border-slate-300 px-2 py-1.5 text-xs text-right">
                        <input type="number" step="0.01" :name="`lines[${i}][unit_price]`" x-model.number="line.unit_price" class="col-span-2 rounded-lg border border-slate-300 px-2 py-1.5 text-xs text-right">
                        <input type="number" step="1" :name="`lines[${i}][vat_rate]`" x-model.number="line.vat_rate" class="col-span-1 rounded-lg border border-slate-300 px-2 py-1.5 text-xs text-right">
                        <label class="col-span-1 text-[10px] flex items-center gap-1"><input type="checkbox" :name="`lines[${i}][is_option]`" x-model="line.is_option" value="1">opt.</label>
                        <div class="col-span-1 text-right text-xs font-semibold" x-text="fmt(line.quantity*line.unit_price)"></div>
                        <button type="button" @click="lines.splice(i,1)" class="col-span-1 text-rose-400 hover:text-rose-600">✕</button>
                    </div>
                </template>
                <div class="grid grid-cols-12 gap-2 text-[10px] text-slate-400 px-1 mb-1"><span class="col-span-5">Prestation</span><span class="col-span-1 text-right">Qté</span><span class="col-span-2 text-right">PU HT</span><span class="col-span-1 text-right">TVA</span><span class="col-span-1">Option</span><span class="col-span-1 text-right">Total</span></div>
                <button type="button" @click="lines.push({service_id:null,description:'',quantity:1,unit_price:0,vat_rate:20,is_option:false})" class="text-sm text-brand-600 hover:underline mt-2">+ Ajouter une ligne</button>
            </x-card>
        </div>
        <div class="space-y-6">
            <x-card title="Récapitulatif">
                <div class="space-y-2 text-sm">
                    <div class="flex justify-between"><span>Sous-total HT</span><span class="font-semibold" x-text="fmt(subtotal)"></span></div>
                    <div class="flex justify-between items-center"><span>Remise (%)</span><input type="number" step="0.5" name="discount_rate" x-model.number="discount" class="w-20 rounded border border-slate-300 px-2 py-1 text-right text-xs"></div>
                    <div class="flex justify-between text-slate-500"><span>Remise</span><span x-text="'- '+fmt(subtotal*discount/100)"></span></div>
                    <div class="flex justify-between"><span>TVA</span><span x-text="fmt(vat)"></span></div>
                    <div class="flex justify-between text-lg font-bold border-t pt-2 text-brand-700"><span>Total TTC</span><span x-text="fmt(total)"></span></div>
                </div>
            </x-card>
            <x-card title="Conditions"><textarea name="terms" rows="3" class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm">{{ old('terms',$quote->terms) }}</textarea></x-card>
            <div class="flex flex-col gap-2"><x-btn type="submit">💾 Enregistrer</x-btn><x-btn variant="secondary" :href="route('quotes.index')">Annuler</x-btn></div>
        </div>
    </div>
</form>
@push('scripts')
<script>
function quoteForm(services, existing, discount0){
    return {
        services, lines: existing.length?existing:[{service_id:null,description:'',quantity:1,unit_price:0,vat_rate:20,is_option:false}], discount: discount0,
        fmt(n){ return (n||0).toLocaleString('fr-FR',{minimumFractionDigits:2,maximumFractionDigits:2})+' €'; },
        applyService(i){ const s=this.services.find(x=>x.id==this.lines[i].service_id); if(s){ this.lines[i].description=s.name; this.lines[i].unit_price=s.price; this.lines[i].vat_rate=s.vat; } },
        get subtotal(){ return this.lines.filter(l=>!l.is_option).reduce((a,l)=>a+(l.quantity*l.unit_price),0); },
        get vat(){ const base=this.subtotal*(1-this.discount/100); return this.lines.filter(l=>!l.is_option).reduce((a,l)=>{const lt=l.quantity*l.unit_price; const share=this.subtotal>0?lt/this.subtotal:0; return a+(lt-this.subtotal*this.discount/100*share)*(l.vat_rate/100);},0); },
        get total(){ return this.subtotal*(1-this.discount/100)+this.vat; },
    };
}
</script>
@endpush
@endsection