@extends('layout.admin')
@section('content')
<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">
        <h6 class="fw-semibold mb-0">Choice Category</h6>
        <div class="menu-grp-btn">

          <a href="#" class="btn btn-primary"><img src="{{ asset('public/admin_assets/images/export.svg') }}"> Upload Bulk</a>
          <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_Modal_choice_category"><img src="{{ asset('public/admin_assets/images/add-square.svg') }}">Add Items</a>
        </div>

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

  <div class="row gy-4 mt-1">
    <div class="col-md-12">
      <div class="card h-100 overflow-hidden">
        <div class="card-body p-0">
          <div class="table-responsive">
            <table class="filter-table table bordered-table mb-0">
              <thead>
                <tr>
                  <th scope="col">
                    <div class="form-check style-check d-flex align-items-center">
                      <input class="form-check-input" type="checkbox">
                      <label class="form-check-label">
                      Choice Category
                      </label>
                    </div>
                  </th>
                  <th scope="col">Price</th>
                  <th scope="col">Action</th>
                </tr>
              </thead>
              <tbody>
                @if($code == 1)
                @foreach($data as $item)
                <tr>
                  <td>
                    <div class="form-check style-check d-flex align-items-center">
                      <input class="form-check-input" type="checkbox">
                      <label class="form-check-label">
                        <div class="d-flex align-items-center gap-2">
                          <span class="w-auto">{{$item->name}}</span>
                        </div>
                      </label>
                    </div>
                  </td>
                  <td>---------</td>
                  <td>
                    <div class="action-btn-grp">
                      <div class="form-switch switch-primary d-flex align-items-center">
                        <input class="form-check-input" type="checkbox" role="switch" id="activeToggle{{$item->choice_category_id}}"
                          @if($item->is_active == 1) checked @endif
                        onchange="ActiveInactive('{{$item->choice_category_id}}', this.checked ? 1 : 0)">
                        <label class="form-check-label line-height-1 fw-medium text-secondary-light" for="switch1"></label>
                      </div>
                      <a href="#edit_Modal" data-bs-toggle="modal" data-id="{{ $item->choice_category_id }}" class="editBtn">
                        <img src="{{ asset('public/admin_assets/images/edit.svg') }}"></a>
                      <a href="javascript:void(0)" onclick="Delete('{{$item->choice_category_id}}')"><img src="{{ asset('public/admin_assets/images/trash.svg') }}"></a>
                    </div>
                  </td>
                </tr>
                @endforeach
                @else
                <p>NO DATA</p>
                @endif
              </tbody>
            </table>
            <div class="mt-40">
              <ul class="pagination d-flex flex-wrap align-items-center gap-2 justify-content-center">
                <li class="page-item">
                  <a class="page-link text-secondary-light fw-medium radius-8 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)"><iconify-icon icon="ep:d-arrow-left" class="text-xl"></iconify-icon></a>
                </li>
                <li class="page-item">
                  <a class="page-link text-secondary-light fw-medium radius-8 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)"><iconify-icon icon="iconamoon:arrow-left-2-light" class="text-xxl"></iconify-icon></a>
                </li>
                <li class="page-item">
                  <a class="page-link text-secondary-light fw-medium radius-8 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link text-secondary-light fw-medium radius-8 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">2</a>
                </li>
                <li class="page-item">
                  <a class="page-link text-secondary-light fw-medium radius-8 border-0 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px active text-white" href="javascript:void(0)">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link text-secondary-light fw-medium radius-8 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link text-secondary-light fw-medium radius-8 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)">5</a>
                </li>
                <li class="page-item">
                  <a class="page-link text-secondary-light fw-medium radius-8 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)"> <iconify-icon icon="iconamoon:arrow-right-2-light" class="text-xxl"></iconify-icon> </a>
                </li>
                <li class="page-item">
                  <a class="page-link text-secondary-light fw-medium radius-8 px-10 py-10 d-flex align-items-center justify-content-center h-32-px w-32-px" href="javascript:void(0)"> <iconify-icon icon="ep:d-arrow-right" class="text-xl"></iconify-icon> </a>
                </li>
              </ul>
            </div>
          </div>


        </div>
      </div>
    </div>
  </div>
</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>

<!-- Modal -->
<div class="modal fade" id="add_Modal_choice_category" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-custom">
    <div class="modal-content p-10 radius-15">
      <div class="modal-header border-0">
        <h5 class="modal-title text-xxl" id="exampleModalLabel">Add choice category</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="complimentaryItemForm" action="{{ route('admin.choicecategory.add') }}" method="POST" enctype="multipart/form-data" data-parsley-validate>
          @csrf
          <div class="add-form-box">
            <div class="form-group mb-3">
              <label>Category Name</label>
              <input type="text" name="name" class="form-control" required data-parsley-required-message="Please enter category name.">
            </div>
           
            <div class="form-group text-center">
              <button type="submit" class="btn btn-primary text-dark hover-text-white btn-width">Add</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="edit_Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-custom">
    <div class="modal-content p-10 radius-15">
      <div class="modal-header border-0">
        <h5 class="modal-title text-xxl" id="exampleModalLabel">Update choice category</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="add-form-box">
          <input type="hidden" name="id" value="">
          <div class="form-group mb-3">
            <label>Item Name</label>
            <input type="text" name="item_name" class="form-control" required data-parsley-required-message="Please enter the item name.">
          </div>
          <div class="form-group mb-3">
            <label>Item Price</label>
            <input type="text" name="price" class="form-control" required data-parsley-required-message="Please enter the item price." id="itemPrice" oninput="validatePriceInput(this)">
          </div>
          <div class="mb-3">
            <hr>
          </div>

          <div class="col-12">
            <div class="form-group mb-5">
              <label>Thumbnail image</label>
              <div class="doc-upload">
                <label class="document-label h-auto p-10 justify-content-start">
                  <input type="file" name="image" id="image-upload-edit" onchange="previewImages('edit')">
                  <img src="{{ asset('public/admin_assets/images/upload.svg') }}">
                </label>
              </div>
              <div class="row mt-11" id="image_preview"> <!-- existed images --> </div>
              <div id="image-preview-edit"><!-- new selected images --></div>
            </div>
          </div>
          <input type="hidden" name="existing_images" id="existing_images" value="">

          <div class="form-group text-center">
            <button type="button" class="btn btn-primary text-dark hover-text-white btn-width" id="submit">Submit</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection
