@extends('admin.layouts.app')
@section('title') Strips @endsection

@section('content')
<div class="container-fluid">
    <div class="card">
        <div class="card-body">            
            <div class="row">
                <div class="col-12 col-sm-12 col-md-2">
                    <ul class="nav nav-pills flex-column">                       
                        <li class="nav-item border rounded mb-1">
                            <a class="nav-link active" data-id="edit_strip" data-toggle="tab">Generate Strip</a>
                        </li>
                        <li class="nav-item border rounded mb-1">
                            <a class="nav-link" data-toggle="tab" data-id="create_strip">Create Strip</a>
                        </li>
                    </ul>
                </div>               
                <div class="col-12 col-sm-12 col-md-10 nav-tab" id="edit_strip">
                    <form id="update-strip" enctype="multipart/form-data">
                        @csrf
                        <div class="tab-pane">
                            <div class="card">                         
                                <div class="card-header d-flex justify-content-between">
                                    <h4>Generate Strip</h4> 
                                    @if (userCan('strips.update'))
                                        <button type="button" id="updateStrip" class="btn btn-success d-none" style="margin-left: 75%">Update <i class="fas fa-plus ms-2"></i></button>
                                    @endif
                                </div>
                                <div class="card-body">
                                    <div class="row d-flex">                                    
                                        <div class="form-group w-25 col-6">
                                            <label for="generate_category">Strip Category</label>
                                            <select class="form-control" name="category_id" id="generate_category">
                                                <option value="" >Select Category</option>
                                                @foreach ($strip_category as $strip)
                                                    <option value="{{$strip->id}}">{{$strip->name}}</option>                                                    
                                                @endforeach
                                            </select>                                        
                                        </div>
                                        
                                        <input type="hidden" name="id" id="stripId">
                                        <div class="col-6">
                                            <button type="button" class="btn btn-primary" style="display: none;" id="openModal" data-bs-toggle="modal" data-bs-target="#exampleModal">
                                                Choose Strip
                                            </button>
                                            <button type="button" class="btn btn-primary" id="fakeButton" style="margin-top: 5%;">
                                                Choose Strip
                                            </button>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12">
                                            <div class="form-group w-25">
                                                <label for="strip_name_update">Strip Name</label>
                                                <input type="text" class="form-control" id="strip_name_update" name="name" placeholder="Enter Strip Name" />
                                            </div>
                                        </div>
                                        <div class="form-group col-6 optional-field position-relative">
                                            <label class="form-lebel" id='strip_html'>
                                                Desktop Strip HTML
                                            </label>
                                            <textarea id="editor4" type="text" class="form-control"  name="strip_html"
                                                placeholder="Enter the Strip HTML">{{ old('strip_html') }}</textarea>
                                            @error('strip_html')
                                                <span
                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                            @enderror
                                            <button type="button" class="btn btn-success top-0 end-0 position-absolute custom-btn copyHtml" data-id="editor4">
                                                Copy HTML
                                            </button>
                                        </div>
                                        <div class="form-group col-6 optional-field">
                                            <label class="form-lebel" id='strip_html_mobile'>
                                                Mobile Strip HTML
                                            </label>
                                            <textarea id="editor_mobile4" type="text" class="form-control"  name="strip_html_mobile"
                                                placeholder="Enter the Strip HTML">{{ old('strip_html_mobile') }}</textarea>
                                            @error('strip_html')
                                                <span
                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                            @enderror
                                            <button type="button" class="btn btn-success top-0 end-0 position-absolute custom-btn copyHtml" data-id="editor_mobile4">
                                                Copy HTML
                                            </button>
                                        </div>                                                                   
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <h2>Desktop Preview:</h2>
                                            <iframe id="previewFrameDesktopEdit" class="border" width="100%" height="300px" frameborder="0" style="border: 3px solid black; border-radius: 5px;" title="Preview Placeholder"></iframe>
                                        </div>
                                        <div class="col-6">
                                            <h2>Mobile Preview:</h2>
                                            <iframe id="previewFrameMobileEdit" class="border" width="100%" height="300px" frameborder="0" style="border: 3px solid black; border-radius: 5px;" title="Preview Placeholder"></iframe>                                        
                                        </div>                                    
                                    </div>
                                    <div class="col-6">
                                        <label class="form-lebel" id='strip_image'>
                                            Strip Image
                                        </label>
                                        <div class="upload-btn-wrapper" id="imageDropif">
                                            <input type="file" id="imageBannerPdf" name="image" class="form-control dropify" data-default-file="" accept="image/png, image/jpg, image/jpeg, image/gif, image/pdf" data-allowed-file-extensions='["jpg", "jpeg","png", "gif","pdf"]' data-max-file-size="6M">
                                        </div>
                                    </div> 
                                </div>                                                                
                            </div>
                        </div>
                    </form>
                </div>
                <div class="col-12 col-sm-12 col-md-10 nav-tab" id="create_strip" style="display: none">
                    <form id="store-strip" enctype="multipart/form-data">
                        @csrf
                        <div class="tab-pane">
                            <div class="card">                         
                                <div class="card-header d-flex justify-content-between">
                                    <h4>Create Strip</h4>
                                    @if (userCan('strips.create'))
                                    <button type="button" id="submitStrip" class="btn btn-success" style="margin-left: 80%">Create <i class="fas fa-plus ms-2"></i></button>
                                    @endif
                                </div>
                                <div class="card-body">
                                    <div class="row d-flex justify-content-between">                                    
                                        <div class="form-group w-25 col-6">
                                            <label for="create_category">Strip Category</label>
                                            <select class="form-control" name="category_id" id="create_category">
                                                <option value="" >Select Category</option>
                                                @foreach ($strip_category as $strip)
                                                    <option value="{{$strip->id}}">{{$strip->name}}</option>                                                    
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="form-group w-25 col-6" style="margin-right: 25%">
                                            <label for="strip_name">Strip Name</label>
                                            <input type="text" class="form-control" id="strip_name" name="name" placeholder="Enter Strip Name" />
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="form-group col-6 optional-field">
                                            <label class="form-lebel" id='strip_html'>
                                                Desktop Strip HTML
                                            </label>
                                            <textarea id="editor3" type="text" class="form-control"  name="strip_html"
                                                placeholder="Enter the Strip HTML">{{ old('strip_html') }}</textarea>
                                            @error('strip_html')
                                                <span
                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>
                                        <div class="form-group col-6 optional-field">
                                            <label class="form-lebel" id='strip_html_mobile'>
                                                Mobile Strip HTML
                                            </label>
                                            <textarea id="editor_mobile3" type="text" class="form-control"  name="strip_html_mobile"
                                                placeholder="Enter the Strip HTML">{{ old('strip_html_mobile') }}</textarea>
                                            @error('strip_html')
                                                <span
                                                    class="text-danger font-size-13"><strong>{{ $message }}</strong></span>
                                            @enderror
                                        </div>                                                                   
                                    </div>
                                    <div class="row">
                                        <div class="col-6">
                                            <h2>Desktop Preview:</h2>
                                            <iframe id="previewFrameDesktop" class="border" width="100%" height="300px" frameborder="0" style="border: 3px solid black; border-radius: 5px;" title="Preview Placeholder"></iframe>
                                        </div>
                                        <div class="col-6">
                                            <h2>Mobile Preview:</h2>
                                            <iframe id="previewFrameMobile" class="border" width="100%" height="300px" frameborder="0" style="border: 3px solid black; border-radius: 5px;" title="Preview Placeholder"></iframe>                                        
                                        </div>                                    
                                    </div>
                                    <div class="col-6">
                                        <label class="form-lebel" id='strip_image'>
                                            Strip Image
                                        </label>
                                        <div class="upload-btn-wrapper">
                                            <input type="file" id="bannerPdf" class="form-control dropify" data-default-file="" name="image" accept="image/png, image/jpg, image/jpeg, image/gif, image/pdf" data-allowed-file-extensions='["jpg", "jpeg","png", "gif","pdf"]' data-max-file-size="6M">
                                        </div>                                   
                                    </div> 
                                </div>                                                               
                            </div>
                        </div>
                    </form>
                </div>                       
            </div>
        </div>       
    </div>
