Your IP : 216.73.216.86

Current Path : /home/emeraadmin/public_html/pages/emeraadmin/
Upload File :
Current File : /home/emeraadmin/public_html/pages/emeraadmin/uploadSchedule.php

<?php include('head.php'); ?>

<div class="main-content">
    <div class="container-fluid">
        <div class="page-header">
            <div class="row align-items-end">
                <div class="col-lg-8">
                    <div class="page-header-title">
                        <i class="ik ik-upload bg-blue"></i>
                        <div class="d-inline">
                            <h5>Upload Schedules</h5>
                            <span>Upload schedules via CSV or Excel files</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4"></div>
            </div>
        </div>
        <div class="card">
            <div class="card-header">
                <h3>Upload Schedules</h3>
            </div>
            <div class="card-body">
                <div id="drop-area" class="drop-area">
                    <form id="uploadForm" class="my-form" enctype="multipart/form-data">
                        <p>Drag and drop your file here, or click to select it.</p>
                        <input type="file" name="csv_file" id="csv_file" accept=".csv, .xls, .xlsx">

                        <!-- Hidden current user id -->
                        <input type="hidden" name="current_user_id" value="<?php echo $companyId; ?>">
                    </form>
                </div>
                <button id="uploadBtn" class="btn btn-primary">Upload</button>
                <div id="overlay" class="overlay">
                    <div class="loader"></div>
                    <p>Uploading...</p>
                </div>
                <div id="responseMessage"></div>
            </div>
        </div>
    </div>
</div>

<style>
    .drop-area {
        border: 2px dashed #ccc;
        padding: 20px;
        text-align: center;
        transition: border .3s ease-in-out;
    }

    .drop-area.highlight {
        border-color: #007bff;
    }

    .button {
        display: inline-block;
        padding: 8px 20px;
        background-color: #007bff;
        color: #fff;
        cursor: pointer;
        border-radius: 4px;
        margin-top: 10px;
    }

    .button:hover {
        background-color: #0056b3;
    }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        justify-content: center;
        align-items: center;
        z-index: 999;
    }

    .overlay .loader {
        border: 6px solid #f3f3f3;
        border-radius: 50%;
        border-top: 6px solid #3498db;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }
</style>

<!-- SweetAlert CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        let dropArea = document.getElementById('drop-area');
        let overlay = document.getElementById('overlay');
        let responseMessage = document.getElementById('responseMessage');

        // Prevent default drag behaviors
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });

        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }

        // Highlight drop area when item is dragged over it
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });

        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });

        function highlight(e) {
            dropArea.classList.add('highlight');
        }

        function unhighlight(e) {
            dropArea.classList.remove('highlight');
        }

        // Handle dropped files
        dropArea.addEventListener('drop', handleDrop, false);

        function handleDrop(e) {
            let dt = e.dataTransfer;
            let files = dt.files;
            handleFiles(files);
        }

        function handleFiles(files) {
            const formData = new FormData();
            formData.append('csv_file', files[0]);
            formData.append('current_user_id', <?php echo $companyId; ?>);

            // Show overlay while uploading
            overlay.style.display = 'flex';

            fetch('../process_upload.php', {
                method: 'POST',
                body: formData
            }).then(response => response.json())
                .then(data => {
                    console.log(data);
                    // Hide overlay on response
                    overlay.style.display = 'none';
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: data.message,
                            text: 'File uploaded successfully'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Upload Failed',
                            text: 'File upload failed: ' + data.error
                        });
                    }
                    // Display response message
                    responseMessage.innerHTML = data.success ? '<div class="alert alert-success">Schedule uploaded successfully.</div>' : '<div class="alert alert-danger">File upload failed: ' + data.error + '</div>';
                }).catch(error => {
                console.error('Error:', error);
                // Hide overlay on error
                overlay.style.display = 'none';
                Swal.fire({
                    icon: 'error',
                    title: 'Upload Failed',
                    text: 'An error occurred while uploading the file.'
                });
                // Display error message
                responseMessage.innerHTML = '<div class="alert alert-danger">An error occurred while uploading the file.</div>';
            });
        }

        // Optional: Handle form submission (if needed)
        document.getElementById('uploadBtn').addEventListener('click', function(e) {
            e.preventDefault();
            handleFiles(document.getElementById('csv_file').files);
        });
    });
</script>

<?php include('footer.php'); ?>