@section('script')
<!-- Script for preview image on add time -->
<script>
  function previewImages(type) {
    let previewContainer;
    if (type === 'add') {
      previewContainer = document.getElementById('image-preview-add');
    } else if (type === 'edit') {
      previewContainer = document.getElementById('image-preview-edit');
      $('#image_preview').hide();
    }

    console.log(previewContainer, "previewContainer");
    previewContainer.innerHTML = '';

    let files;
    if (type === 'add') {
      files = document.getElementById('image-upload').files;
    } else if (type === 'edit') {
      files = document.getElementById('image-upload-edit').files;
    }

    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>
<!-- active inactive -->
<script>
  function ActiveInactive(id, status) {
    Swal.fire({
      title: 'Are you sure?',
      text: "Are you sure you want to change availibility of this category?",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes',
      cancelButtonText: "No",
    }).then((result) => {
      if (result.isConfirmed) {
        $.ajax({
          url: "{{ route('admin.choicecategory.active_inactive') }}",
          method: 'POST',
          data: {
            _token: '{{ csrf_token() }}',
            id: id,
            status: status,
          },
          success: function(response) {
            if (response.status === 'success') {
              toastr.success(response.message, 'Success');
            } else {
              toastr.error(response.message, 'Error');
            }
          },
          error: function(xhr, status, error) {
            toastr.error('An unexpected error occurred.', 'Error');
            // location.reload();
          }
        });
      }
    });
  }
</script>
<!-- delete -->
<script>
  function Delete(id) {
    Swal.fire({
      title: 'Are you sure?',
      text: "Are you sure you want to delete this accompaniment?",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes',
      cancelButtonText: "No",
    }).then((result) => {
      if (result.isConfirmed) {
        $.ajax({
          url: "{{ route('admin.choicecategory.delete') }}",
          method: 'POST',
          data: {
            _token: '{{ csrf_token() }}',
            id: id,
          },
          success: function(response) {
            if (response.status === 'success') {
              // $('#categoryCard' + category_id).remove();
              toastr.success(response.message, 'Success');
            } else {
              toastr.error(response.message, 'Error');
            }
          },
          error: function(xhr, status, error) {
            location.reload();
            // console.error(error);
            // toastr.error(response.message);
          }
        });
      }
    });
  }
</script>
<!-- get and update -->
<script>
  $(document).ready(function() {
    $('.editBtn').on('click', function() {
      var Id = $(this).data('id');
      var url = '{{ route("admin.choicecategory.get", ":Id") }}';
      url = url.replace(':Id', Id);

      $.ajax({
        url: url,
        type: 'POST',
        data: {
          _token: '{{ csrf_token() }}',
          id: Id,
        },
        success: function(response) {
          console.log(response, "response");
          var category = response.data;

          $('#edit_Modal input[name="id"]').val(category.choice_category_id);
          $('#edit_Modal input[name="item_name"]').val(category.name);
          $('#edit_Modal input[name="price"]').val(category.price);
          // console.log(category.image, "category.image");
          var imageHtml = '';
          if (category.image && category.image.length > 0) {
            imageHtml = `<div class="col-md-3 position-relative">
                <img src="${category.image}" alt="Category" class="preview_img">
              </div>`;
          } else {
            imageHtml = '<p>No images available</p>';
          }
          var existingImage = category.image && category.image.length > 0 ? category.image : '';
          $('#edit_Modal input[name="existing_images"]').val(existingImage);

          $('#edit_Modal .row.mt-11').html(imageHtml);
          $('#edit_Modal').modal('show');
        },
        error: function(xhr, status, error) {
          console.log('Error:', error);
        }
      });
    });

    $('#submit').on('click', function() {
      var Id = $('#edit_Modal input[name="id"]').val();
      var item_name = $('#edit_Modal input[name="item_name"]').val();
      var price = $('#edit_Modal input[name="price"]').val();

      var formData = new FormData();
      formData.append('_token', '{{ csrf_token() }}');
      formData.append('id', Id);
      formData.append('item_name', item_name);
      formData.append('price', price);
      var existingImages = $('#existing_images').val();
      if (existingImages) {
        formData.append('existing_images', existingImages);
      }
      var file = $('#image-upload-edit')[0].files[0];
      if (file) {
        formData.append('image', file);
      }

      $.ajax({
        url: '{{ route("admin.choicecategory.update") }}',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
          console.log(response, "Updated category data");
          $('#edit_Modal').modal('hide');

          location.reload();
        },
        error: function(xhr, status, error) {
          console.log('Error:', error);
        }
      });
    });
  });
</script>
@endsection