@extends('layouts.app')

@section('title', 'New Export Quotation')

@section('breadcrumbs')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('export.dashboard') }}">Export</a></li>
        <li class="breadcrumb-item"><a href="{{ route('export.quotations.index') }}">Quotations</a></li>
        <li class="breadcrumb-item active">Create</li>
    </ol>
</nav>
@endsection

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 mb-1 text-dark fw-semibold">New Export Quotation</h1>
        <p class="text-muted mb-0">Create a new export quotation</p>
    </div>
    <a href="{{ route('export.quotations.index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left me-1"></i> Back
    </a>
</div>

<form action="{{ route('export.quotations.store') }}" method="POST" id="quotationForm">
    @csrf

    @if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show">
        <i class="bi bi-exclamation-triangle me-2"></i>
        <ul class="mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    @endif

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white py-3"><h5 class="mb-0 fw-semibold"><i class="bi bi-info-circle me-2 text-primary"></i>Quotation Details</h5></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-medium">Reference Inquiry</label>
                    <select name="inquiry_id" class="form-select" id="inquirySelect">
                        <option value="">Select Inquiry</option>
                        @foreach($inquiries as $inquiry)
                            <option value="{{ $inquiry->id }}" {{ request('inquiry_id') == $inquiry->id ? 'selected' : '' }} data-customer="{{ $inquiry->customer_id }}" data-commodity="{{ $inquiry->commodity_id }}">
                                {{ $inquiry->inquiry_number }} - {{ $inquiry->customer->name ?? '' }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Customer <span class="text-danger">*</span></label>
                    <select name="customer_id" class="form-select" required id="customerSelect">
                        <option value="">Select Customer</option>
                        @foreach($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Quotation Date <span class="text-danger">*</span></label>
                    <input type="date" name="date" class="form-control" value="{{ date('Y-m-d') }}" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Valid Until</label>
                    <input type="date" name="valid_until" class="form-control" value="{{ date('Y-m-d', strtotime('+30 days')) }}">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Currency <span class="text-danger">*</span></label>
                    <select name="currency" class="form-select" required>
                        @foreach(['USD', 'EUR', 'GBP', 'AED', 'SAR', 'INR'] as $currency)
                            <option value="{{ $currency }}" {{ old('currency', 'USD') == $currency ? 'selected' : '' }}>{{ $currency }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Payment Terms</label>
                    <select name="payment_terms" class="form-select">
                        @foreach(['TT Advance', 'TT Against Documents', 'LC At Sight', 'LC Usance', 'DA 30', 'DA 60', 'DP'] as $term)
                            <option value="{{ $term }}">{{ $term }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Delivery Terms</label>
                    <input type="text" name="delivery_terms" class="form-control" placeholder="e.g., 30 days from LC">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Shipping Terms</label>
                    <select name="incoterm" class="form-select">
                        @foreach(['FOB', 'CIF', 'CFR', 'EXW', 'FCA'] as $term)
                            <option value="{{ $term }}">{{ $term }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-semibold"><i class="bi bi-list-ul me-2 text-primary"></i>Line Items</h5>
            <button type="button" class="btn btn-sm btn-outline-primary" id="addItemBtn">
                <i class="bi bi-plus-lg me-1"></i> Add Item
            </button>
        </div>
        <div class="card-body p-0">
            @include('export.quotations.partials._items')
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-medium">Terms & Conditions</label>
                    <textarea name="terms_conditions" class="form-control" rows="4">{{ old('terms_conditions', $settings->default_quotation_terms ?? '') }}</textarea>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-medium">Notes / Remarks</label>
                    <textarea name="notes" class="form-control" rows="4" placeholder="Internal notes or special remarks...">{{ old('notes') }}</textarea>
                    <div class="mt-3 text-end">
                        <table class="table table-sm w-auto ms-auto">
                            <tr><td class="text-muted">Subtotal:</td><td class="text-end fw-medium" id="subtotal">0.00</td></tr>
                            <tr><td class="text-muted">Tax:</td><td><input type="number" step="0.01" name="tax_rate" class="form-control form-control-sm d-inline-block" style="width:80px" value="{{ old('tax_rate', 0) }}"> %</td><td class="text-end fw-medium" id="taxAmount">0.00</td></tr>
                            <tr><td class="text-muted fw-bold">Total:</td><td class="text-end fw-bold fs-5" id="grandTotal">0.00</td></tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2 mb-5">
        <button type="submit" name="action" value="draft" class="btn btn-outline-secondary px-4">Save as Draft</button>
        <button type="submit" name="action" value="send" class="btn btn-primary px-4"><i class="bi bi-send me-1"></i> Send Quotation</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let itemIndex = 0;

    document.getElementById('addItemBtn').addEventListener('click', function() {
        itemIndex++;
        const template = document.getElementById('itemRowTemplate').innerHTML.replace(/\{\{index\}\}/g, itemIndex);
        document.getElementById('itemsBody').insertAdjacentHTML('beforeend', template);
        initAutocomplete(itemIndex);
    });

    document.getElementById('itemsBody').addEventListener('click', function(e) {
        if (e.target.closest('.removeItem')) {
            e.target.closest('tr').remove();
            calculateTotals();
        }
    });

    document.getElementById('itemsBody').addEventListener('input', function() {
        const row = e.target.closest('tr');
        if (row) {
            const qty = parseFloat(row.querySelector('[name*="quantity"]')?.value) || 0;
            const price = parseFloat(row.querySelector('[name*="unit_price"]')?.value) || 0;
            const total = qty * price;
            const totalCell = row.querySelector('.line-total');
            if (totalCell) totalCell.textContent = total.toFixed(2);
        }
        calculateTotals();
    });

    function calculateTotals() {
        let subtotal = 0;
        document.querySelectorAll('.line-total').forEach(el => { subtotal += parseFloat(el.textContent) || 0; });
        document.getElementById('subtotal').textContent = subtotal.toFixed(2);
        const taxRate = parseFloat(document.querySelector('[name="tax_rate"]').value) || 0;
        const tax = subtotal * taxRate / 100;
        document.getElementById('taxAmount').textContent = tax.toFixed(2);
        document.getElementById('grandTotal').textContent = (subtotal + tax).toFixed(2);
    }

    document.querySelector('[name="tax_rate"]').addEventListener('input', calculateTotals);

    document.getElementById('inquirySelect').addEventListener('change', function() {
        const opt = this.options[this.selectedIndex];
        if (opt.value) {
            document.getElementById('customerSelect').value = opt.dataset.customer;
        }
    });
});
</script>

<script type="text/html" id="itemRowTemplate">
<tr class="item-row">
    <td class="px-3">
        <select name="items[{{index}}][product_id]" class="form-select form-select-sm">
            <option value="">Select Product</option>
            @foreach($products as $product)
                <option value="{{ $product->id }}">{{ $product->name }}</option>
            @endforeach
        </select>
    </td>
    <td class="px-3"><input type="text" name="items[{{index}}][description]" class="form-control form-control-sm" placeholder="Description"></td>
    <td class="px-3"><input type="number" step="0.01" name="items[{{index}}][quantity]" class="form-control form-control-sm qty-input" placeholder="0"></td>
    <td class="px-3"><input type="number" step="0.01" name="items[{{index}}][unit_price]" class="form-control form-control-sm price-input" placeholder="0.00"></td>
    <td class="px-3 text-end fw-medium line-total">0.00</td>
    <td class="px-3 text-center"><button type="button" class="btn btn-sm btn-outline-danger removeItem"><i class="bi bi-trash"></i></button></td>
</tr>
</script>
@endpush