{% extends 'list-crud.html' %}
{% load static %}

{% block filter %}
<div class="filter-form">
    <form method="GET">
        <span style="display: flex; align-items: center; width: 100%;">
            <label for="date" style="margin-right: 8px;">Date:</label>
            <input type="date" id="date" name="date" value="{{ request.GET.date }}" style="margin-right: 20px;">

            <label for="company" style="margin-right: 8px;">Company:</label>
            <select id="company" name="company" style="margin-right: 20px;">
                <option value="">Select company</option>
                {% for company in companies %}
                    <option value="{{ company.id }}" {% if request.GET.company|add:'0' == company.id %}selected{% endif %}>
                        {{ company.name }}
                    </option>
                {% endfor %}
            </select>
            
            <button type="submit">Search</button>
        </span>
    </form>
</div>
{% endblock %}

{% block selection %}
"multiple"
{% endblock selection %}

{% block table_header %}
    <th>Container Number</th>
    <th>Type</th>
    <th>Company</th>
    <th>Expedited Date</th>
{% endblock table_header %}

{% block table_data %}
    <td class="td-left">{{ object.number }}</td>
    <td>{{ object.container_type }}</td>
    <td class="td-left">{{ object.line.company.short_name }}</td>
    <td>{{ object.expedited_on|date:"Y-m-d h:m:s" }}</td>
{% endblock table_data %}

{% block buttons %}
<button id="createPaymentBtn" class="btn btn-primary" data-requires-selection disabled>Create Payment</button>
{% endblock buttons %}

{% block create_modal_header %}
    <h2>Create Container</h2>
{% endblock %}

{% block modal_header %}
    <h2>Edit Container</h2>
{% endblock modal_header %}

{% block custom_js %}
<script>
document.getElementById('createPaymentBtn').addEventListener('click', function() {
    const selectedIds = Array.from(document.querySelectorAll('.selected-row'))
        .map(row => row.dataset.id);
        
    const dateInput = document.getElementById('date').value;
    const companySelect = document.getElementById('company').value;
    
    
    if (selectedIds.length > 0) {
        const params = new URLSearchParams({
            containers: selectedIds.join(','),
            date: dateInput,
            company: companySelect
        });
        
        window.location.href = '{% url "payments_create" %}?' + params.toString();
    }
});
</script>
{% endblock custom_js %}