@extends('layouts.app')
@section('title', 'POS')
@section('content')

<div class="row">
    <div class="col-md-8">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h4 class="mb-0 d-none d-md-block">Menu</h4>
            <div class="d-flex gap-2 ms-auto">
                <select class="form-select form-select-sm" id="tableSelect" style="width:auto;">
                    <option value="">Takeaway (no table)</option>
                    @foreach ($tables as $t)
                        <option value="{{ $t->id }}" {{ (string)$tableId === (string)$t->id ? 'selected' : '' }}>{{ $t->name }}</option>
                    @endforeach
                </select>
            </div>
        </div>

        @if (!$order)
            <div class="card p-4" style="max-width:500px;">
                @if ($tableId)
                    <p class="mb-3">No open order for this table yet.</p>
                    <form method="POST" action="{{ route('pos.start') }}">
                        @csrf
                        <input type="hidden" name="table_id" value="{{ $tableId }}">
                        <input type="hidden" name="order_type" value="dine_in">
                        <button class="btn btn-dark w-100">Start Dine-in Order</button>
                    </form>
                @else
                    <p class="mb-3 fw-bold">How is this order being fulfilled?</p>
                    <form method="POST" action="{{ route('pos.start') }}" id="startOrderForm">
                        @csrf
                        <div class="mb-3">
                            <select name="order_type" id="orderTypeSelect" class="form-select">
                                <option value="takeaway">🥡 Takeaway (customer picks up)</option>
                                <option value="delivery">🚚 Delivery</option>
                            </select>
                        </div>

                        <div id="deliveryFields" style="display:none;">
                            <div class="mb-2">
                                <label class="form-label small">Delivery handled by</label>
                                <select name="delivery_mode" id="deliveryModeSelect" class="form-select">
                                    <option value="own_rider">🏍️ Our own rider</option>
                                    <option value="third_party">📦 Third-party platform</option>
                                </select>
                            </div>

                            <div id="ownRiderFields">
                                <div class="mb-2">
                                    <label class="form-label small">Delivery Address</label>
                                    <input name="delivery_address" class="form-control">
                                </div>
                                <div class="mb-2">
                                    <label class="form-label small">Delivery Phone</label>
                                    <input name="delivery_phone" class="form-control">
                                </div>
                                <div class="mb-2">
                                    <label class="form-label small">Delivery Fee (charged to customer)</label>
                                    <input type="number" step="0.01" name="delivery_fee" class="form-control" value="0">
                                </div>
                            </div>

                            <div id="thirdPartyFields" style="display:none;">
                                <div class="mb-2">
                                    <label class="form-label small">Platform</label>
                                    <select name="delivery_platform_id" class="form-select">
                                        <option value="">-- select --</option>
                                        @foreach ($deliveryPlatforms as $p)
                                        <option value="{{ $p->id }}">{{ $p->name }} ({{ $p->commission_percent }}% commission)</option>
                                        @endforeach
                                    </select>
                                    <div class="form-text">
                                        No platforms set up yet?
                                        <a href="{{ route('admin.delivery-platforms.index') }}">Add one here.</a>
                                    </div>
                                </div>
                                <div class="mb-2">
                                    <label class="form-label small">Platform's Order Reference</label>
                                    <input name="external_order_ref" class="form-control" placeholder="e.g. FM-20394">
                                </div>
                            </div>
                        </div>

                        <button class="btn btn-dark w-100 mt-2">Start Order</button>
                    </form>
                @endif
            </div>
        @else
            <div class="sticky-top bg-white pb-2" style="top:0;z-index:10;">
                <input type="text" id="menuSearch" class="form-control mb-2" placeholder="🔍 Search menu items..." autocomplete="off">
                <div class="d-flex gap-2 flex-nowrap overflow-auto pb-1" id="categoryChips">
                    <button type="button" class="btn btn-sm btn-dark flex-shrink-0 category-chip active" data-target="all">All</button>
                    @foreach ($categories as $cat)
                        @if ($cat->products->count())
                        <button type="button" class="btn btn-sm btn-outline-dark flex-shrink-0 category-chip" data-target="cat-{{ $cat->id }}">{{ $cat->name }}</button>
                        @endif
                    @endforeach
                </div>
            </div>

            @foreach ($categories as $cat)
                @if ($cat->products->count())
                <h6 class="text-muted mt-3 category-heading" id="cat-{{ $cat->id }}" data-cat="cat-{{ $cat->id }}">{{ $cat->name }}</h6>
                <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-3 mb-3 category-block" data-cat="cat-{{ $cat->id }}">
                    @foreach ($cat->products as $p)
                    <div class="col product-item" data-name="{{ strtolower($p->name) }}">
                        @php $inCart = $cartQuantities[$p->id] ?? 0; @endphp
                        @if ($p->hasVariants())
                        <button type="button" class="card product-card p-3 w-100 text-start border-0 position-relative" data-bs-toggle="modal" data-bs-target="#variant{{ $p->id }}">
                            <span class="badge bg-dark position-absolute top-0 end-0 m-1 qty-badge" data-product-id="{{ $p->id }}" style="{{ $inCart ? '' : 'display:none;' }}">{{ $inCart }}</span>
                            <strong>{{ $p->name }}</strong>
                            <div class="text-muted small">{{ $p->variants->count() }} options — from {{ number_format($p->variants->min('price'), 2) }}</div>
                        </button>
                        <div class="modal fade" id="variant{{ $p->id }}" tabindex="-1">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <form class="ajax-add-form" data-order="{{ $order->id }}">
                                        <div class="modal-header"><h6 class="modal-title">{{ $p->name }}</h6></div>
                                        <div class="modal-body">
                                            <input type="hidden" name="product_id" value="{{ $p->id }}">
                                            <label class="form-label small">Variant</label>
                                            <select name="variant_id" class="form-select mb-2" required>
                                                @foreach ($p->variants as $v)
                                                <option value="{{ $v->id }}">{{ $v->name }} — {{ number_format($v->price, 2) }}</option>
                                                @endforeach
                                            </select>
                                            <label class="form-label small">Quantity</label>
                                            <input type="number" name="quantity" value="1" min="1" class="form-control">
                                        </div>
                                        <div class="modal-footer"><button type="submit" class="btn btn-dark btn-sm">Add to Order</button></div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        @else
                        <form class="ajax-add-form" data-order="{{ $order->id }}">
                            <input type="hidden" name="product_id" value="{{ $p->id }}">
                            <input type="hidden" name="quantity" value="1">
                            <button type="submit" class="card product-card p-3 w-100 text-start border-0 position-relative">
                                <span class="badge bg-dark position-absolute top-0 end-0 m-1 qty-badge" data-product-id="{{ $p->id }}" style="{{ $inCart ? '' : 'display:none;' }}">{{ $inCart }}</span>
                                <strong>{{ $p->name }}</strong>
                                <div class="text-muted small">{{ number_format($p->price, 2) }}</div>
                                @if ($p->track_inventory)
                                    <div class="small {{ $p->isLowStock() ? 'text-danger' : 'text-muted' }}">Stock: {{ $p->stock_qty }}</div>
                                @endif
                            </button>
                        </form>
                        @endif
                    </div>
                    @endforeach
                </div>
                @endif
            @endforeach
        @endif
    </div>

    <div class="col-md-4" id="cartColumn">
        @if ($order)
        @include('pos.partials.cart-panel')
        @endif
    </div>
