@extends('layouts.portal')
@section('title', $consignment->tracking_code . ' — Salihiya World Cargo')
@section('page-title', $consignment->tracking_code)

@section('content')

@php
     $statuses = [
        'received' => [
            'label' => 'Received',
            'icon'  => 'arrow-down-tray',
        ],
        'departed' => [
            'label' => 'Departed',
            'icon'  => 'paper-airplane',
        ],
        'in_transit' => [
            'label' => 'In Transit',
            'icon'  => 'truck',
        ],
        'arrived' => [
            'label' => 'Arrived',
            'icon'  => 'flag',
        ],
        'customs_clearance' => [
            'label' => 'Customs Clearance',
            'icon'  => 'shield-check',
        ],
        'ready_for_pickup' => [
            'label' => 'Ready for Pickup',
            'icon'  => 'inbox-arrow-down',
        ],
        'delivered' => [
            'label' => 'Delivered',
            'icon'  => 'check-circle',
        ],
    ];
    $statusKeys = array_keys($statuses);
    $currentIndex = array_search($consignment->status, $statusKeys);
@endphp

<a href="{{ route('portal.dashboard') }}"
   style="display:inline-flex;align-items:center;gap:6px;font-size:13px;
          color:#8b87a8;text-decoration:none;font-weight:500;margin-bottom:24px;">
    <svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
    </svg>
    Back to Dashboard
</a>

<div style="display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start;">

    {{-- ── Left Column ─────────────────────────────────────── --}}
    <div style="display:flex;flex-direction:column;gap:16px;">

        {{-- Info card --}}
        <div class="card stagger-item" style="padding:28px;">
            <div style="display:flex;justify-content:space-between;
                        align-items:flex-start;margin-bottom:24px;">
                <div>
                    <p style="font-size:11px;text-transform:uppercase;letter-spacing:1px;
                               color:#8b87a8;font-weight:600;margin-bottom:4px;">Tracking Code</p>
                    <p style="font-family:'Syne',sans-serif;font-size:22px;
                               font-weight:800;color:#2c2860;">
                        {{ $consignment->tracking_code }}
                    </p>
                </div>
                <span style="font-size:11px;font-weight:700;padding:6px 14px;border-radius:99px;
                    background:{{ $consignment->shipment->type === 'air' ? '#eff6ff' : '#fffbeb' }};
                    color:{{ $consignment->shipment->type === 'air' ? '#1d4ed8' : '#92400e' }};">
                    {{ $consignment->shipment->type === 'air' ? '✈ AIR FREIGHT' : '🚢 SEA FREIGHT' }}
                </span>
            </div>

            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
                @php
                $fields = [
                    ['label' => 'Description',  'value' => $consignment->description],
                    ['label' => 'Destination',   'value' => $consignment->destination],
                    ['label' => 'Cartons',       'value' => $consignment->ctns . ' CTN'],
                    ['label' => 'CBM',           'value' => $consignment->cbm . ' m³'],
                ];
                if ($consignment->actual_weight) {
                    $fields[] = ['label' => 'Weight', 'value' => $consignment->actual_weight . ' kg'];
                }
                if ($consignment->shipment->eta) {
                    $fields[] = ['label' => 'ETA', 'value' => $consignment->shipment->eta->format('M d, Y')];
                }
                if ($consignment->shipment->vessel_or_flight) {
                    $fields[] = [
                        'label' => $consignment->shipment->type === 'sea' ? 'Vessel' : 'Flight',
                        'value' => $consignment->shipment->vessel_or_flight
                    ];
                }
                if ($consignment->shipment->reference) {
                    $fields[] = [
                        'label' => $consignment->shipment->type === 'sea' ? 'Container No.' : 'AWB',
                        'value' => $consignment->shipment->reference
                    ];
                }
                @endphp

                @foreach($fields as $field)
                <div>
                    <p style="font-size:10px;text-transform:uppercase;letter-spacing:0.8px;
                               color:#aaa8c0;font-weight:600;margin-bottom:4px;">
                        {{ $field['label'] }}
                    </p>
                    <p style="font-size:14px;font-weight:600;color:#2c2860;">
                        {{ $field['value'] }}
                    </p>
                </div>
                @endforeach
            </div>

            @if($consignment->remarks)
            <div style="margin-top:20px;padding-top:20px;border-top:1px solid #f0eef8;">
                <p style="font-size:10px;text-transform:uppercase;letter-spacing:0.8px;
                           color:#aaa8c0;font-weight:600;margin-bottom:6px;">Remarks</p>
                <p style="font-size:14px;color:#6b7280;font-style:italic;">
                    {{ $consignment->remarks }}
                </p>
            </div>
            @endif
        </div>

        <!-- {{-- Delivery note download --}}
        @if($consignment->deliveryNote)
        <div class="stagger-item"
             style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:16px;
                    padding:20px 24px;display:flex;align-items:center;justify-content:space-between;">
            <div>
                <p style="font-weight:700;color:#15803d;font-family:'Syne',sans-serif;font-size:14px;">
                    📄 Delivery Note Available
                </p>
                <p style="font-size:12px;color:#16a34a;margin-top:2px;">
                    {{ $consignment->deliveryNote->dn_number }}
                </p>
            </div>
            <a href="{{ route('portal.consignment.delivery-note', $consignment->tracking_code) }}"
               style="background:#15803d;color:#fff;font-size:13px;font-weight:600;
                      padding:10px 20px;border-radius:10px;text-decoration:none;
                      font-family:'Syne',sans-serif;transition:background 150ms ease;">
                Download PDF
            </a>
        </div>
        @endif -->

    </div>

    {{-- ── Right Column: Timeline ─────────────────────────── --}}
    <div class="card stagger-item" style="padding:24px;">
        <h3 style="font-family:'Syne',sans-serif;font-size:15px;font-weight:700;
                   color:#2c2860;margin-bottom:20px;">Shipment Timeline</h3>

        <div>
            @foreach($statuses as $key => $info)
            @php
                $stepIndex    = array_search($key, $statusKeys);
                $done         = $stepIndex <= $currentIndex;
                $current      = $key === $consignment->status;
                $historyEntry = $consignment->statusHistories->where('status', $key)->last();
            @endphp

            @php
    $bgColor = $done
        ? '#2c2860'
        : ($current ? '#eef2ff' : '#f0eef8');

    $iconColor = $done
        ? '#ffffff'
        : ($current ? '#2c2860' : '#c4c0d8');

    $ring = $current
        ? '0 0 0 3px rgba(44,40,96,0.15)'
        : 'none';

    $lineColor = $done
        ? 'linear-gradient(to bottom, #2c2860, #c7d2fe)'
        : '#e5e7eb';
