{% extends 'layout.twig' %}

{% block body %}
    {% include 'nav.twig' %}
    <h1>{{ title }}</h1>
    {% if options[0]|length > 0 and folder|length > 0%}
        <iframe id="pdfViewer" style="width: 100vw;height: 70vh" src="fileserver.php?folder={{ folder }}&file={{ options[0].file_name }}" onload="logStat('view: {{ options[0].file_name }}')"></iframe>
    {% endif %}

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-auto">
                {% if options|length > 0 %}
                <select id="pdfSelect" class="form-select" onchange="change_part(this)">
                    {% for i in options %}
                        <option value='{{i.file_name}}'>{{ i.custom_name }}</option>
                    {% endfor %}
                </select>
                {% endif %}
                {% if options[0]|length > 0 and folder|length > 0%}
                    <a id="downloadLink" href="fileserver.php?download&download_name={{custom_name}}&folder={{ folder }}&file={{ options[0].file_name }}" class="btn btn-primary mt-2" download onclick="logStat('download: {{ options[0].file_name }}')">Download</a>
                {% endif %}
                {% if canedit %}
                    {% if options[0]|length > 0 and folder|length > 0%}
                        <button id="deleteBtn" class="btn btn-danger mt-2" onclick="deleteFile()">Delete</button>
                    {% endif %}
                    <h5 class="mt-4">Upload New File</h5>
                    <form id="uploadForm" class="p-3 border rounded">
                        <div class="mb-3">
                            <label class="form-label">Custom Name:</label>
                            <input class="form-control" required name="custom_name" placeholder="Enter custom name">
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Upload PDF:</label>
                            <input name="file" type="file" class="form-control" accept=".pdf">
                        </div>
                        <button type="button" class="btn btn-success w-100" onclick="uploadFile()">Upload</button>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        function logStat(stat) {
            fetch("api.php?method=add_stat", {
                method: "POST",
                headers: { "Content-Type": "application/x-www-form-urlencoded" },
                body: `stat=${encodeURIComponent(stat)}`
            }).catch(error => console.error("Error logging stat:", error));
        }

        function change_part(which) {
            let selectedFile = which.value;
            document.getElementById('pdfViewer').src = `fileserver.php?folder={{ folder }}&file=${selectedFile}`;
            document.getElementById('downloadLink').href = `fileserver.php?download&download_name={{custom_name}}&folder={{ folder }}&file=${selectedFile}`;
            logStat(`view: ${selectedFile}`);
        }

        function uploadFile() {
            let formData = new FormData(document.getElementById('uploadForm'));
            fetch("api.php?method=upload_practice_part", {
                method: "POST",
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                if (data.status === 200) {
                    location.reload();
                }
            })
            .catch(error => console.error("Error:", error));
        }

        function deleteFile() {
            let selectedFile = document.getElementById("pdfSelect").value;
            fetch("api.php?method=delete_practice_part", {
                method: "POST",
                headers: { "Content-Type": "application/x-www-form-urlencoded" },
                body: `file_name=${encodeURIComponent(selectedFile)}`
            })
            .then(response => response.json())
            .then(data => {
                alert(data.message);
                if (data.status === 200) {
                    logStat(`delete: ${selectedFile}`);
                    location.reload();
                }
            })
            .catch(error => console.error("Error:", error));
        }
    </script>
    <script src="js/stats.js"></script>
{% endblock %}