{% extends 'base.html' %}

{% load custom_filters %}

{% block title %}Spreadsheet Detail{% endblock %}

{% block content %}
<a href="{% url 'index' %}" class="back-button">Exit App</a>
<style>
/* Spreadsheet Table Styles */
#spreadsheetTable {
    table-layout: fixed;
}
#spreadsheetTable td, #spreadsheetTable th {
    width: 10px;
    height: 10px;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
    font-size: 8px;
    font-weight: normal;
    background-color: #FFFFFF; /* White background for table cells */
    color: #6D6875; /* Dark gray text */
}
#spreadsheetTable tr {
    height: 20px;
}
#spreadsheetTable input {
    width: 80px;
    border: 1px solid #ddd; /* Light border for input fields */
    border-radius: 5px; /* Rounded corners for input fields */
    padding: 5px;
}
@media only screen and (max-width: 767px) {
    #spreadsheetTable td, #spreadsheetTable th {
        padding: 3px;
        font-size: 5px;
    }
    #spreadsheetTable tr {
        height: 10px;
    }
    #spreadsheetTable input {
        width: 60px;
    }
}

/* Button and Notes Section Styles */
.btn-primary {
    background-color: #FF9AA2; /* Pastel red */
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    color: white;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn-primary:hover {
    background-color: #FFD3B4; /* Lighter pastel orange */
    transform: translateY(-2px);
}
.btn-danger {
    background-color: #FF9AA2; /* Pastel red for delete button */
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    color: white;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn-danger:hover {
    background-color: #F78DA7; /* Lighter shade for hover */
    transform: translateY(-2px);
}
.btn-success {
    background-color: #B5EAD7; /* Pastel green */
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    color: white;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn-success:hover {
    background-color: #A0D9C6; /* Slightly darker green on hover */
    transform: translateY(-2px);
}
h2 {
    color: #837E9F; /* Soft purple for headings */
    font-weight: bold;
}
textarea#notesTextarea {
    border: 1px solid #ddd; /* Light border for textarea */
    border-radius: 5px; /* Rounded corners for textarea */
    background-color: #FFFFFF; /* White background for textarea */
    color: #6D6875; /* Dark gray text */}
.back-button {
        display: inline-block;
        padding: 10px 20px;
        margin: 10px 0;
        background-color: #FF9AA2; /* Pastel red */
        color: white;
        border-radius: 5px;
        text-decoration: none; /* Removes underline from the link */
        text-align: center;
    }

    .back-button:hover {
        background-color: #F78DA7; /* Lighter shade for hover */
    }

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
    var baseUrl = "{% url 'update_cell' 0 0 0 %}".replace(/0\/0\/0\//, '');
</script>
<script>
function toggleCellValue(cell) {
    var row = cell.getAttribute("data-row");
    var col = cell.getAttribute("data-col");
    var pk = cell.getAttribute("data-form");
    var updateUrl = `${baseUrl}${row}/${col}/${pk}/`;  // Construct the URL dynamically

    fetch(updateUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': '{{ csrf_token }}'
        },
        body: JSON.stringify({
            'row': row,
            'col': col,
            'pk': pk
        })
    })
    .then(response => response.json())
    .then(data => {
        var updatedCell = document.querySelector(`[data-row="${row}"][data-col="${col}"][data-form="${pk}"]`);
        if (data.success && data.value === true) {
            updatedCell.innerHTML = 'X';
        } else {
            updatedCell.innerHTML = '';
        }
    })
    .catch(error => {
        console.error('Error:', error);
    });
}


    function toggleEditMode() {
        var textarea = document.getElementById("notesTextarea");
        textarea.readOnly = !textarea.readOnly;
        var editButton = document.getElementById("editButton");
        var saveButton = document.getElementById("saveButton");
        if (textarea.readOnly) {
            editButton.innerText = "Edit";
            saveButton.style.display = "none";
        } else {
            editButton.innerText = "Cancel";
            saveButton.style.display = "block";
        }
    }
    function saveNotes() {
        var textarea = document.getElementById("notesTextarea");
        var newNotes = textarea.value;
        
        var formData = new FormData();
        formData.append('notes', newNotes);
        
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "{% url 'save_notes' spreadsheet.id %}", true);
        xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === XMLHttpRequest.DONE) {
                if (xhr.status === 200) {
                    console.log("Notes saved successfully!");
                } else {
                    console.log("Failed to save notes!");
                }
    
                toggleEditMode();
            }
        };
        xhr.send(formData);
    }
    function countIncorrectAnswers() {
        var spreadsheetId = document.querySelector('[data-form]').getAttribute('data-form');
        fetch("{% url 'count_incorrect_answers' 0 %}".replace('0', `${spreadsheetId}`)) 
        .then(response => response.json())
        .then(data => {
            var message = '';
            if (data.length === 0) {
                message = 'No incorrect answers found.';
            } else {
                // Sort data in decreasing order of incorrect answers
                data.sort((a, b) => b.count - a.count);
                var messageParts = [];
                for (var i = 0; i < data.length; i++) {
                    if (data[i].count !== undefined && data[i].question_number !== undefined) {
                        messageParts.push(`Q${data[i].question_number}:${data[i].count}`);
                    }
                }
                message = messageParts.join(', ');
            }
            document.getElementById('count').innerHTML = message;
        })
        .catch(error => {
            console.error('Error fetching incorrect answer counts:', error);
        });
    }
    function redirectToCreateForm() {
        window.location.href = "{% url 'create_spreadsheet' %}";
    }
    function redirectToAvailableForm() {
        window.location.href = "{% url 'spreadsheet_list' %}";
    }
    function redirectToDeleteForm() {
        window.location.href = "{% url 'delete_spreadsheet' spreadsheet.id %}";
    }
    function addRow() {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "{% url 'add_row' spreadsheet.id %}", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        location.reload();  // Reload the page to show the new row
                    } else {
                        console.error('Error adding row:', response.error);
                    }
                } else {
                    console.error('Error adding row:', xhr.statusText);
                }
            }
        };
        var data = `row_name=Name${new Date().getTime()}`;  // Temporary unique name
        xhr.send(data);
    }
