@extends('layouts.app')

@section('title', 'Edit 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"><a href="{{ route('quotes.show', $quote->id) }}" class="text-decoration-none text-muted">{{ $quote->quote_number }}</a></li>
            <li class="breadcrumb-item active fw-bold text-primary">Edit</li>
        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center">
        <h2 class="h4 fw-bold mb-0">Edit Quote: {{ $quote->quote_number }}</h2>
        <a href="{{ route('quotes.show', $quote->id) }}" 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.update', $quote->id) }}" method="POST" id="quote-form">
    @csrf
    @method('PUT')
    <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 }}" {{ $quote->customer_id == $customer->id ? 'selected' : '' }}>
                                    {{ $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="{{ $quote->quote_number }}" 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" value="{{ $quote->reference_number }}">
                </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="{{ $quote->quote_date }}" 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="{{ $quote->expiry_date }}">
                        </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 }}" {{ $quote->salesperson_id == $person->id ? 'selected' : '' }}>
                                {{ $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 }}" {{ $quote->project_id == $project->id ? 'selected' : '' }}>
                                {{ $project->name }}
                            </option>
                        @endforeach
                    </select>
                </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">{{ $quote->subject }}</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>
                            @foreach($quote->items as $index => $qItem)
                            <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[{{ $index }}][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 }}" {{ $qItem->item_id == $item->id ? 'selected' : '' }}>
                                                {{ $item->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" name="items[{{ $index }}][item_name]" class="item-name-hidden" value="{{ $qItem->item_name }}">
                                </td>
                                <td>
                                    <input type="number" name="items[{{ $index }}][quantity]" class="form-control border-0 bg-transparent text-end qty" value="{{ number_format($qItem->quantity, 2, '.', '') }}" step="0.01" required>
                                </td>
                                <td>
                                    <div class="input-group input-group-sm">
                                        <input type="number" name="items[{{ $index }}][rate]" class="form-control border-0 bg-transparent text-end rate" value="{{ number_format($qItem->rate, 2, '.', '') }}" 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">{{ number_format($qItem->amount, 2, '.', '') }}</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>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="d-flex gap-2">
                    <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 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>
            </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">{{ $quote->notes }}</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">{{ $quote->terms }}</textarea>
                    </div>
                    <div class="mt-4">
                        <label class="form-label fw-bold small text-muted text-uppercase mb-2">Status</label>
                        <select name="status" class="form-select border-light-subtle w-50 rounded-pill">
                            <option value="draft" {{ $quote->status == 'draft' ? 'selected' : '' }}>Draft</option>
                            <option value="sent" {{ $quote->status == 'sent' ? 'selected' : '' }}>Sent</option>
                            <option value="accepted" {{ $quote->status == 'accepted' ? 'selected' : '' }}>Accepted</option>
                            <option value="rejected" {{ $quote->status == 'rejected' ? 'selected' : '' }}>Rejected</option>
                        </select>
                    </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">{{ number_format($quote->subtotal, 2) }}</span>
                            <input type="hidden" name="subtotal" id="input-subtotal" value="{{ $quote->subtotal }}">
                        </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="{{ $quote->discount }}" step="0.01">
                                    <select name="discount_type" class="form-select w-auto" id="input-discount-type">
                                        <option value="percentage" {{ $quote->discount_type == 'percentage' ? 'selected' : '' }}>%</option>
                                        <option value="fixed" {{ $quote->discount_type == 'fixed' ? 'selected' : '' }}>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" {{ $quote->tax_type == 'tds' ? 'checked' : '' }}>
                                    <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" {{ $quote->tax_type == 'tcs' ? 'checked' : '' }}>
                                    <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" {{ $quote->tax_type == 'none' || !$quote->tax_type ? '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 }}" {{ $quote->tax_id == $tax->id ? 'selected' : '' }}>{{ $tax->name }} ({{ $tax->rate }}%)</option>
                                @endforeach
                            </select>
                            <input type="hidden" name="tax_amount" id="input-tax-amount" value="{{ $quote->tax_amount }}">
                        </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="{{ $quote->adjustment }}" step="0.01">
                                <span class="text-muted text-end w-25" id="label-adjustment">{{ number_format($quote->adjustment, 2) }}</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">{{ number_format($quote->total_amount, 2) }}</h4>
                            <input type="hidden" name="total_amount" id="input-total" value="{{ $quote->total_amount }}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="mt-4 pt-4 border-top">
                <button type="submit" class="btn btn-primary px-5 py-2 rounded-pill fw-bold">Update Quote</button>
                <a href="{{ route('quotes.show', $quote->id) }}" 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; }
    .item-row:hover .remove-row { color: #dc3545 !important; }
</style>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let rowCount = {{ count($quote->items) }};

    // 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 }}">{{ $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;
        
        const taxAmount = (discountedSubtotal * taxRate) / 100;
        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;
        document.getElementById('label-total').innerText = total.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        document.getElementById('input-total').value = total;
    }

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