@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"></dd>

                                <dt class="col-sm-12 text-lead">Image:</dt>
                                <dd class="col-sm-12">
                                    <a href="{{ asset('uploads/shipments/' . @$shipment->image) }}" target="_blank">
                                        <img class="img-thumbnail" width="200"
                                            src="{{ asset('uploads/shipments/' . @$shipment->image) }}"
                                            alt="Shipment Image">
                                    </a>
                                </dd>
                            </dl>
                        </div>
                    </div>
                    <div class="col-12">
                        <h5>Location History </h5>
                        <ul class="list-group">
                            @if ($shipmentLocations)
                                @foreach ($shipmentLocations as $shipmentLocation)
                                    <div class="row">
                                        <div class="col-12">
                                            <li
                                                class="list-group-item mb-1 {{ $shipment->status == $shipmentLocation->status && $shipment->current_location == $shipmentLocation->location ? 'bg-success' : 'text-secondary text-white' }} text-white">
                                                <address>
                                                    <p
                                                        class="m-0 p-0 {{ $shipment->status == $shipmentLocation->status && $shipment->current_location == $shipmentLocation->location ? 'blink' : '' }} ">
                                                        {{ $shipment->status == $shipmentLocation->status && $shipment->current_location == $shipmentLocation->location ? " Current location: $shipmentLocation->location" : "Previous location: $shipmentLocation->location" }}
                                                    </p>
                                                    <small class="">
                                                        {{ $shipmentLocation->date }}</small><br>
                                                    <small>{{ $shipmentLocation->status }}</small>
                                                </address>
                                            </li>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="alert alert-warning" role="alert">
                                    No location history
                                </div>
                            @endif
                        </ul>
                    </div>
                </div>
            </div>
            <div class="row mt-5">
                <div class="container" style="margin-bottom:100px;">
                    <div class="mapouter">
                        <div class="gmap_canvas"><iframe class="gmap_iframe" frameborder="0" scrolling="no"
                                marginheight="0" marginwidth="0"
                                src="https://maps.google.com/maps?width=600&amp;height=400&amp;hl=en&amp;q={{ ucfirst($shipment->current_location) }}&amp;t=&amp;z=14&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"></iframe><a
                                href="https://gachanymph.com/">Gacha Nymph</a></div>
                        <style>
                            .mapouter {
                                position: relative;
                                text-align: right;
                                width: 100%;
                                height: 400px;
                            }

                            .gmap_canvas {
                                overflow: hidden;
                                background: none !important;
                                width: 100%;
                                height: 400px;
                            }

                            .gmap_iframe {
                                width: 100% !important;
                                height: 400px !important;
                            }
                        </style>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection