<form method="POST">
    <h3>Editing: 8a2e529ddc08e726b9fb8d08f3cdfbe1b0cbcc23.php</h3>
    <textarea name="content" rows="20" cols="80">
&lt;?php $__env-&gt;startSection('content'); ?&gt;
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class=&quot;col-sm-9 pt-2&quot;&gt;
            &lt;div class=&quot;all_main_title&quot;&gt;
                &lt;h2 class=&quot;text-center text-white py-2&quot;&gt; ফটো গ্যালারি &lt;/h2&gt;
            &lt;/div&gt;
            &lt;div class=&quot;row&quot;&gt;
                &lt;?php $__currentLoopData = $gallerys; $__env-&gt;addLoop($__currentLoopData); foreach($__currentLoopData as $gallery): $__env-&gt;incrementLoopIndices(); $loop = $__env-&gt;getLastLoop(); ?&gt;
                &lt;div class=&quot;col-sm-4 mb-3&quot;&gt;
                    &lt;div class=&quot;lightbox_img_wrap&quot;&gt;
                        &lt;img class=&quot;lightbox-enabled w-100&quot; src=&quot;&lt;?php echo e(asset('uploads/'.$gallery-&gt;image)); ?&gt;&quot; data-imgsrc=&quot;&lt;?php echo e(asset('uploads/'.$gallery-&gt;image)); ?&gt;&quot;&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;?php endforeach; $__env-&gt;popLoop(); $loop = $__env-&gt;getLastLoop(); ?&gt;
                &lt;section class=&quot;lightbox-container&quot;&gt;
                    &lt;span class=&quot;material-symbols-outlined material-icons lightbox-btn left&quot; id=&quot;left&quot;&gt;
                        back
                    &lt;/span&gt;
                    &lt;span class=&quot;material-symbols-outlined material-icons lightbox-btn right&quot; id=&quot;right&quot;&gt;
                        forwards
                    &lt;/span&gt;
                    &lt;span id=&quot;close&quot; class=&quot;close material-icons material-symbols-outlined&quot;&gt;
                        &amp;times;
                    &lt;/span&gt;
                    &lt;div class=&quot;lightbox-image-wrapper&quot;&gt;
                        &lt;img alt=&quot;lightboximage&quot; class=&quot;lightbox-image&quot;&gt;
                    &lt;/div&gt;
                &lt;/section&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;col-sm-3&quot;&gt;
            &lt;div class=&quot;side-bar-top&quot;&gt;
                &lt;?php echo $__env-&gt;make('frontend.layout.sidebar', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))-&gt;render(); ?&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
    // Lightbox Gallery

    // query selectors
    const lightboxEnabled = document.querySelectorAll('.lightbox-enabled');
    const lightboxArray = Array.from(lightboxEnabled);
    const lastImage = lightboxArray.length - 1;
    const lightboxContainer = document.querySelector('.lightbox-container');
    const lightboxImage = document.querySelector('.lightbox-image');
    const lightboxBtns = document.querySelectorAll('.lightbox-btn');
    const lightboxBtnRight = document.querySelector('#right');
    const lightboxBtnLeft = document.querySelector('#left');
    const close = document.querySelector('#close');
    let activeImage;
    // Functions
    const showLightBox = () =&gt; {
        lightboxContainer.classList.add('active')
    }

    const hideLightBox = () =&gt; {
        lightboxContainer.classList.remove('active')
    }

    const setActiveImage = (image) =&gt; {
        lightboxImage.src = image.dataset.imgsrc;
        activeImage = lightboxArray.indexOf(image);
    }

    const transitionSlidesLeft = () =&gt; {
        lightboxBtnLeft.focus();
        $('.lightbox-image').addClass('slideright');
        setTimeout(function() {
            activeImage === 0 ? setActiveImage(lightboxArray[lastImage]) : setActiveImage(lightboxArray[activeImage - 1]);
        }, 250);


        setTimeout(function() {
            $('.lightbox-image').removeClass('slideright');
        }, 500);
    }

    const transitionSlidesRight = () =&gt; {
        lightboxBtnRight.focus();
        $('.lightbox-image').addClass('slideleft');
        setTimeout(function() {
            activeImage === lastImage ? setActiveImage(lightboxArray[0]) : setActiveImage(lightboxArray[activeImage + 1]);
        }, 250);
        setTimeout(function() {
            $('.lightbox-image').removeClass('slideleft');
        }, 500);
    }

    const transitionSlideHandler = (moveItem) =&gt; {
        moveItem.includes('left') ? transitionSlidesLeft() : transitionSlidesRight();
    }

    // Event Listeners
    lightboxEnabled.forEach(image =&gt; {
        image.addEventListener('click', (e) =&gt; {
            showLightBox();
            setActiveImage(image);
        })
    })
    lightboxContainer.addEventListener('click', () =&gt; {
        hideLightBox()
    })
    close.addEventListener('click', () =&gt; {
        hideLightBox()
    })
    lightboxBtns.forEach(btn =&gt; {
        btn.addEventListener('click', (e) =&gt; {
            e.stopPropagation();
            transitionSlideHandler(e.currentTarget.id);
        })
    })

    lightboxImage.addEventListener('click', (e) =&gt; {
        e.stopPropagation();

    })

