@extends('layouts.app')

@section('title', 'AWB Tracking Details')

@section('page-wrapper')
    <div class="page-header d-print-none">
        <div class="container-fluid">
            <div class="row g-2 align-items-center">
                <div class="col d-flex justify-content-between align-items-center">
                    <h2 class="page-title">
                        AWB Tracking Details: 15616511531651
                    </h2>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body">
        <div class="container-fluid">
            <div class="row row-cards row-deck mb-3">
                <div class="col-md-12 col-lg-12">
                    <div class="row row-cards">
                        <div class="col-4">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Sender Details</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row row-cards">
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Name</div>
                                            <div class="datagrid-content">Divyesh Agravat</div>
                                        </div>
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Mobile</div>
                                            <div class="datagrid-content">7698876888</div>
                                        </div>
                                        <div class="col-12 datagrid-item">
                                            <div class="datagrid-title">Address</div>
                                            <div class="datagrid-content">1001 Corporate Levels, Near Ayodhya Chowk, 150
                                                Feet Ring Road, Rajkot, Gujarat, 360001
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Receiver Details</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row row-cards">
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Name</div>
                                            <div class="datagrid-content">Divyesh Agravat</div>
                                        </div>
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Mobile</div>
                                            <div class="datagrid-content">7698876888</div>
                                        </div>
                                        <div class="col-12 datagrid-item">
                                            <div class="datagrid-title">Address</div>
                                            <div class="datagrid-content">1001 Corporate Levels, Near Ayodhya Chowk, 150
                                                Feet Ring Road, Rajkot, Gujarat, 360001
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">Warehouse Details</h3>
                                </div>
                                <div class="card-body">
                                    <div class="row row-cards">
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Name</div>
                                            <div class="datagrid-content">Divyesh Agravat</div>
                                        </div>
                                        <div class="col-6 datagrid-item">
                                            <div class="datagrid-title">Mobile</div>
                                            <div class="datagrid-content">7698876888</div>
                                        </div>
                                        <div class="col-12 datagrid-item">
                                            <div class="datagrid-title">Address</div>
                                            <div class="datagrid-content">1001 Corporate Levels, Near Ayodhya Chowk, 150
                                                Feet Ring Road, Rajkot, Gujarat, 360001
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row row-cards row-deck">
                <div class="col-md-12 col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <ul class="nav nav-tabs card-header-tabs">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#"> Tracking </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#"> Information </a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body">
                            {{-- <ul class="timeline">
                                <li class="timeline-event">
                                    <div class="timeline-event-icon bg-primary">
                                        <!-- Download SVG icon from http://tabler.io/icons/icon/brand-x -->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" class="icon text-primary-fg icon-1">
                                            <path d="M4 4l11.733 16h4.267l-11.733 -16z" />
                                            <path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" />
                                        </svg>
                                    </div>
                                    <div class="timeline-event-card">
                                        <div class="pt-2 pb-3">
                                            <h4 class="mt-1">Menifest</h4>
                                        </div>
                                    </div>
                                </li>
                                <li class="timeline-event">
                                    <div class="timeline-event-icon bg-primary">
                                        <!-- Download SVG icon from http://tabler.io/icons/icon/briefcase -->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" class="icon text-primary-fg icon-1">
                                            <path
                                                d="M3 7m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v9a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
                                            <path d="M8 7v-2a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v2" />
                                            <path d="M12 12l0 .01" />
                                            <path d="M3 13a20 20 0 0 0 18 0" />
                                        </svg>
                                    </div>
                                    <div class="timeline-event-card">
                                        <div class="pt-2 pb-3">
                                            <h4 class="mt-1">Not Picked</h4>
                                        </div>
                                    </div>
                                </li>
                                <li class="timeline-event">
                                    <div class="timeline-event-icon bg-primary">
                                        <!-- Download SVG icon from http://tabler.io/icons/icon/check -->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" class="icon text-primary-fg icon-1">
                                            <path d="M5 12l5 5l10 -10" />
                                        </svg>
                                    </div>
                                    <div class="timeline-event-card">
                                        <div class="pt-2 pb-3">
                                            <h4 class="mt-1 mb-1">Pending</h4>
                                            <div class="text-secondary">06 Aug 2025 10:20 AM | <span class="small">Kolkata_Dankuni_GW
                                            (West Bengal)</span></div>
                                        </div>
                                    </div>
                                </li>
                                <li class="timeline-event">
                                    <div class="timeline-event-icon">
                                        <!-- Download SVG icon from http://tabler.io/icons/icon/brand-facebook -->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
                                            <path
                                                d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
                                        </svg>
                                    </div>
                                    <div class="timeline-event-card">
                                        <div class="pt-2 pb-3">
                                            <h4 class="mt-1 text-muted">Dispatched</h4>
                                        </div>
                                    </div>
                                </li>
                                <li class="timeline-event">
                                    <div class="timeline-event-icon">
                                        <!-- Download SVG icon from http://tabler.io/icons/icon/brand-facebook -->
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
                                            <path
                                                d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" />
                                        </svg>
                                    </div>
                                    <div class="timeline-event-card">
                                        <div class="pt-2 pb-3">
                                            <h4 class="mt-1 text-muted">Delivered</h4>
                                        </div>
                                    </div>
                                </li>
                            </ul> --}}

                            <ul class="steps 1steps-counter steps-vertical">
                                <li class="step-item">
                                    Manifested
                                </li>
                                <li class="step-item">
                                    Not Picked
                                </li>
                                <li class="step-item active">
                                    <div class="h4 m-0">In Transit</div>
                                    <div class="text-secondary">06 Aug 2025 10:20 AM | <span class="small">Kolkata_Dankuni_GW
                                            (West Bengal)</span></div>
                                </li>
                                <li class="step-item">
                                    Pending
                                </li>
                                <li class="step-item">
                                    Dispatched
                                </li>
                                <li class="step-item">
                                    Delivered
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">AWB Details (15616511531651)</h3>
                        </div>
                        <div class="card-body">
                            <dl class="row">
                                <dt class="col-5">Courier:</dt>
                                <dd class="col-7">
                                    <span class="avatar me-2 rounded-circle flex-shrink-0"
                                        style="background-image: url(http://localhost:8000/storage/couriers/logos/fedex-1749550351.jpg)">
                                    </span>
                                    FedEx
                                </dd>
                                <dt class="col-5">Courier Setup:</dt>
                                <dd class="col-7">Purvi7 Surface (B2C)</dd>
                                <dt class="col-5">Date:</dt>
                                <dd class="col-7">21 Jul 2025</dd>
                                <dt class="col-5">Insurance:</dt>
                                <dd class="col-7">Delivery</dd>
                                <dt class="col-5">Shipment Type:</dt>
                                <dd class="col-7">Forward</dd>
                                <dt class="col-5">Shipment Weight:</dt>
                                <dd class="col-7">0.10</dd>
                                <dt class="col-5">Shipment Box Count:</dt>
                                <dd class="col-7">1</dd>
                                <dt class="col-5">Total Cost:</dt>
                                <dd class="col-7">₹107.00</dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 col-lg-4">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Package Details</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-bordered table-sm">
                                    <thead class="table-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Dimensions (L×W×H in cm)</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>
                                                1 ×
                                                1 ×
                                                1
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>

@endsection

@section('scripts')
    <script></script>
@endsection