@extends('layouts.app')
@section('title', 'Import Order ' . ($order->order_number ?? ''))

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

@section('content')
<div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-2">
    <div class="d-flex align-items-center">
        <div>
            <div class="d-flex align-items-center gap-2 mb-1">
                <h4 class="fw-bold mb-0" style="font-size:1.3rem;">{{ $order->order_number ?? 'IO-2026-0001' }}</h4>
                <x-status-badge :status="$order->status ?? 'approved'" />
            </div>
            <p class="text-muted mb-0" style="font-size:0.85rem;">Created {{ ($order->created_at ?? now())->format('d M Y, h:i A') }}</p>
        </div>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('import.orders.edit', $order ?? 1) }}" class="btn btn-outline-primary btn-sm" style="border-radius:8px;"><i class="bi bi-pencil me-1"></i>Edit</a>
        <button class="btn btn-outline-secondary btn-sm" style="border-radius:8px;"><i class="bi bi-printer me-1"></i>Print</button>
        <div class="dropdown">
            <button class="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" style="border-radius:8px;">Actions</button>
            <ul class="dropdown-menu dropdown-menu-end" style="border-radius:10px;">
                <li><a class="dropdown-item" href="#"><i class="bi bi-send me-2"></i>Send to Supplier</a></li>
                <li><a class="dropdown-item" href="#"><i class="bi bi-file-earmark me-2"></i>Generate PO PDF</a></li>
                <li><a class="dropdown-item" href="#"><i class="bi bi-truck me-2"></i>Create Shipment</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item text-danger" href="#"><i class="bi bi-x-circle me-2"></i>Cancel Order</a></li>
            </ul>
        </div>
    </div>
</div>

{{-- Overview Cards --}}
<div class="row g-3 mb-4">
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-body p-3">
                <p class="text-muted mb-1" style="font-size:0.75rem;text-transform:uppercase;">Supplier</p>
                <p class="fw-semibold mb-0">{{ $order->supplier->name ?? 'M/s Global Trading Co.' }}</p>
                <small class="text-muted">{{ $order->supplier->country ?? 'China' }}</small>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-body p-3">
                <p class="text-muted mb-1" style="font-size:0.75rem;text-transform:uppercase;">Total Value</p>
                <p class="fw-bold text-primary mb-0" style="font-size:1.2rem;">USD {{ number_format($order->total_value ?? 125000, 2) }}</p>
                <small class="text-muted">{{ $order->currency ?? 'USD' }} | {{ $order->incoterms ?? 'FOB' }}</small>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-body p-3">
                <p class="text-muted mb-1" style="font-size:0.75rem;text-transform:uppercase;">Shipment</p>
                <p class="fw-semibold mb-0">{{ $order->items_count ?? 5 }} Items</p>
                <small class="text-muted">{{ $order->container_qty ?? 2 }} x {{ $order->container_type ?? '40ft' }}</small>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-body p-3">
                <p class="text-muted mb-1" style="font-size:0.75rem;text-transform:uppercase;">ETA</p>
                <p class="fw-semibold mb-0">{{ ($order->expected_eta ?? now()->addDays(30))->format('d M Y') }}</p>
                <small class="text-muted">ETD: {{ ($order->expected_etd ?? now())->format('d M Y') }}</small>
            </div>
        </div>
    </div>
</div>

{{-- Tabs --}}
<ul class="nav nav-pills mb-4 p-1 bg-light rounded-3 d-inline-flex" style="border-radius:12px !important;" role="tablist">
    @foreach(['overview' => 'Overview', 'items' => 'Items', 'shipments' => 'Shipments', 'bills_of_entry' => 'Bills of Entry', 'financial' => 'Financial Summary', 'documents' => 'Documents'] as $key => $label)
        <li class="nav-item">
            <button class="nav-link {{ $loop->first ? 'active' : '' }} px-4 py-2" data-bs-toggle="pill" data-bs-target="#tab-{{ $key }}" type="button" style="border-radius:8px;font-size:0.85rem;">
                {{ $label }}
                @if($key === 'bills_of_entry')
                    <span class="badge bg-primary-subtle text-primary ms-1">{{ $order->bills_of_entry_count ?? 3 }}</span>
                @endif
            </button>
        </li>
    @endforeach
</ul>

