@extends('admin.layouts.app')

@section('title','Create Quotation')

@section('content')
@php
    $isEdit = isset($quotation);
    $selectedLeadId = old('lead_id', $lead?->id);
    $formItems = collect();
    if (old('service_name')) {
        foreach (old('service_name') as $index => $name) {
            $formItems->push(['service_name'=>$name,'description'=>old("description.$index"),'quantity'=>old("quantity.$index",1),'unit_price'=>old("unit_price.$index",0)]);
        }
    } elseif ($isEdit) {
        $formItems = $quotation->items->map(fn($item)=>['service_name'=>$item->service_name,'description'=>$item->description,'quantity'=>$item->quantity,'unit_price'=>$item->unit_price]);
    } else {
        $formItems->push(['service_name'=>$lead?->enquiry_type ?? '','description'=>'','quantity'=>1,'unit_price'=>0]);
    }
@endphp

<style>
    .quotation-services-card,.quotation-pricing-card{border:1px solid #e2e8f0;border-radius:14px;background:#fff;overflow:hidden;margin:22px 0;box-shadow:0 4px 16px rgba(15,23,42,.05)}.quotation-section-header{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.quotation-section-header i{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#fff3dd;color:#b96b00}.quotation-section-header h3{margin:0;font-size:17px}.quotation-section-header p{margin:3px 0 0;color:#64748b;font-size:12px}.quotation-services-body{padding:18px}.quotation-services-card #itemsTable{margin:0;border-collapse:separate;border-spacing:0}.quotation-services-card #itemsTable thead th{background:#14213d;color:#fff;border:0;font-size:12px;text-transform:uppercase;letter-spacing:.35px;padding:13px 12px}.quotation-services-card #itemsTable thead th:first-child{border-radius:9px 0 0 9px}.quotation-services-card #itemsTable thead th:last-child{border-radius:0 9px 9px 0;text-align:center}.quotation-services-card #itemsTable td{padding:12px 10px;vertical-align:middle;border-bottom:1px solid #edf2f7}.quotation-services-card #itemsTable input,.quotation-services-card #itemsTable textarea{width:100%;min-width:90px;padding:10px 11px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font:inherit;transition:.2s}.quotation-services-card #itemsTable textarea{min-width:190px;resize:vertical}.quotation-services-card #itemsTable input:focus,.quotation-services-card #itemsTable textarea:focus{outline:none;border-color:#fca311;box-shadow:0 0 0 3px rgba(252,163,17,.12)}.quotation-services-card .line-total{font-weight:800;color:#14213d;background:#f8fafc!important}.quotation-services-card td:last-child{text-align:center}.quotation-services-card #addRow{margin-top:14px;background:#fff;color:#14213d;border:1px dashed #94a3b8}.quotation-services-card #addRow:hover{border-color:#fca311;background:#fffaf0}.quotation-pricing-body{padding:18px}.quotation-pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.quotation-pricing-grid .form-group{margin:0}.quotation-pricing-grid .grand-total-field{grid-column:span 2}.quotation-pricing-grid label{font-weight:700;color:#334155}.quotation-pricing-grid input{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:9px;background:#f8fafc;font:inherit}.quotation-pricing-grid input:not([readonly]){background:#fff}.quotation-pricing-grid input:focus{outline:none;border-color:#fca311;box-shadow:0 0 0 3px rgba(252,163,17,.12)}.quotation-pricing-grid #grand_total{font-size:20px;font-weight:800;color:#15803d;background:#ecfdf5;border-color:#bbf7d0}@media(max-width:900px){.quotation-pricing-grid{grid-template-columns:1fr 1fr}.quotation-pricing-grid .grand-total-field{grid-column:span 2}}@media(max-width:600px){.quotation-services-body,.quotation-pricing-body{padding:12px}.quotation-pricing-grid{grid-template-columns:1fr}.quotation-pricing-grid .grand-total-field{grid-column:auto}}
</style>

<div class="page-header">
    <div>
        <h2>{{ $isEdit ? 'Edit Quotation' : 'Create Quotation' }}</h2>
        <p>{{ $isEdit ? $quotation->quotation_number : 'Select a converted lead and prepare its quotation.' }}</p>
    </div>

</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

@if($errors->any())
    <div class="alert alert-danger">
        <ul style="margin:0; padding-left:18px;">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div class="table-card">
    <form action="{{ $isEdit ? route('admin.quotations.update',$quotation) : route('admin.quotations.store') }}" method="POST" id="quotationForm">
        @csrf
        @if($isEdit) @method('PUT') @endif

        <div class="form-group">
            <label for="leadSelect">Converted Lead *</label>
            <select id="leadSelect" name="lead_id" required @disabled($isEdit)>
                <option value="">Select converted lead...</option>
                @foreach($leads as $availableLead)
                    <option value="{{ $availableLead->id }}" @selected((string)$selectedLeadId===(string)$availableLead->id)
                        data-number="{{ $availableLead->lead_number }}"
                        data-customer="{{ $availableLead->customer->customer_name ?? '-' }}"
                        data-mobile="{{ $availableLead->customer->mobile ?? '-' }}"
                        data-enquiry="{{ $availableLead->enquiry_type ?? '-' }}">{{ $availableLead->lead_number }} — {{ $availableLead->customer->customer_name ?? 'Customer' }}</option>
                @endforeach
            </select>
            @if($isEdit)<input type="hidden" name="lead_id" value="{{ $lead->id }}">@endif
            @unless($isEdit)
                <small class="field-help">Only converted leads without an existing quotation are listed.</small>
            @endunless
        </div>

        <div class="timeline-summary">
            <div>
                <span>Lead No</span>
                <strong id="selectedLeadNumber">{{ $lead?->lead_number ?? '-' }}</strong>
            </div>
            <div>
                <span>Customer</span>
                <strong id="selectedCustomer">{{ $lead?->customer->customer_name ?? '-' }}</strong>
            </div>
            <div>
                <span>Mobile</span>
                <strong id="selectedMobile">{{ $lead?->customer->mobile ?? '-' }}</strong>
            </div>
            <div>
                <span>Enquiry Type</span>
                <strong id="selectedEnquiry">{{ $lead?->enquiry_type ?? '-' }}</strong>
            </div>
        </div>

        <div class="form-grid mt-3">
            <div class="form-group">
                <label>Quotation Date *</label>
                <input type="date"
                       name="quotation_date"
                       value="{{ old('quotation_date', $isEdit ? $quotation->quotation_date : date('Y-m-d')) }}"
                       required>
            </div>

            <div class="form-group">
                <label>Valid Until</label>
                <input type="date"
                       name="valid_until"
                       value="{{ old('valid_until', $isEdit ? $quotation->valid_until : '') }}">
            </div>

            <div class="form-group">
                <label>Status *</label>
                <select name="status" required>
                    @foreach($isEdit ? ['Draft','Sent','Approved','Rejected','Expired'] : ['Draft','Sent'] as $status)
                        <option value="{{ $status }}" @selected(old('status',$quotation->status ?? 'Draft')===$status)>{{ $status }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        <section class="quotation-services-card">
        <div class="quotation-section-header"><i class="fas fa-spray-can-sparkles"></i><div><h3>Quotation Services</h3><p>Add service details, quantity and pricing</p></div></div>
        <div class="quotation-services-body">

        <div class="table-responsive">
            <table class="admin-table" id="itemsTable">
                <thead>
                    <tr>
                        <th>Service Name *</th>
                        <th>Description</th>
                        <th width="100">Qty *</th>
                        <th width="130">Rate *</th>
                        <th width="130">Total</th>
                        <th width="70">Action</th>
                    </tr>
                </thead>

                <tbody id="itemsBody">
                    @foreach($formItems as $item)
                    <tr>
                        <td>
                            <input type="text"
                                   name="service_name[]"
                                   value="{{ $item['service_name'] }}"
                                   required>
                        </td>
                        <td>
                            <textarea name="description[]" rows="2">{{ $item['description'] }}</textarea>
                        </td>
                        <td>
                            <input type="number"
                                   name="quantity[]"
                                   class="qty"
                                   value="{{ $item['quantity'] }}"
                                   min="1"
                                   step="0.01"
                                   required>
                        </td>
                        <td>
                            <input type="number"
                                   name="unit_price[]"
                                   class="rate"
                                   value="{{ $item['unit_price'] }}"
                                   min="0"
                                   step="0.01"
                                   required>
                        </td>
                        <td>
                            <input type="number"
                                   class="line-total"
                                   value="0"
                                   readonly>
                        </td>
                        <td>
                            <button type="button" class="btn-sm btn-delete remove-row">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <button type="button" class="btn-primary mt-3" id="addRow">
            <i class="fas fa-plus"></i> Add Service
        </button>
        </div>
        </section>

        <section class="quotation-pricing-card">
        <div class="quotation-section-header"><i class="fas fa-calculator"></i><div><h3>Pricing Summary</h3><p>Review discounts, tax and final quotation value</p></div></div>
        <div class="quotation-pricing-body">
        <div class="quotation-pricing-grid">
            <div class="form-group">
                <label>Subtotal</label>
                <input type="number" id="subtotal" value="0" readonly>
            </div>

            <div class="form-group">
                <label>Discount</label>
                <input type="number"
                       name="discount"
                       id="discount"
                       value="{{ old('discount', $quotation->discount ?? 0) }}"
                       min="0"
                       step="0.01">
            </div>

            <div class="form-group">
                <label>GST %</label>
                <input type="number"
                       name="gst_percent"
                       id="gst_percent"
                       value="{{ old('gst_percent', $quotation->gst_percent ?? 18) }}"
                       min="0"
                       step="0.01">
            </div>

            <div class="form-group">
                <label>GST Amount</label>
                <input type="number" id="gst_amount" value="0" readonly>
            </div>

            <div class="form-group grand-total-field">
                <label>Grand Total</label>
                <input type="number" id="grand_total" value="0" readonly>
            </div>
        </div>
        </div>
        </section>

        <div class="form-group mt-3">
            <label>Remarks</label>
            <textarea name="remarks" rows="3">{{ old('remarks', $quotation->remarks ?? '') }}</textarea>
        </div>

        <div class="form-actions mt-4">
            <button type="submit" class="btn-primary">
                {{ $isEdit ? 'Update Quotation' : 'Save Quotation' }}
            </button>

            <a href="{{ route('admin.quotations.index') }}" class="btn-secondary">
                Cancel
            </a>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const itemsBody = document.getElementById('itemsBody');
    const addRowBtn = document.getElementById('addRow');
    const subtotalInput = document.getElementById('subtotal');
    const discountInput = document.getElementById('discount');
    const gstPercentInput = document.getElementById('gst_percent');
    const gstAmountInput = document.getElementById('gst_amount');
    const grandTotalInput = document.getElementById('grand_total');
    const leadSelect = document.getElementById('leadSelect');
    const leadNumber = document.getElementById('selectedLeadNumber');
    const customerName = document.getElementById('selectedCustomer');
    const customerMobile = document.getElementById('selectedMobile');
    const enquiryType = document.getElementById('selectedEnquiry');

    function syncSelectedLead() {
        const option = leadSelect.options[leadSelect.selectedIndex];
        const hasLead = option && option.value;
        leadNumber.textContent = hasLead ? option.dataset.number : '-';
        customerName.textContent = hasLead ? option.dataset.customer : '-';
        customerMobile.textContent = hasLead ? option.dataset.mobile : '-';
        enquiryType.textContent = hasLead ? option.dataset.enquiry : '-';
        const firstService = itemsBody.querySelector('input[name="service_name[]"]');
        if (hasLead && firstService && !firstService.value.trim()) firstService.value = option.dataset.enquiry || '';
    }

    function calculateTotals() {
        let subtotal = 0;

        itemsBody.querySelectorAll('tr').forEach(function (row) {
            const qty = parseFloat(row.querySelector('.qty').value) || 0;
            const rate = parseFloat(row.querySelector('.rate').value) || 0;
            const total = qty * rate;

            row.querySelector('.line-total').value = total.toFixed(2);
            subtotal += total;
        });

        const discount = parseFloat(discountInput.value) || 0;
        const gstPercent = parseFloat(gstPercentInput.value) || 0;
        const taxableAmount = Math.max(subtotal - discount, 0);
        const gstAmount = taxableAmount * gstPercent / 100;
        const grandTotal = taxableAmount + gstAmount;

        subtotalInput.value = subtotal.toFixed(2);
        gstAmountInput.value = gstAmount.toFixed(2);
        grandTotalInput.value = grandTotal.toFixed(2);
    }

    function bindCalculation(row) {
        row.querySelectorAll('.qty, .rate').forEach(function (input) {
            input.addEventListener('input', calculateTotals);
        });

        row.querySelector('.remove-row').addEventListener('click', function () {
            if (itemsBody.querySelectorAll('tr').length > 1) {
                row.remove();
                calculateTotals();
            }
        });
    }

    addRowBtn.addEventListener('click', function () {
        const row = document.createElement('tr');

        row.innerHTML = `
            <td>
                <input type="text" name="service_name[]" required>
            </td>
            <td>
                <textarea name="description[]" rows="2"></textarea>
            </td>
            <td>
                <input type="number" name="quantity[]" class="qty" value="1" min="1" step="0.01" required>
            </td>
            <td>
                <input type="number" name="unit_price[]" class="rate" value="0" min="0" step="0.01" required>
            </td>
            <td>
                <input type="number" class="line-total" value="0" readonly>
            </td>
            <td>
                <button type="button" class="btn-sm btn-delete remove-row">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;

        itemsBody.appendChild(row);
        bindCalculation(row);
        calculateTotals();
    });

    itemsBody.querySelectorAll('tr').forEach(bindCalculation);

    discountInput.addEventListener('input', calculateTotals);
    gstPercentInput.addEventListener('input', calculateTotals);
    leadSelect.addEventListener('change', syncSelectedLead);

    syncSelectedLead();
    calculateTotals();
});
</script>

@endsection