@extends('layouts.app', ['class' => '', 'elementActive' => 'communityLocal'])



@section('content')

<div class="content">
        <div class="container-fluid">

        <div class="col-12">
                            
        @if (count($errors) > 0)
        @if($errors->any())
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{$errors->first()}}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
          </div>
        @endif
    @endif
                            @if (session('status'))
                                <div class="alert alert-success alert-dismissible fade show" role="alert">
                                    {{ session('status') }}
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>
                            @endif
                        </div>

    
        <div class="row">

@foreach ($globalSharedCars as $car)
@if (isset($groupedImages[$car->car_id]))
    <div class="col-md-4 mb-4">
        <div class="card ">

            <div id="carousel-{{ $car->car_id }}" style="{{ $car->user_code == $code ? 'background-color:rgb(171, 210, 184);' : '' }}" class="carousel slide" data-ride="carousel">
                <div class="carousel-inner" >
                    <!-- @if(isset($groupedImages[$car->car_id])) -->
                        @foreach ($groupedImages[$car->car_id] as $index => $image)
                        <!-- INPUT CAR ID INPUT CODE HIDDEN(BALKE BEL CONTROLLER AUTH USER) + MNS7ABON BEL TOGGLE LAL AJAX -->
                            <div class=" carousel-item {{ $index == 0 ? 'active' : '' }}">
                              <a href="https://packtechsystems.com/packcars/public/{{$image->car_image_path}}" data-lightbox="product-gallery">
                                <img src="https://packtechsystems.com/packcars/public/{{$image->car_image_path}}" style="width: 100%; height: 300px; object-fit: contain; border-radius: 10px;"
                                 class="d-block w-100 carousel-image" alt="Image of {{ $car->car_type }}">
                            </a>
                                </div>
                        @endforeach
                    <!-- @else
                        <div class="carousel-item active">
                            <img src="" class="d-block w-100" alt="No Image Available">
                        </div>
                    @endif -->
                </div>

                @if(isset($groupedImages[$car->car_id]) && count($groupedImages[$car->car_id]) > 1)
                    <button class="carousel-control-prev" type="button" data-target="#carousel-{{ $car->car_id }}" data-slide="prev">
                        <span class="carousel-control-prev-icon" ></span>
                        <span class=""></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-target="#carousel-{{ $car->car_id }}" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                        <span class=""></span>
                    </button>
                @endif
            </div>

            <div class="card-body item-center" style="text-align:center; {{ $car->user_code == $code ? 'background-color:rgb(171, 210, 184);' : '' }}">

            @if($car->user_code != $code)
                <a href="{{ route('chat.startChat', ['car_id' => $car->car_id, 'user_business' => $car->user_business, 'user_code' => $car->user_code, 'car_user' => $car->car_user]) }}" 
                class="btn btn-sm btn-primary">
                  💬 Chat starten
              </a>
              @endif

                <h5 class="card-title">{{ $car->car_hersteller }} - {{ $car->car_type }}</h5>

              <div class="icon-row" style="display: flex; justify-content: space-between; text-align: center;">
    <div class="icon-col">
