@extends('layouts.app')
@section('title', 'New Air Booking')
@section('breadcrumbs')
<nav aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="{{ route('freight.air.index') }}">Air Freight</a></li><li class="breadcrumb-item active">New Booking</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 Air Booking</h1><p class="text-muted mb-0">Create a new air freight booking</p></div>
    <a href="{{ route('freight.air.index') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left me-1"></i>Back</a>
</div>
<form action="{{ route('freight.air.store') }}" method="POST" id="airBookingForm">
    @csrf
    @if ($errors->any())<div class="alert alert-danger alert-dismissible fade show"><i class="bi bi-exclamation-triangle me-2"></i><ul class="mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</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-building me-2 text-primary"></i>Shipper & Consignee</h5></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4"><label class="form-label fw-medium">Shipper <span class="text-danger">*</span></label><select name="shipper_id" class="form-select select2-search" required><option value="">Select...</option>@foreach($shippers ?? [] as $s)<option value="{{ $s->id }}">{{ $s->name }}</option>@endforeach</select></div>
                <div class="col-md-4"><label class="form-label fw-medium">Consignee <span class="text-danger">*</span></label><select name="consignee_id" class="form-select select2-search" required><option value="">Select...</option>@foreach($consignees ?? [] as $c)<option value="{{ $c->id }}">{{ $c->name }}</option>@endforeach</select></div>
                <div class="col-md-4"><label class="form-label fw-medium">Booking Date <span class="text-danger">*</span></label><input type="date" name="booking_date" class="form-control" value="{{ date('Y-m-d') }}" required></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-airplane me-2 text-primary"></i>Route & Airline</h5></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-3"><label class="form-label fw-medium">Airline <span class="text-danger">*</span></label><select name="airline_id" class="form-select select2-search" required><option value="">Select...</option>@foreach($airlines ?? [] as $al)<option value="{{ $al->id }}">{{ $al->name }}</option>@endforeach</select></div>
                <div class="col-md-3"><label class="form-label fw-medium">AWB Number</label><input type="text" name="awb_number" class="form-control" placeholder="e.g. 176-12345678"></div>
                <div class="col-md-3"><label class="form-label fw-medium">Origin Airport <span class="text-danger">*</span></label><select name="origin_port_id" class="form-select select2-search" required><option value="">Select...</option>@foreach($ports ?? [] as $p)<option value="{{ $p->id }}">{{ $p->name }} ({{ $p->code }})</option>@endforeach</select></div>
                <div class="col-md-3"><label class="form-label fw-medium">Destination Airport <span class="text-danger">*</span></label><select name="destination_port_id" class="form-select select2-search" required><option value="">Select...</option>@foreach($ports ?? [] as $p)<option value="{{ $p->id }}">{{ $p->name }} ({{ $p->code }})</option>@endforeach</select></div>
                <div class="col-md-3"><label class="form-label fw-medium">ETD</label><input type="datetime-local" name="etd" class="form-control"></div>
                <div class="col-md-3"><label class="form-label fw-medium">ETA</label><input type="datetime-local" name="eta" class="form-control"></div>
                <div class="col-md-3"><label class="form-label fw-medium">Flight Number</label><input type="text" name="flight_number" class="form-control" placeholder="e.g. AI-302"></div>
                <div class="col-md-3"><label class="form-label fw-medium">Service Type</label><select name="service_type" class="form-select"><option value="standard">Standard</option><option value="express">Express</option><option value="economy">Economy</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-box-seam me-2 text-primary"></i>Cargo Details</h5></div>
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-4"><label class="form-label fw-medium">Commodity <span class="text-danger">*</span></label><textarea name="commodity" class="form-control" rows="2" required placeholder="Describe cargo..."></textarea></div>
                <div class="col-md-4"><label class="form-label fw-medium">HS Code</label><input type="text" name="hs_code" class="form-control" placeholder="e.g. 8471.30"></div>
                <div class="col-md-4"><label class="form-label fw-medium">No. of Pieces <span class="text-danger">*</span></label><input type="number" name="piece_count" class="form-control" value="1" min="1" required></div>
                <div class="col-md-3"><label class="form-label fw-medium">Gross Weight (KGS) <span class="text-danger">*</span></label><input type="number" step="0.01" name="gross_weight" class="form-control" required></div>
                <div class="col-md-3"><label class="form-label fw-medium">Chargeable Weight (KGS)</label><input type="number" step="0.01" name="chargeable_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">Freight Rate (KGS)</label><input type="number" step="0.01" name="freight_rate" class="form-control"></div>
                <div class="col-md-3"><label class="form-label fw-medium">Declared Value</label><input type="number" step="0.01" name="declared_value" class="form-control"></div>
                <div class="col-md-3"><label class="form-label fw-medium">Currency</label><select name="currency" class="form-select"><option value="USD">USD</option><option value="INR">INR</option><option value="EUR">EUR</option></select></div>
                <div class="col-md-3">
                    <label class="form-label fw-medium">&nbsp;</label>
                    <div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="is_dg" value="1" id="isDg"><label class="form-check-label" for="isDg">Dangerous Goods</label></div>
                </div>
                <div class="col-md-12"><label class="form-label fw-medium">Special Instructions</label><textarea name="special_instructions" class="form-control" rows="2" placeholder="Handling instructions..."></textarea></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 Draft</button>
        <button type="submit" name="action" value="confirm" class="btn btn-primary px-4"><i class="bi bi-check-lg me-1"></i>Confirm</button>
    </div>
</form>
@endsection
@push('scripts')
<script>$(document).ready(function() { $('.select2-search').select2({ theme: 'bootstrap-5', width: '100%' }); });</script>
@endpush