</div>

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" style="max-height: 60%">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Select Your Strip</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body d-flex gap-2" style="max-height: 400px; overflow-y: auto;">
                <div class="row" id="insertStripImages">
                    Create A Strip First
                </div>            
            </div>
            <div class="modal-footer">
                @if (userCan('strips.detele'))
                    <button type="button" class="btn btn-danger" id="deleteSrtip"><i class="fas fa-trash"></i></button>
                @endif
                <button type="button" class="btn btn-primary" id="submitStripModal">Submit</button>
            </div>
        </div>
    </div>
</div>


<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="snackbar" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex">
        <div class="toast-body successSnackbar">
          Strip Added Successfully
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
</div>

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
    <div id="snackbarError" class="toast align-items-center text-white bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true" style="top: 80px;">
      <div class="d-flex">
        <div class="toast-body errorSnackbar">
          Error: Something went wrong
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
</div>

<div id="loader-wrapper" class="d-none">
    <div class="spinner-border text-primary" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

@endsection
@section('style')
<link rel="stylesheet" href="{{ asset('backend') }}/plugins/select2/css/select2.min.css">
<link rel="stylesheet" href="{{ asset('backend/plugins/dropify/css/dropify.min.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/assets-desktop/css/strip.css') }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .sidebar {
            width: 250px;
        } 
        
        .changeColor.active {
            background-color: green ;
            border-color: green;
        }

        /* CSS for full-page loader */
        #loader-wrapper {
            position: fixed;
            z-index: 9999;
            top: 0;
            left: 0;
            width: 129%;
            height: 100%;
            /* Removed background-color property */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Adjust loader size */
        .spinner-border {
            width: 3rem; /* adjust the size as needed */
            height: 3rem; /* adjust the size as needed */
        }

    </style>
    <style>
        body {
          margin: 0;
          padding: 0;
          font-family: Arial, sans-serif;
        }
      
        .banner {
          width: 700px;
          height: 200px;
          background-color: grey; /* Green background */
          border: 2px solid #ccc;
          padding: 20px;
          box-sizing: border-box;
          text-align: center;
          position: relative;
        }
      
        .banner h1 {
          margin-top: 0;
          font-size: 24px;
          color: #fff; /* White text */
        }
      
        .banner p {
          font-size: 16px;
          color: #333; /* Dark text */
        }

        .custom-btn{
            margin-top: 33px;
            margin-right: 13px;
            z-index: 12;
        }
      
        .sale-tag {
          position: absolute;
          top: 20px;
          right: 20px;
          background-color: #FF5722; /* Orange background */
          color: #fff; /* White text */
          padding: 5px 10px;
          font-size: 16px;
          border-radius: 5px;
          transform: rotate(-45deg);
        }

        #previewFrameMobileEdit {
            width: 414px;
            height: 300px;
            max-width: 100%;
            border: 3px solid black;
            border-radius: 5px;
        }

        #previewFrameMobile {
            width: 414px;
            height: 300px;
            max-width: 100%;
            border: 3px solid black;
            border-radius: 5px;
        }
      </style>
