@extends('layouts.app')

@section('title', 'New Booking')

@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">Create</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">New Booking</h1>
        <p class="text-muted mb-0">Create a new shipping booking</p>
    </div>
    <a href="{{ route('export.bookings.index') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i> Back</a>
</div>

<form action="{{ route('export.bookings.store') }}" method="POST">
    @csrf
    @if ($errors->any())
    <div class="alert alert-danger alert-dismissible fade show"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul><button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white py-3"><h5 class="mb-0 fw-semibold"><i class="bi bi-info-circle me-2 text-primary"></i>Booking Details</h5></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-medium">Export Order <span class="text-danger">*</span></label>
                    <select name="order_id" class="form-select" required>
                        <option value="">Select Order</option>
                        @foreach($orders as $o)
                            <option value="{{ $o->id }}" {{ request('order_id') == $o->id ? 'selected' : '' }}>{{ $o->order_number }} - {{ $o->customer->name ?? '' }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Booking Date <span class="text-danger">*</span></label>
                    <input type="date" name="date" class="form-control" value="{{ date('Y-m-d') }}" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Booking Reference</label>
                    <input type="text" name="booking_reference" class="form-control" placeholder="SRR / Booking Ref #">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Transport Mode</label>
                    <select name="transport_mode" class="form-select">
                        <option value="sea">Sea Freight</option>
                        <option value="air">Air Freight</option>
                        <option value="road">Road / Truck</option>
                        <option value="rail">Rail</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white py-3"><h5 class="mb-0 fw-semibold"><i class="bi bi-ship me-2 text-primary"></i>Shipping Details</h5></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4">
                    <label class="form-label fw-medium">Shipping Line / Airline <span class="text-danger">*</span></label>
                    <select name="shipping_line_id" class="form-select" required>
                        <option value="">Select</option>
                        @foreach($shippingLines as $line)
                            <option value="{{ $line->id }}">{{ $line->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-medium">Vessel Name</label>
                    <input type="text" name="vessel_name" class="form-control" placeholder="e.g., Maersk Seletar">
                </div>
                <div class="col-md-4">
                    <label class="form-label fw-medium">Voyage Number</label>
                    <input type="text" name="voyage_number" class="form-control" placeholder="e.g., 1234W">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Port of Loading <span class="text-danger">*</span></label>
                    <select name="port_of_loading_id" class="form-select" required>
                        <option value="">Select</option>
                        @foreach($ports as $port)<option value="{{ $port->id }}">{{ $port->name }}</option>@endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Port of Discharge <span class="text-danger">*</span></label>
                    <select name="port_of_discharge_id" class="form-select" required>
                        <option value="">Select</option>
                        @foreach($ports as $port)<option value="{{ $port->id }}">{{ $port->name }}</option>@endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">ETD <span class="text-danger">*</span></label>
                    <input type="date" name="etd" class="form-control" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">ETA</label>
                    <input type="date" name="eta" class="form-control">
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-white py-3"><h5 class="mb-0 fw-semibold"><i class="bi bi-box-seam me-2 text-primary"></i>Container Details</h5></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3">
                    <label class="form-label fw-medium">Container Size <span class="text-danger">*</span></label>
                    <select name="container_size" class="form-select" required>
                        <option value="20">20' GP</option>
                        <option value="40">40' GP</option>
                        <option value="40hc">40' HC</option>
                        <option value="45">45' HC</option>
                        <option value="20rf">20' Reefer</option>
                        <option value="40rf">40' Reefer</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">No. of Containers <span class="text-danger">*</span></label>
                    <input type="number" name="no_of_containers" class="form-control" value="1" min="1" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Container Type</label>
                    <select name="container_type" class="form-select">
                        <option value="dry">Dry</option>
                        <option value="reefer">Reefer</option>
                        <option value="open_top">Open Top</option>
                        <option value="flat_rack">Flat Rack</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Commodity Description</label>
                    <input type="text" name="commodity_description" class="form-control" placeholder="As per BL">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Gross Weight (MT)</label>
                    <input type="number" step="0.001" name="gross_weight" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Volume (CBM)</label>
                    <input type="number" step="0.001" name="volume" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Marks & Numbers</label>
                    <input type="text" name="marks_numbers" class="form-control">
                </div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">Special Instructions</label>
                    <input type="text" name="special_instructions" class="form-control">
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2 mb-5">
        <button type="submit" name="action" value="draft" class="btn btn-outline-secondary px-4">Save as Draft</button>
        <button type="submit" name="action" value="request" class="btn btn-primary px-4"><i class="bi bi-send me-1"></i> Request Booking</button>
    </div>
</form>
@endsection