@extends('layouts.app')
@section('title', 'Edit Quotation — ' . $quotation->quotation_no)
@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('quotations.index') }}">Quotations</a></li>
<li class="breadcrumb-item"><a href="{{ route('quotations.show', $quotation) }}">{{ $quotation->quotation_no }}</a></li>
<li class="breadcrumb-item active">Edit</li>
@endsection
@section('content')

<div class="page-header">
    <h1 class="page-title"><i class="bi bi-file-earmark-text me-2" style="color:#1d4ed8;"></i>Edit Quotation — {{ $quotation->quotation_no }}</h1>
</div>

@if($errors->any())
<div class="alert alert-danger">
    <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
</div>
@endif

<form method="POST" action="{{ route('quotations.update', $quotation) }}" id="quotForm">
@csrf
@method('PUT')
<div class="row g-3">
    <div class="col-12 col-lg-8">

        <div class="card mb-3">
            <div class="card-header fw-600">Quotation Details</div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">Customer</label>
                        <div class="d-flex gap-2">
                            <select name="customer_id" id="customer_id" class="form-select">
                                <option value="">— Walk-in / No Customer —</option>
                                @foreach($customers as $c)
                                <option value="{{ $c->id }}" {{ old('customer_id', $quotation->customer_id) == $c->id ? 'selected' : '' }}>
                                    {{ $c->name }}{{ $c->phone ? ' — '.$c->phone : '' }}
                                </option>
                                @endforeach
                            </select>
                            @can_permission('customers.create')
                            <button type="button" class="btn btn-outline-primary flex-shrink-0"
                                    data-bs-toggle="modal" data-bs-target="#quickAddCustomerModal">
                                <i class="bi bi-person-plus"></i>
                            </button>
                            @endcan_permission
                        </div>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Quotation Date <span class="text-danger">*</span></label>
                        <input type="date" name="quotation_date" class="form-control"
                               value="{{ old('quotation_date', $quotation->quotation_date?->format('Y-m-d')) }}" required>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold">Valid Until</label>
                        <input type="date" name="valid_until" class="form-control"
                               value="{{ old('valid_until', $quotation->valid_until?->format('Y-m-d')) }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Quotation No.</label>
                        <input type="text" class="form-control" value="{{ $quotation->quotation_no }}" disabled>
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold">Status <span class="text-danger">*</span></label>
                        <select name="status" class="form-select" required>
                            @foreach(['draft' => 'Draft', 'sent' => 'Sent', 'accepted' => 'Accepted', 'expired' => 'Expired', 'rejected' => 'Rejected'] as $key => $label)
                            <option value="{{ $key }}" {{ old('status', $quotation->status) === $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-12">
                        <label class="form-label fw-semibold">Terms &amp; Conditions</label>
                        <input type="text" name="terms" class="form-control"
                               value="{{ old('terms', $quotation->terms) }}"
                               placeholder="e.g. Payment within 7 days, prices valid for 30 days">
                    </div>
                </div>
            </div>
        </div>

        <div class="card mb-3">
            <div class="card-header d-flex justify-content-between align-items-center fw-600">
                <span><i class="bi bi-list-ul me-2"></i>Line Items</span>
                <button type="button" class="btn btn-sm btn-success" onclick="addQtRow()">
                    <i class="bi bi-plus-lg me-1"></i>Add Item
                </button>
            </div>
            <div class="card-body p-0">
                <table class="table mb-0" id="qtTable">
                    <thead><tr>
                        <th style="min-width:200px;">Item Name</th>
                        <th style="min-width:160px;">Product Variant</th>
                        <th style="width:70px;">Qty</th>
                        <th style="width:130px;">Unit Price (৳)</th>
                        <th style="width:110px;">Discount (৳)</th>
                        <th style="width:120px;">Total</th>
                        <th style="width:38px;"></th>
                    </tr></thead>
                    <tbody id="qtBody"></tbody>
                </table>
            </div>
            <div class="card-footer py-2" id="qtFooter" style="background:#f8fafc;">
                <div class="text-end fw-700" style="font-size:.9rem;">
                    Subtotal: <span id="qtSubtotalFooter" style="color:#059669;">৳0.00</span>
                </div>
            </div>
        </div>

        <div class="mb-3">
            <label class="form-label fw-semibold">Notes</label>
            <textarea name="notes" class="form-control" rows="2" placeholder="Additional notes for the customer">{{ old('notes', $quotation->notes) }}</textarea>
        </div>

    </div>

    <div class="col-12 col-lg-4">
        <div class="card mb-3" style="position:sticky;top:76px;">
            <div class="card-header fw-600">Summary</div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-2" style="font-size:.875rem;">
                    <span class="text-muted">Subtotal</span>
                    <span id="qtSubtotal" class="fw-600">৳0.00</span>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2" style="font-size:.875rem;">
                    <span class="text-muted">Discount</span>
                    <div class="input-group input-group-sm" style="width:120px;">
                        <span class="input-group-text">৳</span>
                        <input type="number" name="discount" id="qtDiscount" class="form-control"
                               value="{{ old('discount', $quotation->discount) }}" min="0" step="0.01" oninput="qtRecalc()">
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mb-2" style="font-size:.875rem;">
                    <span class="text-muted">VAT</span>
                    <div class="input-group input-group-sm" style="width:120px;">
                        <span class="input-group-text">৳</span>
                        <input type="number" name="vat" id="qtVat" class="form-control"
                               value="{{ old('vat', $quotation->vat) }}" min="0" step="0.01" oninput="qtRecalc()">
                    </div>
                </div>
                <hr class="my-2">
                <div class="d-flex justify-content-between" style="font-size:1.2rem;font-weight:900;">
                    <span>Total</span>
                    <span id="qtTotal" style="color:#1d4ed8;">৳0.00</span>
                </div>
            </div>
            <div class="card-footer border-0 bg-transparent pt-0">
                <button type="submit" class="btn btn-primary w-100 mb-2" style="font-weight:700;">
                    <i class="bi bi-check-circle me-1"></i>Update Quotation
                </button>
                <a href="{{ route('quotations.show', $quotation) }}" class="btn btn-outline-secondary w-100">Cancel</a>
            </div>
        </div>
    </div>
</div>
</form>

<x-quick-add-customer />

@endsection

@push('scripts')
<x-quick-add-scripts />
<script>
const QT_VARIANTS = @json($variants->map(fn($v) => [
    'id'   => $v->id,
    'name' => $v->product->name . ' — ' . $v->variant_name,
    'price'=> $v->selling_price,
    'sku'  => $v->sku,
]));

const EXISTING_ITEMS = @json($quotation->items->map(fn($item) => [
    'item_name'          => $item->item_name,
    'product_variant_id' => $item->product_variant_id,
    'qty'                => $item->qty,
    'unit_price'         => (float) $item->unit_price,
    'discount'           => (float) $item->discount,
]));

let qtIdx = 0;

function addQtRow(name='', variantId='', qty=1, price=0, disc=0) {
    const idx  = qtIdx++;
    const opts = QT_VARIANTS.map(v =>
        `<option value="${v.id}" data-price="${v.price}" ${v.id==variantId?'selected':''}>${v.name}</option>`
    ).join('');
    const tr   = document.createElement('tr');
    tr.id      = `qtrow_${idx}`;
    tr.innerHTML = `
        <td><input type="text" name="items[${idx}][item_name]" class="form-control form-control-sm" value="${name}" required placeholder="Product / service name"></td>
        <td>
            <select name="items[${idx}][product_variant_id]" class="form-select form-select-sm"
                    onchange="fillVariantPrice(this,${idx})">
                <option value="">— Optional —</option>${opts}
            </select>
        </td>
        <td><input type="number" name="items[${idx}][qty]" id="qtqty_${idx}" class="form-control form-control-sm" value="${qty}" min="1" oninput="qtCalcRow(${idx})" required></td>
        <td><div class="input-group input-group-sm"><span class="input-group-text">৳</span>
            <input type="number" name="items[${idx}][unit_price]" id="qtprice_${idx}" class="form-control" value="${parseFloat(price).toFixed(2)}" min="0" step="0.01" oninput="qtCalcRow(${idx})" required>
        </div></td>
        <td><div class="input-group input-group-sm"><span class="input-group-text">৳</span>
            <input type="number" name="items[${idx}][discount]" id="qtdisc_${idx}" class="form-control" value="${parseFloat(disc).toFixed(2)}" min="0" step="0.01" oninput="qtCalcRow(${idx})">
        </div></td>
        <td id="qttotal_${idx}" class="fw-700" style="white-space:nowrap;">৳${(qty*price-disc).toFixed(2)}</td>
        <td><button type="button" class="btn btn-sm" style="color:#dc2626;background:none;border:none;" onclick="document.getElementById('qtrow_${idx}').remove();qtRecalc();">
            <i class="bi bi-x-circle-fill"></i></button></td>`;
    document.getElementById('qtBody').appendChild(tr);
    qtRecalc();
}

function fillVariantPrice(sel, idx) {
    const opt   = sel.options[sel.selectedIndex];
    const price = parseFloat(opt?.dataset?.price || 0);
    const nameEl= document.querySelector(`[name="items[${idx}][item_name]"]`);
    if (price) document.getElementById(`qtprice_${idx}`).value = price.toFixed(2);
    if (nameEl && !nameEl.value && opt.text) nameEl.value = opt.text;
    qtCalcRow(idx);
}

function qtCalcRow(idx) {
    const qty  = parseFloat(document.getElementById(`qtqty_${idx}`)?.value) || 0;
    const price= parseFloat(document.getElementById(`qtprice_${idx}`)?.value) || 0;
    const disc = parseFloat(document.getElementById(`qtdisc_${idx}`)?.value) || 0;
    const tot  = Math.max(0, qty * price - disc);
    const el   = document.getElementById(`qttotal_${idx}`);
    if (el) el.textContent = '৳' + tot.toFixed(2);
    qtRecalc();
}

function qtRecalc() {
    let sub = 0;
    document.querySelectorAll('[id^="qttotal_"]').forEach(el => sub += parseFloat(el.textContent.replace('৳',''))||0);
    const disc = parseFloat(document.getElementById('qtDiscount').value)||0;
    const vat  = parseFloat(document.getElementById('qtVat').value)||0;
    const tot  = Math.max(0, sub - disc + vat);
    ['qtSubtotal','qtSubtotalFooter'].forEach(id => { const el=document.getElementById(id); if(el)el.textContent='৳'+sub.toFixed(2); });
    document.getElementById('qtTotal').textContent = '৳'+tot.toFixed(2);
}

// Pre-fill existing line items, or one blank row if somehow empty
if (EXISTING_ITEMS.length > 0) {
    EXISTING_ITEMS.forEach(item => addQtRow(item.item_name, item.product_variant_id || '', item.qty, item.unit_price, item.discount));
} else {
    addQtRow();
}
</script>
@endpush