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



@section('content')

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

                <div class="col-12">
                    <div class="shadow p-3 mb-5 bg-white rounded">
                        <div class="card-header">
                            <div class="row align-items-center">
                                <div class="col-12 col-md-8">
                                    <h3 class="mb-0">{{ __('Fahrzeugliste') }}</h3>
                                </div>
                                <div class="col-12 col-md-4 text-md-end text-right mt-2 mt-md-0">
                                    <a href="{{ route('car.addCar') }}" class="btn btn-primary px-3 py-2 px-lg-4 py-lg-3 btn-lg" role="button">{{ __('FAHRZEUG Hinzufügen') }}</a>
                                </div>
                            </div>
                        </div>
                       
                <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="table-responsive"> -->
                   
                           <table class="table  datatable1"> <!--align-items-center table-flush-->
                                <thead class="text-primary">
                                      <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Bilder</th>
                                        <th scope="col">Status</th>
                                        <th scope="col">Standzeit</th>
                                        <th scope="col">Filiale</th>
                                        <th scope="col">Hersteller</th>
                                        <th scope="col">Typ</th>
                                        <th scope="col">HSN</th>
                                        <th scope="col">TSN</th>
                                        <th scope="col">Art</th>
                                        <th scope="col">Erstzulassung</th>
                                        <th scope="col">Garantiestart</th>
                                        <th scope="col">Farbe</th>
                                        <th scope="col">Hubraum</th>
                                        <th scope="col">Motorleistung</th>
                                        <th scope="col">FahrgestellNr.</th>
                                        <th scope="col">KFZ-BriefNr.</th>
                                        <th scope="col">Sondervereinbarungen</th>
                                        <th scope="col">Käufer ist Unternehmer</th>
                                        <th scope="col">Bastlerfahrzeug</th>
                                        <th scope="col">Notizen</th>
                                        <th scope="col">FahrzeugNr.</th>
                                        <th scope="col">Einkaufsdatum</th>
                                        <th scope="col">Verkaufsdatum</th>
                                        <th scope="col">Ausstattung</th>
                                        <th scope="col">Laufleistung</th>
                                        <th scope="col">Zahl d. Halter It. Vorbesitzer</th>
                                        <th scope="col">Zahl d. Halter It. KFZ-Brief</th>
                                        <th scope="col">Nächster HU/AU-Termin</th>
                                        <th scope="col">Fahrbereit</th>
                                        <th scope="col">War Taxi / Meit / Fahrschulwagen</th>
                                        <th scope="col">Dem Verkäufer sinf auf andere Weise Unfallschaden</th>
                                        <th scope="col">Dem Verkäufer.. Notizen</th>
                                        <th scope="col">MwSt</th>
                                        <th scope="col">Einkaufspreis</th>
                                        <th scope="col">Verkaufspreis</th>
                                        <th scope="col">Preistyp</th>
                                        <th scope="col">Erstellungs datum</th>
                                        <th scope="col">Änderungs datum</th>
                                        <!-- <th scope="col">Documents</th> -->
                                        <th scope="col" class="text-center">Aktionen</th>

                                    </tr>
                                </thead>

                                <tbody>
                                    @foreach ($listCar as $key=>$user)
          <tr>
                <td>{{ $key + 1 }} </td>

                <td>

                <button data-toggle="modal" class="btn btn-success btn-round " id="openModalButton{{ $user->car_id }}"
                 data-target="#carModal{{ $user->car_id }}">
                 <i class="nc-icon nc-album-2"></i>
            </button>

             <!-- Modal with carousel -->
    <div class="modal fade modalHideShow" id="carModal{{ $user->car_id }}" tabindex="-1" role="dialog" aria-hidden="true" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                <div id="preview{{ $user->car_id }}"></div>
                <form id="uploadForm{{ $user->car_id }}" car-selected-id="{{ $user->car_id }}" class="uploadFormClass" method="POST" action="{{ route('image.addCarImage') }}" 
                enctype="multipart/form-data" autocomplete="off"  style="display: flex; justify-content: center; margin-top: 8px;">
                @csrf
                  <!-- Image preview section -->

                  <input type="text" value="{{ $user->car_id }}" name="car_id" hidden>

                      <input type="file" class="imageInputClass" id="imageInput{{ $user->car_id }}" name="car_images[]" multiple hidden accept="image/*">

                      <!-- Image upload button -->
                      <button type="button" class="btn btn-default uploadTriggerClass" id="uploadTrigger{{ $user->car_id }}" >
                              📷 Bilder hinzufügen
                          </button>
                          <button id="submitBtnFORM{{ $user->car_id }}" class="btn btn-success btn-round submitBtnFORMClass" type="submit" disabled>HOCHLADEN</button>
                </form>

                    @if(count($user->images))
                        <div id="carousel{{ $user->car_id }}" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner">
                                @foreach($user->images as $index => $img)
                                    <div id="image-{{ $img->car_image_id }}" class="carousel-item {{ $index == 0 ? 'active' : '' }}" style="">
                                        <img src="{{ asset($img->car_image_path) }}" style="width: 100%; height: 500px; object-fit: contain; border-radius: 10px;" class="d-block w-100">
                                        <div style="display: flex; justify-content: center; margin-top: 8px;">
                                          <button class="btn btn-danger btn-round" onclick="deleteImageNow({{ $img->car_image_id }},{{ $img->car_id }})">Delete</button>
                                        </div>
                                      </div>
                                @endforeach
                            </div>
                            <a class="carousel-control-prev" href="#carousel{{ $user->car_id }}" data-slide="prev">
                                <span class="carousel-control-prev-icon"></span>
                            </a>
                            <a class="carousel-control-next" href="#carousel{{ $user->car_id }}" data-slide="next">
                                <span class="carousel-control-next-icon"></span>
                            </a>
                        </div>
                    @else
                    <div id="no-images-message-{{ $user->car_id }}">
                        <p>Keine Bilder verfügbar.</p>
                        </div>

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

                </td>

                <td>
                @if($user->car_new == 1)
                    Neu
                @elseif($user->car_new == 0)
                Gebraucht
                @else
                -
                @endif
                </td>

                @php
        $addedDate = \Carbon\Carbon::parse($user->car_added_date); 
        $daysOld = $addedDate->diffInDays(\Carbon\Carbon::now());

        if ($daysOld < 90) {
            $class = 'tablesuccess';
        } elseif ($daysOld <= 180) {
            $class = 'tablewarning';
        } else {
            $class = 'tabledanger';
        }
    @endphp

    

        <td class="days-cell {{ $class }}">{{ $daysOld }} days</td>
   

                <td>{{ $user->filiale_name }}</td>
                <td>{{ $user->car_hersteller }}</td>
                <td>{{ $user->car_type }}</td>
                <td>{{ $user->car_hsn }}</td>
                <td>{{ $user->car_tsn }}</td>
                <td>{{ $user->car_art }}</td>
                <td>{{ $user->car_erstzulassung ? date('d-m-Y', strtotime($user->car_erstzulassung)) : '' }}</td>
                <td>{{ $user->car_garantiestart ? date('d-m-Y', strtotime($user->car_garantiestart)) : '' }}</td>
                <td>{{ $user->car_farbe }}</td>
                <td>{{ $user->car_hubraum }}</td>
                <td>{{ $user->car_motorleistung }}</td>
                <td>{{ $user->car_fahrgestellnr }}</td>
                <td>{{ $user->car_kfzbriefnr }}</td>
                <td>{{ $user->car_sonderver }}</td>

                <td>
                @if($user->car_istUnternehmer == 1)
                    Ja
                @elseif($user->car_istUnternehmer == 0)
                    Nein
                @else
                -
                @endif                  
                </td>

                <td>
                @if($user->car_bastierfahrzeug == 1)
                    Ja
                @elseif($user->car_bastierfahrzeug == 0)
                    Nein
                @else
                -
                @endif 

                </td>
                
                <td>{{ $user->car_notizen }}</td>
                <td>{{ $user->car_fahrzeugnr }}</td>
                <td>{{ $user->car_einkaufsdatum ? date('d-m-Y', strtotime($user->car_einkaufsdatum)) : '' }}</td>
                <td>{{ $user->car_verkaufsdatum ? date('d-m-Y', strtotime($user->car_verkaufsdatum)) : '' }}</td>
                <td>{{ $user->car_ausstattung }}</td>
                <td>{{ $user->car_laufleistung }}</td>
                <td>{{ $user->car_zahlVorbesitzer }}</td>
                <td>{{ $user->car_zahlKfz }}</td>
                <td>{{ $user->car_nachstertermin ? date('d-m-Y', strtotime($user->car_nachstertermin)) : '' }}</td>
                
                
                <td>
                @if($user->car_fahrbereit == 1)
                    Ja
                @elseif($user->car_fahrbereit == 0)
                    Nein
                @else
                -
                @endif 
                </td>
                

                <td>
                 @if($user->car_wartaxi == 1)
                    Ja
                @elseif($user->car_wartaxi == 0)
                    Nein
                @else
                -
                @endif   
                
                </td>
                

                <td>
                  @if($user->car_demverkauf == 1)
                    Ja
                @elseif($user->car_demverkauf == 0)
                    Nein
                @else
                -
                @endif  
                
                
                </td>
                
                
                <td>{{ $user->car_demverkaufnote }}</td>
                <td>{{ $user->car_mwst }}</td>
                <td>{{ $user->car_einkaufpreis }}</td>
                <td>{{ $user->car_verkaufpreis }}</td>

                <td>
                @if($user->car_netprice == 1)
                    Nettopreis
                @elseif($user->car_netprice == 0)
                Bruttopreise
                @else
                -
                @endif     
                </td>


                <!-- <td>{{ $user->car_added_date ? date('d-m-Y', strtotime($user->car_added_date)) : '' }}</td>
                <td>{{ $user->car_modified_date ? date('d-m-Y', strtotime($user->car_modified_date)) : '' }}</td> -->
                <td>{{ $user->car_added_date ? $user->car_added_date : '' }}</td>
                <td>{{ $user->car_modified_date ? $user->car_modified_date : '' }}</td>

                
                <td>



  <div class="d-flex gap-2">
  <!-- {{$user->car_id}} -->

                    <div class="d-flex flex-column align-items-center">

                    <small class="text-muted d-block mb-1">Bearbeiten</small>

                                         <a href="editCar/{{$user->car_id}}" class="btn btn-success btn-round" role="button" aria-disabled="true">
                                             <i class="nc-icon nc-refresh-69"></i></a>

                                             <!-- &nbsp;           btn-sm                                  -->
                     </div>                 
                     
                     &nbsp;

                    <div class="d-flex flex-column align-items-center">

                    <small class="text-muted d-block mb-1">Löschen</small>

                                             <a href="deleteCar/{{$user->car_id}}" 
                                            onclick="return confirm('Möchten Sie dieses Fahrzeug wirklich löschen?')"
                                            class="btn btn-danger btn-round" role="button" aria-disabled="true">
                                             <i class="nc-icon nc-button-power"> </i></a>
                    </div>  

                    &nbsp;
                                             <!-- <br>       -->
                            <!-- IF EMPTY user->car_pdf_relative_path -->

                    <div class="d-flex flex-column align-items-center">
                          
                    <small class="text-muted d-block mb-1">Expose</small>

                             <button data-toggle="modal" data-target="#exposeModal" data-car-id="{{$user->car_id}}" 
                                            class="btn btn-warning btn-round openExposeModal" role="button" aria-disabled="true">
                                             <i class="nc-icon nc-basket"></i></button>
                    </div>

                    &nbsp;

                    <div class="d-flex flex-column align-items-center">
                    
                    <small class="text-muted d-block mb-1">Kaufvertrag</small>

                              <a href="addAgreement2/{{$user->car_id}}" class="btn btn-info btn-round" role="button" aria-disabled="true">
                                             <i class="nc-icon nc-paper"></i></a>

                    </div>

                    &nbsp;

                    <div class="d-flex flex-column align-items-center">                         
                    <small class="text-muted d-block mb-1">Rechnung</small>

                              <a href="addRechnung2/{{$user->car_id}}/car" class="btn btn-default btn-round" role="button" aria-disabled="true">
                              <i class="nc-icon nc-paper"></i></a>
                    </div>

   </div>




                                      

                </td>
         </tr>

                                    @endforeach
                                </tbody>
                            </table>
                        <!-- </div> -->




