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

@section('content')

<div class="content">
    @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
</br>


    <div class="container-fluid">
    <div class="card">
            <div class=" card-header text-center">
            <!-- <div class="card-header d-flex align-items-center justify-content-between "> -->
                     <h2 class="card-title mb-0 text-success" style="font-weight: bold;">FAHRZEUG HINZUFÜGEN</h2>
                     <img src="{{ asset('paper') }}/img/underlineTitle.png" alt="Decorative underline" style="margin-top: 5px; width: 300px;">

            <!-- </div> -->
            </div>

            <div class="card-body">                
            <div class="col-md-12">
                <form method="post" action="{{ route('car.addNewCar') }}" autocomplete="off"  enctype="multipart/form-data">
                    @csrf
                    <div class="pl-lg-6">

<span style="color: red; font-size: 1.2em;">*</span> Pflichtfeld
<br>    
<br>   

 <!-- Hidden input that will actually be submitted -->
<input type="hidden" name="car_new" id="car_new" value="">

<!-- Car Type -->
         <label class="form-control-label text-dark">Das Fahrzeug ist</label><br>
    <div class="form-group radio-button-group">
        <label class="text-dark"><input type="radio" name="car_type" value="new" onclick="document.getElementById('car_new').value = '1';"> <span>Neu</span></label>
        <label class="text-dark"><input type="radio" name="car_type" value="used" onclick="document.getElementById('car_new').value = '0';"> <span>Gebraucht</span></label>
    </div>



     <div class="row">    
            
     <div class="col-md-6">

    <!-- Branch Dropdown -->
    <div class="form-group">
        <label class="form-control-label text-dark" for="branch">Filiale</label>
        <select class="form-control select2" style="width: 100%" id="filiale" name="filiale_id" > 
                                <option value="">auswählen</option>

                                @foreach ($listFiliale as $key=>$c)
                                <option  value="{{$c->filiale_id}}">{{$c->filiale_name}}</option>
                              @endforeach
                            </select>
    </div>

    </div>


     <div class="col-md-6">


      <!-- Date Inputs with Buttons -->
    <div class="form-group">
        <label for="date1" class="text-dark">Einkaufsdatum</label><span style="color: red;">*</span>
        <div class="input-group">
            <input type="date" id="date1id" name="car_einkaufsdatum" class="form-control" required>
            <button type="button" onclick="setToday('date1id')" class="btn btn-secondary">Heute</button>
        </div>
    </div>


    </div>

    </div>


   <div class="row">    
            
     <div class="col-md-6">

    <!-- Number Input -->
    <div class="form-group">
        <label for="car_fahrzeugnr" class="text-dark">FahrzeugNr.</label>
        <input type="number" id="car_fahrzeugnr" name="car_fahrzeugnr" class="form-control">
    </div>

       </div>

     <div class="col-md-6">

    <div class="form-group">
        <label for="date2" class="text-dark">Verkaufsdatum</label>
        <div class="input-group">
            <input type="date" id="date2id" name="car_verkaufsdatum" class="form-control">
            <button type="button" onclick="setToday('date2id')" class="btn btn-secondary">Heute</button>

        </div>
    </div>

    </div>    </div>





        <div class="row">    
     <div class="col-md-6">


    <!-- FIRST Section -->
    <h4>KFZ-Daten 1</h4>

    <div class="row">    
            
     <div class="col-md-6">

      <div class="form-group">
        <label class="text-dark">Hersteller</label><span style="color: red;">*</span>
        <input type="text" name="car_hersteller" id="car_hersteller" class="form-control" required>
    </div>
 </div>

   <div class="col-md-6">
    <div class="form-group">
        <label class="text-dark">Typ</label><span style="color: red;">*</span>
        <input type="text" name="car_type" id="car_type" class="form-control" required>
    </div>
 </div>

    </div> 



     <div class="row">    
            
     <div class="col-md-6">

    <div class="form-group">
        <label class="text-dark">HSN / TSN</label>
        <div class="d-flex">
            <input type="text" id="car_hsn" name="car_hsn" class="form-control" style="width: 40%;">
            <span style="font-size: 1.2rem; font-weight: bold; margin: 0 4px;position: relative; top: 8px;">/</span>
            <input type="text" id="car_tsn" name="car_tsn" class="form-control" style="width: 40%;">
        </div>
    </div>

    </div>


     <div class="col-md-6">
    
     <div class="form-group">
        <label class="text-dark">Art</label>
        <input type="text" name="car_art" class="form-control">
    </div>

    </div>

    </div>



         <div class="row">    

     <div class="col-md-6">

    <div class="form-group">
        <label class="text-dark">Erstzulassung</label>
        <input type="date" name="car_erstzulassung" class="form-control">
    </div>
    </div>


         <div class="col-md-6">

    <div class="form-group">
        <label class="text-dark">Garantiestart</label>
        <input type="date" name="car_garantiestart" class="form-control">
    </div>
    </div>
    </div>


    <div class="row">    

     <div class="col-md-6">

    <div class="form-group">
        <label class="text-dark">Farbe</label>
        <input type="text" name="car_farbe" class="form-control" >
    </div>
    </div>


         <div class="col-md-6">
