@extends('layout.admin')
@section('content')


<style>
  .allergy-select {
    width: 100%;
    padding: 8px;
    font-size: 16px;
  }

  .allergy-display {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* margin-top: 8px; */
  }

  .allergy-tag {
    background-color: #e9e9e900;
    color: #374151;
    padding: 6px 10px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    font-size: 17px;
    border: solid 2.5px #e9e9e9;
  }

  .delete-btn {
    margin-left: 6px;
    cursor: pointer;
    color: #000000;
  }

  .delete-btn:hover {
    color: #e11d48;
  }

  .hidden {
    display: none !important;
  }
</style>

<div class="dashboard-main-body">
  <div class="row gy-2">
    <div class="col-xxl-12">
      <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
        <a href="javascript:void(0)">
          <h6 class="fw-semibold mb-0"><img src="{{ asset('public/admin_assets/images/keyboard_arrow_right.svg') }}"> Add Items</h6>
        </a>
      </div>
    </div>
  </div>
  <form id="AddItemForm" action="{{ route('admin.additems.submit') }}" method="POST" enctype="multipart/form-data" data-parsley-validate>
    @csrf
    <div class="row gy-4 mt-1">
      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Category</label>
          @if($category_list->code == 1 && !empty($category_list->data))
          <select id="categorySelect" class="form-select" name="category_id" required data-parsley-required="true" data-parsley-error-message="Please select a category">
            <option value="" disabled selected>Select Category</option>
            @foreach($category_list->data as $category)
            <option value="{{ $category->category_id }}">{{ $category->name }}</option>
            @endforeach
          </select>
          @else
          <select class="form-select">
            <option>No Categories Available</option>
          </select>
          @endif
        </div>
      </div>

      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Sub Category</label>
          <select id="subcategorySelect" class="form-select" name="sub_category_id" required data-parsley-required="true" data-parsley-error-message="Please select a subcategory">
            <option value="">Select Sub Category</option>
          </select>
        </div>
      </div>
      <div class="col-12">
        <hr>
      </div>
      <div class="col-lg-4">
        <div class="form-group mb-2">
          <div class="form-switch switch-primary d-flex align-items-center gap-3">
            <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1">Do you want to create combo?</label>
            <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked onchange="updateHiddenInput(this, 'combo')">
            <input type="hidden" name="is_create_combo" id="combo" value="1">
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="form-group mb-2">
          <div class="form-switch switch-primary d-flex align-items-center gap-3">
            <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch2">View purpose Only</label>
            <input class="form-check-input" type="checkbox" role="switch" id="switch2" checked onchange="updateHiddenInput(this, 'view_purpose')">
            <input type="hidden" name="is_view_purpose_only" id="view_purpose" value="1">
          </div>
        </div>
      </div>
      <div class="col-lg-4">
        <div class="form-group mb-2">
          <div class="form-switch switch-primary d-flex align-items-center gap-3">
            <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch3">Mark as new items</label>
            <input class="form-check-input" type="checkbox" role="switch" id="switch3" checked onchange="updateHiddenInput(this, 'new_items')">
            <input type="hidden" name="is_mark_as_new" id="new_items" value="1">
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <p class="mb-0 font-weight-bold">New Item Tag Range from </p>
      </div>
      <div class="col-md-6">
        <p class="mb-0 font-weight-bold">upto </p>
      </div>
      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Start Date</label>
          <input type="date" name="start_date" id="start_date" class="form-control" required data-parsley-required="true" data-parsley-error-message="Please select a start date">
        </div>
      </div>
      
      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>End Date</label>
          <input type="date" name="end_date" id="end_date" class="form-control" required data-parsley-required="true" data-parsley-error-message="Please select an end date">
        </div>
      </div>

      <div class="col-xxl-12">
        <div class="form-group mb-2">
          <label>Item Name</label>
          <input type="text" name="item_name" class="form-control" required data-parsley-required-message="Item name is required">
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Preparation Time (In Minutes)</label>
          <input type="text" name="preparation_time" class="form-control" required data-parsley-required-message="Preparation Time is required">
        </div>
      </div>
      <div class="col-md-6 align-self-center">
        <div class="form-group mb-2">
          <div class="form-switch switch-primary d-flex align-items-center gap-3">
            <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch2">Mark as “You May Like This”</label>
            <input class="form-check-input" type="checkbox" role="switch" id="switch2" checked onchange="updateHiddenInput(this, 'you_may_like')">
            <input type="hidden" name="is_mark_you_may_like" id="you_may_like" value="1">
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Thumbnail Image</label>
          <div class="doc-upload">
            <label class="document-label">
              <input type="file" name="thumbnail_image" id="thumbnail_image" required data-parsley-required-message="Please upload a Thumbnail Image." onchange="previewImages('thumbnail_image')">
              <img src="{{ asset('public/admin_assets/images/upload.svg') }}">
              <div id="thumbnail_image-preview"></div>
            </label>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Cover Image</label>
          <div class="doc-upload">
            <label class="document-label">
              <input type="file" name="cover_image" id="cover_image" required data-parsley-required-message="Please upload a Cover Image." onchange="previewImages('cover_image')">
              <img src="{{ asset('public/admin_assets/images/upload.svg') }}">
              <div id="cover_image-preview"></div>
            </label>
          </div>
        </div>
      </div>
      <div id="imageContainer">
        <div class="col-md-6">
          <div class="form-group mb-2">
            <label>Product Image 1</label>
            <div class="doc-upload">
              <label class="document-label">
                <input type="file" name="product_image_1" id="product_image_1" required data-parsley-required-message="Please upload Product Image" onchange="previewImages('product_image_1')">
                <img src="{{ asset('public/admin_assets/images/upload.svg') }}">
                <div id="product_image_1-preview"></div>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group text-center">
          <a href="javascript:void(0)" id="addImage"><img src="{{ asset('public/admin_assets/images/plus.svg') }}"> Add Product image</a>
        </div>
      </div>
      <div class="col-md-12">
        <div class="form-group mb-2">
          <label for="itemDescription">Item Description</label>
          <textarea class="form-control" id="itemDescription" name="description" rows="3" required
            data-parsley-required-message="Please enter a description."
            data-parsley-minlength="10"
            data-parsley-minlength-message="Description must be at least 10 characters long."></textarea>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Choose Allergens</label>
          @if($allergies_list->code == 1 && !empty($allergies_list->data))
          <select id="AllergySelect" class="form-select" onchange="updateSelection()">
            <option value="">Select an allergen</option>
            @foreach($allergies_list->data as $allergy)
            <option value="{{ $allergy->allergy_id }}">{{ $allergy->name }}</option>
            @endforeach
          </select>
          @else
          <select class="form-select">
            <option>No Allergens Available</option>
          </select>
          @endif
        </div>
      </div>

      <div class="col-md-6">
        <div class="form-group mb-2">
          <label></label>
          <div id="allergyDisplay" class="allergy-display"></div>
        </div>
      </div>
      <input type="hidden" name="allergy_ids" id="allergyList">


      <div class="col-md-12">
        <hr>
      </div>
      <div class="col-md-12 align-self-center">
        <div class="form-group mb-2">
          <div class="form-switch switch-primary d-flex gap-3">
            <label class="form-check-label line-height-1 fw-semibold text-black" for="switch1">Add size options</label>
            <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked onchange="updateHiddenInput(this, 'size_options')">
            <input type="hidden" name="is_selected_size_options" id="size_options" value="1">
          </div>
        </div>
      </div>
      <div id="dynamic-container">
        <div class="row mb-3 dynamic-row">
          <div class="col-11">
            <div class="row">
              <div class="col-md-6">
                <div class="form-group mb-2">
                  <label>Size</label>
                  <select class="form-select" name="sizes[]" required data-parsley-required="true" data-parsley-error-message="Please select a size">
                    <option value="" disabled selected>Select Size</option>
                    <option>Small</option>
                    <option>Medium</option>
                    <option>Large</option>
                  </select>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group mb-2">
                  <label>Price</label>
                  <input type="text" class="form-control" name="prices[]" placeholder="" required
                    data-parsley-required="true"
                    data-parsley-type="number"
                    data-parsley-error-message="Please enter a valid price in numeric format">
                </div>
              </div>

            </div>
          </div>
          <div class="col-1 align-self-center">
            <div class="form-group mb-2">
              <a href="javascript:void(0);" class="add-more">
                <img src="{{ asset('public/admin_assets/images/plus.svg') }}" alt="Add More">
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <hr>
      </div>
      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Serve Start Time</label>
          <input type="text" name="serve_start_time" id="time_from" class="form-control timepicker" placeholder="HH:MM" required data-parsley-required="true">
          <span class="form-icon-right-label">
            <img src="{{ asset('public/admin_assets/images/calendar.svg') }}">
          </span>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Serve End Time</label>
          <input type="text" name="serve_end_time" id="time_upto" class="form-control" placeholder="HH:MM" required data-parsley-required="true">
          <span class="form-icon-right-label">
            <img src="{{ asset('public/admin_assets/images/calendar.svg') }}">
          </span>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Country</label>
          <select class="form-select" name="country" required data-parsley-required="true" data-parsley-error-message="Please select a country">
            <option value="" disabled selected>Select Country</option>
            <option value="Uganda">Uganda</option>
            <option value="Kenya">Kenya</option>
          </select>
        </div>
      </div>
      <div class="col-md-6">
        <div class="form-group mb-2">
          <label>Currency</label>
          <select class="form-select" name="currency" required data-parsley-required="true" data-parsley-error-message="Please select a currency">
            <option value="" disabled selected>Select Currency</option>
            <option value="UGX">UGX</option>
            <option value="KES">KES</option>
          </select>
        </div>
      </div>

      <div class="col-md-12">
        <hr>
      </div>
      <div class="col-md-12 align-self-center">
        <div class="form-group mb-2">
          <div class="form-switch switch-primary d-flex gap-3">
            <label class="form-check-label line-height-1 fw-semibold text-black" for="switch1">Choices
              <span class="d-flex fw-medium choice-span">Select the choices</span>
            </label>
            <input class="form-check-input" type="checkbox" role="switch" id="switch1" checked onchange="updateHiddenInput(this, 'choices')">
            <input type="hidden" name="is_selected_choices" id="choices" value="1">
          </div>
        </div>
      </div>

      @foreach($choice_catagories->data as $choice_category)
      <div class="col-md-4">
        <div class="choice-box">
          <h5> {{$choice_category->name}} </h5>
          <div class="choice-list">
            @foreach($choice_items->data as $choice_item)
            <div class="c-box" data-item-id="{{ $choice_item->choice_item_id }}" data-category-id="{{ $choice_category->choice_category_id }}" data-index="{{ $loop->index }}">
              <div class="ch-img">
                <img src="{{ $choice_item->image }}">
              </div>
              <div class="ch-details">
                <h6> {{ $choice_item->name }}</h6>
                <p>
                  <a href="javascript:void(0)" class="delete-item-{{ $loop->index }}"><img src="{{ asset('public/admin_assets/images/ch-delete.png') }}"></a>
                  <a href="javascript:void(0)"><img src="{{ asset('public/admin_assets/images/tab-icon.svg') }}"></a>
                </p>
              </div>
              <input type="hidden" name="choices[{{ $choice_category->choice_category_id }}][choice_items][{{ $loop->index }}][choice_item_id]" value="{{ $choice_item->choice_item_id }}" class="choice-item-id">
              <input type="hidden" name="choices[{{ $choice_category->choice_category_id }}][choice_items][{{ $loop->index }}][sequence]" value="{{ $loop->index + 1 }}" class="sequence">
            </div>
            @endforeach
            <div class="c-box justify-content-center pt-0">
              <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#add_Modal_choice_item"><img src="{{ asset('public/admin_assets/images/plus.svg') }}"></a>
            </div>
          </div>
        </div>
      </div>
      @endforeach



      <div class="col-md-4">
        <div class="h-100 d-flex align-items-center justify-content-center">
          <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#add_Modal_choice_category"><img src="{{ asset('public/admin_assets/images/plus.svg') }}"> Create new choice</a>
        </div>
      </div>
      <div class="col-md-12">
        <hr>
      </div>
      <div class="col-md-12">
        <div class="form-check acco-check">
          <input class="form-check-input" type="checkbox" value="" id="checkbox_accompaniment" onchange="updateHiddenInput(this, 'accompaniment')">
          <input type="hidden" name="is_check_accompaniment" id="accompaniment" value="1">
          <label class="form-check-label" for="checkbox_accompaniment">
            <h6>Accompaniment</h6>
            <span>Select the mandatory accompaniment option</span>
          </label>
        </div>
      </div>

      <input type="hidden" name="accompaniments" id="accompanimentsInput">
      <div class="col-md-6">
        <div class="choice-box">
          <div class="choice-list">
            @foreach($accompaniment->data as $acc)
            <div class="c-box c-box-accompaniment" data-accompaniment-id="{{ $acc->accompaniment_id }}">
              <div class="ch-img">
                <img src="{{ $acc->image }}">
              </div>
              <div class="ch-details">
                <h6>{{ $acc->name }}</h6>
                <p>
                  <span>{{ $acc->price }} {{ $acc->currency }}</span>
                  <a href="javascript:void(0)" class="delete-accompaniment"><img src="{{ asset('public/admin_assets/images/ch-delete.png') }}"></a>
                  <a href="javascript:void(0)"><img src="{{ asset('public/admin_assets/images/tab-icon.svg') }}"></a>
                </p>
              </div>
            </div>
            @endforeach

            <div class="c-box justify-content-center">
              <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#add_Modal_accompaniment">
                <img src="{{ asset('public/admin_assets/images/plus.svg') }}"> Add an Accompaniment
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12">
        <hr>
      </div>
      <div class="col-md-12">
        <div class="form-check acco-check">
          <input class="form-check-input" type="checkbox" value="" id="checkbox_add_ons" onchange="updateHiddenInput(this, 'add_ons')">
          <input type="hidden" name="is_check_add_ons" id="add_ons" value="1">
          <label class="form-check-label" for="checkbox_add_ons">
            <h6>Add ons</h6>
            <span>Select the add ons option</span>
          </label>
        </div>
      </div>

      <input type="hidden" name="add_ons" id="addOnsInput">
      <div class="col-md-6">
        <div class="choice-box">
          <div class="choice-list">
            @foreach($add_ons->data as $once)
            <div class="c-box c-box-add_ons" data-addon-id="{{ $once->add_ons_id }}">
              <div class="ch-img">
                <img src="{{ $once->image }}">
              </div>
              <div class="ch-details">
                <h6>{{ $once->name }}</h6>
                <p>
                  <span>{{ $once->price }} {{ $acc->currency }}</span>
                  <a href="javascript:void(0)" class="delete-addon"><img src="{{ asset('public/admin_assets/images/ch-delete.png') }}"></a>
                  <a href="javascript:void(0)"><img src="{{ asset('public/admin_assets/images/tab-icon.svg') }}"></a>
                </p>
              </div>
            </div>
            @endforeach
            <div class="c-box justify-content-center">
              <a href="javascript:void(0)" data-bs-toggle="modal" data-bs-target="#add_Modal_addons">
                <img src="{{ asset('public/admin_assets/images/plus.svg') }}"> Add ons
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-12">
        <div class="text-center">
          <button type="submit" class="btn btn-primary text-dark px-5 hover-text-white"> Create New </button>
        </div>
      </div>
    </div>
  </form>
