@php
    $type = $type ?? 'admin';
    $trash_icon = $type === 'admin' ? 'fas fa-times' : 'fas fa-times';
    $check_icon = $type === 'admin' ? 'fas fa-check' : 'fas fa-check';
    $spinner_icon = $type === 'admin' ? 'fas fa-spinner fa-spin' : 'fa-spin las la-spinner';
@endphp

<script src="{{ asset('assets/backend/js/dropzone/dropzone.js') }}"></script>
<x-sweet-alert.sweet-alert2-js />
<script>
    (function($) {
        "use strict";
        var mainUploadBtn = '';
        //after select image
        $(document).on('click', '.media_upload_modal_submit_btn', function(e) {
            e.preventDefault();
            var allData = $('.media-uploader-image-list li.selected');
            if (typeof allData != 'undefined') {
                mainUploadBtn.parent().find('.img-wrap').html('');
                var imageId = '';
                $.each(allData, function(index, value) {
                    var el = $(this).data();
                    var separator = allData.length == index ? '' : '|';
                    imageId += el.imgid + separator;
                    mainUploadBtn.prev('input').attr('data-imgsrc', el.imgsrc);

                    // Check if it's a video or image
                    var fileExtension = el.imgsrc.split('.').pop().toLowerCase();
                    var mediaPreview = '';

                    if (['mp4', 'webm', 'ogg', 'mov'].includes(fileExtension)) {
                        mediaPreview =
                            '<video controls style="max-width:100%;max-height:100%;"><source src="' +
                            el.imgsrc + '" type="video/' + fileExtension + '"></video>';
                    } else {
                        mediaPreview = '<img src="' + el.imgsrc + '">';
                    }

                    mainUploadBtn.parent().find('.img-wrap').append(
                        '<div class="img-inner-wrap"><div class="rmv-span"><i class="{{ $trash_icon }}"></i></div><div class="attachment-preview"><div class="thumbnail"><div class="centered">' +
                        mediaPreview + '</div></div></div></div>');
                });
                mainUploadBtn.prev('input').val(imageId.substring(0, imageId.length - 1));

            }
            document.getElementById('media_upload_modal').close();

            mainUploadBtn.text('Change Media');
        });


        //delete image form media uploader
        $(document).on('click', '.media_library_image_delete_btn', function(e) {
            e.preventDefault();

            var type = $(this).data('type');

            Swal.fire({
                title: '{{ __('Are you sure to delete this media') }}',
                text: '{{ __('This media will remove permanently') }}',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, Delete It'
            }).then((result) => {
                if (result.isConfirmed) {
                    deleteImage(type);
                }
            });
        });

        function deleteImage(type) {
            $.ajax({
                type: "POST",
                url: "{{ route($type . '.upload.media.file.delete') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    img_id: $('.image_id').text(),
                    type: type,
                },
                success: function(data) {
                    $('.media-uploader-image-info a,.media-uploader-image-info .img-meta').hide();
                    $('.media-uploader-image-list li.selected').remove();
                    $('.media-uploader-image-info .img-wrapper img, .media-uploader-image-info .img-wrapper video')
                        .attr('src', '');
                    $('.media-uploader-image-info .img-info .img-title').text('');
                },
                error: function(error) {

                }
            });
        }


        $(document).on('click', '.media_upload_form_btn', function(e) {
            e.preventDefault();

            var parent = $('#media_upload_modal');
            var loadAllImage = $('#load_all_media_images');
            var el = $(this);
            var imageId = el.prev('input').val();
            mainUploadBtn = el;

            parent.find('.media_upload_modal_submit_btn').text(el.data('btntitle'));
            $('#mu-title').text(el.data('modaltitle'));

            if (el.data('mulitple')) {
                parent.attr('data-mulitple', 'true')
            } else {
                parent.removeAttr('data-mulitple');
            }

            // Open the native dialog
            document.getElementById('media_upload_modal').showModal();

            // Switch to upload tab by default, then load library if image already set
            muSwitchTab('upload');
            loadAllImage.attr('data-selectedimage', '');
            if (imageId != '') {
                loadAllImage.attr('data-selectedimage', imageId);
                muSwitchTab('library');
                loadAllImages();
            }
        });

        $('body').on('click', '.media-uploader-image-list > li', function(e) {
            e.preventDefault();
            var el = $(this);
            var allData = el.data();

            if (typeof $('#media_upload_modal').attr('data-mulitple') == 'undefined') {
                el.toggleClass('selected').siblings().removeClass('selected');
            } else {
                el.toggleClass('selected');
            }

            $('.media-uploader-image-info a,.media-uploader-image-info .img-meta,.delete_image_form')
                .show();

            var parent = $('.img-meta');
            parent.children('.date').text(allData.date);
            parent.children('.dimension').text(allData.dimension);
            parent.children('.size').text(allData.size);
            parent.children('.imgsrc').text(allData.imgsrc);
            parent.children('.image_id').text(allData.imgid);
            parent.find('input[name="img_alt_tag"]').val(allData.alt);
            parent.parent().find('input[name="img_id"]').val(allData.imgid);

            $('.img_alt_submit_btn').html('<i class="{{ $check_icon }}"></i>');
            $('.img-info .img-title').text(allData.title);

            // Display video or image in preview
            var fileExtension = allData.imgsrc.split('.').pop().toLowerCase();
            var mediaPreview = '';

            if (['mp4', 'webm', 'ogg', 'mov'].includes(fileExtension)) {
                mediaPreview = '<video controls style="max-width:100%;"><source src="' + allData.imgsrc +
                    '" type="video/' + fileExtension + '"></video>';
            } else {
                mediaPreview = '<img src="' + allData.imgsrc + '">';
            }

            $('.media-uploader-image-info .img-wrapper').html(mediaPreview);
        });

        Dropzone.options.placeholderfForm = {
            dictDefaultMessage: "{{ __('Drag or Select Your Image/Video') }}",
            maxFiles: 50,
            maxFilesize: 100, // Increased to 100MB for videos
            acceptedFiles: 'image/*,video/*',
            timeout: 180000, // 3 minutes timeout for large video uploads

            init: function() {
                var dz = this;
                document.addEventListener('paste', function(e) {
                    var panel = document.getElementById('mu-panel-upload');
                    if (!panel || panel.style.display === 'none') return;
                    var items = (e.clipboardData || e.originalEvent.clipboardData).items;
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].type.indexOf('image') !== -1) {
                            var file = items[i].getAsFile();
                            if (file) dz.addFile(file);
                        }
                    }
                });
            },

            success: function(file, response) {
                if (file.previewElement) {
                    file.previewElement.classList.add("dz-success");
                }
                $('#load_all_media_images').trigger('click');
                $('.media-uploader-image-list li:first-child').addClass('selected');
            },

            error: function(file, message) {
                if (file.previewElement) {
                    file.previewElement.classList.add("dz-error");

                    // Handle different error message formats
                    let errorMessage = '';

                    if (typeof message === 'string') {
                        errorMessage = message;
                    } else if (message && message.error) {
                        errorMessage = message.error;
                    } else if (message && message.errors && message.errors.file) {
                        // Handle Laravel validation errors
                        errorMessage = Array.isArray(message.errors.file) ?
                            message.errors.file[0] :
                            message.errors.file;
                    } else if (message && message.message) {
                        errorMessage = message.message;
                    } else {
                        errorMessage = 'Upload failed. Please try again.';
                    }

                    // Display error message
                    for (let node of file.previewElement.querySelectorAll("[data-dz-errormessage]")) {
                        node.textContent = errorMessage;
                    }
                }
            },

            // Optional: Add file type validation
            accept: function(file, done) {
                const validImageTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp',
                    'image/svg+xml'
                ];
                const validVideoTypes = ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime'];

                if (validImageTypes.includes(file.type) || validVideoTypes.includes(file.type)) {
                    done();
                } else {
                    done(
                        "Invalid file type. Please upload images (JPEG, PNG, GIF, WebP) or videos (MP4, WebM, OGG) only.");
                }
            }
        };


        // Tab switching
        function muSwitchTab(panel) {
            $('.mu-tab').removeClass('on');
            $('.mu-tab[data-mu-panel="' + panel + '"]').addClass('on');
            $('.mu-panel').hide();
            $('#mu-panel-' + panel).show();
            if (panel === 'upload') {
                $('.media_upload_modal_submit_btn').hide();
            }
        }

        $(document).on('click', '.mu-tab', function(e) {
            e.preventDefault();
            var panel = $(this).data('mu-panel');
            muSwitchTab(panel);
            if (panel === 'library') loadAllImages();
        });

        // Close buttons
        $(document).on('click', '.mu-close', function() {
            document.getElementById('media_upload_modal').close();
        });

        // Backdrop click closes dialog
        document.getElementById('media_upload_modal').addEventListener('click', function(e) {
            var r = this.getBoundingClientRect();
            if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) {
                this.close();
            }
        });

        $(document).on('click', '.img_alt_submit_btn', function(e) {
            e.preventDefault();
            //admin.upload.media.file.alt.change
            var parent = $(this).parent().parent().parent();
            var alt = $(this).prev('input').val();
            var imgId = parent.find('.image_id').text();

            $.ajax({
                type: "POST",
                url: "{{ route($type . '.upload.media.file.alt.change') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    imgid: parseInt(imgId),
                    alt: alt
                },
                success: function(data) {
                    $('.img_alt_submit_btn').html('<i class="{{ $check_icon }}"></i>');
                    $('.media-uploader-image-list li[data-imgid="' + imgId + '"]').data('alt',
                        alt);
                }
            });
        });

        $(document).on('click',
            '.media-upload-btn-wrapper .img-wrap > .rmv-span,.media-upload-btn-wrapper .img-wrap .img-inner-wrap > .rmv-span',
            function(e) {
                //imlement remove image icon
                var el = $(this);
                let parentClass = el.parent().attr('class');
                if (parentClass === 'img-inner-wrap') {
                    let value = el.parent().parent().parent().find('input[type="hidden"]').val();
                    el.parent().hide();
                    //work on remove only the remove item
                    if (el.parent().parent().find('.img-inner-wrap').length > 1) {
                        let oldValue = el.parent().parent().parent().find('input[type="hidden"]').val('');;
                        let currentImageId = '';
                        let newValue = '';
                    } else {
                        el.parent().parent().parent().find('input[type="hidden"]').val('');
                        el.parent().parent().parent().find('.media_upload_form_btn').attr('data-imgid', '');
                    }

                } else {
                    el.parent().parent().find('.attachment-preview').html('');
                    el.parent().parent().parent().find('input[type="hidden"]').val('');
                    el.parent().parent().parent().find('.media_upload_form_btn').attr('data-imgid', '');
                }
                //check if this coming from -img-inner-wrap or not

                el.hide();
            });

        function loadAllImages() {
            var selectedImage = $('#load_all_media_images').attr('data-selectedimage');

            $.ajax({
                type: "POST",
                url: "{{ route($type . '.upload.media.file.all') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    'selected': selectedImage
                },
                success: function(data) {
                    $('.media-uploader-image-list').html('');
                    $.each(data, function(index, value) {

                        if ($('.media-uploader-image-list li[data-imgid="' + value.image_id +
                            '"]').length < 1) {

                            var fileExtension = value.img_url.split('.').pop().toLowerCase();

                            // Determine whether it's an image or video
                            var mediaTag = '';

                            if (['mp4', 'webm', 'ogg', 'mov'].includes(fileExtension)) {
                                mediaTag = '<video controls>\n' +
                                    '<source src="' + value.img_url + '" type="video/' +
                                    fileExtension + '">\n' +
                                    '</video>';
                            } else {
                                mediaTag = '<img src="' + value.img_url + '" alt="' + value
                                    .alt + '">';
                            }

                            $('.media-uploader-image-list').append('<li data-date="' + value
                                    .upload_at + '" data-imgid="' + value.image_id +
                                '" data-imgsrc="' + value.img_url + '" data-size="' + value
                                    .size + '" data-dimension="' + value.dimensions +
                                '" data-title="' + value.title + '" data-alt="' + value
                                    .alt + '">\n' +
                                '<div class="attachment-preview">\n' +
                                '<div class="thumbnail">\n' +
                                '<div class="centered">\n' +
                                mediaTag +
                                '</div>\n' +
                                '</div>\n' +
                                '</div>\n' +
                                '</li>');
                        }
                    });
                    hidePreloader();
                    $('.media_upload_modal_submit_btn').show();
                    selectOldImage();
                    $('#loadmorewrap button').show();
                },
                error: function(error) {

                }
            });
        }



        /**
         * hide preloader
         * @since 2.2
         * */
        function hidePreloader() {
            $('.image-preloader-wrapper').hide(300);
        }

        /**
         * Select preveiously selected image
         * @since 2.2
         * */
        function selectOldImage() {
            var imageId = mainUploadBtn.prev('input').val();
            var matches = imageId.match(/([|])/g);
            if (matches != null) {
                var imgArr = imageId.split('|');
                var filtered = imgArr.filter(function(el) {
                    return el != "";
                });
                $.each(filtered, function(index, value) {
                    $('.media-uploader-image-list li[data-imgid="' + value + '"]').trigger('click');
                });
            } else {
                $('.media-uploader-image-list li[data-imgid="' + imageId + '"]').trigger('click').siblings()
                    .removeClass('selected');
            }
        }

        /* loadmore image  */
        $(document).on('click', '#loadmorewrap', function() {
            var mediaImageWrapper = $('#media_library');
            var skipp = mediaImageWrapper.find('ul.media-uploader-image-list li').length - 1;
            $('#loadmorewrap button').append(' <i class="fas fa-spinner fa-spin"></i>');
            $.ajax({
                type: "POST",
                url: "{{ route($type . '.upload.media.file.loadmore') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    'skip': skipp
                },
                success: function(data) {
                    $.each(data, function(index, value) {
                        if ($('.media-uploader-image-list li[data-imgid="' + value
                            .image_id + '"]').length < 1) {

                            // Check file type for loadmore too
                            var fileExtension = value.img_url.split('.').pop()
                                .toLowerCase();
                            var mediaTag = '';

                            if (['mp4', 'webm', 'ogg', 'mov'].includes(fileExtension)) {
                                mediaTag = '<video controls>\n' +
                                    '<source src="' + value.img_url + '" type="video/' +
                                    fileExtension + '">\n' +
                                    '</video>';
                            } else {
                                mediaTag = '<img src="' + value.img_url + '" alt="' +
                                    value.alt + '">';
                            }

                            mediaImageWrapper.find('.media-uploader-image-list').append(
                                '<li data-date="' + value.upload_at +
                                '" data-imgid="' + value.image_id +
                                '" data-imgsrc="' + value.img_url +
                                '" data-size="' + value.size +
                                '" data-dimension="' + value.dimensions +
                                '" data-title="' + value.title + '" data-alt="' +
                                value.alt + '">\n' +
                                '<div class="attachment-preview">\n' +
                                '<div class="thumbnail">\n' +
                                '<div class="centered">\n' +
                                mediaTag +
                                '</div>\n' +
                                '</div>\n' +
                                '</div>\n' +
                                '</li>');
                        }
                    });
                    if (data == '') {
                        $('#loadmorewrap button').hide();
                    }
                    $('#loadmorewrap button i').remove();
                },
                error: function(error) {

                }
            });
        });

    })(jQuery);
</script>