</div>

@if ($order)
<!-- Mobile: floating button toggles #cartColumn into a fixed bottom sheet via
     CSS (same DOM node, not a duplicate) — avoids duplicate element IDs for
     the modals inside the cart panel, which would otherwise make Bootstrap
     open the wrong (hidden) copy of a modal on mobile. -->
<button class="btn btn-dark d-md-none position-fixed bottom-0 start-0 end-0 m-2 py-3 shadow" style="z-index:1040;" id="mobileCartToggle">
    🛒 View Cart — {{ $order->items->count() }} item{{ $order->items->count() === 1 ? '' : 's' }} — {{ number_format($order->total, 2) }}
</button>
@endif

@endsection
@section('scripts')
<style>
@media (max-width: 767px) {
    #cartColumn {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        max-height: 0;
        overflow-y: auto;
        background: #fff;
        transition: max-height 0.25s ease;
        z-index: 1035;
        box-shadow: 0 -4px 16px rgba(0,0,0,.15);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }
    #cartColumn.expanded {
        max-height: 85vh;
        padding: 12px;
    }
    #mobileCartToggle { display: block; }
}
@media (min-width: 768px) {
    #mobileCartToggle { display: none !important; }
}
</style>
<script>
document.getElementById('mobileCartToggle')?.addEventListener('click', function () {
    document.getElementById('cartColumn')?.classList.toggle('expanded');
});

function updateMobileToggleText(itemCount, total) {
    const btn = document.getElementById('mobileCartToggle');
    if (btn) {
        btn.textContent = `🛒 View Cart — ${itemCount} item${itemCount === 1 ? '' : 's'} — ${total}`;
    }
}


document.getElementById('tableSelect')?.addEventListener('change', function () {
    const params = new URLSearchParams(window.location.search);
    if (this.value) { params.set('table_id', this.value); } else { params.delete('table_id'); }
    window.location = "{{ route('pos.index') }}?" + params.toString();
});

function toggleOrderTypeFields() {
    const type = document.getElementById('orderTypeSelect')?.value;
    const deliveryFields = document.getElementById('deliveryFields');
    if (!deliveryFields) return;
    deliveryFields.style.display = type === 'delivery' ? 'block' : 'none';
}
function toggleDeliveryModeFields() {
    const mode = document.getElementById('deliveryModeSelect')?.value;
    const own = document.getElementById('ownRiderFields');
    const third = document.getElementById('thirdPartyFields');
    if (!own || !third) return;
    own.style.display = mode === 'own_rider' ? 'block' : 'none';
    third.style.display = mode === 'third_party' ? 'block' : 'none';
}
document.getElementById('orderTypeSelect')?.addEventListener('change', toggleOrderTypeFields);
document.getElementById('deliveryModeSelect')?.addEventListener('change', toggleDeliveryModeFields);
toggleOrderTypeFields();
toggleDeliveryModeFields();

