@push('styles_top')
    <link rel="stylesheet" href="/assets/vendors/summernote/summernote-bs4.min.css">
@endpush

<div class ="container">
    <div class="row g-4">

        {{-- Left Side --}}
        <div class="col-12 col-md-3">

            {{-- Hidden input for locale - always EN --}}
            <input type="hidden" name="locale" value="{{ getDefaultLocale() }}">

            {{-- Course Type Dropdown --}}
            {{-- <div class="mb-4">
                <label for="courseType" class="form-label">{{ trans('panel.course_type') }}</label>
                <select name="type" id="courseType" class="form-select @error('type') is-invalid @enderror">
                    <option value="course" @if (!empty($webinar) and $webinar->type == 'course') selected @endif>
                        {{ trans('webinars.video_course') }}
                    </option>
                    <option value="webinar" @if (!empty($webinar) and $webinar->isWebinar()) selected @endif>
                        {{ trans('webinars.webinar') }}
                    </option>
                    <option value="text_lesson" @if (!empty($webinar) and $webinar->type == 'text_lesson') selected @endif>
                        {{ trans('webinars.text_lesson') }}
                    </option>
                </select>
                @error('type')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div> --}}
            <input type="hidden" name="type" value="course">
            {{-- End Course Type Dropdown --}}

            {{-- Instructor Dropdown (for organiations only) --}}
            @if ($isOrganization)
                <div class="mb-4">
                    <label for="teacherId" class="form-label">{{ trans('public.select_a_teacher') }}</label>
                    <select name="teacher_id" id="teacherId"
                        class="form-select @error('teacher_id') is-invalid @enderror">
                        <option value=""
                            {{ (!empty($webinar) and !empty($webinar->teacher_id)) ? '' : 'selected' }}>
                            {{ trans('public.choose_instructor') }}
                        </option>
                        @foreach ($teachers as $teacher)
                            <option value="{{ $teacher->id }}"
                                {{ !empty($webinar) && $webinar->teacher_id == $teacher->id ? 'selected' : '' }}>
                                {{ $teacher->full_name }}
                            </option>
                        @endforeach
                    </select>
                    @error('teacher_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            @endif
            {{-- End Instructor Dropdown --}}

            {{-- Translation Dropdown (Currently Disabled) --}}
            <div class="mb-4">
                <label for="title" class="form-label">{{ trans('public.title') }}</label>
                <input type="text" name="title" id="title"
                    value="{{ (!empty($webinar) and !empty($webinar->translate($locale))) ? $webinar->translate($locale)->title : old('title') }}"
                    class="form-control @error('title') is-invalid @enderror">
                @error('title')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            {{-- End Translation Dropdown --}}

            {{-- SEO Meta Description --}}
            <div class="mb-4">
                <label for="seoDescription" class="form-label">{{ trans('public.seo_description') }}</label>
                <input type="text" name="seo_description" id="seoDescription"
                    value="{{ (!empty($webinar) and !empty($webinar->translate($locale))) ? $webinar->translate($locale)->seo_description : old('seo_description') }}"
                    class="form-control @error('seo_description') is-invalid @enderror"
                    placeholder="{{ trans('forms.50_160_characters_preferred') }}">
                @error('seo_description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            {{-- End SEO Meta Description --}}

            {{-- Private Course --}}
            @if ($isOrganization)
                <div class="mb-4">
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="privateSwitch" name="private"
                            {{ (!empty($webinar) and $webinar->private) ? 'checked' : '' }}>
                        <label class="form-check-label" for="privateSwitch">{{ trans('webinars.private') }}</label>
                    </div>
                    <p class="text-muted small mt-1">{{ trans('webinars.create_private_course_hint') }}</p>
                </div>
            @endif
            {{-- End Private Course --}}
        </div>
        {{-- End Left Column --}}

        {{-- Right Column --}}
        <div class="col-md-1"></div>
        <div class="col-12 col-md-4">


            {{-- Demo Video Upload --}}
            <div class="d-flex">
                <div
                    class="mb-4 {{ (empty($webinar) or $webinar->video_demo_source != 'secure_host') ? '' : 'd-none' }}">
                    <label class="form-label">Demo Video (Optional)</label>
                    <div id="demoVideoHolder" class="video-demo-preview mt-2" style="max-width: 400px; width: 400px;">

                        @if (!empty($webinar) && $webinar->video_demo)
                            <video src="{{ $webinar->video_demo }}" controls class="img-thumbnail"
                                style="max-width: 400px; width: 400px;"></video>
                        @else
                            <p class="text-muted">No demo video selected</p>
                        @endif
                    </div>
                    <div class="dropzone mt-2" id="demoVideoDropzone">

                        <div class="dz-message d-flex justify-content-center">Drop file here or click to upload.</div>
                        <div class="progress border flex-grow-1" style="height: 10px; width: 100%; display:none;"
                            data-dz-uploadprogress-container>
                            <div class="progress-bar bg-success" role="progressbar" data-dz-uploadprogress
                                style="width:0%; " aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>

                    </div>


                    <input type="hidden" name="video_demo_source" id="video_demo_source"
                        value="upload">
                        
                    <input type="hidden" name="video_demo" id="video_demo"
                        value="{{ !empty($webinar) ? $webinar->video_demo : old('video_demo') }}"
                        class="@error('video_demo') is-invalid @enderror">
                    @error('video_demo')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            {{-- End Demo Video Upload --}}

            <div class="d-flex">
                {{-- Thumbnail Image --}}

                {{-- New DropZone implementation --}}
                <div class="mb-4">
                    <label class="form-label">{{ trans('public.thumbnail_image') }}</label>
                    <div id="holder" class="thumbnail-preview mt-2">
                        @if (!empty($webinar) && $webinar->thumbnail)
                            <img src="{{ $webinar->thumbnail }}" alt="Thumbnail" class="img-thumbnail"
                                style="max-width: 400px; width: 400px;">
                        @else
                            <p class="text-muted">No thumbnail selected</p>
                        @endif
                    </div>
                    <div class="dropzone mt-2" id="thumbnailDropzone">
                        <div class="dz-message d-flex justify-content-center">Drop file here or click to upload.</div>
                        <div class="progress border flex-grow-1" style="height: 10px; width: 100%; display:none;"
                            data-dz-uploadprogress-container>
                            <div class="progress-bar bg-success" role="progressbar" data-dz-uploadprogress
                                style="width:0%; " aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
                            </div>
                        </div>
                    </div>
                    <input type="hidden" name="thumbnail" id="thumbnail"
                        value="{{ !empty($webinar) ? $webinar->thumbnail : old('thumbnail') }}"
                        class="@error('thumbnail') is-invalid @enderror">
                    @error('thumbnail')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
                {{-- End Thumbnail Image --}}

                {{-- Cover Image --}}
                <input type="hidden" name="image_cover" id="cover_image" value="blank">


            </div>


        </div>
        {{-- End Right Column --}}
    </div>
    <div class="row">
        <div class="col-12">
            {{-- Summernote Course Description Box --}}
            <div class="mb-4">
                <label class="form-label">{{ trans('public.description') }}</label>
                <textarea id="summernote" name="description" class=" form-control @error('description') is-invalid @enderror"
                    placeholder="{{ trans('forms.webinar_description_placeholder') }}">{!! (!empty($webinar) and !empty($webinar->translate($locale)))
                        ? $webinar->translate($locale)->description
                        : old('description') !!}</textarea>
                @error('description')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>
            {{-- End Summernote Course Description Box --}}
        </div>
    </div>
</div>
@push('scripts_bottom')
    {{-- <script src="/assets/vendors/summernote/summernote-bs4.min.js"></script> --}}
    <script>
        var videoDemoPathPlaceHolderBySource = {
            upload: '{{ trans('update.file_source_upload_placeholder') }}',
            youtube: '{{ trans('update.file_source_youtube_placeholder') }}',
            vimeo: '{{ trans('update.file_source_vimeo_placeholder') }}',
            external_link: '{{ trans('update.file_source_external_link_placeholder') }}',
            secure_host: '{{ trans('update.file_source_secure_host_placeholder') }}',
        }
    </script>

    {{-- Dropzone for file upload --}}
    <script>
        $(document).ready(function() {
            @php
                $thumbnailRoute = '';

                if (isset($webinar)) {
                    $thumbnailRoute = route('webinars.upload.thumbnail', ['id' => $webinar->id]);
                } else {
                    $thumbnailRoute = route('webinars.upload.thumbnail', ['id' => 'new']);
                }

            @endphp
            var thumbnailDropzone = new Dropzone("#thumbnailDropzone", {
                url: '{!! $thumbnailRoute !!}',
                maxFiles: 1,
                acceptedFiles: 'image/*',
                disablePreviews: true,
                autoProcessQueue: false, // Prevent automatic processing
                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                init: function() {
                    this.on("success", function(file, response) {
                        document.getElementById('thumbnail').value = response.path;
                        document.getElementById('holder').innerHTML = '<img src="' + response
                            .path +
                            '" alt="Thumbnail" class="img-thumbnail" style="max-width: 400px; width: 400px;">';
                        this.files = [];
                        // Show SweetAlert2 popup
                        Swal.fire({
                            title: 'Success!',
                            text: 'File upload was successful.',
                            icon: 'success',
                            showConfirmButton: false,
                            timer: 2000,
                            timerProgressBar: true
                        });
                    });
                    this.on("error", function(file, errorMessage) {
                        // Show SweetAlert2 popup for error
                        Swal.fire({
                            title: 'Error!',
                            text: errorMessage.message ? errorMessage.message :
                                errorMessage,
                            icon: 'error',
                            showConfirmButton: true
                        });
                    });
                    this.on("removedfile", function(file) {
                        document.getElementById('thumbnail').value = '';
                        document.getElementById('holder').innerHTML =
                            '<p class="text-muted">No thumbnail selected</p>';
                    });
                },

                // Add event listener for file added
                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); // Proceed with the upload
                        } else {
                            _this.removeFile(file); // Remove the file from Dropzone
                        }
                    });
                },
                //Add event lsitener for upload progress
                uploadprogress: function uploadprogress(file, progress, bytesSent) {
                    var _this = this;
                    var progressElement = _this.element.querySelector("[data-dz-uploadprogress]");
                    var progressContainer = _this.element.querySelector(
                        "[data-dz-uploadprogress-container]");
                    if (!progress || !progressElement) {
                        return;
                    }
                    if (progress < 100) {
                        // Make progress bar visible
                        progressContainer.style.display = "";
                    } else {
                        // Hide the progress bar
                        progressContainer.style.display = "none";
                        progressElement.style.width = "0%";
                    }

                    // Update the progress bar
                    if (progressElement) {
                        // Extract the numeric part of the width string
                        var currentWidth = parseFloat(progressElement.style.width) || 0;

                        // Update the progress bar width if the new progress is greater
                        if (progress > currentWidth) {
                            progressElement.style.width = progress + "%";
                        }
                    }
                },
            });

            @php
                $demoVideoRoute = '';

                if (isset($webinar)) {
                    $demoVideoRoute = route('webinars.upload.demo_video', ['id' => $webinar->id]);
                } else {
                    $demoVideoRoute = route('webinars.upload.demo_video', ['id' => 'new']);
                }

            @endphp
            var demoVideoDropzone = new Dropzone("#demoVideoDropzone", {
                url: '{!! $demoVideoRoute !!}',
                maxFiles: 1,
                acceptedFiles: 'video/*',
                autoProcessQueue: false, // Prevent automatic processing

                headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                },
                init: function() {
                    this.on("success", function(file, response) {
                        document.getElementById('video_demo').value = response.path;
                        document.getElementById('demoVideoHolder').innerHTML = '<video src="' +
                            response.path +
                            '" controls class="img-thumbnail" style="max-width: 400px; width: 400px;"></video>';
                        // Show SweetAlert2 popup
                        Swal.fire({
                            title: 'Success!',
                            text: 'File upload was successful.',
                            icon: 'success',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true
                        });
                        //on success, clear files so we can upload again if we want.
                        this.files = [];
                    });
                    this.on("error", function(file, errorMessage) {
                        // Show SweetAlert2 popup for error
                        Swal.fire({
                            title: 'Error!',
                            text: errorMessage.message ? errorMessage.message :
                                errorMessage,
                            icon: 'error',
                            showConfirmButton: true
                        });
                    });
                    this.on("removedfile", function(file) {
                        document.getElementById('video_demo').value = '';
                        document.getElementById('demoVideoHolder').innerHTML =
                            '<p class="text-muted">No demo video selected</p>';
                    });
                },
                thumbnail: function(file, dataUrl) {
                    document.getElementById('demoVideoHolder').innerHTML = '<video src="' + dataUrl +
                        '" controls class="img-thumbnail" style="max-width: 400px; width: 400px;"></video>';
                },
                // Add event listener for file added
                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); // Proceed with the upload
                        } else {
                            _this.removeFile(file); // Remove the file from Dropzone
                        }
                    });
                },
                uploadprogress: function uploadprogress(file, progress, bytesSent) {
                    var _this = this;
                    var progressElement = _this.element.querySelector("[data-dz-uploadprogress]");
                    var progressContainer = _this.element.querySelector(
                        "[data-dz-uploadprogress-container]");
                    if (!progress || !progressElement) {
                        return;
                    }
                    if (progress < 100) {
                        // Make progress bar visible
                        progressContainer.style.display = "";
                    } else {
                        // Hide the progress bar
                        progressContainer.style.display = "none";
                        progressElement.style.width = "0%";
                    }

                    // Update the progress bar
                    if (progressElement) {
                        // Extract the numeric part of the width string
                        var currentWidth = parseFloat(progressElement.style.width) || 0;

                        // Update the progress bar width if the new progress is greater
                        if (progress > currentWidth) {
                            progressElement.style.width = progress + "%";
                        }
                    }
                },
            });
        });
    </script>
@endpush