<link href="<?= ROOT_URL ?>/packages/fileupload/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
</script>
<script src="<?= ROOT_URL ?>/packages/fileupload/js/fileinput.min.js" type="text/javascript"></script>
<script src="<?= ROOT_URL ?>/packages/fileupload/themes/bs5/theme.min.js" type="text/javascript"></script>
<script src="<?= ROOT_URL ?>/packages/fileupload/themes/fa6/theme.min.js" type="text/javascript"></script>
<style>
.navy-blue-skin .btn-primary {
    background: #293756 !important;
}

.kv-file-upload,
.file-preview-status,
.file-drag-handle,
.fileinput-remove,
.kv-file-rotate,
.btn-kv-rotate {
    display: none !important
}
</style>
<div class="col-12 col-md-8">
    <div class="card card-cascade">
        <div class="card-header">Resources for <strong><?= getItemName($d[2]) ?></strong></div>
        <div class="card-body">

            <form>
                <div class="form-group">
                    <label class="file-loading custom-file">
                        <input id="file-5" class="file custom-file-input" type="file" name="images"
                            data-preview-file-type="any">
                    </label>
                </div>
            </form>
            <?php
            if (!is_dir('resources/' . $d[2])) {
                mkdir('resources/' . $d[2]);
            }
            $directory = 'resources/' . $d[2] . '/';
            $scanned_directory = array_diff(scandir($directory), array('..', '.', 'save_resource.php'));
            asort($scanned_directory);

            $key = 1;
            foreach ($scanned_directory as $item) {
                $path_parts = pathinfo($directory . $item);

                if ($path_parts['extension'] == "jpg") {
                    $ipv .= '\'<img src="' . $directory . $item . '" class="file-preview-image">\',';
                    $ipvc .= '{previewAsData: false, size: ' . filesize($directory . $item) . ', caption: "' . $item . '", url: "resources/delete_resource.php", key: ' . $key++ . ',extra: {file: "' . $d[2] . '/' . $item . '"}},';
                }

                if ($path_parts['extension'] == "png") {
                    $ipv .= '\'<img src="' . $directory . $item . '" class="file-preview-image">\',';
                    $ipvc .= '{previewAsData: false, size: ' . filesize($directory . $item) . ', caption: "' . $item . '", url: "resources/delete_resource.php", key: ' . $key++ . ',extra: {file: "' . $d[2] . '/' . $item . '"}},';
                }

                if ($path_parts['extension'] == "gif") {
                    $ipv .= '\'<img src="' . $directory . $item . '" class="file-preview-image">\',';
                    $ipvc .= '{previewAsData: false, size: ' . filesize($directory . $item) . ', caption: "' . $item . '", url: "resources/delete_resource.php", key: ' . $key++ . ',extra: {file: "' . $d[2] . '/' . $item . '"}},';
                }

                if ($path_parts['extension'] == "pdf") {
                    $ipv .= "'" . $directory . $item . "',";
                    $ipvc .= '{type: "pdf", size: ' . filesize($directory . $item) . ', caption: "' . $item . '", url: "resources/delete_resource.php", key: ' . $key++ . ',extra: {file: "' . $d[2] . '/' . $item . '"}},';
                }

                if ($path_parts['extension'] == "doc") {
                    $ipv .= "'" . $directory . $item . "',";
                    $ipvc .= '{type: "office", size: ' . filesize($directory . $item) . ', caption: "' . $item . '", url: "resources/delete_resource.php", key: ' . $key++ . ',extra: {file: "' . $d[2] . '/' . $item . '"}},';
                }

                if ($path_parts['extension'] == "xlsx") {
                    $ipv .= "'" . $directory . $item . "',";
                    $ipvc .= '{type: "office", size: ' . filesize($directory . $item) . ', caption: "' . $item . '", url: "resources/delete_resource.php", key: ' . $key++ . ',extra: {file: "' . $d[2] . '/' . $item . '"}},';
                }

                if ($path_parts['extension'] == "html") {
                    $ipv .= "'" . $directory . $item . "',";
                    $ipvc .= '{type: "html", size: ' . filesize($directory . $item) . ', caption: "' . $item . '", url: "resources/delete_resource.php", key: ' . $key++ . ',extra: {file: "' . $d[2] . '/' . $item . '"}},';
                }
            }
            ?>
            <div id="kvFileinputModal" class="file-zoom-dialog modal fade" aria-labelledby="kvFileinputModalLabel"
                tabindex="-1">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header kv-zoom-header">
                            <h6 class="modal-title kv-zoom-title" id="kvFileinputModalLabel"><span
                                    class="kv-zoom-caption"></span> <span class="kv-zoom-size"></span></h6>
                            <div class="kv-zoom-actions"><button type="button"
                                    class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-kv-rotate"
                                    title="Rotate 90 deg. clockwise"><i class="bi-arrow-clockwise"></i></button><button
                                    type="button"
                                    class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-kv-toggleheader"
                                    title="Toggle header" data-toggle="button" aria-pressed="false"><i
                                        class="bi-arrows-expand"></i></button><button type="button"
                                    class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-kv-fullscreen"
                                    title="Toggle full screen" data-toggle="button" aria-pressed="false"><i
                                        class="bi-arrows-fullscreen"></i></button><button type="button"
                                    class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-kv-borderless"
                                    title="Toggle borderless mode" data-toggle="button" aria-pressed="false"><i
                                        class="bi-arrows-angle-expand"></i></button><button type="button"
                                    class="btn btn-sm btn-kv btn-default btn-outline-secondary btn-kv-close"
                                    title="Close detailed preview" data-bs-dismiss="modal" aria-hidden="true"><i
                                        class="bi-x-lg"></i></button></div>
                        </div>
                        <div class="floating-buttons"></div>
                        <div class="kv-zoom-body file-zoom-content krajee-default"></div>
                        <button type="button" class="btn btn-default btn-outline-secondary btn-navigate btn-kv-prev"
                            title="View previous file"><i class="bi-chevron-left"></i></button> <button type="button"
                            class="btn btn-default btn-outline-secondary btn-navigate btn-kv-next"
                            title="View next file"><i class="bi-chevron-right"></i></button>
                        <div class="kv-zoom-description"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
$("#file-5").fileinput({
    theme: 'fa6',
    uploadUrl: '/resources/save_resource.php', // you must set a valid URL here else you will get an error
    deleteUrl: '/resources/delete_resource.php',
    allowedFileExtensions: ['jpg', 'png', 'gif', 'pdf', 'html', 'doc', 'xlsx'],
    showCancel: true,
    initialPreviewAsData: true,
    overwriteInitial: false,
    hideThumbnailContent: false,
    uploadAsync: false,
    maxFileSize: 40000,
    maxFilesNum: 10,
    uploadExtraData: function() {
        return {
            folder: '<?= $d[2] ?>'
        };
    },

    //allowedFileTypes: ['image', 'video', 'flash'],
    slugCallback: function(filename) {
        return filename.replace('(', '_').replace(']', '_');
    },
    initialPreviewDownloadUrl: '<?= $directory ?>/{filename}',
    initialPreview: [
        <?= $ipv ?>
    ],
    initialPreviewConfig: [
        <?= $ipvc ?>
    ],
    append: true
});

$('#file-5').on('filebeforedelete', function(event, key, data) {
    console.log('Key = ' + key);
});
</script>