@extends('layouts.app')

@section('title', 'Ship - Central')

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg mb-6">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <div class="flex justify-between items-center">
                    <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                        Ship Order 
                        <a href="/orders/{{ $order->order_id }}" class="text-blue-600 hover:text-blue-800 dark:text-blue-400">
                            #{{ $order->external_order_id }}
                        </a>
                    </h1>
                    <a href="{{ url('/orders') }}" class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors flex items-center gap-2 inline-flex">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                        </svg>
                        Back to Orders Page
                    </a>
                </div>
            </div>
        </div>

        <!-- Flash Messages -->
        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4" role="alert">
                <strong class="font-bold">✅ Success!</strong>
                <span class="block sm:inline">{!! session('success') !!}</span>
            </div>
        @endif

        @if(session('error'))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
                <strong class="font-bold">❌ Error!</strong>
                <span class="block sm:inline">{!! session('error') !!}</span>
            </div>
        @endif

        @if($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4" role="alert">
                <strong class="font-bold">❌ Validation Errors:</strong>
                <ul class="list-disc ml-5 mt-2">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form id="ship-form" action="{{ route('shipment.process') }}" method="POST">
            @csrf
            <input type="hidden" name="order_id" value="{{ $order->order_id }}">

            <!-- Address Information and Shipping Method -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <!-- Billing Address -->
                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Billing Address</h3>
                    <div class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                        <p>{{ $order->billing_street_address }}</p>
                        <p>{{ $order->billing_city }}</p>
                        <p>{{ $order->billing_state }}, {{ $order->billing_zip }}</p>
                        <p>{{ $order->billing_country }}</p>
                    </div>
                </div>

                <!-- Shipping Address -->
                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Shipping Address</h3>
                    <div class="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                        <p>{{ $order->shipping_street_address }}</p>
                        <p>{{ $order->shipping_city }}</p>
                        <p>{{ $order->shipping_state }}, {{ $order->shipping_zip }}</p>
                        <p>{{ $order->shipping_country }}</p>
                    </div>
                </div>

                <!-- Shipping Method -->
                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Shipping Method</h3>
                    <div class="space-y-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Warehouse</label>
                            <select name="warehouse" id="warehouse" class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="">Select Warehouse</option>
                                @foreach($warehouses as $id => $name)
                                    <option value="{{ $id }}">{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Carrier</label>
                            <select name="carrier" id="carrier" class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                @foreach($carriers as $value => $name)
                                    <option value="{{ $value }}" {{ $value == 'ups' ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Method</label>
                            <select name="method" id="method" class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                @foreach($methods as $value => $name)
                                    <option value="{{ $value }}" {{ $value == 'ups_ground' ? 'selected' : '' }}>{{ $name }}</option>
                                @endforeach
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Package</label>
                            <select name="package" id="package" class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="package">Package</option>
                                <option value="envelope">Envelope</option>
                                <option value="box">Box</option>
                            </select>
                        </div>

                        @if(!empty($showGoPartsShip))
                        <div class="mt-2 pt-2 border-t border-gray-200 dark:border-gray-600">
                            <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Shipping Provider</label>
                            <div class="space-y-1">
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="radio" name="shipping_provider" value="shipstation" checked
                                           class="text-blue-600 border-gray-300 dark:border-gray-600 focus:ring-blue-500">
                                    <span class="text-xs text-gray-700 dark:text-gray-300">Shipstation (Default)</span>
                                </label>
                                <label class="flex items-center gap-2 cursor-pointer">
                                    <input type="radio" name="shipping_provider" value="gopartsship"
                                           class="text-orange-600 border-gray-300 dark:border-gray-600 focus:ring-orange-500">
                                    <span class="text-xs text-orange-600 dark:text-orange-400 font-medium">Go-Parts Ship (Testing)</span>
                                </label>
                            </div>
                            <p id="gps-warning" class="hidden mt-1 text-xs text-orange-500 dark:text-orange-400">
                                This order will be sent to Go-Parts Ship instead of Shipstation.
                            </p>
                        </div>
                        @endif
                    </div>
                </div>
            </div>

            <!-- Order Items -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Order Items</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    <input type="checkbox" id="select-all" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50">
                                </th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Part #</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Best Carrier</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Supplier</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ETA</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Stock</th>
                                <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider" title="EX: If we haven't qty for CH2514104 this will trying to check partslink CH2514104N and if success will add this item in current order">
                                    <div>Extra</div>
                                    <div>partslink</div>
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
                            @foreach($order->items as $item)
                            <tr class="item-row hover:bg-gray-50 dark:hover:bg-gray-700" data-item-id="{{ $item->order_item_id }}">
                                <td class="px-4 py-3 text-center">
                                    @php
                                        // Status IDs: 1=Needs Order, 3=Ordered, 5=Dropshipped
                                        $allowShipStatuses = [1, 3, 5];
                                        $canShip = in_array($item->current_status, $allowShipStatuses);
                                    @endphp
                                    <input type="checkbox" 
                                           name="items[]" 
                                           value="{{ $item->order_item_id }}" 
                                           class="item-select rounded border-gray-300 dark:border-gray-600 text-blue-600 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50"
                                           {{ !$canShip ? 'disabled' : '' }}>
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <div class="text-sm text-gray-900 dark:text-white">
                                        {{ $item->name ?: ($item->product ? $item->product->name : 'N/A') }}
                                    </div>
                                    <div class="text-xs text-gray-500 dark:text-gray-400">
                                        @php
                                            $sku = 'N/A';
                                            if ($item->product) {
                                                $sku = $item->product->sku;
                                            } elseif ($item->part_num) {
                                                // Try to find product by part_num
                                                $product = \App\Models\Product::where('partslink', $item->part_num)
                                                    ->orWhere('sku', $item->part_num)
                                                    ->first();
                                                if ($product) {
                                                    $sku = $product->sku;
                                                }
                                            }
                                        @endphp
                                        SKU: {{ $sku }}
                                    </div>
                                </td>
                                <td class="px-4 py-3 text-center whitespace-nowrap">
                                    @php
                                        // Get status name from relationship or use fallback
                                        $statusName = $item->status ? $item->status->status : 'Unknown';
                                        
                                        // Add supplier code for shipping statuses
                                        $displayStatus = $statusName;
                                        if ($item->supplier && $item->supplier->code) {
                                            $shippingStatuses = ['Shipped', 'Delivered', 'In Transit', 'Out for Delivery'];
                                            foreach ($shippingStatuses as $shippingStatus) {
                                                if (stripos($statusName, $shippingStatus) !== false) {
                                                    $displayStatus = $statusName . ' ' . $item->supplier->code;
                                                    break;
                                                }
                                            }
                                        }
                                    @endphp
                                    <span class="status-badge fi-badge cursor-pointer" 
                                          data-item-id="{{ $item->order_item_id }}"
                                          data-status-name="{{ $statusName }}"
                                          data-supplier-code="{{ $item->supplier ? $item->supplier->code : '' }}"
                                          style="font-size: 0.6875rem; font-weight: 500; padding: 0.375rem 0.625rem; border-radius: 0.25rem; white-space: nowrap; display: inline-block;">
                                        {{ $displayStatus }}
                                    </span>
                                </td>
                                <td class="px-4 py-3 text-center text-sm text-gray-900 dark:text-white">
                                    @php
                                        $partslink = 'N/A';
                                        if ($item->product) {
                                            $partslink = $item->product->partslink;
                                        } elseif ($item->part_num) {
                                            // Try to find product by part_num or use part_num itself
                                            $product = \App\Models\Product::where('partslink', $item->part_num)
                                                ->orWhere('sku', $item->part_num)
                                                ->first();
                                            if ($product) {
                                                $partslink = $product->partslink ?: $item->part_num;
                                            } else {
                                                $partslink = $item->part_num;
                                            }
                                        }
                                    @endphp
                                    {{ $partslink }}
                                </td>
                                <td class="px-4 py-3 text-center text-sm text-gray-900 dark:text-white delivery-info">
                                    @if($item->current_status == 1) {{-- Needs Order status --}}
                                        <span class="text-gray-500 dark:text-gray-400">N/A</span>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-center">
                                    @if($item->supplier)
                                        <input type="hidden" name="item[{{ $item->order_item_id }}][supplier]" value="{{ $item->supplier_id }}">
                                        <input type="text" 
                                               class="w-full px-2 py-1 text-sm text-center border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:text-white" 
                                               value="{{ $item->supplier->code }}" 
                                               disabled>
                                    @else
                                        @php
                                            // Find best supplier - cheapest in-stock supplier
                                            $bestSupplierId = null;
                                            if ($item->product && $item->product->partslink) {
                                                $bestSupplier = \DB::table('parts_suppliers')
                                                    ->join('suppliers', 'parts_suppliers.supplier_id', '=', 'suppliers.supplier_id')
                                                    ->where('parts_suppliers.partslink', $item->product->partslink)
                                                    ->where('parts_suppliers.qty', '>', 0)
                                                    ->where('suppliers.is_active', true)
                                                    ->orderBy('parts_suppliers.price')
                                                    ->first();
                                                
                                                if ($bestSupplier) {
                                                    $bestSupplierId = $bestSupplier->supplier_id;
                                                }
                                            }
                                        @endphp
                                        <select name="item[{{ $item->order_item_id }}][supplier]" 
                                                class="w-full px-2 py-1 text-sm border {{ $bestSupplierId ? 'border-green-500 dark:border-green-400' : 'border-gray-300 dark:border-gray-600' }} rounded dark:bg-gray-700 dark:text-white">
                                            <option value="">Select Supplier</option>
                                            @foreach($suppliers as $id => $code)
                                                <option value="{{ $id }}" {{ $bestSupplierId == $id ? 'selected' : '' }}>
                                                    {{ $code }}{{ $bestSupplierId == $id ? ' ✓ (Best)' : '' }}
                                                </option>
                                            @endforeach
                                        </select>
                                    @endif
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <input type="date" 
                                           name="item[{{ $item->order_item_id }}][eta]" 
                                           value="{{ now()->addDay()->format('Y-m-d') }}"
                                           class="w-full px-2 py-1 text-sm text-center border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:text-white">
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <input type="checkbox" 
                                           name="item[{{ $item->order_item_id }}][stock]" 
                                           value="1"
                                           class="rounded border-gray-300 dark:border-gray-600 text-blue-600 shadow-sm">
                                </td>
                                <td class="px-4 py-3 text-center">
                                    <input type="checkbox" 
                                           name="item[{{ $item->order_item_id }}][findByExtraPartslink]" 
                                           value="1"
                                           class="rounded border-gray-300 dark:border-gray-600 text-blue-600 shadow-sm">
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Shipment Details -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 mb-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Shipment Details</h3>
                
                @php
                    $addressLines = explode("\n", $order->shipping_street_address ?? '');
                    $line1 = $addressLines[0] ?? '';
                    $line2 = $addressLines[1] ?? '';
                @endphp
                
                <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8">
                    <!-- Left Column -->
                    <div class="space-y-2">
                        <!-- Company and Customer on same row -->
                        <div class="flex items-center gap-2">
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300 w-16">Company:</label>
                            <input type="text" 
                                   name="company" 
                                   value="{{ $order->shipping_company }}"
                                   class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300 ml-2">Customer:</label>
                            <input type="text" 
                                   name="customer_name" 
                                   value="{{ $order->shipping_first_name }} {{ $order->shipping_last_name }}"
                                   class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        </div>
                        
                        <!-- Address Line 1 and 2 on same row -->
                        <div class="flex items-center gap-2">
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300 w-16">Address:</label>
                            <input type="text" 
                                   name="address_line1" 
                                   value="{{ $line1 }}"
                                   placeholder="Line 1"
                                   class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300">Address 2:</label>
                            <input type="text" 
                                   name="address_line2" 
                                   value="{{ $line2 }}"
                                   placeholder="Line 2"
                                   class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        </div>
                        
                        <!-- City, State, Zip on same row -->
                        <div class="flex items-center gap-2">
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300 w-16">City/St/Zip:</label>
                            <input type="text" 
                                   name="city" 
                                   value="{{ $order->shipping_city }}"
                                   class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            
                            @php
                                $currentCountry = strtoupper(strtolower($order->shipping_country) === 'usa' ? 'US' : $order->shipping_country);
                                $isUS = in_array($currentCountry, ['US', 'USA', 'UNITED STATES']);
                            @endphp
                            
                            <!-- State input with datalist for suggestions -->
                            @php
                                // Convert full state names to abbreviations if needed
                                $stateValue = $order->shipping_state;
                                $stateAbbreviations = [
                                    'Alabama' => 'AL', 'Alaska' => 'AK', 'Arizona' => 'AZ', 'Arkansas' => 'AR',
                                    'California' => 'CA', 'Colorado' => 'CO', 'Connecticut' => 'CT', 'Delaware' => 'DE',
                                    'District of Columbia' => 'DC', 'Florida' => 'FL', 'Georgia' => 'GA', 'Hawaii' => 'HI',
                                    'Idaho' => 'ID', 'Illinois' => 'IL', 'Indiana' => 'IN', 'Iowa' => 'IA',
                                    'Kansas' => 'KS', 'Kentucky' => 'KY', 'Louisiana' => 'LA', 'Maine' => 'ME',
                                    'Maryland' => 'MD', 'Massachusetts' => 'MA', 'Michigan' => 'MI', 'Minnesota' => 'MN',
                                    'Mississippi' => 'MS', 'Missouri' => 'MO', 'Montana' => 'MT', 'Nebraska' => 'NE',
                                    'Nevada' => 'NV', 'New Hampshire' => 'NH', 'New Jersey' => 'NJ', 'New Mexico' => 'NM',
                                    'New York' => 'NY', 'North Carolina' => 'NC', 'North Dakota' => 'ND', 'Ohio' => 'OH',
                                    'Oklahoma' => 'OK', 'Oregon' => 'OR', 'Pennsylvania' => 'PA', 'Rhode Island' => 'RI',
                                    'South Carolina' => 'SC', 'South Dakota' => 'SD', 'Tennessee' => 'TN', 'Texas' => 'TX',
                                    'Utah' => 'UT', 'Vermont' => 'VT', 'Virginia' => 'VA', 'Washington' => 'WA',
                                    'West Virginia' => 'WV', 'Wisconsin' => 'WI', 'Wyoming' => 'WY'
                                ];
                                
                                // If it's a full state name and we're in US, convert to abbreviation
                                if ($isUS && isset($stateAbbreviations[$stateValue])) {
                                    $stateValue = $stateAbbreviations[$stateValue];
                                }
                            @endphp
                            <input name="state" 
                                   id="state-input"
                                   list="state-list"
                                   value="{{ $stateValue }}"
                                   placeholder="{{ $isUS ? 'State' : 'State/Province' }}"
                                   class="w-28 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            
                            <datalist id="state-list">
                                <option value="AL">AL - Alabama</option>
                                <option value="AK">AK - Alaska</option>
                                <option value="AZ">AZ - Arizona</option>
                                <option value="AR">AR - Arkansas</option>
                                <option value="CA">CA - California</option>
                                <option value="CO">CO - Colorado</option>
                                <option value="CT">CT - Connecticut</option>
                                <option value="DE">DE - Delaware</option>
                                <option value="DC">DC - District of Columbia</option>
                                <option value="FL">FL - Florida</option>
                                <option value="GA">GA - Georgia</option>
                                <option value="HI">HI - Hawaii</option>
                                <option value="ID">ID - Idaho</option>
                                <option value="IL">IL - Illinois</option>
                                <option value="IN">IN - Indiana</option>
                                <option value="IA">IA - Iowa</option>
                                <option value="KS">KS - Kansas</option>
                                <option value="KY">KY - Kentucky</option>
                                <option value="LA">LA - Louisiana</option>
                                <option value="ME">ME - Maine</option>
                                <option value="MD">MD - Maryland</option>
                                <option value="MA">MA - Massachusetts</option>
                                <option value="MI">MI - Michigan</option>
                                <option value="MN">MN - Minnesota</option>
                                <option value="MS">MS - Mississippi</option>
                                <option value="MO">MO - Missouri</option>
                                <option value="MT">MT - Montana</option>
                                <option value="NE">NE - Nebraska</option>
                                <option value="NV">NV - Nevada</option>
                                <option value="NH">NH - New Hampshire</option>
                                <option value="NJ">NJ - New Jersey</option>
                                <option value="NM">NM - New Mexico</option>
                                <option value="NY">NY - New York</option>
                                <option value="NC">NC - North Carolina</option>
                                <option value="ND">ND - North Dakota</option>
                                <option value="OH">OH - Ohio</option>
                                <option value="OK">OK - Oklahoma</option>
                                <option value="OR">OR - Oregon</option>
                                <option value="PA">PA - Pennsylvania</option>
                                <option value="RI">RI - Rhode Island</option>
                                <option value="SC">SC - South Carolina</option>
                                <option value="SD">SD - South Dakota</option>
                                <option value="TN">TN - Tennessee</option>
                                <option value="TX">TX - Texas</option>
                                <option value="UT">UT - Utah</option>
                                <option value="VT">VT - Vermont</option>
                                <option value="VA">VA - Virginia</option>
                                <option value="WA">WA - Washington</option>
                                <option value="WV">WV - West Virginia</option>
                                <option value="WI">WI - Wisconsin</option>
                                <option value="WY">WY - Wyoming</option>
                            </datalist>
                            
                            <input type="text" 
                                   name="zip" 
                                   value="{{ $order->shipping_zip }}"
                                   class="w-20 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        </div>
                        
                        <!-- Country and Phone on same row -->
                        <div class="flex items-center gap-2">
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300 w-20">Country (2-digit):</label>
                            
                            <input name="country" 
                                   id="country-select"
                                   list="country-list"
                                   value="{{ strtoupper($order->shipping_country) === 'USA' ? 'US' : strtoupper($order->shipping_country) }}"
                                   placeholder="US"
                                   maxlength="2"
                                   class="w-32 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white uppercase">
                            
                            <datalist id="country-list">
                                @php
                                    $countries = [
                                        'US' => 'United States',
                                        'CA' => 'Canada',
                                        'MX' => 'Mexico',
                                        'GB' => 'United Kingdom',
                                        'FR' => 'France',
                                        'DE' => 'Germany',
                                        'IT' => 'Italy',
                                        'ES' => 'Spain',
                                        'AU' => 'Australia',
                                        'JP' => 'Japan',
                                        'CN' => 'China',
                                        'IN' => 'India',
                                        'BR' => 'Brazil',
                                        'RU' => 'Russia',
                                        'KR' => 'South Korea',
                                        'NL' => 'Netherlands',
                                        'BE' => 'Belgium',
                                        'CH' => 'Switzerland',
                                        'SE' => 'Sweden',
                                        'NO' => 'Norway',
                                        'DK' => 'Denmark',
                                        'FI' => 'Finland',
                                        'PL' => 'Poland',
                                        'PT' => 'Portugal',
                                        'GR' => 'Greece',
                                        'TR' => 'Turkey',
                                        'IL' => 'Israel',
                                        'AE' => 'United Arab Emirates',
                                        'SA' => 'Saudi Arabia',
                                        'ZA' => 'South Africa',
                                        'SG' => 'Singapore',
                                        'HK' => 'Hong Kong',
                                        'TW' => 'Taiwan',
                                        'TH' => 'Thailand',
                                        'MY' => 'Malaysia',
                                        'ID' => 'Indonesia',
                                        'PH' => 'Philippines',
                                        'VN' => 'Vietnam',
                                        'NZ' => 'New Zealand',
                                        'AR' => 'Argentina',
                                        'CL' => 'Chile',
                                        'CO' => 'Colombia',
                                        'PE' => 'Peru',
                                        'VE' => 'Venezuela',
                                        'EG' => 'Egypt',
                                        'NG' => 'Nigeria',
                                        'KE' => 'Kenya',
                                        'PK' => 'Pakistan',
                                        'BD' => 'Bangladesh',
                                        'UA' => 'Ukraine',
                                        'CZ' => 'Czech Republic',
                                        'HU' => 'Hungary',
                                        'RO' => 'Romania',
                                        'AT' => 'Austria',
                                        'IE' => 'Ireland',
                                    ];
                                @endphp
                                
                                @foreach($countries as $code => $name)
                                    <option value="{{ $code }}">{{ $code }} - {{ $name }}</option>
                                @endforeach
                            </datalist>
                            
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300 ml-2">Phone:</label>
                            <input type="text" 
                                   name="phone" 
                                   value="{{ $order->shipping_phone }}"
                                   class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                        </div>
                    </div>
                    
                    <!-- Right Column -->
                    <div class="space-y-2">
                        <!-- Insurance Provider and Declared Value -->
                        <div class="flex items-center gap-2">
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300 w-28">Insurance:</label>
                            <select name="insurance_provider" 
                                    class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="0">No Insurance Provider</option>
                                <option value="1">Shipsurance Discount Insurance</option>
                                <option value="2">Carrier Insurance</option>
                            </select>
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300 ml-2">Value:</label>
                            <div class="flex items-center gap-1">
                                <span class="text-xs text-gray-600 dark:text-gray-400">$</span>
                                <input type="number" 
                                       name="insurance" 
                                       value="100"
                                       step="0.01"
                                       class="w-20 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                            </div>
                        </div>
                        
                        <!-- Dimensions and Weight - All in one row -->
                        <div class="flex items-center gap-2">
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300 w-28">Dimensions:</label>
                            <div class="flex flex-1 items-center gap-1">
                                <input type="number"
                                       name="length"
                                       id="length"
                                       step="0.01"
                                       value=""
                                       placeholder="L"
                                       class="w-16 px-1 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
                                <span class="text-xs text-gray-500">×</span>
                                <input type="number"
                                       name="width"
                                       id="width"
                                       step="0.01"
                                       value=""
                                       placeholder="W"
                                       class="w-16 px-1 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
                                <span class="text-xs text-gray-500">×</span>
                                <input type="number"
                                       name="height"
                                       id="height"
                                       step="0.01"
                                       value=""
                                       placeholder="H"
                                       class="w-16 px-1 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
                                <span class="text-xs text-gray-600 dark:text-gray-400 ml-1">inches</span>
                                <label class="text-xs font-medium text-gray-700 dark:text-gray-300 ml-3">Weight:</label>
                                <input type="number"
                                       name="weight"
                                       id="weight"
                                       step="0.01"
                                       value=""
                                       placeholder="lbs"
                                       class="w-16 px-1 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none">
                                <span class="text-xs text-gray-600 dark:text-gray-400">lbs</span>
                                <span id="dimensions-loading" class="hidden text-xs text-blue-500 ml-2"><i class="fas fa-spinner fa-spin"></i></span>
                            </div>
                        </div>
                        
                        <!-- Signature Options -->
                        <div class="flex items-center gap-2">
                            <label class="text-xs font-medium text-gray-700 dark:text-gray-300 w-28">Signature:</label>
                            <select name="signature" 
                                    class="flex-1 px-2 py-1 text-xs border border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
                                <option value="0">No confirmation</option>
                                <option value="1">Delivery Confirmation</option>
                                <option value="2">Signature Confirmation</option>
                                <option value="3">Adult Signature Confirmation</option>
                                <option value="4">Direct Signature Confirmation (FedEx only)</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <!-- Buttons Row -->
                <div class="flex justify-center gap-3 mt-4">
                    <button type="button" id="ship-now-btn" class="px-4 py-1.5 bg-blue-600 text-white text-xs font-medium rounded hover:bg-blue-700 transition-colors">
                        <i class="fas fa-truck mr-2"></i> Ship Now
                    </button>
                    <button type="button" id="shipCostEst" class="px-4 py-1.5 bg-gray-500 text-white text-xs rounded hover:bg-gray-600 transition-colors">
                        <i class="fas fa-search mr-2"></i> Shipping Cost Estimates
                    </button>
                </div>
            </div>
            
            <!-- Shipping Rates Container (for estimates) -->
            <div id="shipping-rates-container" class="hidden">
                <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-4 mb-6">
                    <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-3">Shipping Cost Estimates</h3>
                    <div id="rates-content">
                        <!-- Rates will be loaded here -->
                    </div>
                </div>
            </div>
            
            <!-- Dropship Order Items Section -->
            <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6 mb-6">
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Dropship Order Items</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                        <thead class="bg-gray-50 dark:bg-gray-700">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
                                    <input type="checkbox" id="select-all-dropship" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-500 focus:ring-opacity-50">
                                </th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Product</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Part #</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Supplier</th>
                                <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ETA</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700" id="dropship-items-body">
                            @php
                                // Show all items in dropship section, just like the classic system
                                $dropshipItems = $order->items;
                            @endphp
                            @if($dropshipItems->count() > 0)
                                @foreach($dropshipItems as $item)
                                <tr class="dropship-item-row hover:bg-gray-50 dark:hover:bg-gray-700" data-item-id="{{ $item->order_item_id }}">
                                    <td class="px-4 py-3">
                                        <input type="checkbox" 
                                               name="dropship_items[]" 
                                               value="{{ $item->order_item_id }}" 
                                               class="dropship-item-select rounded border-gray-300 dark:border-gray-600 text-blue-600 shadow-sm">
                                    </td>
                                    <td class="px-4 py-3">
                                        <div class="text-sm text-gray-900 dark:text-white">
                                            {{ $item->name ?: ($item->product ? $item->product->name : 'N/A') }}
                                        </div>
                                        <div class="text-xs text-gray-500 dark:text-gray-400">
                                            @php
                                                $dropshipSku = 'N/A';
                                                if ($item->product) {
                                                    $dropshipSku = $item->product->sku;
                                                } elseif ($item->part_num) {
                                                    // Try to find product by part_num
                                                    $dropshipProduct = \App\Models\Product::where('partslink', $item->part_num)
                                                        ->orWhere('sku', $item->part_num)
                                                        ->first();
                                                    if ($dropshipProduct) {
                                                        $dropshipSku = $dropshipProduct->sku;
                                                    }
                                                }
                                            @endphp
                                            SKU: {{ $dropshipSku }}
                                        </div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200">
                                            Dropship
                                        </span>
                                    </td>
                                    <td class="px-4 py-3 text-sm text-gray-900 dark:text-white">
                                        @php
                                            $dropshipPartslink = 'N/A';
                                            if ($item->product) {
                                                $dropshipPartslink = $item->product->partslink;
                                            } elseif ($item->part_num) {
                                                // Try to find product by part_num or use part_num itself
                                                $dropshipProduct2 = \App\Models\Product::where('partslink', $item->part_num)
                                                    ->orWhere('sku', $item->part_num)
                                                    ->first();
                                                if ($dropshipProduct2) {
                                                    $dropshipPartslink = $dropshipProduct2->partslink ?: $item->part_num;
                                                } else {
                                                    $dropshipPartslink = $item->part_num;
                                                }
                                            }
                                        @endphp
                                        {{ $dropshipPartslink }}
                                    </td>
                                    <td class="px-4 py-3">
                                        @if($item->supplier)
                                            <input type="text" 
                                                   class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:text-white" 
                                                   value="{{ $item->supplier->code }}" 
                                                   disabled>
                                        @else
                                            <select name="dropship_item[{{ $item->order_item_id }}][supplier]" 
                                                    class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:text-white">
                                                <option value="">Select Supplier</option>
                                                @foreach($suppliers as $id => $code)
                                                    <option value="{{ $id }}">{{ $code }}</option>
                                                @endforeach
                                            </select>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3">
                                        <input type="date" 
                                               name="dropship_item[{{ $item->order_item_id }}][eta]" 
                                               value="{{ now()->addDays(3)->format('Y-m-d') }}"
                                               class="w-full px-2 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded dark:bg-gray-700 dark:text-white">
                                    </td>
                                </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="6" class="px-4 py-3 text-center text-sm text-gray-500 dark:text-gray-400">
                                        No dropship items in this order
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                
                <!-- Tracking Row -->
                <div class="mt-4 p-4 bg-gray-50 dark:bg-gray-700 rounded">
                    <div class="flex flex-col space-y-3">
                        <!-- First Row: Standard Carrier Selection -->
                        <div class="flex items-center space-x-4">
                            <label class="text-sm font-medium text-gray-700 dark:text-gray-300">Tracking</label>
                            <span class="text-xs text-gray-500 dark:text-gray-400 italic">(if available)</span>
                            
                            <select name="dropship_carrier" id="dropship_carrier" class="px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
                                <option value="">Select Carrier</option>
                                @foreach($carriers as $value => $name)
                                    <option value="{{ $value }}">{{ $name }}</option>
                                @endforeach
                                <option value="custom">Custom Carrier</option>
                            </select>
                            
                            <!-- Custom Carrier Input (hidden by default) -->
                            <input type="text" 
                                   name="dropship_custom_carrier" 
                                   id="dropship_custom_carrier"
                                   placeholder="Enter custom carrier name"
                                   class="hidden px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white"
                                   style="min-width: 200px;">
                            
                            <input type="text" 
                                   name="dropship_tracking_number" 
                                   placeholder="Tracking Number"
                                   class="w-72 px-3 py-1 text-sm border border-gray-300 dark:border-gray-600 rounded shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
                            
                            <button type="button" id="dropship-now-btn" class="px-4 py-1.5 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
                                <i class="fas fa-truck"></i> Dropship Now
                            </button>
                        </div>
                        
                        <!-- Optional: Display custom carrier tip -->
                        <div id="custom-carrier-tip" class="hidden text-xs text-gray-600 dark:text-gray-400 italic ml-20">
                            <i class="fas fa-info-circle mr-1"></i> 
                            Enter the custom carrier name (e.g., "DHL Express", "Local Courier", "Customer Pickup", etc.)
                        </div>
                    </div>
                </div>
            </div>

            <!-- Action Buttons - Removed per user request -->
        </form>
    </div>
</div>

<script>
// Define base URL for all AJAX calls
const APP_URL = '{{ url("/") }}';

document.addEventListener('DOMContentLoaded', function() {
    console.log('===========================================');
    console.log('🚢 SHIP PAGE LOADED');
    console.log('===========================================');
    console.log('Page URL:', window.location.href);
    console.log('Order ID:', {{ $order->order_id }});
    console.log('External Order ID:', '{{ $order->external_order_id }}');
    console.log('Time:', new Date().toISOString());
    
    // Status badge styling function (same as main orders page)
    function getStatusBadgeStyle(colorCode) {
        const isDark = document.documentElement.classList.contains('dark');
        let style = '';
        
        // Use classic Bootstrap 3 colors from the original Central system
        if (colorCode === 'label-danger') {
            // Red - #d9534f
            if (isDark) {
                style = 'background-color: rgba(217, 83, 79, 0.15); color: rgb(229, 115, 115); border: 1px solid rgba(217, 83, 79, 0.3);';
            } else {
                style = 'background-color: rgba(217, 83, 79, 0.1); color: rgb(217, 83, 79); border: 1px solid rgba(217, 83, 79, 0.2);';
            }
        } else if (colorCode === 'label-warning') {
            // Orange - #f0ad4e
            if (isDark) {
                style = 'background-color: rgba(240, 173, 78, 0.15); color: rgb(243, 191, 115); border: 1px solid rgba(240, 173, 78, 0.3);';
            } else {
                style = 'background-color: rgba(240, 173, 78, 0.1); color: rgb(240, 173, 78); border: 1px solid rgba(240, 173, 78, 0.2);';
            }
        } else if (colorCode === 'label-info') {
            // Light Blue - Using darker colors for better visibility
            if (isDark) {
                style = 'background-color: rgba(2, 132, 199, 0.1); color: rgb(56, 189, 248); border: 1px solid rgba(2, 132, 199, 0.2);';
            } else {
                style = 'background-color: rgb(240, 249, 255); color: rgb(2, 132, 199); border: 1px solid rgba(2, 132, 199, 0.2);';
            }
        } else if (colorCode === 'label-primary') {
            // Blue - #428bca - Used for "Credit Memo Sent" and similar
            if (isDark) {
                style = 'background-color: rgba(66, 139, 202, 0.15); color: rgb(93, 156, 210); border: 1px solid rgba(66, 139, 202, 0.3);';
            } else {
                style = 'background-color: rgba(66, 139, 202, 0.1); color: rgb(66, 139, 202); border: 1px solid rgba(66, 139, 202, 0.2);';
            }
        } else if (colorCode === 'label-success') {
            // Green - #5cb85c
            if (isDark) {
                style = 'background-color: rgba(92, 184, 92, 0.15); color: rgb(115, 195, 115); border: 1px solid rgba(92, 184, 92, 0.3);';
            } else {
                style = 'background-color: rgba(92, 184, 92, 0.1); color: rgb(92, 184, 92); border: 1px solid rgba(92, 184, 92, 0.2);';
            }
        } else {
            // Default gray
            if (isDark) {
                style = 'background-color: rgba(107, 114, 128, 0.15); color: rgb(156, 163, 175); border: 1px solid rgba(107, 114, 128, 0.3);';
            } else {
                style = 'background-color: rgba(107, 114, 128, 0.1); color: rgb(107, 114, 128); border: 1px solid rgba(107, 114, 128, 0.2);';
            }
        }
        return style;
    }

    // Map specific statuses to their exact color codes from classic Central
    const statusToColorMap = {
        'Credit Memo Sent': 'label-primary',
        'Sent to SS': 'label-primary',
        'Dropshipped': 'label-primary',
        'Sent to WebShip': 'label-primary',
        'Local Refunded': 'label-primary',
        'Ordered': 'label-info',
        'Ordered Ebay/Amazon': 'label-info',
        'Awaiting Customer Reply': 'label-info',
        'Ready for Ordering': 'label-info',
        'Waiting For Payment Info': 'label-info',
        'Credit Memo (B2B)': 'label-info',
        'Invalid Address': 'label-info',
        'Invalid Phone number': 'label-info',
        'Replacement Or Refund': 'label-info',
        'Other': 'label-info',
        'Shipped': 'label-success',
        'En-route to GA': 'label-success',
        'Local Delivered': 'label-success',
        'Local Ordered': 'label-success',
        'Back Order': 'label-warning',
        'Awaiting Part': 'label-warning',
        'For Refund': 'label-warning',
        'Needs Order': 'label-danger',
        'Cancelled': 'label-danger',
        'Dead Return': 'label-danger',
        'Please Cancel': 'label-danger',
        'Return Refunded': 'label-danger',
        'Total Loss Refund': 'label-danger',
        'Cancelled - Not Purchased': 'label-danger',
        'Local Cancelled': 'label-danger',
        'Pending Return': 'label-danger',
        'Back Ordered': 'label-danger',
        'Cancelled after Purchase': 'label-danger',
        'Customer Cancelled': 'label-danger',
        'Out of Stock': 'label-danger',
        'Too Big to Ship': 'label-danger',
        'Damaged (Not Returned)': 'label-danger',
        'Damaged (Returned)': 'label-danger',
        'Found Cheaper': 'label-danger',
        'Incorrect Fitment/Image Displayed': 'label-danger',
        'Listing Error (Y/M/M incorrect info)': 'label-danger',
        'Lost In Transit (LIT)': 'label-danger',
        'Not Needed': 'label-danger',
        'Other ': 'label-danger', // Note the space
        'Part Did Not Fit': 'label-danger',
        'Wrong Item Sent': 'label-danger'
    };

    // Apply styling to all status badges
    function applyStatusBadgeStyles() {
        const statusBadges = document.querySelectorAll('.status-badge');
        statusBadges.forEach(badge => {
            const statusName = badge.getAttribute('data-status-name');
            const colorCode = statusToColorMap[statusName] || 'label-default';
            const badgeStyle = getStatusBadgeStyle(colorCode);
            
            // Apply the style while preserving existing inline styles
            const existingStyle = badge.style.cssText;
            badge.style.cssText = existingStyle + '; ' + badgeStyle;
        });
    }

    // Apply styles on page load
    applyStatusBadgeStyles();

    // Watch for theme changes and update status badge colors
    const themeObserver = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                applyStatusBadgeStyles();
            }
        });
    });

    // Start observing theme changes
    themeObserver.observe(document.documentElement, {
        attributes: true,
        attributeFilter: ['class']
    });

    // Get warehouse select element first
    const warehouseSelect = document.getElementById('warehouse');
    
    // Select all checkbox functionality
    const selectAll = document.getElementById('select-all');
    
    selectAll.addEventListener('change', function() {
        // Query checkboxes each time to get current state
        const itemCheckboxes = document.querySelectorAll('.item-select:not(:disabled)');
        itemCheckboxes.forEach(checkbox => {
            checkbox.checked = selectAll.checked;
        });
        updateDeliveryInfo();
        updateDimensionsFromSelectedItems();
    });
    
    // Update delivery info when warehouse changes
    warehouseSelect.addEventListener('change', updateDeliveryInfo);
    
    // Update delivery info and dimensions when items are selected/deselected
    document.querySelectorAll('.item-select').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            updateDeliveryInfo();
            updateDimensionsFromSelectedItems();
            // Update select-all checkbox state
            const allCheckboxes = document.querySelectorAll('.item-select:not(:disabled)');
            const checkedBoxes = document.querySelectorAll('.item-select:not(:disabled):checked');
            if (selectAll) {
                if (checkedBoxes.length === 0) {
                    selectAll.checked = false;
                    selectAll.indeterminate = false;
                } else if (checkedBoxes.length === allCheckboxes.length) {
                    selectAll.checked = true;
                    selectAll.indeterminate = false;
                } else {
                    selectAll.checked = false;
                    selectAll.indeterminate = true;
                }
            }
        });
    });

    // Function to update dimensions based on selected items
    function updateDimensionsFromSelectedItems() {
        const selectedItems = Array.from(document.querySelectorAll('.item-select:checked'))
            .map(cb => cb.value);

        // If no items selected, clear dimensions
        if (selectedItems.length === 0) {
            document.getElementById('weight').value = '';
            document.getElementById('length').value = '';
            document.getElementById('width').value = '';
            document.getElementById('height').value = '';
            return;
        }

        // Show loading indicator
        const loadingSpan = document.getElementById('dimensions-loading');
        if (loadingSpan) loadingSpan.classList.remove('hidden');

        // Call API to calculate dimensions
        fetch(APP_URL + '/shipment/calculate-items-dimensions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            },
            body: JSON.stringify({
                items: selectedItems
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                document.getElementById('weight').value = data.weight || '';
                document.getElementById('length').value = data.length || '';
                document.getElementById('width').value = data.width || '';
                document.getElementById('height').value = data.height || '';
                console.log('Dimensions updated from parts_suppliers:', data);
            } else {
                console.error('Failed to get dimensions:', data.error);
            }
        })
        .catch(error => {
            console.error('Error fetching dimensions:', error);
        })
        .finally(() => {
            // Hide loading indicator
            if (loadingSpan) loadingSpan.classList.add('hidden');
        });
    }
    
    // Dynamic carrier/method filtering
    const carrierSelect = document.getElementById('carrier');
    const methodSelect = document.getElementById('method');
    
    carrierSelect.addEventListener('change', function() {
        filterMethods(carrierSelect.value);
    });
    
    function filterMethods(carrier) {
        // This would filter methods based on selected carrier
        // For now, just show all methods
        Array.from(methodSelect.options).forEach(option => {
            option.style.display = option.value.startsWith(carrier) ? 'block' : 'none';
        });
        
        // Select first visible option
        for (let option of methodSelect.options) {
            if (option.style.display !== 'none') {
                methodSelect.value = option.value;
                break;
            }
        }
    }
    
    function updateDeliveryInfo() {
        console.log('updateDeliveryInfo called');
        const warehouse = warehouseSelect.value;
        console.log('Warehouse value:', warehouse);
        
        // If no warehouse selected, clear all delivery info cells
        if (!warehouse) {
            console.log('No warehouse selected, clearing delivery info');
            document.querySelectorAll('.delivery-info').forEach(cell => {
                cell.innerHTML = '<span class="text-gray-500 dark:text-gray-400">Select warehouse</span>';
            });
            return;
        }
        
        // Get ALL item IDs (like old system), not just selected ones
        const itemRows = document.querySelectorAll('tr[data-item-id]');
        console.log('Found item rows:', itemRows.length);
        
        const allItems = Array.from(itemRows).map(row => row.getAttribute('data-item-id'));
        
        console.log('Found items:', allItems);
        if (allItems.length === 0) {
            console.log('No items found, returning');
            return;
        }
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        console.log('CSRF Token:', csrfToken);
        
        const deliveryUrl = APP_URL + '/shipment/get-delivery';
        console.log('Making AJAX call to', deliveryUrl);
        
        // Set all cells to "Calculating..." while we wait
        document.querySelectorAll('.delivery-info').forEach(cell => {
            cell.innerHTML = '<span class="text-gray-500 dark:text-gray-400">Calculating...</span>';
        });
        
        // Make AJAX call to get delivery info
        fetch(deliveryUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken || '',
                'Accept': 'application/json'
            },
            credentials: 'same-origin',
            body: JSON.stringify({
                warehouse: warehouse,
                items: allItems
            })
        })
        .then(response => {
            console.log('Response received:', response);
            console.log('Response status:', response.status);
            console.log('Response ok:', response.ok);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Data received:', data);
            
            if (!data || !data.items) {
                console.error('Invalid response data:', data);
                document.querySelectorAll('.delivery-info').forEach(cell => {
                    cell.innerHTML = '<span class="text-red-500">Error loading rates</span>';
                });
                return;
            }
            
            // Update delivery info for each item
            Object.keys(data.items).forEach(itemId => {
                const row = document.querySelector(`tr[data-item-id="${itemId}"]`);
                console.log(`Looking for row with data-item-id="${itemId}":`, row);
                if (row) {
                    const deliveryCell = row.querySelector('.delivery-info');
                    console.log('Found delivery cell:', deliveryCell);
                    if (deliveryCell) {
                        const content = data.items[itemId] || 'N/A';
                        console.log(`Setting HTML for item ${itemId}:`, content);
                        deliveryCell.innerHTML = content;
                    }
                }
            });
        })
        .catch(error => {
            console.error('Error fetching delivery info:', error);
            document.querySelectorAll('.delivery-info').forEach(cell => {
                cell.innerHTML = '<span class="text-red-500">Error: ' + error.message + '</span>';
            });
        });
    }
    
    // Initial method filtering
    filterMethods(carrierSelect.value);
    
    // Don't load delivery info initially - wait for warehouse selection (like old system)
    
    // Select all dropship checkbox functionality
    const selectAllDropship = document.getElementById('select-all-dropship');
    const dropshipCheckboxes = document.querySelectorAll('.dropship-item-select');
    
    if (selectAllDropship) {
        selectAllDropship.addEventListener('change', function() {
            dropshipCheckboxes.forEach(checkbox => {
                checkbox.checked = selectAllDropship.checked;
            });
        });
    }
    
    // Simple form submission handler
    const shipForm = document.getElementById('ship-form');
    const shipNowBtn = document.getElementById('ship-now-btn');
    
    if (shipForm && shipNowBtn) {
        console.log('Setting up Ship Now button handler');
        // Override any existing handlers and use a simple approach
        shipNowBtn.onclick = function(e) {
            console.log('Ship Now clicked!');
            alert('Ship Now button clicked - processing...');
            
            // Check if items are selected
            const selectedItems = document.querySelectorAll('.item-select:checked');
            
            if (selectedItems.length === 0) {
                alert('❌ Please select at least one item to ship');
                e.preventDefault();
                return false;
            }
            
            // Check required fields
            const warehouse = document.querySelector('[name="warehouse"]').value;
            const carrier = document.querySelector('[name="carrier"]').value;
            const method = document.querySelector('[name="method"]').value;
            
            if (!warehouse || !carrier || !method) {
                alert('❌ Please select warehouse, carrier, and shipping method');
                e.preventDefault();
                return false;
            }
            
            // Show loading state
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing shipment...';
            
            // Submit the form
            shipForm.submit();
        };
        
        // Prevent default form submission and use our handler
        shipForm.onsubmit = function(e) {
            // This will be triggered by our button click handler
            return true;
        };
    }
    
    // Shipping cost estimates
    // Shipping Cost Estimates button
    const shipCostEstBtn = document.getElementById('shipCostEst');
    if (shipCostEstBtn) {
        shipCostEstBtn.addEventListener('click', function(e) {
            e.preventDefault();
            // Get selected items
            const selectedItems = Array.from(document.querySelectorAll('.item-select:checked'))
                .map(cb => cb.value);
            
            if (selectedItems.length === 0) {
                alert('Please select at least one item to estimate shipping costs');
                return;
            }
            
            const warehouse = warehouseSelect.value;
            if (!warehouse) {
                alert('Please select a warehouse');
                return;
            }
            
            // Show loading state
            const ratesContainer = document.getElementById('shipping-rates-container');
            const ratesContent = document.getElementById('rates-content');
            ratesContainer.classList.remove('hidden');
            ratesContent.innerHTML = '<p class="text-sm text-gray-600 dark:text-gray-300"><i class="fas fa-spinner fa-spin mr-2"></i>Calculating shipping estimates...</p>';
            
            // Get package dimensions
            const weight = document.getElementById('weight').value || 1;
            const length = document.getElementById('length').value || 12;
            const width = document.getElementById('width').value || 12;
            const height = document.getElementById('height').value || 12;
            
            // Make API call to get shipping estimates
            fetch(APP_URL + '/shipment/get-shipping-cost-estimate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
            },
            body: JSON.stringify({
                warehouse: warehouse,
                items: selectedItems,
                weight: weight,
                length: length,
                width: width,
                height: height,
                zip: '{{ $order->shipping_zip }}'
            })
            })
            .then(response => response.json())
            .then(data => {
                if (data.estimates) {
                    let html = '<div class="grid grid-cols-2 gap-4">';
                    
                    Object.keys(data.estimates).forEach(carrier => {
                        const rate = data.estimates[carrier];
                        html += `
                            <div class="border border-gray-200 dark:border-gray-600 rounded p-3">
                                <div class="flex justify-between items-center">
                                    <span class="font-medium text-gray-700 dark:text-gray-300">${carrier}</span>
                                    <span class="text-lg font-bold text-green-600 dark:text-green-400">$${rate.toFixed(2)}</span>
                                </div>
                            </div>`;
                    });
                    
                    html += '</div>';
                    ratesContent.innerHTML = html;
                } else if (data.error) {
                    ratesContent.innerHTML = `<p class="text-sm text-red-600 dark:text-red-400">Error: ${data.error}</p>`;
                } else {
                    ratesContent.innerHTML = '<p class="text-sm text-red-600 dark:text-red-400">Unable to calculate estimates</p>';
                }
            })
            .catch(error => {
                console.error('Error fetching shipping estimates:', error);
                ratesContent.innerHTML = '<p class="text-sm text-red-600 dark:text-red-400">Error calculating estimates</p>';
            });
        });
    }
    
    // Dimensions are now calculated automatically via updateDimensionsFromSelectedItems()
    
    // Country input handling - ensure uppercase for 2-digit codes
    const countryInput = document.getElementById('country-select');
    if (countryInput) {
        countryInput.addEventListener('input', function() {
            this.value = this.value.toUpperCase();
        });
        
        // Ensure initial value is uppercase
        countryInput.value = countryInput.value.toUpperCase();
    }
    
    // State input handling - dynamic placeholder based on country
    const stateInput = document.getElementById('state-input');
    if (countryInput && stateInput) {
        countryInput.addEventListener('input', function() {
            const isUS = this.value === 'US';
            stateInput.placeholder = isUS ? 'State' : 'State/Province';
        });
    }

    // Datalist may submit display text (e.g. "GA - Georgia") instead of value ("GA")
    // Strip to just the abbreviation code when that happens
    if (stateInput) {
        stateInput.addEventListener('input', function() {
            const match = this.value.match(/^([A-Z]{2})\s*-\s*/);
            if (match) {
                this.value = match[1];
            }
        });
    }
    
    // Handle custom carrier selection for dropship
    const dropshipCarrierSelect = document.getElementById('dropship_carrier');
    const customCarrierInput = document.getElementById('dropship_custom_carrier');
    const customCarrierTip = document.getElementById('custom-carrier-tip');
    
    if (dropshipCarrierSelect && customCarrierInput) {
        dropshipCarrierSelect.addEventListener('change', function() {
            if (this.value === 'custom') {
                // Show custom carrier input field
                customCarrierInput.classList.remove('hidden');
                customCarrierInput.required = true;
                customCarrierTip.classList.remove('hidden');
            } else {
                // Hide custom carrier input field
                customCarrierInput.classList.add('hidden');
                customCarrierInput.required = false;
                customCarrierInput.value = '';
                customCarrierTip.classList.add('hidden');
            }
        });
    }
    
    // Handle dropship now button
    const dropshipNowBtn = document.getElementById('dropship-now-btn');
    if (dropshipNowBtn) {
        dropshipNowBtn.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Get selected dropship items
            const selectedDropshipItems = document.querySelectorAll('.dropship-item-select:checked');
            if (selectedDropshipItems.length === 0) {
                alert('❌ Please select at least one item to dropship');
                return;
            }
            
            // Get carrier and tracking info
            const carrierSelect = document.getElementById('dropship_carrier');
            const trackingNumber = document.querySelector('[name="dropship_tracking_number"]').value;
            
            let carrier = carrierSelect.value;
            if (carrier === 'custom') {
                carrier = customCarrierInput.value.trim();
                if (!carrier) {
                    alert('❌ Please enter a custom carrier name');
                    customCarrierInput.focus();
                    return;
                }
            }
            
            if (!carrier) {
                alert('❌ Please select a carrier');
                return;
            }
            
            if (!trackingNumber) {
                alert('❌ Please enter a tracking number');
                return;
            }
            
            // Show loading state
            this.disabled = true;
            this.innerHTML = '<i class="fas fa-spinner fa-spin mr-1"></i> Processing dropship...';
            
            // Submit the form with dropship action
            const form = document.getElementById('ship-form');
            
            // Add a hidden input to indicate dropship action
            const actionInput = document.createElement('input');
            actionInput.type = 'hidden';
            actionInput.name = 'action';
            actionInput.value = 'dropship';
            form.appendChild(actionInput);
            
            // If custom carrier, update the carrier field value
            if (carrierSelect.value === 'custom') {
                // Create a hidden input for the actual carrier value
                const actualCarrierInput = document.createElement('input');
                actualCarrierInput.type = 'hidden';
                actualCarrierInput.name = 'dropship_actual_carrier';
                actualCarrierInput.value = carrier;
                form.appendChild(actualCarrierInput);
            }
            
            form.submit();
        });
    }
    
    // Auto-calculate dimensions functionality
    const calculateDimensionsBtn = document.getElementById('calculate-dimensions');
    if (calculateDimensionsBtn) {
        calculateDimensionsBtn.addEventListener('click', function() {
            const selectedItems = document.querySelectorAll('input[name="items[]"]:checked');
            const itemIds = Array.from(selectedItems).map(cb => cb.value);
            
            if (itemIds.length === 0) {
                alert('Please select at least one item to calculate dimensions');
                return;
            }
            
            // Show loading state
            this.disabled = true;
            this.textContent = 'Calculating...';
            
            fetch(APP_URL + '/api/shipment/dimensions', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    order_id: {{ $order->order_id }},
                    item_id: itemIds
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert('Error: ' + data.error);
                } else {
                    // Update dimension fields
                    document.getElementById('weight').value = data.total_weight || 1;
                    
                    // If multiple packages, use the largest dimensions
                    if (data.packages && data.packages.length > 0) {
                        const pkg = data.packages[0];
                        document.getElementById('length').value = pkg.length || 12;
                        document.getElementById('width').value = pkg.width || 12;
                        document.getElementById('height').value = pkg.height || 12;
                    }
                    
                    // Update insurance value
                    if (data.insurance_value) {
                        document.querySelector('input[name="insurance"]').value = data.insurance_value;
                    }
                    
                    // Show recommendations if any
                    if (data.recommendations && data.recommendations.length > 0) {
                        alert('Packaging recommendations:\n' + data.recommendations.join('\n'));
                    }
                    
                    // Show suggestion
                    if (data.suggestion) {
                        alert(data.suggestion);
                    }
                }
            })
            .catch(error => {
                alert('Failed to calculate dimensions: ' + error.message);
            })
            .finally(() => {
                // Reset button state
                calculateDimensionsBtn.disabled = false;
                calculateDimensionsBtn.textContent = 'Auto Calculate';
            });
        });
    }
    
    // Optimize packaging with LAFF
    const optimizePackagingBtn = document.createElement('button');
    optimizePackagingBtn.type = 'button';
    optimizePackagingBtn.className = 'px-3 py-1.5 text-sm bg-purple-600 text-white rounded hover:bg-purple-700 transition-colors';
    optimizePackagingBtn.textContent = 'Optimize Packaging';
    optimizePackagingBtn.onclick = function() {
        fetch(APP_URL + '/api/shipment/optimize-laff', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                order_id: {{ $order->order_id }}
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                let message = data.message + '\n\n';
                message += 'Boxes needed: ' + data.optimization.summary.total_boxes + '\n';
                message += 'Packing efficiency: ' + data.optimization.summary.packing_efficiency + '%\n';
                
                if (data.savings) {
                    message += '\nEstimated savings:\n';
                    message += 'Boxes saved: ' + data.savings.boxes_saved + '\n';
                    message += 'Cost saved: $' + data.savings.cost_saved.toFixed(2);
                }
                
                alert(message);
            }
        })
        .catch(error => {
            alert('Failed to optimize packaging: ' + error.message);
        });
    };
    
    // Add optimize button next to estimate shipping button
    const estimateBtn = document.getElementById('estimate-shipping');
    if (estimateBtn) {
        estimateBtn.parentNode.insertBefore(optimizePackagingBtn, estimateBtn.nextSibling);
    }
});

