@extends('layouts.app')

@section('title', 'New Quote')

@section('content')
<div class="mb-4">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-1 small text-uppercase">
            <li class="breadcrumb-item"><a href="{{ route('quotes.index') }}" class="text-decoration-none text-muted">Sales</a></li>
            <li class="breadcrumb-item"><a href="{{ route('quotes.index') }}" class="text-decoration-none text-muted">Quotes</a></li>
            <li class="breadcrumb-item active fw-bold text-primary">New Quote</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center">
        <h2 class="h4 fw-bold mb-0">New Quote</h2>
        <a href="{{ route('quotes.index') }}" class="btn btn-outline-secondary btn-sm rounded-pill px-3">
            <i class="fas fa-times me-1"></i> Cancel
        </a>
    </div>
</div>

<form action="{{ route('quotes.store') }}" method="POST" id="quote-form">
    @csrf
    <div class="card border-0 shadow-sm rounded-4 mb-4">
        <div class="card-body p-4">
            <div class="row g-4 mb-4">
                <!-- Customer Selection -->
                <div class="col-md-6">
                    <label class="form-label fw-bold small text-muted text-uppercase mb-2">Customer Name*</label>
                    <div class="input-group">
                        <select name="customer_id" class="form-select select2 border-light-subtle" required id="customer_id">
                            <option value="">Select or add a customer</option>
                            @foreach($customers as $customer)
                                <option value="{{ $customer->id }}">{{ $customer->display_name ?: $customer->name }}</option>
                            @endforeach
                        </select>
                        <button class="btn btn-primary" type="button" title="Add New Customer">
                            <i class="fas fa-plus"></i>
                        </button>
                    </div>
                </div>

                <!-- Quote Number -->
                <div class="col-md-6">
                    <label class="form-label fw-bold small text-muted text-uppercase mb-2">Quote#*</label>
                    <div class="input-group">
                        <input type="text" name="quote_number" class="form-control border-light-subtle" value="{{ $nextNumber }}" required>
                        <span class="input-group-text bg-white text-muted">
                            <i class="fas fa-cog"></i>
                        </span>
                    </div>
                </div>

                <!-- Reference -->
                <div class="col-md-6">
                    <label class="form-label fw-bold small text-muted text-uppercase mb-2">Reference#</label>
                    <input type="text" name="reference_number" class="form-control border-light-subtle">
                </div>

                <!-- Dates -->
                <div class="col-md-6">
                    <div class="row g-2">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase mb-2 text-danger">Quote Date*</label>
                            <input type="date" name="quote_date" class="form-control border-light-subtle" value="{{ date('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold small text-muted text-uppercase mb-2">Expiry Date</label>
                            <input type="date" name="expiry_date" class="form-control border-light-subtle" value="{{ date('Y-m-d', strtotime('+30 days')) }}">
                        </div>
                    </div>
                </div>

                <!-- Salesperson & Project -->
                <div class="col-md-6">
                    <label class="form-label fw-bold small text-muted text-uppercase mb-2">Salesperson</label>
                    <select name="salesperson_id" class="form-select border-light-subtle">
                        <option value="">Select or Add Salesperson</option>
                        @foreach($salespersons as $person)
                            <option value="{{ $person->id }}">{{ $person->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label fw-bold small text-muted text-uppercase mb-2">Project Name</label>
                    <select name="project_id" class="form-select border-light-subtle">
                        <option value="">Select a project</option>
                        @foreach($projects as $project)
                            <option value="{{ $project->id }}">{{ $project->name }}</option>
                        @endforeach
                    </select>
                    <div class="form-text small opacity-75">Select a customer to associate a project.</div>
                </div>

                <!-- Subject -->
                <div class="col-12">
                    <label class="form-label fw-bold small text-muted text-uppercase mb-2 d-flex align-items-center">
                        Subject <i class="fas fa-info-circle ms-2 cursor-pointer" title="Let your customer know what this Quote is for"></i>
                    </label>
                    <textarea name="subject" class="form-control border-light-subtle" rows="2" placeholder="Let your customer know what this Quote is for"></textarea>
                </div>
            </div>

            <!-- Item Table Section -->
            <div class="item-table-container mb-4">
                <div class="d-flex justify-content-between align-items-center py-2 bg-light px-3 mb-0 border rounded-top-3">
                    <span class="fw-bold small text-uppercase">Item Table</span>
                    <button type="button" class="btn btn-link btn-sm text-primary text-decoration-none fw-bold">
                        <i class="fas fa-cog me-1"></i> Bulk Actions
                    </button>
                </div>
                <div class="table-responsive border border-top-0 rounded-bottom-3 mb-3">
                    <table class="table table-hover align-middle mb-0" id="items-table">
                        <thead class="bg-light-subtle small fw-bold text-muted text-uppercase">
                            <tr>
                                <th class="ps-4" style="width: 40px;"></th>
                                <th>Item Details</th>
                                <th style="width: 120px;">Quantity</th>
                                <th style="width: 150px;">Rate</th>
                                <th class="text-end pe-4" style="width: 150px;">Amount</th>
                                <th style="width: 50px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="item-row">
                                <td class="ps-4">
                                    <i class="fas fa-grip-vertical text-muted cursor-move opacity-50"></i>
                                </td>
                                <td>
                                    <select name="items[0][item_id]" class="form-select border-0 bg-transparent item-select" required>
                                        <option value="">Type or click to select an item.</option>
                                        @foreach($items as $item)
                                            <option value="{{ $item->id }}" data-rate="{{ $item->sales_price }}" data-desc="{{ $item->sales_description }}">{{ $item->name }}</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" name="items[0][item_name]" class="item-name-hidden">
                                </td>
                                <td>
                                    <input type="number" name="items[0][quantity]" class="form-control border-0 bg-transparent text-end qty" value="1.00" step="0.01" required>
                                </td>
                                <td>
                                    <div class="input-group input-group-sm">
                                        <input type="number" name="items[0][rate]" class="form-control border-0 bg-transparent text-end rate" value="0.00" step="0.01" required>
                                        <span class="input-group-text bg-transparent border-0"><i class="fas fa-book-open"></i></span>
                                    </div>
                                </td>
                                <td class="text-end pe-4 fw-bold text-dark amount-label">0.00</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-link text-danger p-0 remove-row" title="Remove Item"><i class="fas fa-times"></i></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <div class="d-flex gap-2">
                    <div class="dropdown">
                        <button class="btn btn-primary d-flex align-items-center gap-2 rounded-3" type="button" id="add-item">
                            <i class="fas fa-plus-circle"></i> Add New Row
                        </button>
                        <button class="btn btn-primary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                            <span class="visually-hidden">Toggle Dropdown</span>
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Add 5 rows</a></li>
                            <li><a class="dropdown-item" href="#">Add 10 rows</a></li>
                        </ul>
                    </div>
                    <button type="button" class="btn btn-outline-primary d-flex align-items-center gap-2 rounded-3">
                        <i class="fas fa-plus-square"></i> Add Items in Bulk
                    </button>
                    
                    <div class="ms-3 pt-2">
                        <a href="#" class="text-decoration-none text-muted small d-flex align-items-center fw-bold">
                            <i class="fas fa-tag me-2"></i> Reporting Tags <i class="fas fa-caret-down ms-1"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Footer Section: Notes & Calculations -->
            <div class="row g-4 mt-4 pt-4 border-top">
                <div class="col-md-6">
                    <div class="mb-4">
                        <label class="form-label fw-bold small text-muted text-uppercase mb-2">Customer Notes</label>
                        <textarea name="notes" class="form-control border-light-subtle" rows="3" placeholder="Looking forward for your business.">Looking forward for your business.</textarea>
                    </div>
                    <div>
                        <label class="form-label fw-bold small text-muted text-uppercase mb-2">Terms & Conditions</label>
                        <textarea name="terms" class="form-control border-light-subtle" rows="4" placeholder="Enter the terms and conditions of your business to be displayed in your transaction"></textarea>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="bg-light rounded-4 p-4">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <span class="fw-bold">Sub Total</span>
                            <span class="fw-bold" id="label-subtotal">0.00</span>
                            <input type="hidden" name="subtotal" id="input-subtotal" value="0">
                        </div>

                        <div class="row align-items-center mb-3 g-2">
                            <div class="col-4">
                                <span class="text-muted">Discount</span>
                            </div>
                            <div class="col-8 d-flex gap-2 align-items-center">
                                <div class="input-group input-group-sm">
                                    <input type="number" name="discount" class="form-control text-end" id="input-discount" value="0" step="0.01">
                                    <select name="discount_type" class="form-select w-auto" id="input-discount-type">
                                        <option value="percentage">%</option>
                                        <option value="fixed">Fixed</option>
                                    </select>
                                </div>
                                <span class="text-muted text-end w-25" id="label-discount-amount">0.00</span>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex gap-3">
                                <div class="form-check">
                                    <input class="form-check-input tax-type-radio" type="radio" name="tax_type" id="taxTds" value="tds">
                                    <label class="form-check-label small" for="taxTds">TDS</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input tax-type-radio" type="radio" name="tax_type" id="taxTcs" value="tcs">
                                    <label class="form-check-label small" for="taxTcs">TCS</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input tax-type-radio" type="radio" name="tax_type" id="taxNone" value="none" checked>
                                    <label class="form-check-label small" for="taxNone">None</label>
                                </div>
                            </div>
                            <select name="tax_id" class="form-select form-select-sm w-50" id="input-tax">
                                <option value="" data-rate="0">Select a Tax</option>
                                @foreach($taxes as $tax)
                                    <option value="{{ $tax->id }}" data-rate="{{ $tax->rate }}">{{ $tax->name }} ({{ $tax->rate }}%)</option>
                                @endforeach
                            </select>
                            <input type="hidden" name="tax_amount" id="input-tax-amount" value="0">
                        </div>

                        <div class="row align-items-center mb-4 g-2">
                            <div class="col-4">
                                <div class="input-group input-group-sm border border-dashed rounded">
                                    <input type="text" class="form-control border-0 bg-transparent text-muted small" value="Adjustment" readonly>
                                    <span class="input-group-text bg-transparent border-0 text-muted"><i class="fas fa-question-circle"></i></span>
                                </div>
                            </div>
                            <div class="col-8 d-flex gap-2 align-items-center">
                                <input type="number" name="adjustment" class="form-control form-control-sm text-end w-75" id="input-adjustment" value="0" step="0.01">
                                <span class="text-muted text-end w-25" id="label-adjustment">0.00</span>
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <h4 class="fw-bold mb-0">Total ( ₹ )</h4>
                            <h4 class="fw-bold mb-0 text-dark" id="label-total">0.00</h4>
                            <input type="hidden" name="total_amount" id="input-total" value="0">
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-5 pt-4 border-top d-flex justify-content-between align-items-start">
                <div class="small text-muted fst-italic">
                    Additional Fields: Start adding custom fields for your quotes by going to <a href="#" class="text-decoration-none">Settings → Sales → Quotes</a>.
                </div>
                <div class="d-flex flex-column align-items-end">
                    <label class="form-label small text-muted fw-bold text-uppercase mb-2">Attach File(s) to Quote</label>
                    <div class="upload-zone p-2 border border-dashed rounded-3 text-center bg-white" style="width: 200px;">
                        <label for="attachment" class="cursor-pointer mb-0">
                            <i class="fas fa-upload text-primary mb-1"></i>
                            <div class="small fw-bold">Upload File</div>
                            <input type="file" id="attachment" name="attachment" class="d-none">
                        </label>
                    </div>
                    <div class="mt-1 small text-muted">You can upload a maximum of 5 files, 10MB each</div>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-top">
                <button type="submit" name="status" value="sent" class="btn btn-primary px-5 py-2 rounded-pill fw-bold">Save & Send</button>
                <button type="submit" name="status" value="draft" class="btn btn-outline-primary px-5 py-2 rounded-pill fw-bold ms-2">Save as Draft</button>
                <a href="{{ route('quotes.index') }}" class="btn btn-link text-muted ms-3 text-decoration-none">Cancel</a>
            </div>
        </div>
    </div>
</form>

<style>
    .border-light-subtle { border-color: #e9ecef !important; }
    .bg-light-subtle { background-color: #f8f9fa; }
    .cursor-move { cursor: move; }
    .cursor-pointer { cursor: pointer; }
    .border-dashed { border-style: dashed !important; }
    .upload-zone:hover { background-color: #f0f7ff !important; border-color: #0d6efd !important; }
    .item-row:hover .remove-row { color: #dc3545 !important; }
    .input-group-text { border-color: #e9ecef; }
</style>

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

    // Add Row
    document.getElementById('add-item').addEventListener('click', function() {
        const tbody = document.querySelector('#items-table tbody');
        const nextId = rowCount++;
        const newRow = `
            <tr class="item-row">
                <td class="ps-4">
                    <i class="fas fa-grip-vertical text-muted cursor-move opacity-50"></i>
                </td>
                <td>
                    <select name="items[${nextId}][item_id]" class="form-select border-0 bg-transparent item-select" required>
                        <option value="">Type or click to select an item.</option>
                        @foreach($items as $item)
                            <option value="{{ $item->id }}" data-rate="{{ $item->sales_price }}" data-desc="{{ $item->sales_description }}">{{ $item->name }}</option>
                        @endforeach
                    </select>
                    <input type="hidden" name="items[${nextId}][item_name]" class="item-name-hidden">
                </td>
                <td>
                    <input type="number" name="items[${nextId}][quantity]" class="form-control border-0 bg-transparent text-end qty" value="1.00" step="0.01" required>
                </td>
                <td>
                    <div class="input-group input-group-sm">
                        <input type="number" name="items[${nextId}][rate]" class="form-control border-0 bg-transparent text-end rate" value="0.00" step="0.01" required>
                        <span class="input-group-text bg-transparent border-0"><i class="fas fa-book-open"></i></span>
                    </div>
                </td>
                <td class="text-end pe-4 fw-bold text-dark amount-label">0.00</td>
                <td class="text-center">
                    <button type="button" class="btn btn-link text-danger p-0 remove-row" title="Remove Item"><i class="fas fa-times"></i></button>
                </td>
            </tr>
        `;
        tbody.insertAdjacentHTML('beforeend', newRow);
        calculateAll();
    });

    // Remove Row
    document.querySelector('#items-table').addEventListener('click', function(e) {
        if (e.target.closest('.remove-row')) {
            if (document.querySelectorAll('.item-row').length > 1) {
                e.target.closest('tr').remove();
                calculateAll();
            }
        }
    });

    // Item Selection Change
    document.querySelector('#items-table').addEventListener('change', function(e) {
        if (e.target.classList.contains('item-select')) {
            const tr = e.target.closest('tr');
            const option = e.target.selectedOptions[0];
            const rate = parseFloat(option.dataset.rate) || 0;
            const name = option.text;
            
            tr.querySelector('.rate').value = rate.toFixed(2);
            tr.querySelector('.item-name-hidden').value = name;
            calculateAll();
        }
    });

    // Input Change
    document.querySelector('#quote-form').addEventListener('input', function(e) {
        if (e.target.classList.contains('qty') || e.target.classList.contains('rate') || 
            ['input-discount', 'input-discount-type', 'input-tax', 'input-adjustment'].includes(e.target.id) ||
            e.target.classList.contains('tax-type-radio')) {
            calculateAll();
        }
    });

    function calculateAll() {
        let subtotal = 0;
        document.querySelectorAll('.item-row').forEach(row => {
            const qty = parseFloat(row.querySelector('.qty').value) || 0;
            const rate = parseFloat(row.querySelector('.rate').value) || 0;
            const amount = qty * rate;
            row.querySelector('.amount-label').innerText = amount.toFixed(2);
            subtotal += amount;
        });

        document.getElementById('label-subtotal').innerText = subtotal.toFixed(2);
        document.getElementById('input-subtotal').value = subtotal;

        // Discount
        const discountVal = parseFloat(document.getElementById('input-discount').value) || 0;
        const discountType = document.getElementById('input-discount-type').value;
        let discountAmount = 0;
        if (discountType === 'percentage') {
            discountAmount = (subtotal * discountVal) / 100;
        } else {
            discountAmount = discountVal;
        }
        document.getElementById('label-discount-amount').innerText = discountAmount.toFixed(2);

        const discountedSubtotal = subtotal - discountAmount;

        // Tax
        const taxOption = document.getElementById('input-tax').selectedOptions[0];
        const taxRate = parseFloat(taxOption.dataset.rate) || 0;
        const taxType = document.querySelector('.tax-type-radio:checked').value;
        
        let taxAmount = (discountedSubtotal * taxRate) / 100;
        // TDS/TCS logic: traditionally TDS is deducted from total, but in Zoho it might be shown separately.
        // For simplicity, we'll follow standard calculation and if tax_type is 'none' but a tax is selected, it's GST.
        
        document.getElementById('input-tax-amount').value = taxAmount;

        // Adjustment
        const adjustment = parseFloat(document.getElementById('input-adjustment').value) || 0;
        document.getElementById('label-adjustment').innerText = adjustment.toFixed(2);

        // Total
        let total = discountedSubtotal + taxAmount + adjustment;
        
        // If TDS, usually it's deducted, but let's just show it in total for now as per tax selection
        // In the UI mockup, it's just a selection.
        
        document.getElementById('label-total').innerText = total.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        document.getElementById('input-total').value = total;
    }

    calculateAll();
});
</script>
@endpush
@endsection