@extends('layouts.admin')
@section('title', 'Create quote')
@section('content')
<x-crm.shell title="Create quote" subtitle="Line items with cost for margin checks. Discounts or margins under 20% require a second approver.">
    <x-slot:actions>
        <a href="{{ route('admin.crm.quotes.index') }}" class="admin-btn">Cancel</a>
    </x-slot:actions>

    <form method="post" action="{{ route('admin.crm.quotes.store') }}" class="space-y-5 p-4 sm:p-6 lg:px-8" id="quote-form">
        @csrf
        <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_18rem]">
            <div class="space-y-5">
                <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)] crm-fade-in">
                    <h2 class="text-sm font-semibold tracking-tight">Customer</h2>
                    <div class="mt-4 grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="admin-label">Lead</label>
                            <select name="lead_id" class="admin-input">
                                <option value="">—</option>
                                @foreach($leads as $lead)
                                    <option value="{{ $lead->id }}" @selected(old('lead_id', $leadId) == $lead->id)>{{ $lead->name ?: $lead->email }} ({{ $lead->type }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="admin-label">Opportunity</label>
                            <select name="opportunity_id" class="admin-input">
                                <option value="">—</option>
                                @foreach($opportunities as $opp)
                                    <option value="{{ $opp->id }}" @selected(old('opportunity_id', $opportunityId) == $opp->id)>{{ $opp->number }} — {{ $opp->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="admin-label">Currency</label>
                            <input name="currency" value="{{ old('currency', 'AUD') }}" maxlength="3" class="admin-input uppercase">
                        </div>
                        <div>
                            <label class="admin-label">Notes</label>
                            <input name="notes" value="{{ old('notes') }}" class="admin-input" placeholder="Visible on accept page">
                        </div>
                    </div>
                </section>

                <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)] crm-fade-in crm-fade-in-delay-1">
                    <div class="flex items-center justify-between gap-3">
                        <h2 class="text-sm font-semibold tracking-tight">Line items</h2>
                        <button type="button" class="admin-btn" id="add-line"><i data-lucide="plus" class="h-3.5 w-3.5"></i> Add line</button>
                    </div>
                    <div class="mt-4 space-y-3" id="quote-lines"></div>
                </section>
            </div>

            <aside class="space-y-4 crm-fade-in crm-fade-in-delay-2">
                <section class="rounded-2xl border border-[var(--color-admin-border)] bg-white p-5 shadow-[var(--admin-shadow)]">
                    <h2 class="text-sm font-semibold tracking-tight">Adjustments</h2>
                    <div class="mt-4 space-y-3">
                        <div>
                            <label class="admin-label">Discount (cents)</label>
                            <input type="number" min="0" name="discount_cents" id="discount" value="{{ old('discount_cents', 0) }}" class="admin-input">
                        </div>
                        <div>
                            <label class="admin-label">Tax (cents)</label>
                            <input type="number" min="0" name="tax_cents" id="tax" value="{{ old('tax_cents', 0) }}" class="admin-input">
                        </div>
                    </div>
                </section>
                <section class="rounded-2xl border border-[var(--color-admin-border)] bg-[#0b0b0b] p-5 text-white shadow-[var(--admin-shadow)]">
                    <div class="text-[10px] font-semibold uppercase tracking-[0.2em] text-[var(--color-gold)]">Live totals</div>
                    <dl class="mt-4 space-y-2 text-sm">
                        <div class="flex justify-between text-white/70"><dt>Subtotal</dt><dd id="sum-subtotal">AUD 0.00</dd></div>
                        <div class="flex justify-between text-white/70"><dt>Discount</dt><dd id="sum-discount">AUD 0.00</dd></div>
                        <div class="flex justify-between text-white/70"><dt>Tax</dt><dd id="sum-tax">AUD 0.00</dd></div>
                        <div class="flex justify-between border-t border-white/15 pt-2 text-base font-semibold"><dt>Total</dt><dd id="sum-total" class="text-[var(--color-gold)]">AUD 0.00</dd></div>
                        <div class="flex justify-between text-white/50"><dt>Margin</dt><dd id="sum-margin">—</dd></div>
                    </dl>
                    <p id="approval-hint" class="mt-3 hidden text-xs text-[var(--color-gold)]">This quote will require manager approval before send.</p>
                </section>
                <button class="admin-btn admin-btn-primary w-full justify-center">Create quote</button>
            </aside>
        </div>
    </form>
</x-crm.shell>
<script>
(() => {
  const linesEl = document.getElementById('quote-lines');
  const money = (c) => 'AUD ' + (Number(c || 0) / 100).toFixed(2);
  let idx = 0;

  function rowHtml(i) {
    return `<div class="grid gap-2 rounded-xl border border-[var(--color-admin-border)] bg-[#fafbfb] p-3 sm:grid-cols-12" data-line>
      <div class="sm:col-span-4"><label class="admin-label">Title</label><input name="lines[${i}][title]" required class="admin-input line-title" placeholder="Item"></div>
      <div class="sm:col-span-2"><label class="admin-label">SKU</label><input name="lines[${i}][sku]" class="admin-input"></div>
      <div class="sm:col-span-1"><label class="admin-label">Qty</label><input type="number" min="1" name="lines[${i}][quantity]" value="1" required class="admin-input line-qty"></div>
      <div class="sm:col-span-2"><label class="admin-label">Price (cents)</label><input type="number" min="0" name="lines[${i}][unit_price_cents]" value="0" required class="admin-input line-price"></div>
      <div class="sm:col-span-2"><label class="admin-label">Cost (cents)</label><input type="number" min="0" name="lines[${i}][unit_cost_cents]" value="0" class="admin-input line-cost"></div>
      <div class="flex items-end sm:col-span-1"><button type="button" class="admin-btn w-full remove-line">×</button></div>
    </div>`;
  }

  function addLine() {
    linesEl.insertAdjacentHTML('beforeend', rowHtml(idx++));
    bind();
    recalc();
  }

  function bind() {
    linesEl.querySelectorAll('input').forEach(el => el.oninput = recalc);
    linesEl.querySelectorAll('.remove-line').forEach(btn => {
      btn.onclick = () => {
        if (linesEl.querySelectorAll('[data-line]').length < 2) return;
        btn.closest('[data-line]').remove();
        recalc();
      };
    });
  }

  function recalc() {
    let sub = 0, cost = 0;
    linesEl.querySelectorAll('[data-line]').forEach(row => {
      const q = Number(row.querySelector('.line-qty').value || 0);
      const p = Number(row.querySelector('.line-price').value || 0);
      const c = Number(row.querySelector('.line-cost').value || 0);
      sub += q * p; cost += q * c;
    });
    const discount = Number(document.getElementById('discount').value || 0);
    const tax = Number(document.getElementById('tax').value || 0);
    const total = Math.max(0, sub - discount + tax);
    const margin = sub > 0 ? ((sub - cost) / sub) * 100 : null;
    document.getElementById('sum-subtotal').textContent = money(sub);
    document.getElementById('sum-discount').textContent = money(discount);
    document.getElementById('sum-tax').textContent = money(tax);
    document.getElementById('sum-total').textContent = money(total);
    const mEl = document.getElementById('sum-margin');
    mEl.textContent = margin === null ? '—' : margin.toFixed(1) + '%';
    mEl.classList.toggle('text-red-300', margin !== null && margin < 20);
    document.getElementById('approval-hint').classList.toggle('hidden', !(discount > 0 || (margin !== null && margin < 20)));
  }

  document.getElementById('add-line').onclick = addLine;
  document.getElementById('discount').oninput = recalc;
  document.getElementById('tax').oninput = recalc;
  addLine();
})();
</script>
@endsection