@extends('layout.mainlayout')
@section('content')
<div class="page-wrapper">
    <div class="content">
        <style>
            .cat-filter-btn { border-radius: 4px; font-size: 13px; padding: 5px 14px; }
            .cat-filter-btn.active { background: #2563eb; color: #fff; border-color: #2563eb; }
            .product-card { cursor: pointer; transition: box-shadow .2s; border-radius: 8px; overflow: hidden; }
            .product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); }
            .product-card img { width: 100%; height: 120px; object-fit: cover; }
            .product-card .badge-available { background: #16a34a; color: #fff; font-size: 11px; border-radius: 12px; padding: 2px 10px; }
            .product-card .badge-unavailable { background: #6b7280; color: #fff; font-size: 11px; border-radius: 12px; padding: 2px 10px; }
            .order-panel { background: #fff; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,.08); }
            .order-panel-header { background: #fff; border-bottom: 1px solid #e5e7eb; }
            .order-item-row td { vertical-align: middle; font-size: 14px; }
            .qty-input { width: 52px; text-align: center; border: 1px solid #d1d5db; border-radius: 4px; padding: 2px 4px; }
            .remove-item-btn { background: #ef4444; color: #fff; border: none; border-radius: 4px; padding: 3px 8px; cursor: pointer; }
            #orderSummaryFooter td { font-weight: 600; }
        </style>
        <div class="page-header mb-3 position-relative">
            <div class="page-title">
                <h4>Order</h4>
                <h6><a href="{{ route('dashboard') }}">Dashboard</a> / Order</h6>
            </div>
        </div>

        <!-- Hidden Print Receipt Template for Delivery -->
        <div id="printDeliveryReceipt" style="display:none;">
            <div style="font-family: monospace; width: 300px; margin: 0 auto; padding: 20px; text-align: center; border: 1px solid #ddd;">
                <h4 style="margin: 0 0 10px 0;">Delivery Receipt</h4>
                <div id="printReceiptDate" style="font-size: 12px; clear: both; margin-bottom: 10px; text-align: center;"></div>
                <hr style="border-top: 1px dashed #000; margin: 10px 0;">
                <div style="text-align: left; font-size: 14px; margin-bottom: 15px;">
                    <div><strong>Customer Phone:</strong> <span id="printCustomerPhone"></span></div>
                    <div><strong>Address:</strong> <span id="printCustomerAddress"></span></div>
                </div>
                <hr style="border-top: 1px dashed #000; margin: 10px 0;">
                <table style="width: 100%; text-align: left; font-size: 13px;" id="printReceiptItems">
                </table>
                <hr style="border-top: 1px dashed #000; margin: 10px 0;">
                <div style="text-align: right; font-size: 14px;"><strong>Total:</strong> <span id="printReceiptTotal"></span></div>
            </div>
        </div>

        <div class="row g-3">
            <!-- LEFT: Product Selection -->
            <div class="col-lg-8">
                <div class="card p-3" style="border-radius:8px;">
                    <h6 class="fw-semibold mb-3">Item</h6>

                    <!-- Category Filter Buttons -->
                    <div class="d-flex flex-wrap gap-2 mb-3" id="categoryFilters">
                        <button class="btn btn-primary btn-sm cat-filter-btn active" data-cat="all">All</button>
                        @foreach($categories as $cat)
                            <button class="btn btn-primary btn-sm cat-filter-btn" data-cat="{{ $cat->id }}">{{ $cat->name }}</button>
                        @endforeach
                    </div>

                    <!-- Product Grid -->
                    <div class="row g-3" id="productGrid">
                        @foreach($products as $product)
                        <div class="col-6 col-md-4 col-xl-3 product-item"
                             data-cat="{{ $product->category_id }}"
                             data-status="{{ $product->status }}">
                            <div class="product-card border"
                                 onclick="addToOrder({{ $product->id }}, '{{ addslashes($product->name) }}', {{ $product->price }}, '{{ $product->status }}')">
                                @if($product->image)
                                    <img src="{{ asset('storage/' . $product->image) }}" alt="{{ $product->name }}">
                                @else
                                    <div style="width:100%;height:120px;background:#f3f4f6;display:flex;align-items:center;justify-content:center;">
                                        <i data-feather="image" style="color:#9ca3af;width:36px;height:36px;"></i>
                                    </div>
                                @endif
                                <div class="p-2">
                                    <div class="fw-semibold" style="font-size:13px;line-height:1.3;">{{ $product->name }}</div>
                                    <div class="mt-1">
                                        @if($product->status === 'available')
                                            <span class="badge-available">Available</span>
                                        @else
                                            <span class="badge-unavailable">Unavailable</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @if(count($products) === 0)
                        <div class="col-12 text-center text-muted py-5">
                            No available products. Add products in <a href="{{ route('admin.product.list') }}">Product Management</a>.
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- RIGHT: Order Panel -->
            <div class="col-lg-4">
                <div class="order-panel p-3">
                    <div class="order-panel-header d-flex justify-content-between align-items-center pb-2 mb-3">
                        <h6 class="fw-bold mb-0">Order</h6>
                        <button class="btn btn-success btn-sm px-3" onclick="newOrder()">New Order</button>
                    </div>

                    <div class="table-responsive">
                        <table class="table table-sm mb-0" id="orderTable">
                            <thead>
                                <tr style="font-size:13px;">
                                    <th>Item Name</th>
                                    <th style="width:55px;">Qty</th>
                                    <th style="width:60px;">Unit Price</th>
                                    <th style="width:60px;">Price</th>
                                    <th style="width:30px;"></th>
                                </tr>
                            </thead>
                            <tbody id="orderItems">
                                <tr id="emptyCartRow">
                                    <td colspan="5" class="text-center text-muted py-3" style="font-size:13px;">
                                        Click a product to add it to the order.
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot id="orderSummaryFooter" style="display:none;">
                                <tr>
                                    <td colspan="3" class="text-end">Gross Total</td>
                                    <td id="grossTotal">Tsh 0.00</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td colspan="3" class="text-end">Taxes (5%)</td>
                                    <td id="taxAmount">Tsh 0.00</td>
                                    <td></td>
                                </tr>
                                <tr style="border-top:2px solid #111;">
                                    <td colspan="3" class="text-end">Net Total</td>
                                    <td id="netTotal">Tsh 0.00</td>
                                    <td></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>

                    <!-- Order Type -->
                    <div class="mt-3">
                        <label class="form-label fw-semibold" style="font-size:13px;">Order Type</label>
                        <select class="form-select form-select-sm" id="orderType" onchange="toggleOrderFields()">
                            <option value="DINE_IN" selected>Dine In</option>
                            <option value="TAKEAWAY">Takeaway</option>
                            <option value="DELIVERY">Delivery</option>
                        </select>
                    </div>

                    <!-- Conditional Fields: Dine In -->
                    <div id="dineInFields" class="mt-3">
                        <label class="form-label fw-semibold" style="font-size:13px;">Table No. (Optional)</label>
                        <input type="text" class="form-control form-control-sm mb-2" id="tableNo" placeholder="e.g. T-12">
                        
                        <label class="form-label fw-semibold" style="font-size:13px;">Waiter No. (Optional)</label>
                        <input type="text" class="form-control form-control-sm" id="waiterNo" placeholder="e.g. W-05">
                    </div>

                    <!-- Conditional Fields: Delivery -->
                    <div id="deliveryFields" class="mt-3" style="display:none;">
                        <label class="form-label fw-semibold" style="font-size:13px;">Customer Number (Optional)</label>
                        <input type="text" class="form-control form-control-sm mb-2" id="customerPhone" placeholder="Phone Number">
                        
                        <label class="form-label fw-semibold" style="font-size:13px;">Delivery Address (Optional)</label>
                        <textarea class="form-control form-control-sm" id="deliveryAddress" rows="2" placeholder="Full Address"></textarea>
                    </div>

                    <!-- Place Order Button -->
                    <div class="mt-3">
                        <button class="btn btn-success w-100" id="placeOrderBtn" onclick="placeOrder()" disabled>
                            Place Order
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Modal -->
<div class="modal fade" id="orderSuccessModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content text-center">
            <div class="modal-body py-4">
                <div style="font-size:48px;color:#16a34a;">✓</div>
                <h5 class="fw-bold mt-2">Order Placed!</h5>
                <p class="text-muted" id="orderSuccessMsg"></p>
                <a href="{{ route('admin.order.history') }}" class="btn btn-primary btn-sm me-2">View Orders</a>
                <button class="btn btn-success btn-sm" data-bs-dismiss="modal" onclick="newOrder()">New Order</button>
            </div>
        </div>
    </div>
</div>

<script>
    const orderItems = {};

    function toggleOrderFields() {
        const type = document.getElementById('orderType').value;
        const dineInFields = document.getElementById('dineInFields');
        const deliveryFields = document.getElementById('deliveryFields');

        if (type === 'DINE_IN') {
            dineInFields.style.display = 'block';
            deliveryFields.style.display = 'none';
        } else if (type === 'DELIVERY') {
            dineInFields.style.display = 'none';
            deliveryFields.style.display = 'block';
        } else {
            // TAKEAWAY
            dineInFields.style.display = 'none';
            deliveryFields.style.display = 'none';
        }
    }

    function addToOrder(id, name, price, status) {
        if (status !== 'available') {
            alert(name + ' is currently unavailable.');
            return;
        }
        if (orderItems[id]) {
            orderItems[id].qty++;
        } else {
            orderItems[id] = { id, name, price, qty: 1 };
        }
        renderOrder();
    }

    function changeQty(id, delta) {
        if (!orderItems[id]) return;
        orderItems[id].qty += delta;
        if (orderItems[id].qty <= 0) {
            delete orderItems[id];
        }
        renderOrder();
    }

    function removeItem(id) {
        delete orderItems[id];
        renderOrder();
    }

    function renderOrder() {
        const tbody = document.getElementById('orderItems');
        const keys = Object.keys(orderItems);

        if (keys.length === 0) {
            tbody.innerHTML = `<tr id="emptyCartRow">
                <td colspan="5" class="text-center text-muted py-3" style="font-size:13px;">Click a product to add it to the order.</td>
            </tr>`;
            document.getElementById('orderSummaryFooter').style.display = 'none';
            document.getElementById('placeOrderBtn').disabled = true;
            return;
        }

        let html = '';
        let gross = 0;
        keys.forEach(id => {
            const item = orderItems[id];
            const subtotal = item.price * item.qty;
            gross += subtotal;
            html += `<tr class="order-item-row">
                <td style="font-size:13px;">${item.name}</td>
                <td><input class="qty-input" type="number" value="${item.qty}" min="1"
                    onchange="setQty(${id}, this.value)"></td>
                <td style="font-size:13px;">Tsh ${item.price.toFixed(2)}</td>
                <td style="font-size:13px;">Tsh ${subtotal.toFixed(2)}</td>
                <td><button class="remove-item-btn" onclick="removeItem(${id})">✕</button></td>
            </tr>`;
        });
        tbody.innerHTML = html;

        const tax = +(gross * 0.05).toFixed(2);
        const net = +(gross + tax).toFixed(2);

        document.getElementById('grossTotal').textContent = 'Tsh ' + gross.toFixed(2);
        document.getElementById('taxAmount').textContent  = 'Tsh ' + tax.toFixed(2);
        document.getElementById('netTotal').textContent   = 'Tsh ' + net.toFixed(2);
        document.getElementById('orderSummaryFooter').style.display = '';
        document.getElementById('placeOrderBtn').disabled = false;
    }

    function setQty(id, val) {
        val = parseInt(val);
        if (isNaN(val) || val <= 0) { delete orderItems[id]; }
        else { orderItems[id].qty = val; }
        renderOrder();
    }

    function newOrder() {
        for (const k in orderItems) delete orderItems[k];
        renderOrder();
    }

    function placeOrder() {
        const keys = Object.keys(orderItems);
        if (keys.length === 0) { alert('Please add at least one item.'); return; }

        const items = keys.map(id => ({
            product_id: parseInt(id),
            quantity:   orderItems[id].qty,
            price:      orderItems[id].price,
            subtotal:   +(orderItems[id].price * orderItems[id].qty).toFixed(2)
        }));

        const btn = document.getElementById('placeOrderBtn');
        btn.disabled = true;
        btn.textContent = 'Placing...';

        const orderType = document.getElementById('orderType').value;
        let payload = {
            order_type: orderType,
            items: items
        };

        if (orderType === 'DINE_IN') {
            const tNo = document.getElementById('tableNo').value.trim();
            const wNo = document.getElementById('waiterNo').value.trim();
            if(tNo) payload.table_id = tNo; 
            if(wNo) payload.waiter_id = wNo;
        } else if (orderType === 'DELIVERY') {
            const phone = document.getElementById('customerPhone').value.trim();
            const addr = document.getElementById('deliveryAddress').value.trim();
            if(phone) payload.customer_phone = phone;
            if(addr) payload.delivery_address = addr;
        }

        fetch('{{ route("admin.order.place") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify(payload)
        })
        .then(r => r.json())
        .then(data => {
            btn.disabled = false;
            btn.textContent = 'Place Order';
            if (data.success) {
                document.getElementById('orderSuccessMsg').textContent = 'Order #' + data.order_number + ' created successfully!';
                
                if (orderType === 'DELIVERY') {
                    printDeliveryReceiptData(items);
                }

                const modal = new bootstrap.Modal(document.getElementById('orderSuccessModal'));
                modal.show();
                newOrder();
                
                // Clear input fields
                document.getElementById('tableNo').value = '';
                document.getElementById('waiterNo').value = '';
                document.getElementById('customerPhone').value = '';
                document.getElementById('deliveryAddress').value = '';
            } else {
                alert('Error: ' + (data.message || 'Could not place order.'));
            }
        })
        .catch(() => {
            btn.disabled = false;
            btn.textContent = 'Place Order';
            alert('Network error. Please try again.');
        });
    }

    function printDeliveryReceiptData(items) {
        const phone = document.getElementById('customerPhone').value || 'N/A';
        const addr = document.getElementById('deliveryAddress').value || 'N/A';
        
        document.getElementById('printCustomerPhone').innerText = phone;
        document.getElementById('printCustomerAddress').innerText = addr;
        document.getElementById('printReceiptDate').innerText = new Date().toLocaleString();

        let itemsHtml = `<tr><th style="padding-bottom:5px;">Item</th><th style="padding-bottom:5px; text-align:right;">Total</th></tr>`;
        let total = 0;
        
        items.forEach(item => {
            itemsHtml += `<tr><td style="padding:2px 0;">${item.quantity}x ${orderItems[item.product_id].name}</td><td style="text-align:right;">Tsh ${item.subtotal.toFixed(2)}</td></tr>`;
            total += item.subtotal;
        });

        document.getElementById('printReceiptItems').innerHTML = itemsHtml;
        document.getElementById('printReceiptTotal').innerText = 'Tsh ' + (total * 1.05).toFixed(2); // with 5% tax roughly

        const printContent = document.getElementById('printDeliveryReceipt').innerHTML;
        const originalContent = document.body.innerHTML;

        document.body.innerHTML = printContent;
        window.print();
        document.body.innerHTML = originalContent;
        
        // Re-attach listeners since we overwrote body html
        location.reload(); 
    }

    // Category filter buttons
    document.querySelectorAll('.cat-filter-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.cat-filter-btn').forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            const cat = this.dataset.cat;
            document.querySelectorAll('.product-item').forEach(item => {
                if (cat === 'all' || item.dataset.cat == cat) {
                    item.style.display = '';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    });
</script>

@endsection