{% extends 'employee-base.html' %}
{% load static %}

{% block content %}
<table id="preinfoTable" class="table">
    <tr>
        <th style="display: none;">Select</th>
        <th>Preinfo №</th>
        <th>Container №</th>
        <th>Container type</th>
        <th>Line</th>
        <th>Created on</th>
        <th>Created by</th>
    </tr>

    {% for preinfo in preinfos %}
        <tr class="selectable-row" data-preinfo-id="{{ preinfo.id }}">
            <td style="display: none;"><input type="radio" name="preinfo_select" value="{{ preinfo.id }}"></td>
            <td>{{ preinfo.id }}</td>
            <td>{{ preinfo.container_number }}</td>
            <td>{{ preinfo.container_type }}</td>
            <td>{{ preinfo.line.short_name }}</td>
            <td>{{ preinfo.created_on }}</td>
            <td>{{ preinfo.created_by.username }}</td>
        </tr>
    {% endfor %}
</table>

    <div class="buttons-container">
        <button id="editBtn" class="btn" disabled>Edit</button>
        <button id="deleteBtn" class="btn" disabled>Delete</button>
    </div>

    <!-- Modal -->
    <div id="editModal" class="modal" style="display: none;">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>Edit Preinfo</h2>
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="preinfo_id" id="preinfoIdInput">
                {{ form.as_p }}
                <button type="submit">Save</button>
            </form>
        </div>
    </div>

    <style>
        .selectable-row {
            cursor: pointer;
        }
        .selected-row {
            background-color: #e6f3ff;
        }    
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
        }
        .close {
            float: right;
            cursor: pointer;
        }
        .btn[disabled] {
            opacity: 0.5;
            cursor: not-allowed;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const editBtn = document.getElementById('editBtn');
            const deleteBtn = document.getElementById('deleteBtn');
            const modal = document.getElementById('editModal');
            const closeBtn = document.querySelector('.close');
            const preinfoIdInput = document.getElementById('preinfoIdInput');
            const rows = document.querySelectorAll('.selectable-row');

            rows.forEach(row => {
                row.addEventListener('click', function() {
                    // Remove previous selection
                    document.querySelector('.selected-row')?.classList.remove('selected-row');
                    
                    // Select current row
                    this.classList.add('selected-row');
                    
                    // Check the hidden radio button
                    const radio = this.querySelector('input[type="radio"]');
                    radio.checked = true;
                    
                    // Enable buttons
                    editBtn.disabled = false;
                    deleteBtn.disabled = false;
                });
            });            
            
            // Enable/disable buttons based on selection
            document.querySelectorAll('input[name="preinfo_select"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    console.log('Radio button changed:', this.value);  // Debug log
                    editBtn.disabled = false;
                    deleteBtn.disabled = false;
                });
            });

            // Edit button click
            editBtn.addEventListener('click', function() {
                const selectedId = document.querySelector('input[name="preinfo_select"]:checked').value;
                preinfoIdInput.value = selectedId;
            
                // Fetch preinfo data via AJAX
                const formData = new FormData();
                formData.append('preinfo_id', selectedId);
            
                fetch('', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                    }
                })
                .then(response => response.json())
                .then(data => {
                    document.getElementById('id_container_number').value = data.container_number;
                    document.getElementById('id_container_type').value = data.container_type;
                    document.getElementById('id_line').value = data.line;
                    modal.style.display = 'block';
                });
            });

            // Close modal
            closeBtn.addEventListener('click', function() {
                modal.style.display = 'none';
            });

            // Close modal when clicking outside
            window.addEventListener('click', function(event) {
                if (event.target == modal) {
                    modal.style.display = 'none';
                }
            });
        });
    </script>
{% endblock content %}