<div class="form-group">
        <label class="text-dark">Getriebe</label>

         <select class="form-control select2"  id="car_getriebe" name="car_getriebe" > 
                                <option value="">auswählen</option>
                                <option value="Automatik">Automatik</option>
                                <option value="Manuell">Manuell</option>

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


 <div class="row">    
            
     <div class="col-md-6">

    <div class="form-group">
        <label class="text-dark">Hubraum </label>
        <div style="display: flex; align-items: center; gap: 8px;">
        <input type="text" name="car_hubraum" id="car_hubraum" class="form-control" style="max-width: 600px;"> <strong>cm²</strong>
    </div>
    </div>

    </div>

      <div class="col-md-6">

    

    <div class="form-group">
        <label class="text-dark">KFZ-BriefNr.</label>
        <input type="text" name="car_kfzbriefnr" class="form-control">
    </div>


    </div>


    </div> 
    

     <div class="row">    
            
     <div class="col-md-6">

    <div class="form-group">
        <label class="text-dark">Motorleistung </label>
          <div style="display: flex; align-items: center; gap: 8px; ">
        <input type="text" name="car_motorleistung" id="car_motorleistung" class="form-control" style="max-width: 600px;"> <strong>kW</strong>
    </div>
    </div>

    </div>

      <div class="col-md-6">

<div class="form-group">
        <label class="text-dark">Fahrgestellnr.</label><span style="color: red;">*</span>
        <input type="text" name="car_fahrgestellnr" class="form-control" required>
    </div>

    </div>

    
    </div> 

    
    </div> 


       <div class="col-md-6">
    <!-- 2 Section -->
    <h4>KFZ-Daten 2</h4>
    <div class="row">    
            
     <div class="col-md-6">
        <div class="form-group">
        <label class="text-dark">Ausstattung</label>
        <input type="text" name="car_ausstattung" class="form-control">
    </div>
 </div>

   <div class="col-md-6">
    <div class="form-group">
        <label class="text-dark">Laufleistung It. km-Zahler </label>
                  <div style="display: flex; align-items: center; gap: 8px;">
        <input type="text" name="car_laufleistung" class="form-control">   <strong>km</strong>
    </div></div>
 </div>
 
    </div> 


    
    <div class="row">    
            
     <div class="col-md-6">
         <div class="form-group">
        <label class="text-dark">Zahl d. Halter It. Vorbesitzer</label>
        <input type="number" name="car_zahlVorbesitzer" class="form-control">
    </div>
 </div>

   <div class="col-md-6">
    <div class="form-group">
        <label class="text-dark">Zahl d. Halter It. KFZ-Brief</label>
        <input type="number" name="car_zahlKfz" class="form-control">
    </div>
 </div>
 
    </div> 


    <div class="form-group">
        <label class="text-dark">Nächster HU/AU-Termin</label>
        <input type="date" name="car_nachstertermin" class="form-control">
    </div>

    <div class="form-group checkbox-group">
  <label class="text-dark">
    <input type="checkbox" name="car_fahrbereit" />
    <span>Fahrbereit</span>
  </label>
  
  <label class="text-dark">
    <input type="checkbox" name="car_wartaxi" />
    <span>War Taxi / Meit / Fahrschulwagen</span>
  </label>
  
  <label class="text-dark">
    <input type="checkbox" name="car_demverkauf" />
    <span>Dem Verkäufer sinf auf andere Weise Unfallschaden</span>
  </label>
</div>


    <div class="form-group">
        <textarea name="car_demverkaufnote" class="form-control"></textarea>
    </div>



      </div> 

    
    </div> 

    <!-- SECOND Section -->
    <h4>Sondervereinbarungen</h4>


    <div class="form-group">
        <textarea name="car_sonderver" class="form-control"></textarea>
    </div>

 



<div class="form-group checkbox-group">
  <label class="text-dark">
    <input type="checkbox" name="car_istUnternehmer" />
    <span>Käufer ist Unternehmer</span>
  </label>
  <label class="text-dark">
    <input type="checkbox" name="car_bastierfahrzeug" />
    <span>Bastlerfahrzeug</span>
  </label>
