Laravel product gallery image clickable

     <div class="col col-lg-7">

                    <div class="d-flex gap-2 gap-lg-3">

                        <div class="d-flex flex-column gap-2 gap-lg-3">

                            @php

                            $mainImageUsed = false; // Flag to track if main image has been used

                            @endphp

               

                            <div class="">

                                @if($product->prod_gal_img_one)

                                    <img class="ezytor-border-radius-12 gallery-img"

                                        src="{{ asset('uploads/product-gallery/' . $product->prod_gal_img_one) }}"

                                        alt="Gallery Image"

                                        style="width:90px; height:90px;">

                                @else

                                    @if(!$mainImageUsed)

                                        <img class="ezytor-border-radius-12 gallery-img"

                                            src="{{ asset('images/' . $product->product_thumbnail) }}"

                                            alt="Main Product Image"

                                            style="width:90px; height:90px;">

                                        @php $mainImageUsed = true; @endphp

                                    @else

                                        <!-- Leave blank or use a default placeholder -->

                                        <span style="width:90px; height:90px;"></span>

                                    @endif

                                @endif

                            </div>

               

                            <div class="">

                                @if($product->prod_gal_img_two)

                                    <img class="ezytor-border-radius-12 gallery-img"

                                        src="{{ asset('uploads/product-gallery/' . $product->prod_gal_img_two) }}"

                                        alt="Gallery Image"

                                        style="width:90px; height:90px;">

                                @else

                                    @if(!$mainImageUsed)

                                        <img class="ezytor-border-radius-12 gallery-img"

                                            src="{{ asset('images/' . $product->product_thumbnail) }}"

                                            alt="Main Product Image"

                                            style="width:90px; height:90px;">

                                        @php $mainImageUsed = true; @endphp

                                    @else

                                        <!-- Leave blank or use a default placeholder -->

                                        <span style="width:90px; height:90px;"></span>

                                    @endif

                                @endif

                            </div>

               

                            <div class="">

                                @if($product->prod_gal_img_three)

                                    <img class="ezytor-border-radius-12 gallery-img"

                                        src="{{ asset('uploads/product-gallery/' . $product->prod_gal_img_three) }}"

                                        alt="Gallery Image"

                                        style="width:90px; height:90px;">

                                @else

                                    @if(!$mainImageUsed)

                                        <img class="ezytor-border-radius-12 gallery-img"

                                            src="{{ asset('images/' . $product->product_thumbnail) }}"

                                            alt="Main Product Image"

                                            style="width:90px; height:90px;">

                                        @php $mainImageUsed = true; @endphp

                                    @else

                                        <!-- Leave blank or use a default placeholder -->

                                        <span style="width:90px; height:90px;"></span>

                                    @endif

                                @endif

                            </div>

               

                            <div class="">

                                @if($product->prod_gal_img_four)

                                    <img class="ezytor-border-radius-12 gallery-img"

                                        src="{{ asset('uploads/product-gallery/' . $product->prod_gal_img_four) }}"

                                        alt="Gallery Image"

                                        style="width:90px; height:90px;">

                                @else

                                    @if(!$mainImageUsed)

                                        <img class="ezytor-border-radius-12 gallery-img"

                                            src="{{ asset('images/' . $product->product_thumbnail) }}"

                                            alt="Main Product Image"

                                            style="width:90px; height:90px;">

                                        @php $mainImageUsed = true; @endphp

                                    @else

                                        <!-- Leave blank or use a default placeholder -->

                                        <span style="width:90px; height:90px;"></span>

                                    @endif

                                @endif

                            </div>

                        </div>

               

                        <div>

                            <img id="mainImage" class="img-fluid" src="{{ asset('images/' . $product->product_thumbnail) }}" alt="Main Product Image"

                                style="width:560px; height:406px;">

                        </div>

                    </div>

                </div>

//js code

{{-- gallery image clickable --}}

<script>

    document.querySelectorAll('.gallery-img').forEach(img => {

        img.addEventListener('click', function() {

            document.getElementById('mainImage').src = this.src;

        });

    });

</script>