@extends('layouts.app')

@section('title', 'Booking #'.optional($booking)->booking_number)

@section('breadcrumbs')
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('export.dashboard') }}">Export</a></li>
        <li class="breadcrumb-item"><a href="{{ route('export.bookings.index') }}">Bookings</a></li>
        <li class="breadcrumb-item active">{{ $booking->booking_number }}</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 }}</h1>
        <p class="text-muted mb-0">{{ $booking->shippingLine->name ?? 'N/A' }} | {{ $booking->vessel_name ?? '' }} V.{{ $booking->voyage_number ?? '' }}</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('export.bookings.edit', $booking) }}" class="btn btn-outline-primary"><i class="bi bi-pencil me-1"></i> Edit</a>
        @if($booking->status === 'draft')
        <form action="{{ route('export.bookings.confirm', $booking) }}" method="POST" class="d-inline">@csrf<button type="submit" class="btn btn-success"><i class="bi bi-check-lg me-1"></i> Confirm</button></form>
        @endif
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-8">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-md-6">
                        <h6 class="fw-semibold text-muted mb-3">Shipping Details</h6>
                        <table class="table table-sm table-borderless">
                            <tr><td class="text-muted" style="width:45%">Shipping Line</td><td class="fw-medium">{{ $booking->shippingLine->name ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Vessel</td><td>{{ $booking->vessel_name ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Voyage</td><td>{{ $booking->voyage_number ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Loading Port</td><td>{{ $booking->portOfLoading->name ?? 'N/A' }}</td></tr>
                            <tr><td class="text-muted">Discharge Port</td><td>{{ $booking->portOfDischarge->name ?? 'N/A' }}</td></tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6 class="fw-semibold text-muted mb-3">Schedule</h6>
                        <table class="table table-sm table-borderless">
                            <tr><td class="text-muted" style="width:45%">ETD</td><td class="fw-medium">{{ 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>
                            <tr><td class="text-muted">Cut-off Date</td><td>{{ optional($booking->cutoff_date)->format('d M Y h:i A') ?? 'N/A' }}</td></tr>
                        </table>
                    </div>
                    <div class="col-12">
                        <h6 class="fw-semibold text-muted mb-3">Container Info</h6>
                        <table class="table table-sm table-borderless">
                            <tr><td class="text-muted" style="width:25%">Size</td><td class="fw-medium">{{ strtoupper($booking->container_size ?? 'N/A') }}</td></tr>
                            <tr><td class="text-muted">Quantity</td><td>{{ $booking->no_of_containers ?? 0 }}</td></tr>
                            <tr><td class="text-muted">Gross Weight</td><td>{{ number_format($booking->gross_weight ?? 0, 3) }} MT</td></tr>
                            <tr><td class="text-muted">Volume</td><td>{{ number_format($booking->volume ?? 0, 3) }} CBM</td></tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-body">
                <h6 class="fw-semibold text-muted mb-3">Status</h6>
                @php $bs = ['draft' => 'secondary', 'requested' => 'info', 'confirmed' => 'success', 'cancelled' => 'danger']; @endphp
                <span class="badge bg-{{ $bs[$booking->status] ?? 'secondary' }} px-3 py-2 fs-6">{{ ucfirst($booking->status) }}</span>
                <table class="table table-sm table-borderless mt-3 mb-0">
                    <tr><td class="text-muted">Order</td><td class="text-end"><a href="{{ route('export.orders.show', $booking->order) }}">{{ $booking->order->order_number ?? 'N/A' }}</a></td></tr>
                    <tr><td class="text-muted">Created</td><td class="text-end">{{ $booking->created_at->format('d M Y') }}</td></tr>
                </table>
            </div>
        </div>
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h6 class="fw-semibold text-muted mb-3">Actions</h6>
                <div class="d-grid gap-2">
                    <a href="{{ route('export.bookings.edit', $booking) }}" class="btn btn-outline-primary btn-sm text-start"><i class="bi bi-pencil me-2"></i>Edit</a>
                    @if($booking->status === 'draft')
                    <form action="{{ route('export.bookings.confirm', $booking) }}" method="POST">@csrf<button type="submit" class="btn btn-success btn-sm text-start"><i class="bi bi-check-lg me-2"></i>Confirm Booking</button></form>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection