@extends('layouts.app')

@section('title', 'Ocean Freight')

@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">Ocean Freight</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">Ocean Freight Bookings</h1>
        <p class="text-muted mb-0">Manage ocean freight bookings and shipments</p>
    </div>
    <a href="{{ route('freight.ocean.create') }}" class="btn btn-primary">
        <i class="bi bi-plus-lg me-1"></i> New Booking
    </a>
</div>

<div class="row g-3 mb-4">
    @php
        $stats = [
            ['label' => 'Total Bookings', 'count' => $stats['total'] ?? 0, 'icon' => 'bi-ship', 'color' => 'primary'],
            ['label' => 'In Transit', 'count' => $stats['in_transit'] ?? 0, 'icon' => 'bi-water', 'color' => 'info'],
            ['label' => 'Delivered', 'count' => $stats['delivered'] ?? 0, 'icon' => 'bi-check-circle-fill', 'color' => 'success'],
            ['label' => 'Pending', 'count' => $stats['pending'] ?? 0, 'icon' => 'bi-clock-history', 'color' => 'warning'],
            ['label' => 'Cancelled', 'count' => $stats['cancelled'] ?? 0, 'icon' => 'bi-x-circle', 'color' => 'danger'],
        ];
    @endphp
    @foreach($stats as $stat)
    <div class="col">
        <x-kpi-card :title="$stat['label']" :value="$stat['count']" :icon="$stat['icon']" :color="$stat['color']" />
    </div>
    @endforeach
</div>

<div class="card border-0 shadow-sm mb-4">
    <div class="card-header bg-white py-3">
        <ul class="nav nav-tabs card-header-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#active"><i class="bi bi-clock me-1"></i>Active</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#completed"><i class="bi bi-check-circle me-1"></i>Completed</a></li>
            <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#cancelled"><i class="bi bi-x-circle me-1"></i>Cancelled</a></li>
        </ul>
    </div>
    <div class="card-body">
        <div class="row g-3 mb-3">
            <div class="col-md-2">
                <label class="form-label small fw-medium">Date From</label>
                <input type="date" class="form-control form-control-sm" id="dateFrom">
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-medium">Date To</label>
                <input type="date" class="form-control form-control-sm" id="dateTo">
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-medium">Shipping Line</label>
                <select class="form-select form-select-sm" id="shippingLineFilter">
                    <option value="">All Lines</option>
                    @foreach($shippingLines ?? [] as $line)
                        <option value="{{ $line->id }}">{{ $line->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-medium">Mode</label>
                <select class="form-select form-select-sm" id="modeFilter">
                    <option value="">All Modes</option>
                    <option value="FCL">FCL</option>
                    <option value="LCL">LCL</option>
                </select>
            </div>
            <div class="col-md-2">
                <label class="form-label small fw-medium">Status</label>
                <select class="form-select form-select-sm" id="statusFilter">
                    <option value="">All Status</option>
                    <option value="draft">Draft</option>
                    <option value="confirmed">Confirmed</option>
                    <option value="in_transit">In Transit</option>
                    <option value="delivered">Delivered</option>
                    <option value="cancelled">Cancelled</option>
                </select>
            </div>
            <div class="col-md-2 d-flex align-items-end gap-1">
                <button class="btn btn-outline-primary btn-sm" id="applyFilters"><i class="bi bi-funnel me-1"></i>Filter</button>
                <button class="btn btn-outline-secondary btn-sm" id="clearFilters"><i class="bi bi-x-lg"></i></button>
                <button class="btn btn-outline-success btn-sm ms-auto" id="exportExcel"><i class="bi bi-file-earmark-excel me-1"></i>Export</button>
            </div>
        </div>

        <div class="tab-content">
            <div class="tab-pane fade show active" id="active">
                <div class="table-responsive">
                    <table id="activeBookings" 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">Booking #</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">Vessel</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">Voyage</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">Port Load</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">Port Discharge</th>
                                <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">ETD</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">ETA</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($bookings->whereNotIn('status', ['completed', 'cancelled']) as $booking)
                            <tr>
                                <td class="px-3">
                                    <a href="{{ route('freight.ocean.show', $booking) }}" class="fw-semibold text-decoration-none">{{ $booking->booking_number }}</a>
                                </td>
                                <td class="px-3">{{ $booking->vessel_name ?? 'TBD' }}</td>
                                <td class="px-3">{{ $booking->voyage_number ?? 'TBD' }}</td>
                                <td class="px-3">{{ $booking->portOfLoading->name ?? 'N/A' }}</td>
                                <td class="px-3">{{ $booking->portOfDischarge->name ?? 'N/A' }}</td>
                                <td class="px-3">
                                    <span class="badge bg-light text-dark border">{{ $booking->container_quantity ?? 0 }}x {{ $booking->containerType->name ?? 'N/A' }}</span>
                                </td>
                                <td class="px-3">{{ optional($booking->etd)->format('d M Y') ?? 'TBD' }}</td>
                                <td class="px-3">{{ optional($booking->eta)->format('d M Y') ?? 'TBD' }}</td>
                                <td class="px-3"><x-status-badge :status="$booking->status" /></td>
                                <td class="px-3 text-end">
                                    <div class="dropdown">
                                        <button class="btn btn-sm btn-light" data-bs-toggle="dropdown"><i class="bi bi-three-dots-vertical"></i></button>
                                        <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                            <li><a class="dropdown-item" href="{{ route('freight.ocean.show', $booking) }}"><i class="bi bi-eye me-2"></i>View</a></li>
                                            <li><a class="dropdown-item" href="#"><i class="bi bi-pencil me-2"></i>Edit</a></li>
                                            <li><a class="dropdown-item" href="#"><i class="bi bi-trackings me-2"></i>Track</a></li>
                                            <li><hr class="dropdown-divider"></li>
                                            <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-trash me-2"></i>Cancel</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            @empty
                            <tr><td colspan="10" class="text-center py-5"><div class="text-muted"><i class="bi bi-inbox display-4 d-block mb-2"></i><p>No active bookings found</p></div></td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="completed">
                <div class="table-responsive">
                    <table id="completedBookings" 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">Booking #</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">Vessel</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">Route</th>
                                <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">ETA</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($bookings->where('status', 'completed') as $booking)
                            <tr>
                                <td class="px-3"><a href="{{ route('freight.ocean.show', $booking) }}" class="fw-semibold text-decoration-none">{{ $booking->booking_number }}</a></td>
                                <td class="px-3">{{ $booking->vessel_name ?? 'N/A' }}</td>
                                <td class="px-3">{{ $booking->portOfLoading->code ?? '' }} → {{ $booking->portOfDischarge->code ?? '' }}</td>
                                <td class="px-3">{{ $booking->container_quantity ?? 0 }}x {{ $booking->containerType->name ?? '' }}</td>
                                <td class="px-3">{{ optional($booking->eta)->format('d M Y') ?? 'N/A' }}</td>
                                <td class="px-3"><x-status-badge status="completed" /></td>
                                <td class="px-3 text-end"><a href="{{ route('freight.ocean.show', $booking) }}" class="btn btn-sm btn-light"><i class="bi bi-eye"></i></a></td>
                            </tr>
                            @empty
                            <tr><td colspan="7" class="text-center py-4 text-muted">No completed bookings</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="tab-pane fade" id="cancelled">
                <div class="table-responsive">
                    <table id="cancelledBookings" 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">Booking #</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">Vessel</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">Route</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">Cancelled On</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small">Reason</th>
                                <th class="border-0 px-3 py-3 fw-semibold text-muted small text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($bookings->where('status', 'cancelled') as $booking)
                            <tr>
                                <td class="px-3"><a href="{{ route('freight.ocean.show', $booking) }}" class="fw-semibold text-decoration-none">{{ $booking->booking_number }}</a></td>
                                <td class="px-3">{{ $booking->vessel_name ?? 'N/A' }}</td>
                                <td class="px-3">{{ $booking->portOfLoading->code ?? '' }} → {{ $booking->portOfDischarge->code ?? '' }}</td>
                                <td class="px-3">{{ $booking->updated_at->format('d M Y') }}</td>
                                <td class="px-3">{{ $booking->remarks ?? 'N/A' }}</td>
                                <td class="px-3 text-end"><a href="{{ route('freight.ocean.show', $booking) }}" class="btn btn-sm btn-light"><i class="bi bi-eye"></i></a></td>
                            </tr>
                            @empty
                            <tr><td colspan="6" class="text-center py-4 text-muted">No cancelled bookings</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    ['#activeBookings', '#completedBookings', '#cancelledBookings'].forEach(function(selector) {
        $(selector).DataTable({ order: [[0, 'desc']], pageLength: 25, language: { search: '', searchPlaceholder: 'Search...' } });
    });
    $('#exportExcel').on('click', function() { Swal.fire('Export', 'Excel export initiated', 'success'); });
});
</script>
@endpush