{% extends 'dashboard_layout.html' %}
{% block content %}
{% load static %}

<!-- Global loader that appears on page load and during data fetch -->
<div id="globalLoader" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 9999;">
    <!-- <div style="color: white;">Loading...</div> -->
    <img src="{% static 'loaders/ajax-loader.gif'  %}" />
</div>

<!-- Modal for PDF upload -->
<div class="modal" tabindex="-1" id="uploadPdfModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">File Upload</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="closePdfModal()"></button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{% url 'upload-pdf' %}" id="uploadForm" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="fileTitle" style="font-weight: 700; color:#6610f2">File Title</label><br>
                        <input type="text" class="form-control" id="fileTitle" name="fileTitle" placeholder="Enter file title..." required>
                    </div><br>
                    <div class="form-group">
                        <label for="file" style="color: blue; cursor: pointer;"><u>Click here to choose a file</u></label>
                        <input type="file" class="form-control-file" id="file" name="file" required onchange="displayFileName(this)">
                    </div>
                    <div id="fileNameContainer" style="display: none;"></div>
                    <button type="submit" class="btn btn-primary" id="uploadButton">Upload</button>
                </form>
                <div id="uploadingLoader" style="display: none; color: blue;">Uploading...</div> <!-- File upload loader -->
            </div>
        </div>
    </div>
</div>

<!-- Display Uploaded PDFs -->
<div class="content" id="modal-content">
    <div class="container-fluid">
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-primary" style="display: flex; justify-content: space-between; align-items: center;">
                        <h4 class="card-title pt-2">Uploaded Files</h4>
                        <button type="button" style="background-color: white;color:#6610f2;font-weight: 600;" onclick="uploadPdfModal()" class="btn btn-primary">Upload</button>
                    </div>
                    <div class="card-body">
                        <div id="pdfLoader" style="display: none;">Loading...</div> <!-- PDF data loader -->
                        <table class="table" id="pdfTable">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>PDF Link</th>
                                    <th>Created_At</th>
                                    <th>Updated_At</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="pdfTableBody">
                                <!-- Table rows will be inserted here dynamically -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    // Display selected file name
    function displayFileName(input) {
        var fileName = input.files[0].name;
        document.getElementById('fileNameContainer').innerHTML = '<p>Selected file: ' + fileName + '</p>';
        document.getElementById('fileNameContainer').style.display = 'block';
    }

    // Disable submit button and show upload loader
    document.getElementById('uploadForm').addEventListener('submit', function (event) {
        document.getElementById('uploadButton').disabled = true; // Disable button
        document.getElementById('uploadingLoader').style.display = 'block'; // Show loader
        document.getElementById('globalLoader').style.display = 'flex'; // Show global loader
    });

    // Copy PDF link to clipboard
    function copyToClipboard(text) {
        var textArea = document.createElement("textarea");
        textArea.value = text;
        document.body.appendChild(textArea);
        textArea.select();
        try {
            document.execCommand('copy');
            alert('Link copied to clipboard');
        } catch (err) {
            alert('Failed to copy the link');
        }
        document.body.removeChild(textArea);
    }

    // Function to reload page after form submission
    document.getElementById('uploadForm').addEventListener('submit', function () {
        // Reload the page
        location.reload();
    });

    // Fetch PDF data and update the table
    window.addEventListener('load', function () {
        document.getElementById('globalLoader').style.display = 'flex'; // Show global loader
        fetchPDFData();
    });

    // Function to fetch updated PDF data from the server
    function fetchPDFData() {
        fetch('{% url "fetch-pdf-data" %}')
            .then(response => response.json())
            .then(data => {
                const pdfTableBody = document.querySelector('#pdfTableBody');
                pdfTableBody.innerHTML = ''; // Clear existing table rows
                data.uploaded_files.forEach(pdf => {
                    const row = `
                        <tr>
                            <td>${pdf.file_name}</td>
                            <td>${pdf.file_link}</td>
                            <td>${pdf.created_at}</td>
                            <td>${pdf.updated_at}</td>
                            <td><button class="btn btn-secondary" style="background-color:#4caf50;color:white" onclick="copyToClipboard('${pdf.file_link}')">Copy Link</button></td>
                        </tr>
                    `;
                    pdfTableBody.insertAdjacentHTML('beforeend', row);
                });
                document.getElementById('globalLoader').style.display = 'none'; // Hide global loader after data is fetched
            })
            .catch(error => {
                console.error('Error fetching PDF data:', error);
                document.getElementById('globalLoader').style.display = 'none';
            });
    }

    // Show the upload modal
    function uploadPdfModal() {
        $('#uploadPdfModal').show();
    }

    // Close the upload modal
    function closePdfModal() {
        $('#uploadPdfModal').hide();
    }
</script>

{% endblock %}