@php
$fimg = '';
@endphp
<div style="position: fixed; z-index:99990;top:0px;left:0px;padding:10px;height:100vh;background-color:#FFF;display:none;" id="productGallery">
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="alert alert-info">
                <div class="clearfix"></div>
                <span class="text-danger pull-left">Click on the thumbnail to see full preview on right</span>
                <span class="text-danger pull-right" style="cursor: pointer;" onclick="toggleGallery();"><i class="fa fas fa-times"></i> Close</span>
                <div class="clearfix"></div>
            </div>
        </div>
        <div class="col-sm-4 col-md-4">
            <div class="row" style="height:100vh;">
                @foreach ($images as $colorName => $thumbs)
                @foreach ($thumbs as $thumb)
                <div class="col-md-4 col-sm-6">
                    @php
                        if(empty($fimg)) {
                            $fimg = $thumb;
                        }
                    @endphp
                    <img src="{{ $thumb }}"
                    class="img-responsive" 
                    onclick="document.getElementById('zoomImg').src=this.src;" style="cursor: pointer;"/>
                </div>
                @endforeach
                @endforeach
            </div>
        </div>
        <div class="col-sm-8 col-md-8">
            <div class="pthumbs">
                <img src="{{ $fimg }}" alt="" id="zoomImg">
            </div>
        </div>
    </div>
</div>
</div>