</div>



    <!-- NOTES Section -->
    <h4>Notizen (intern)</h4>
    <div class="form-group">
        <textarea name="car_notizen" class="form-control" rows="4" placeholder="Notizen..."></textarea>
    </div>





    

    <!-- FOURTH Section -->
    <h4>Preise / MwSt</h4>

    <div class="row">    
            
     <div class="col-md-4">
         <div class="form-group">
        <label class="text-dark">Mwst.</label>
        <input type="number" name="car_mwst" class="form-control">
    </div>
     </div>
     <div class="col-md-4">
        <div class="form-group">
        <label class="text-dark">Einkaufspreis</label>
        <div style="display: flex; align-items: center; gap: 8px;">
        <input type="number" name="car_einkaufpreis" class="form-control"> <strong>EUR</strong>
    </div></div>
     </div>
     <div class="col-md-4">
         <div class="form-group">
        <label class="text-dark">Verkaufspreis</label>
        <div style="display: flex; align-items: center; gap: 8px;">
        <input type="number" name="car_verkaufpreis" class="form-control"> <strong>EUR</strong>
    </div></div>
     </div>
</div>


     <!-- Hidden input that will actually be submitted -->
<input type="hidden" name="car_netprice" id="car_netprice" >

<!-- Car Type -->
         <label class="form-control-label text-dark">Preisangabe auswählen</label><br>
    <div class="form-group radio-button-group">
        <label class="text-dark"><input type="radio" name="car_price" value="brut" onclick="document.getElementById('car_netprice').value = '1';"> <span>Nettopreise angegeben</span></label>
        <label class="text-dark"><input type="radio" name="car_price" value="net" onclick="document.getElementById('car_netprice').value = '0';"> <span>Bruttopreise angegeben</span></label>
    </div>
   


 <!-- Image preview section -->
 <div id="preview"></div>

<input type="file" id="imageInput" name="car_images[]" multiple hidden accept="image/*">

<!-- Image upload button -->
<button type="button" class="btn btn-default" id="uploadTrigger">
        📷 Bilder hinzufügen
    </button>

                    
                              <div class="form-group">
<input id="routing" name="routing" value="0" hidden>
</div> 

                        <div class="text-center">
                            <a href="{{ route('car.listCar') }}"  class="btn btn-primary mt-4">{{ __('ZURÜCK') }}</a>


                            <button onmouseover="myFunction(0)" type="submit" id="myBtn" class="btn btn-success mt-4"  >{{ __('Speichern & Neu') }}</button>
                            <button onmouseover="myFunction(1)" type="submit" id="myBtn1" class="btn btn-success mt-4"  >{{ __('Speichern') }}</button>
                            </div>
                    </div>
                </form>
            </div>
            </div>
        </div>
    </div>
    </br>
</div>

@endsection


@stack('css')
<style>
  #preview {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 15px;
  }
  #preview 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;
}



</style>

@push('scripts')
<script>
      let filesArray = [];

 document.addEventListener("DOMContentLoaded", function () {
    const uploadTrigger = document.getElementById("uploadTrigger");
    const imageInput = document.getElementById("imageInput");
    const preview = document.getElementById("preview");

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

        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();
      imageInput.value = null; // reset input so same file can be selected again if needed
    });
  });




     function myFunction(route){
       

  // 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);

        console.log(route);
                $('#routing').val(route);

    }

   

 function setToday(inputId) {
        document.getElementById(inputId).valueAsDate = new Date();
}


$(document).ready(function () {
  $('#car_tsn').on('input', function () {
    const inputOneValue = $('#car_hsn').val();
    const inputTwoValue = $(this).val();

    // Optional: Skip if one of them is empty
    if (!inputOneValue || !inputTwoValue) {
$('#car_hersteller').val('');
$('#car_type').val('');
$('#car_hubraum').val('');
$('#car_motorleistung').val('');


return;
    }

    // Make AJAX request
    $.ajax({
      url: 'getTHSN', // Laravel route
      method: 'GET',
      data: {
        hsn: inputOneValue,
        tsn: inputTwoValue
      },
      success: function (response) {

  
   if (response) {
                  // Update your UI
          $('#car_hersteller').val(response.hersteller_name);
          $('#car_type').val(response.fahrzeug_typ);
          $('#car_hubraum').val(response.fahrzeug_hubraum);
          $('#car_motorleistung').val(response.fahrzeug_leistung_bei_umdrehungen); 
  }
else{

$('#car_hersteller').val('');
$('#car_type').val('');
$('#car_hubraum').val('');
$('#car_motorleistung').val('');
alert('Keine Daten');
}


},
      error: function () {
        alert('Fehler beim Laden der Daten');
      }
    });
  });
});


    </script>
@endpush