@php
    $paidSoFar = $order->payments->sum('amount');
    $remaining = max(0, $order->total - $paidSoFar);
@endphp
<div id="cartPanel">
@if ($order)
<div class="card p-3 mb-3">
    <div class="d-flex justify-content-between">
        <h5>Order #{{ $order->order_number }}</h5>
        <span class="badge bg-secondary align-self-start">{{ ucfirst(str_replace('_',' ',$order->status)) }}</span>
    </div>
    <p class="text-muted small mb-2">{{ ucfirst(str_replace('_',' ',$order->order_type)) }}</p>
    @if ($order->placed_by_customer && $order->status === 'open')
    <div class="alert alert-warning py-1 px-2 small">📱 Placed by customer via QR menu — review before sending to kitchen</div>
    @endif

    <form method="POST" action="{{ route('pos.split-items', $order) }}" id="splitForm">@csrf</form>
    <ul class="list-group list-group-flush mb-3">
        @forelse ($order->items as $item)
        <li class="list-group-item d-flex justify-content-between align-items-center px-0" data-item-row="{{ $item->id }}">
            <div class="form-check flex-grow-1">
                <input class="form-check-input" type="checkbox" name="item_ids[]" value="{{ $item->id }}" id="item{{ $item->id }}" form="splitForm">
                <label class="form-check-label" for="item{{ $item->id }}">
                    {{ $item->displayName() }}
                    @if ($order->items->count() > 1 && $item->product->serveSequenceLabel())
                    <span class="badge bg-info text-dark">Serve {{ $item->product->serveSequenceLabel() }}</span>
                    @endif
                    <div class="small text-muted">{{ number_format($item->lineTotal(), 2) }}</div>
                </label>
            </div>
            <div class="d-flex align-items-center gap-1">
                @if ($order->status === 'open' || $order->status === 'sent_to_kitchen')
                <button type="button" class="btn btn-sm btn-outline-secondary qty-adjust-btn" data-order="{{ $order->id }}" data-item="{{ $item->id }}" data-direction="down" style="width:30px;">−</button>
                <span class="mx-1" style="min-width:20px;text-align:center;">{{ $item->quantity }}</span>
                <button type="button" class="btn btn-sm btn-outline-secondary qty-adjust-btn" data-order="{{ $order->id }}" data-item="{{ $item->id }}" data-direction="up" style="width:30px;">+</button>
                @else
                <span class="mx-1">{{ $item->quantity }}</span>
                @endif
                <button type="button" class="btn btn-sm btn-outline-danger item-remove-btn" data-order="{{ $order->id }}" data-item="{{ $item->id }}">✕</button>
            </div>
        </li>
        @empty
        <li class="list-group-item px-0 text-muted">No items yet — tap a menu item to add.</li>
        @endforelse
    </ul>
    @if ($order->items->count() > 1)
    <button type="submit" form="splitForm" class="btn btn-outline-secondary btn-sm w-100 mb-2">Split checked items into new bill</button>
    @endif

    <div class="d-flex justify-content-between"><span>Subtotal</span><span>{{ number_format($order->subtotal, 2) }}</span></div>
    <div class="d-flex justify-content-between"><span>Tax</span><span>{{ number_format($order->tax, 2) }}</span></div>
    @if ($order->service_charge > 0)
    <div class="d-flex justify-content-between"><span>Service Charge</span><span>{{ number_format($order->service_charge, 2) }}</span></div>
    @endif
    @if ($order->discount > 0)
    <div class="d-flex justify-content-between text-success">
        <span>Discount {{ $order->coupon ? '('.$order->coupon->code.')' : '' }}</span>
        <span>-{{ number_format($order->discount, 2) }}</span>
    </div>
    @endif
    <div class="d-flex justify-content-between fw-bold fs-5"><span>Total</span><span>{{ number_format($order->total, 2) }}</span></div>
    @if ($paidSoFar > 0)
    <div class="d-flex justify-content-between small text-muted"><span>Paid so far</span><span>{{ number_format($paidSoFar, 2) }}</span></div>
    <div class="d-flex justify-content-between fw-bold text-danger"><span>Balance Due</span><span>{{ number_format($remaining, 2) }}</span></div>
    @endif

    <div class="d-grid gap-2 mt-3">
        @if ($order->status === 'open')
        <form method="POST" action="{{ route('pos.send-kitchen', $order) }}">
            @csrf
            <button class="btn btn-outline-dark w-100" {{ $order->items->isEmpty() ? 'disabled' : '' }}>Send to Kitchen</button>
        </form>
        @else
        <form method="POST" action="{{ route('pos.reprint-kitchen', $order) }}">
            @csrf
            <button class="btn btn-outline-secondary w-100 btn-sm">🖨 Reprint KOT/BOT</button>
        </form>
        @endif

        <button class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#couponModal">🏷 Coupon / Customer / Loyalty</button>

        @if ($otherOpenOrders->count())
        <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#mergeModal">🔀 Merge Another Order In</button>
        @endif

        @can('payments.take')
        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#payModal" {{ $order->items->isEmpty() ? 'disabled' : '' }}>Checkout / Pay</button>
        @endcan

        <button type="button" class="btn btn-outline-danger w-100" data-bs-toggle="modal" data-bs-target="#cancelModal">Cancel Order</button>
    </div>
