@extends('blocks.modal', ['modalName' => 'show-quiz-files-modal'])

@section('modal-header')

    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col center">
            <h4 class="mdl-color-text--indigo" id="show-quiz-files-header-type">Materiały do quizu</h4>
        </div>
    </div>

@overwrite

@section('modal-content')


    <div class="mdl-grid">
        <div class="mdl-cell mdl-cell--12-col" id='file-list'>

        </div>

        <div class="mdl-cell mdl-cell--12-col" style="margin: 0 auto;" id="show-quiz-files-loader">
            <div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
        </div>
        <div class="center mdl-cell mdl-cell--12-col alert alert-danger show-quiz-files-error"></div>
    </div>

@overwrite

@section('modal-footer')

    <div id="get-quiz-files-section" class="mdl-grid">
        <button id="show-quiz-back-button"
            class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
            Powrót
        </button>
    </div>

@overwrite

@section('modal-scripts')
    <style>
        .center {
            text-align: center;
        }

        #file-list ul {
            list-style-type: none;
        }

        #file-list a {
            display: flex;
            align-items: center;
            color: black;
            text-decoration: none;
            cursor: pointer;
            padding: 3px 5px;
            border-radius: 3px;
            transition-duration: 0.3s;
        }

        #file-list a:hover {
            background-color: #eee;
        }

        #show-quiz-files-modal .modal-body {
            max-height: calc(100vh - 290px);
            overflow: auto;
        }
    </style>
    <script>
        let eventID = null;

        function showQuizFiles(event_id) {
            eventID = event_id;
            getDirectoryStrucure();
            $('#show-quiz-files-modal').modal();
        }

        function getDirectoryStrucure() {
            $('.show-quiz-files-error').html('').hide();
            $('#show-quiz-files-loader').show();
            $('#file-list').html('');
            $.ajax("/api/event/documents/structure?eventID=" + eventID).done(function(data) {
                const htmlData = fillStructure(data);
                $('#file-list').html(htmlData);
                $('#show-quiz-files-loader').hide();
            }).fail(function(data) {
                $('#show-quiz-files-loader').hide();
                $('.show-quiz-files-error').html('Wystąpił błąd, spróbuj ponownie').show();
            });
        }

        function fillStructure(data) {
            let htmlData = '<ul>';
            data.forEach(element => {
                if (element.type == 'folder') {
                    htmlData += `<li><i class="material-icons">folder</i> ${element.name}`;
                    htmlData += fillStructure(element.elements);
                    htmlData += '</li>';
                } else {
                    // file
                    htmlData += `<li>
                            <a href="/api/event/documents?eventID=${eventID}&dp=${element.path}">
                                <i class="material-icons">insert_drive_file</i> ${element.name}
                            </a>
                        </li>`;
                }
            });

            htmlData += '</ul>';
            return htmlData;
        }

        $('#show-quiz-back-button').click(function() {
            $('#show-quiz-files-modal').modal('hide');
            $('#add-event-modal').modal();
        });
    </script>

@overwrite