@extends('layouts.app')

@section('content')
<div class="max-w-7xl mx-auto px-6 py-8">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold text-gray-800">Tracking Info: {{ $importRequest->awb_no }}</h2>
        <a href="{{ route('import_requests.index') }}" class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600 shadow-md transition">
            Back to List
        </a>
    </div>

    <div class="bg-white rounded shadow p-6">
        @if(isset($error))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                <strong class="font-bold">Error:</strong>
                <span class="block sm:inline">{{ $error }}</span>
            </div>
        @elseif(empty($history))
            <div class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded relative" role="alert">
                <span class="block sm:inline">No tracking history found for this AWB.</span>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="min-w-full border-collapse">
                    <thead>
                        <tr class="bg-gray-100 border-b">
                            <th class="px-6 py-4 text-left font-medium text-gray-700">Date/Time</th>
                            <th class="px-6 py-4 text-left font-medium text-gray-700">Code</th>
                            <th class="px-6 py-4 text-left font-medium text-gray-700">Description</th>
                            <th class="px-6 py-4 text-left font-medium text-gray-700">Location</th>
                            <th class="px-6 py-4 text-left font-medium text-gray-700">Comments</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($history as $record)
                        <tr>
                            <td class="px-6 py-4 text-gray-900 whitespace-nowrap">
                                {{ $record->dateTime }}
                            </td>
                            <td class="px-6 py-4 text-gray-600">{{ $record->code }}</td>
                            <td class="px-6 py-4 text-gray-900 font-semibold">{{ $record->description }}</td>
                            <td class="px-6 py-4 text-gray-600">{{ $record->location }}</td>
                            <td class="px-6 py-4 text-gray-500 text-sm">{{ $record->comments }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>
</div>
@endsection