<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Tracking - Sea Lloyd Shipping</title>

        <link rel="icon" href="https://sealloyd.com/wp-content/uploads/2023/02/cropped-logo-icon-32x32.png">

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,600&display=swap" rel="stylesheet" />
        <script src="https://cdn.tailwindcss.com"></script>

        <!-- Styles -->
        <style>
            /* ! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:Figtree, sans-serif;font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:initial!important;text-decoration:underline!important}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::-webkit-backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.ml-4{margin-left:1rem}.mt-16{margin-top:4rem}.mt-6{margin-top:1.5rem}.mt-4{margin-top:1rem}.-mt-px{margin-top:-1px}.mr-1{margin-right:0.25rem}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.h-16{height:4rem}.h-7{height:1.75rem}.h-6{height:1.5rem}.h-5{height:1.25rem}.min-h-screen{min-height:100vh}.w-auto{width:auto}.w-16{width:4rem}.w-7{width:1.75rem}.w-6{width:1.5rem}.w-5{width:1.25rem}.max-w-7xl{max-width:80rem}.shrink-0{flex-shrink:0}.scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-6{gap:1.5rem}.gap-4{gap:1rem}.self-center{align-self:center}.rounded-lg{border-radius:0.5rem}.rounded-full{border-radius:9999px}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242 / var(--tw-bg-opacity))}.bg-dots-darker{background-image:url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(0,0,0,0.07)'/%3E%3C/svg%3E")}.from-gray-700\/50{--tw-gradient-from:rgb(55 65 81 / 0.5);--tw-gradient-to:rgb(55 65 81 / 0);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-transparent{--tw-gradient-to:rgb(0 0 0 / 0);--tw-gradient-stops:var(--tw-gradient-from), transparent, var(--tw-gradient-to)}.bg-center{background-position:center}.stroke-red-500{stroke:#ef4444}.stroke-gray-400{stroke:#9ca3af}.p-6{padding:1.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.text-center{text-align:center}.text-right{text-align:right}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-semibold{font-weight:600}.leading-relaxed{line-height:1.625}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.underline{-webkit-text-decoration-line:underline;text-decoration-line:underline}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow-2xl{--tw-shadow:0 25px 50px -12px rgb(0 0 0 / 0.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-gray-500\/20{--tw-shadow-color:rgb(107 114 128 / 0.2);--tw-shadow:var(--tw-shadow-colored)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.selection\:bg-red-500 *::selection{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.selection\:text-white *::selection{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.selection\:bg-red-500::selection{--tw-bg-opacity:1;background-color:rgb(239 68 68 / var(--tw-bg-opacity))}.selection\:text-white::selection{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39 / var(--tw-text-opacity))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81 / var(--tw-text-opacity))}.focus\:rounded-sm:focus{border-radius:0.125rem}.focus\:outline:focus{outline-style:solid}.focus\:outline-2:focus{outline-width:2px}.focus\:outline-red-500:focus{outline-color:#ef4444}.group:hover .group-hover\:stroke-gray-600{stroke:#4b5563}@media (prefers-reduced-motion: no-preference){.motion-safe\:hover\:scale-\[1\.01\]:hover{--tw-scale-x:1.01;--tw-scale-y:1.01;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}@media (prefers-color-scheme: dark){.dark\:bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.dark\:bg-gray-800\/50{background-color:rgb(31 41 55 / 0.5)}.dark\:bg-red-800\/20{background-color:rgb(153 27 27 / 0.2)}.dark\:bg-dots-lighter{background-image:url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.22676 0C1.91374 0 2.45351 0.539773 2.45351 1.22676C2.45351 1.91374 1.91374 2.45351 1.22676 2.45351C0.539773 2.45351 0 1.91374 0 1.22676C0 0.539773 0.539773 0 1.22676 0Z' fill='rgba(255,255,255,0.07)'/%3E%3C/svg%3E")}.dark\:bg-gradient-to-bl{background-image:linear-gradient(to bottom left, var(--tw-gradient-stops))}.dark\:stroke-gray-600{stroke:#4b5563}.dark\:text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.dark\:text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.dark\:shadow-none{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.dark\:ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.dark\:ring-inset{--tw-ring-inset:inset}.dark\:ring-white\/5{--tw-ring-color:rgb(255 255 255 / 0.05)}.dark\:hover\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.group:hover .dark\:group-hover\:stroke-gray-400{stroke:#9ca3af}}@media (min-width: 640px){.sm\:fixed{position:fixed}.sm\:top-0{top:0px}.sm\:right-0{right:0px}.sm\:ml-0{margin-left:0px}.sm\:flex{display:flex}.sm\:items-center{align-items:center}.sm\:justify-center{justify-content:center}.sm\:justify-between{justify-content:space-between}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}}@media (min-width: 768px){.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\:gap-8{gap:2rem}.lg\:p-8{padding:2rem}}.box-icon{width: 48px;height: 48px;}
        </style>
    </head>
    <body class="antialiased">

        <section class="flex flex-col md:flex-row h-screen items-center">
            <div class="bg-white w-full md:max-w-md lg:max-w-full md:mx-auto md:mx-0 md:w-1/3 xl:w-1/3 h-screen px-6 lg:px-16 xl:px-12 flex items-center justify-center">
                <div class="w-full h-100">
                    <div class="flex justify-center">
                        <img src="https://sealloyd.com/wp-content/uploads/2022/10/SeaLloyd-Logo-main-180x90-1.png" alt="Sea-Lloyd-Logo">
                    </div>
                    <h1 class="text-xl md:text-2xl font-bold leading-tight mt-12">Track your shipment</h1>

                    <?php
                    $bl_err = '';
                    $bl_msg_box = '';
                    $bl_err_border = '';

                    $con_err = '';
                    $con_msg_box = '';
                    $con_err_border = '';
                    if (!isset($_GET['bl']) || empty($_GET['bl'])) {
                        $bl_msg_box = 
                            '<div class="my-4 text-center py-4 lg:px-4">
                                <div class="p-2 bg-yellow-500 items-center text-white leading-none lg:rounded-full flex lg:inline-flex" role="alert">
                                    <span class="flex rounded-full bg-yellow-100 text-yellow-500 uppercase px-2 py-1 text-xs font-bold mr-3">Warning</span>
                                    <span class="font-semibold mr-2 text-left flex-auto">You must enter your Bill Of Lading Number</span>
                                </div>
                            </div>';

                        $bl_err = '<div class="mt-2 mb-4 text-red-600 text-sm">You must enter your Bill Of Lading Number</div>';
                        $bl_err_border = 'border-red-600';
                    }

                    if (!isset($_GET['container']) || empty($_GET['container'])) {
                        $con_msg_box = 
                            '<div class="my-4 text-center py-4 lg:px-4">
                                <div class="p-2 bg-yellow-500 items-center text-white leading-none lg:rounded-full flex lg:inline-flex" role="alert">
                                    <span class="flex rounded-full bg-yellow-100 text-yellow-500 uppercase px-2 py-1 text-xs font-bold mr-3">Warning</span>
                                    <span class="font-semibold mr-2 text-left flex-auto">You must enter at least one Container Number</span>
                                </div>
                            </div>';
                            
                        $con_err = '<div class="mt-2 mb-4 text-red-600 text-sm">You must enter at least one Container Number</div>';
                        $con_err_border = 'border-red-600';
                    }

                    if ((!isset($_GET['bl']) || empty($_GET['bl'])) && (!isset($_GET['container']) || empty($_GET['container']))) {
                        $bl_msg_box = '';
                        $con_msg_box = '';

                        $bl_err = '';
                        $con_err = '';

                        $bl_err_border = '';
                        $con_err_border = '';
                    }
                    ?>

                    <form class="mt-6" action="" method="GET">
                        <div>
                            <label class="block text-gray-700">BL No <sup class="font-medium text-danger-700">*</sup></label>
                            <input type="text" name="bl" value="{{ isset($_GET['bl'])?$_GET['bl']:'' }}" id="" placeholder="Enter your BL No" class="w-full px-4 py-3 rounded-lg mt-2 border {{ $bl_err_border }} focus:border-blue-900 focus:bg-white focus:outline-none" autofocus autocomplete required>
                        </div>
                        {!! $bl_err !!}

                        <div class="mt-4">
                            <label class="block text-gray-700">Container No <sup class="font-medium text-danger-700">*</sup></label>
                            <input type="text" name="container" value="{{ isset($_GET['container'])?$_GET['container']:'' }}" id="" placeholder="Enter at least one Container Number" class="w-full px-4 py-3 rounded-lg mt-2 border {{ $con_err_border }} focus:border-blue-900 focus:bg-white focus:outline-none" autofocus autocomplete required>
                        </div>
                        {!! $con_err !!}

                        <button type="submit" class="w-full block bg-indigo-900 hover:bg-indigo-700 focus:bg-indigo-700 text-white font-semibold rounded-lg px-4 py-3 mt-6">Search</button>
                    </form>

                    <hr class="my-6 border-gray-300 w-full">

                    {{-- <button type="button" class="w-full block bg-white hover:bg-gray-100 focus:bg-gray-100 text-gray-900 font-semibold rounded-lg px-4 py-3 border border-gray-300">
                        <div class="flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="w-6 h-6" viewBox="0 0 48 48"><defs><path id="a" d="M44.5 20H24v8.5h11.8C34.7 33.9 30.1 37 24 37c-7.2 0-13-5.8-13-13s5.8-13 13-13c3.1 0 5.9 1.1 8.1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"/></clipPath><path clip-path="url(#b)" fill="#FBBC05" d="M0 37V11l17 13z"/><path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/><path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/><path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/></svg>
                            <span class="ml-4">Log in with Google</span>
                        </div>
                    </button> --}}

                    <p class="mt-8">Need Full Details? <a href="https://sealloyd.com/contact-us/" class="text-blue-500 hover:text-blue-700 font-semibold">Please contact us</a></p>

                    <div class="mt-4 text-sm text-gray-500">
                        © {{ date('Y') }} Sea Lloyd Shipping Lines Pte. Ltd.
                    </div>
                </div>
            </div>
          
            <div class="bg-slate-100 block w-full md:w-2/3 xl:w-2/3 h-screen">
                {{-- <img src="https://source.unsplash.com/random" alt="" class="w-full h-full object-cover"> --}}
                <div class="p-16 text-center">
                    {{-- <div class="h-16 w-16 bg-slate-50 flex items-center justify-center rounded-full">
                        <img src="https://sealloyd.com/wp-content/uploads/2023/02/cargo-ship.png" class="box-icon" alt="">
                    </div> --}}
                    @if (isset($_GET['bl']) && !empty($_GET['bl']) && isset($_GET['container']) && !empty($_GET['container']))
                        @if (empty($tracking))
                            <h1 class="mt-6 text-3xl font-semibold text-gray-900">Sorry, We can't find your shipment! 😟</h1>

                            <p class="mt-4 text-gray-500 text-base leading-relaxed">
                                Sorry we can not find your Bill of lading number or container number on our tracking system. Please make sure you typed the correct number. If your number is correct and tracking is not showing your information, please let us know using our <a href="https://sealloyd.com/contact-us/">contact page</a>.
                            </p>

                            <h3 class="mt-6 text-5xl font-semibold bg-red-100 text-red-700 rounded-full py-4">NO SHIPMENT FOUND!</h3>

                            <div class="my-4 text-center py-4 lg:px-4">
                                <a href="https://sealloyd.com/track/">
                                    <div class="p-2 bg-indigo-900 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex" role="alert">
                                        <span class="flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3">ATTENTION</span>
                                        <span class="font-semibold mr-2 text-left flex-auto">Click here if you want to Track Bangladeshi Export Shipment!</span>
                                        <svg class="fill-current opacity-75 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z"/></svg>
                                    </div>
                                </a>
                            </div>
                        @else
                            @php
                                // dd($tracking);
                                $last_status = $tracking->tracking_statuses->last();
                                // dd($last_status);
                                $found = ['Hurray', 'Yay', 'Yippee'];

                                $ok_icon = '<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-green-700 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>';
                                $not_ok_icon = '<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-red-400 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M13.477 14.89A6 6 0 015.11 6.524l8.367 8.368zm1.414-1.414L6.524 5.11a6 6 0 018.367 8.367zM18 10a8 8 0 11-16 0 8 8 0 0116 0z" clip-rule="evenodd" /></svg>';
                            @endphp
                            {{-- <h2 class="mt-6 text-xl font-semibold text-gray-900">{{ $found[array_rand($found, 1)] }}, We have found your shipment! 🙂</h2> --}}

                            {{-- <p class="mt-4 text-gray-500 text-sm leading-relaxed">
                                <strong>Your shipment info:</strong>
                            </p> --}}

                            <!-- component -->
                            <div class="bg-white rounded-md">
                                <div class="container px-6 py-8 mx-auto">
                                    <h1 class="text-3xl font-semibold text-gray-800">{{ $found[array_rand($found, 1)] }}, We have found your shipment! 🙂</h1>
                                    
                                    <p class="mt-4 text-gray-500 text-base leading-relaxed">
                                        If you found this is a wrong shipment showing instead of your's, please visit our <a href="https://sealloyd.com/contact-us/">contact us</a> page to let us know.
                                    </p>
                                    
                                    <div class="grid grid-cols-1 gap-8 mt-6 md:mt-3 lg:grid-cols-3 xl:mt-12">
                                        <div class="flex items-center px-8 md:px-4 py-4 md:py-2 border cursor-pointer rounded-md @if(!empty($last_status) && $last_status->status == 'delivered')  bg-green-100 text-green-700 @endif">
                                            <div class="flex flex-col items-center">
                                                @if (!empty($last_status))
                                                {!! $ok_icon !!}
                                                @else
                                                {!! $not_ok_icon !!}
                                                @endif
                                            </div>
                                            <div class="text-left ml-3 md:ml-2">
                                                @if (!empty($last_status))
                                                <h2 class="font-medium sm:text-lg">{{ strtoupper(str_replace('_', ' ', $last_status->status)) }}</h2>
                                                @else
                                                <h2 class="font-medium text-gray-700 sm:text-lg">Not Available</h2>
                                                @endif
                                                
                                                {{-- <p>{{ $last_status->status_note }}</p> --}}
                                                {{-- <p>{{ mb_strimwidth($last_status->status_note, 0, 20, "...") }}</p>  --}}
                                                {{-- <p>{{ $tracking->created_at->diffForHumans() }}</p> --}}
                                                <p class="text-xs">Current Status</p>
                                            </div>
                                        </div>

                                        <div class="flex items-center px-8 md:px-4 py-4 md:py-2 border border-orange-500 bg-orange-500 cursor-pointer rounded-md">
                                            <div class="flex flex-col items-center">
                                                @if (!empty($last_status))
                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-100 sm:h-7 sm:w-7" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" /></svg>
                                                {{-- {!! $ok_icon !!} --}}
                                                @else
                                                {!! $not_ok_icon !!}
                                                @endif
                                            </div>
                                            <div class="text-left ml-3 md:ml-2">
                                                @if (!empty($last_status))
                                                <h2 class="font-medium text-white sm:text-lg">{{ $last_status->port->name }}</h2>
                                                @else
                                                <h2 class="font-medium text-gray-100 sm:text-lg">Not Available</h2>
                                                @endif
                                                
                                                <div class="text-xs text-white">
                                                    Current/Previous Port
                                                </div>
                                            </div>
                                        </div>

                                        <div class="flex items-center px-8 md:px-4 py-4 md:py-2 border cursor-pointer rounded-md">
                                            <div class="flex flex-col items-center">
                                                {!! $ok_icon !!}
                                            </div>
                                            <div class="text-left ml-3 md:ml-2">
                                                <h2 class="text-lg font-medium text-gray-700 sm:text-lg">{{ $tracking->updated_at->diffForHumans() }}</h2>
                                                <p class="text-xs">Last Updated</p>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    @if (!empty($last_status) && isset($last_status->vessel_name))
                                    <div class="tracking description border md:px-3 py-3 text-indigo-900 border-indigo-200 border bg-indigo-100 rounded-md mt-5">Your shippiment's current/previous vessel name is <strong>{{ strtoupper($last_status->vessel_name) }} ({{ ucwords(str_replace('_', ' ', $last_status->vessel_type)) }})</strong>.</div>
                                    @endif

                                    <h3 class="mt-8 font-semibold text-xl">Your Shipment Movements:</h3>
                                    <div class="p-8 mt-4 space-y-3 bg-gray-100 rounded-xl">
                                        @foreach ($tracking->tracking_statuses as $tstatus)
                                        <div class="flex items-center justify-between text-gray-800">
                                            <div class="text flex justify-stretch">
                                                <p class="text-gray-500">{{ strtoupper(str_replace('_', ' ', $tstatus->status)) }}:</p>
                                                <p class="ml-3 text-right">{{ date('F j, Y', strtotime($tstatus->date)) }}</p>
                                            </div>

                                            {!! $ok_icon !!}
                                        </div>
                                        @endforeach
                                    </div>

                                    <h3 class="mt-8 font-semibold text-xl">Your Shipment Details:</h3>
                                    <div class="p-8 mt-4 space-y-3 bg-gray-100 rounded-xl">
                                        <div class="flex items-center justify-between text-gray-800">
                                            <div class="text flex justify-stretch">
                                                <p class="text-gray-500">Bill of Lading Number:</p>
                                                <p class="ml-3 text-left">{{ $tracking->bl_no }}</p>
                                            </div>

                                            {!! $ok_icon !!}
                                        </div>

                                        <div class="flex items-center justify-between text-gray-800">
                                            <div class="text flex justify-stretch">
                                                <p class="text-gray-500">Container Numbers:</p>
                                                <p class="ml-3 text-left">{{ $tracking->containers }}</p>
                                            </div>

                                            {!! $ok_icon !!}
                                        </div>

                                        <div class="flex items-center justify-between text-gray-800">
                                            <div class="text flex justify-stretch">
                                                <p class="text-gray-500">Port of Loading:</p>
                                                <p class="text-left ml-3">{{ $tracking->loading_port->name }}</p>
                                            </div>

                                            {!! $ok_icon !!}
                                        </div>

                                        <div class="flex items-center justify-between text-gray-800">
                                            <div class="text flex justify-stretch">
                                                <p class="text-gray-500">Destination:</p>
                                                <p class="ml-3 text-left">{{ $tracking->discharged_port->name }}</p>
                                            </div>

                                            {!! $ok_icon !!}
                                        </div>

                                        <div class="flex items-center justify-between text-gray-800">
                                            <div class="text flex justify-stretch">
                                                <p class="text-gray-500">Completed:</p>
                                                @if ($tracking->completed == 0)
                                                <p class="ml-3 text-left">No</p> 
                                                @else
                                                <p class="ml-3 text-left">Yes</p>
                                                @endif
                                            </div>

                                            
                                            @if ($tracking->completed == 0)
                                            {!! $not_ok_icon !!}
                                            @else
                                            {!! $ok_icon !!}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>

                        @endif
                    @else
                        <h1 class="mt-6 text-3xl font-semibold text-gray-900">You are at the right place! 😉</h1>

                        <p class="mt-4 text-gray-500 text-base leading-relaxed">
                            Sea Lloyd Shipping is offering you the easiest way to track your shipment using your Bill of lading number or container number used in your shipment. <strong>Just write your Bill of lading number or any container number and hit "Search" button.</strong> If you find it is hard for you please visit our <a href="https://sealloyd.com/contact-us/">contact us</a> page to let us know.
                        </p>

                        {!! $bl_msg_box !!}

                        {!! $con_msg_box !!}
                    @endif
                    
                </div>
            </div>
        </section>
    </body>
</html>