@extends('layouts.app')

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

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

<form action="{{ route('freight.ocean.store') }}" method="POST" id="oceanBookingForm">
    @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

    <ul class="nav nav-tabs mb-4" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#parties">Shipper / Consignee</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#routing">Routing & Container</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#cargo">Cargo Details</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#charges">Freight & Charges</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#instructions">Instructions</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="parties">
            <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 Details</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <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="">Search shipper...</option>
                                @foreach($shippers ?? [] as $shipper)
                                    <option value="{{ $shipper->id }}" data-address="{{ $shipper->address ?? '' }}">{{ $shipper->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <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="">Search consignee...</option>
                                @foreach($consignees ?? [] as $consignee)
                                    <option value="{{ $consignee->id }}">{{ $consignee->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Notify Party</label>
                            <select name="notify_party_id" class="form-select select2-search">
                                <option value="">Select if different from consignee</option>
                                @foreach($consignees ?? [] as $np)
                                    <option value="{{ $np->id }}">{{ $np->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6">
                            <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 class="col-md-6">
                            <label class="form-label fw-medium">Customer Reference</label>
                            <input type="text" name="customer_reference" class="form-control" placeholder="PO Number / Ref">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-medium">Freight Terms <span class="text-danger">*</span></label>
                            <select name="freight_terms" class="form-select" required>
                                <option value="collect">Freight Collect</option>
                                <option value="prepaid">Freight Prepaid</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="routing">
            <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-map me-2 text-primary"></i>Routing & Container Details</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label fw-medium">Port of Loading <span class="text-danger">*</span></label>
                            <select name="port_of_loading_id" class="form-select select2-search" required>
                                <option value="">Select port...</option>
                                @foreach($ports ?? [] as $port)
                                    <option value="{{ $port->id }}">{{ $port->name }} ({{ $port->code }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-medium">Port of Discharge <span class="text-danger">*</span></label>
                            <select name="port_of_discharge_id" class="form-select select2-search" required>
                                <option value="">Select port...</option>
                                @foreach($ports ?? [] as $port)
                                    <option value="{{ $port->id }}">{{ $port->name }} ({{ $port->code }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-medium">Shipping Line <span class="text-danger">*</span></label>
                            <select name="shipping_line_id" class="form-select select2-search" required>
                                <option value="">Select shipping line...</option>
                                @foreach($shippingLines ?? [] as $line)
                                    <option value="{{ $line->id }}">{{ $line->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Vessel Name</label>
                            <input type="text" name="vessel_name" class="form-control" placeholder="e.g. MSC Gulsun">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Voyage Number</label>
                            <input type="text" name="voyage_number" class="form-control" placeholder="e.g. FE421W">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">ETD</label>
                            <input type="date" name="etd" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">ETA</label>
                            <input type="date" name="eta" class="form-control">
                        </div>
                        <hr class="my-2">
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Mode <span class="text-danger">*</span></label>
                            <select name="mode" class="form-select" required>
                                <option value="FCL">FCL (Full Container)</option>
                                <option value="LCL">LCL (Less Container)</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Container Type <span class="text-danger">*</span></label>
                            <select name="container_type_id" class="form-select" required>
                                <option value="">Select type...</option>
                                @foreach($containerTypes ?? [] as $ct)
                                    <option value="{{ $ct->id }}">{{ $ct->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Quantity <span class="text-danger">*</span></label>
                            <input type="number" name="container_quantity" class="form-control" value="1" min="1" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Container Number</label>
                            <input type="text" name="container_number" class="form-control" placeholder="e.g. MSCU1234567">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="cargo">
            <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-6">
                            <label class="form-label fw-medium">Commodity Description <span class="text-danger">*</span></label>
                            <textarea name="commodity" class="form-control" rows="2" placeholder="Describe the cargo..." required></textarea>
                        </div>
                        <div class="col-md-3">
                            <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-3">
                            <label class="form-label fw-medium">Currency</label>
                            <select name="currency" class="form-select">
                                @foreach(['USD', 'EUR', 'GBP', 'INR', 'AED'] as $c)
                                    <option value="{{ $c }}" {{ $c == 'USD' ? 'selected' : '' }}>{{ $c }}</option>
                                @endforeach
                            </select>
                        </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.001" name="gross_weight" class="form-control" required>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Net Weight (KGS)</label>
                            <input type="number" step="0.001" name="net_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">Package Count</label>
                            <input type="number" name="package_count" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Package Type</label>
                            <select name="package_type" class="form-select">
                                <option value="carton">Carton</option>
                                <option value="pallet">Pallet</option>
                                <option value="crate">Crate</option>
                                <option value="drum">Drum</option>
                                <option value="bundle">Bundle</option>
                                <option value="bag">Bag</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check form-switch mt-4">
                                <input class="form-check-input" type="checkbox" name="is_dg" value="1" id="isDg">
                                <label class="form-check-label" for="isDg">Dangerous Goods (IMDG)</label>
                            </div>
                            <div class="form-check form-switch mt-2">
                                <input class="form-check-input" type="checkbox" name="is_reefer" value="1" id="isReefer">
                                <label class="form-check-label" for="isReefer">Reefer Container Required</label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check form-switch mt-4">
                                <input class="form-check-input" type="checkbox" name="is_ood" value="1" id="isOod">
                                <label class="form-check-label" for="isOod">Out of Gauge Cargo</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="charges">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                    <h5 class="mb-0 fw-semibold"><i class="bi bi-currency-dollar me-2 text-primary"></i>Freight & Charges</h5>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="addChargeBtn"><i class="bi bi-plus-lg me-1"></i>Add Charge</button>
                </div>
                <div class="card-body p-0">
                    <table class="table table-bordered mb-0" id="chargesTable">
                        <thead class="bg-light">
                            <tr>
                                <th class="px-3">Charge Type</th>
                                <th class="px-3">Description</th>
                                <th class="px-3">Amount</th>
                                <th class="px-3">Currency</th>
                                <th class="px-3">Billed To</th>
                                <th class="px-3 text-center" style="width:50px;"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="px-3">
                                    <select name="charges[0][type]" class="form-select form-select-sm">
                                        <option value="ocean_freight">Ocean Freight</option>
                                        <option value="thc">THC (Terminal Handling)</option>
                                        <option value="documentation">Documentation</option>
                                        <option value="insurance">Insurance</option>
                                        <option value="customs">Customs</option>
                                        <option value="other">Other</option>
                                    </select>
                                </td>
                                <td class="px-3"><input type="text" name="charges[0][description]" class="form-control form-control-sm" placeholder="Description"></td>
                                <td class="px-3"><input type="number" step="0.01" name="charges[0][amount]" class="form-control form-control-sm charge-amount" value="0"></td>
                                <td class="px-3">
                                    <select name="charges[0][currency]" class="form-select form-select-sm">
                                        @foreach(['USD', 'INR'] as $c)<option value="{{ $c }}">{{ $c }}</option>@endforeach
                                    </select>
                                </td>
                                <td class="px-3">
                                    <select name="charges[0][billed_to]" class="form-select form-select-sm">
                                        <option value="shipper">Shipper</option>
                                        <option value="consignee">Consignee</option>
                                    </select>
                                </td>
                                <td class="px-3 text-center"><button type="button" class="btn btn-sm btn-outline-danger remove-charge"><i class="bi bi-trash"></i></button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-footer bg-transparent">
                    <div class="d-flex justify-content-end">
                        <table class="table table-sm w-auto">
                            <tr><td class="text-muted">Total Freight:</td><td class="text-end fw-bold" id="totalFreight">0.00</td></tr>
                        </table>
                    </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-receipt me-2 text-primary"></i>Carrier Rate</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Freight Rate</label>
                            <input type="number" step="0.01" name="freight_rate" class="form-control" id="freightRate">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Total Freight</label>
                            <input type="number" step="0.01" name="total_freight" class="form-control" id="totalFreightInput" readonly>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="instructions">
            <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-chat-text me-2 text-primary"></i>Special Instructions</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label fw-medium">Handling Instructions</label>
                        <textarea name="handling_instructions" class="form-control" rows="3" placeholder="Special handling requirements..."></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Customs Instructions</label>
                        <textarea name="customs_instructions" class="form-control" rows="3" placeholder="Customs-related instructions..."></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-medium">Internal Remarks</label>
                        <textarea name="remarks" class="form-control" rows="3" placeholder="Internal notes..."></textarea>
                    </div>
                </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="confirm" class="btn btn-primary px-4"><i class="bi bi-check-lg me-1"></i>Confirm Booking</button>
    </div>
</form>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('.select2-search').select2({ theme: 'bootstrap-5', width: '100%' });
    var chargeIndex = 1;
    $('#addChargeBtn').on('click', function() {
        var row = '<tr><td class="px-3"><select name="charges[' + chargeIndex + '][type]" class="form-select form-select-sm"><option value="ocean_freight">Ocean Freight</option><option value="thc">THC</option><option value="documentation">Documentation</option><option value="other">Other</option></select></td><td class="px-3"><input type="text" name="charges[' + chargeIndex + '][description]" class="form-control form-control-sm"></td><td class="px-3"><input type="number" step="0.01" name="charges[' + chargeIndex + '][amount]" class="form-control form-control-sm charge-amount" value="0"></td><td class="px-3"><select name="charges[' + chargeIndex + '][currency]" class="form-select form-select-sm"><option value="USD">USD</option><option value="INR">INR</option></select></td><td class="px-3"><select name="charges[' + chargeIndex + '][billed_to]" class="form-select form-select-sm"><option value="shipper">Shipper</option><option value="consignee">Consignee</option></select></td><td class="px-3 text-center"><button type="button" class="btn btn-sm btn-outline-danger remove-charge"><i class="bi bi-trash"></i></button></td></tr>';
        $('#chargesTable tbody').append(row);
        chargeIndex++;
    });
    $(document).on('click', '.remove-charge', function() { $(this).closest('tr').remove(); calculateTotal(); });
    $(document).on('input', '.charge-amount', function() { calculateTotal(); });
    function calculateTotal() {
        var total = 0;
        $('.charge-amount').each(function() { total += parseFloat($(this).val()) || 0; });
        $('#totalFreight').text(total.toFixed(2));
    }
});
</script>
@endpush