</div>

<footer class="d-footer">
  <div class="row align-items-center">
    <div class="col-12">
      <p class="mb-0 text-center">© 2024 CJ's. All Rights Reserved.</p>
    </div>
  </div>
</footer>

@endsection
@section('script')
<!-- get subcategory -->
<script>
  $(document).ready(function() {
    $('#categorySelect').on('change', function() {
      let categoryId = $(this).val();
      let subcategorySelect = $('#subcategorySelect');

      subcategorySelect.html('<option value="">Select Sub Category</option>');

      if (categoryId) {
        $.ajax({
          url: "{{ route('admin.get-subcategories', '') }}/" + categoryId,
          type: 'GET',
          dataType: 'json',
          success: function(response) {
            if (response.code === 1 && response.data.length > 0) {
              $.each(response.data, function(index, subcategory) {
                subcategorySelect.append(
                  $('<option>', {
                    value: subcategory.sub_category_id,
                    text: subcategory.sub_category_name
                  })
                );
              });
            } else {
              subcategorySelect.html('<option value="">No Sub Categories Available</option>');
            }
          },
          error: function(xhr, status, error) {
            subcategorySelect.html('<option value="">Error Loading Sub Categories</option>');
          }
        });
      }
    });
  });
</script>

<!-- manage switches -->
<script>
  function updateHiddenInput(checkbox, hiddenInputId) {
    document.getElementById(hiddenInputId).value = checkbox.checked ? '1' : '0';
  }
