@extends('layouts.app')

@section('title', 'New Export Order')

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

<form action="{{ route('export.orders.store') }}" method="POST" id="orderForm">
    @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="#orderDetails">Order Details</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#lineItems">Line Items</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#shipmentPlanning">Shipment Planning</a></li>
        <li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#documentation">Documentation</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane fade show active" id="orderDetails">
            <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-person me-2 text-primary"></i>Customer & Order Info</h5></div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Reference Quotation</label>
                            <select name="quotation_id" class="form-select" id="quotationSelect">
                                <option value="">Select Quotation</option>
                                @foreach($quotations as $q)
                                    <option value="{{ $q->id }}" data-inquiry="{{ $q->inquiry_id }}">{{ $q->quotation_number }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Customer <span class="text-danger">*</span></label>
                            <select name="customer_id" class="form-select" required id="customerSelect">
                                <option value="">Select Customer</option>
                                @foreach($customers as $c)
                                    <option value="{{ $c->id }}">{{ $c->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Order 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">Buyer's PO Number</label>
                            <input type="text" name="buyer_po_number" class="form-control" placeholder="PO Ref">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Currency</label>
                            <select name="currency" class="form-select">
                                @foreach(['USD', 'EUR', 'GBP', 'AED', 'INR'] as $c)
                                    <option value="{{ $c }}" {{ $c == 'USD' ? 'selected' : '' }}>{{ $c }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Payment Terms</label>
                            <select name="payment_terms" class="form-select">
                                @foreach(['TT Advance', 'TT Against Documents', 'LC At Sight', 'LC Usance', 'DP'] as $t)
                                    <option value="{{ $t }}">{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Commodity</label>
                            <select name="commodity_id" class="form-select">
                                <option value="">Select</option>
                                @foreach($commodities as $comm)
                                    <option value="{{ $comm->id }}">{{ $comm->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Incoterm</label>
                            <select name="incoterm" class="form-select">
                                @foreach(['FOB', 'CIF', 'CFR', 'EXW', 'FCA'] as $t)
                                    <option value="{{ $t }}">{{ $t }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="lineItems">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3 d-flex justify-content-between">
                    <h5 class="mb-0 fw-semibold"><i class="bi bi-list-ul me-2 text-primary"></i>Order Items</h5>
                    <button type="button" class="btn btn-sm btn-outline-primary" id="addOrderItemBtn"><i class="bi bi-plus-lg me-1"></i>Add</button>
                </div>
                <div class="card-body p-0">
                    @include('export.orders.partials._items')
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="shipmentPlanning">
            <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>Shipment Planning</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</label>
                            <select name="port_of_loading_id" class="form-select">
                                <option value="">Select</option>
                                @foreach($ports as $port)
                                    <option value="{{ $port->id }}">{{ $port->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-medium">Port of Discharge</label>
                            <select name="port_of_discharge_id" class="form-select">
                                <option value="">Select</option>
                                @foreach($ports as $port)
                                    <option value="{{ $port->id }}">{{ $port->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-medium">Preferred Shipping Line</label>
                            <select name="shipping_line_id" class="form-select">
                                <option value="">Select</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">Shipment Type</label>
                            <select name="shipment_type" class="form-select">
                                <option value="fcl">FCL</option>
                                <option value="lcl">LCL</option>
                                <option value="bulk">Bulk</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">Container Size</label>
                            <select name="container_size" class="form-select">
                                <option value="20">20' GP</option>
                                <option value="40">40' GP</option>
                                <option value="40hc">40' HC</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">No. of Containers</label>
                            <input type="number" name="no_of_containers" class="form-control" value="1" min="1">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">ETD (Expected)</label>
                            <input type="date" name="etd" class="form-control">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label fw-medium">ETA (Expected)</label>
                            <input type="date" name="eta" class="form-control">
                        </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">Net Weight (MT)</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>
                </div>
            </div>
        </div>

        <div class="tab-pane fade" id="documentation">
            <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-file-earmark me-2 text-primary"></i>Required Documents</h5></div>
                <div class="card-body">
                    <div class="row g-3">
                        @foreach(['Commercial Invoice', 'Packing List', 'Certificate of Origin', 'Bill of Lading', 'Shipping Bill', 'Insurance Certificate', 'Fumigation Certificate', 'Phytosanitary Certificate'] as $doc)
                        <div class="col-md-4">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="required_documents[]" value="{{ Str::slug($doc) }}" id="doc_{{ Str::slug($doc) }}" checked>
                                <label class="form-check-label" for="doc_{{ Str::slug($doc) }}">{{ $doc }}</label>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="row g-3 mt-2">
                        <div class="col-md-12">
                            <label class="form-label fw-medium">Special Document Requirements</label>
                            <textarea name="special_doc_requirements" class="form-control" rows="2" placeholder="Any additional documents or special instructions..."></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label fw-medium">Internal Remarks</label>
                    <textarea name="remarks" class="form-control" rows="3"></textarea>
                </div>
                <div class="col-md-6 text-end">
                    <table class="table table-sm w-auto ms-auto">
                        <tr><td class="text-muted">Subtotal:</td><td class="text-end fw-medium" id="subtotal">0.00</td></tr>
                        <tr><td class="text-muted">Tax:</td><td class="text-end fw-medium" id="taxAmount">0.00</td></tr>
                        <tr><td class="text-muted fw-bold">Total:</td><td class="text-end fw-bold fs-5" id="grandTotal">0.00</td></tr>
                    </table>
                </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 Order</button>
    </div>
</form>
@endsection