</div>

<!-- Cancel Modal — preset reasons for speed, custom text only when needed -->
<div class="modal fade" id="cancelModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('pos.cancel', $order) }}" id="cancelForm">
                @csrf
                <div class="modal-header"><h5 class="modal-title">Cancel Order</h5></div>
                <div class="modal-body">
                    <input type="hidden" name="cancel_reason" id="cancelReasonInput">
                    <p class="small text-muted">Pick a reason (or write your own):</p>
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        @foreach (['Customer changed mind', 'Wrong item added', 'Item out of stock', 'Customer left / no-show', 'Duplicate order', 'Kitchen error'] as $reason)
                        <button type="button" class="btn btn-outline-dark btn-sm cancel-reason-chip" data-reason="{{ $reason }}">{{ $reason }}</button>
                        @endforeach
                    </div>
                    <input type="text" class="form-control" id="cancelReasonCustom" placeholder="Or type a custom reason...">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Never mind</button>
                    <button type="submit" class="btn btn-danger">Cancel This Order</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Payment Modal -->
<div class="modal fade" id="payModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('pos.checkout', $order) }}">
                @csrf
                <div class="modal-header"><h5 class="modal-title">Take Payment</h5></div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="form-label">Method</label>
                        <select name="method" class="form-select">
                            <option value="cash">Cash</option>
                            <option value="card">Card</option>
                            <option value="bank_transfer">Bank Transfer</option>
                            <option value="esewa">eSewa</option>
                            <option value="khalti">Khalti</option>
                            <option value="nimb">NIMB</option>
                            <option value="nepalpay">NepalPay</option>
                            <option value="fonepay">FonePay</option>
                            <option value="mobile_wallet">Other Mobile Wallet</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Amount to Pay Now</label>
                        <input type="number" step="0.01" name="amount" class="form-control" value="{{ $remaining }}">
                        <div class="form-text">Pay less than the balance to record a partial/split payment — the bill stays open until fully paid.</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Amount Tendered (cash given by customer)</label>
                        <input type="number" step="0.01" name="amount_tendered" class="form-control" value="{{ $remaining }}">
                    </div>
                    <p class="fw-bold">Balance Due: {{ number_format($remaining, 2) }}</p>
                    @if ($order->receipt_email || $order->receipt_phone)
                    <p class="small text-muted mb-0">Digital receipt will be sent to {{ $order->receipt_email ?: $order->receipt_phone }} once fully paid.</p>
                    @else
                    <p class="small text-muted mb-0">No digital receipt contact set — add one via the Coupon/Customer panel if needed.</p>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-success">Record Payment</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Coupon / Customer / Loyalty Modal -->
