{{ template "preamble.html" }}
    <p><a href="/trainings/add"><button>Add New Training</button></a></p>

    <h1>Trainings</h1>
<table>
    <thead>
        <tr>
            <th>Title</th>
            <th>Type</th>
            <th>Mode</th>
            <th>Start</th>
            <th>End</th>
            <th>Status</th>
            <th>Trainers</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {{range .Trainings}}
        <tr>
            <td>{{.Title}}</td>
            <td>{{.TrainingType}}</td>
            <td>{{.Mode}}</td>
            <td>{{.Start.Format "2006-01-02 15:04"}}</td>
            <td>{{.End.Format "2006-01-02 15:04"}}</td>
            <td>{{.Status}}</td>
            <td>
                {{if .Trainers}}
                    {{range .Trainers}}
                        {{.Name}} ({{.Email}})<br>
                    {{end}}
                {{else}}
                    No trainers assigned
                {{end}}
            </td>
            <td>
                <button onclick="openAssignTrainerModal({{.ID}})">Assign Trainer</button>
            </td>
        </tr>
        {{end}}
    </tbody>
</table>

<!-- Assign Trainer Modal -->
<div id="assignTrainerModal" style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:white; padding:20px; border:1px solid black;">
    <h3>Assign Trainer</h3>
    <form id="assignTrainerForm" >
        <input type="hidden" id="training_id" name="training_id">
        <label for="trainer">Select Trainer:</label>
        <select id="trainer_id" name="trainer_id">
            {{range .Trainers}}
            <option value="{{.ID}}">{{.Name}} ({{.Email}})</option>
            {{end}}
        </select>
        <button type="submit">Assign</button>
        <button type="button" onclick="closeAssignTrainerModal()">Cancel</button>
    </form>
</div>

<script>
    function openAssignTrainerModal(trainingId) {
        document.getElementById('training_id').value = trainingId;
        document.getElementById('assignTrainerModal').style.display = 'block';
    }

    function closeAssignTrainerModal() {
        document.getElementById('assignTrainerModal').style.display = 'none';
    }

    document.getElementById('assignTrainerForm').addEventListener('submit', function(event) {
        event.preventDefault();

        const formData = new FormData(this); // Create FormData from the form element
        console.log(formData);

        fetch('/trainings/assign_trainer', {
            method: 'POST',
            body: formData // Send as form data
        }).then(response => {
            if (response.ok) {
                location.reload();
            } else {
                alert('Failed to assign trainer');
            }
        });
    });
</script>



{{template "epilogue.html" }}