<span style="display:inline-block; width:30px; height:30px;">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="30"
             height="30"
             viewBox="0 0 24 24"
             fill="none"
             stroke="#8bc34a"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round">
          <path d="M5.636 19.364a9 9 0 1 1 12.728 0" />
          <path d="M16 9l-4 4" />
        </svg>
      </span>
    <div>{{ $car->car_laufleistung ? $car->car_laufleistung : '' }}</div>
    </div>
    <div class="icon-col">
      <span style="display:inline-block; width:30px; height:30px;">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="30"
             height="30"
             viewBox="0 0 24 24"
             fill="none"
             stroke="#8bc34a"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round">
          <path d="M7.038 4.5a9 9 0 0 0 -2.495 2.47" />
          <path d="M3.186 10.209a9 9 0 0 0 0 3.508" />
          <path d="M4.5 16.962a9 9 0 0 0 2.47 2.495" />
          <path d="M10.209 20.814a9 9 0 0 0 3.5 0" />
          <path d="M16.962 19.5a9 9 0 0 0 2.495 -2.47" />
          <path d="M20.814 13.791a9 9 0 0 0 0 -3.508" />
          <path d="M19.5 7.038a9 9 0 0 0 -2.47 -2.495" />
          <path d="M13.791 3.186a9 9 0 0 0 -3.508 -.02" />
          <path d="M12 8l-2 4h4l-2 4" />
          <path d="M12 21a9 9 0 0 0 0 -18" />
        </svg>
      </span>
      <div>{{ $car->car_motorleistung ? $car->car_motorleistung : '' }}</div>
    </div>
    <div class="icon-col">
      <span style="display:inline-block; width:30px; height:30px;">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="30"
             height="30"
             viewBox="0 0 24 24"
             fill="none"
             stroke="#8bc34a"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round">
          <path d="M5 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
          <path d="M12 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
          <path d="M19 6m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
          <path d="M5 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
          <path d="M12 18m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0" />
          <path d="M5 8l0 8" />
          <path d="M12 8l0 8" />
          <path d="M19 8v2a2 2 0 0 1 -2 2h-12" />
        </svg>
      </span>
      <div>{{ $car->car_getriebe	 ? $car->car_getriebe : '' }}</div>
    </div>
    <div class="icon-col">
      <span style="display:inline-block; width:30px; height:30px;">
        <svg xmlns="http://www.w3.org/2000/svg"
             width="30"
             height="30"
             viewBox="0 0 24 24"
             fill="none"
             stroke="#8bc34a"
             stroke-width="2"
             stroke-linecap="round"
             stroke-linejoin="round">
          <path d="M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
          <path d="M16 3l0 4" />
          <path d="M8 3l0 4" />
          <path d="M4 11l16 0" />
          <path d="M8 15h2v2h-2z" />
        </svg>
      </span>
      <div>{{ $car->car_erstzulassung ? date('Y', strtotime($car->car_erstzulassung)) : '' }}</div>
    </div>
  </div>


                <!-- <p class="text-muted" style="margin-top: -5px;">{{ $car->car_hersteller }} - {{ $car->car_hersteller }}</p> -->

                <!-- Other product info -->
            </div>

        </div>
    </div>
    @endif
@endforeach

</div>
    </div>
</div>
@endsection



@stack('css')
<style>
.toggle-card {
  width: 350px;
  padding: 1rem 2rem;
  margin: 1rem 0 2rem 1rem;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.card-title {
  font-weight: 700;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid #ddd;
  padding-bottom: 0.5rem;
  color: #333;
  
}

/* .card-body {
  display: flex;
  justify-content: flex-start;
} */




/* Container to hold both toggles side by side */
.toggles-row {
  display: flex;
  /* gap: 2rem; */
  /* align-items: center; */
  justify-content:center; 
  gap:1.5rem; 
  margin-bottom:1rem;
}



/* Toggle wrapper */
/* .toggle-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
} */

/* Toggle switch styling */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 32px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}



.slider {
  position: absolute;
  cursor: pointer;
  background-color: #ccc;
  border-radius: 34px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.4s;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.slider::before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.switch input:checked + .slider {
  background-color: #4caf50;
}

.switch input:checked + .slider::before {
  transform: translateX(28px);
}


.carousel-control-prev,
.carousel-control-next {
  background: none !important;   /*  Removes default background */
  border: none;                  /*  Ensures no border */
  padding: 0;                    /*  Avoids extra spacing */
}

.carousel-control-prev {
  left: 11px !important;
}



.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-image: none !important;  /* Remove default SVG background */
  width: 30px;
  height: 30px;
  opacity: 0.8;

  position: relative;

  /* Remove the filter so border color shows correctly */
  filter: none !important;
}

/* Left arrow */
.carousel-control-prev-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border: solid black;        /* Arrow color */
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 6px;
  transform: translate(-50%, -50%) rotate(135deg);
}

/* Right arrow */
.carousel-control-next-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  border: solid black;        /* Arrow color */
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 6px;
  transform: translate(-50%, -50%) rotate(-45deg);
}

  .carousel-image {
    transition: transform 0.3s ease;
    cursor: zoom-in;
  }

  .carousel-image:hover {
    transform: scale(1.2);
    z-index: 10;
    position: relative;
  }
</style>
<!-- @endstack -->


@push('scripts')
<!-- or stack  -->
    <script> //for jquerys use push scripts
    window.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
      showNotification();
    }, 200); // 500 milliseconds
  });

 function  showNotification (){
    color = 'primary';

    $.notify({
      icon: "nc-icon nc-bell-55",
      message: "Klicken Sie auf das Bild, um es zu vergrößern"

    }, {
      type: color,
      timer: 8000,
      placement: {
        from: "top",
        align: "right"
      }
    });
  }

</script>
@endpush



<!-- @stack('js')
    <script> -->