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



@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="toggle-card">
  <div class="card-title">
    <h4 class="card-title mb-0 text-success" style="font-weight: bold;"> Settings</h4>
  </div>
  <div class="card-body">
    
  </div>
</div> -->

 <form class="col-md-12" method="post" action="{{  route('community.addNewNameOnline')  }}"  enctype="multipart/form-data">
                    @csrf
                    <div class="card" >
                      <!-- style="width: 490px; height: 400px;" -->
                        <div class="card-header">
                            <h5 class="title">{{ __('Benutzerinformationen online') }}</h5>
                            
                            <label class="switch-enable">
                              <input type="checkbox" id="editToggle" />
                              <span class="slider"></span>
                              </label>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <label class="col-md-3 col-form-label">{{ __('Name') }}</label>
                                <div class="col-md-9">
                                    <div class="form-group">
                                        <input type="text" id="nameAppear" name="authenticate_nameAppear" class="form-control" placeholder="Name, der online angezeigt wird" value="{{ $onlineInfo->authenticate_nameAppear ?? ''}}" disabled required>
                                    </div>
                                    @if ($errors->has('$onlineInfo->authenticate_nameAppear'))
                                        <span class="invalid-feedback" style="display: block;" role="alert">
                                            <strong>{{ $errors->first('$onlineInfo->authenticate_nameAppear') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-md-3 col-form-label">{{ __('Email') }}</label>
                                <div class="col-md-9">
                                    <div class="form-group">
                                        <input type="email" id="emailAppear" name="authenticate_emailAppear" class="form-control" placeholder="E-Mail, die online angezeigt wird" value="{{  $onlineInfo->authenticate_emailAppear ?? ''  }}" disabled required>
                                    </div>
                                    @if ($errors->has('$onlineInfo->authenticate_emailAppear'))
                                        <span class="invalid-feedback" style="display: block;" role="alert">
                                            <strong>{{ $errors->first('$onlineInfo->authenticate_emailAppear') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div class="row">
                                <label class="col-md-3 col-form-label">{{ __('Telefonnummer') }}</label>
                                <div class="col-md-9">
                                    <div class="form-group">
                                        <input type="text" id="teleAppear" name="authenticate_teleAppear" class="form-control" placeholder="Telefonnummer, die online angezeigt wird" value="{{ $onlineInfo->authenticate_teleAppear ?? ''}}" disabled required>
                                    </div>
                                    @if ($errors->has('$onlineInfo->authenticate_teleAppear'))
                                        <span class="invalid-feedback" style="display: block;" role="alert">
                                            <strong>{{ $errors->first('$onlineInfo->authenticate_teleAppear') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>
                        </div>
                        <div class="card-footer ">
                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <button type="submit" class="btn btn-success btn-round">{{ __('Änderungen speichern') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

        <div class="row">

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

            <div id="carousel-{{ $car->car_id }}" 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' : '' }}">
                                <img src="{{ asset($image->car_image_path) }}" style="width: 100%; height: 250px; object-fit: contain; border-radius: 10px;"
                                 class="d-block w-100" alt="Image of {{ $car->car_type }}">
                            </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;">

            <div class="toggles-row" >
    <div class="toggle-container" style="display:flex; align-items:center; gap:0.2rem;flex-direction: column; ">
    <label for="toggle1" style="font-weight: 600;">Lokal</label>
      <label class="switch">
        <input type="checkbox" id="toggle1" @if($car->car_isLocal == 1) checked @endif data-car-id="{{$car->car_id}}" >
        <span class="slider"></span>
      </label>
      <!-- <label for="toggle1">t1</label> -->
    </div>

    <div class="toggle-container" style="display:flex; align-items:center; gap:0.2rem;flex-direction: column; ">
    <label for="toggle2" style="font-weight: 600;">Online</label>
      <label class="switch">
        <input type="checkbox" id="toggle2" @if($car->car_isGlobal == 1) checked @endif data-car-id="{{$car->car_id}}" >
        <span class="slider"></span>
      </label>
      <!-- <label for="toggle2">t2</label> -->
    </div>


  </div>
 



                <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_hsn }} - {{ $car->car_tsn }}</p> -->

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

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

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



@stack('css')
<style>

  .switch-enable {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

.switch-enable input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-enable .slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 28px;
}

.switch-enable .slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

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

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


.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);
}

</style>
<!-- @endstack -->


@push('scripts')
<!-- or stack  -->
    <script> //for jquerys use push scripts

document.addEventListener('DOMContentLoaded', function () {
    document.querySelectorAll('.switch input[type="checkbox"]').forEach(toggle => {
      toggle.addEventListener('change', function (e) {

        const checkbox = this;
        const isChecked = checkbox.checked;
        const toggleType = checkbox.id; 

const nameonline = document.getElementById('nameAppear').value.trim();
const emailonline = document.getElementById('emailAppear').value.trim();
const telenameonline = document.getElementById('teleAppear').value.trim();

if (nameonline !== '' && emailonline !== '' && telenameonline !== '') {

  
        const intendedState = isChecked ? 'on' : 'off';
        const intendedStateSend = isChecked ? '1' : '0';

        // Revert temporarily
        checkbox.checked = !isChecked;

        Swal.fire({
          title: `Are you sure you want to turn ${intendedState}?`,
          icon: 'question',
          showCancelButton: true,
          confirmButtonText: 'Yes',
          cancelButtonText: 'No',
        }).then((result) => {
          if (result.isConfirmed) {
            checkbox.checked = isChecked; // Apply the intended state

            const caridVal = checkbox.getAttribute('data-car-id');

if(toggleType == "toggle1"){

             $.ajax({
                url: 'publishLocal', // Laravel route
                method: 'POST',
                headers: {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                data: {
                  status: intendedStateSend,
                  car_id: caridVal
                },
      success: function (response) {

  
                  if (response.status === "success") {
                    
                    Swal.fire({
                              title: 'Erfolg!',
                              text: 'Lokal veröffentlicht',
                              icon: 'success'
                            });

                  }
                  else{

                    checkbox.checked = !isChecked;
                     Swal.fire({
                              title: 'Error!',
                              text: 'Da ist etwas schiefgelaufen',
                              icon: 'error'
                            });
                  }
              


                },
                       error: function(xhr, status, error) {
    // Parse JSON response from Laravel
    if (xhr.responseJSON && xhr.responseJSON.error) {
      console.error('Error message from server:', xhr.responseJSON.error);
    } else {
      console.error('Unknown error occurred');
    }
  }
                    }
                  
                  );  

}

else
{


// console.log(intendedState);   // Logs "on" or "off"
             $.ajax({
                url: 'publishGlobal', // Laravel route
                method: 'POST',
                headers: {
                          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                data: {
                  status: intendedStateSend,
                  car_id: caridVal
                },
      success: function (response) {

  
                  if (response) {
                    
                    Swal.fire({
                              title: 'Erfolg!',
                              text: 'Lokal veröffentlicht',
                              icon: 'success'
                            });

                  }
              


                },
                      error: function(xhr, status, error) {
                         checkbox.checked = !isChecked;
        //                  console.log('AJAX error:', error);
        // console.log('Status:', status);
        // console.log('Response:', xhr.responseText);
        //                  alert('Error: ' + xhr.responseText);
                        alert('Fehler beim Laden der Daten');
                      }
                    });  

}
            

          }
        });
      
}
else{
  alert("Bitte füllen Sie alle erforderlichen Felder aus, um Ihre Anzeigen online zu veröffentlichen");
    checkbox.checked = !isChecked;

}
      });
    });
  });


const toggle = document.getElementById('editToggle');
  const inputs = [document.getElementById('nameAppear'), document.getElementById('emailAppear'), document.getElementById('teleAppear')];

  toggle.addEventListener('change', () => {
    const enabled = toggle.checked;
    inputs.forEach(input => input.disabled = !enabled);
  });

</script>
@endpush



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