<?php
defined('BASEPATH') OR exit('No direct script access allowed');
if(isset($tracking_number) && $tracking_number!=''){
    //do nothing
}else{
    $tracking_number='';
}
?>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Shipment Tracking System</title>
    <link href="<?php echo base_url() ?>assets/tracking/css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo base_url() ?>assets/tracking/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="<?php echo base_url() ?>assets/tracking/css/etruck-responsive.css" rel="stylesheet">
    <link href="<?php echo base_url() ?>assets/tracking/css/etruck.css" rel="stylesheet">
    <style type="text/css">
        /* Always set the map height explicitly to define the size of the div
         * element that contains the map. */
        .datetimeclass{min-width: 68px; width:68px; word-break: inherit !important;}
        .inpt_transit_status_html th, .inpt_transit_status_html td{    word-break: break-all;}
        #map {
            height: 100%;
        }

        /* Optional: Makes the sample page fill the window. */
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: "Roboto", "sans-serif";
            line-height: 30px;
            padding-left: 10px;
        }
        .inpt_transit_status_html th,.inpt_transit_status_html td{
            font-family: "Roboto", "sans-serif";
            font-size: 11px;
            padding:5px;
        }
        .shiment-icon p{
            word-break: break-word;
        }
        .info p{
            padding:0 0 0 5px ;
        }
        .status-list ul li:before{
            margin-top:14px;
            content: "\2713";
            text-align: center;
            color: #fff;
            font-size: 11px;
        }
        .navy-blue{
            color: #152D54;
        }
        .pickup-block .date{
            float:right;
        }
        .status-list ul:after{
            min-height:  calc(100% - 50px);
            box-sizing: border-box;
            border-left: 2px solid #19E0E2;
            margin-top: 20px;
        }
        .pickup-block{
            cursor:pointer;
            margin-bottom: 0px;
        }
        .table-responsive>.table-bordered {
            margin-top: 10px;
        }
        .status-list ul li:last-child:after{
            border:0px;
        }
        .shipping_information_block, .additional_details_box{
            display:none;
        }
        .icon-info p {padding-top: 12px;}
        .track-icon{margin: 10px 10px;width: 45px;height: 45px;padding: 8px;display: inline-flex;align-items: center;}
        .tracking-location {min-height: 110px;}
        .tracking-title h5{padding-left: 15px;}
        .searchbar-icon{top:0px; padding-top: 13px; border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;}
        .searchbar-submit{top:0px; border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;}
        .pt-3.search-icon{padding-top: 0.5rem!important;}
        .searchbar{width: 300px; !important;}
        .searchbar-input{     height: 46px;color:#ffffff;    border: solid 2px #13b4e5;  background:#1b4678; border-radius: 3px;}
        .searchbar-submit{background: #13b4e5;}
        .searchbar-icon, .searchbar-submit{font-size: 19px;     height: 46px;     line-height: 46px; background: #13b4e5; color:#fff;}

        .trackingSearchImg{padding:40px 0px;}
        .trackingSearchImg .tSearchImg{display: block;  margin: auto;}
        .trackingSearchImg h6{text-align:center; color: #13b4e5; padding-bottom:20px; line-height: 29px;
            font-weight:600; font-size:20px;}

        /*  Media queries for RWD */
        @media screen and (min-width: 320px) and (max-width:990px){
            .slimScrollDiv,.routing_col{height:100% !important;}
        }

        @media screen and (min-width: 320px) and (max-width:567px){
            .icon-info p{font-size:10px;padding-top:5px;}
            .track-icon{width:30px;height:30px;margin:5px 5px;padding:4px;display:inline-flex;align-items:center;}
            .icon-info h4{font-size: 12px;}
            .tracking-location{}
            .tracking-title h5{text-align:left;padding-left:15px;font-weight:bold;font-size:11px;}
            /*.tracking-location:before {width: 80% !important;left: 0px !important;min-height: unset;right: 0px !important;margin: 0px auto !important;}*/
            .tracking-location:before{    left: 51px !important;}
            .tracking-icon{margin-left:20px;}
            .tracking-location .col-3{padding-left:0px;}

        }

        @media screen and (min-width: 320px) and (max-width:575px){
            .bg-header .text-right.col-sm-6{max-width: 100%; flex: 100%;}
            .searchbar{width:100%; !important;}
        }

        @media screen and (min-width: 568px) and (max-width:767px){
            .icon-info p{font-size:14px;padding-top:15px;}
            .track-icon{width:42px;height:42px;margin:10px;padding:8px;display:inline-flex;align-items:center;}
            .icon-info h4{font-size: 14px;}
            /*.tracking-location:before {width: 80% !important;left: 0px !important;min-height: unset;right: 0px !important;margin: 0px auto !important;}*/
            .tracking-title h5{text-align:left;}
            .tracking-location{ }
        }

        @media only screen and (min-width:768px) and (max-width: 3840px) {
            .tracking-icon{margin-left: auto; margin-right: auto;}
            .tracking-location:before{width: 77%;}
        }

        .icon-info p{font-size: 13px;}
        .icon-info {display: inline-block; width: 78%;  word-break: break-all;}
        .icon-info h4{font-size: 15px;}

        @media only screen and (min-width: 1200px) and (max-width: 1302px) {
            .icon-info {width: 74%;}
        }

        @media only screen and (min-width:992px) and (max-width: 3840px) {
            .slimscrollTable{max-height:250px; overflow:auto; display:block; scrollbar-width: thin;}
            .slimscrollTable::-webkit-scrollbar {height: 12px;  width: 10px;  background:#f7f7f7;scrollbar-width: thin;}
            .slimscrollTable::-webkit-scrollbar-thumb {background:#ccc; -webkit-border-radius: 1ex;}
            .slimscrollTable::-webkit-scrollbar-corner {background: #ccc;}
        }

        .rightSubHeader{background-color: #13b4e5; border-radius: 2px;}
        .rightSubHeader .icon-info h4{color:#1b4678;}

        /* tracking-icon */
        .tracking-location:before{background-color: #bfbfbf; border:none;}
        .tracking-icon{background-color: #bfbfbf;}
        .tracking-icon svg{position: relative; z-index: 1;}
        .tracking-icon.completed-icon{background-color: #62B70F;}
        .tracking-icon.completed-icon:before{content: '';  background-color:#62b70f; position: absolute;  width: 100%; height:10px; top: 25px; margin: 0px auto;
            right: 46%; left: auto; border-radius: 30px; z-index: 0;}
        .tracking-icon.firstTrackingIcon:before{display:none;}
        .tracking-icon.completed-icon.firstTrackingIcon:before{display:none;}

        @media only screen and (max-width:767px){
            .tracking-icon.completed-icon:before {content: '' !important;position: absolute !important; width: 10px !important; left: 75px !important;
                right: 0px !important; margin: 0px !important; top: -52px; height: 89px;}
        }

        @media only screen and (max-width:567px){
            .tracking-icon.completed-icon:before {left: 51px !important;}
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row bg-header">
        <!-- <div class="col-3 col-md-6 col-sm-6 col-lg-6 text-left">
          <a class="navbar-brand" href="#"><img src="<?php echo base_url() ?>assets/tracking/images/logo.png" class=""></a> 
        </div> -->
        <div class="col-12">
            <div class="trackingSearch">
                <form class="searchbar" method="POST">
                    <input type="text" placeholder="Please enter your tracking reference number" name="search" id="tracking_number" value="<?php echo $tracking_number ?>" class="searchbar-input" onkeyup="buttonUp();" required>
                    <input type="button" class="searchbar-submit" id="TrackingBtn" value="GO"> <span class="searchbar-icon">
                        <!-- <i class="fa fa-search" aria-hidden="true"></i> -->
                        Track Now
                    </span>
                </form>
            </div>
        </div>
    </div>
</div>
