@extends('layouts.default')
@section('title', 'tracking')
@section('description','track the order')
@section('content')
<section class="relative overflow-hidden py-5">
    <div class="min-w-screen min-h-screen flex items-center justify-center">
        @if($trackingData['success'] == true)
        <div class="bg-white w-[90vw] dark:bg-black rounded-xl shadow-lg overflow-hidden">
            <div class="w-full relative h-20">
                <a target="_blank" class="transition-all duration-500 opacity-20 hover:opacity-100" href="https://maps.google.com/?ll={{$trackingData['items'][0]['location_details']['lat']}},{{$trackingData['items'][0]['location_details']['lng']}}">
                    <svg class="absolute top-0 left-0 w-full h-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill="currentColor" d="m18 13l-1.4-1.4l2.15-2.15q-1.075-.2-3.437.225T10 12.975q.8-2.925 3.225-4.7T18.7 6.5l-2.1-2.1L18 3l5 5zm-6 9q-4.025-3.425-6.012-6.362T4 10.2q0-3.4 2.325-5.8T12 2q.875 0 1.75.188t1.675.562l-1.55 1.55q-.45-.15-.925-.225T12 4Q9.475 4 7.738 5.813T6 10.2q0 1.775 1.475 4.05T12 19.325q1.5-1.375 2.625-2.625t1.85-2.4l1.45 1.45q-1 1.475-2.475 3.025T12 22" />
                    </svg>
                </a>
                <!--<iframe width="100%" height="100%" style="border:0;" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade" src="https://www.google.com/maps/embed/v1/view?key={{env('MAP_API_KEY','')}}&center={{$trackingData['items'][0]['location_details']['lat']}},{{$trackingData['items'][0]['location_details']['lng']}}&zoom=12"></iframe>-->
            </div>
            <div class="rounded-t-lg -mt-5 relative z-10 px-5 pt-2 pb-5">
                <div class="w-10 h-1 rounded mx-auto mb-5"></div>
                <div class="flex">
                    <div class="w-1/2 px-3 text-center">
                        <div class="text-xs leading-none mb-2">From Address</div>
                        <div class="text-xl leading-tight">
                            {{$trackingData['items'][0]['from_address']['country']}},
                            {{$trackingData['items'][0]['from_address']['city']}}
                            @if($trackingData['items'][0]['from_address']['street'])
                            - {{$trackingData['items'][0]['from_address']['street']}}
                            @endif
                        </div>
                        <div class="text-xs py-2 leading-tight">
                            <span class="pe-2">
                                @if($trackingData['items'][0]['from_address']['zip'])
                                ZIP: {{$trackingData['items'][0]['from_address']['zip']}}
                                @endif
                            </span>
                            <span>
                                @if($trackingData['items'][0]['from_address']['state'])
                                State: {{$trackingData['items'][0]['from_address']['state']}}
                                @endif
                            </span>
                        </div>
                        <div class="text-xs py-2 leading-tight">
                            @if($trackingData['items'][0]['from_address']['phone'])
                            Phone: {{$trackingData['items'][0]['from_address']['phone']}}
                            @endif
                        </div>
                    </div>
                    <div class="w-1/2 px-3 text-center">
                        <div class="text-xs leading-none mb-2">To Address</div>
                        <div class="text-xl leading-tight">
                            {{$trackingData['items'][0]['to_address']['country']}},
                            {{$trackingData['items'][0]['to_address']['city']}}
                            @if($trackingData['items'][0]['to_address']['street'])
                            - {{$trackingData['items'][0]['to_address']['street']}}
                            @endif
                        </div>
                        <div class="text-xs py-2 leading-tight">
                            <span class="pe-2">
                                @if($trackingData['items'][0]['to_address']['zip'])
                                ZIP: {{$trackingData['items'][0]['to_address']['zip']}}
                                @endif
                            </span>
                            <span>
                                @if($trackingData['items'][0]['to_address']['state'])
                                State: {{$trackingData['items'][0]['to_address']['state']}}
                                @endif
                            </span>
                        </div>
                        <div class="text-xs py-2 leading-tight">
                            @if($trackingData['items'][0]['to_address']['phone'])
                            Phone: {{$trackingData['items'][0]['to_address']['phone']}}
                            @endif
                        </div>
                    </div>
                </div>
                <hr class="my-5">
                <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
                    <div class="w-full px-5 text-start">
                        <div class="text-xs leading-none mb-2">References Info</div>
                        <div class="text-lg leading-tight mb-2">Tracking code: {{$trackingData['items'][0]['tracking_code']}}</div>
                        <div class="text-lg leading-tight mb-2">Shipment ID: {{$trackingData['items'][0]['shipment_id']}}</div>
                        <div class="text-lg leading-tight mb-2">Tracking code: {{$trackingData['items'][0]['tracking_code']}}</div>
                    </div>
                    <div class="w-full px-3 text-start">
                        <div class="text-xs leading-none mb-2">Status Info</div>
                        <div class="text-lg leading-tight mb-2">Status: {{$trackingData['items'][0]['status']}}</div>
                        <div class="text-lg leading-tight mb-2">Status Title: {{$trackingData['items'][0]['status_title']}}</div>
                        <div class="text-lg leading-tight mb-2">Message: {{$trackingData['items'][0]['message']}}</div>
                    </div>
                    <div class="w-full px-3 text-start">
                        <div class="text-xs leading-none mb-2">More Details</div>
                        @if($trackingData['items'][0]['estimate_delivery_date'])
                        <div class="text-lg leading-tight mb-2">Estimate delivery date: {{$trackingData['items'][0]['estimate_delivery_date']}}</div>
                        @endif
                        @if($trackingData['items'][0]['is_shipment'])
                        <div class="text-lg leading-tight mb-2">Is shipment: {{$trackingData['items'][0]['is_shipment'] == true ? 'Yes' : 'No'}}</div>
                        @endif
                        @if($trackingData['items'][0]['weight'])
                        <div class="text-lg leading-tight mb-2">Weight: {{$trackingData['items'][0]['weight']}}</div>
                        @endif
                        @if($trackingData['items'][0]['weight_unit'])
                        <div class="text-lg leading-tight mb-2">Weight unit: {{$trackingData['items'][0]['weight_unit']}}</div>
                        @endif
                        @if($trackingData['items'][0]['order_date'])
                        <div class="text-lg leading-tight mb-2">Order date: {{\Carbon\Carbon::parse($trackingData['items'][0]['order_date'])->format('F j, Y, g:i a')}}</div>
                        @endif
                        @if($trackingData['items'][0]['cod'] && $trackingData['items'][0]['cod_currency'])
                        <div class="text-lg leading-tight mb-2">COD: {{$trackingData['items'][0]['cod']}} - {{$trackingData['items'][0]['cod_currency']}}</div>
                        @endif
                        @if($trackingData['items'][0]['service'])
                        <div class="text-lg leading-tight mb-2">Service: {{$trackingData['items'][0]['service']}}</div>
                        @endif
                        @if($trackingData['items'][0]['package_type'])
                        <div class="text-lg leading-tight mb-2">Package type: {{$trackingData['items'][0]['package_type']}}</div>
                        @endif
                        @if($trackingData['items'][0]['pieces'])
                        <div class="text-lg leading-tight mb-2">Pieces: {{$trackingData['items'][0]['pieces']}}</div>
                        @endif
                    </div>
                </div>
                <hr class="my-5">
                <div class="flex justify-center items-center p-5 w-full">
                    <ul role="list" class="grid grid-cols-1 md:grid-cols-2 gap-5 w-full">
                        @foreach($trackingData['items'][0]['tracking_items'] as $tracking_item)
                        <li class="mx-2 px-5 py-1">
                            <div class="relative pb-8">
                                <div class="relative flex space-x-3">
                                    <div class="my-2">
                                        <span class="h-8 w-8 rounded-full bg-light_bg dark:bg-dark_bg flex items-center justify-center ring-4 dark:ring-white/20 ring-black/20">
                                            <svg class="h-8 w-8" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256">
                                                <path fill="currentColor" d="m222.72 67.91l-88-48.18a13.9 13.9 0 0 0-13.44 0l-88 48.18A14 14 0 0 0 26 80.18v95.64a14 14 0 0 0 7.28 12.27l88 48.18a13.92 13.92 0 0 0 13.44 0l88-48.18a14 14 0 0 0 7.28-12.27V80.18a14 14 0 0 0-7.28-12.27M127 30.25a2 2 0 0 1 1.92 0L212.51 76l-33.94 18.57l-84.52-46.26ZM122 223l-83-45.43a2 2 0 0 1-1-1.75V86.66l84 46ZM43.49 76l38.07-20.85l84.51 46.26L128 122.24ZM218 175.82a2 2 0 0 1-1 1.75L134 223v-90.36l36-19.71V152a6 6 0 0 0 12 0v-45.63l36-19.71Z" />
                                            </svg>
                                        </span>
                                    </div>
                                    <div class="grid grid-cols-1 gap-5 md:grid-cols-2 min-w-0 justify-between space-x-4 pt-1.5">
                                        <div>
                                            <p class="text-sm mb-2">Message: {{$tracking_item['message']}}</p>
                                            <p class="text-sm mb-2">Status title: {{$tracking_item['status_title']}}</p>
                                            <p class="text-sm mb-2">Status code: {{$tracking_item['status_code']}}</p>
                                            <p class="text-sm mb-2">Location: {{$tracking_item['location_details']['location']}}</p>
                                            <p class="text-sm mb-2">Signed by: {{$tracking_item['status_code']}}</p>
                                        </div>
                                        <div class="text-sm text-start">
                                            Datetime: {{\Carbon\Carbon::parse($tracking_item['datetime'])->format('F j, Y, g:i a')}}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
                <div class="flex">
                    <div class="w-1/2 px-3">
                        <a href="{{env('SMB_EXPRESS_API_URL','https://smbexpress.inventdemo.com')}}" class="capitalize block w-full rounded-lg p-4 hover:text-light_secondary dark:hover:text-dark_secondary border text-center text-sm">
                            Back To Home page
                        </a>
                    </div>
                    <div class="w-1/2 px-3">
                        <a href="{{route('home').'/'.$trackingData['items'][0]['tracking_code']}}" class="capitalize block w-full rounded-lg p-4 hover:text-light_secondary dark:hover:text-dark_secondary border text-center text-sm">
                            Re-Track
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @else
        <div class="bg-white w-[90vw] dark:bg-black rounded-xl shadow-lg overflow-hidden">
            <div class="p-5">
                <p class="mb-5">Invalid tracking codes, please check your code and back again.</p>
                <a href="{{env('SMB_EXPRESS_API_URL','https://smbexpress.inventdemo.com')}}" class="capitalize block w-full rounded-lg p-4 hover:text-light_secondary dark:hover:text-dark_secondary border text-center text-sm">
                    Back To Home page
                </a>
            </div>
        </div>
        @endif
    </div>
</section>
@stop