@endsection
@section('script')
    <script src="{{ asset('backend') }}/plugins/select2/js/select2.full.min.js"></script>
    <script src="{{ asset('backend/plugins/dropify/js/dropify.min.js') }}"></script>
    <script src="{{ asset('tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
    <script>

        $(document).on('click', '.nav-link', function () {
            let id = $(this).data('id');
            $('.nav-tab').hide();
            $('#'+id).show();
        });

        $('.dropify').dropify();


        $('.select2bs4').select2({
            theme: 'bootstrap4'
        })

        $('.copyHtml').on('click', function () {
            let id = $(this).data('id');
            let html = tinymce.get(id).getContent();

            html = html.replace(/(\ssrc|href)\s*=\s*"(\.\.\/)?/g, '$1="/');

            let tempTextarea = $('<textarea>');
            $('body').append(tempTextarea);
            tempTextarea.val(html);
            tempTextarea.select();
            document.execCommand('copy');
            tempTextarea.remove();

            $('.successSnackbar').text('HTML Copy to Clipboard')
            $('#snackbar').toast('show');
        });



        $(document).ready(function () {            
            tinymce.init({
                selector: `#editor3`,
                plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
                toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
                image_advtab: true,
                valid_elements: '*[*]',
                valid_children: '*[*]',
                extended_valid_elements: '*[*]',
                images_upload_handler: function(blobInfo, success, failure) {
                    return new Promise(function(resolve, reject) {
                        var xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', "{{ route('module.blog.upload') }}", true);
                        xhr.onload = function() {
                            var response = JSON.parse(xhr.responseText);
                            if (response.status === 200) {
                                var serverURL = window.location.protocol + '//' + window.location
                                    .hostname + ':' + window.location.port;
                                var imageURL = serverURL + '/' + response.location;
                                success(imageURL);
                                resolve(imageURL);
                            } else if (response.status === 403) {
                                reject(response.message);
                            }
                        };
                        xhr.onerror = function() {
                            reject('An error occurred during the image upload.');
                        };
                        var formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                        xhr.send(formData);
                    });
                },
                setup: function(editor) {
                    editor.on('keyup change', function() {
                        updatePreviewDesktop(editor.getContent());
                    });
                }
            });

           

            tinymce.init({
                selector: `#editor_mobile3`,
                plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
                toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
                image_advtab: true,
                valid_elements: '*[*]',
                valid_children: '*[*]',
                extended_valid_elements: '*[*]',
                images_upload_handler: function(blobInfo, success, failure) {
                    return new Promise(function(resolve, reject) {
                        var xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', "{{ route('module.blog.upload') }}", true);
                        xhr.onload = function() {
                            var response = JSON.parse(xhr.responseText);
                            if (response.status === 200) {
                                var serverURL = window.location.protocol + '//' + window.location
                                    .hostname + ':' + window.location.port;
                                var imageURL = serverURL + '/' + response.location;
                                success(imageURL);
                                resolve(imageURL);
                            } else if (response.status === 403) {
                                reject(response.message);
                            }
                        };
                        xhr.onerror = function() {
                            reject('An error occurred during the image upload.');
                        };
                        var formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                        xhr.send(formData);
                    });
                },
                setup: function(editor) {
                    editor.on('keyup change', function() {
                        updatePreviewMobile(editor.getContent());
                    });
                }
            });

         

            tinymce.init({
                selector: `#editor4`,
                plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
                toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
                image_advtab: true,
                valid_elements: '*[*]',
                valid_children: '*[*]',
                extended_valid_elements: '*[*]',
                images_upload_handler: function(blobInfo, success, failure) {
                    return new Promise(function(resolve, reject) {
                        var xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', "{{ route('module.blog.upload') }}", true);
                        xhr.onload = function() {
                            var response = JSON.parse(xhr.responseText);
                            if (response.status === 200) {
                                var serverURL = window.location.protocol + '//' + window.location
                                    .hostname + ':' + window.location.port;
                                var imageURL = serverURL + '/' + response.location;
                                success(imageURL);
                                resolve(imageURL);
                            } else if (response.status === 403) {
                                reject(response.message);
                            }
                        };
                        xhr.onerror = function() {
                            reject('An error occurred during the image upload.');
                        };
                        var formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                        xhr.send(formData);
                    });
                },
                setup: function(editor) {
                    editor.on('keyup change', function() {
                        updatePreviewDesktopEdit(editor.getContent());
                    });
                }
            });

            tinymce.init({
                selector: `#editor_mobile4`,
                plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
                toolbar: 'fontawesome | searchreplace | code |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
                image_advtab: true,
                valid_elements: '*[*]',
                valid_children: '*[*]',
                extended_valid_elements: '*[*]',
                images_upload_handler: function(blobInfo, success, failure) {
                    return new Promise(function(resolve, reject) {
                        var xhr = new XMLHttpRequest();
                        xhr.withCredentials = false;
                        xhr.open('POST', "{{ route('module.blog.upload') }}", true);
                        xhr.onload = function() {
                            var response = JSON.parse(xhr.responseText);
                            if (response.status === 200) {
                                var serverURL = window.location.protocol + '//' + window.location
                                    .hostname + ':' + window.location.port;
                                var imageURL = serverURL + '/' + response.location;
                                success(imageURL);
                                resolve(imageURL);
                            } else if (response.status === 403) {
                                reject(response.message);
                            }
                        };
                        xhr.onerror = function() {
                            reject('An error occurred during the image upload.');
                        };
                        var formData = new FormData();
                        formData.append('file', blobInfo.blob(), blobInfo.filename());
                        formData.append('_token', $('meta[name="csrf-token"]').attr('content'));
                        xhr.send(formData);
                    });
                },
                setup: function(editor) {
                    editor.on('keyup change', function() {
                        updatePreviewMobileEdit(editor.getContent());
                    });
                }
            });                    
        });
        
        $(document).on('click', '#submitStrip', function (e) {
            e.preventDefault();
            $('#loader-wrapper').removeClass('d-none');
            let formData = new FormData($('#store-strip')[0]);
            let allow = true;
            let desktopEditore = tinymce.get('editor3').getContent();

            if(desktopEditore){
                formData.delete('strip_html');
                formData.append('strip_html',desktopEditore);
            }

            let mobileEditore = tinymce.get('editor_mobile3').getContent();    

            if(mobileEditore){
                formData.delete('strip_html_mobile');
                formData.append('strip_html_mobile',mobileEditore);
            }

            if(formData.get('category_id') == null || formData.get('category_id') == ''){
                allow = false;
                $('.errorSnackbar').text('Please select a category');
                $('#snackbarError').toast('show');
            }else if(formData.get('image').name == null || formData.get('image').name == ''){
                allow = false;
                $('.errorSnackbar').text('Please insert a image');
                $('#snackbarError').toast('show');
            }

            if(allow){
                $.ajax({
                    type: 'POST',
                    url: '{{ route("strip.store") }}',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: (res) => {
                        if(res.status == 200){
                            $('#loader-wrapper').addClass('d-none');
                            $('.successSnackbar').text('Strip Created Successfully')
                            $('#snackbar').toast('show');
                            $('#strip_name').val('');
                            $('#create_category').val('');
                            tinymce.get('editor3').setContent('');
                            tinymce.get('editor_mobile3').setContent('');
                            let htmlContent = '';
                            updatePreviewMobile(htmlContent);
                            updatePreviewDesktop(htmlContent);
                            $('.dropify-clear').trigger('click');
                        }
                    },              
                });
            }else{
                $('#loader-wrapper').addClass('d-none');
            }
        });

        $(document).on('click', '#updateStrip', function (e) {
            e.preventDefault();
            $('#loader-wrapper').removeClass('d-none');
            let formData = new FormData($('#update-strip')[0]);
            let allow =true;
            let desktopEditore = tinymce.get('editor4').getContent();

            if(desktopEditore){
                formData.delete('strip_html');
                formData.append('strip_html',desktopEditore);
            }

            let mobileEditore = tinymce.get('editor_mobile4').getContent();    

            if(mobileEditore){
                formData.delete('strip_html_mobile');
                formData.append('strip_html_mobile',mobileEditore);
            }

            if(formData.get('category_id') == null || formData.get('category_id') == ''){
                allow = false;
                $('.errorSnackbar').text('Please select a category');
                $('#snackbarError').toast('show');
            }

            if(allow){
                $.ajax({
                    type: 'POST',
                    url: '{{ route("strip.update") }}',
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: (res) => {
                        if(res.status == 200){
                            $('#loader-wrapper').addClass('d-none');
                            $('.successSnackbar').text('Strip Updated Successfully')
                            $('#snackbar').toast('show');
                        }
                    },              
                });
            }            
        });

        $(document).on('click', '#fakeButton', function () {      
            let stripId = $('#generate_category').val();
            $('#fakeButton').text('Please Wait...');
            if(stripId){
                $.ajax({
                    type: 'GET',
                    url: '{{ route("strip.bringStrips", ["stripId" => ":stripId"]) }}'.replace(':stripId', stripId),
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: (res) => {
                        if(res.status == 200){
                            $('#fakeButton').text('Choose Strip');
                            $('#openModal').trigger('click');
                            $('#insertStripImages').empty();
                            let images = res.images;
                            if(images.length > 0){
                                res.images.forEach((element, index) => {
                                    $('#insertStripImages').append(
                                        `<div class="mb-3 text-center col-4 d-flex flex-column">
                                            <img src="${element.image}" alt="Image for Option ${index + 1}" class="img-fluid checkRadio" data-index="${index}">
                                            ${element.name ? '<label class="form-check-label mt-2" for="stripImage'+'_'+index+'"><span>'+element.name+'</span></label>' : ''}
                                            <input name="stripImages" class="mt-2" type="radio" value="${element.id}" id="stripImage_${index}">
                                        </div>`
                                    );
                                });
                            }else{
                                $('#insertStripImages').append(
                                    `<div class="mb-3 text-center col-12">
                                        <div class="d-flex justify-content-center align-items-center">
                                            <div>No Strips Found</div>
                                        </div>
                                    </div>`
                                );
                            }
                        }
                    },              
                });
            }else{
                $('#fakeButton').text('Choose Strip');
                $('.errorSnackbar').text('Please select a category first');
                $('#snackbarError').toast('show');
            }
        });

        $('#insertStripImages').on('click', '.checkRadio', function() {
            var index = $(this).data('index');
            $(`#stripImage_${index}`).prop('checked', true);
        });

        $(document).on('click', '#submitStripModal', function () {                                    
            var stripId = $('input[name="stripImages"]:checked').val();
            $('#submitStripModal').text('Please Wait...');
            if(stripId){
                $.ajax({
                    type: 'GET',
                    url: '{{ route("strip.bringStripsData", ["stripId" => ":stripId"]) }}'.replace(':stripId', stripId),
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: (res) => {
                        if(res.status == 200){
                            $('#submitStripModal').text('Submit');
                            $('#updateStrip').removeClass('d-none');
                            $('.btn-close').trigger('click');
                            $('#strip_name_update').val(res.strip.name)
                            if(res.strip.strip_html != null){
                                tinymce.get('editor4').setContent(res.strip.strip_html);
                                updatePreviewDesktopEdit(res.strip.strip_html);
                            }
                            if(res.strip.strip_html_mobile != null){
                                tinymce.get('editor_mobile4').setContent(res.strip.strip_html_mobile);
                                updatePreviewMobileEdit(res.strip.strip_html_mobile);
                            }
                            $('#stripId').val(res.strip.id);
                            $('#imageBannerPdf').dropify('destroy');
                            let imageUrl = res.strip.image;
                            $('#imageDropif').empty().append(` <input type="file" id="imageBannerPdf" name="image"  class="form-control dropifyUpdate" data-default-file="${imageUrl}" accept="image/png, image/jpg, image/jpeg, image/gif, image/pdf" data-allowed-file-extensions='["jpg", "jpeg","png", "gif","pdf"]' data-max-file-size="6M"> 
                            `);                     
                            
                            $('.dropifyUpdate').dropify();
                            
                            
                        }
                    },
                });
            }else{
                $('#submitStripModal').text('Submit');
                $('.errorSnackbar').text('Please select a strip first');
                $('#snackbarError').toast('show');
            }           
        });

        $('#deleteSrtip').on('click', function () {
            let stripId = $('input[name="stripImages"]:checked').val();
            $('#deleteSrtip').empty().text('Please Wait...')
            if(stripId){
                $.ajax({
                    type: 'DELETE',
                    url: '{{ route("strip.delete", ["stripId" => ":stripId"]) }}'.replace(':stripId', stripId),
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: (res) => {
                        if(res.status == 200){
                            $('#deleteSrtip').empty().append(`<i class="fas fa-trash"></i>`);
                            $('#fakeButton').trigger('click');
                            $('#openModal').trigger('click');
                            $('.successSnackbar').text('Strip Deleted Successfully');
                            $('#snackbar').toast('show');
                        }
                    },
                });
            }else{
                $('#deleteSrtip').empty().append(`<i class="fas fa-trash"></i>`);
                $('.errorSnackbar').text('Please select a strip first');
                $('#snackbarError').toast('show');
            }
        })

        function updatePreviewMobileEdit(htmlContent) {
            var styletag = `<link rel="stylesheet" type="text/css" href="/frontend/assets-mobile/css/blog_details.css">`;                
            var previewFrame = $('#previewFrameMobileEdit')[0].contentDocument || $('#previewFrameMobileEdit')[0].contentWindow.document;
            previewFrame.open();
            previewFrame.write(styletag + htmlContent);
            previewFrame.close();
        }

        function updatePreviewDesktopEdit(htmlContent) {
            var styletag = `<link rel="stylesheet" type="text/css" href="/frontend/assets-desktop/css/blog-details.css">`;                
            var previewFrame = $('#previewFrameDesktopEdit')[0].contentDocument || $('#previewFrameDesktopEdit')[0].contentWindow.document;
            previewFrame.open();
            previewFrame.write(styletag + htmlContent);
            previewFrame.close();
        }

        function updatePreviewDesktop(htmlContent) {
            var styletag = `<link rel="stylesheet" type="text/css" href="/frontend/assets-desktop/css/blog-details.css">`;                
            var previewFrame = $('#previewFrameDesktop')[0].contentDocument || $('#previewFrameDesktop')[0].contentWindow.document;
            previewFrame.open();
            previewFrame.write(styletag + htmlContent);
            previewFrame.close();
        }

        function updatePreviewMobile(htmlContent) {
            var styletag = `<link rel="stylesheet" type="text/css" href="/frontend/assets-mobile/css/blog_details.css">`;                
            var previewFrame = $('#previewFrameMobile')[0].contentDocument || $('#previewFrameMobile')[0].contentWindow.document;
            previewFrame.open();
            previewFrame.write(styletag + htmlContent);
            previewFrame.close();
        }
    </script>
@endsection