{% extends 'common/base.html' %}
{% block content %}
            <div id="ordersContent" class="tab-content">
                <div class="bg-white rounded-lg shadow">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-semibold text-gray-800">Create Expedition Order</h3>
                        <p class="text-sm text-gray-600 mt-1">Request containers to be expedited from the depot</p>
                    </div>
                    <div class="p-6">
                        <form id="orderForm" class="space-y-6">
                            <div class="form-section">
                                <label for="orderType" class="block text-sm font-medium text-gray-700 mb-1">Order Type</label>
                                <div class="flex space-x-4">
                                    <div class="flex items-center">
                                        <input type="radio" id="specificContainer" name="orderType" value="specific" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" checked>
                                        <label for="specificContainer" class="ml-2 block text-sm text-gray-700">Specific Container</label>
                                    </div>
                                    <div class="flex items-center">
                                        <input type="radio" id="anyContainer" name="orderType" value="any" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
                                        <label for="anyContainer" class="ml-2 block text-sm text-gray-700">Any Available Container</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div id="specificContainerFields" class="form-section">
                                <label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>
                                <input type="text" id="orderContainerNumber" name="containerNumber" placeholder="e.g. MSCU1234567" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                <p class="mt-1 text-xs text-gray-500">Enter the full container number including prefix</p>
                            </div>
                            
                            <div id="anyContainerFields" class="form-section hidden grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>
                                    <select id="orderContainerType" name="containerType" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <option value="">Select container type</option>
                                        <option value="20DV">20' Dry Van (20DV)</option>
                                        <option value="40DV">40' Dry Van (40DV)</option>
                                        <option value="40HC">40' High Cube (40HC)</option>
                                        <option value="20RF">20' Reefer (20RF)</option>
                                        <option value="40RF">40' Reefer (40RF)</option>
                                        <option value="20OT">20' Open Top (20OT)</option>
                                        <option value="40OT">40' Open Top (40OT)</option>
                                        <option value="20FR">20' Flat Rack (20FR)</option>
                                        <option value="40FR">40' Flat Rack (40FR)</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label for="containerCondition" class="block text-sm font-medium text-gray-700 mb-1">Container Condition</label>
                                    <select id="containerCondition" name="containerCondition" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                        <option value="any">Any Condition</option>
                                        <option value="new">New / Like New</option>
                                        <option value="good">Good Condition</option>
                                        <option value="acceptable">Acceptable</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">
                                <div>
                                    <label for="pickupDate" class="block text-sm font-medium text-gray-700 mb-1">Pickup Date</label>
                                    <input type="date" id="pickupDate" name="pickupDate" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                </div>
                                
                                <div>
                                    <label for="transportCompany" class="block text-sm font-medium text-gray-700 mb-1">Transport Company</label>
                                    <input type="text" id="transportCompany" name="transportCompany" placeholder="e.g. ABC Trucking" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                                </div>
                            </div>
                            
                            <div class="form-section">
                                <label for="driverInfo" class="block text-sm font-medium text-gray-700 mb-1">Driver Information</label>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <input type="text" id="driverName" name="driverName" placeholder="Driver Name" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    <input type="text" id="driverPhone" name="driverPhone" placeholder="Driver Phone" class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                </div>
                            </div>
                            
                            <div class="form-section">
                                <label for="orderNotes" class="block text-sm font-medium text-gray-700 mb-1">Special Instructions</label>
                                <textarea id="orderNotes" name="orderNotes" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Any special handling instructions or notes"></textarea>
                            </div>
                            
                            <div class="form-section flex justify-end">
                                <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                    Submit Order
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <div class="mt-6 bg-white rounded-lg shadow">
                    <div class="px-6 py-4 border-b border-gray-200">
                        <h3 class="text-lg font-semibold text-gray-800">Active Expedition Orders</h3>
                    </div>
                    <div class="p-6">
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200">
                                <thead>
                                    <tr>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Container</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Pickup Date</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0015</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU2468135</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-20</td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-blue-100 text-blue-800">Approved</span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
                                            <button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
                                            <button class="text-red-600 hover:text-red-800">Cancel</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0014</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">Any 40HC</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-19</td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
                                            <button class="text-blue-600 hover:text-blue-800 mr-3">View</button>
                                            <button class="text-red-600 hover:text-red-800">Cancel</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">ORD-2023-0013</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">MSCU1357924</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-15</td>
                                        <td class="px-4 py-3 whitespace-nowrap">
                                            <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800">Completed</span>
                                        </td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">
                                            <button class="text-blue-600 hover:text-blue-800">View</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
{% endblock content %}