<div class="tab-content">
    {{-- Overview Tab --}}
    <div class="tab-pane fade show active" id="tab-overview">
        <div class="row g-3">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm" style="border-radius:12px;">
                    <div class="card-header bg-transparent border-0 pt-4 px-4"><h6 class="fw-semibold mb-0">Order Details</h6></div>
                    <div class="card-body px-4 pb-4">
                        <div class="row g-3">
                            @foreach([
                                ['Order Number', $order->order_number ?? 'IO-2026-0001'],
                                ['Order Date', ($order->order_date ?? now())->format('d M Y')],
                                ['Supplier', $order->supplier->name ?? 'M/s Global Trading Co.'],
                                ['Supplier Reference', $order->supplier_reference ?? 'PO-SUP-2026-089'],
                                ['Origin Country', $order->origin_country ?? 'China'],
                                ['Payment Terms', $order->payment_terms ?? 'LC at Sight'],
                                ['Incoterms', $order->incoterms ?? 'FOB'],
                                ['Currency', $order->currency ?? 'USD'],
                                ['Port of Loading', $order->port_of_loading ?? 'Shanghai, China'],
                                ['Port of Discharge', $order->port_of_discharge ?? 'JNPT (Nhava Sheva)'],
                                ['Shipping Line', $order->shipping_line ?? 'Maersk Line'],
                                ['Vessel', $order->vessel_name ?? 'Maersk Seletar V.2614E'],
                                ['Expected ETD', ($order->expected_etd ?? now())->format('d M Y')],
                                ['Expected ETA', ($order->expected_eta ?? now()->addDays(28))->format('d M Y')],
                            ] as [$label, $value])
                                <div class="col-md-6">
                                    <p class="text-muted mb-1" style="font-size:0.75rem;text-transform:uppercase;">{{ $label }}</p>
                                    <p class="fw-medium mb-0" style="font-size:0.9rem;">{{ $value }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card border-0 shadow-sm mb-3" style="border-radius:12px;">
                    <div class="card-header bg-transparent border-0 pt-4 px-4"><h6 class="fw-semibold mb-0">Progress</h6></div>
                    <div class="card-body px-4 pb-4">
                        <x-status-timeline :steps="[
                            ['status' => 'created', 'label' => 'Created', 'date' => '01 Jan'],
                            ['status' => 'approved', 'label' => 'Approved', 'date' => '02 Jan'],
                            ['status' => 'ordered', 'label' => 'Ordered', 'date' => '03 Jan'],
                            ['status' => 'shipped', 'label' => 'Shipped'],
                            ['status' => 'in_transit', 'label' => 'In Transit'],
                            ['status' => 'cleared', 'label' => 'Cleared'],
                        ]" current="{{ $order->status ?? 'shipped' }}" direction="vertical" />
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Items Tab --}}
    <div class="tab-pane fade" id="tab-items">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr>
                                <th>#</th><th>Description</th><th>HS Code</th><th>Unit</th><th>Qty</th><th>Unit Price</th><th>Amount</th><th>Net Wt</th><th>Gross Wt</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($order->items ?? [
                                ['description' => 'Electronic Control Module PCB', 'hs_code' => '8534.00', 'unit' => 'PCS', 'qty' => 500, 'unit_price' => 85.00, 'net_weight' => 125, 'gross_weight' => 150],
                                ['description' => 'Industrial Sensor Assembly', 'hs_code' => '9031.80', 'unit' => 'NOS', 'qty' => 200, 'unit_price' => 142.50, 'net_weight' => 80, 'gross_weight' => 95],
                                ['description' => 'Aluminum Housing Castings', 'hs_code' => '7616.99', 'unit' => 'PCS', 'qty' => 1000, 'unit_price' => 12.80, 'net_weight' => 250, 'gross_weight' => 280],
                                ['description' => 'Copper Wire Harness Set', 'hs_code' => '8544.42', 'unit' => 'SET', 'qty' => 500, 'unit_price' => 28.50, 'net_weight' => 62, 'gross_weight' => 75],
                                ['description' => 'Silicone Seal Rings', 'hs_code' => '4016.93', 'unit' => 'NOS', 'qty' => 5000, 'unit_price' => 1.20, 'net_weight' => 15, 'gross_weight' => 20],
                            ] as $i => $item)
                                <tr>
                                    <td>{{ $i + 1 }}</td>
                                    <td class="fw-medium">{{ $item['description'] }}</td>
                                    <td><code>{{ $item['hs_code'] }}</code></td>
                                    <td>{{ $item['unit'] }}</td>
                                    <td>{{ number_format($item['qty']) }}</td>
                                    <td>USD {{ number_format($item['unit_price'], 2) }}</td>
                                    <td class="fw-medium">USD {{ number_format($item['qty'] * $item['unit_price'], 2) }}</td>
                                    <td>{{ number_format($item['net_weight']) }} kg</td>
                                    <td>{{ number_format($item['gross_weight']) }} kg</td>
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-light">
                            <tr class="fw-bold">
                                <td colspan="5" class="text-end">Total:</td>
                                <td colspan="2">USD {{ number_format($order->total_value ?? 125000, 2) }}</td>
                                <td>{{ number_format($order->total_net_weight ?? 532) }} kg</td>
                                <td>{{ number_format($order->total_gross_weight ?? 620) }} kg</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Shipments Tab --}}
    <div class="tab-pane fade" id="tab-shipments">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-header bg-transparent border-0 pt-4 px-4 d-flex justify-content-between">
                <h6 class="fw-semibold mb-0">Shipments</h6>
                <a href="{{ route('import.shipments.create', ['order_id' => $order->id ?? 1]) }}" class="btn btn-sm btn-primary" style="border-radius:8px;"><i class="bi bi-plus me-1"></i>Add Shipment</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr><th>Shipment No.</th><th>Container(s)</th><th>Vessel</th><th>ETD</th><th>ETA</th><th>Status</th><th class="text-end">Actions</th></tr>
                        </thead>
                        <tbody>
                            @foreach($order->shipments ?? [
                                ['shipment_number' => 'SH-2026-0123', 'containers' => 'MSKU7234180', 'vessel' => 'Maersk Seletar', 'etd' => '15 Jan', 'eta' => '12 Feb', 'status' => 'in_transit'],
                                ['shipment_number' => 'SH-2026-0124', 'containers' => 'TCLU8901234', 'vessel' => 'MSC Diana', 'etd' => '18 Jan', 'eta' => '15 Feb', 'status' => 'shipped'],
                            ] as $sh)
                                <tr>
                                    <td><a href="#" class="text-primary text-decoration-none fw-medium">{{ $sh['shipment_number'] }}</a></td>
                                    <td><code>{{ $sh['containers'] }}</code></td>
                                    <td>{{ $sh['vessel'] }}</td>
                                    <td>{{ $sh['etd'] }}</td>
                                    <td>{{ $sh['eta'] }}</td>
                                    <td><x-status-badge :status="$sh['status']" /></td>
                                    <td class="text-end"><a href="#" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Bills of Entry Tab --}}
    <div class="tab-pane fade" id="tab-bills_of_entry">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-header bg-transparent border-0 pt-4 px-4 d-flex justify-content-between">
                <h6 class="fw-semibold mb-0">Bills of Entry</h6>
                <a href="{{ route('import.bills-of-entry.create', ['order_id' => $order->id ?? 1]) }}" class="btn btn-sm btn-primary" style="border-radius:8px;"><i class="bi bi-plus me-1"></i>New BOE</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead class="bg-light">
                            <tr><th>BOE No.</th><th>BOE Type</th><th>Assessment No.</th><th>Duty Amount</th><th>Assessment Status</th><th>Status</th><th class="text-end">Actions</th></tr>
                        </thead>
                        <tbody>
                            @foreach($order->bills_of_entry ?? [
                                ['boe_number' => 'BOE-2026-0891', 'type' => 'Home Consumption', 'assessment' => 'ASS-2026-1234', 'duty' => '₹18,75,000', 'assessment_status' => 'assessed', 'status' => 'cleared'],
                                ['boe_number' => 'BOE-2026-0892', 'type' => 'Home Consumption', 'assessment' => 'ASS-2026-1235', 'duty' => '₹12,45,000', 'assessment_status' => 'pending', 'status' => 'in_transit'],
                            ] as $boe)
                                <tr>
                                    <td><a href="#" class="text-primary text-decoration-none fw-medium">{{ $boe['boe_number'] }}</a></td>
                                    <td>{{ $boe['type'] }}</td>
                                    <td>{{ $boe['assessment'] }}</td>
                                    <td class="fw-medium">{{ $boe['duty'] }}</td>
                                    <td><x-status-badge :status="$boe['assessment_status']" /></td>
                                    <td><x-status-badge :status="$boe['status'] /></td>
                                    <td class="text-end"><a href="#" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Financial Summary Tab --}}
    <div class="tab-pane fade" id="tab-financial">
        <div class="row g-3">
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm" style="border-radius:12px;">
                    <div class="card-header bg-transparent border-0 pt-4 px-4"><h6 class="fw-semibold mb-0">Cost Summary</h6></div>
                    <div class="card-body px-4 pb-4">
                        @php $costs = ['FOB Value' => 'USD 125,000.00', 'Freight' => 'USD 8,500.00', 'Insurance' => 'USD 625.00', 'CIF Value' => 'USD 134,125.00', 'Basic Customs Duty (10%)' => '₹11,30,625', 'IGST (18%)' => '₹2,42,288', 'Social Welfare Surcharge' => '₹56,531', 'Total Duty' => '₹14,29,444', 'Customs Handling Charges' => '₹25,000', 'Port Charges' => '₹18,500', 'Total Landed Cost' => '₹1,48,53,444']; @endphp
                        @foreach($costs as $label => $val)
                            <div class="d-flex justify-content-between py-2 {{ $loop->last ? 'border-top fw-bold' : 'border-bottom' }}" style="border-color:#f0f0f0 !important;">
                                <span style="font-size:0.85rem;">{{ $label }}</span>
                                <span class="fw-medium" style="font-size:0.85rem;">{{ $val }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card border-0 shadow-sm" style="border-radius:12px;">
                    <div class="card-header bg-transparent border-0 pt-4 px-4"><h6 class="fw-semibold mb-0">Payment Status</h6></div>
                    <div class="card-body px-4 pb-4">
                        @foreach([
                            ['Supplier Payment', 'Paid', 'success', 'USD 125,000', '05 Jan 2026'],
                            ['Freight Payment', 'Paid', 'success', 'USD 8,500', '20 Jan 2026'],
                            ['Insurance Premium', 'Paid', 'success', 'USD 625', '20 Jan 2026'],
                            ['Customs Duty', 'Partial', 'warning', '₹10,00,000 / ₹14,29,444', '15 Feb 2026'],
                            ['CHarges', 'Pending', 'danger', '₹43,500', '-'],
                        ] as [$desc, $status, $color, $amt, $date])
                            <div class="d-flex align-items-center justify-content-between py-2 border-bottom" style="border-color:#f0f0f0 !important;">
                                <div>
                                    <p class="mb-0 fw-medium" style="font-size:0.85rem;">{{ $desc }}</p>
                                    <small class="text-muted">Paid on {{ $date }}</small>
                                </div>
                                <div class="text-end">
                                    <p class="mb-0 fw-medium" style="font-size:0.85rem;">{{ $amt }}</p>
                                    <x-status-badge :status="$status" size="sm" />
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Documents Tab --}}
    <div class="tab-pane fade" id="tab-documents">
        <div class="card border-0 shadow-sm" style="border-radius:12px;">
            <div class="card-header bg-transparent border-0 pt-4 px-4 d-flex justify-content-between">
                <h6 class="fw-semibold mb-0">Documents</h6>
                <button class="btn btn-sm btn-primary" style="border-radius:8px;"><i class="bi bi-upload me-1"></i>Upload</button>
            </div>
            <div class="card-body p-0">
                <div class="list-group list-group-flush">
                    @foreach(['Purchase Order - IO-2026-0001.pdf|PDF|245 KB|02 Jan','Commercial Invoice - INV-2026-089.pdf|PDF|128 KB|10 Jan','Packing List - PL-2026-089.pdf|PDF|98 KB|10 Jan','Bill of Lading - BOL-MSKU7234180.pdf|PDF|312 KB|18 Jan','Certificate of Origin - COO-2026-089.pdf|PDF|85 KB|15 Jan','Insurance Certificate - IC-2026-089.pdf|PDF|156 KB|18 Jan'] as $doc)
                        @php [$name, $type, $size, $date] = explode('|', $doc); @endphp
                        <div class="list-group-item d-flex align-items-center justify-content-between px-4 py-3">
                            <div class="d-flex align-items-center">
                                <div class="bg-primary-subtle text-primary rounded-2 d-flex align-items-center justify-content-center me-3" style="width:40px;height:40px;">
                                    <i class="bi bi-file-earmark-text"></i>
                                </div>
                                <div>
                                    <p class="mb-0 fw-medium" style="font-size:0.85rem;">{{ $name }}</p>
                                    <small class="text-muted">{{ $type }} | {{ $size }} | Uploaded {{ $date }}</small>
                                </div>
                            </div>
                            <div class="d-flex gap-2">
                                <a href="#" class="btn btn-sm btn-outline-primary"><i class="bi bi-eye"></i></a>
                                <a href="#" class="btn btn-sm btn-outline-secondary"><i class="bi bi-download"></i></a>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection