@extends('layouts.app')

@section('title', $shipment ? 'Tracking '.$shipment->tracking_number : 'Tracking | Accessway Express Courier Services')

@section('content')
@if($shipment)
    @php
        $progress = $shipment->progress();
        $arrival = $shipment->arrivalMoment();
        $mapQuery = $shipment->mapQuery();
        $latest = $shipment->events->first();
    @endphp

    <section class="result-page">
        <div class="container result-intro">
            <p>A consignment was sent to you through Accessway Express Courier and Shipping Company We recommend that you regularly keep track of your freight through our tracking system here. Feel free to contact us through our email in the contact page if you need any assistance of whatsoever kind.</p>
            <h2>Your consignment details are as stated below</h2>

            <a class="print-invoice" href="{{ route('tracking.invoice', $shipment->tracking_number) }}">
                <svg viewBox="0 0 64 64" aria-hidden="true">
                    <circle cx="27" cy="27" r="16" fill="none" stroke="#e09b1b" stroke-width="5"/>
                    <path d="M39 39l16 16" stroke="#e09b1b" stroke-width="5" stroke-linecap="round"/>
                    <rect x="20" y="22" width="4" height="12" fill="#e09b1b"/>
                    <rect x="26" y="18" width="4" height="16" fill="#e09b1b"/>
                    <rect x="32" y="24" width="4" height="10" fill="#e09b1b"/>
                </svg>
                <strong>Print Shipping Invoice</strong>
            </a>
        </div>

        <div class="container">
            <div class="live-map">
                <iframe
                    title="Live shipment map"
                    src="https://maps.google.com/maps?q={{ urlencode($mapQuery) }}&z=6&output=embed"
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade"
                    allowfullscreen>
                </iframe>
            </div>
        </div>

        <div class="container result-tables">
            <h3>Receiver's Details</h3>
            <table class="gold-table">
                <thead>
                    <tr>
                        <th>Full Name</th>
                        <th>Address</th>
                        <th>Email Address</th>
                        <th>Phone Number</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ $shipment->receiver_name }}</td>
                        <td>{{ $shipment->receiver_address ?: ($shipment->destination_city.', '.$shipment->destination_country) }}</td>
                        <td>{{ $shipment->receiver_email ?: '—' }}</td>
                        <td>{{ $shipment->receiver_phone ?: '—' }}</td>
                    </tr>
                </tbody>
            </table>

            <h3>Sender's Details</h3>
            <table class="gold-table">
                <thead>
                    <tr>
                        <th>Sender's Name</th>
                        <th>Address</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ $shipment->sender_name }}</td>
                        <td>{{ $shipment->sender_address ?: ($shipment->origin_city.', '.$shipment->origin_country) }}</td>
                    </tr>
                </tbody>
            </table>

            <h3>Consignment's Details</h3>
            <table class="gold-table">
                <thead>
                    <tr>
                        <th>Consignment No</th>
                        <th>Package Weight</th>
                        <th>Tracking Number</th>
                        <th>Status</th>
                        <th>Service Type</th>
                        <th>Delivery Mode</th>
                        <th>Delivery Completion</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ $shipment->consignment_no ?: 'Accessway Express Courier' }}</td>
                        <td>{{ rtrim(rtrim(number_format((float) $shipment->weight_kg, 2), '0'), '.') }}KG</td>
                        <td>{{ $shipment->tracking_number }}</td>
                        <td>{{ $shipment->parcelStatus() }}</td>
                        <td>{{ $shipment->service_type ?: 'Parcel' }}</td>
                        <td>{{ $shipment->delivery_mode ?: 'COURIER' }}</td>
                        <td>{{ $progress }} % Complete</td>
                    </tr>
                </tbody>
            </table>

            <div class="progress-wrap">
                <div class="progress-line">
                    <span class="dot start"></span>
                    <span class="seg green" style="width: {{ $progress }}%"></span>
                    <span class="seg red" style="width: {{ 100 - $progress }}%"></span>
                    <span class="dot end"></span>
                    <span class="pin" style="left: {{ $progress }}%">
                        <svg viewBox="0 0 24 24"><path fill="#111" d="M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1114.5 9 2.5 2.5 0 0112 11.5z"/></svg>
                        <em>{{ $progress }}%</em>
                    </span>
                </div>
            </div>

            <table class="gold-table">
                <thead>
                    <tr>
                        <th>Details</th>
                        <th>Current Location</th>
                        <th>Arrival Day</th>
                        <th>Arrival Date</th>
                        <th>Arrival Country</th>
                        <th>Comments</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ $shipment->detailLabel() }}</td>
                        <td>{{ $shipment->current_location ?: $shipment->origin_country }}</td>
                        <td>{{ $arrival ? $arrival->format('l') : '—' }}</td>
                        <td>{{ $arrival ? $arrival->format('Y/m/d / h:iA') : '—' }}</td>
                        <td>{{ $shipment->receiver_address ?: ($shipment->destination_city.', '.$shipment->destination_country) }}</td>
                        <td>{{ $latest->description ?? ('The parcel has been dispatched from '.$shipment->origin_country.' and is route to '.$shipment->destination_country.'.') }}</td>
                    </tr>
                </tbody>
            </table>

            <h3 class="info-title">Tracking Informations</h3>
            <table class="gold-table">
                <thead>
                    <tr>
                        <th>Comment</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ $shipment->comment ?: 'Notice: Note: The receiver is expected to pay the clearance fee as soon as the parcel arrives at destination.' }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>
@else
    <section class="page-hero tracking-hero" style="background-image:url('{{ asset('images/tracking-hero.jpg') }}');">
        <div class="container">
            <h1>Tracking</h1>
            <nav class="crumbs" aria-label="breadcrumb">
                <a href="{{ route('home') }}">Home</a>
                <span>tracking</span>
            </nav>
        </div>
    </section>

    <section class="section tracking-page">
        <div class="container tracking-layout">
            <div>
                <div class="widget-heading">
                    <span class="line"></span>
                    <h4>Insert Tracking Code below</h4>
                </div>

                <form class="track-search js-track-form" method="GET" action="{{ route('tracking') }}">
                    <input type="text" name="code" value="{{ $code }}" placeholder="" aria-label="Tracking code" required>
                    <button type="submit">Track</button>
                </form>

                <div class="track-wait js-track-loading">
                    <span class="spinner"></span>
                    Searching... Please wait.
                </div>

                @if($searched)
                    <div class="alert alert-err" style="margin-top:25px;">No shipment found for that tracking code. Please check the number and try again.</div>
                @endif
            </div>

            <aside class="sidebar-area">
                <div class="widget-heading">
                    <span class="line"></span>
                    <h4>Other Services</h4>
                </div>
                <ul class="cata-list">
                    <li><a href="{{ route('services.show', 'land-freight') }}">Land Freight</a></li>
                    <li><a href="{{ route('services.show', 'air-freight') }}">Air Freight</a></li>
                    <li><a href="{{ route('services.show', 'guarding-services') }}">Warehouse</a></li>
                    <li><a href="{{ route('services.show', 'custom-clearance') }}">Custom Clearance</a></li>
                    <li><a href="{{ route('services.show', 'airline-security') }}">Removals and Relocation</a></li>
                </ul>
            </aside>
        </div>
    </section>
@endif
@endsection

@section('cta')
    @if($shipment)
        <div class="thanks-bar">Thanks for patronising us. Feel free to track your package anytime.</div>
        <section class="cta-skyline">
            <div class="container">
                <h2>We provide international freight &amp; courier service worldwide</h2>
                <a class="btn" href="{{ route('contact') }}">Get our service</a>
            </div>
        </section>
    @else
        <section class="cta-2">
            <div class="container">
                <div>
                    <h4>We provide international freight &amp; courier service worldwide</h4>
                </div>
                <a class="btn" href="{{ route('contact') }}">Get our service</a>
            </div>
        </section>
    @endif
@endsection