</script>
<div class="container p-4">
    <div class="container mt-2">
        <div class="d-flex justify-content-between font-weight-bold">
            <span>{{ spreadsheet.name }}</span>
            <span>{{ spreadsheet.test }}</span>
            <span>{{ spreadsheet.date_field }}</span>
            <span>{{ spreadsheet.class_field }}</span>
        </div>
        <table id="spreadsheetTable" class="table table-bordered mt-4">
            <thead class="thead-dark">
                <tr>
                    <th style="width:70px">Name</th>
                    {% for column in cols %}
                    <th>{{ column }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in rows %}
                <tr>
                    <td><input type="text" data-form="{{ spreadsheet.id }}" data-id="{{ row.id }}" value="{{ row.value }}"></td>
                    {% for column in cols %}
                    <td data-form="{{ spreadsheet.id }}" data-row="{{ row.id }}" data-col="{{ column }}" onclick="toggleCellValue(this)">
                        {% with cell=cell_dict|get_value:row.id|get_value:column %}
                        {% if cell and cell.value %}
                        X
                        {% endif %}
                        {% endwith %}
                    </td>
                    {% endfor %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <button class="btn btn-primary" onclick="addRow()">Add Row</button>
    </div>

    <div class="container mt-5">
        <h2>Notes</h2>
        <div id="notesControls">
            <button id="editButton" class="btn btn-primary" onclick="toggleEditMode()">Edit</button>
            <button id="saveButton" class="btn btn-success" onclick="saveNotes()" style="display: none;">Save</button>
        </div>
        <textarea id="notesTextarea" class="form-control mt-3" rows="4" readonly>{{ notes }}</textarea>
    </div>

    <div class="container mt-5">
        <button class="btn btn-primary" onclick="countIncorrectAnswers()">Count</button>
        <span class="mx-2" id="count"></span>
        <button class="btn btn-primary" onclick="redirectToCreateForm()">New Form</button>
        <button class="btn btn-primary" onclick="redirectToAvailableForm()">Available Forms</button>
        <form method="post" action="{% url 'delete_spreadsheet' spreadsheet.id %}" style="display: inline;">
            {% csrf_token %}
            <button type="submit" class="btn btn-danger">Delete Form</button>
        </form>        
    </div>
</div>
{% endblock %}