document.getElementById('menuSearch')?.addEventListener('input', function () {
    const term = this.value.trim().toLowerCase();
    document.querySelectorAll('.category-block').forEach(block => {
        let anyVisible = false;
        block.querySelectorAll('.product-item').forEach(item => {
            const matches = !term || item.dataset.name.includes(term);
            item.style.display = matches ? '' : 'none';
            if (matches) anyVisible = true;
        });
        block.style.display = anyVisible ? '' : 'none';
        const heading = document.getElementById(block.dataset.cat);
        if (heading) heading.style.display = anyVisible ? '' : 'none';
    });
});

document.querySelectorAll('.category-chip').forEach(chip => {
    chip.addEventListener('click', function () {
        document.querySelectorAll('.category-chip').forEach(c => { c.classList.remove('btn-dark', 'active'); c.classList.add('btn-outline-dark'); });
        this.classList.add('btn-dark', 'active');
        this.classList.remove('btn-outline-dark');

        const target = this.dataset.target;
        document.querySelectorAll('.category-block, .category-heading').forEach(el => {
            el.style.display = (target === 'all' || el.dataset.cat === target) ? '' : 'none';
        });
        if (target !== 'all') {
            document.getElementById(target)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
        }
    });
});

function updateCartPanels(html) {
    document.querySelectorAll('#cartPanel').forEach(el => {
        el.outerHTML = html;
    });
    attachCartPanelHandlers();
}

function updateBadges(quantities) {
    document.querySelectorAll('.qty-badge').forEach(badge => {
        const pid = badge.dataset.productId;
        const qty = quantities[pid] || 0;
        badge.textContent = qty;
        badge.style.display = qty > 0 ? '' : 'none';
    });
}

async function postCartAction(url, method, body) {
    try {
        const res = await fetch(url, {
            method: method,
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'application/json',
                ...(body instanceof FormData ? {} : { 'Content-Type': 'application/json' }),
            },
            body: body instanceof FormData ? body : JSON.stringify(body || {}),
        });
        const data = await res.json();
        if (!data.success) {
            alert(data.message || 'Something went wrong.');
            return;
        }
        updateCartPanels(data.cart_html);
        updateBadges(data.quantities || {});
        updateMobileToggleText(data.item_count, data.total);
    } catch (e) {
        alert('Network error — check your connection and try again.');
        console.error(e);
    }
}

function attachCartPanelHandlers() {
    // Only elements INSIDE #cartPanel — safe to re-attach every time, since
    // outerHTML-replacing #cartPanel destroys the old nodes (and their old
    // listeners) along with it.
    document.querySelectorAll('.item-remove-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const orderId = this.dataset.order, itemId = this.dataset.item;
            postCartAction(`/pos/orders/${orderId}/items/${itemId}`, 'DELETE');
        });
    });

    document.querySelectorAll('.qty-adjust-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const orderId = this.dataset.order, itemId = this.dataset.item, direction = this.dataset.direction;
            postCartAction(`/pos/orders/${orderId}/items/${itemId}/quantity`, 'PATCH', { direction });
        });
    });

    document.querySelectorAll('.cancel-reason-chip').forEach(chip => {
        chip.addEventListener('click', function () {
            document.querySelectorAll('.cancel-reason-chip').forEach(c => c.classList.remove('btn-dark'));
            this.classList.add('btn-dark');
            document.getElementById('cancelReasonInput').value = this.dataset.reason;
            const custom = document.getElementById('cancelReasonCustom');
            if (custom) custom.value = '';
        });
    });
    document.getElementById('cancelReasonCustom')?.addEventListener('input', function () {
        document.getElementById('cancelReasonInput').value = this.value;
        document.querySelectorAll('.cancel-reason-chip').forEach(c => c.classList.remove('btn-dark'));
    });
}

// Menu card "add to cart" forms live OUTSIDE #cartPanel and are never
// recreated by a cart-panel swap — attach these listeners exactly once on
// page load. Re-running this after every cart update (like the cart-panel
// handlers above) would stack a duplicate listener on every menu card each
// time, so that a single tap eventually adds the item multiple times.
function attachMenuFormHandlers() {
    document.querySelectorAll('.ajax-add-form').forEach(form => {
        form.addEventListener('submit', function (e) {
            e.preventDefault();
            const orderId = this.dataset.order;
            postCartAction(`/pos/orders/${orderId}/items`, 'POST', new FormData(this));
            const modal = this.closest('.modal');
            if (modal) bootstrap.Modal.getInstance(modal)?.hide();
        });
    });
}

attachMenuFormHandlers();
attachCartPanelHandlers();
</script>
@endsection