@php
$options = [
    'http' => [
      'timeout' => 3, // 3 seconds
    ],
    'ssl' => [
      'verify_peer' => false,
      'verify_peer_name' => false,
      'allow_self_signed' => true,
    ],
  ];
  $context = stream_context_create($options);
  $coln = 12;
@endphp

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.0.4/swiper-bundle.min.js" integrity="sha512-0N/5ZOjfsh3niel+5dRD40HQkFOWaxoVzqMVAHnmAO2DC3nY/TFB7OYTaPRAFJ571IRS/XRsXGb2XyiFLFeu1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.0.4/swiper-bundle.css" integrity="sha512-3OuH/9eh0Sx9s/c23ZFG5SJb3GvBluF9cdGgQXhZyMyId4GP87W9QBgkHmocx+8kZaCZmXQUUuLOD4Q4f5PaWQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row">
	 @if(!empty($pin))
    @if($pin->HasPhoto > 0)

    @if(@file_get_contents("https://s3.us-central-1.wasabisys.com/partswarehouse/photos/".(!empty($ClientMap) ? $ClientMap->ProductCode: '')."-2.jpg",0, $context, 0, 1))

        @php $is_image[2]=1; @endphp
        @if(@file_get_contents("https://s3.us-central-1.wasabisys.com/partswarehouse/photos/".(!empty($ClientMap) ? $ClientMap->ProductCode: '')."-3.jpg",0, $context, 0, 1))
        @php $coln = 9; @endphp
        <div class="col-lg-3 col-md-3 text-center d-none d-lg-block">
            <div class="product-image-thumbs">


                <div class="product-image-thumb activeIMG"><img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg" alt="Product Image"></div>
                <div class="product-image-thumb mt-2"><img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-3.jpg" alt="Product Image"></div>
                @php $is_image[2]=1; @endphp
                @php $is_image[3]=1; @endphp
                @if(@file_get_contents("https://s3.us-central-1.wasabisys.com/partswarehouse/photos/".(!empty($ClientMap) ? $ClientMap->ProductCode: '')."-4.jpg",0, $context, 0, 1))
                    @php $is_image[4]=1; @endphp
                    <div class="product-image-thumb mt-2"><img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-4.jpg" alt="Product Image"></div>
                @endif
            </div>
            </div>
        @endif

    @endif

@endif

<div class="col-lg-{{ $coln }} col-md-{{ $coln }} text-center">

    @if($pin->HasPhoto > 0)
        @if(!empty($is_image[2]))

            <div class="image text-center d-none d-lg-block">
                <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg"
                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;"
                id="productimage" class="img-fluid rounded-start mt-4 product-image" alt="Product Image" style="max-width:280px; min-width:280px">
            </div>

            <div class="image text-center d-lg-none">
            @if(!empty($is_image[3]))



                <div class="swiper-container" style="overflow: hidden;">
                    <div class="swiper-wrapper">
                        <!-- Add multiple slides here with product images -->
                        @if(!empty($is_image[2]))
                        <div class="swiper-slide">
                            <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg" alt="Image 1">
                        </div>
                        @endif
                        @if(!empty($is_image[3]))
                        <div class="swiper-slide">
                            <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-3.jpg" alt="Image 2">
                        </div>
                        @endif
                        @if(!empty($is_image[4]))
                        <div class="swiper-slide">
                            <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-4.jpg" alt="Image 2">
                        </div>
                        @endif

                        <!-- Add more slides as needed -->
                    </div>
                    <div class="swiper-pagination" style="bottom: 210px;padding-bottom: 20px;"></div>
                </div>


            @else
                <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg"
                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;"
                id="productimage" class="img-fluid rounded-start mt-4 product-image" alt="Product Image" style="max-width:280px; min-width:280px; width:200px; height:auto; max-height:280px;">
            @endif
            </div>

        @else
                @if(!empty($pin->Manufacturer))
                    @if(!empty($is_manufacturer_horizontal))
                    <div class="d-none d-md-block d-lg-block" style="height: 100%;">
                        <div class="image text-center" style="display:grid; place-items:center;height:100%;">
                            <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/Desktop/{{ $pin->Manufacturer }}.png"
                            onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                                class="img-fluid rounded-start  " alt="...">
                        </div>

                    </div>

                    @else
                        <div class="image text-center">
                            <img src="{{ asset('assets/web') }}/images/NO-MANUFACTURER.png" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;" class="img-fluid rounded-start d-none d-lg-block" alt="..."  style="">
                        </div>
                    @endif
                    @if(!empty($is_manufacturer_horizontal_mobile))
                    <div class="d-lg-none" style="height: 100%;">
                        <div class="image text-center" style="display:grid; place-items:center;height:100%;">
                            <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/{{ $pin->Manufacturer }}.png"
                                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                                class="img-fluid rounded-start " alt="...">
                        </div>
                    </div>
                @else
                    <div class="image text-center d-lg-none"><h5 style="padding: 20px;font-size: 20px"><b class="text-danger">Image:</b> No image yet.</h5></div>

                @endif

            @else
                <div class="image text-center d-lg-none"><span style="padding: 20px;font-size: 20px"><b>NO IMAGE</b></span></div>
                <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg"
                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;"
                id="productimage" class="img-fluid rounded-start mt-4 product-image d-none d-lg-block" alt="Product Image" style="max-width:280px; min-width:280px">

            @endif

        @endif

     @else



        @if(!empty($pin->Manufacturer))
            @if(!empty($is_manufacturer_horizontal))
            <div class="d-none d-md-block d-lg-block" style="height: 100%;">
                <div class="image text-center" style="display:grid; place-items:center;height:100%;">
                    <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/Desktop/{{ $pin->Manufacturer }}.png"
                    onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                     class="img-fluid rounded-start  " alt="...">
                </div>

            </div>

            @else
                <div class="image text-center">
                    <img src="{{ asset('assets/web') }}/images/NO-MANUFACTURER.png" onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;" class="img-fluid rounded-start d-none d-lg-block" alt="..."  style="">
                </div>
            @endif
            @if(!empty($is_manufacturer_horizontal_mobile))
            <div class="d-lg-none" style="height: 100%;">
                <div class="image text-center" style="display:grid; place-items:center;height:100%;">
                    <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/Manufacturer-horizontal/{{ $pin->Manufacturer }}.png"
                        onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-0.jpg&quot;"
                        class="img-fluid rounded-start " alt="...">
                </div>
            </div>
        @else
         <div class="image text-center d-lg-none"><h5 style="padding: 20px;font-size: 20px"><b class="text-danger">Image:</b> No image yet.</h5></div>

        @endif


        @else
                <div class="image text-center d-lg-none"><span style="padding: 20px;font-size: 20px"><b>NO IMAGE</b></span></div>
                <img src="https://s3.us-central-1.wasabisys.com/partswarehouse/photos/{{ !empty($ClientMap) ? $ClientMap->ProductCode: '' }}-2.jpg"
                onerror="this.onerror=null;this.src=&quot;https://s3.us-central-1.wasabisys.com/partswarehouse/photos/NO_PRODUCT_IMAGE-Parts.jpg&quot;"
                id="productimage" class="img-fluid rounded-start mt-4 product-image d-none d-lg-block" alt="Product Image" style="max-width:280px; min-width:280px">

        @endif


    @endif
