<style>
/* Hide sorting icons in DataTables header */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    display: none !important;
}

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.table-bordered {
        border-collapse: collapse !important;
        width: 100%; /* Stretch to container but handle overflow */
    }

    table.table-bordered th,
    table.table-bordered td {
        border: 1px solid #dee2e6 !important;
        padding: 4px 8px !important;
        white-space: nowrap; /* Prevents wrapping */
    }

    table.table-bordered th {
        text-align: center;
        background-color: #f8f9fa;
    }

    @media (max-width: 576px) {
        table.table-bordered th,
        table.table-bordered td {
            font-size: 12px;
            padding: 3px 6px;
        }
    }
    .file-upload-box {
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
    margin-bottom: 10px;
    border-radius: 10px;
}

.file-upload-box:hover {
    background: #f9f9f9;
}

.file-upload-box input[type="file"] {
    display: none;
}

.preview-img {
    margin-top: 10px;
    max-height: 100px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

</style>
<script>
document.querySelectorAll('.file-upload-box').forEach(box => {
    const input = box.querySelector('input[type="file"]');
    const previewId = box.getAttribute('data-preview-id');
    const previewImg = document.getElementById(previewId);

    box.addEventListener('click', () => input.click());

    box.addEventListener('dragover', (e) => {
        e.preventDefault();
        box.style.backgroundColor = '#eef';
    });

    box.addEventListener('dragleave', () => {
        box.style.backgroundColor = '';
    });

    box.addEventListener('drop', (e) => {
        e.preventDefault();
        box.style.backgroundColor = '';
        if (e.dataTransfer.files.length) {
            input.files = e.dataTransfer.files;
            showPreview(input.files[0], previewImg);
        }
    });

    input.addEventListener('change', () => {
        if (input.files.length) {
            showPreview(input.files[0], previewImg);
        }
    });

    function showPreview(file, imgElement) {
        if (!file.type.startsWith('image/')) return;
        const reader = new FileReader();
        reader.onload = e => imgElement.src = e.target.result;
        reader.readAsDataURL(file);
    }
});
</script>

<script>
document.querySelectorAll('.file-upload-box input[type="file"]').forEach(input => {
    input.addEventListener('change', function () {
        const file = this.files[0];
        if (file && file.type.startsWith('image/')) {
            const reader = new FileReader();
            const previewId = this.closest('.file-upload-box').dataset.previewId;
            reader.onload = function (e) {
                const previewImage = document.getElementById(previewId);
                if (previewImage) {
                    previewImage.src = e.target.result;
                }
            };
            reader.readAsDataURL(file);
        }
    });
});
</script>

