@extends('layout.admin')
@section('content')
<div class="dashboard-main-body">
  <style>
    .table-filter-menu .filt-btn {

      justify-content: flex-start;
    }
  </style>

  <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">Menus</h6>
        <div class="menu-grp-btn">
          <!-- data-bs-toggle="modal" data-bs-target="#deactive_Modal" -->
          <a href="#" class="btn btn-primary" onclick="change_bulk(`deactive`);">Deactivate Items</a>
          <a href="#" class="btn btn-danger" onclick="change_bulk(`delete`);">Delete</a>
        </div>

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

  <div class="row gy-4 mt-1">
    <div class="col-md-12">
      <div class="table-filter-menu">
        <div class="form-group">
          <select id="categorySelect" class="form-select" name="category_id">
            <option value="" disabled selected>Select Category</option>
            @if($category_list_code == 1)
            @foreach($category_list_data as $item)
            <option value="{{ $item->category_id }}"> {{$item->name}} </option>
            @endforeach
            @else
            <option disabled>No Categories Available</option>
            @endif
          </select>
        </div>
        <div class="filt-btn" id="subcategoryList"> </div>
        <a href="#"><img src="{{ asset('public/admin_assets/images/tab-icon.svg') }}"></a>
      </div>
      <div class="card h-100 overflow-hidden">
        <div class="card-body p-0">
          <div class="table-responsive">
            <input type="hidden" id="selectedIds" name="selectedIds" value="">

            <table id="menuTable" class="filter-table table bordered-table mb-0">
              <thead>
                <tr>
                  <th>
                    <div class="form-check style-check d-flex align-items-center">
                      <input type="checkbox" id="selectAll" class="form-check-input selectAll" data-id="main">
                    </div>
                  </th>

                  <th scope="col">
                    <div class="form-check style-check d-flex align-items-center">
                      <!-- <input class="form-check-input" type="checkbox" id="selectAll"> -->
                      <label class="form-check-label" for="selectAll">Food Menu</label>
                    </div>
                  </th>

                  <th scope="col">Description</th>
                  <th scope="col">Preparation Time</th>
                  <th scope="col">Price</th>
                  <th scope="col">Food Tag</th>
                  <th scope="col">Action</th>
                  <th scope="col"><img src="{{ asset('public/admin_assets/images/tab-icon.svg') }}"></th>
                </tr>
              </thead>
              <tbody>
                <!-- Data will be dynamically loaded here by DataTables -->
              </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 bg-primary-50 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" 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 bg-primary-50 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" 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 bg-primary-50 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" href="javascript:void(0)">1</a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 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" href="javascript:void(0)">2</a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 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 bg-primary-600 text-white" href="javascript:void(0)">3</a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 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" href="javascript:void(0)">4</a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 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" href="javascript:void(0)">5</a>
                </li>
                <li class="page-item">
                  <a class="page-link bg-primary-50 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" 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 bg-primary-50 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" 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="deactive_Modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content p-10 radius-15">
      <div class="modal-header border-0">
        <h5 class="modal-title text-xxl" id="exampleModalLabel">Deactivate Items<span class="modal-subtitle d-block">Set a time limit for deactivated items</span></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">
          <div class="row">
            <div class="col-lg-6">
              <div class="form-group mb-3">
                <label>Select Date From</label>
                <input type="text" class="form-control">
                <span class="form-icon-right-label">
                  <img src="assets/images/calendar.svg">
                </span>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group mb-3">
                <label>Select Date Upto</label>
                <input type="text" class="form-control">
                <span class="form-icon-right-label">
                  <img src="assets/images/calendar.svg">
                </span>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group mb-3">
                <label>Time From</label>
                <input type="text" class="form-control">
                <span class="form-icon-right-label">
                  <img src="assets/images/calendar.svg">
                </span>
              </div>
            </div>
            <div class="col-lg-6">
              <div class="form-group mb-3">
                <label>Time Upto</label>
                <input type="text" class="form-control">
                <span class="form-icon-right-label">
                  <img src="assets/images/calendar.svg">
                </span>
              </div>
            </div>
            <div class="col-xxl-12">
              <div class="form-group mb-3">
                <label>Select Branch</label>
                <select class="form-control custom-select">
                  <option></option>
                </select>
              </div>
            </div>
            <div class="col-xxl-12">
              <div class="form-group text-center">
                <a href="#" data-bs-dismiss="modal" class="btn btn-primary text-dark hover-text-white btn-width">Submit</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@endsection
