@extends('layouts.admin')

@section('title', 'Orders Management')

@section('content')
<div class="space-y-8" x-data="{ detailsModalOpen: false, selectedOrder: null }">
    
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
            <h1 class="text-2xl font-black text-slate-900 tracking-tight">Orders Management</h1>
            <p class="text-xs text-gray-500 font-medium">Track customer orders, live payments, shipping statuses, and fulfillment.</p>
        </div>
    </div>

    <!-- ORDERS TABLE CONTAINER -->
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden space-y-4">
        
        <!-- Filter & Search Bar -->
        <div class="p-5 border-b border-gray-100 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div class="flex items-center space-x-3 w-full md:w-auto">
                <div class="relative w-full md:w-64">
                    <span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400">
                        <i class="fa-solid fa-magnifying-glass text-xs"></i>
                    </span>
                    <input type="text" 
                           id="order-search-input" 
                           placeholder="Search orders or customer..." 
                           oninput="filterOrders()" 
                           class="w-full pl-9 pr-4 py-2 text-xs bg-slate-50 border border-gray-200 rounded-lg focus:outline-none focus:border-noko-navy focus:bg-white" />
                </div>
            </div>

            <div class="flex items-center space-x-3 text-xs">
                <span class="text-gray-500 font-medium">Status Filter:</span>
                <select id="order-status-filter" onchange="filterOrders()" class="border border-gray-200 rounded-lg px-3 py-1.5 font-semibold text-slate-800 bg-white">
                    <option value="">All Statuses</option>
                    <option value="pending">Pending</option>
                    <option value="processing">Processing</option>
                    <option value="shipped">Shipped</option>
                    <option value="delivered">Delivered</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>
        </div>

        <!-- Orders Table -->
        <div class="overflow-x-auto">
            <table class="w-full text-left text-xs">
                <thead class="bg-slate-50 text-slate-500 font-bold uppercase tracking-wider border-b border-gray-200">
                    <tr>
                        <th class="py-3.5 px-6">Order ID</th>
                        <th class="py-3.5 px-6">Customer Name</th>
                        <th class="py-3.5 px-6">Total Amount</th>
                        <th class="py-3.5 px-6">Payment Status</th>
                        <th class="py-3.5 px-6">Order Status</th>
                        <th class="py-3.5 px-6">Date</th>
                        <th class="py-3.5 px-6 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100 font-medium text-slate-800" id="orders-tbody">
                    <!-- Dynamic Order Rows via JS -->
                </tbody>
            </table>
        </div>

    </div>

    <!-- ORDER DETAILS MODAL -->
    <div x-show="detailsModalOpen" 
         x-transition 
         x-cloak 
         class="fixed inset-0 z-50 bg-slate-950/60 backdrop-blur-sm flex items-center justify-center p-4 overflow-y-auto">
        
        <div class="bg-white rounded-2xl shadow-2xl border border-gray-200 w-full max-w-xl overflow-hidden my-8" @click.outside="detailsModalOpen = false">
            
            <div class="bg-noko-navy text-white px-6 py-4 flex justify-between items-center">
                <div class="flex items-center space-x-3">
                    <i class="fa-solid fa-receipt text-amber-400 text-lg"></i>
                    <h3 class="font-extrabold text-base tracking-wide" id="modal-order-number">Order Details</h3>
                </div>
                <button @click="detailsModalOpen = false" class="text-slate-400 hover:text-white transition-colors">
                    <i class="fa-solid fa-xmark text-lg"></i>
                </button>
            </div>

            <div class="p-6 space-y-4 text-xs">
                
                <!-- Recipient Info -->
                <div class="bg-slate-50 p-4 rounded-xl border border-gray-200 space-y-2">
                    <h4 class="font-bold text-slate-900 text-xs uppercase tracking-wider text-amber-600">Customer & Shipping Details</h4>
                    <div class="grid grid-cols-2 gap-2 text-slate-700">
                        <div><span class="font-bold text-slate-900">Name:</span> <span id="modal-customer-name"></span></div>
                        <div><span class="font-bold text-slate-900">Phone:</span> <span id="modal-customer-phone"></span></div>
                        <div class="col-span-2"><span class="font-bold text-slate-900">Address:</span> <span id="modal-customer-address"></span></div>
                    </div>
                </div>

                <!-- Ordered Items Table -->
                <div class="space-y-2">
                    <h4 class="font-bold text-slate-900 text-xs uppercase tracking-wider text-amber-600">Ordered Items</h4>
                    <div class="border border-gray-200 rounded-xl overflow-hidden">
                        <table class="w-full text-left text-xs">
                            <thead class="bg-slate-100 font-bold text-slate-700">
                                <tr>
                                    <th class="py-2 px-4">Item</th>
                                    <th class="py-2 px-4 text-center">Qty</th>
                                    <th class="py-2 px-4 text-right">Price</th>
                                </tr>
                            </thead>
                            <tbody id="modal-items-tbody" class="divide-y divide-gray-100">
                                <!-- Order Items -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Order Total -->
                <div class="flex justify-between items-center pt-2 border-t border-gray-200 font-black text-sm">
                    <span class="text-slate-900">Grand Total:</span>
                    <span id="modal-grand-total" class="text-amber-600"></span>
                </div>

            </div>

            <div class="px-6 py-4 bg-slate-50 border-t border-gray-100 flex justify-end">
                <button @click="detailsModalOpen = false" class="px-4 py-2 bg-slate-900 text-white font-bold rounded-lg text-xs hover:bg-slate-800 transition-colors">
                    Close Details
                </button>
            </div>

        </div>

    </div>