<div class="modal fade" id="couponModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5>Coupon, Customer & Loyalty</h5></div>
            <div class="modal-body">
                <p class="small fw-bold mb-1">Manual Discount</p>
                <form method="POST" action="{{ route('pos.manual-discount', $order) }}" class="d-flex gap-2 mb-3">
                    @csrf
                    <select name="discount_type" class="form-select" style="max-width:110px;">
                        <option value="percentage" {{ $order->discount_type == 'percentage' ? 'selected':'' }}>%</option>
                        <option value="fixed" {{ $order->discount_type == 'fixed' ? 'selected':'' }}>Amount</option>
                    </select>
                    <input type="number" step="0.01" name="discount_value" class="form-control" value="{{ $order->discount_value ?: '' }}" placeholder="e.g. 20">
                    <button class="btn btn-outline-dark">Apply</button>
                </form>
                <hr>
                @if ($order->coupon)
                    <div class="alert alert-success d-flex justify-content-between align-items-center">
                        <span>Coupon <strong>{{ $order->coupon->code }}</strong> applied</span>
                        <form method="POST" action="{{ route('pos.remove-coupon', $order) }}">
                            @csrf
                            <button class="btn btn-sm btn-outline-danger">Remove</button>
                        </form>
                    </div>
                @else
                    <form method="POST" action="{{ route('pos.apply-coupon', $order) }}" class="d-flex gap-2 mb-3">
                        @csrf
                        <input name="code" class="form-control text-uppercase" placeholder="Coupon code">
                        <button class="btn btn-outline-dark">Apply</button>
                    </form>
                @endif

                <hr>

                @if ($order->customer)
                    <p class="mb-1">Customer: <strong>{{ $order->customer->name ?: $order->customer->phone }}</strong></p>
                    <p class="mb-2">Loyalty points available: <strong>{{ $order->customer->loyalty_points }}</strong></p>
                    @if ($order->customer->loyalty_points > 0)
                    <form method="POST" action="{{ route('pos.redeem-points', $order) }}" class="d-flex gap-2 mb-3">
                        @csrf
                        <input type="number" name="points" min="1" max="{{ $order->customer->loyalty_points }}" class="form-control" placeholder="Points to redeem">
                        <button class="btn btn-outline-dark">Redeem</button>
                    </form>
                    @endif
                @else
                    <form method="POST" action="{{ route('pos.attach-customer', $order) }}" class="mb-3">
                        @csrf
                        <label class="form-label">Customer Phone (for loyalty points)</label>
                        <input name="phone" class="form-control mb-2" required>
                        <label class="form-label">Name (optional)</label>
                        <input name="name" class="form-control mb-2">
                        <button class="btn btn-outline-dark w-100">Attach Customer</button>
                    </form>
                @endif

                <hr>
                <form method="POST" action="{{ route('pos.receipt-contact', $order) }}">
                    @csrf
                    <label class="form-label">Send digital receipt to:</label>
                    <input type="email" name="receipt_email" class="form-control mb-2" placeholder="Email" value="{{ $order->receipt_email }}">
                    <input name="receipt_phone" class="form-control mb-2" placeholder="Phone (SMS/WhatsApp)" value="{{ $order->receipt_phone }}">
                    <button class="btn btn-outline-dark w-100 btn-sm">Save Receipt Contact</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Merge Modal -->
<div class="modal fade" id="mergeModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <form method="POST" action="{{ route('pos.merge-into', $order) }}">
                @csrf
                <div class="modal-header"><h5>Merge Another Order Into This Bill</h5></div>
                <div class="modal-body">
                    <select name="source_order_id" class="form-select" required>
                        <option value="">-- choose order --</option>
                        @foreach ($otherOpenOrders as $o)
                        <option value="{{ $o->id }}">#{{ $o->order_number }} — {{ $o->table->name ?? ucfirst($o->order_type) }} ({{ number_format($o->total,2) }})</option>
                        @endforeach
                    </select>
                </div>
                <div class="modal-footer"><button class="btn btn-dark">Merge</button></div>
            </form>
        </div>
    </div>
</div>
@endif
</div>