@extends('layouts.app')
@section('title', 'Create Import Order')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('import.orders.index') }}">Import Orders</a></li>
    <li class="breadcrumb-item active">Create</li>
@endsection

@section('content')
<form action="{{ route('import.orders.store') }}" method="POST" id="importOrderForm">
    @csrf
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div>
            <h4 class="fw-bold mb-1" style="font-size:1.3rem;">Create Import Purchase Order</h4>
            <p class="text-muted mb-0" style="font-size:0.85rem;">Fill in the details below to create a new import order</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('import.orders.index') }}" class="btn btn-outline-secondary" style="border-radius:8px;">Cancel</a>
            <button type="button" class="btn btn-outline-primary" style="border-radius:8px;" onclick="document.getElementById('importOrderForm').action+='?action=draft';this.form.submit();">
                <i class="bi bi-save me-1"></i>Save as Draft
            </button>
            <button type="submit" class="btn btn-primary" style="border-radius:8px;">
                <i class="bi bi-check-lg me-1"></i>Create Order
            </button>
        </div>
    </div>

    {{-- Supplier Details --}}
    <x-form-section title="Supplier Details" icon="bi-building" subtitle="Select and verify supplier information">
        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label fw-medium">Supplier <span class="text-danger">*</span></label>
                <x-search-dropdown name="supplier_id" placeholder="Search supplier..." url="{{ route('api.suppliers.search') }}" required />
            </div>
            <div class="col-md-4">
                <label class="form-label fw-medium">Supplier Contact Person</label>
                <input type="text" name="contact_person" class="form-control" value="{{ old('contact_person') }}" style="border-radius:8px;">
            </div>
            <div class="col-md-4">
                <label class="form-label fw-medium">Supplier Reference</label>
                <input type="text" name="supplier_reference" class="form-control" value="{{ old('supplier_reference') }}" placeholder="e.g., PO-SUP-2026-001" style="border-radius:8px;">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-medium">Origin Country <span class="text-danger">*</span></label>
                <select name="origin_country" class="form-select" style="border-radius:8px;" required>
                    <option value="">Select Country</option>
                    @foreach(['China','Germany','Japan','South Korea','Taiwan','USA','Italy','Thailand','Vietnam','Indonesia','Malaysia','Singapore','Hong Kong'] as $country)
                        <option value="{{ $country }}" {{ old('origin_country') == $country ? 'selected' : '' }}>{{ $country }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-medium">Payment Terms <span class="text-danger">*</span></label>
                <select name="payment_terms" class="form-select" style="border-radius:8px;" required>
                    <option value="">Select Terms</option>
                    @foreach(['LC at Sight','LC 30 Days','LC 60 Days','LC 90 Days','TT Advance','TT 30 Days','TT 60 Days','DA 30 Days','DA 60 Days','DA 90 Days','DP at Sight'] as $term)
                        <option value="{{ $term }}" {{ old('payment_terms') == $term ? 'selected' : '' }}>{{ $term }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-medium">Incoterms <span class="text-danger">*</span></label>
                <select name="incoterms" class="form-select" style="border-radius:8px;" required>
                    <option value="">Select</option>
                    @foreach(['FOB','CIF','CFR','EXW','FCA','FAS','CPT','CIP','DAP','DPU','DDP'] as $term)
                        <option value="{{ $term }}" {{ old('incoterms') == $term ? 'selected' : '' }}>{{ $term }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-medium">Currency <span class="text-danger">*</span></label>
                <select name="currency" class="form-select" style="border-radius:8px;" required>
                    @foreach(['USD','EUR','GBP','JPY','CNY','AED','SGD','HKD','KRW','THB'] as $curr)
                        <option value="{{ $curr }}" {{ old('currency', 'USD') == $curr ? 'selected' : '' }}>{{ $curr }}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </x-form-section>

    {{-- Shipment Details --}}
    <x-form-section title="Shipment Details" icon="bi-ship" subtitle="Port and shipping information">
        <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>
                <input type="text" name="port_of_loading" class="form-control" value="{{ old('port_of_loading') }}" placeholder="e.g., Shanghai, China" style="border-radius:8px;" required>
            </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" class="form-select" style="border-radius:8px;" required>
                    <option value="">Select Port</option>
                    @foreach(['JNPT (Nhava Sheva)','Mumbai (Dock)','Chennai','Kolkata','Cochin','Mundra','Ennore','Tuticorin','Kandla','Visakhapatnam'] as $port)
                        <option value="{{ $port }}" {{ old('port_of_discharge') == $port ? 'selected' : '' }}>{{ $port }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label fw-medium">Destination Port</label>
                <input type="text" name="destination_port" class="form-control" value="{{ old('destination_port') }}" placeholder="e.g., JNPT, Navi Mumbai" style="border-radius:8px;">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-medium">Container Type</label>
                <select name="container_type" class="form-select" style="border-radius:8px;">
                    <option value="">Select</option>
                    <option value="20ft" {{ old('container_type') == '20ft' ? 'selected' : '' }}>20ft Container</option>
                    <option value="40ft" {{ old('container_type') == '40ft' ? 'selected' : '' }}>40ft Container</option>
                    <option value="40ft_hq" {{ old('container_type') == '40ft_hq' ? 'selected' : '' }}>40ft HC Container</option>
                    <option value="45ft_hq" {{ old('container_type') == '45ft_hq' ? 'selected' : '' }}>45ft HC Container</option>
                    <option value="lcl" {{ old('container_type') == 'lcl' ? 'selected' : '' }}>LCL</option>
                    <option value="break_bulk" {{ old('container_type') == 'break_bulk' ? 'selected' : '' }}>Break Bulk</option>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label fw-medium">Container Quantity</label>
                <input type="number" name="container_qty" class="form-control" value="{{ old('container_qty', 1) }}" min="1" style="border-radius:8px;">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-medium">Expected ETD</label>
                <input type="date" name="expected_etd" class="form-control" value="{{ old('expected_etd') }}" style="border-radius:8px;">
            </div>
            <div class="col-md-3">
                <label class="form-label fw-medium">Expected ETA</label>
                <input type="date" name="expected_eta" class="form-control" value="{{ old('expected_eta') }}" style="border-radius:8px;">
            </div>
            <div class="col-md-4">
                <label class="form-label fw-medium">Shipping Line</label>
                <input type="text" name="shipping_line" class="form-control" value="{{ old('shipping_line') }}" placeholder="e.g., Maersk, MSC" style="border-radius:8px;">
            </div>
            <div class="col-md-4">
                <label class="form-label fw-medium">Vessel / Flight No.</label>
                <input type="text" name="vessel_name" class="form-control" value="{{ old('vessel_name') }}" style="border-radius:8px;">
            </div>
            <div class="col-md-4">
                <label class="form-label fw-medium">Booking Reference</label>
                <input type="text" name="booking_reference" class="form-control" value="{{ old('booking_reference') }}" style="border-radius:8px;">
            </div>
        </div>
    </x-form-section>

    {{-- Line Items --}}
    <x-form-section title="Line Items" icon="bi-list-check" subtitle="Add items to this import order" id="lineItemsSection">
        <div class="table-responsive">
            <table class="table align-middle" id="lineItemsTable">
                <thead class="bg-light">
                    <tr>
                        <th style="width:40px;">#</th>
                        <th style="min-width:200px;">Product / Description <span class="text-danger">*</span></th>
                        <th style="min-width:120px;">HS Code</th>
                        <th style="width:100px;">Unit <span class="text-danger">*</span></th>
                        <th style="width:100px;">Quantity <span class="text-danger">*</span></th>
                        <th style="width:120px;">Unit Price <span class="text-danger">*</span></th>
                        <th style="width:130px;">Amount</th>
                        <th style="width:100px;">Net Weight (kg)</th>
                        <th style="width:100px;">Gross Weight (kg)</th>
                        <th style="width:50px;"></th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="line-item-row" data-index="0">
                        <td class="text-muted">1</td>
                        <td>
                            <input type="text" name="items[0][description]" class="form-control form-control-sm" placeholder="Item description" style="border-radius:6px;" required>
                        </td>
                        <td>
                            <input type="text" name="items[0][hs_code]" class="form-control form-control-sm" placeholder="HS Code" style="border-radius:6px;">
                        </td>
                        <td>
                            <select name="items[0][unit]" class="form-select form-select-sm" style="border-radius:6px;" required>
                                <option value="">Unit</option>
                                @foreach(['PCS','NOS','KGS','GMS','MTR','LTR','SET','BOX','PKG','SQM','CBM','TON'] as $u)
                                    <option value="{{ $u }}">{{ $u }}</option>
                                @endforeach
                            </select>
                        </td>
                        <td><input type="number" name="items[0][quantity]" class="form-control form-control-sm line-qty" min="0" step="0.01" style="border-radius:6px;" required></td>
                        <td><input type="number" name="items[0][unit_price]" class="form-control form-control-sm line-price" min="0" step="0.01" style="border-radius:6px;" required></td>
                        <td class="line-amount fw-medium">0.00</td>
                        <td><input type="number" name="items[0][net_weight]" class="form-control form-control-sm" min="0" step="0.01" style="border-radius:6px;"></td>
                        <td><input type="number" name="items[0][gross_weight]" class="form-control form-control-sm" min="0" step="0.01" style="border-radius:6px;"></td>
                        <td><button type="button" class="btn btn-sm btn-outline-danger remove-item"><i class="bi bi-x"></i></button></td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr class="bg-light">
                        <td colspan="6" class="text-end fw-semibold">Total:</td>
                        <td class="fw-bold text-primary" id="totalAmount">0.00</td>
                        <td colspan="3"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <button type="button" class="btn btn-outline-primary btn-sm mt-2" id="addItemRow" style="border-radius:8px;">
            <i class="bi bi-plus-lg me-1"></i>Add Item
        </button>
    </x-form-section>

    {{-- Special Requirements --}}
    <x-form-section title="Special Requirements" icon="bi-exclamation-circle" subtitle="Additional notes and requirements" :collapsed="true">
        <div class="row g-3">
            <div class="col-md-6">
                <label class="form-label fw-medium">Special Instructions</label>
                <textarea name="special_instructions" class="form-control" rows="3" placeholder="Any special handling or shipping instructions..." style="border-radius:8px;">{{ old('special_instructions') }}</textarea>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-medium">Inspection Requirements</label>
                <textarea name="inspection_requirements" class="form-control" rows="3" placeholder="Pre-shipment inspection details, certificates required..." style="border-radius:8px;">{{ old('inspection_requirements') }}</textarea>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-medium">Documents Required</label>
                <div class="row g-2">
                    @foreach(['Commercial Invoice','Packing List','Bill of Lading','Certificate of Origin','Inspection Certificate','Insurance Certificate','Phytosanitary Certificate','Fumigation Certificate'] as $doc)
                        <div class="col-md-6">
                            <div class="form-check">
                                <input type="checkbox" name="required_documents[]" value="{{ $doc }}" class="form-check-input" id="doc_{{ Str::slug($doc) }}">
                                <label class="form-check-label" for="doc_{{ Str::slug($doc) }}" style="font-size:0.85rem;">{{ $doc }}</label>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            <div class="col-md-6">
                <label class="form-label fw-medium">Internal Remarks</label>
                <textarea name="internal_remarks" class="form-control" rows="3" placeholder="Internal notes (not visible to supplier)" style="border-radius:8px;">{{ old('internal_remarks') }}</textarea>
            </div>
        </div>
    </x-form-section>
</form>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let itemIndex = 1;
    const tbody = document.querySelector('#lineItemsTable tbody');

    document.getElementById('addItemRow').addEventListener('click', function() {
        const row = tbody.querySelector('.line-item-row').cloneNode(true);
        row.dataset.index = itemIndex;
        row.querySelectorAll('input, select').forEach(el => {
            el.name = el.name.replace(/\[\d+\]/, '[' + itemIndex + ']');
            if (el.type !== 'hidden') el.value = '';
        });
        row.querySelector('td:first-child').textContent = itemIndex + 1;
        row.querySelector('.line-amount').textContent = '0.00';
        tbody.appendChild(row);
        itemIndex++;
        bindRowEvents(row);
    });

    function bindRowEvents(row) {
        row.querySelector('.remove-item').addEventListener('click', function() {
            if (tbody.querySelectorAll('.line-item-row').length > 1) {
                row.remove();
                recalculate();
                tbody.querySelectorAll('.line-item-row').forEach((r, i) => {
                    r.querySelector('td:first-child').textContent = i + 1;
                });
            }
        });
        row.querySelectorAll('.line-qty, .line-price').forEach(input => {
            input.addEventListener('input', function() {
                const tr = this.closest('tr');
                const qty = parseFloat(tr.querySelector('.line-qty').value) || 0;
                const price = parseFloat(tr.querySelector('.line-price').value) || 0;
                tr.querySelector('.line-amount').textContent = (qty * price).toFixed(2);
                recalculate();
            });
        });
    }

    function recalculate() {
        let total = 0;
        tbody.querySelectorAll('.line-amount').forEach(td => {
            total += parseFloat(td.textContent) || 0;
        });
        document.getElementById('totalAmount').textContent = total.toFixed(2);
    }

    bindRowEvents(tbody.querySelector('.line-item-row'));
});
</script>
@endpush