@extends('layouts.app')
@section('title', 'Container Tracking')
@section('breadcrumbs')
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li><li class="breadcrumb-item"><a href="#">Freight</a></li><li class="breadcrumb-item active">Container Movements</li></ol></nav>
@endsection
@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div><h1 class="h3 mb-1 text-dark fw-semibold">Container Movements</h1><p class="text-muted mb-0">Track container movements and location history</p></div>
</div>
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body">
        <div class="row g-3">
            <div class="col-md-3"><label class="form-label fw-medium">Container Number</label><input type="text" class="form-control" id="containerSearch" placeholder="e.g. MSCU1234567"></div>
            <div class="col-md-3"><label class="form-label fw-medium">Shipping Line</label><select class="form-select" id="lineFilter"><option value="">All</option>@foreach($shippingLines ?? [] as $l)<option value="{{ $l->id }}">{{ $l->name }}</option>@endforeach</select></div>
            <div class="col-md-2"><label class="form-label fw-medium">Status</label><select class="form-select" id="statusFilter"><option value="">All</option><option value="empty">Empty</option><option value="loaded">Loaded</option><option value="in_transit">In Transit</option><option value="at_port">At Port</option></select></div>
            <div class="col-md-2 d-flex align-items-end"><button class="btn btn-primary btn-sm w-100"><i class="bi bi-search me-1"></i>Search</button></div>
        </div>
    </div>
</div>
<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3"><h5 class="mb-0 fw-semibold">Container List</h5></div>
            <div class="card-body">
                <div class="table-responsive">
                    <table id="containerTable" class="table table-hover align-middle mb-0 w-100">
                        <thead class="bg-light"><tr><th class="border-0 px-3 py-3 fw-semibold text-muted small">Container #</th><th class="border-0 px-3 py-3 fw-semibold text-muted small">Type</th><th class="border-0 px-3 py-3 fw-semibold text-muted small">Size</th><th class="border-0 px-3 py-3 fw-semibold text-muted small">Current Location</th><th class="border-0 px-3 py-3 fw-semibold text-muted small">Status</th><th class="border-0 px-3 py-3 fw-semibold text-muted small text-end">Actions</th></tr></thead>
                        <tbody>
                            @forelse($containers ?? [] as $c)
                            <tr>
                                <td class="px-3 fw-semibold">{{ $c->container_number ?? 'N/A' }}</td>
                                <td class="px-3">{{ $c->type ?? 'N/A' }}</td>
                                <td class="px-3">{{ $c->size ?? 'N/A' }}</td>
                                <td class="px-3">{{ $c->current_location ?? 'N/A' }}</td>
                                <td class="px-3"><x-status-badge :status="$c->status ?? 'empty'" /></td>
                                <td class="px-3 text-end"><a href="#" class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#timelineModal"><i class="bi bi-clock-history"></i></a></td>
                            </tr>
                            @empty
                            <tr><td colspan="6" class="text-center py-5 text-muted">No containers found</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white py-3"><h5 class="mb-0 fw-semibold">Movement Timeline</h5></div>
            <div class="card-body">
                <div class="timeline-vertical">
                    @forelse($movements ?? [] as $m)
                    <div class="d-flex mb-4">
                        <div class="flex-shrink-0 me-3"><div class="bg-{{ ($m->status ?? '') === 'current' ? 'primary' : 'success' }}-subtle rounded-circle d-flex align-items-center justify-content-center" style="width:32px;height:32px"><i class="bi bi-{{ ($m->status ?? '') === 'current' ? 'geo-alt-fill text-primary' : 'check-circle-fill text-success' }}" style="font-size:14px"></i></div></div>
                        <div><p class="mb-1 fw-semibold" style="font-size:0.875rem;">{{ $m->location ?? 'N/A' }}</p><p class="mb-1 text-muted small">{{ $m->event ?? '' }}</p><small class="text-muted">{{ optional($m->timestamp)->format('d M Y H:i') ?? '' }}</small></div>
                    </div>
                    @empty
                    <div class="text-center text-muted py-4">Select a container to view timeline</div>
                    @endforelse
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="timelineModal" tabindex="-1"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-header"><h5 class="modal-title">Container Movement Timeline</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div><div class="modal-body"><div id="modalTimeline">Select a container to view its movement history.</div></div></div></div></div>
@endsection
@push('scripts')
<script>$(document).ready(function(){ $('#containerTable').DataTable({order:[[0,'asc']],pageLength:25}); });</script>
@endpush