@extends('layouts.main')

@section('content')
<div class="container py-5">
    <h4 class="mb-3">Track Your Order</h4>
    <p><strong>Order ID:</strong> {{ $checkout->payment_order_id }}</p>

    @php
        $tracking = json_decode($checkout->manual_shipping_tracking, true);

        $displayStatuses = collect($statuses)
            ->filter(fn($label, $code) => $code <= 8 || ($code >= 9 && $checkout->manual_shipping_status >= 9));
    @endphp

    {{-- Flipkart-style Horizontal Tracker --}}
    <div class="bg-white p-4 shadow-sm rounded border mb-5">
        <div class="position-relative" style="height: 80px;">
            {{-- Horizontal Line Behind Dots --}}
            <div class="position-absolute top-50 start-0 end-0 translate-middle-y" style="height: 4px; background-color: #dee2e6;     z-index: 0;
    top: 13px !important;"></div>

            {{-- Dots with Text --}}
            <div class="d-flex justify-content-between align-items-start position-relative" style="z-index: 2;">
                @foreach($displayStatuses as $code => $label)
                    @php
                        $isDone = $checkout->manual_shipping_status > $code;
                        $isCurrent = $checkout->manual_shipping_status == $code;
                        $bgColor = $isDone ? '#198754' : ($isCurrent ? '#0d6efd' : '#adb5bd');
                    @endphp

                    <div class="text-center" style="width: {{ 100 / count($displayStatuses) }}%;">
                        {{-- Dot --}}
                        <div class="mx-auto mb-2"
                             style="
                                 width: 24px;
                                 height: 24px;
                                 border-radius: 50%;
                                 background-color: {{ $bgColor }};
                                 border: 3px solid white;
                                 box-shadow: 0 0 0 3px {{ $bgColor }};
                             ">
                        </div>

                        {{-- Label --}}
                        <div class="small text-dark fw-semibold" style="font-size: 13px;">
                            {{ $label }}
                        </div>

                        {{-- Date --}}
                        @if(isset($tracking[$code]))
                            <div class="text-muted small">
                                {{ \Carbon\Carbon::parse($tracking[$code])->format('d M, h:i A') }}
                            </div>
                        @endif
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Timeline Below --}}
    <div class="bg-white p-4 shadow-sm rounded border">
        <h5 class="mb-3">Shipping Timeline</h5>
        <ul class="list-group">
            @foreach($displayStatuses as $code => $label)
                <li class="list-group-item d-flex justify-content-between align-items-center
                    {{ $checkout->manual_shipping_status == $code ? 'border-start border-4 border-primary bg-light' : '' }}">
                    <div>
                        <strong class="text-dark">{{ $label }}</strong>
                        @if(isset($tracking[$code]))
                            <div class="text-muted small">
                                Updated: {{ \Carbon\Carbon::parse($tracking[$code])->format('d M Y, h:i A') }}
                            </div>
                        @endif
                    </div>
                    @if($checkout->manual_shipping_status == $code)
                        <span class="badge bg-primary">Current</span>
                    @elseif($checkout->manual_shipping_status > $code)
                        <span class="badge bg-success">Done</span>
                    @else
                        <span class="badge bg-secondary">Pending</span>
                    @endif
                </li>
            @endforeach
        </ul>
    </div>

    <a href="{{ route('order.myorders') }}" class="btn btn-outline-dark mt-4">← Back to Orders</a>
</div>
@endsection