<!-- Modal -->
<div class="modal fade" id="exposeModal" tabindex="-1" aria-modal="true" aria-labelledby="exposeModalLabel" role="dialog">
  <div class="modal-dialog">
    <form id="exposeForm">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exposeModalLabel">Add Description</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <textarea class="form-control" id="description" name="description" rows="4" placeholder="Enter description..."></textarea>
          <input type="hidden" name="car_id" id="modalCarId" value="">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Schließen</button>
          <button type="submit" class="btn btn-warning">Expose</button>
        </div>
      </div>
    </form>
  </div>
</div>          



                 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    

@endsection



@stack('css')
<style>


  .previewClass {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
  }
  .previewClass img {
    border-radius: 8px;
    border: 1px solid #ddd;
    width: 100px;
    height: 100px;
    object-fit: cover;
  }

  .preview-image-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 8px;
  border: 1px solid #ddd;
  overflow: hidden;
  display: inline-block;
}

.preview-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.remove-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-weight: bold;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  padding: 0;
  user-select: none;
}


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

    .dataTables_scrollBody {
    width: fit-content !important;
    max-width: 100%;  /* prevent overflow outside parent */
    overflow-x: auto !important;
    }


    /* Target the dropdown for colvis button */
    div.dt-button-collection {
        column-count: 3;
        column-gap: 10px;
        max-height: none;
        overflow-y: auto;
        width: 800px !important;
        padding: 10px;
        white-space: normal;
    }

    
