@extends('layouts.app')
@section('title', __('New quote'))

@section('content')
<div x-data="quoteForm({{ $products->map(fn ($p) => [
    'id' => $p->id,
    'name' => $p->name,
    'selling_price' => (float) $p->selling_price,
    'box_price' => $p->sellableByBox() ? $p->priceForBox() : null,
    'units_per_box' => (int) $p->units_per_box,
    'vat_rate' => (float) $p->vat_rate,
])->values() }})">
    <form method="POST" action="{{ route('quotes.store') }}">
        @csrf
        <template x-for="(item,i) in items" :key="i">
            <span>
                <input type="hidden" :name="`items[${i}][product_id]`" :value="item.product_id">
                <input type="hidden" :name="`items[${i}][quantity]`" :value="item.quantity">
                <input type="hidden" :name="`items[${i}][unit_price]`" :value="item.unit_price">
                <input type="hidden" :name="`items[${i}][discount]`" :value="item.discount">
                <input type="hidden" :name="`items[${i}][selling_mode]`" :value="item.selling_mode">
            </span>
        </template>

        <div class="mb-4 grid grid-cols-1 gap-4 sm:grid-cols-4">
            <div class="card">
                <label class="label">{{ __('Client') }}</label>
                <select name="client_id" class="input">
                    <option value="">{{ __('Walk-in customer') }}</option>
                    @foreach ($clients as $client)<option value="{{ $client->id }}">{{ $client->name }} — {{ $client->phone }}</option>@endforeach
                </select>
            </div>
            <div class="card">
                <label class="label">{{ __('Store') }}</label>
                <select name="store_id" class="input" required>
                    @foreach ($stores as $s)<option value="{{ $s->id }}" @selected($store?->id === $s->id)>{{ $s->name }} ({{ $s->type }})</option>@endforeach
                </select>
            </div>
            <div class="card">
                <label class="label">{{ __('Valid until') }}</label>
                <input type="date" name="due_date" min="{{ now()->toDateString() }}" value="{{ old('due_date', now()->addDays(15)->toDateString()) }}" class="input">
            </div>
            <div class="card">
                <label class="label">{{ __('Notes') }}</label>
                <input type="text" name="notes" value="{{ old('notes') }}" class="input" maxlength="1000">
            </div>
        </div>

        <div class="card mb-4">
            <div class="flex flex-wrap items-end gap-2">
                <div class="relative flex-1">
                    <label class="label">{{ __('Add product') }}</label>
                    <input type="text" x-model="term" @click.outside="open = false" @focus="open = true"
                           placeholder="{{ __('Search a product') }}" class="input" autocomplete="off">
                    <div x-show="open && term && filtered.length" x-cloak
                         class="absolute left-0 z-30 mt-1 max-h-60 w-full max-w-md overflow-auto rounded-xl border border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-800">
                        <template x-for="p in filtered" :key="p.id">
                            <button type="button" @click="add(p); term = ''; open = false;"
                                    class="block w-full px-3 py-2 text-left text-sm hover:bg-brand-50 dark:hover:bg-slate-700">
                                <span x-text="p.name"></span>
                                <span class="ml-2 text-xs text-slate-400" x-text="fmt(p.selling_price)"></span>
                            </button>
                        </template>
                    </div>
                    <p x-show="term && open && !filtered.length" class="mt-1 text-xs text-slate-400">{{ __('No products found.') }}</p>
                </div>
            </div>
        </div>

        <div class="table-wrap">
            <table class="min-w-full divide-y divide-slate-100">
                <thead class="bg-slate-50"><tr>
                    <th class="th">{{ __('Product') }}</th>
                    <th class="th">{{ __('Mode') }}</th>
                    <th class="th">{{ __('Qty') }}</th>
                    <th class="th">{{ __('Unit price') }}</th>
                    <th class="th">{{ __('Discount') }}</th>
                    <th class="th text-right">{{ __('Line total') }}</th>
                    <th class="th"></th>
                </tr></thead>
                <tbody class="divide-y divide-slate-100">
                    <template x-for="(item,i) in items" :key="i">
                        <tr>
                            <td class="td font-medium" x-text="item.name"></td>
                            <td class="td">
                                <template x-if="item.units_per_box > 1">
                                    <select :value="item.selling_mode" @change="setMode(item, $event.target.value)" class="input !w-24 !py-1 text-xs">
                                        <option value="unit">{{ __('Unit') }}</option>
                                        <option value="box">{{ __('Box') }}</option>
                                    </select>
                                </template>
                                <span x-show="item.units_per_box <= 1" class="text-xs text-slate-400">{{ __('Unit') }}</span>
                            </td>
                            <td class="td"><input type="number" min="1" x-model.number="item.quantity" class="input !w-20 !py-1"></td>
                            <td class="td"><input type="number" step="0.01" min="0" x-model.number="item.unit_price" class="input !w-28 !py-1"></td>
                            <td class="td"><input type="number" step="0.01" min="0" x-model.number="item.discount" class="input !w-24 !py-1"></td>
                            <td class="td text-right font-semibold" x-text="fmt(lineTotal(item))"></td>
                            <td class="td"><button type="button" @click="items.splice(i,1)" class="text-red-500"><x-icon name="trash" class="h-4 w-4"/></button></td>
                        </tr>
                    </template>
                    <tr x-show="!items.length"><td colspan="7" class="td py-8 text-center text-slate-400">{{ __('Add products to quote.') }}</td></tr>
                </tbody>
            </table>
        </div>

        <div class="mt-4 flex items-center justify-between">
            <div class="text-sm text-slate-500">
                <span>{{ __('Subtotal') }}: <span x-text="fmt(subtotal)"></span></span>
                <span class="ml-4">{{ __('VAT incl.') }}: <span x-text="fmt(vat)"></span></span>
            </div>
            <div class="flex items-center gap-4">
                <p class="text-lg font-bold text-slate-800 dark:text-slate-100">{{ __('Total') }}: <span x-text="fmt(total)"></span></p>
                <button class="btn-primary" :disabled="!items.length">{{ __('Create quote') }}</button>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function quoteForm(products) {
    return {
        products, items: [], term: '', open: false,
        fmt(v) { return new Intl.NumberFormat(document.documentElement.lang === 'en' ? 'en-US' : 'fr-FR').format(v || 0) + ' {{ current_tenant()?->currency_symbol ?? "Ar" }}'; },
        get filtered() {
            const t = this.term.trim().toLowerCase();
            if (!t) return [];
            return this.products.filter(p => p.name.toLowerCase().includes(t)).slice(0, 30);
        },
        lineTotal(item) { return Math.max(0, item.unit_price * item.quantity - (item.discount || 0)); },
        get subtotal() { return this.items.reduce((s, i) => s + this.lineTotal(i), 0); },
        get vat() { return this.items.reduce((s, i) => { const r = i.vat_rate || 0; return s + this.lineTotal(i) * (r / (100 + r)); }, 0); },
        get total() { return this.subtotal; },
        setMode(item, mode) {
            item.selling_mode = mode;
            item.unit_price = mode === 'box' && item.box_price ? item.box_price : item.catalog_price;
        },
        add(p) {
            if (this.items.some(i => i.product_id === p.id)) return;
            this.items.push({
                product_id: p.id, name: p.name, quantity: 1,
                unit_price: p.selling_price, catalog_price: p.selling_price,
                box_price: p.box_price, units_per_box: p.units_per_box || 1,
                vat_rate: p.vat_rate, selling_mode: 'unit', discount: 0,
            });
        }
    };
}
</script>
@endpush