@extends('layouts.app')

@section('title', 'Edit Purchase Order ' . $purchaseOrder->purchase_order_number)

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1 small text-uppercase">
                <li class="breadcrumb-item"><a href="{{ route('purchase-orders.index') }}" class="text-decoration-none">Purchase Orders</a></li>
                <li class="breadcrumb-item"><a href="{{ route('purchase-orders.show', $purchaseOrder) }}" class="text-decoration-none">{{ $purchaseOrder->purchase_order_number }}</a></li>
                <li class="breadcrumb-item active">Edit</li>
            </ol>
        </nav>
        <h2 class="h4 mb-0 text-dark fw-bold">Edit Purchase Order</h2>
    </div>
</div>

<form action="{{ route('purchase-orders.update', $purchaseOrder) }}" method="POST" id="po-form">
    @csrf
    @method('PUT')
    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-body p-4">
                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Vendor *</label>
                            <select name="vendor_id" class="form-select @error('vendor_id') is-invalid @enderror" required>
                                <option value="">Select Vendor</option>
                                @foreach($vendors as $vendor)
                                    <option value="{{ $vendor->id }}" {{ (old('vendor_id') ?? $purchaseOrder->vendor_id) == $vendor->id ? 'selected' : '' }}>{{ $vendor->name }}</option>
                                @endforeach
                            </select>
                            @error('vendor_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Purchase Order # *</label>
                            <input type="text" name="purchase_order_number" class="form-control" value="{{ old('purchase_order_number', $purchaseOrder->purchase_order_number) }}" required readonly>
                        </div>
                    </div>

                    <div class="row g-3 mb-4">
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Date *</label>
                            <input type="date" name="date" class="form-control" value="{{ old('date', $purchaseOrder->date) }}" required>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label small text-muted fw-bold text-uppercase">Expected Delivery Date</label>
                            <input type="date" name="expected_delivery_date" class="form-control" value="{{ old('expected_delivery_date', $purchaseOrder->expected_delivery_date) }}">
                        </div>
                    </div>

                    <!-- Items Table -->
                    <div class="table-responsive mb-4">
                        <table class="table table-borderless align-middle" id="items-table">
                            <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($purchaseOrder->items as $index => $poItem)
                                <tr class="item-row">
                                    <td>
                                        <select name="items[{{ $index }}][item_id]" class="form-select item-select" required>
                                            <option value="">Select an Item</option>
                                            @foreach($items as $item)
                                                <option value="{{ $item->id }}" data-rate="{{ $item->purchase_price }}" {{ $poItem->item_id == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input type="number" name="items[{{ $index }}][quantity]" class="form-control qty" value="{{ $poItem->quantity }}" min="1" required></td>
                                    <td><input type="number" name="items[{{ $index }}][rate]" class="form-control rate" step="0.01" value="{{ $poItem->rate }}" required></td>
                                    <td class="text-end fw-bold text-dark po-amount">{{ formatCurrency($poItem->amount) }}</td>
                                    <td><button type="button" class="btn btn-sm btn-outline-danger border-0 remove-row {{ $purchaseOrder->items->count() > 1 ? '' : 'd-none' }}"><i class="fas fa-times"></i></button></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <button type="button" class="btn btn-sm btn-link text-primary text-decoration-none fw-bold" id="add-row">
                            <i class="fas fa-plus-circle me-1"></i> Add Another Item
                        </button>
                    </div>

                    <div class="mb-0">
                        <label class="form-label small text-muted fw-bold text-uppercase">Notes</label>
                        <textarea name="notes" class="form-control" rows="3" placeholder="Add any special instructions or notes...">{{ old('notes', $purchaseOrder->notes) }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Summary Section -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 sticky-top" style="top: 100px;">
                <div class="card-body p-4">
                    <h6 class="fw-bold text-dark text-uppercase mb-4">Total Summary</h6>
                    <div class="d-flex justify-content-between mb-3">
                        <span class="text-muted small">Sub Total</span>
                        <span class="fw-semibold text-dark" id="subtotal-display">{{ formatCurrency($purchaseOrder->subtotal) }}</span>
                    </div>
                    <div class="d-flex justify-content-between mb-4 border-bottom pb-3">
                        <span class="text-muted small">Tax Total</span>
                        <span class="fw-semibold text-dark" id="tax-display">{{ formatCurrency($purchaseOrder->tax_total) }}</span>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <span class="h6 mb-0 fw-bold">Grand Total</span>
                        <span class="h4 mb-0 fw-bold text-primary" id="total-display">{{ formatCurrency($purchaseOrder->total) }}</span>
                    </div>

                    <input type="hidden" name="subtotal" id="subtotal-input" value="{{ $purchaseOrder->subtotal }}">
                    <input type="hidden" name="tax_total" id="tax-total-input" value="{{ $purchaseOrder->tax_total }}">
                    <input type="hidden" name="total" id="total-input" value="{{ $purchaseOrder->total }}">

                    <button type="submit" class="btn btn-primary w-100 py-2 fw-bold shadow-sm mb-3">Update Purchase Order</button>
                    <a href="{{ route('purchase-orders.show', $purchaseOrder) }}" class="btn btn-light w-100 py-2 border fw-bold text-muted">Cancel</a>
                </div>
            </div>
        </div>
    </div>
</form>

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

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

    function calculate() {
        let subtotal = 0;
        document.querySelectorAll('.item-row').forEach(row => {
            const qty = row.querySelector('.qty').value || 0;
            const rate = row.querySelector('.rate').value || 0;
            const amount = qty * rate;
            row.querySelector('.po-amount').textContent = currencySymbol + amount.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            subtotal += amount;
        });

        const tax = subtotal * 0; 
        const total = subtotal + tax;

        document.getElementById('subtotal-display').textContent = currencySymbol + subtotal.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        document.getElementById('tax-display').textContent = currencySymbol + tax.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
        document.getElementById('total-display').textContent = currencySymbol + total.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });

        document.getElementById('subtotal-input').value = subtotal;
        document.getElementById('tax-total-input').value = tax;
        document.getElementById('total-input').value = total;
    }

    document.getElementById('add-row').addEventListener('click', function() {
        const tbody = document.querySelector('#items-table tbody');
        const rows = document.querySelectorAll('.item-row');
        const newRow = rows[0].cloneNode(true);
        
        newRow.querySelectorAll('input').forEach(input => {
            const name = input.getAttribute('name');
            input.setAttribute('name', name.replace(/\[\d+\]/, '[' + rowCount + ']'));
            input.value = input.classList.contains('qty') ? 1 : '';
        });
        
        const select = newRow.querySelector('select');
        select.setAttribute('name', select.getAttribute('name').replace(/\[\d+\]/, '[' + rowCount + ']'));
        select.value = '';

        newRow.querySelector('.po-amount').textContent = currencySymbol + '0.00';
        newRow.querySelector('.remove-row').classList.remove('d-none');
        
        tbody.appendChild(newRow);
        rowCount++;
        calculate();

        // Ensure remove buttons are visible if more than 1 row
        document.querySelectorAll('.remove-row').forEach(btn => btn.classList.remove('d-none'));
    });

    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('item-select')) {
            const row = e.target.closest('.item-row');
            const rate = e.target.options[e.target.selectedIndex].dataset.rate || 0;
            row.querySelector('.rate').value = rate;
            calculate();
        }
    });

    document.addEventListener('input', function(e) {
        if (e.target.classList.contains('qty') || e.target.classList.contains('rate')) {
            calculate();
        }
    });

    document.addEventListener('click', function(e) {
        if (e.target.closest('.remove-row')) {
            const rows = document.querySelectorAll('.item-row');
            if (rows.length > 1) {
                e.target.closest('.item-row').remove();
                calculate();
                if (document.querySelectorAll('.item-row').length === 1) {
                    document.querySelector('.remove-row').classList.add('d-none');
                }
            }
        }
    });

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