@endphp

<div style="display:flex;gap:12px;">
    
    {{-- Line + dot --}}
    <div style="display:flex;flex-direction:column;align-items:center;">
        
        {{-- Circle --}}
        <div style="
            width:32px;
            height:32px;
            border-radius:50%;
            display:flex;
            align-items:center;
            justify-content:center;
            flex-shrink:0;
            background:{{ $bgColor }};
            box-shadow:{{ $ring }};
            transition: all 200ms ease;
        ">
            <x-dynamic-component
                :component="'heroicon-o-' . $info['icon']"
                class="w-5 h-5"
                style="color: {{ $iconColor }};"
            />
        </div>

        {{-- Connector line --}}
        @if(!$loop->last)
        <div style="
            width:2px;
            flex:1;
            margin:6px 0;
            background:{{ $lineColor }};
            min-height:28px;
            transition: background 200ms ease;
        "></div>
        @endif

    </div>
                {{-- Content --}}
                <div style="padding-bottom:20px;padding-top:4px;flex:1;min-width:0;">
                    <div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap;">
                        <span style="font-size:13px;font-weight:{{ $current ? '700' : '500' }};
                                     color:{{ $current ? '#2c2860' : ($done ? '#374151' : '#c4c0d8') }};">
                            {{ $info['label'] }}
                        </span>
                        @if($current)
                        <span style="font-size:10px;background:#2c2860;color:#f4b65a;
                                     padding:2px 8px;border-radius:99px;font-weight:700;
                                     font-family:'Syne',sans-serif;letter-spacing:0.5px;">
                            NOW
                        </span>
                        @endif
                    </div>

                    @if($historyEntry)
                    <p style="font-size:11px;color:#8b87a8;margin-top:2px;">
                        {{ $historyEntry->created_at->format('M d, Y · H:i') }}
                    </p>
                    @if($historyEntry->note)
                    <p style="font-size:11px;color:#6b7280;margin-top:3px;
                               font-style:italic;line-height:1.4;">
                        "{{ $historyEntry->note }}"
                    </p>
                    @endif
                    @endif
                </div>
            </div>
            @endforeach
        </div>
    </div>

</div>

@endsection