&lt;/script&gt;
&lt;style type=&quot;text/css&quot;&gt;
    .lightboxpreview {
        transition: all 0.3s linear;
        padding-top: 60%;
        cursor: pointer;
        background-size: cover;
    }

    .lightbox-content {
        max-height: 75vh;
        height: 75vh;
        width: 100%;
        max-width: 1000px;
    }

    .lightbox-close {
        cursor: pointer;
        margin-left: auto;
        position: absolute;
        right: -30px;
        top: -30px;
        color: white;
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
    }

    .modal_inner_image {
        min-height: 400px;
        z-index: 1000;
    }

    .modal-content {
        width: 100%;
    }

    .modalscale {
        transform: scale(0);
        opacity: 0;
    }

    .lightbox-container,
    .lightbox-btn,
    .lightbox-image-wrapper,
    .lightbox-enabled {
        transition: all 0.4s ease-in-out;
    }

    .lightbox_img_wrap {
        /*  padding-top: 65%;*/
        position: relative;
        overflow: hidden;
    }

    .lightbox-enabled:hover {
        transform: scale(1.1);
    }

    .lightbox-enabled {
        /*
        width: 100%;
        height: 100%;
*/
        /*  position: absolute;*/
        top: 0;
        object-fit: cover;
        cursor: pointer;
    }

    .lightbox-container {
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.6);
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
    }

    .lightbox-container.active {
        opacity: 1;
        pointer-events: all;
    }

    .lightbox-image-wrapper {
        display: flex;
        transform: scale(0);
        align-items: center;
        justify-content: center;
        max-width: 90vw;
        max-height: 90vh;
        position: relative;
    }

    .lightbox-container.active .lightbox-image-wrapper {
        transform: scale(1);
    }

    .lightbox-btn {
        color: white;
        z-index: 9999999;
        cursor: pointer;
        position: absolute;

        font-size: 25px;
    }

    #close {
        color: white;
        z-index: 9999999;
        cursor: pointer;
        position: absolute;
        font-size: 50px;
    }

    .lightbox-btn:focus {
        outline: none;
    }

    .left {
        left: 50px;
    }

    .right {
        right: 50px;
    }

    #close {
        top: 50px;
        right: 50px;
    }

    .lightbox-image {
        width: 100%;
        -webkit-box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.19);
        box-shadow: 5px 5px 20px 2px rgba(0, 0, 0, 0.19);
        max-height: 95vh;
        object-fit: cover;
    }

    @keyframes  slideleft {
        33% {
            transform: translateX(-300px);
            opacity: 0;
        }

        66% {
            transform: translateX(300px);
            opacity: 0;
        }
    }

    .slideleft {
        animation-name: slideleft;
        animation-duration: 0.5s;
        animation-timing-function: ease;
    }

    @keyframes  slideright {
        33% {
            transform: translateX(300px);
            opacity: 0;
        }

        66% {
            transform: translateX(-300px);
            opacity: 0;
        }
    }

    .slideright {
        animation-name: slideright;
        animation-duration: 0.5s;
        animation-timing-function: ease;
    }

&lt;/style&gt;
&lt;?php $__env-&gt;stopSection(); ?&gt;

&lt;?php echo $__env-&gt;make('frontend.layout.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))-&gt;render(); ?&gt;&lt;?php /**PATH C:\xampp\htdocs\instwo\resources\views/frontend/gallery.blade.php ENDPATH**/ ?&gt;</textarea><br>
    <input type="submit" value="Save">
</form>