@extends('layouts.app')
@section('title', 'Ocean Booking #'.optional($booking)->booking_number)
@section('breadcrumbs')
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('freight.ocean.index') }}">Ocean Freight</a></li><li class="breadcrumb-item active">{{ $booking->booking_number ?? 'Details' }}</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">{{ $booking->booking_number ?? 'N/A' }}</h1><p class="text-muted mb-0">{{ $booking->customer->name ?? '' }} | {{ $booking->vessel_name ?? '' }} V.{{ $booking->voyage_number ?? '' }}</p></div>
    <div class="d-flex gap-2">
        <a href="{{ route('freight.ocean.index') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Back</a>
        <button class="btn btn-outline-secondary" onclick="window.print()"><i class="bi bi-printer me-1"></i>Print</button>
    </div>
</div>
<x-status-timeline :steps="[
    ['status' => 'draft', 'label' => 'Draft', 'icon' => 'bi-pencil'],
    ['status' => 'confirmed', 'label' => 'Confirmed', 'icon' => 'bi-check-circle'],
    ['status' => 'in_transit', 'label' => 'In Transit', 'icon' => 'bi-water'],
    ['status' => 'arrived', 'label' => 'Arrived', 'icon' => 'bi-geo-alt'],
    ['status' => 'completed', 'label' => 'Completed', 'icon' => 'bi-check-circle-fill'],
]" :current="$booking->status ?? 'draft'" />
<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white border-0 py-3">
        <ul class="nav nav-tabs card-header-tabs" role="tablist">
            @php $tabs = ['overview' => 'Overview', 'tracking' => 'Tracking', 'documents' => 'Documents', 'charges' => 'Charges', 'activity' => 'Activity']; @endphp
            @foreach($tabs as $key => $label)<li class="nav-item"><a class="nav-link {{ $loop->first ? 'active' : '' }}" data-bs-toggle="tab" href="#{{ $key }}">{{ $label }}</a></li>@endforeach
        </ul>
    </div>
    <div class="card-body">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="overview">
                <div class="row g-4">
                    <div class="col-md-4">
                        <h6 class="fw-semibold text-muted mb-2">Booking Details</h6>
                        <table class="table table-sm table-borderless">
                            <tr><td class="text-muted" style="width:45%">Booking #</td><td class="fw-medium">{{ $booking->booking_number ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Date</td><td>{{ optional($booking->booking_date)->format('d M Y') ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Shipping Line</td><td>{{ $booking->shippingLine->name ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Mode</td><td>{{ $booking->mode ?? 'FCL' }}</td></tr>
                            <tr><td class="text-muted">Status</td><td><x-status-badge :status="$booking->status ?? 'draft'" /></td></tr>
                        </table>
                    </div>
                    <div class="col-md-4">
                        <h6 class="fw-semibold text-muted mb-2">Vessel & Route</h6>
                        <table class="table table-sm table-borderless">
                            <tr><td class="text-muted" style="width:45%">Vessel</td><td>{{ $booking->vessel_name ?? 'TBD' }}</td></tr>
                            <tr><td class="text-muted">Voyage</td><td>{{ $booking->voyage_number ?? 'TBD' }}</td></tr>
                            <tr><td class="text-muted">Port of Loading</td><td>{{ $booking->portOfLoading->name ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Port of Discharge</td><td>{{ $booking->portOfDischarge->name ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">ETD</td><td>{{ optional($booking->etd)->format('d M Y') ?? 'TBD' }}</td></tr>
                            <tr><td class="text-muted">ETA</td><td>{{ optional($booking->eta)->format('d M Y') ?? 'TBD' }}</td></tr>
                        </table>
                    </div>
                    <div class="col-md-4">
                        <h6 class="fw-semibold text-muted mb-2">Cargo</h6>
                        <table class="table table-sm table-borderless">
                            <tr><td class="text-muted" style="width:45%">Container</td><td>{{ $booking->container_quantity ?? 0 }}x {{ $booking->containerType->name ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Commodity</td><td>{{ Str::limit($booking->commodity ?? 'N/A', 40) }}</td></tr>
                            <tr><td class="text-muted">Gross Weight</td><td>{{ number_format($booking->gross_weight ?? 0, 2) }} KGS</td></tr>
                            <tr><td class="text-muted">Volume</td><td>{{ number_format($booking->volume ?? 0, 4) }} CBM</td></tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="tracking">
                <div class="text-center py-5 text-muted">
                    <i class="bi bi-geo-alt display-4 d-block mb-2"></i>
                    <p>Container tracking timeline</p>
                    <div id="mapContainer" style="height:300px;background:#f0f0f0;border-radius:8px;" class="mt-3"></div>
                </div>
            </div>
            <div class="tab-pane fade" id="documents">
                <div class="row g-3">
                    @foreach(['Bill of Lading', 'Booking Confirmation', 'Cargo Receipt', 'Dangerous Goods Declaration', 'Insurance Certificate'] as $doc)
                    <div class="col-md-4">
                        <div class="card border h-100">
                            <div class="card-body d-flex justify-content-between align-items-center">
                                <div><i class="bi bi-file-earmark-text text-muted me-2"></i><span class="fw-medium">{{ $doc }}</span></div>
                                <a href="#" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="tab-pane fade" id="charges">
                <div class="table-responsive">
                    <table class="table table-bordered">
                        <thead class="bg-light"><tr><th>Charge Type</th><th>Description</th><th class="text-end">Amount</th><th>Billed To</th></tr></thead>
                        <tbody>
                            @forelse($booking->charges ?? [] as $charge)
                            <tr><td>{{ ucfirst(str_replace('_', ' ', $charge['type'] ?? '')) }}</td><td>{{ $charge['description'] ?? '' }}</td><td class="text-end fw-medium">{{ number_format($charge['amount'] ?? 0, 2) }} {{ $charge['currency'] ?? 'USD' }}</td><td>{{ ucfirst($charge['billed_to'] ?? 'shipper') }}</td></tr>
                            @empty
                            <tr><td colspan="4" class="text-center py-3 text-muted">No charges recorded</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="activity">
                @forelse($booking->activities ?? [] as $activity)
                <div class="d-flex mb-3">
                    <div class="flex-shrink-0 me-3"><div class="bg-primary-subtle rounded-circle d-flex align-items-center justify-content-center" style="width:32px;height:32px"><i class="bi bi-circle-fill text-primary" style="font-size:6px"></i></div></div>
                    <div><p class="mb-1">{{ $activity->description ?? '' }}</p><small class="text-muted">{{ $activity->created_at?->diffForHumans() ?? '' }} by {{ $activity->user->name ?? 'System' }}</small></div>
                </div>
                @empty
                <div class="text-center py-4 text-muted">No activity recorded</div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection