{{-- <div class="container">
    <div class="bravo-list-locations @if(!empty($layout)) {{ $layout }} @endif">
        <div class="title">
            {{$title}}
        </div>
        @if(!empty($desc))
            <div class="sub-title">
                {{$desc}}
            </div>
        @endif
        @if(!empty($rows))
            <div class="list-item">
              --}}
                <div class="row">

                    {{-- 
                      @foreach($rows as $key=>$row)
                                                <div class="col-lg-{{$size_col}} col-md-6">
                            @include('Location::frontend.blocks.list-locations.loop')
                        </div>
                    @endforeach
                </div>
            {{-- </div> 
        @endif
    </div>
</div> --}}
  <!-- start section travells -->
  <section class="travells p-2 ">
    <div class="title mr-3 p-3" >
      <h1 class=" mr-3 p-3">  {{$title}}</h1>
      @if(!empty($desc))
        <p class="mr-4 p-3">
          {{$desc}}
        </p>       
      @endif
    </div>
   
    @if(!empty($rows))
  
    @php
    $cards = $rows; // Assuming you have a Card model
@endphp
<style>
  html{
    overflow-x: hidden !important;
  }
</style>

<div style="display: none;" id="carouselExampleControls23" class="carousel carousel-dark slide d-lg-block" data-ride="carousel">
    <div class="carousel-inner container">
        @foreach ($cards->chunk(4) as $index => $chunk)
    
            <div class="carousel-item{{ $index === 0 ? ' active' : '' }}">
                <div class="row">
                    @foreach ($chunk as $card)
                    @php
                    /**
                    * @var $row \Modules\Location\Models\Location
                    * @var $to_location_detail bool
                    * @var $service_type string
                    */
                    $translation = $card->translate();
                    $link_location = false;
                    if(is_string($service_type)){
                        $link_location = $card->getLinkForPageSearch($service_type);
                    }
                    if(is_array($service_type) and count($service_type) == 1){
                        $link_location = $card->getLinkForPageSearch($service_type[0] ?? "");
                    }
                    if($to_location_detail){
                        $link_location = $card->getDetailUrl();
                    }
                @endphp
                        <div class="col-3 ">
                            <div class="card   p-0 m-0" style="position: relative;background-image: url('{{$card->getImageUrl()}}');">
                                <div class="card-img-top"></div>
                                <div class="card-body w-100">
                                    <h3 class="card-title">{{$translation->name}}</h3>
                                    @foreach($service_type as $type)
                                    @php $count = $card->getDisplayNumberServiceInLocation($type) @endphp
                                    @if(!empty($count))
                                        @if(empty($link_location))
                                            <a style="text-decoration: none; color:white " href="{{ $card->getLinkForPageSearch( $type ) }}" target="_blank">
                                              <h6> {{$count}} </h6>
                                            
                                            </a>
                                        @else
                                            {{-- <span>{{$count}}</span> --}}
                                        @endif
                                    @endif
                                @endforeach
                                   
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
    <button  class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls23" data-bs-slide="prev" style="
  background-color: #1A2B50;
    border-radius: 80%;
    height: 50px;
    /* padding: 10px; */
    top: 90px;
    margin: 30px;
">
        {{-- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span> --}}
        <i class="fa-solid fa-chevron-left" style="color: white"></i>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls23" data-bs-slide="next" style="
   background-color: #1A2B50;
    border-radius: 80%;
    height: 50px;
    /* padding: 10px; */
    top: 90px;
    margin: 30px;
">
<i class="fa-solid fa-chevron-right " style="color: white" ></i>
        {{-- <span class="carousel-control-next-icon" aria-hidden="true"></span> --}}
        {{-- <span class="visually-hidden">Next</span> --}}
    </button>
</div>
    <!-- slider in small device -->
    <div id="carouselExampleControls3" class="carousel carousel-dark slide d-lg-none" data-ride="carousel">
      <div class="carousel-inner">
        @foreach ($cards as $index=>$card)
        <div class="carousel-item {{ $index === 0 ? ' active' : '' }} ">
          {{-- <div class=" col-12 card-wrapper container-sm d-flex justify-content-around"> --}}
            <div class="card" style="position: relative; background-image: url('{{$card->getImageUrl()}}');">
              <div class="card-img-top" ></div>
              <div class="card-body">
                <h3 class="card-title">{{$card->name}}</h3>
                @foreach($service_type as $type)
                @php $count = $card->getDisplayNumberServiceInLocation($type) @endphp
                @if(!empty($count))
                    @if(empty($link_location))
                        <a style="text-decoration: none; color:white " href="{{ $card->getLinkForPageSearch( $type ) }}" target="_blank">
                          <h6> {{$count}} </h6>
                        
                        </a>
                    @else
                        {{-- <span>{{$count}}</span> --}}
                    @endif
                @endif
            @endforeach
              </div>
            </div>
         
          {{-- </div> --}}
        </div>
        @endforeach
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls3" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls3 " data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>

    </div> 
    @endif

  </section>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

   <!-- end section travells -->