{% extends 'base_layout.html' %}
{% load static %}
{% block content %}
    <main>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="mt-4">Mainīt Mašīnmācīšanās Modeli</h1>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-md-12">
                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <div class="form-group">
                            <label for="modelFile">Augšupielādēt Jaunu Modeļa Failu:</label>
                            <input type="file" class="form-control-file" id="modelFile" name="modelFile" required>
                        </div>
                    </form>
                <div class="col-md-2">
                    <h3>Modeļa Klases</h3>
                    <ul id="classList" class="list-group">
                        <!-- Classes will be populated here -->
                    </ul>
                </div>
                <button type="button" class="btn btn-primary m-2" onclick="saveModel()">Saglabāt modeli</button>
                </div>
            </div>
            <div id="CurrentMLModelsTable"> 
            <!-- Current ML Models will be populated here -->
            </div>
            <div class="row mt-4">
                <div class="col-md-4">
                    <h3>Pašreizējās Klases</h3>
                    <ul id="CurrentClasses" class="list-group">
                        <!-- Current classes will be populated here -->
                    </ul>
                </div>
                <div class="col-md-8">
                    <h3>Piešķirt Klases</h3>
                    <div class="grid-container">
                        {% for cultivar in cultivares %}
                             <div class="border border-dark p-2">
                                <h4>{{ cultivar.title }}</h4>
                                {% for stage in yield_stages %}
                                    <div class="yield-stage-box">
                                        <label>{{ stage.title }}</label>
                                        <div class="dropzone_end" data-cultivar-id="{{ cultivar.id }}" data-stage-id="{{ stage.id }}" ondrop="handleDrop(event)" ondragover="handleDragOver(event)" style="border: 2px dashed black; min-height: 40px; padding: 10px; margin-top: 10px;">
                                            <input type="hidden" name="yield_{{ cultivar.id }}_{{ stage.id }}" value="">
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-md-12 p-3">
                    <button type="submit" class="btn btn-primary" onclick="SaveChanges()">Saglabāt Izmaiņas</button>
                </div>
            </div>
        </div>
    </main>

    <style>
        .list-group-item {
            cursor: grab;
        }
        .grid-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }
        .grid-item {
            border: 1px solid #ccc;
            padding: 10px;
            min-height: 100px;
        }
    </style>

    <script text="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        const url = "{% url 'get_current_ml_models' %}";
        fetch(url, {
            method: 'GET',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            const modelsTable = document.getElementById('CurrentMLModelsTable');
            modelsTable.innerHTML = '';
            if (data.length > 0){
                const table = document.createElement('table');
                table.classList.add('table');
                const thead = document.createElement('thead');
                const theadRow = document.createElement('tr');
                const th1 = document.createElement('th');
                th1.textContent = 'Modelis';
                theadRow.appendChild(th1);
                const th2 = document.createElement('th');
                th2.textContent = 'Klases';
                theadRow.appendChild(th2);
                const th3 = document.createElement('th');
                th3.textContent = 'Darbības';
                const th4 = document.createElement('th');
                th4.textContent = 'Tips';
                theadRow.appendChild(th3);
                thead.appendChild(theadRow);
                table.appendChild(thead);
                const tbody = document.createElement('tbody');
                for (let i = 0; i < data.length; i++) {
                    const model = data[i];
                    const tr = document.createElement('tr');
                    const td1 = document.createElement('td');
                    td1.textContent = model.title;
                    tr.appendChild(td1);
                    const td2 = document.createElement('td');
                    // model.classes is a json string
                    // remove the square brackets and double quotes
                    td2.textContent = model.classes.replace(/[\[\]"]+/g, '');
                    tr.appendChild(td2);
                    const td3 = document.createElement('td');
                    const td4 = document.createElement('td');
                    // show model type
                    td4.textContent = model.model_type;
                    tr.appendChild(td4);
                    const deleteButton = document.createElement('button');
                    deleteButton.textContent = 'Dzēst';
                    deleteButton.classList.add('btn', 'btn-danger');
                    deleteButton.addEventListener('click', () => deleteModel(model.id));
                    td3.appendChild(deleteButton);
                    tr.appendChild(td3);
                    tbody.appendChild(tr);
                }
                table.appendChild(tbody);
                modelsTable.appendChild(table);

                //  add the models to the CurrentClasses list
                const currentClasses = document.getElementById('CurrentClasses');
                currentClasses.innerHTML = '';
                for (let i = 0; i < data.length; i++) {
                    const model = data[i];
                    // model.classes is a json string
                    // remove the square brackets and double quotes
                    const classes = model.classes.replace(/[\[\]"]+/g, '').split(',');
                    for (let j = 0; j < classes.length; j++) {
                        const listItem = document.createElement('li');
                        listItem.textContent = classes[j];
                        listItem.setAttribute('data-model-id', model.id);
                        listItem.classList.add('list-group-item');
                        listItem.setAttribute('draggable', 'true');
                        listItem.addEventListener('dragstart', handleDragStart);
                        currentClasses.appendChild(listItem);
                    }
                }
                // add active classes to the dropzones
                for (let i = 0; i < data.length; i++) {
                    const model = data[i];
                    const activeClasses = model.active_classes;
                    for (let j = 0; j < activeClasses.length; j++) {
                        const activeClass = activeClasses[j];
                        const dropzone = document.querySelector(`.dropzone_end[data-cultivar-id="${activeClass.cultivar_id}"][data-stage-id="${activeClass.stage_id}"]`);
                        const listItem = document.createElement('div');
                        listItem.textContent = activeClass.class;
                        listItem.setAttribute('data-model-id', model.id);
                        dropzone.appendChild(listItem);
                        // remove the input field
                        dropzone.querySelector('input').remove();
                    }
                }
            }
            else {
                modelsTable.textContent = 'Nav modeļu, kuri ir sistēmā.';
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });

    function deleteModel(modelId) {
        const url = "{% url 'delete_ml_model' %}";
        const formData = new FormData();
        formData.append('modelId', modelId);
        fetch(url, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
            }
            else {
                alert('Modelis tika dzēsts!');
                location.reload();
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    }

    document.getElementById('modelFile').addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            // remove the previous classes
            const classList = document.getElementById('classList');
            classList.innerHTML = '';
            const allowedExtensions = ['pt', 'h5','pth'];
            const fileExtension = file.name.split('.').pop().toLowerCase();
            if (!allowedExtensions.includes(fileExtension)) {
                alert('Nepareizs faila formāts. Lūdzu, augšupielādējiet failu ar paplašinājumu .pt vai .h5.');
                event.target.value = ''; // Clear the input
            } else {
                const maxSizeInBytes = 100 * 1024 * 1024; // 100 MB
                if (file.size > maxSizeInBytes) {
                    alert('Faila izmērs ir pārāk liels. Maksimālais atļautais izmērs ir 100 MB.');
                    event.target.value = ''; // Clear the input
                }
            }
        }
        // add a loading spinner to the model classes list
        const classList = document.getElementById('classList');
        classList.innerHTML = '<div class="spinner-border text-dark" role="status"><span class="sr-only">Loading...</span></div>';
        // call api and check if the model classes
        const url = "{% url 'check_ml_file' %}";
        const formData = new FormData();
        formData.append('modelFile', file);
        fetch(url, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
                event.target.value = ''; // Clear the input
            }
            else {
                const classes = data.classes;
                // { 0: 'class1', 1: 'class2', ... }
                const classList = document.getElementById('classList');
                classList.innerHTML = '';
                for (const key in classes) {
                    const listItem = document.createElement('li');
                    listItem.textContent = classes[key];
                    classList.appendChild(listItem);
                    // remove the loading spinner
                    if (classList.querySelector('.spinner-border')){
                        classList.querySelector('.spinner-border').remove();
                    }
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
    });


    function handleDragStart(event) {
        event.dataTransfer.setData('text/plain', event.target.textContent);
        event.dataTransfer.setData('model-id', event.target.getAttribute('data-model-id'));
    }

    document.querySelectorAll('.grid-item').forEach(item => {
        item.addEventListener('dragover', handleDragOver);
        item.addEventListener('drop', handleDrop);
    });

    function handleDragOver(event) {
        event.preventDefault();
    }

    function handleDrop(event) {
        event.preventDefault();
        const data = event.dataTransfer.getData('text/plain');
        const dropTarget = event.target;
        const modelId = event.dataTransfer.getData('model-id');

        // Clear previous content
        dropTarget.innerHTML = '';

        // Add new content
        const newElement = document.createElement('div');
        newElement.textContent = data;
        newElement.setAttribute('data-model-id', modelId);
        dropTarget.appendChild(newElement);
    }

        function SaveChanges() {
        const url = "{% url 'active_classes' %}";
        const formData = new FormData();
        // get all the dropzones
        const dropzones = document.querySelectorAll('.dropzone_end');
        array = [];
        for (let i = 0; i < dropzones.length; i++) {
            console.log(dropzones[i]);
            const dropzone = dropzones[i];
            const cultivarId = dropzone.getAttribute('data-cultivar-id');
            const stageId = dropzone.getAttribute('data-stage-id');
            // if the dropzone is empty, skip it
            if (dropzone.children.length === 0) {
                continue;
            }
            const modelId = dropzone.children[0].getAttribute('data-model-id');
            array.push({
                'cultivarId': cultivarId,
                'stageId': stageId,
                'modelId': modelId,
                'class': dropzone.children[0].textContent
            });
        }
        formData.append('data', JSON.stringify(array));

        fetch(url, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRFToken': '{{ csrf_token }}'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
            }
            else {
                alert('Izmaiņas tika saglabātas!');
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
        }

        function saveModel() {
            const url = "{% url 'save_ml_model' %}";
            const formData = new FormData();
            const modelFile = document.getElementById('modelFile').files[0];
            formData.append('modelFile', modelFile);
            formData.append('modelClasses', JSON.stringify(Array.from(document.getElementById('classList').children).map(item => item.textContent)));
            fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert(data.error);
                }
                else {
                    alert('Modelis tika saglabāts!');
                    location.reload();
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        }

    </script>
{% endblock %}