@extends('layouts.app')

@section('title', 'New Credit Note')

@push('css')
<style>
    .sticky-summary {
        position: sticky;
        top: 20px;
    }
    .form-section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #0d6efd;
        border-bottom: 2px solid #eef2f7;
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .calculation-summary-card {
        background-color: #f8f9fa;
        border: 1px solid #eef2f7;
    }
    .item-table th {
        background-color: #f8f9fa;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.5px;
        color: #6c757d;
    }
</style>
@endpush

@section('content')
<div class="row align-items-center mb-4">
    <div class="col">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ route('credit-notes.index') }}">Credit Notes</a></li>
                <li class="breadcrumb-item active" aria-current="page">New Credit Note</li>
            </ol>
        </nav>
        <h2 class="h4 mb-0">New Credit Note</h2>
    </div>
</div>

<form action="{{ route('credit-notes.store') }}" method="POST" id="credit-note-form">
    @csrf
    <div class="row">
        <!-- Left Column: Form Details -->
        <div class="col-lg-8">
            <div class="card stat-card border-0 mb-4 shadow-sm">
                <div class="card-body p-4">
                    <!-- Section 1: Basic Details -->
                    <div class="form-section-title">
                        <i class="fas fa-user-circle me-2"></i> Basic Details
                    </div>
                    <div class="row mb-4">
                        <div class="col-md-6 mb-3">
                            <label for="customer_id" class="form-label text-muted small fw-bold">Customer Name *</label>
                            <select name="customer_id" id="customer_id" class="form-select @error('customer_id') is-invalid @enderror" required>
                                <option value="">Select Customer</option>
                                @foreach($customers as $customer)
                                    <option value="{{ $customer->id }}" {{ old('customer_id') == $customer->id ? 'selected' : '' }}>{{ $customer->name }}</option>
                                @endforeach
                            </select>
                            @error('customer_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="credit_note_number" class="form-label text-muted small fw-bold">Credit Note # *</label>
                            <input type="text" name="credit_note_number" id="credit_note_number" class="form-control @error('credit_note_number') is-invalid @enderror" value="{{ old('credit_note_number', $cnNumber) }}" required>
                            @error('credit_note_number') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="invoice_id" class="form-label text-muted small fw-bold">Link to Invoice (Optional)</label>
                            <select name="invoice_id" id="invoice_id" class="form-select">
                                <option value="">Select Invoice</option>
                                @foreach($invoices as $invoice)
                                    <option value="{{ $invoice->id }}" data-customer="{{ $invoice->customer_id }}">{{ $invoice->invoice_number }} ({{ formatCurrency($invoice->total_amount) }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="date" class="form-label text-muted small fw-bold">Date *</label>
                            <input type="date" name="date" id="date" class="form-control @error('date') is-invalid @enderror" value="{{ old('date', date('Y-m-d')) }}" required>
                            @error('date') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                    </div>

                    <!-- Section 2: Item Table -->
                    <div class="form-section-title d-flex justify-content-between align-items-center">
                        <span><i class="fas fa-list me-2"></i> Item Details</span>
                        <button type="button" class="btn btn-outline-primary btn-sm" id="add-row">
                            <i class="fas fa-plus me-1"></i> Add Item
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="table item-table align-middle" id="items-table">
                            <thead>
                                <tr>
                                    <th style="width: 45%;">Item Name</th>
                                    <th style="width: 15%; text-align: center;">Qty</th>
                                    <th style="width: 20%; text-align: right;">Rate</th>
                                    <th style="width: 20%; text-align: right;">Amount</th>
                                    <th style="width: 50px;"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr class="item-row">
                                    <td>
                                        <select name="items[0][item_id]" class="form-select item-selector" required>
                                            <option value="">Select Item</option>
                                            @foreach($items as $item)
                                                <option value="{{ $item->id }}" data-price="{{ $item->sales_price }}">{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                        <input type="hidden" name="items[0][name]" class="item-name-input">
                                    </td>
                                    <td><input type="number" name="items[0][quantity]" class="form-control qty-input text-center" step="0.01" min="0.01" value="1" required></td>
                                    <td><input type="number" name="items[0][rate]" class="form-control rate-input text-end" step="0.01" min="0" value="0.00" required></td>
                                    <td><input type="text" name="items[0][amount]" class="form-control amount-input bg-light text-end" readonly value="0.00"></td>
                                    <td class="text-center">
                                        <button type="button" class="btn btn-link text-danger p-0 remove-row" style="visibility: hidden;"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Section 3: Reason -->
                    <div class="mt-4 pt-4 border-top">
                        <label for="reason" class="form-label text-muted small fw-bold">Reason for Credit Note</label>
                        <textarea name="reason" id="reason" class="form-control" rows="3" placeholder="Return / Overpayment / Adjustment..."></textarea>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 mb-5">
                <button type="submit" class="btn btn-primary px-4 me-2">Save & Open</button>
                <a href="{{ route('credit-notes.index') }}" class="btn btn-link text-muted px-4">Cancel</a>
            </div>
        </div>

        <!-- Right Column: Calculation Summary (Sticky) -->
        <div class="col-lg-4">
            <div class="sticky-summary">
                <div class="card stat-card border-0 calculation-summary-card shadow-sm">
                    <div class="card-body p-4">
                        <h5 class="fw-bold mb-4">Summary</h5>
                        
                        <div class="d-flex justify-content-between mb-3">
                            <span class="text-muted">Subtotal</span>
                            <span class="fw-bold" id="sub-total-display">{{ formatCurrency(0) }}</span>
                            <input type="hidden" name="subtotal" id="subtotal_input" value="0">
                        </div>

                        <div class="mb-3">
                            <label for="tax_selector" class="form-label text-muted small fw-bold">Tax</label>
                            <select id="tax_selector" class="form-select form-select-sm">
                                <option value="0" data-rate="0">No Tax (0%)</option>
                                @foreach($taxes as $tax)
                                    <option value="{{ $tax->id }}" data-rate="{{ $tax->rate }}">{{ $tax->name }} ({{ $tax->rate }}%)</option>
                                @endforeach
                            </select>
                            <div class="d-flex justify-content-between mt-2 small">
                                <span class="text-muted">Tax Amount</span>
                                <span id="tax-amount-display">{{ formatCurrency(0) }}</span>
                                <input type="hidden" name="tax_total" id="tax_total_input" value="0">
                            </div>
                        </div>

                        <hr class="my-4">

                        <div class="d-flex justify-content-between align-items-center mb-0">
                            <span class="h6 fw-bold mb-0">Total Credit ({{ getCurrencySymbol() }})</span>
                            <span class="h4 fw-bold text-primary mb-0" id="total-amount-display">0.00</span>
                            <input type="hidden" name="total_amount" id="total_amount_input" value="0">
                        </div>
                    </div>
                </div>

                <div class="card stat-card border-0 mt-3 bg-light-info shadow-sm text-center">
                    <div class="card-body p-3 small">
                        <i class="fas fa-info-circle me-2"></i> After creation, you can <strong>Apply to Invoice</strong> or <strong>Refund</strong> the amount.
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableBody = document.querySelector('#items-table tbody');
    const addRowBtn = document.querySelector('#add-row');
    const subTotalDisplay = document.querySelector('#sub-total-display');
    const subTotalInput = document.querySelector('#subtotal_input');
    const taxSelector = document.querySelector('#tax_selector');
    const taxAmountDisplay = document.querySelector('#tax-amount-display');
    const taxAmountInput = document.querySelector('#tax_total_input');
    const totalAmountDisplay = document.querySelector('#total-amount-display');
    const totalAmountInput = document.querySelector('#total_amount_input');
    
    let rowCount = 1;

    const currencySymbol = "{{ getCurrencySymbol() }} ";

    function calculateTotal() {
        let subtotal = 0;
        document.querySelectorAll('.amount-input').forEach(input => {
            subtotal += parseFloat(input.value) || 0;
        });

        const taxRate = parseFloat(taxSelector.options[taxSelector.selectedIndex].getAttribute('data-rate')) || 0;
        const taxAmount = (subtotal * taxRate) / 100;
        const total = subtotal + taxAmount;

        subTotalDisplay.textContent = currencySymbol + subtotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        subTotalInput.value = subtotal.toFixed(2);
        
        taxAmountDisplay.textContent = currencySymbol + taxAmount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        taxAmountInput.value = taxAmount.toFixed(2);
        
        totalAmountDisplay.textContent = total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        totalAmountInput.value = total.toFixed(2);
    }

    function calculateRowAmount(row) {
        const qty = parseFloat(row.querySelector('.qty-input').value) || 0;
        const rate = parseFloat(row.querySelector('.rate-input').value) || 0;
        const amount = qty * rate;
        row.querySelector('.amount-input').value = amount.toFixed(2);
        calculateTotal();
    }

    addRowBtn.addEventListener('click', () => {
        const row = document.createElement('tr');
        row.className = 'item-row';
        row.innerHTML = `
            <td>
                <select name="items[${rowCount}][item_id]" class="form-select item-selector" required>
                    <option value="">Select Item</option>
                    @foreach($items as $item)
                        <option value="{{ $item->id }}" data-price="{{ $item->sales_price }}">{{ $item->name }}</option>
                    @endforeach
                </select>
                <input type="hidden" name="items[${rowCount}][name]" class="item-name-input">
            </td>
            <td><input type="number" name="items[${rowCount}][quantity]" class="form-control qty-input text-center" step="0.01" min="0.01" value="1" required></td>
            <td><input type="number" name="items[${rowCount}][rate]" class="form-control rate-input text-end" step="0.01" min="0" value="0.00" required></td>
            <td><input type="text" name="items[${rowCount}][amount]" class="form-control amount-input bg-light text-end" readonly value="0.00"></td>
            <td class="text-center"><button type="button" class="btn btn-link text-danger p-0 remove-row"><i class="fas fa-trash"></i></button></td>
        `;
        tableBody.appendChild(row);
        rowCount++;
        
        document.querySelectorAll('.remove-row').forEach(btn => btn.style.visibility = 'visible');
    });

    tableBody.addEventListener('change', (e) => {
        if (e.target.classList.contains('item-selector')) {
            const row = e.target.closest('tr');
            const selectedOption = e.target.options[e.target.selectedIndex];
            const price = selectedOption.getAttribute('data-price') || 0;
            const name = selectedOption.text;
            
            row.querySelector('.rate-input').value = price;
            row.querySelector('.item-name-input').value = name;
            calculateRowAmount(row);
        }
    });

    tableBody.addEventListener('input', (e) => {
        if (e.target.classList.contains('qty-input') || e.target.classList.contains('rate-input')) {
            calculateRowAmount(e.target.closest('tr'));
        }
    });

    tableBody.addEventListener('click', (e) => {
        if (e.target.closest('.remove-row')) {
            if (document.querySelectorAll('.item-row').length > 1) {
                e.target.closest('tr').remove();
                calculateTotal();
                if (document.querySelectorAll('.item-row').length === 1) {
                    document.querySelector('.remove-row').style.visibility = 'hidden';
                }
            }
        }
    });

    taxSelector.addEventListener('change', calculateTotal);
    
    // Auto-filter invoices by customer
    document.getElementById('customer_id').addEventListener('change', function() {
        const customerId = this.value;
        const invoiceSelect = document.getElementById('invoice_id');
        Array.from(invoiceSelect.options).forEach(option => {
            if (option.value === "" || option.getAttribute('data-customer') === customerId) {
                option.style.display = 'block';
            } else {
                option.style.display = 'none';
            }
        });
        invoiceSelect.value = "";
    });
});
</script>
@endpush
@endsection