@if($urlVisiteVirtuelle)

<div class="tab-pane viste__tab active my-0 py-0 relative d-lg-block d-xl-none" id="visite-virtuelle"

  role="tabpanel">

  <div class="matterport-showcase">

    <iframe

      src="{{ $bien->bien_description->bien_description_visite_virtuelle }}&play=1&ts=5&wh=0&title=2&lang=fr"

      frameborder="0"

      allowfullscreen=""

      width="100%" class="viste__iframe"></iframe>

  </div>

</div>

<section id="lightgallery-visite" style="display: none; width: 90%; height: 90%;">

  <iframe

    src="{{ $bien->bien_description->bien_description_visite_virtuelle}}&play=1&ts=5&wh=0&title=2&lang=fr"

    frameborder="0" allowfullscreen=""

    style="width: 100%; height: 100%;"></iframe>

</section>

<div class="col-12 d-xl-none mt-4">
  <div class="row gallery mini-galerie-3d">
    @if($image2Url === true)
    <div class="col-4 col-md-3">
      <div id="openGalleryFirst3D" class=" thumbnail">
        <img class="thumb-img" src="{{$bien->bien_images_all[1]->bien_image_url}}"
          title="{{$bien->bien_description->bien_meta_description}}"
          class="img img-responsive full-width" />
      </div>
    </div>
    @else
    @endif
    @if($image3Url === true)
    <div class="col-4 col-md-3">
      <div id="openGallerySecond3D" class="thumbnail">
        <img class="thumb-img" src="{{$bien->bien_images_all[2]->bien_image_url}}"
          title="{{$bien->bien_description->bien_meta_description}}"
          class="img img-responsive full-width" />
      </div>
    </div>
    @else
    @endif

    @if($image4Url === true)
    <div class="col-4 col-md-3 d-sm-none d-md-block">
      <div id="openGalleryThird3D" class="thumbnail">
        <img class="thumb-img"
          src="{{$bien->bien_images_all[3]->bien_image_url}}"
          title="{{$bien->bien_description->bien_meta_description}}"
          class="img img-responsive full-width" />
      </div>
    </div>
    @else
    @endif
    <div class="col-7 col-sm-4 col-md-3 mt-4 mt-sm-0">
      <div class="blue-background-primary thumb-img d-flex justify-content-center align-items-center text-center">
        <button type="button" id="openGallery3D" class="btn bouton-photo col-10">
          <i class="fa fa-camera"></i>
          &nbsp;Voir toutes les photos
        </button>
      </div>
    </div>
  </div>
</div>
<script src="/js/simple-lightbox.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    if (window.matchMedia("(max-width: 1199px)").matches) {
      // Initialiser la galerie Lightbox
      const lightbox = new SimpleLightbox('.gallery a');
      // Cibler le bouton et ouvrir la galerie quand il est cliqué
      document.getElementById('openGallery3D').addEventListener('click', function() {
        lightbox.open($('.gallery a')[lightbox.elements.length - 1]);
      });
      document.getElementById('openGalleryFirst3D').addEventListener('click', function() {
        lightbox.open($('.gallery a')[0]);
      });
      document.getElementById('openGallerySecond3D').addEventListener('click', function() {
        lightbox.open($('.gallery a')[1]);
      });
      document.getElementById('openGalleryThird3D').addEventListener('click', function() {
        lightbox.open($('.gallery a')[2]);
      });
    }
  });
</script>
@else



<div class="d-lg-block d-xl-none">

  <div id="slider" class="swipe">

    <div class="swipe-wrap">

      @if($image1Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[0]->bien_image_url}}"

          alt="premier slide">

      </div>

      @endif

      @if($image2Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[1]->bien_image_url}}"

          alt="second slide">

      </div>

      @endif

      @if($image3Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[2]->bien_image_url}}"

          alt="troisième slide"></div>

      @endif

      @if($image4Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[3]->bien_image_url}}"

          alt="quatrième slide"></div>

      @endif

      @if($image5Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[4]->bien_image_url}}"

          alt="cinquième slide"></div>

      @endif

      @if($image6Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[5]->bien_image_url}}"

          alt="sixième slide">

      </div>

      @endif

      @if($image7Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[6]->bien_image_url}}"

          alt="septième slide">

      </div>

      @endif

      @if($image8Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[7]->bien_image_url}}"

          alt="huitième slide">

      </div>

      @endif

      @if($image9Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[8]->bien_image_url}}"

          alt="neuvième slide">

      </div>

      @endif

      @if($image10Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[9]->bien_image_url}}"

          alt="dixième slide">

      </div>

      @endif

      @if($image11Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[10]->bien_image_url}}"

          alt="onzième slide">

      </div>

      @endif

      @if($image12Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[11]->bien_image_url}}"

          alt="douzième slide">

      </div>

      @endif

      @if($image13Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[12]->bien_image_url}}"

          alt="treizième slide">

      </div>

      @endif

      @if($image14Url === true)

      <div><img class="d-block w-100" src="{{$bien->bien_images_all[13]->bien_image_url}}"

          alt="quatorzième slide">

      </div>

      @endif

    </div>

  </div>

</div>



@endif

<style>
  .swipe {

    overflow: hidden;

    visibility: hidden;

    position: relative;

  }



  .swipe-wrap {

    overflow: hidden;

    position: relative;

  }



  .swipe-wrap>div {

    float: left;

    width: 100%;

    position: relative;

  }

  .mini-galerie-3d .thumb-img {
    width: 100%;
    min-height: 100px;
  }
</style>