@extends('layouts.app')

@section('title', 'Edit Vendor Credit')

@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('vendor-credits.index') }}" class="text-decoration-none">Vendor Credits</a></li>
            <li class="breadcrumb-item active">Edit Credit</li>
        </ol>
    </nav>
    <h2 class="h4 mb-0 text-dark fw-bold">Edit Vendor Credit</h2>
</div>

<form action="{{ route('vendor-credits.update', $vendorCredit) }}" method="POST" id="creditForm">
    @csrf
    @method('PUT')
    <div class="row g-4">
        <div class="col-lg-12">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <div class="row g-4 mb-5">
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">Vendor Name *</label>
                            <select name="vendor_id" id="vendor_id" class="form-select select2" required>
                                <option value="">Select Vendor</option>
                                @foreach($vendors as $vendor)
                                    <option value="{{ $vendor->id }}" {{ $vendorCredit->vendor_id == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">Credit Number *</label>
                            <input type="text" name="credit_number" class="form-control" value="{{ $vendorCredit->credit_number }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">Date *</label>
                            <input type="date" name="date" class="form-control" value="{{ $vendorCredit->date->format('Y-m-d') }}" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small text-muted fw-bold text-uppercase">Linked Bill (Optional)</label>
                            <select name="bill_id" class="form-select" disabled>
                                <option value="">{{ $vendorCredit->bill_id ? 'Bill #' . $vendorCredit->bill->bill_number : 'None' }}</option>
                            </select>
                            <small class="text-muted">Linked bill cannot be changed.</small>
                        </div>
                    </div>

                    <div class="table-responsive mb-4">
                        <table class="table table-hover align-middle" id="itemsTable">
                            <thead class="bg-light text-muted small text-uppercase">
                                <tr>
                                    <th style="width: 40%">Item Details</th>
                                    <th>Quantity</th>
                                    <th>Rate</th>
                                    <th class="text-end">Amount</th>
                                    <th style="width: 50px"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($vendorCredit->items as $index => $item)
                                <tr class="item-row">
                                    <td><input type="text" name="items[{{ $index }}][item_name]" class="form-control" value="{{ $item->item_name }}" required></td>
                                    <td><input type="number" name="items[{{ $index }}][quantity]" class="form-control qty" step="0.01" value="{{ $item->quantity }}" required></td>
                                    <td><input type="number" name="items[{{ $index }}][rate]" class="form-control rate" step="0.01" value="{{ $item->rate }}" required></td>
                                    <td class="text-end"><span class="fw-bold line-total">{{ formatCurrency($item->amount) }}</span></td>
                                    <td><button type="button" class="btn btn-sm btn-link text-danger remove-row"><i class="fas fa-times"></i></button></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-sm btn-outline-primary fw-bold" id="addRow">
                            <i class="fas fa-plus me-1"></i> Add Row
                        </button>
                    </div>

                    <div class="row justify-content-end">
                        <div class="col-md-5">
                            <div class="bg-light p-4 rounded-4">
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted small fw-bold">SUB TOTAL</span>
                                    <input type="hidden" name="subtotal" id="subtotal_val" value="{{ $vendorCredit->subtotal }}">
                                    <span id="subtotal_display" class="fw-bold">{{ formatCurrency($vendorCredit->subtotal) }}</span>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label small text-muted fw-bold text-uppercase">Tax</label>
                                    <select name="tax_id" id="tax_id" class="form-select form-select-sm">
                                        <option value="" data-rate="0">No Tax (0%)</option>
                                        @foreach($taxes as $tax)
                                            <option value="{{ $tax->id }}" data-rate="{{ $tax->rate }}" {{ $vendorCredit->tax_id == $tax->id ? 'selected' : '' }}>{{ $tax->name }} ({{ $tax->rate }}%)</option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" name="tax_amount" id="tax_amount_val" value="{{ $vendorCredit->tax_amount }}">
                                    <div class="text-end mt-1 small text-muted" id="tax_display">{{ formatCurrency($vendorCredit->tax_amount) }}</div>
                                </div>
                                <div class="d-flex justify-content-between align-items-center border-top pt-3">
                                    <span class="h5 mb-0 fw-bold">TOTAL</span>
                                    <input type="hidden" name="total" id="total_val" value="{{ $vendorCredit->total }}">
                                    <span id="total_display" class="h4 mb-0 fw-bold text-primary">{{ formatCurrency($vendorCredit->total) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="mt-4">
                        <label class="form-label small text-muted fw-bold text-uppercase">Notes</label>
                        <textarea name="notes" class="form-control" rows="3">{{ $vendorCredit->notes }}</textarea>
                    </div>
                </div>
                <div class="card-footer bg-white p-4 border-top">
                    @if($vendorCredit->used_amount > 0)
                        <div class="alert alert-warning mb-3 small py-2 fw-bold">
                            <i class="fas fa-exclamation-triangle me-2"></i> This credit has been partially used. Editing amounts may cause discrepancies.
                        </div>
                    @endif
                    <button type="submit" class="btn btn-primary px-5 py-2 fw-bold shadow-sm">Update Credit</button>
                    <a href="{{ route('vendor-credits.index') }}" class="btn btn-light px-5 py-2 border fw-bold text-muted ms-2">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</form>

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

    const calculateTotals = () => {
        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;
            const currencySymbol = '{{ getCurrencySymbol() }} ';
            row.querySelector('.line-total').textContent = currencySymbol + amount.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
            subtotal += amount;
        });

        const taxRate = parseFloat(document.getElementById('tax_id').selectedOptions[0].dataset.rate) || 0;
        const taxAmount = (subtotal * taxRate) / 100;
        const total = subtotal + taxAmount;

        const currencySymbol = '{{ getCurrencySymbol() }} ';
        document.getElementById('subtotal_display').textContent = currencySymbol + subtotal.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('subtotal_val').value = subtotal;
        document.getElementById('tax_display').textContent = currencySymbol + taxAmount.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('tax_amount_val').value = taxAmount;
        document.getElementById('total_display').textContent = currencySymbol + total.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
        document.getElementById('total_val').value = total;
    };

    document.getElementById('addRow').addEventListener('click', () => {
        const tbody = document.querySelector('#itemsTable tbody');
        const row = document.createElement('tr');
        row.className = 'item-row';
        row.innerHTML = `
            <td><input type="text" name="items[${rowCount}][item_name]" class="form-control" required></td>
            <td><input type="number" name="items[${rowCount}][quantity]" class="form-control qty" step="0.01" value="1" required></td>
            <td><input type="number" name="items[${rowCount}][rate]" class="form-control rate" step="0.01" value="0" required></td>
            <td class="text-end"><span class="fw-bold line-total">{{ getCurrencySymbol() }} 0.00</span></td>
            <td><button type="button" class="btn btn-sm btn-link text-danger remove-row"><i class="fas fa-times"></i></button></td>
        `;
        tbody.appendChild(row);
        rowCount++;
    });

    document.querySelector('#itemsTable').addEventListener('input', (e) => {
        if (e.target.classList.contains('qty') || e.target.classList.contains('rate')) calculateTotals();
    });

    document.querySelector('#itemsTable').addEventListener('click', (e) => {
        if (e.target.closest('.remove-row')) {
            if (document.querySelectorAll('.item-row').length > 1) {
                e.target.closest('.item-row').remove();
                calculateTotals();
            }
        }
    });

    document.getElementById('tax_id').addEventListener('change', calculateTotals);
});
</script>
@endsection