</script>

<!-- Script for preview image on add time -->
<script>
  function previewImages(type) {
    let previewContainer;
    let files;

    if (type === 'thumbnail_image') {
      previewContainer = document.getElementById('thumbnail_image-preview');
      files = document.getElementById('thumbnail_image').files;
    } else if (type === 'cover_image') {
      previewContainer = document.getElementById('cover_image-preview');
      files = document.getElementById('cover_image').files;
    } else if (type === 'product_image_1') {
      previewContainer = document.getElementById('product_image_1-preview');
      files = document.getElementById('product_image_1').files;
    } else {
      previewContainer = document.getElementById(`${type}-preview`);
      files = document.getElementById(type).files;
    }

    previewContainer.innerHTML = '';

    if (files) {
      Array.from(files).forEach(file => {
        const reader = new FileReader();
        reader.onload = function(e) {
          const img = document.createElement('img');
          img.src = e.target.result;
          img.style.width = '150px';
          img.style.height = '100px';
          img.style.marginRight = '10px';
          img.style.marginBottom = '10px';
          previewContainer.appendChild(img);
        };
        reader.readAsDataURL(file);
      });
    }
  }
</script>

<!-- image container -->
<script>
  $(document).ready(function() {
    var imageCount = 2; // Starting from the second image as first is already present

    $('#addImage').click(function(e) {
      e.preventDefault();
      var newImageField = `
        <div class="col-md-6 product-image">
          <div class="form-group mb-2">
            <label>Product Image ${imageCount}</label>
            <div class="doc-upload">
              <label class="document-label">
                <input type="file" name="product_image[]" id="product_image_${imageCount}" required data-parsley-required-message="Please upload Product Image." onchange="previewImages('product_image_${imageCount}')">
                <img src="{{ asset('public/admin_assets/images/upload.svg') }}">
                <div id="product_image_${imageCount}-preview"></div>
              </label>
            </div>
          </div>
        </div>`;

      $('#imageContainer').append(newImageField);
      imageCount++;
    });
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    function addRow() {
      let container = document.getElementById("dynamic-container");
      let newRow = document.querySelector(".dynamic-row").cloneNode(true);

      let icon = newRow.querySelector(".add-more img");
      icon.src = "{{ asset('public/admin_assets/images/ch-delete.png') }}";
      icon.alt = "Remove";
      newRow.querySelector(".add-more").classList.add("remove");
      newRow.querySelector(".add-more").classList.remove("add-more");
      container.appendChild(newRow);
    }

    document.getElementById("dynamic-container").addEventListener("click", function(event) {
      if (event.target.closest(".add-more")) {
        addRow();
      } else if (event.target.closest(".remove")) {
        event.target.closest(".dynamic-row").remove();
      }
    });
  });