@section('script')
<!-- category with subcategory -->
<script>
  $(document).ready(function() {
    let selectedCategoryId = @json(session('selected_category_id'));
    let selectedSubcategoryId = @json(session('selected_subcategory_id'));

    if (!localStorage.getItem('selectedCategoryId')) {
      localStorage.setItem('selectedCategoryId', selectedCategoryId);
    }

    $('#categorySelect').on('change', function() {
      let categoryId = $(this).val();
      let subcategoryList = $('#subcategoryList');
      subcategoryList.html('');
      let storedCategoryId = localStorage.getItem('selectedCategoryId');

      if (categoryId) {
        $.ajax({
          url: "{{ route('admin.get-subcategories', '') }}/" + categoryId,
          type: 'GET',
          dataType: 'json',
          success: function(response) {
            if (response.code === 1 && response.data.length > 0) {
              subcategoryList.find('.subcategory').removeClass('active');

              response.data.forEach(function(subcategory, index) {

                if (index === 0) {
                  if (storedCategoryId && storedCategoryId != categoryId) {
                    selectedSubcategoryId = subcategory.sub_category_id;
                    setSubcategorySession(selectedSubcategoryId);
                  } else if (!selectedSubcategoryId) {
                    selectedSubcategoryId = subcategory.sub_category_id;
                    setSubcategorySession(selectedSubcategoryId);
                  }
                }

                let isActive = (subcategory.sub_category_id == selectedSubcategoryId) ? 'active' : 'no-active';

                subcategoryList.append(
                  `<a href="#" class="subcategory ${isActive}" data-id="${subcategory.sub_category_id}">
                   <span>${subcategory.sub_category_name || ''}</span>
                 </a>`
                );

              });

              localStorage.setItem('selectedCategoryId', categoryId);
            } else {
              subcategoryList.html('<p>No Subcategories Available</p>');
            }
          },
          error: function(xhr) {
            subcategoryList.html('<p>Error loading subcategories.</p>');
          }
        });
      }
    });

    $(document).on('click', '.subcategory', function(e) {
      e.preventDefault();
      let subcategoryId = $(this).data('id');

      $('#subcategoryList .subcategory').removeClass('active');
      $(this).addClass('active');

      setSubcategorySession(subcategoryId);
    });

    function setSubcategorySession(subcategoryId) {
      $.ajax({
        url: "{{ route('admin.set-session') }}",
        type: 'POST',
        data: {
          _token: '{{ csrf_token() }}',
          subcategory_id: subcategoryId
        },
        success: function() {
          console.log(subcategoryId, "Subcategory session updated.");
        },
        error: function() {
          console.log("Error setting subcategory session.");
        }
      });
    }
  });
</script>