/* All buttons: show empty checkbox by default */
div.dt-button-collection .dt-button::after {
    content: "\2610";  /* empty checkbox ☐ */
    color: #777;
    font-weight: bold;
    font-size: 14px;
    float: right; /* default tick alignment */
}

/* Active buttons (visible columns): show green checkmark */
div.dt-button-collection .dt-button.dt-button-active::after {
    content: "\2713";  /* checkmark ✓ */
    color: green;
}


.dt-button {
  background: linear-gradient(135deg, #4a90e2, #357ABD);
  border: none;
  border-radius: 6px;
  color: white;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 6px rgba(53, 122, 189, 0.4);
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dt-button:hover, 
.dt-button:focus {
  background: linear-gradient(135deg, #357ABD, #2a5f9e);
  box-shadow: 0 4px 12px rgba(53, 122, 189, 0.7);
  outline: none;
}

.dt-button:active {
  background: linear-gradient(135deg, #2a5f9e, #1f4e7a);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}

.dt-button:disabled {
  background: #ccc;
  color: #666;
  cursor: default;
  box-shadow: none;
}

.buttons-colvis {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-weight: 700;
}




.days-cell {
  position: relative;
  padding: 10px 16px;
  font-weight: 700;
  font-size: 1.1rem;
  color: #212529;
  background-color: transparent;
  overflow: visible;
  z-index: 1;
  text-align: center;
}

.days-cell::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 10%;
  width: 80%;
  height: 3px; /* thin scratch height */
  background: currentColor;
  border-radius: 50% / 100%;
  opacity: 0.4;
  transform: translateY(-50%) rotate(-10deg);
  box-shadow:
    0 5px 0 0 currentColor,
    0 10px 0 0 currentColor,
    0 15px 0 0 currentColor,
    0 20px 0 0 currentColor,
    0 25px 0 0 currentColor,
    0 30px 0 0 currentColor,
    0 35px 0 0 currentColor,
    0 40px 0 0 currentColor;
  z-index: -1;
}

/* Colors for each state */
.tablesuccess {
  color: #28a745; /* green */
}

.tablewarning {
  color: #ffc107; /* orange/yellow */
}

.tabledanger {
  color: #dc3545; /* red */
}


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


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

$('.modalHideShow').on('hide.bs.modal', function () {
    if (this.contains(document.activeElement)) {
      document.activeElement.blur(); // removes focus from inside modal
    }
  });


function openModal(carId) {
  // Hide all modals first
  $('.modal').each(function() {
    $(this).hide().attr('aria-hidden', 'true').attr('inert', '');
  });

  // Show target modal
  const modal = $('#carModal' + carId);
  modal.show().removeAttr('aria-hidden').removeAttr('inert');

  // Focus inside modal
  modal.find('#uploadTrigger').focus();
}

function closeModal(carId) {
  const modal = $('#carModal' + carId);
  modal.hide().attr('aria-hidden', 'true').attr('inert', '');

  // Return focus to open button
  $('#openModalButton' + carId).focus();
}

     $(document).ready(function () {
$('#exposeForm').on('submit', function (e) {
  e.preventDefault();

  const description = $('#description').val();
  const carId = $('#modalCarId').val();

  $.ajax({
    url: 'exposePDF',
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    type: 'POST',
    // data: '&description='+description+'&car_id='+carId,
    data: {
      description: description,
      car_id: carId
    },
    xhrFields: {
      responseType: 'blob' // expect binary PDF
    },
    success: function (data) {
      const blob = new Blob([data], { type: 'application/pdf' });
      const blobUrl = URL.createObjectURL(blob);
      window.open(blobUrl, '_blank');

      $('#exposeModal').modal('hide');
      //IF BOOTSTRAP5 setTimeout(function () {
      //   $('.modal-backdrop').remove(); // Remove stuck dark overlay
      //   $('body').removeClass('modal-open'); // Re-enable scrolling
      // }, 500); // Matches Bootstrap fade duration

    },
    error: function () {
      alert('Failed to generate PDF');
    }
  });
});
});


//-------------------------------------------------------------------------------------------
let filesArray = [];
document.querySelectorAll('.uploadFormClass').forEach(form => {

  const imageInputcls = form.querySelector('.imageInputClass');
  const uploadTriggercls = form.querySelector('.uploadTriggerClass');
  const submitBtnFORMcls = form.querySelector('.submitBtnFORMClass');

  // Get their IDs (if they have one):
  const imageInputId = imageInputcls?.id;
  const uploadTriggerId = uploadTriggercls?.id;
  const submitBtnFORMId = submitBtnFORMcls?.id;


  const carSelectedId = form.getAttribute('car-selected-id');
  const previewId = "preview"+carSelectedId;

  console.log(uploadTriggerId,imageInputId,previewId,submitBtnFORMId);

  const uploadTrigger = document.getElementById(uploadTriggerId);
  const imageInput = document.getElementById(imageInputId);
  const preview = document.getElementById(previewId);


  document.addEventListener("DOMContentLoaded", function () {


// let filesArray = []; // to keep track of selected files

uploadTrigger.addEventListener("click", () => {
  imageInput.click();
});

// Helper to update preview area
function updatePreview() {
  preview.innerHTML = "";

  filesArray.forEach((file, index) => {
    const wrapper = document.createElement("div");
    wrapper.classList.add("preview-image-wrapper");

    const img = document.createElement("img");
    img.src = URL.createObjectURL(file);
    img.onload = () => URL.revokeObjectURL(img.src);

    const removeBtn = document.createElement("button");
    removeBtn.classList.add("remove-btn");
    removeBtn.innerHTML = "&times;";
    removeBtn.title = "Remove this image";

    removeBtn.addEventListener("click", () => {
      filesArray.splice(index, 1); // remove file from array
      updatePreview(); // refresh previews
      updateInputFiles(); // sync input files

      if (filesArray.length > 0) {
         $('#' +submitBtnFORMId).prop('disabled', false);
       } else {
         $('#' +submitBtnFORMId).prop('disabled', true);
       }
    
     });

    wrapper.appendChild(img);
    wrapper.appendChild(removeBtn);
    preview.appendChild(wrapper);
  });
}

// Sync the input.files property with filesArray
// input.files is read-only, so we create a new DataTransfer
function updateInputFiles() {
  const dataTransfer = new DataTransfer();
  filesArray.forEach((file) => {
    dataTransfer.items.add(file);
  });

  imageInput.files = dataTransfer.files;
  
}

imageInput.addEventListener("change", (e) => {
  // Append new files to filesArray

  for (const newFile of e.target.files) {
const duplicate = filesArray.some(file =>
  file.name === newFile.name &&
  file.size === newFile.size &&
  file.lastModified === newFile.lastModified
);

if (!duplicate) {
  filesArray.push(newFile);
} else {
  alert(`Datei "${newFile.name}" wurde bereits hinzugefügt, Duplikate werden übersprungen.`);
}
}
  updatePreview();
  updateInputFiles();


  if (filesArray.length > 0) {
   $('#' +submitBtnFORMId).prop('disabled', false);
} else {
 $('#' +submitBtnFORMId).prop('disabled', true);
}
 

  imageInput.value = null; // reset input so same file can be selected again if needed
});
});


document.getElementById(submitBtnFORMId).addEventListener('mouseenter', function () {
    // Function runs when the button is hovered
    console.log("Hovered on Submit button");
// Sync filesArray to input.files before submit
const dataTransfer = new DataTransfer();
  filesArray.forEach(file => dataTransfer.items.add(file));
  imageInput.files = dataTransfer.files;
  });

});





/////////////////////////////////////////////////////////...............................................

// Delete image function
function deleteImageNow(imageId,car_id_in_image) {

  Swal.fire({
    title: 'Bist du sicher?',
    text: 'Dieses Bild wird dauerhaft gelöscht!',
    icon: 'question',
    showCancelButton: true,
    confirmButtonColor: '#d33',
    // cancelButtonColor: '#3085d6',
    confirmButtonText: 'Ja, löschen!',
    cancelButtonText: 'Abbrechen'
  }).then((result) => {
    if (result.isConfirmed) {
  
      
      $.ajax({
    url: `deleteImage`,
    type: 'GET',
    headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },
    data: {
      car_image_id: imageId
    },
    success: function (response) {
      if (response.success) {
        
        
// Remove current carousel item and its wrapper div
const $currentItem = $(`#image-${imageId}`);
  
  // Find the carousel this image belongs to (adjust selector if needed)
  const $carousel = $currentItem.closest('.carousel');

  // Find the carousel item div inside the carousel (usually with class 'carousel-item')
  const $carouselItem = $currentItem.closest('.carousel-item');

  // Check if this item is active
  const isActive = $carouselItem.hasClass('active');

  // Remove the image container & carousel item
  $carouselItem.remove();
  const $modalBody = $carousel.closest('.modal-body');

  

  // If the removed item was active, activate the next item or previous if no next
  if (isActive) {
    let $next = $carousel.find('.carousel-item').first();

    if ($next.length) {
      $next.addClass('active');
    } 
    
    else {

    $carousel.hide();
   // Append your message
   $modalBody.append(`
      <p class="no-images-message-${car_id_in_image}" style="text-align:center; padding: 20px; font-weight: bold;">
        Keine Bilder verfügbar.
      </p>
    `);

  }
  Swal.fire({
            title: 'Gelöscht!',
            text: 'Bild erfolgreich gelöscht.',
            icon: 'success'
          });
      
      } 

      } else {
        Swal.fire({
            title: 'Fehlgeschlagen',
            text: 'Bild konnte nicht gelöscht werden.',
            icon: 'error'
          });
      }
    },
    error: function () {
      Swal.fire({
          title: 'Fehler',
          text: 'Da ist etwas schiefgelaufen.',
          icon: 'error'
        });
    }
  });



    }
  });

  // if (!confirm('Bist du sicher?')) return;


 
}



// Upload new photo--------------------------------------
// $('#uploadForm').on('submit', function(e) {
//   e.preventDefault();

//   // Sync filesArray to input.files before submit
//   const dataTransfer = new DataTransfer();
//   filesArray.forEach(file => dataTransfer.items.add(file));
//   imageInput.files = dataTransfer.files;

//    // Now form submit will contain the updated files
// console.log("Files on submit:");
//   // (Optional) For debugging:
//   console.log("Files on submit:", imageInput.files);


//   let formData = new FormData(this);

//   formData.forEach((value, key) => {
//   console.log(key, value);
// });

//   $.ajax({
//     url: 'addCarImage',
//     method: 'POST',
//     data: formData,

//     contentType: false,
//     processData: false,
//     headers: {
//       'X-CSRF-TOKEN': '{{ csrf_token() }}'
//     },
//     success: function(data) {
//       if (data.success) {
//         alert(data.message);
 

// } else {
//         alert(data.message);
//       }
//     },
//     error: function() {
//       alert('An error occurred during upload.');
//     }
//   });
// });



  $('.imageInputClass').on('change', function () {

    const $input = $(this);
  const $form = $input.closest('form');          // or another container
  const $submitBtn = $form.find('.submitBtnFORM'); // use class here, not id

    // Check if any files are selected
      if (this.files.length > 0) {
    $submitBtn.prop('disabled', false);
  } else {
    $submitBtn.prop('disabled', true);
  }
  });
  
 
  

  document.addEventListener('DOMContentLoaded', function () {
  const buttons = document.querySelectorAll('.openExposeModal');

  buttons.forEach(function (button) {
    button.addEventListener('click', function (e) {
      e.preventDefault();
      const carID = this.getAttribute('data-car-id');
      document.getElementById('modalCarId').value = carID;
      document.getElementById('description').value = '';
      // IF BOOTSTRAP5 const myModal = new bootstrap.Modal(document.getElementById('exposeModal'));
      // myModal.show();

       $('#exposeModal').modal('show');

    });
  });
});




</script>
@endpush



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