<%- include('./partials/head')  -%> 
<body class="banner">

<!-- include the main navigation  -->


<style>
    body {
        background: #10181f;
        background-image: url(/images/tracking-bg-2.jpg);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    h3, h2 {
        color: #ccc;
    }

    p {
        color: #bbbbbb;
    }
    table thead {
        color: #ccc;
    }

    table tbody tr td {
        color: #bbbbbb;
    }

    .timeline {
        border-left: 2px solid #e0e0e0;
        position: relative;
        padding-left: 12px;
        margin-left: 50px;
        margin-top: 80px;
    }

    .timeline-step {
        display: flex;
        align-items: flex-start;
        position: relative;
        margin-bottom: 30px;
    }

    .timeline-step:last-child {
        margin-bottom: 0;
    }

    .timeline-date {
        position: absolute;
        left: -95px;
        text-align: right;
        color: #777;
        font-size: 14px;
        display: flex;
        flex-direction: column;
    }

    .timeline-date .month-day {
        font-weight: bold;
        color: #333;
    }

    .timeline-content {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-left: 8px;
    }

    .status-icon {
        position: absolute;
        left: -28px;
        top: 12px;
        transform: translateY(-50%);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #e0e0e0;
        color: #fff;
        border-radius: 50%;
        font-size: 16px;
        z-index: 1;
    }

    .timeline-step.completed .status-icon {
        background-color: #4caf50;
    }

    .timeline-step.active .status-icon {
        background-color: #ffa500;
    }

    .status-title {
        font-size: 14px;
        font-weight: bold;
        color: #333;
    }

    .status-desc {
        font-size: 10px;
        color: #555;
        margin-top: -15px;
    }

    .timeline-step.completed .status-title,
    .timeline-step.completed .status-desc {
        color: #4caf50;
    }

    .timeline-step.active .status-title,
    .timeline-step.active .status-desc {
        color: #ffa500;
    }

    /* Vertical connecting line for active/completed steps */
    .timeline-step.completed::before,
    .timeline-step.active::before {
        content: "";
        position: absolute;
        left: -14px;
        top: 0;
        width: 2px;
        height: calc(100% + 30px);
        background-color: #4caf50;
    }

    .timeline-step.active::before {
        background-color: #ffa500;
    }

    .on-hold {
        display: flex;
        align-items: center;
        padding: 10px 20px;
        background: red;
        color: #fff !important;
    }

    .animate-location {
        animation: animateLocation 1s linear infinite forwards;
    }

    /* Road container */
    .road {
        overflow: hidden;
    }

    /* Car icon */
    .car {
        right: 0;
        animation: moveCar 5s linear infinite forwards;
    }

    .table-wrapper {
      max-width: 100%;
      margin: auto;
      margin-bottom: 20px;
      overflow-x: scroll;
    }

    .table-wrapper table {
      width: 100%;
    }



    /* Keyframes for car movement */
    @keyframes moveCar {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-3vw); /* Move off-screen to the right */
        }
    }


    @keyframes animateLocation {
        0% {
            transform: scale(0.5);
            opacity: 0;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .tracking-container {
            padding: 10px;
        }
        
        .timeline {
            padding-left: 13px;
            margin-top: 0;
        }
        
        .timeline-date {
            position: static;
            text-align: left;
            margin-bottom: 8px;
        }
        
        .timeline-step {
            flex-direction: column;
            align-items: flex-start;
            padding-left: 20px;
        }
        
        .timeline-content {
            flex-direction: row;
            padding-left: 0;
        }
        
        .status-title {
            font-size: 16px;
        }
        
        .status-desc {
            font-size: 13px;
        }
    }
</style>

<section class="sec-padding single-service-page" >
    <% if(!package) { %>
        <p style="font-size: 20px; text-align: center; margin: 20px 0;">No package was found with this tracking id</p>
        <hr>
   <%} else {%>
  <div class="thm-container">
    <div style="text-align: center;">
        <h2>track your package</h2>
        <div class="barcode-contaiiner" style="text-align: center; margin-top: 10px;">
            <img src="/images/barcode.png" alt="" style="width:40%; object-fit: contain">
            <h3 style="color: green">Tracking Code: <%= package.trackingId %></h3>
        </div>
    </div>

        <% if(package.deliveryStatus == "Custom Clearance" || package.deliveryStatus == "Custom Carrier" || package.deliveryStatus == "Clearance" || package.deliveryStatus == "On Hold" || package.deliveryStatus == "Permit" || package.deliveryStatus == "Delayed") { %>
            <div class="on-hold">
                <p style="color: #fff;">This package is currently having <%= package.deliveryStatus %> issues . Please contact the support on this email <%= siteEmail %> </p>
            </div>
        <% } %>

        
		<div class="row">
            <div class="col-md-3 tracking-container" style="">
                <div class="timeline">
                    <% package.trackingStatus.map(({title, desc, statusDate, statusTime, status}) => {%>

                        <div class="timeline-step <%= status %>">
                            <div class="timeline-date">
                                <span class="month-day"><%= statusDate %></span>
                                <span class="time"><%= statusTime %></span>
                            </div>
                            <div class="timeline-content">
                                <% if(status == "completed") { %>
                                    <div class="status-icon">✔</div>
                               <% } else if(status === "active") { %>
                                    <div class="status-icon road">
                                        <div class="">
                                            🚚
                                        </div>
                                    </div>
                               <% } else{ %>
                                <div class="status-icon">📦</div>
                               <% } %>
                                <div>
                                    <p class="status-title"><%= title %></p>
                                    <p class="status-desc"><%= desc %></p>
                                </div>
                            </div>
                        </div>

                    <%}) %>
                </div>

                <div class="" style="margin-top: 60px;">
                  <div class="">
                      <h3>Sender Name</h3>
                      <p style="font-size: 16px;"><%= package.senderName %></p>
                  </div>
                  <p style="border: 1px dotted #333;"></p>
      
                  <div class="">
                      <h3>Sender Email</h3>
                      <p style="font-size: 16px;"><%= package.senderEmail %></p>
                  </div>
                  <p style="border: 1px dotted #333;"></p>
      
                  <div class="">
                      <h3>Sender Country</h3>
                      <p style="font-size: 16px;"><%= package.originCountry %></p>
                  </div>
                  <p style="border: 1px dotted #333;"></p>
    
                  <div class="">
                      <h3>Sender Phone number</h3>
                      <p style="font-size: 16px;"><%= package.senderNumber %></p>
                  </div>
              </div>
            </div>

			      <div class="col-md-6 tracking-container" style="">
              <div style="margin-bottom: 20px; margin-top: 10px; display: flex !important; flex-wrap: wrap;">
                  <% if(package.image.length > 0) { %>
                      <span class="view-image" style="margin-left: auto; font-size: 18px;"><a href="#">View images(items)</a></span>
                  <%} %>
              </div>

              <div class="table-wrapper">
                <h3>Tracking Result</h3>
                
                <table border="5" cellpadding="2" cellspacing="2" align="center" whitespace="wrap">
                  <thead>
                    <tr>
                      <th>Parcel</th>
                      <th>Delivery Status</th>
                      <th>Consignment Status</th>
                      <th>Tracking Code</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><%= package.item %></td>
                      <td>
                        <% if(package.deliveryStatus == "Custom Clearance" || package.deliveryStatus == "Custom Carrier" || package.deliveryStatus == "Clearance" || package.deliveryStatus == "On Hold" || package.deliveryStatus == "Permit" || package.deliveryStatus == "Delayed") { %>
                            <p class="animate-location" style="color: red;"><%= package.deliveryStatus %></p>
                        <% } else { %>
                            <p class="animate-location" style="color: green;"><%= package.deliveryStatus %></p>
                        <%} %>
                        
                    </td>
                      <td>
                        <p><%= package.consignmentStatus %></p>
                      </td>
                      <td><%= package.trackingId %></td>
                    </tr>

                  </tbody>
                </table>
              </div>

              <div class="table-wrapper">
                <h3>Tracking Route</h3>
                
                <table border="5" cellpadding="2" cellspacing="2" align="center">
                  <thead>
                    <tr>
                      <th>Shipping From</th>
                      <th>Shipping To</th>
                      <th>Destination</th>
                      <th>Current Location</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><%= package.originCountry %></td>
                      <td><%= package.destination %></td>
                      <td><%= package.destinationCountry %></td>
                      <td>
                        <div class="animate-location" style="background: #4caf50; color: #fff; padding: 10px; display: inline-block; border-radius: 20px;">
                          <%= package.currentLocation %>
                      </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <div class="table-wrapper">
                <h3>Tracking Time</h3>
                
                <table border="5" cellpadding="2" cellspacing="2" align="center">
                  <thead>
                    <tr>
                      <th>Depature Date</th>
                      <th>Arrival Date</th>
                      <th>Arrival Time</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td><%= package.depatureDate %></td>
                      <td><%= package.deliveryDate %></td>
                      <td><%= package.pickupDate %></td>
                    </tr>
                  </tbody>
                </table>
              </div>
			      </div>

            <div class="col-md-3 tracking-container" style="margin-top: 20px">
              <div class="" style="margin-bottom: 20px;">
                <% if(package.billingName !== "" && package.billingAmount !== null) {%>

                    <div class="">
                        <% if(package.deliveryStatus == "Processing" || package.deliveryStatus == "On Transit") {%>
                            <p class="animate-location" style="font-size: 24px; color: #27C400; font-weight: bold;"><%= package.deliveryStatus %></p>
                        <%} else {%>
                            <h3 style="color: #27C400;">Billing Purpose</h3>

                            <p style="font-size: 16px; color: red;"><%= package.billingName %>
                                <img src="/tracking/assets/img/block/icon.gif" width="10" alt="">
                            </p>
                        <%} %>
                    </div>
    
                    <div class="">
                      <h3 style="color: #27C400;">Billing Cost</h3>
                      <p style="font-size: 16px; color: red;">$<%= Number(package.billingAmount).toLocaleString() %>
                        <img src="/images/warning-icon.webp" width="40" alt="">
                    </p>
                    </div>

                    <p style="border: 1px dotted #333;"></p>

                <%} %>
    
                <div class="">
                    <h3 style="color: #27C400;">Shipping Cost</h3>
                    <p style="font-size: 16px;">$<%= Number(package.shippingCost).toLocaleString() %></p>
                </div>

                <% if(package.billingName == "" && package.billingAmount == null) {%>

                    <div class="">
                        <h3 style="color: #27C400;">Shipping SubCost</h3>
                        <p style="font-size: 16px;">$<%= Number(package.subCost).toLocaleString() %></p>
                    </div>
    
                    <div class="">
                        <h3 style="color: #27C400;">Total Cost</h3>
                        <p style="font-size: 16px;">$<%= Number(package.totalCost).toLocaleString() %></p>
                    </div>

                <%} %>
            </div>


            <div class="" style="margin-bottom: 20px;">
              <div class="">
                  <h3>Reciever Name</h3>
                  <p style="font-size: 16px;"><%= package.receiverName %></p>
              </div>
              <p style="border: 1px dotted #333;"></p>
  
              <div class="">
                  <h3>Reciever Email</h3>
                  <p style="font-size: 16px;"><%= package.receiverEmail %></p>
              </div>
              <p style="border: 1px dotted #333;"></p>
  
              <div class="">
                  <h3>Reciever Address</h3>
                  <p style="font-size: 16px;"><%= package.receiverDestination %></p>
              </div>
              <p style="border: 1px dotted #333;"></p>

              <div class="">
                  <h3>Reciever Phone number</h3>
                  <p style="font-size: 16px;"><%= package.receiverNumber %></p>
              </div>
          </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <div class="map-wrapper">
                <div id='photo'>
                  <br>
                  <span style='font-weight: bold; background-color: rgb(204, 204, 204);'>
                    <strong>CURRENT LOCATION : <%= package.currentLocation %></strong>
                  </span>
                  <img alt='' src='/tracking/assets/img/block/icon.gif' height='20' width='20' />
                  <div class='mapouter'>
                    <div class='gmap_canvas'>
                      <iframe width='100%' height='400' id='gmap_canvas' src='https://maps.google.com/maps?q= <%= package.currentLocation %>=&output=embed' frameborder='0' scrolling='no' marginheight='0' marginwidth='0'></iframe>
                      <a href='https://fmovies-online.net'></a>
                      <br>
                      <style>
                        .mapouter {
                          position: relative;
                          text-align: right;
                          height: 300;
                          width: 100%;
                        }
                      </style>
                      <style>
                        .gmap_canvas {
                          overflow: hidden;
                          background: none !important;
                          height: 300;
                          width: 100%;
                        }
                      </style>
                    </div>
                  </div>
                </div>
              </div>

            </div>

          </div>
		</div>
	</div>
</section>


<style>

    .image-wrapepr {
        position: fixed;
        display: none;
        align-items: center;
        top: 0px;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        padding: 40px;
        overflow: scroll;
        z-index: 1;
    }

    .image-wrapepr.show {
        display: flex;
    }

    .image-container-inner {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        width: 100%;
        max-height: 500px;
        padding: 10px;
        margin: 0 auto;
        background: #f2f2f2;
        overflow: scroll;
        margin-top: 70px;

    }

    .image-container-inner img {
        max-width: 380px;
        height: auto;
    }

    .times {
        color: #fff;
        cursor: pointer;
        font-size: 40px;
        position: absolute;
        right: 70px;
        top: 70px;
    }

    @media screen and (max-width: 767px) {

        .image-wrapepr {
            padding: 10px;
        }

        .image-container-inner {
            flex-wrap: nowrap;
            padding: 5px;
            overflow: scroll;
        }

        .image-container-inner img {
            max-width: 380px;
            height: auto;
        }
    }

</style>

<section>
    
    <div class="image-wrapepr">
        <div class="image-container">
            <span class="times" style="color:#fff">&times</span>
            <div class="image-container-inner">
                <% if(package.image.length < 1) { %>
                    <p>This package does not have any image</p>
                    <% } else { %>
                        <% for(let i = 0; i < package.image.length; i++) { %> 
                            <img src="<%= package.image[i].filePath %>" alt="">
                        <% 
                            } 
                        }
                    %>
            </div>
        </div>
    </div>
</section>
<% } %> 

<script>
    const viewImages = document.querySelector('.view-image');
    const imageWrapper = document.querySelector('.image-wrapepr');
    const times = document.querySelector('.times');


    const openImage = (e) => {
        e.preventDefault();
        imageWrapper.classList.add('show')
    }

    const closeImage = (e) => {
        e.preventDefault()
        imageWrapper.classList.remove('show')
    }


    viewImages.addEventListener('click', openImage)
    times.addEventListener('click', closeImage)
</script>

<!-- include footer  -->
<%- include('./partials/footer.ejs')  -%> 