{% extends 'common/base.html' %}
{% block content %}

            <div id="preinfoContent" class="tab-content active">
                <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">Submit Container Preinfo</h3>
                        <p class="text-sm text-gray-600 mt-1">Provide information about containers that will arrive at the depot</p>
                    </div>
                    <div class="p-6">
                        <form id="preinfoForm" class="space-y-6" method="POST" >
                          
                            {{ form.as_p }}
                            {% csrf_token %}
{#                            <div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">#}
{#                                <div>#}
{#                                    <label for="containerNumber" class="block text-sm font-medium text-gray-700 mb-1">Container Number</label>#}
{#                                    <input type="text" id="containerNumber" 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>#}
{#                                    <label for="containerType" class="block text-sm font-medium text-gray-700 mb-1">Container Type</label>#}
{#                                    <select id="containerType" 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" required>#}
{#                                        <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>#}
{##}
{#                            <div class="form-section grid grid-cols-1 md:grid-cols-2 gap-6">#}
{#                                <div>#}
{#                                    <label for="estimatedArrival" class="block text-sm font-medium text-gray-700 mb-1">Estimated Arrival Date</label>#}
{#                                    <input type="date" id="estimatedArrival" name="estimatedArrival" 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="vesselVoyage" class="block text-sm font-medium text-gray-700 mb-1">Vessel/Voyage</label>#}
{#                                    <input type="text" id="vesselVoyage" name="vesselVoyage" placeholder="e.g. MAERSK SEVILLE / 123E" class="w-full 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="additionalInfo" class="block text-sm font-medium text-gray-700 mb-1">Additional Information</label>#}
{#                                <textarea id="additionalInfo" name="additionalInfo" 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 items-center">#}
{#                                <input type="checkbox" id="damageCheck" name="damageCheck" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">#}
{#                                <label for="damageCheck" class="ml-2 block text-sm text-gray-700">Container has visible damage</label>#}
{#                            </div>#}
{##}
{#                            <div id="damageDetails" class="form-section hidden">#}
{#                                <label for="damageDescription" class="block text-sm font-medium text-gray-700 mb-1">Damage Description</label>#}
{#                                <textarea id="damageDescription" name="damageDescription" 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="Describe the damage in detail"></textarea>#}
{#                            </div>#}

                            <div class="form-section flex justify-end space-x-3">
                                <button type="button" id="addMoreContainer" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500">
                                    Add Another Container
                                </button>
                                <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 Preinfo
                                </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">Recent Preinfo Submissions</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">Container</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>
                                        <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Est. Arrival</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">
                                    {% for preinfo in recent %}
                                    <tr>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">{{ preinfo.container_number }}</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{{ preinfo.container_type }}</td>
                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">{{ preinfo.created_on }}</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">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">Edit</button>
                                            <button class="text-red-600 hover:text-red-800">Cancel</button>
                                        </td>
                                    </tr>
                                    {% endfor %}
{#                                    <tr>#}
{#                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU9876543</td>#}
{#                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">40HC</td>#}
{#                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-17</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">Received</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>#}
{#                                        </td>#}
{#                                    </tr>#}
{#                                    <tr>#}
{#                                        <td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">MSCU1122334</td>#}
{#                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">20RF</td>#}
{#                                        <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-700">2023-06-16</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">Delayed</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">Edit</button>#}
{#                                            <button class="text-red-600 hover:text-red-800">Cancel</button>#}
{#                                        </td>#}
{#                                    </tr>#}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
{% endblock content %}