@extends('front.layout.master')
@section('title', __('Track order') . ' | ')

@section('body')

<div class="max-w-[1400px] mx-auto px-4 lg:px-6 pt-5">
    <nav class="breadcrumb-row text-[12px] text-slate-500 flex items-center gap-1.5 leading-none">
        <a href="{{ url('/') }}" class="hover:text-brand-600">{{ __('Home') }}</a>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-slate-300 shrink-0"><path d="m9 6 6 6-6 6"/></svg>
        <span class="text-deep font-medium">{{ __('Track Order') }}</span>
    </nav>

    <div class="mt-6 mb-6 text-center">
        <div class="w-16 h-16 mx-auto bg-brand-50 rounded-2xl grid place-items-center text-brand-600 mb-4">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/></svg>
        </div>
        <h1 class="font-display font-extrabold text-3xl lg:text-4xl">{{ __('Track your order') }}</h1>
        <p class="text-slate-500 text-[15px] mt-2 max-w-md mx-auto">{{ __('Enter your Tracking ID below. You received it on your order page and in the confirmation email.') }}</p>
    </div>
</div>

<section class="max-w-3xl mx-auto px-4 lg:px-6 pb-12">
    <div class="bg-white rounded-2xl shadow-card p-6 lg:p-8">
        <form id="trackForm" class="flex flex-col sm:flex-row gap-3">
            @csrf
            <input type="text" id="trackingid" name="trackingid" required
                value="{{ request()->input('trackingid') }}"
                placeholder="{{ __('e.g. ORD-123456') }}"
                class="flex-1 h-12 px-4 rounded-lg border-2 border-slate-200 focus:border-brand-500 outline-none text-[14px]">
            <button type="submit" class="bg-brand-500 hover:bg-brand-600 text-white font-bold px-6 h-12 rounded-lg whitespace-nowrap">{{ __('Track') }}</button>
        </form>

        <div id="trackResult" class="mt-6 hidden"></div>
        <div id="trackLoading" class="mt-6 hidden text-center text-slate-500">
            <div class="inline-block w-8 h-8 border-2 border-slate-200 border-t-brand-500 rounded-full animate-spin"></div>
            <div class="mt-2 text-[13px]">{{ __('Looking up your order') }}…</div>
        </div>
    </div>

    <div class="mt-6 text-center">
        <p class="text-[13px] text-slate-500">{{ __('Need help finding your tracking ID?') }} <a href="{{ route('hdesk') }}" class="text-brand-600 hover:underline font-semibold">{{ __('Contact support') }}</a></p>
    </div>
</section>

@endsection