// Go-Parts Ship provider toggle with warehouse filtering and exclusive warehouse support
(function() {
    var gpsWarehouses = @json($gpsWarehouseCodes ?? []);
    var gpsExclusive = @json($gpsExclusiveWarehouses ?? []);
    var warehouseSelect = document.getElementById('warehouse');
    var allOptions = warehouseSelect ? Array.from(warehouseSelect.options) : [];
    var radios = document.querySelectorAll('input[name="shipping_provider"]');
    var ssRadio = document.querySelector('input[name="shipping_provider"][value="shipstation"]');
    var gpsRadio = document.querySelector('input[name="shipping_provider"][value="gopartsship"]');
    var warning = document.getElementById('gps-warning');

    function updateProviderState() {
        var isGps = gpsRadio && gpsRadio.checked;
        if (warning) warning.classList.toggle('hidden', !isGps);
    }

    function checkExclusiveWarehouse() {
        var wh = warehouseSelect ? warehouseSelect.value : '';
        var isExclusive = gpsExclusive.indexOf(wh) !== -1;

        if (isExclusive && gpsRadio) {
            // Force Go-Parts Ship and lock the toggle
            gpsRadio.checked = true;
            radios.forEach(function(r) { r.disabled = true; });
            if (warning) {
                warning.textContent = 'Warehouse ' + wh + ' ships exclusively through Go-Parts Ship.';
                warning.classList.remove('hidden');
            }
        } else {
            // Unlock the toggle
            radios.forEach(function(r) { r.disabled = false; });
            updateProviderState();
        }
    }

    // Provider radio change — filter warehouses
    radios.forEach(function(radio) {
        radio.addEventListener('change', function() {
            var isGps = this.value === 'gopartsship';

            updateProviderState();

            // Filter warehouse dropdown
            if (warehouseSelect && gpsWarehouses.length > 0) {
                var currentVal = warehouseSelect.value;
                warehouseSelect.innerHTML = '';

                allOptions.forEach(function(opt) {
                    if (!isGps || opt.value === '' || gpsWarehouses.indexOf(opt.value) !== -1) {
                        warehouseSelect.appendChild(opt.cloneNode(true));
                    }
                });

                var stillExists = Array.from(warehouseSelect.options).some(function(o) { return o.value === currentVal; });
                warehouseSelect.value = stillExists ? currentVal : '';
            }
        });
    });

    // Warehouse change — check exclusive
    if (warehouseSelect) {
        warehouseSelect.addEventListener('change', checkExclusiveWarehouse);
        // Check on page load in case warehouse is pre-selected
        checkExclusiveWarehouse();
    }
})();
</script>
<style>
/* Dark mode styles for datalist dropdown */
@media (prefers-color-scheme: dark) {
    input[list]::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
    
    /* For browsers that support it */
    datalist {
        background-color: #1f2937 !important;
        color: #d1d5db !important;
    }
    
    datalist option {
        background-color: #1f2937 !important;
        color: #d1d5db !important;
    }
}

/* Apply dark styles when dark class is present */
.dark input[list]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}
</style>
@endsection