@push('styles_top')
    <link rel="stylesheet" href="/assets/default/vendors/select2/select2.min.css">
    <link rel="stylesheet" href="/assets/default/vendors/daterangepicker/daterangepicker.min.css">
    <link rel="stylesheet" href="/assets/vendors/summernote/summernote-bs4.min.css">
    <link href="/assets/default/vendors/sortable/jquery-ui.min.css" />
@endpush
<div class="container">
    <section class="">
        {{-- <div class="">
        <h2 class="section-title after-line">Units</h2>
    </div> --}}

        <button type="button" class="js-add-chapter btn btn-success btn-sm mt-3 mx-2"
            data-webinar-id="{{ $webinar->id }}">Add Unit</button>

        @include('web.default.panel.webinar.create_includes.accordions.chapter')
    </section>

    @if ($webinar->isWebinar())
        <div id="newSessionForm" class="d-none">
            @include('web.default.panel.webinar.create_includes.accordions.session', [
                'webinar' => $webinar,
            ])
        </div>
    @endif

    {{-- <div id="newFileForm" >
        @include('web.default.panel.webinar.create_includes.accordions.file', ['webinar' => $webinar])
    </div> --}}

    @if (getFeaturesSettings('new_interactive_file'))
        <div id="newInteractiveFileForm" class="d-none">
            @include('web.default.panel.webinar.create_includes.accordions.new_interactive_file', [
                'webinar' => $webinar,
            ])
        </div>
    @endif


    <div id="newTextLessonForm" class="d-none">
        @include('web.default.panel.webinar.create_includes.accordions.text-lesson', [
            'webinar' => $webinar,
        ])
    </div>

    <div id="newQuizForm" class="d-none">
        @include('web.default.panel.webinar.create_includes.accordions.quiz', [
            'webinar' => $webinar,
            'quizInfo' => null,
            'webinarChapterPages' => true,
        ])
    </div>

    @if (getFeaturesSettings('webinar_assignment_status'))
        <div id="newAssignmentForm" class="d-none">
            @include('web.default.panel.webinar.create_includes.accordions.assignment', [
                'webinar' => $webinar,
            ])
        </div>
    @endif

    @include('web.default.panel.webinar.create_includes.chapter_modal')

    @include('web.default.panel.webinar.create_includes.change_chapter_modal')
</div>
@push('scripts_bottom')
    <script src="/assets/default/vendors/select2/select2.min.js"></script>
    <script src="/assets/default/vendors/daterangepicker/daterangepicker.min.js"></script>
    <script src="/assets/vendors/summernote/summernote-bs4.min.js"></script>
    <script src="/assets/default/vendors/sortable/jquery-ui.min.js"></script>

    <script>
        var requestFailedLang = '{{ trans('public.request_failed') }}';
        var thisLiveHasEndedLang = '{{ trans('update.this_live_has_been_ended') }}';
        var saveSuccessLang = '{{ trans('webinars.success_store') }}';
        var quizzesSectionLang = '{{ trans('quiz.quizzes_section') }}';
    </script>

    <script>
        function initializeDropzone(dropzoneId) {
            console.log("Initializing dropzone with id: " + dropzoneId);
            var dropzoneInstance = new Dropzone("#" + dropzoneId, {
                url: "{{ route('webinars.upload.file', ['id' => $webinar->id ?? 'new']) }}",
                maxFiles: 1,
                acceptedFiles: 'video/*',
                autoProcessQueue: false,

                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                init: function() {
                    this.on("success", function(file, response) {
                        console.log(response.path);
                        document.querySelector(
                            'input[name="ajax[{{ !empty($file) ? $file->id : 'new' }}][file_path]"]'
                            ).value = response.path;
                        document.getElementById('fileUploadHolder' + dropzoneId).innerHTML =
                            '<video src="' + response.path +
                            '" controls class="img-thumbnail" style="max-width: 400px; width: 400px;"></video>';
                        Swal.fire({
                            title: 'Success!',
                            text: 'File upload was successful.',
                            icon: 'success',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true
                        });
                        this.files = [];
                    });
                    this.on("error", function(file, errorMessage) {
                        Swal.fire({
                            title: 'Error!',
                            text: errorMessage.message ? errorMessage.message : errorMessage,
                            icon: 'error',
                            showConfirmButton: true
                        });
                    });
                    this.on("removedfile", function(file) {
                        document.getElementById('file_path').value = '';
                        document.getElementById('fileUploadHolder' + dropzoneId).innerHTML =
                            '<p class="text-muted">No file selected</p>';
                    });
                    this.on('sending', function(file, xhr, formData) {
                        @isset($file)
                            formData.append('old_path', '{{ $file->file }}');
                        @endisset
                    });
                },
                thumbnail: function(file, dataUrl) {
                    document.getElementById('fileUploadHolder' + dropzoneId).innerHTML =
                        '<p class="text-muted">' + file.name + '</p>';
                },
                addedfile: function(file) {
                    var _this = this;
                    Swal.fire({
                        title: 'Are you sure?',
                        text: "The old file will be replaced. This cannot be undone.",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: 'Yes, replace it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            _this.processFile(file);
                        } else {
                            _this.removeFile(file);
                        }
                    });
                },
                uploadprogress: function(file, progress, bytesSent) {
                    var progressElement = this.element.querySelector("[data-dz-uploadprogress]");
                    var progressContainer = this.element.querySelector("[data-dz-uploadprogress-container]");
                    if (!progress || !progressElement) {
                        return;
                    }
                    if (progress < 100) {
                        progressContainer.style.display = "";
                    } else {
                        progressContainer.style.display = "none";
                        progressElement.style.width = "0%";
                    }
                    if (progressElement) {
                        var currentWidth = parseFloat(progressElement.style.width) || 0;
                        if (progress > currentWidth) {
                            progressElement.style.width = progress + "%";
                        }
                    }
                },
            });

            dropzones.push(dropzoneInstance);
        }
    </script>
@endpush