@section('script')
<script>
(function(){
    var $form = $('#trackForm'), $res = $('#trackResult'), $load = $('#trackLoading');
    var statusOrder = ['pending','processed','shipped','delivered'];
    var statusIcon = {
        pending: '<path d="M21 16V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2Z"/>',
        processed: '<path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/>',
        shipped: '<path d="M3 7h11v9H3zM14 10h4l3 3v3h-7"/><circle cx="7" cy="18" r="2"/><circle cx="17" cy="18" r="2"/>',
        delivered: '<path d="m4 12 5 5L20 7"/>'
    };

    function lookup(trackingid){
        if (!trackingid) return;
        $res.addClass('hidden').html('');
        $load.removeClass('hidden');
        $.ajax({
            url: baseUrl + '/track/order',
            method: 'POST',
            data: { trackingid: trackingid, _token: $('meta[name="csrf-token"]').attr('content') },
            success: function(data){
                $load.addClass('hidden');
                $res.removeClass('hidden').html(render(data));
            },
            error: function(){
                $load.addClass('hidden');
                $res.removeClass('hidden').html('<div class="text-center text-rose-500 py-8 font-semibold">{{ __('Could not look up that tracking ID') }}</div>');
            }
        });
    }

    function esc(s){ return $('<div>').text(s == null ? '' : s).html(); }

    function render(data){
        if (!data || data.status === 'fail') {
            return '<div class="text-center py-8"><div class="font-display font-extrabold text-xl text-rose-500">'+esc(data && data.msg ? data.msg : '{{ __('Order not found') }}')+'</div></div>';
        }
        var o = data.order || {};
        var addr = o.address || {};
        var st = (o.orderstatus || '').toLowerCase();
        var stepsHtml = '';
        var passed = true;
        var canceled = (st === 'canceled');
        var statusList = canceled ? ['pending','processed','canceled'] : statusOrder;
        statusList.forEach(function(key){
            var active = false;
            if (key === 'canceled') active = (st === 'canceled');
            else if (key === 'pending') active = ['pending','processed','shipped','delivered','return_request','ret_ref','refunded','canceled'].indexOf(st) !== -1;
            else if (key === 'processed') active = ['processed','shipped','delivered','return_request','ret_ref','refunded'].indexOf(st) !== -1;
            else if (key === 'shipped') active = ['shipped','delivered','return_request','ret_ref','refunded'].indexOf(st) !== -1;
            else if (key === 'delivered') active = ['delivered','return_request','ret_ref','refunded'].indexOf(st) !== -1;
            stepsHtml += '<div class="flex-1 text-center relative">'
                + '<div class="w-10 h-10 mx-auto rounded-full grid place-items-center '+(active ? (key==='canceled' ? 'bg-rose-500 text-white' : 'bg-emerald-500 text-white') : 'bg-slate-200 text-slate-500')+'">'
                + '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">'+(statusIcon[key] || statusIcon.pending)+'</svg>'
                + '</div>'
                + '<div class="mt-2 text-[12px] font-semibold '+(active ? 'text-deep' : 'text-slate-400')+'">'+key.charAt(0).toUpperCase()+key.slice(1)+'</div>'
                + '</div>';
        });

        var logsHtml = '';
        if (o.trackinglogs && o.trackinglogs.length) {
            o.trackinglogs.forEach(function(l){
                logsHtml += '<div class="flex justify-between gap-4 py-2.5 border-b border-slate-100 text-[13px]"><span>'+esc(l.log)+'</span><span class="text-slate-500 tabular">'+esc(l.created_at)+'</span></div>';
            });
        } else {
            logsHtml = '<div class="text-center text-slate-400 py-4 text-[13px]">{{ __('No tracking logs yet') }}</div>';
        }

        return ''
            + '<div class="bg-slate-50 rounded-xl p-5 grid md:grid-cols-3 gap-5">'
                + '<div><div class="text-[11px] uppercase tracking-wider text-slate-500 font-bold mb-2">{{ __('Order') }}</div>'
                + '<div class="text-[13px] space-y-1">'
                    + '<div><b>{{ __('ID') }}:</b> '+esc(o.parent_order_id || '')+'</div>'
                    + '<div><b>{{ __('Placed on') }}:</b> '+esc(o.placed_on || '')+'</div>'
                    + '<div><b>{{ __('Total') }}:</b> '+esc(o.amount || '')+'</div>'
                + '</div></div>'
                + '<div><div class="text-[11px] uppercase tracking-wider text-slate-500 font-bold mb-2">{{ __('Customer') }}</div>'
                + '<div class="text-[13px] space-y-1">'
                    + '<div>'+esc(addr.customer_name || '')+'</div>'
                    + '<div>'+esc(addr.customer_phone || '')+'</div>'
                    + '<div class="break-all">'+esc(addr.customer_email || '')+'</div>'
                + '</div></div>'
                + '<div><div class="text-[11px] uppercase tracking-wider text-slate-500 font-bold mb-2">{{ __('Shipping') }}</div>'
                + '<div class="text-[13px] space-y-1">'
                    + '<div>'+esc(addr.address || '')+'</div>'
                    + '<div>'+esc((addr.city||'') + ', ' + (addr.state||'') + ', ' + (addr.country||''))+'</div>'
                    + '<div>'+esc(addr.pincode || '')+'</div>'
                + '</div></div>'
            + '</div>'
            + '<div class="mt-6"><div class="flex items-start">'+stepsHtml+'</div></div>'
            + '<div class="mt-6"><h4 class="font-semibold text-[14px] mb-2">{{ __('Tracking history') }}</h4>'+logsHtml+'</div>';
    }

    $form.on('submit', function(e){
        e.preventDefault();
        var id = $('#trackingid').val();
        var u = new URL(window.location.href); u.searchParams.set('trackingid', id);
        window.history.pushState('', '', u.toString());
        lookup(id);
    });

    var pre = $('#trackingid').val();
    if (pre) lookup(pre);
})();
</script>
@endsection