@extends('layouts.app')
@section('content')

    <div class="container-fluid">

        <h1>Kapitel bearbeiten</h1>

        <form id="course-form" method="post" action="{{ route('admin.course.update', $course->id) }}" role="form">
            @csrf

            @if (count($errors) > 0)
                <div class="error">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="messages"></div>

            <div class="controls">

                <div class="row mb-3">
                    <div class="col-md-12 mt-4 mb-4">
                        <p class="mb-1"><strong>{{ __('Language') }} *</strong></p>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="language" id="language_de" value="de" {{ $course->language == 'de' ? 'checked' : '' }} required>
                            <label class="form-check-label" for="language_de">deutsch</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="language" id="language_en" value="en" {{ $course->language == 'en' ? 'checked' : '' }} required>
                            <label class="form-check-label" for="language_en">englisch</label>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">

                        <div class="form-group">
                            <label for="form_learning_package"><strong>Kurs *</strong></label>
                            <select id="form_learning_package" name="learning_package_id" class="form-control" required="required" data-error="Kurs wird benötigt">
                                <option value="">Bitte Kurs wählen</option>
                                @foreach($learningPackages as $learningPackage)
                                    <option {{ $learningPackage->id == $course->learning_package_id ? 'selected="selected"' : '' }} value="{{ $learningPackage->id }}">{{ $learningPackage->title }}
                                        {{ $learningPackage->active != 1 ? '(inaktiv)' : '' }}</option>
                                @endforeach
                            </select>
                            <div class="help-block with-errors"></div>
                            @error('learning_package_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group">
                            <label for="form_topics"><strong>{{ __('Topic') }} *</strong></label>

                            <select id="form_topics" name="topic_id" class="form-control" required="required" data-error="{{ __('Topic is required.') }}">
                                <option value="">{{ __('Please select a topic') }}</option>
                                @foreach($topics as $topic)
                                    <option {{ $topic->id == $course->topic_id ? 'selected="selected"' : '' }} value="{{ $topic->id }}">{{ $topic->name_de }}</option>
                                @endforeach
                            </select>
                            <div class="help-block with-errors"></div>
                            @error('topic_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror

                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group">
                            <label for="form_course_number"><strong>Kapitelnummer *</strong></label>
                            <input id="form_course_number" type="text" name="course_number" class="form-control @error('course_number') is-invalid @enderror" required="required" data-error="{{ __('Course number is required.') }}" value="{{ $course->course_number }}">
                            <div class="help-block with-errors"></div>
                            @error('course_number')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group">
                            <label for="form_short_description"><strong>Titel *</strong></label>
                            <input id="form_short_description" type="text" name="short_description" class="form-control" required data-error="Ein Titel wird benötigt" value="{{ $course->short_description }}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group">
                            <label for="form_referent"><strong>{{ __('Referent') }} *</strong></label>
                            <select id="form_referent" name="referent_id" class="form-control" required="required" data-error="{{ __('Referent is required.') }}">
                                <option value="">{{ __('Please select a referent') }}</option>
                                @foreach($referents as $referent)
                                    <option {{ $referent->id == $course->referent_id ? 'selected="selected"' : '' }} value="{{ $referent->id }}">{{ __($referent->name) }}</option>
                                @endforeach
                            </select>
                            <div class="help-block with-errors"></div>
                            @error('referent_id')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group">
                            <label for="form_course_duration"><strong> Kapiteldauer für Darstellung auf Zertifikat (in Minuten) * </strong></label>
                            <input id="form_course_duration" type="number" name="course_duration" class="form-control @error('course_duration') is-invalid @enderror" required="required" min="0" data-error="{{ __('Course duration is required.') }}" value="{{ $course->course_duration }}">
                            <div class="help-block with-errors"></div>
                            @error('course_duration')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group">
                            <label for="form_course_number_vnr">{{ __('Course number VNR') }}</label>
                            <input id="form_course_number_vnr" type="text" name="course_number_vnr" class="form-control" value="{{ $course->course_number_vnr }}">
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group">
                            <label for="form_content">{{ __('Content') }}</label>
                            <textarea class="form-control form-form_content ckeditor" id="form_content" name="content" rows="3">{{ $course->content }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group">
                            <label for="form_learning_goals">{{ __('Learning goals') }}</label>
                            <textarea class="form-control form-form_learning_goals ckeditor" id="form_content" name="learning_goals" rows="3">{{ $course->learning_goals }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group">
                            <label for="videos">Lehrvideos</label>
                            <input type="file" class="file" id="videos" name="video" multiple />
                        </div>

                        <button class="btn btn-primary " type="button" id="updateStatus" data-id="{{ $course->id }}" data-href="{{ route('admin.video.checkstatus') }}">Update Status</button>

                        <div id="video-processing-container" style="display: none;" class="mt-3">
                            <label><strong>Video-Verarbeitung:</strong> <span id="video-processing-status-text">Warte auf Start...</span></label>
                            <div class="progress">
                                <div id="video-processing-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group download_area">
                            <label for="downloads">{{ __('Downloads') }}</label>
                            <input type="file" class="file" id="downloads" name="download" multiple />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12 mt-4 mb-4">
                        <div class="form-group">
                            <label for="form_learning_goals" id="questionsTable">{{ __('Quiz') }}</label><br />

                            <table class="table table-bordered table-responsive-lg table-hover">
                                <thead class="thead-dark">
                                <tr>
                                    <th scope="col"></th>
                                    <th scope="col">Frage</th>
                                    <th scope="col" width="10%"></th>
                                </tr>
                                </thead>
                                <tbody id="tbody">
                                @if(count($questions) > 0)
                                    @php $i = 1; @endphp
                                    @foreach ($questions as $question)
                                        <tr>
                                            <td>{{ $i++ }}</td>
                                            <td>{!! strip_tags($question->question) !!}</td>
                                            <td>
                                                <form action="{{ route('admin.question.destroy', $question->id) }}" method="GET">

                                                    <a class="text-secondary edit-question"
                                                       data-href="{{ route('admin.question.edit', $question->id) }}"
                                                       data-action="{{ route('admin.question.update', $question->id) }}"
                                                    >
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                    @csrf

                                                    <button type="submit" title="delete" style="border: none; background-color:transparent;" onclick="return confirm('{{ __('Are you sure?') }}')">
                                                        <i class="fas fa-trash text-danger"></i>
                                                    </button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif
                                </tbody>
                            </table>

                            <a data-toggle="modal"
                               id="questionButton"
                               data-target="#questionModalCreate"
                               class="btn btn-danger">
                                {{ __('Create new question') }}
                            </a>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group form-check">
                            <input type="checkbox" class="form-check-input" id="form_active" name="active" value="1" {{ $course->active == 1 ? 'checked="checked"' : '' }}>
                            <label class="form-check-label" for="form_active">{{ __('active') }}</label>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-24">
                        <p class="text-muted">
                            <strong>*</strong> {{ __('Mandatory fields') }}
                        </p>
                    </div>
                    <div class="col-md-24">
                        <input type="submit" class="btn btn-success btn-send" value="{{ __('save') }}">
                        <a href="{{ url()->previous() }}" class="btn btn-primary btn-send ml-2">{{ __('back') }}</a>
                    </div>
                </div>
            </div>

        </form>

        <div class="mt-5"></div>

        <hr />
        <hr />
        <h3>Lehrvideo (Videotitel) umbenennen</h3>
        <form id="course-form" method="post" action="{{ route('admin.video.update', $course->id) }}" role="form">
            @csrf
            <div class="row">
                <div class="col">
                    @if($videos)
                        @foreach($videos as $video)
                            <div class="form-group mt-4">
                                <label><strong>Aktueller Titel:</strong> {{ $video->title }}<br /><strong>Dateiname:</strong> {{ $video->filename }}</label>
                                <input class="form-control" type="text" name="id[{{ $video->id }}]" value="{{ $video->title }}">
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>

            <button class="btn btn-success" type="submit">Kapitel speichern</button>
        </form>

    </div>

@endsection
<link rel="stylesheet" href="https://vjs.zencdn.net/5.11.7/video-js.css">
<div class="modal fade video-modal" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">

        <!--Content-->
        <div class="modal-content course_video_player">

            <!--Body-->
            <div class="modal-body mb-0 p-0">
                <div class="p-3">
                    <h2 id="course"></h2>
                    <h2 id="headline"></h2>
                </div>

                <div class="videoContainer" id="player_parent">
                </div>
                <div class="loading"></div>
            </div>
        </div>
    </div>
</div>

@section('scripts')

    <link href="https://vjs.zencdn.net/8.3.0/video-js.min.css" rel="stylesheet"><!-- https://videojs.com -->
    <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script><!-- https://videojs.com -->
    <script src="{{ asset('js/hls.min.js?v=v0.9.1') }}"></script><!-- https://github.com/video-dev/hls.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/0.14.5/hls.min.js"></script><!-- https://videojs.com -->

    <script type="text/javascript">

        $('#updateStatus').click(function(e) {
            e.preventDefault();

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            let href = $(this).data('href');
            let id = $(this).data('id');
            $el = $(this);
            $.ajax({
                type: "post",
                url: href,
                data: {
                    id: id
                },
                dataType: 'json',
                success: function (data) {
                    if (data.online == true) {
                        $el.removeClass('btn-primary btn-danger');
                        $el.addClass('btn-success');
                    } else {
                        $el.removeClass('btn-primary');
                        $el.addClass('btn-danger');
                    }
                },
                error: function (data) {
                    console.log(data);
                }
            });
        });

        $(document).on('change', 'input[name="correct_answer"]:checked', function() {
            let correct_answer = $(this).val();
            correct_answer = correct_answer.replace('correct_');
            $('input[name^="answer"]').removeClass('correct_answer');
            $('#' + correct_answer).addClass('correct_answer');
        });

        $(document).on('click', '.edit-question', function (event) {

            $('#questionModalEdit').modal('show');

            event.preventDefault();
            let href = $(this).data('href');
            let action = $(this).data('action');

            $('input[name^="answer"]').removeClass('correct_answer');

            $.ajax({
                type: "get",
                url: href,
                success: function(response) {
                    $('#editQuestionForm').prop('action', action);

                    //alert(response.question.description1);

                    if(response.question) {

                        if (CKEDITOR.instances.description1) {
                            CKEDITOR.instances.description1.destroy()
                        }
                        let description1 = CKEDITOR.replace('description1');

                        if (CKEDITOR.instances.description2) {
                            CKEDITOR.instances.description2.destroy()
                        }

                        let description2 = CKEDITOR.replace('description2');

                        if (CKEDITOR.instances.description3) {
                            CKEDITOR.instances.description3.destroy()
                        }
                        let description3 = CKEDITOR.replace('description3');

                        if (CKEDITOR.instances.description4) {
                            CKEDITOR.instances.description4.destroy()
                        }
                        let description4 = CKEDITOR.replace('description4');

                        if (CKEDITOR.instances.description5) {
                            CKEDITOR.instances.description5.destroy()
                        }
                        let description5 = CKEDITOR.replace('description5');

                        if (CKEDITOR.instances.question) {
                            CKEDITOR.instances.question.destroy()
                        }
                        let question = CKEDITOR.replace('question');
                        if(response.question.question) {
                            $('#question').val(response.question.question);
                        }

                        /*
                        let question2 = CKEDITOR.replace('question2');
                        if(response.question.question) {
                            $('#question2').val(response.question.question);
                        }
                        */
                        if(response.question.answer1) {
                            $('#answer1').val(response.question.answer1);
                        }
                        if(response.question.answer2) {
                            $('#answer2').val(response.question.answer2);
                        }
                        if(response.question.answer3) {
                            $('#answer3').val(response.question.answer3);
                        }
                        if(response.question.answer4) {
                            $('#answer4').val(response.question.answer4);
                        }
                        if(response.question.answer5) {
                            $('#answer5').val(response.question.answer5);
                        }
                        if(response.question.description1) {
                            description1.setData(response.question.description1);
                        }
                        if(response.question.description2) {
                            description2.setData(response.question.description2);
                        }
                        if(response.question.description3) {
                            description3.setData(response.question.description3);
                        }
                        if(response.question.description4) {
                            description4.setData(response.question.description4);
                        }
                        if(response.question.description5) {
                            description5.setData(response.question.description5);
                        }
                        if(response.question.correct_answer) {
                            const correctAnswerId = '#correct_' + response.question.correct_answer;
                            $(correctAnswerId).prop('checked', true);
                            $('#' + response.question.correct_answer).addClass('correct_answer');
                        }
                    }
                }
            });
        });

        // Polling logic for video processing
        var processingInterval = null;

        function startStatusPolling(videoId) {
            if (processingInterval) return;

            $('#video-processing-container').show();

            processingInterval = setInterval(function() {
                $.get('/api/admin/video/processing-status/' + videoId, function(data) {
                    if (data.success) {
                        updateProcessingUI(data.percentage, data.status);

                        if (data.is_finished) {
                            clearInterval(processingInterval);
                            processingInterval = null;
                            $('#video-processing-progress-bar').removeClass('progress-bar-animated progress-bar-striped').addClass('bg-success');
                            $('#video-processing-status-text').text('Abgeschlossen');
                            // Optional: reload or update other UI elements
                        }
                    }
                }).fail(function(xhr) {
                    console.error('Error fetching processing status');
                });
            }, 5000);
        }

        function updateProcessingUI(percentage, status) {
            var statusText = 'Verarbeitet...';
            if (status === 'uploading') statusText = 'Lade zum CDN hoch...';
            if (status === 'finished') statusText = 'Abgeschlossen';
            if (status === 'error') statusText = 'Fehler bei der Verarbeitung';

            $('#video-processing-status-text').text(statusText + ' (' + percentage + '%)');
            $('#video-processing-progress-bar').css('width', percentage + '%').attr('aria-valuenow', percentage).text(percentage + '%');
        }

        $(document).ready(function() {
            // Check if any video is currently processing on page load
            @if($videos)
                @foreach($videos as $video)
                    @if(isset($video->processing_status) && $video->processing_status !== 'finished' && $video->processing_status !== 'error')
                        startStatusPolling("{{ $video->id }}");
                    @endif
                @endforeach
            @endif
        });

        // Video upload
        $("#videos").fileinput({
            showCaption: true,
            uploadUrl: "{{ route('admin.video.prepare') }}",
            uploadAsync: true,
            /*
            uploadExtraData:{
                '_token' : $('input[name="_token"]').val(),
                'id': "{{ $course->id }}",
                'learning_package_id': "{{ $course->learning_package_id }}",
            },
            */
            uploadExtraData: function() {
                let out = {}, key, i = 0;
                $('.kv-input:visible').each(function() {
                    let $thumb = $(this).closest('.file-preview-frame'); // gets the thumbnail
                    let fileId = $thumb.data('fileid'); // gets the file identifier for file thumb
                    out[fileId] = $("#downloads").val();
                });

                out['_token'] = $('input[name="_token"]').val();
                out['id'] = "{{ $course->id }}";
                out['learning_package_id'] = "{{ $course->learning_package_id }}";
                return out;
            },
            deleteUrl: "{{ route('admin.video.destroy') }}",
            theme: "fas",
            browseOnZoneClick: true,
            allowedFileTypes: ['image', 'video', 'audio', 'flash', 'object'],
            initialPreviewAsData: false,
            previewFileType: "video",
            initialPreview: [
                @if($videos)
                    @foreach($videos as $video)
                        "{{ $video->complete_cdn_url }}",
                    @endforeach
                @endif
            ],
            initialPreviewConfig: [
                @if($videos)
                    @foreach($videos as $video)
                    {
                        type: "video",
                        size: "{{ $video->filesize }}",
                        filetype: "{{ $video->filetype }}",
                        caption: "{{ $video->title }}",
                        key: "{{ $video->filepath . '/' . $video->filename }}",
                        id: "{{ $video->id }}",
                        extra: function() {
                            return {
                                id: "{{ $video->id }}",
                                _token: $('input[name="_token"]').val(),
                            }
                        },
                    },
                    @endforeach
                @endif
            ],
            /*
            preferIconicPreview: false,
            previewFileExtSettings: { // configure the logic for determining icon file extensions
                'mov': function(ext) {
                    return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv|mp3|m3u8)$/i);
                },
            },
            */
            otherActionButtons: '<button type="button" class="kv-cust-btn btn btn-sm btn-kv btn-default btn-outline-secondary" title="Edit"{dataKey} data-title="{caption}">' +
                '<i class="fas fa-search"></i>' +
                '</button>',
            hideThumbnailContent: true,
            fileActionSettings: { showZoom: false },
            overwriteInitial: false,
            dragSettings: {},
        }).on('fileuploaded', function(event, data, previewId, index) {
            // Start polling when a video has been uploaded successfully
            if (data.response && data.response.video_id) {
                startStatusPolling(data.response.video_id);
            } else if (data.extra && data.extra.id) {
                // Fallback if video_id is not directly in response but we have the course id
                // though it's better to use the specific video id.
                // For now, let's assume the server returns the new video_id.
            }
        }).on('filesorted', function(e, params) {
            console.log('Modified initial preview is ', $("#videos").data('fileinput').initialPreviewConfig);
            $.ajax({
                url: "{{ route('admin.video.update-order') }}",
                method: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    "data": $("#videos").data('fileinput').initialPreviewConfig,
                },
                success: function(data) {
                    if(data.success == true) {
                    } else {
                        alert('Etwas hat nicht ganz geklappt.');
                    }
                }
            });
        });

        $('.kv-cust-btn').on('click', function() {
            var $btn = $(this), key = $btn.data('key');

            // do some actions based on the key
            var url = '{{ config('filesystems.disks.keycdn.baseurl') }}';

            $('#videoModal').modal('show');
            $('.videoContainer').show();

            $videoSrc = url + key;
            $videoFiletype = 'application/x-mpegURL';
            //$videoSrc = 'https://v2202209183503201737.happysrv.de/croehrig/sono2learn.de/videos/Bettina Reussner sono2learn.mp4';
            //$videoFiletype = 'video/mp4';

            $('.modal-body #headline').html($btn.data('title'));
            var video_parent = document.getElementById("player_parent");
            var video = document.createElement('video');
            video.id = "video";
            video.className = "video-js vjs-default-skin";
            video.setAttribute("controls","true");
            video.setAttribute("controlsList","nodownload");
            video.setAttribute("oncontextmenu","return false;");
            video.setAttribute("playsinline", true);
            video.setAttribute("autoplay", true);
            video.setAttribute("preload", "metadata");
            video_parent.appendChild(video);

            player = videojs('video', {
                fluid: true,
            }, function() {
            });

            //console.log('result', $videoSrc, $videoFiletype)

            player.src({
                src: $videoSrc,
                type: $videoFiletype,
            });
        });

        $('#videoModal').on('hidden.bs.modal', function (e) {
            player.pause();
            player.dispose();
            $("#headline").html('');
        });

        let footerTemplate = '<div class="file-thumbnail-footer" style ="height:94px">\n' +
            '  <input class="kv-input kv-new form-control input-sm form-control-sm text-center {TAG_CSS_NEW}" value="{caption}" placeholder="Enter caption...">\n' +
            '  <input class="kv-input kv-init form-control input-sm form-control-sm text-center {TAG_CSS_INIT}" value="{TAG_VALUE}" placeholder="Enter caption...">\n' +
            '   <div class="small" style="margin:15px 0 2px 0">{size}</div> {progress}\n{indicator}\n{actions}\n' +
            '</div>';

        // Download file upload
        $("#downloads").fileinput({
            previewThumbTags: {
                '{TAG_VALUE}': '',        // no value
                '{TAG_CSS_NEW}': '',      // new thumbnail input
                '{TAG_CSS_INIT}': 'hidden',  // hide the initial input
                '{ID}': 'kv-hidden'  // hide the initial input
            },
            initialPreviewThumbTags: [
                    @if($downloads)
                    @foreach($downloads as $download)
                {'{TAG_VALUE}': "{{ $download->title }}", '{TAG_CSS_NEW}': 'kv-hidden', '{TAG_CSS_INIT}': '', '{ID}:': "{{ $download->id }}"},
                @endforeach
                @endif
            ],
            layoutTemplates: {footer: footerTemplate},
            showCaption: true,
            showUpload: true,
            uploadUrl: "{{ route('admin.download.store') }}",
            uploadAsync: true,
            /*
            uploadExtraData:{
                '_token' : $('input[name="_token"]').val(),
                'id': "{{ $course->id }}",
                'learning_package_id': "{{ $course->learning_package_id }}",
            },
            */
            uploadExtraData: function() {  // callback example
                var out = {}, key, i = 0;
                $('.kv-input:visible').each(function() {
                    var $thumb = $(this).closest('.file-preview-frame'); // gets the thumbnail
                    var fileId = $thumb.data('fileid'); // gets the file identifier for file thumb
                    out[fileId] = $("#downloads").val();
                });

                out['_token'] = $('input[name="_token"]').val();
                out['id'] = "{{ $course->id }}";
                out['learning_package_id'] = "{{ $course->learning_package_id }}";
                return out;
            },
            deleteUrl: "{{ route('admin.download.destroy') }}",
            theme: "fas",
            browseOnZoneClick: true,
            allowedFileTypes: ['image', 'video', 'audio', 'flash', 'text', 'pdf'],
            initialPreviewAsData: true,
            previewFileType: ['image', 'video', 'audio', 'flash', 'text', 'pdf'],
            initialPreview: [
                @if($downloads)
                        @foreach($downloads as $download)
                    "{{ $download->download_url_public }}",
                @endforeach
                @endif
            ],
            initialPreviewConfig: [
                    @if($downloads)
                    @foreach($downloads as $download)
                {
                    type: "{{ $download->filetype == 'application/pdf' ? 'pdf' : ($download->filetype == 'text/plain' ? 'text' : (strpos($download->filetype, 'image') !== false ? 'image' : ''))  }}",
                    size: "{{ $download->filesize }}",
                    filetype: "{{ $download->filetype }}",
                    caption: "{{ $download->title }}",
                    key: "{{ $download->id }}",
                    //key: "{{ $download->download_path_storage }}",
                    extra: function() {
                        return {
                            id: "{{ $download->id }}",
                            _token: $('input[name="_token"]').val(),
                        }
                    },
                },
                @endforeach
                @endif
            ],
            fileActionSettings: {
                showZoom: false,
                showUpload: true,
            },
            overwriteInitial: false,
        });

        $('.kv-init, .kv-new').keypress(function (element) {

            let key = $(this).closest('.file-thumbnail-footer').find('.kv-file-remove').data('key');
            let button = '<button type="button" class="kv-file-upload custom_upload btn btn-sm btn-kv btn-default btn-outline-secondary" title="Remove file" data-url="" data-key="' + key + '"><i class="fas fa-save"></i></button>';
            $(this).closest('.file-thumbnail-footer').find('.custom_upload').remove();
            $(this).closest('.file-thumbnail-footer').find('.file-footer-buttons').append(button);
        });

        $('.download_area .file-input').on('fileuploaded', function(event, data, previewId, index) {

            console.log('id: ' + $('.file-preview-success').find('.kv-new').val());
            let id = data.response.id.id;

            console.log(id);
            $.ajax({
                url: "{{ route('admin.download.update') }}",
                method: 'POST',
                data: {
                    "_token": "{{ csrf_token() }}",
                    "id": id,
                    "text": $('.file-preview-success').find('.kv-new').val(),
                },
                success: function(data) {
                    if(data.success == true) {
                    } else {
                        alert('Etwas hat nicht ganz geklappt.');
                    }
                }
            });
            //window.location.reload();
        });


        $(document).on('click', '.custom_upload', function() {

            $element = $(this).closest('.file-thumbnail-footer');
            let value = $element.find('.kv-init').val();
            let oldValue = $element.find('.kv-new').val();
            let id = $(this).data('key');

            if (value != oldValue) {
                $.ajax({
                    url: "{{ route('admin.download.update') }}",
                    method: 'POST',
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "id": id,
                        "text": value,
                    },
                    success: function(data) {
                        if(data.success == true) {
                            alert('Änderung wurde gespeichert.');
                        } else {
                            alert('Etwas hat nicht ganz geklappt.');
                        }
                    }
                });
            }
        });

        $("#form_learning_package").change(function(){
            $.ajax({
                url: "{{ route('admin.topic.get_by_category') }}?id=" + $(this).val(),
                method: 'GET',
                success: function(data) {
                    $('#form_topics').html(data.html);
                }
            });
        });


    </script>
@endsection


@include('backend.admin.question.edit', ['course_id' => $course->id])
@include('backend.admin.question.create', ['course_id' => $course->id])