@extends('admin.layouts.admin')

@section('title','Orders')
@section('page-title','Orders')

@section('content')

<div class="card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Order No</th>
                    <th>Merchant</th>
                    <th>Customer</th>
                    <th>Total</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>

            @foreach($orders as $order)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>#{{ $order->order_no }}</td>
                    <td>{{ $order->merchant->name ?? '-' }}</td>
                    <td>{{ $order->customer->name ?? '-' }}</td>
                    <td>LKR {{ number_format($order->total,2) }}</td>
                    <td>
                        <span class="badge bg-info">{{ ucfirst($order->status) }}</span>
                    </td>
                    <td class="text-end">
                        <button class="btn btn-sm btn-outline-primary"
                                onclick="viewOrder({{ $order->id }})">
                            <i class="bi bi-eye"></i>
                        </button>
                    </td>
                </tr>
            @endforeach

            </tbody>
        </table>
    </div>
</div>

{{ $orders->links() }}

{{-- ORDER MODAL --}}
<div class="modal fade" id="orderModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Order Details</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div id="orderDetails">Loading...</div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
function viewOrder(id) {
    fetch(`/admin/orders/${id}`)
        .then(res => res.json())
        .then(data => {
            document.getElementById('orderDetails').innerHTML = `
                <strong>Order #${data.order_no}</strong><hr>
                <p><b>Merchant:</b> ${data.merchant?.name ?? '-'}</p>
                <p><b>Customer:</b> ${data.customer?.name ?? '-'}</p>
                <p><b>Total:</b> LKR ${data.total}</p>
                <p><b>Status:</b> ${data.status}</p>
            `;
            new bootstrap.Modal(document.getElementById('orderModal')).show();
        });
}
</script>
@endpush