@extends('layouts.master')
@section('content')
    <style>
        .tracking-box {
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .tracking-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .tracking-number {
            font-size: 1rem;
            color: #999;
            margin-bottom: 20px;
        }

        .progress-bar-container {
            margin-top: 10px;
            padding-bottom: 20px;
            text-align: center;
        }

        .progressbar {
            list-style: none;
            padding: 0;
            display: flex;
            justify-content: space-between;
            margin: 0 auto;
            max-width: 300px;
        }

        .progressbar li {
            text-align: center;
            width: 30%;
            position: relative;
            color: #bbb;
            font-size: 12px;
            font-weight: bold;
        }

        .progressbar li.active {
            color: #2295CA;
        }

        .progressbar li::before {
            content: "";
            width: 10px;
            height: 10px;
            background-color: #bbb;
            border-radius: 50%;
            display: block;
            margin: 0 auto;
            margin-bottom: 5px;
        }

        .progressbar li.active::before {
            background-color: #2295CA;
        }

        .progressbar li::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #bbb;
            top: 5px;
            left: 50%;
            z-index: -1;
        }

        .progressbar li.active+li::after {
            background-color: #2295CA;
        }

        .status-box {
            background-color: #4CAF50;
            text-align: center;
            padding: 10px;
            margin-bottom: 20px;
            border-radius: 5px;
        }

        .status {
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .tracking-details {
            margin-top: 10px;
        }

        .timeline ul {
            padding: 0;
            list-style: none;
            position: relative;
        }

        .timeline ul li {
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
        }

        .timeline ul li:last-child {
            border-bottom: none;
        }

        .timestamp {
            font-size: 0.9rem;
            color: #333;
        }

        .status {
            display: block;
            font-size: 1rem;
            color: #666;
            margin-top: 5px;
        }

        .location {
            color: #999;
            font-size: 0.9rem;
        }

        .usps {
            color: #666;
            font-size: 0.8rem;
        }

        .status i {
            margin-right: 10px;
            color: #2295CA;
            font-size: 1.2rem;
        }

        .blink {
            animation: blink-animation 1s steps(5, start) infinite;
            -webkit-animation: blink-animation 1s steps(5, start) infinite;
        }

        @keyframes blink-animation {
            to {
                visibility: hidden;
            }
        }

        @-webkit-keyframes blink-animation {
            to {
                visibility: hidden;
            }
        }
    </style>
    <section id="page-title" class="page-title bg-overlay bg-parallax">
        <div class="bg-img"><img src="/assets/img/page-titles/14.jpg" alt="background"></div>
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-12 col-lg-12">
                    <h1 class="pagetitle__heading">{{ $title }}</h1>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="/">Home</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Track & Trace</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </section>

    <section id="trackShipmeent" class="track-shipment pb-80">
        <div class="container mt-5 mb-5">
            <div class="tracking-box">
                <div class="tracking-header">
                    <div class="tracking-number">{{ $shipment->tracking_code }}</div>
                    <div class="progress-bar-container">
                        @if ($shipment->status == 'Delivered' || $shipment->status == 'PickedUp' || $shipment->status == 'InTransit')
                            <ul class="progressbar">
                                @if ($shipment->status == 'PickedUp')
                                    <li class="active">Pickup</li>
                                @else
                                    <li>Pickup</li>
                                @endif

                                @if ($shipment->status == 'InTransit')
                                    <li class="active">In Transit</li>
                                @else
                                    <li>In Transit</li>
                                @endif
                                @if ($shipment->status == 'Delivered')
                                    <li class="active">Delivery</li>
                                @else
                                    <li>Delivery</li>
                                @endif

                            </ul>
                        @endif
                    </div>
                </div>
                @if ($shipment->status == 'Delivered')
                    <div class="status-box">
                        <p class="status delivered" style="color: white">DELIVERED</p>
                    </div>
                @endif
                <div class="tracking-details">
                    <div class="timeline">
                        <ul>

                            @foreach ($shipmentLocations as $shipmentLocation)
                                <li>
                                    <div class="timestamp">
                                        <span class="date">{{ date('M d,Y', strtotime($shipmentLocation->date)) }}</span>
                                        <span class="time">{{ date('g:i a', strtotime($shipmentLocation->time)) }}</span>
                                    </div>

                                    <div class="status">
                                        @if ($shipmentLocation->status == 'OutForDelivery')
                                            <i class="fas fa-truck"></i>
                                        @elseif ($shipmentLocation->status == 'Delivered')
                                            <i class="fas fa-check-circle"></i>
                                        @else
                                            <i class="fas fa-box"></i>
                                        @endif
                                        {{ $shipmentLocation->status }} <span
                                            class="usps">({{ $shipment->carrier }})</span>
                                    </div>
                                    @if ($shipmentLocation->description != null)
                                        <div class="location">{{ $shipmentLocation->description }}({{ $shipment->carrier }})
                                        </div>
                                    @endif
                                </li>
                            @endforeach
                        </ul>

                    </div>
                </div>
            </div>
        </div>
        <div class="container" style="margin-top:100px">
            <div class="row">
                <div class="col-12 mb-5">
                    <div class="row mt-5">
                        <div class="col-sm-12 col-md-5">
                            <img class="img-fluid w-75" src="/assets/img/stamp.jpeg" alt="" srcset="">
                        </div>
                        <div class="col-sm-12 col-md-7">
                            <h6>Shipping Details</h6>
                            <dl class="row">
                                <dt class="col-sm-2">From:</dt>
                                <dd class="col-sm-10">
                                    <address>
                                        <strong> <br></strong>
                                        <small> <span class="text-lead">Address:</span>
                                            </small> <br>
                                        <small> <span class="text-lead">Email:</span>
                                            </small> <br>
                                        <small> <span class="text-lead">Phone:</span>
                                            </small>
                                    </address>
                                </dd>
                                <dt class="col-sm-2">To:</dt>
                                <dd class="col-sm-10">
                                    <address>
                                        <strong> <br></strong>
                                        <small> <span class="text-success">Address:</span>
                                            </small> <br>
                                        <small> <span class="text-success">Email:</span>
                                            </small> <br>
                                        <small> <span class="text-success">Phone:</span>
                                            </small>
                                    </address>
                                </dd>
                            </dl>
                        </div>
                        <div class="col-sm-12 col-md-12">
                            <dl class="row">
                                <dt class="col-sm-2 text-lead">Description:</dt>
                                <dd class="col-sm-10"></dd>
                                <dt class="col-sm-2 text-lead">Status:</dt>
                                <dd class="col-sm-10 blink text-danger"></dd>
                                <dt class="col-sm-12 text-lead">Shipped from:</dt>
                                <dd class="col-sm-12"></dd>
                                <dt class="col-sm-12 text-lead">Shipped to:</dt>
                                <dd class="col-sm-12"></dd>
                                <dt class="col-sm-12 text-lead">Expected Date of Delivery:</dt>
                                <dd class="col-sm-12">
                                     </dd>
                                <dt class="col-sm-12 text-lead">Pickup Location:</dt>
                                <dd class="col-sm-12"></dd>
                                <dt class="col-sm-12 text-lead">Date of Shipment:</dt>
                                <dd class="col-sm-12">
                                     </dd>
                                <dt class="col-sm-12 text-lead">Shipped by:</dt>
                                <dd class="col-sm-12">