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

<!-- include the main navigation  -->
<%- include('./partials/nav')  -%> 


<style>
    body {
        background: #fff;
    }

    .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;
    }

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

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

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

    /* 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>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="margin: auto;">

                <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>

			<div class="col-md-9 tracking-container" style="margin: auto; overflow: auto;">

                <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="row" style="margin-bottom: 20px;">
                    <div class="col-md-3">
                        <h3>Billing Purpose</h3>
                        <p style="font-size: 16px;"><%= package.billingName %></p>
                    </div>
        
                    <div class="col-md-3">
                        <h3>Shipping Cost</h3>
                        <p style="font-size: 16px;">$<%= Number(package.shippingCost).toLocaleString() %></p>
                    </div>
        
                    <div class="col-md-3">
                        <h3>Shipping SubCost</h3>
                        <p style="font-size: 16px;">$<%= Number(package.subCost).toLocaleString() %></p>
                    </div>

                    <div class="col-md-3">
                        <h3>Total Cost</h3>
                        <p style="font-size: 16px;">$<%= Number(package.totalCost).toLocaleString() %></p>
                    </div>
                </div>

				<table class="table">
                    <thead>
                        <tr>
                            <th>Current Location</th>
                            <th>Destination Address</th>
                            <th>Shipment Method</th>
                            <th>Current Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="animate-location" style="background: #4caf50; color: #fff; padding: 10px; display: inline-block; border-radius: 20px;">
                                    <%= package.currentLocation %>
                                </div>
                            </td>
                            <td><%= package.destination %></td>
                            <td><%= package.shipmentMethod %>🚚</td>
                            <td>
                                <p style="color: #ffa500; font-size: 16px; border-radius: 5px; border: 1px solid #ffa500; padding: 5px;"><%= package.deliveryStatus %></p>
                            </td>
                        </tr>
                    </tbody>

                    <thead>
                        <tr>
                            <th>Sender Name</th>
                            <th>Sender Email</th>
                            <th>Package</th>
                            <th>Company Number</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="width: 100%;">
                            <td><%= package.senderName %></td>
                            <td><%= package.senderEmail %></td>
                            <td><%= package.item %></td>
                            <td><%= package.companyNumber %></td>
                        </tr>
                    </tbody>

                    <thead class="active">
                        <tr>
                            <th>Receiver Name</th>
                            <th>Receiver Email</th>
                            <th>Receiver Number</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><%= package.receiverName %></td>
                            <td><%= package.receiverEmail %></td>
                            <td><%= package.receiverNumber %></td>
                            <td></td>
                        </tr>
                    </tbody>

                    <thead class="active">
                        <tr>
                            <th>Destination Address</th>
                            <th>Depature Date</th>
                            <th>Expected Delivery Date</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><%= package.destination %></td>
                            <td><%= package.depatureDate %></td>
                            <td><%= package.deliveryDate %></td>
                            <td></td>
                        </tr>
                    </tbody>

                    <thead class="active">
                        <tr>
                            <th>Shipment Method</th>
                            <th>Pickup Date & Time</th>
                            <th>Weight</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><%= package.shipmentMethod %></td>
                            <td><%= package.pickupDate %></td>
                            <td><%= package.weight %></td>
                            <td></td>
                    </tbody>
                </table>

			</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')  -%> 