@extends('layouts.app')
@section('title', isset($order) ? 'Edit Order #' . $order->id : 'New Order')
@section('content')
<h4 class="mb-3">{{ isset($order) ? 'Edit Order #' . $order->id : 'New Order' }}</h4>
<div class="card">
    <div class="card-body">
        <form action="{{ isset($order) ? route('orders.update', $order) : route('orders.store') }}" method="POST" id="orderForm">
            @csrf
            @if(isset($order)) @method('PUT') @endif

            <div class="row g-3 mb-3">
                <div class="col-md-4">
                    <label for="customer_id" class="form-label">Customer</label>
                    <select name="customer_id" id="customer_id" class="form-select">
                        <option value="">Walk-in (Full Payment)</option>
                        @foreach($customers as $c)
                            <option value="{{ $c->id }}"
                                data-balance="{{ $c->balance }}"
                                {{ old('customer_id', $order->customer_id ?? '') == $c->id ? 'selected' : '' }}>
                                {{ $c->name }}{{ $c->shop_name ? ' - ' . $c->shop_name : '' }}{{ $c->balance > 0 ? ' (Due: Rs. ' . number_format($c->balance, 2) . ')' : '' }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4" id="walkinNameSection">
                    <label for="customer_name" class="form-label">Name (optional)</label>
                    <input type="text" name="customer_name" id="customer_name" class="form-control" value="{{ old('customer_name', $order->customer_name ?? '') }}">
                </div>
                <div class="col-md-4">
                    <label for="notes" class="form-label">Notes</label>
                    <input type="text" name="notes" id="notes" class="form-control" value="{{ old('notes', $order->notes ?? '') }}">
                </div>
            </div>

            <div class="alert alert-warning py-2 d-none" id="balanceAlert">
                <i class="bi bi-exclamation-triangle"></i>
                Outstanding balance: <strong id="balanceAmount">Rs. 0</strong>
                — Manage payments in <a href="{{ route('customers.index') }}">Customers</a> section
            </div>

            <h6>Order Items</h6>
            <table class="table table-sm" id="itemsTable">
                <thead>
                    <tr><th>Category</th><th>Weight</th><th>Bags</th><th>Price/Bag</th><th>Subtotal</th><th></th></tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <td colspan="4" class="text-end fw-bold">Grand Total:</td>
                        <td class="fw-bold fs-5" id="grandTotal">Rs. 0.00</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
            <button type="button" class="btn btn-sm btn-outline-success mb-3" id="addItem">
                <i class="bi bi-plus"></i> Add Item
            </button>

            {{-- Payment section: only visible for B2B --}}
            <div class="row g-3 d-none" id="paymentSection">
                <div class="col-md-3">
                    <label for="paid" class="form-label">Amount Received Now</label>
                    <input type="number" step="0.01" name="paid" id="paid" class="form-control" value="{{ old('paid', isset($order) ? $order->paid : '') }}">
                    <small class="text-muted">Remaining will add to customer balance</small>
                </div>
            </div>

            <div class="mt-3">
                <button type="submit" class="btn btn-primary btn-lg" id="submitBtn">{{ isset($order) ? 'Update Order' : 'Create Order' }}</button>
                <a href="{{ isset($order) ? route('orders.show', $order) : route('orders.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
const categories = @json($categories);
const productsByCategory = {};
@json($products).forEach(p => {
    if (!productsByCategory[p.category_id]) productsByCategory[p.category_id] = [];
    productsByCategory[p.category_id].push({
        id: p.id,
        weight_label: p.weight ? p.weight.label : '-',
        price: p.price,
        stock: p.stock,
    });
});

let rowIndex = 0;
const customerSelect = document.getElementById('customer_id');
const balanceAlert = document.getElementById('balanceAlert');
const balanceAmount = document.getElementById('balanceAmount');
const paymentSection = document.getElementById('paymentSection');
const walkinNameSection = document.getElementById('walkinNameSection');

function updateCustomerUI() {
    const opt = customerSelect.options[customerSelect.selectedIndex];
    const isB2B = !!customerSelect.value;
    const balance = opt && opt.dataset.balance ? parseFloat(opt.dataset.balance) : 0;

    if (isB2B) {
        paymentSection.classList.remove('d-none');
        walkinNameSection.style.display = 'none';
        if (balance > 0) {
            balanceAlert.classList.remove('d-none');
            balanceAmount.textContent = 'Rs. ' + balance.toFixed(2);
        } else {
            balanceAlert.classList.add('d-none');
        }
    } else {
        paymentSection.classList.add('d-none');
        walkinNameSection.style.display = '';
        balanceAlert.classList.add('d-none');
        document.getElementById('paid').value = '';
    }
}
customerSelect.addEventListener('change', updateCustomerUI);
updateCustomerUI();

function addItemRow(productId, qty) {
    const tbody = document.querySelector('#itemsTable tbody');
    const tr = document.createElement('tr');

    let catOptions = '<option value="">-- Category --</option>';
    categories.forEach(c => { catOptions += `<option value="${c.id}">${c.name}</option>`; });

    tr.innerHTML = `
        <td><select class="form-select form-select-sm cat-select" required>${catOptions}</select></td>
        <td><select name="items[${rowIndex}][product_id]" class="form-select form-select-sm weight-select" required><option value="">-- Weight --</option></select></td>
        <td><input type="number" name="items[${rowIndex}][quantity]" class="form-control form-control-sm qty-input" min="1" step="1" required></td>
        <td class="price-cell text-nowrap">-</td>
        <td class="subtotal-cell text-nowrap fw-bold">Rs. 0.00</td>
        <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="bi bi-trash"></i></button></td>
    `;
    tbody.appendChild(tr);
    rowIndex++;
    bindRowEvents(tr);

    if (productId) {
        for (const catId in productsByCategory) {
            if (productsByCategory[catId].find(p => p.id == productId)) {
                tr.querySelector('.cat-select').value = catId;
                tr.querySelector('.cat-select').dispatchEvent(new Event('change'));
                setTimeout(() => {
                    tr.querySelector('.weight-select').value = productId;
                    tr.querySelector('.weight-select').dispatchEvent(new Event('change'));
                    if (qty) tr.querySelector('.qty-input').value = qty;
                    calcRow(tr);
                }, 50);
                break;
            }
        }
    }
}

function bindRowEvents(tr) {
    tr.querySelector('.cat-select').addEventListener('change', function() {
        const ws = tr.querySelector('.weight-select');
        ws.innerHTML = '<option value="">-- Weight --</option>';
        tr.querySelector('.price-cell').textContent = '-';
        tr.querySelector('.subtotal-cell').textContent = 'Rs. 0.00';
        if (this.value && productsByCategory[this.value]) {
            productsByCategory[this.value].forEach(p => {
                const opt = document.createElement('option');
                opt.value = p.id;
                if (p.stock <= 0) {
                    opt.textContent = p.weight_label + ' — OUT OF STOCK';
                    opt.disabled = true;
                    opt.style.color = '#dc3545';
                } else {
                    opt.textContent = p.weight_label + ' (Stock: ' + p.stock + ' bags)';
                }
                opt.dataset.price = p.price;
                opt.dataset.stock = p.stock;
                ws.appendChild(opt);
            });
        }
        calcTotal();
    });

    tr.querySelector('.weight-select').addEventListener('change', function() {
        const opt = this.options[this.selectedIndex];
        tr.querySelector('.price-cell').textContent = opt && opt.dataset.price ? 'Rs. ' + parseFloat(opt.dataset.price).toFixed(2) : '-';
        calcRow(tr);
        checkStockWarning(tr);
    });

    tr.querySelector('.qty-input').addEventListener('input', function() {
        calcRow(tr);
        checkStockWarning(tr);
    });
    tr.querySelector('.remove-row').addEventListener('click', () => { tr.remove(); calcTotal(); });
}

function checkStockWarning(tr) {
    const ws = tr.querySelector('.weight-select');
    const opt = ws.options[ws.selectedIndex];
    const stock = opt && opt.dataset.stock ? parseInt(opt.dataset.stock) : 0;
    const qty = parseInt(tr.querySelector('.qty-input').value) || 0;
    const qtyInput = tr.querySelector('.qty-input');

    // Remove old warning
    const oldWarn = tr.querySelector('.stock-warn');
    if (oldWarn) oldWarn.remove();

    if (stock === 0 && opt && opt.value) {
        qtyInput.classList.add('is-invalid');
        const warn = document.createElement('div');
        warn.className = 'text-danger small fw-bold stock-warn';
        warn.textContent = '⚠ OUT OF STOCK';
        qtyInput.parentNode.appendChild(warn);
    } else if (qty > stock && stock > 0) {
        qtyInput.classList.add('is-invalid');
        const warn = document.createElement('div');
        warn.className = 'text-danger small fw-bold stock-warn';
        warn.textContent = '⚠ Only ' + stock + ' bags available!';
        qtyInput.parentNode.appendChild(warn);
    } else {
        qtyInput.classList.remove('is-invalid');
    }
}

function calcRow(tr) {
    const ws = tr.querySelector('.weight-select');
    const opt = ws.options[ws.selectedIndex];
    const price = opt && opt.dataset.price ? parseFloat(opt.dataset.price) : 0;
    const qty = parseInt(tr.querySelector('.qty-input').value) || 0;
    tr.querySelector('.subtotal-cell').textContent = 'Rs. ' + (qty * price).toFixed(2);
    calcTotal();
}

function calcTotal() {
    let total = 0;
    document.querySelectorAll('#itemsTable tbody tr').forEach(tr => {
        const ws = tr.querySelector('.weight-select');
        const opt = ws.options[ws.selectedIndex];
        const price = opt && opt.dataset.price ? parseFloat(opt.dataset.price) : 0;
        const qty = parseInt(tr.querySelector('.qty-input').value) || 0;
        total += qty * price;
    });
    document.getElementById('grandTotal').textContent = 'Rs. ' + total.toFixed(2);
}

document.getElementById('addItem').addEventListener('click', () => addItemRow());

// Block form submit if stock issues
document.getElementById('orderForm').addEventListener('submit', function(e) {
    let hasError = false;
    document.querySelectorAll('#itemsTable tbody tr').forEach(tr => {
        const ws = tr.querySelector('.weight-select');
        const opt = ws.options[ws.selectedIndex];
        const stock = opt && opt.dataset.stock ? parseInt(opt.dataset.stock) : 0;
        const qty = parseInt(tr.querySelector('.qty-input').value) || 0;
        if (qty > stock) hasError = true;
    });
    if (hasError) {
        e.preventDefault();
        alert('Some items exceed available stock. Please fix before submitting.');
    }
});

@if(isset($order))
    @foreach($order->items as $item)
        addItemRow({{ $item->product_id }}, {{ (int)$item->quantity }});
    @endforeach
@else
    addItemRow();
@endif
</script>
@endpush
@endsection