@extends('layouts.app')
@section('content')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/2.3.7/css/dataTables.dataTables.css" />
    <style>
        .tracking-timeline {
            max-width: 700px;
            margin: auto;
        }

        .timeline-item {
            display: flex;
            position: relative;
            margin-bottom: 30px;
        }

        .timeline-marker {
            width: 40px;
            position: relative;
            display: flex;
            justify-content: center;
        }

        .dot {
            width: 16px;
            height: 16px;
            background: #16a34a;
            border-radius: 50%;
            z-index: 2;
        }

        .line {
            position: absolute;
            top: 18px;
            width: 2px;
            bottom: -30px;
            background: #d1d5db;
        }

        .timeline-content {
            background: white;
            padding: 14px 18px;
            border-radius: 12px;
            width: 100%;
            box-shadow:
                0 2px 8px rgba(0, 0, 0, .05);
        }

        .timeline-header h6 {
            margin: 0;
            font-size: 15px;
            font-weight: 600;
        }

        .timeline-header span {
            color: #6b7280;
            font-size: 13px;
        }

        .timeline-location {
            margin-top: 10px;
            color: #4b5563;
        }
    </style>
    <div>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('admin.cardtracking') }}">Back</a></li>
                <li class="breadcrumb-item active">Card Tracking</li>
            </ol>
        </nav>
        <div class="card shadow-sm border-0 rounded">
            <div class="card-header">
                <h5 class="card-title">Card Tracking</h5>
                <span class="text-muted">Track the status of cards and their delivery.</span>
            </div>
            <div class="card-body">
                <div class="mb-4">
                    @include('errors')

                    @if (session('success'))
                        <div class="alert alertsuccess alert-dismissible fade show col-md-8" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show col-md-8" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                </div>

                <span>Tracking No: <strong>{{ $trackingNo }}</strong></span>

                <div class="tracking-timeline">

                    @foreach ($events['events'] as $index => $event)
                        <div class="timeline-item">

                            <div class="timeline-marker">
                                <div class="dot"></div>

                                @if (!$loop->last)
                                    <div class="line"></div>
                                @endif
                            </div>

                            <div class="timeline-content">

                                <div class="timeline-header">
                                    <h6>{{ $event['description'] }}</h6>

                                    <span>
                                        {{ \Carbon\Carbon::parse($event['dateTime'])->format('d M Y • h:i A') }}
                                        ({{ $event['timezone'] }})
                                    </span>
                                </div>

                                <div class="timeline-location">
                                    📍
                                    {{ $event['address']['city'] ?? '-' }},
                                    {{ $event['address']['state'] ?? '-' }},
                                    {{ $event['address']['country'] ?? '-' }}
                                </div>

                            </div>

                        </div>
                    @endforeach

                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('js/parsley.min.js') }}"></script>
    <script src="{{ asset('js/ms.js') }}"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.7/js/dataTables.js"></script>
@endsection