@extends('layouts.app')

@section('title', 'Track Order')

@section('content')
    <div class="max-w-2xl mx-auto py-12 px-4">
        <h1 class="text-4xl font-bold text-gray-900 mb-4 text-center">Track Your Order</h1>
        <p class="text-gray-500 text-center mb-10">Enter your order number to check the delivery status.</p>

        <div class="bg-white rounded-2xl border border-gray-200 shadow-sm p-6">
            <form id="trackForm" class="space-y-4">
                <div>
                    <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2.5">Order Number</label>
                    <input type="text" id="orderNumber" name="order_number" required placeholder="e.g. MB-00000001" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none">
                </div>
                <button type="submit" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg transition-colors">Track Order</button>
            </form>

            <div id="result" class="mt-6 hidden">
                <div class="p-4 bg-gray-50 rounded-xl">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-gray-900" id="orderNumberDisplay"></h3>
                        <span id="orderStatus" class="px-3 py-1 text-xs font-semibold rounded-full"></span>
                    </div>

                    <div class="relative">
                        <div class="absolute left-3 top-0 bottom-0 w-0.5 bg-gray-200"></div>
                        <div class="relative space-y-6" id="trackingSteps">
                        </div>
                    </div>
                </div>
            </div>

            <div id="notFound" class="mt-6 hidden">
                <div class="p-4 bg-red-50 border border-red-100 rounded-xl text-center">
                    <svg class="w-10 h-10 text-red-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    <p class="text-red-700 font-medium">Order not found</p>
                    <p class="text-sm text-red-500 mt-1">Please check the order number and try again.</p>
                </div>
            </div>
        </div>

        @auth
        <div class="mt-8 text-center">
            <p class="text-sm text-gray-500">Or view your orders directly from your <a href="{{ route('customer.orders') }}" class="text-indigo-600 hover:underline font-medium">account dashboard</a>.</p>
        </div>
        @endauth
    </div>

    <script>
    document.getElementById('trackForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const orderNumber = document.getElementById('orderNumber').value.trim();
        const result = document.getElementById('result');
        const notFound = document.getElementById('notFound');

        result.classList.add('hidden');
        notFound.classList.add('hidden');

        fetch(`/api/v1/orders/track?order_number=${encodeURIComponent(orderNumber)}`)
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    displayOrder(data.order);
                } else {
                    notFound.classList.remove('hidden');
                }
            })
            .catch(() => {
                notFound.classList.remove('hidden');
            });
    });

    function displayOrder(order) {
        const result = document.getElementById('result');
        document.getElementById('orderNumberDisplay').textContent = order.order_number;

        const statusEl = document.getElementById('orderStatus');
        const statusColors = {
            'pending': 'bg-yellow-100 text-yellow-700',
            'confirmed': 'bg-green-100 text-green-700',
            'processing': 'bg-blue-100 text-blue-700',
            'shipped': 'bg-purple-100 text-purple-700',
            'delivered': 'bg-emerald-100 text-emerald-700',
            'cancelled': 'bg-red-100 text-red-700',
        };
        statusEl.className = `px-3 py-1 text-xs font-semibold rounded-full ${statusColors[order.status] || 'bg-gray-100 text-gray-700'}`;
        statusEl.textContent = order.status.charAt(0).toUpperCase() + order.status.slice(1);

        const steps = [
            { label: 'Order Placed', date: order.created_at, active: true },
            { label: 'Confirmed', date: order.status === 'confirmed' || ['processing', 'shipped', 'delivered'].includes(order.status) ? order.updated_at : null, active: ['confirmed', 'processing', 'shipped', 'delivered'].includes(order.status) },
            { label: 'Processing', date: ['processing', 'shipped', 'delivered'].includes(order.status) ? order.updated_at : null, active: ['processing', 'shipped', 'delivered'].includes(order.status) },
            { label: 'Shipped', date: ['shipped', 'delivered'].includes(order.status) ? order.updated_at : null, active: ['shipped', 'delivered'].includes(order.status) },
            { label: 'Delivered', date: order.status === 'delivered' ? order.updated_at : null, active: order.status === 'delivered' },
        ];

        const stepsContainer = document.getElementById('trackingSteps');
        stepsContainer.innerHTML = steps.map((step, i) => `
            <div class="flex items-start gap-4">
                <div class="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 ${step.active ? 'bg-indigo-600 text-white' : 'bg-gray-200 text-gray-400'}">
                    ${step.active ? '<svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>' : `<span class="text-xs">${i + 1}</span>`}
                </div>
                <div>
                    <p class="font-medium text-sm ${step.active ? 'text-gray-900' : 'text-gray-400'}">${step.label}</p>
                    ${step.date ? `<p class="text-xs text-gray-500">${new Date(step.date).toLocaleDateString()}</p>` : '<p class="text-xs text-gray-300">Pending</p>'}
                </div>
            </div>
        `).join('');

        result.classList.remove('hidden');
    }
    </script>
@endsection