@extends('layouts.app')
@section('title', 'Import Shipments')
@section('breadcrumb')
    <li class="breadcrumb-item active">Import Shipments</li>
@endsection
@section('content')
<div class="d-flex align-items-center justify-content-between mb-4">
    <div>
        <h4 class="fw-bold mb-1" style="font-size:1.3rem;">Import Shipments</h4>
        <p class="text-muted mb-0" style="font-size:0.85rem;">Track and manage inbound shipments</p>
    </div>
    <a href="{{ route('import.shipments.create') }}" class="btn btn-primary" style="border-radius:8px;"><i class="bi bi-plus-lg me-1"></i>New Shipment</a>
</div>
<div class="card border-0 shadow-sm mb-4" style="border-radius:12px;">
    <div class="card-body p-3">
        <form method="GET" class="row g-3 align-items-end">
            <div class="col-lg-2 col-md-4">
                <label class="form-label fw-medium" style="font-size:0.8rem;">Status</label>
                <select name="status" class="form-select form-select-sm" style="border-radius:8px;">
                    <option value="">All Status</option>
                    @foreach(['booked','shipped','in_transit','at_port','discharged','cleared','delivered'] as $s)
                        <option value="{{ $s }}" {{ request('status') == $s ? 'selected' : '' }}>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-2 col-md-4">
                <label class="form-label fw-medium" style="font-size:0.8rem;">Shipping Line</label>
                <select name="shipping_line" class="form-select form-select-sm" style="border-radius:8px;">
                    <option value="">All Lines</option>
                    @foreach(['Maersk','MSC','CMA CGM','COSCO','Hapag-Lloyd','ONE','Evergreen','ZIM','Yang Ming','HMM'] as $line)
                        <option value="{{ $line }}" {{ request('shipping_line') == $line ? 'selected' : '' }}>{{ $line }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-lg-2 col-md-4">
                <label class="form-label fw-medium" style="font-size:0.8rem;">Container No.</label>
                <input type="text" name="container" class="form-control form-control-sm" value="{{ request('container') }}" placeholder="Search..." style="border-radius:8px;">
            </div>
            <div class="col-lg-2 col-md-4">
                <label class="form-label fw-medium" style="font-size:0.8rem;">Date From</label>
                <input type="date" name="date_from" class="form-control form-control-sm" value="{{ request('date_from') }}" style="border-radius:8px;">
            </div>
            <div class="col-lg-2 col-md-4">
                <label class="form-label fw-medium" style="font-size:0.8rem;">Date To</label>
                <input type="date" name="date_to" class="form-control form-control-sm" value="{{ request('date_to') }}" style="border-radius:8px;">
            </div>
            <div class="col-lg-2 col-md-4 d-flex gap-2">
                <button type="submit" class="btn btn-primary btn-sm flex-grow-1" style="border-radius:8px;"><i class="bi bi-funnel me-1"></i>Filter</button>
                <a href="{{ route('import.shipments.index') }}" class="btn btn-outline-secondary btn-sm" style="border-radius:8px;"><i class="bi bi-arrow-counterclockwise"></i></a>
            </div>
        </form>
    </div>
</div>
<x-data-table id="importShipmentsTable" :exportable="true">
    <thead>
        <tr class="bg-light">
            <th>Shipment No.</th><th>Order Ref</th><th>Container(s)</th><th>Vessel / Flight</th><th>Port of Loading</th><th>ETD</th><th>ETA</th><th>Status</th><th class="text-end">Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach($shipments ?? [] as $shipment)
            <tr>
                <td><a href="{{ route('import.shipments.show', $shipment) }}" class="text-primary fw-medium text-decoration-none">{{ $shipment->shipment_number }}</a></td>
                <td>{{ $shipment->order->order_number ?? '-' }}</td>
                <td><code style="font-size:0.78rem;">{{ $shipment->container_numbers ?? '-' }}</code></td>
                <td>{{ $shipment->vessel_name ?? '-' }}</td>
                <td>{{ $shipment->port_of_loading ?? '-' }}</td>
                <td>{{ $shipment->etd?->format('d M Y') ?? '-' }}</td>
                <td>{{ $shipment->eta?->format('d M Y') ?? '-' }}</td>
                <td><x-status-badge :status="$shipment->status" /></td>
                <td class="text-end">
                    <div class="btn-group btn-group-sm">
                        <a href="{{ route('import.shipments.show', $shipment) }}" class="btn btn-outline-primary"><i class="bi bi-eye"></i></a>
                        <a href="{{ route('import.shipments.edit', $shipment) }}" class="btn btn-outline-secondary"><i class="bi bi-pencil"></i></a>
                    </div>
                </td>
            </tr>
        @empty
            <tr><td colspan="9" class="text-center py-5"><div class="text-muted"><i class="bi bi-inbox" style="font-size:2rem;"></i><p class="mt-2 mb-0">No shipments found</p></div></td></tr>
        @endforeach
    </tbody>
</x-data-table>
@endsection