<!-- datatable -->
<script>
  // $(document).ready(function() {
  //   var table = $('#menuTable').DataTable({
  //     processing: true,
  //     serverSide: true,
  //     lengthChange: false,
  //     ajax: {
  //       url: '{{ route("menu.items.data") }}',
  //       type: 'POST',
  //       headers: {
  //         'X-CSRF-TOKEN': '{{ csrf_token() }}'
  //       },
  //       data: function(d) {
  //         d.categoryId = $('#categoryId').val();
  //         d.subCategoryId = $('#subCategoryId').val();
  //       }
  //     },
  //     columns: [{
  //         data: 'name',
  //         render: function(data, type, row) {
  //           return `
  //             <div class="form-check style-check d-flex align-items-center">
  //               <input class="form-check-input item-checkbox" type="checkbox" data-id="${row.id}">
  //               <label class="form-check-label d-flex align-items-center gap-2">
  //                 <img src="${row.image}" style="width: 50px; height: 50px; border-radius: 35%;">
  //                 <span>${data}</span>
  //               </label>
  //             </div>`;
  //         },
  //         orderable: false
  //       },
  //       {
  //         data: 'description'
  //       },
  //       {
  //         data: 'preparation_time',
  //         render: function(data) {
  //           return `${data}`;
  //         }
  //       },
  //       {
  //         data: 'price',
  //         render: function(data) {
  //           return `${data}`;
  //         }
  //       },
  //       {
  //         data: 'is_mark_as_new',
  //         render: function(data) {
  //           return data == 1 ? '<span class="filter-badge bg1">New</span>' : '';
  //         }
  //       },
  //       {
  //         data: 'menu_item_id',
  //         render: function(data, type, row) {
  //           return `${data}`;
  //         }
  //       },
  //       {
  //         data: 'menu_item_id',
  //         render: function(data) {
  //           return `<a href="items-details.php"><img src="{{ asset('public/admin_assets/images/tab-icon.svg') }}" alt="Details"></a>`;
  //         }
  //       }
  //     ]
  //   });

  //   $('#categoryId, #subCategoryId').change(function() {
  //     $('#menuTable').DataTable().ajax.reload();
  //   });

  //   $('#selectAll').on('click', function() {
  //     var isChecked = this.checked;
  //     var rows = table.rows({
  //       page: 'current'
  //     }).nodes();
  //     $('.item-checkbox', rows).prop('checked', isChecked);
  //     $('.item-checkbox', rows).trigger('change');
  //   });

  //   table.on('draw', function() {
  //     $('#selectAll').prop('checked', false);
  //   });


  //   function change_bulk(type) {
  //     var action_button = $('.action_button');
  //     if (type == 'active') {
  //       ActiveInactive(getselected_id(), '0');
  //     } else if (type == 'deactive') {
  //       ActiveInactive(getselected_id(), '1');
  //     } else if (type == 'remove') {
  //       Delete(getselected_id());
  //     }
  //   }

  //   function getselected_id() {
  //     var checked_array = [];

  //     table.$('.item-checkbox').each(function() {
  //       if (this.checked) {
  //         checked_array.push($(this).data('id'));
  //       }
  //     });

  //     return checked_array.length > 0 ? checked_array : ['0'];
  //   }

  // });
  // Define 'table' and functions outside of $(document).ready to avoid scope issues
  var table;

  function change_bulk(type) {
    if (type === 'active') {
      ActiveInactive(getselected_id(), '1');
    } else if (type === 'deactive') {
      ActiveInactive(getselected_id(), '0');
    } else if (type === 'delete') {
      Delete(getselected_id());
    }
  }

  function getselected_id() {
    var checked_array = [];
    table.$('.item-checkbox').each(function() {
      if (this.checked) {
        checked_array.push($(this).data('id'));
      }
    });
    return checked_array.length > 0 ? checked_array : ['0'];
  }

  $(document).ready(function() {
    table = $('#menuTable').DataTable({
      processing: true,
      serverSide: true,
      lengthChange: false,
      ajax: {
        url: '{{ route("menu.items.data") }}',
        type: 'POST',
        headers: {
          'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        data: function(d) {
          d.categoryId = $('#categoryId').val();
          d.subCategoryId = $('#subCategoryId').val();
        }
      },
      columns: [{
          data: 'id',
          name: '#',
          'orderable': false,
          render: function(data) {
            return `<div class="form-check style-check d-flex align-items-center">
            <input type="checkbox" class="form-check-input item-checkbox" data-id="${data}">
            </div>`;
          }
        },

        {
          data: 'name',
          render: function(data, type, row) {
            return `
            <div class="form-check style-check d-flex align-items-center">
              <label class="form-check-label d-flex align-items-center gap-2">
                <img src="${row.image}" style="width: 50px; height: 50px; border-radius: 35%;">
                <span>${data}</span>
              </label>
            </div>`;
          },
          orderable: false
        },
        {
          data: 'description'
        },
        {
          data: 'preparation_time'
        },
        {
          data: 'price'
        },
        {
          data: 'is_mark_as_new',
          render: function(data) {
            return data == 1 ? '<span class="filter-badge bg1">New</span>' : '';
          }
        },
        {
          data: 'menu_item_id'
        },
        {
          data: 'menu_item_id',
          render: function(data) {
            return `<a href="items-details.php"><img src="{{ asset('public/admin_assets/images/tab-icon.svg') }}" alt="Details"></a>`;
          }
        }
      ]
    });

    $('#categoryId, #subCategoryId').change(function() {
      table.ajax.reload();
    });

    $('#selectAll').on('click', function() {
      var isChecked = this.checked;
      var rows = table.rows({
        page: 'current'
      }).nodes();
      $('.item-checkbox', rows).prop('checked', isChecked).trigger('change');
    });

    table.on('draw', function() {
      $('#selectAll').prop('checked', false);
    });
  });
</script>

<!-- active inactive -->
<script>
  function ActiveInactive(id, status) {
    console.log(id, status);
    Swal.fire({
      title: 'Are you sure?',
      text: "Are you sure you want to change availibility of this item?",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes',
      cancelButtonText: "No",
    }).then((result) => {
      if (result.isConfirmed) {
        $.ajax({
          url: "{{ route('menu.items.active_inactive') }}",
          method: 'POST',
          data: {
            _token: '{{ csrf_token() }}',
            id: id,
            status: status,
          },
          success: function(response) {
            if (response.status === 'success') {
              toastr.success(response.message, 'Success');
              setTimeout(() => {
                table.ajax.reload(null, false);
              }, 5000); // 10000 milliseconds = 10 seconds
            } 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 item?",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes',
      cancelButtonText: "No",
    }).then((result) => {
      if (result.isConfirmed) {
        $.ajax({
          url: "{{ route('menu.items.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>

<!-- For select all checkboxes -->
<script>

</script>

@endsection