</div>
@endif
</div>
<script>
    $(document).ready(function() {
      let touchStartX = 0;
      let touchEndX = 0;

      $("#carouselExampleIndicators").on("touchstart", function(event) {
        touchStartX = event.touches[0].clientX;
      });

      $("#carouselExampleIndicators").on("touchend", function(event) {
        touchEndX = event.changedTouches[0].clientX;
        handleSwipe();
      });

      function handleSwipe() {
        const SWIPE_THRESHOLD = 50;
        if (touchEndX - touchStartX > SWIPE_THRESHOLD) {
          // Swipe left (previous slide)
          $("#carouselExampleIndicators").carousel("prev");
        } else if (touchStartX - touchEndX > SWIPE_THRESHOLD) {
          // Swipe right (next slide)
          $("#carouselExampleIndicators").carousel("next");
        }
      }

      var mySwiper = new Swiper(".swiper-container", {
        // Optional parameters
        loop: true,
        slidesPerView: 1,
        spaceBetween: 10,
        pagination: {
            el: ".swiper-pagination",
          },
        // More options can be added as needed
    });
    });
  </script>
<script>
    $(document).ready(function() {
      $('.product-image-thumb').on('click', function () {
        var $image_element = $(this).find('img')
        $('.product-image').prop('src', $image_element.attr('src'))
        $('.product-image-thumb.activeIMG').removeClass('activeIMG')
        $(this).addClass('activeIMG')
      })
    })
  </script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        var mySwiper = new Swiper(".swiper-container", {
            // Optional parameters
            loop: true,
            slidesPerView: 1,
            spaceBetween: 10,
            pagination: {
                el: ".swiper-pagination",
              },
            // More options can be added as needed
        });
    });
</script>
<script>


    var $loupe = $(".loupe"),
    loupeWidth = $loupe.width(),
    loupeHeight = $loupe.height();

$(document).on("mouseenter", ".image", function (e) {
    var $currImage = $(this),
        $img = $('<img/>')
        .attr('src', $('img', this).attr("src"));

    $loupe.html($img).fadeIn(100);

    $(document).on("mousemove",moveHandler);

    function moveHandler(e) {
        var imageOffset = $currImage.offset(),
            fx = imageOffset.left - loupeWidth / 2,
            fy = imageOffset.top - loupeHeight / 2,
            fh = imageOffset.top + $currImage.height() + loupeHeight / 2,
            fw = imageOffset.left + $currImage.width() + loupeWidth / 2;

        $loupe.css({
            'left': e.pageX - 75,
            'top': e.pageY - 75
        });

        var loupeOffset = $loupe.offset(),
            lx = loupeOffset.left,
            ly = loupeOffset.top,
            lw = lx + loupeWidth,
            lh = ly + loupeHeight,
            bigy = (ly - loupeHeight / 4 - fy) * 2,
            bigx = (lx - loupeWidth / 4 - fx) * 2;

        $img.css({ 'left': -bigx, 'top': -bigy });

        if (lx < fx || lh > fh || ly < fy || lw > fw) {
            $img.remove();
            $(document).off("mousemove",moveHandler);
            $loupe.fadeOut(100);
        }
    }
});




</script>