</script>

<!-- allergy -->
<script>
  const allergies = [];

  function updateSelection() {
    const select = document.getElementById('AllergySelect');
    const allergyName = select.options[select.selectedIndex].text;
    const allergyId = select.value;

    if (allergyId && !allergies.includes(allergyId)) {
      allergies.push(allergyId);

      // Create display element
      const allergyTag = document.createElement('div');
      allergyTag.classList.add('allergy-tag');
      allergyTag.innerText = allergyName;

      // Create delete button
      const deleteButton = document.createElement('span');
      deleteButton.innerText = '✖';
      deleteButton.classList.add('delete-btn');
      deleteButton.onclick = function() {
        const index = allergies.indexOf(allergyId);
        if (index > -1) allergies.splice(index, 1);
        document.getElementById('allergyList').value = allergies.join(',');
        allergyTag.remove();
      };

      allergyTag.appendChild(deleteButton);
      document.getElementById('allergyDisplay').appendChild(allergyTag);

      // Update hidden input
      document.getElementById('allergyList').value = allergies.join(',');
    }

    select.value = '';
  }
</script>

<!-- timepicker -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    flatpickr("#time_from", {
      enableTime: true,
      noCalendar: true,
      dateFormat: "h:i K",
      onChange: function(selectedDates, dateStr) {
        document.querySelector("#time_upto")._flatpickr.set("minTime", dateStr); // Set minTime 
      }
    });

    flatpickr("#time_upto", {
      enableTime: true,
      noCalendar: true,
      dateFormat: "h:i K"
    });
  });