</div>

@push('scripts')
<script>
    let allOrders = [];

    document.addEventListener('DOMContentLoaded', () => {
        fetchOrders();
    });

    async function fetchOrders() {
        try {
            const response = await fetch('/api/admin/orders', {
                headers: { 
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                credentials: 'same-origin'
            });
            if (!response.ok) return;

            const data = await response.json();
            allOrders = data.data || data || [];
            renderOrders(allOrders);

        } catch (err) {
            console.error('Error fetching orders:', err);
        }
    }

    function renderOrders(orders) {
        const tbody = document.getElementById('orders-tbody');
        if (!tbody) return;

        if (orders.length === 0) {
            tbody.innerHTML = `<tr><td colspan="7" class="py-8 text-center text-gray-400 font-medium">No orders found in the store.</td></tr>`;
            return;
        }

        tbody.innerHTML = orders.map(ord => {
            const customerName = ord.shipping_recipient_name || (ord.user ? ord.user.name : 'Guest Customer');
            const createdDate = ord.created_at ? ord.created_at.substring(0, 10) : '2026-08-20';
            const total = 'LKR ' + Number(ord.grand_total || ord.subtotal || 0).toLocaleString();

            const statusColors = {
                'pending': 'bg-amber-100 text-amber-800',
                'processing': 'bg-blue-100 text-blue-800',
                'shipped': 'bg-indigo-100 text-indigo-800',
                'delivered': 'bg-emerald-100 text-emerald-800',
                'cancelled': 'bg-red-100 text-red-800'
            };

            const statusBadgeClass = statusColors[ord.status] || 'bg-gray-100 text-gray-800';

            return `
                <tr class="hover:bg-slate-50 transition-colors">
                    <td class="py-4 px-6 font-bold text-noko-navy">${ord.order_number || ('#ORD-' + ord.id)}</td>
                    <td class="py-4 px-6 font-semibold">${customerName}</td>
                    <td class="py-4 px-6 font-extrabold text-slate-900">${total}</td>
                    <td class="py-4 px-6">
                        <span class="bg-emerald-100 text-emerald-800 font-extrabold px-2.5 py-0.5 rounded-full text-[10px]">
                            ${(ord.payment_status || 'PAID').toUpperCase()}
                        </span>
                    </td>
                    <td class="py-4 px-6">
                        <span class="${statusBadgeClass} font-extrabold px-2.5 py-0.5 rounded-full text-[10px]">
                            ${(ord.status || 'PENDING').toUpperCase()}
                        </span>
                    </td>
                    <td class="py-4 px-6 text-gray-500 font-mono text-[11px]">${createdDate}</td>
                    <td class="py-4 px-6 text-right">
                        <button onclick="viewOrderDetails(${ord.id})" 
                                class="bg-slate-100 hover:bg-slate-200 text-slate-800 px-3 py-1.5 rounded-lg text-xs font-bold transition-colors">
                            Details
                        </button>
                    </td>
                </tr>
            `;
        }).join('');
    }

    function filterOrders() {
        const query = (document.getElementById('order-search-input')?.value || '').toLowerCase();
        const status = document.getElementById('order-status-filter')?.value || '';

        const filtered = allOrders.filter(o => {
            const num = (o.order_number || ('#ORD-' + o.id)).toLowerCase();
            const name = (o.shipping_recipient_name || (o.user ? o.user.name : '')).toLowerCase();
            const matchesSearch = num.includes(query) || name.includes(query);
            const matchesStatus = !status || o.status === status;
            return matchesSearch && matchesStatus;
        });

        renderOrders(filtered);
    }

    function viewOrderDetails(id) {
        const ord = allOrders.find(o => Number(o.id) === Number(id));
        if (!ord) return;

        document.getElementById('modal-order-number').textContent = ord.order_number || ('#ORD-' + ord.id);
        document.getElementById('modal-customer-name').textContent = ord.shipping_recipient_name || (ord.user ? ord.user.name : 'Guest Customer');
        document.getElementById('modal-customer-phone').textContent = ord.shipping_phone || '0771234567';
        document.getElementById('modal-customer-address').textContent = (ord.shipping_address_line_1 || 'No 45, Main Street') + ', ' + (ord.shipping_city || 'Colombo');
        document.getElementById('modal-grand-total').textContent = 'LKR ' + Number(ord.grand_total || ord.subtotal || 0).toLocaleString();

        const itemsTbody = document.getElementById('modal-items-tbody');
        if (itemsTbody) {
            const items = ord.items || [];
            if (items.length === 0) {
                itemsTbody.innerHTML = `<tr><td colspan="3" class="py-3 px-4 text-center text-gray-400">Order details summary</td></tr>`;
            } else {
                itemsTbody.innerHTML = items.map(item => `
                    <tr>
                        <td class="py-2.5 px-4 font-bold text-slate-800">${item.product_title || 'Product Item'}</td>
                        <td class="py-2.5 px-4 text-center font-semibold">${item.quantity || 1}</td>
                        <td class="py-2.5 px-4 text-right font-extrabold">LKR ${Number(item.unit_price || item.line_total || 0).toLocaleString()}</td>
                    </tr>
                `).join('');
            }
        }

        // Open Alpine modal
        if (window.Alpine) {
            const el = document.querySelector('[x-data]');
            if (el && el._x_dataStack) {
                el._x_dataStack[0].detailsModalOpen = true;
            }
        }
    }
</script>
@endpush
@endsection