</script>

<!-- datepicker -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    const startDateInput = document.getElementById("start_date");
    const endDateInput = document.getElementById("end_date");

    const today = new Date().toISOString().split("T")[0];
    startDateInput.min = today;
    endDateInput.min = today;

    startDateInput.addEventListener("change", function() {
      const startDate = startDateInput.value;
      endDateInput.min = startDate;

      if (endDateInput.value < startDate) {
        endDateInput.value = "";
      }
    });
  });
</script>

<!-- manage accompaniment and add ons -->
<script>
  function getAccompanimentsArray() {
    const accompaniments = [];
    document.querySelectorAll('.c-box-accompaniment:not(.hidden)').forEach((box, index) => {
      const accompanimentId = box.getAttribute('data-accompaniment-id');
      if (accompanimentId) {
        accompaniments.push({
          accompaniment_id: parseInt(accompanimentId),
          sequence: index + 1
        });
      }
    });
    return accompaniments;
  }

  function updateAccompanimentsInput() {
    const accompaniments = getAccompanimentsArray();
    document.getElementById('accompanimentsInput').value = JSON.stringify(accompaniments);
  }


  document.querySelectorAll('.delete-accompaniment').forEach(deleteBtn => {
    deleteBtn.addEventListener('click', function() {
      const accompanimentBox = this.closest('.c-box-accompaniment');
      accompanimentBox.classList.add('hidden');
      updateAccompanimentsInput();
    });
  });

  function getAddOnsArray() {
    const addOns = [];
    document.querySelectorAll('.c-box-add_ons:not(.hidden)').forEach((box, index) => {
      const addOnId = box.getAttribute('data-addon-id');
      if (addOnId) {
        addOns.push({
          add_on_id: parseInt(addOnId),
          sequence: index + 1
        });
      }
    });
    return addOns;
  }

  function updateAddOnsInput() {
    const addOns = getAddOnsArray();
    document.getElementById('addOnsInput').value = JSON.stringify(addOns);
  }

  document.querySelectorAll('.delete-addon').forEach(deleteBtn => {
    deleteBtn.addEventListener('click', function() {
      const addonBox = this.closest('.c-box-add_ons');
      addonBox.classList.add('hidden');
      updateAddOnsInput();
    });
  });

  document.getElementById('AddItemForm').addEventListener('submit', function(event) {
    event.preventDefault();
    if ($(this).parsley().isValid()) {
      const accompaniments = getAccompanimentsArray();
      const addOns = getAddOnsArray();

      document.getElementById('accompanimentsInput').value = JSON.stringify(accompaniments);
      document.getElementById('addOnsInput').value = JSON.stringify(addOns);

      this.submit();
    } else {
      $(this).parsley().validate();
    }
  });

  $(document).ready(function() {
    @foreach($choice_items -> data as $choice_item)
    $('.delete-item-{{ $loop->index }}').on('click', function() {
      var parentBox = $(this).closest('.c-box'); 
      var categoryId = parentBox.data('category-id');
      var itemId = parentBox.data('item-id');
      var index = parentBox.data('index');

      parentBox.remove();

      $("input[name='choices[" + categoryId + "][choice_items][" + index + "][choice_item_id]']").val('');
      $("input[name='choices[" + categoryId + "][choice_items][" + index + "][sequence]']").val('');
    });
    @endforeach
  });
</script>

@endsection