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

<div class="dashboard-main-body">
  <div class="row ">
    <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">Category</h6>
        <div class="menu-grp-btn">
          <a href="javascript:void(0)" id="edit-sequence-btn" class="btn btn-dark">Edit Sequence</a>
          <a href="javascript:void(0)" id="save-sequence-btn" class="btn btn-success" style="display:none;">Save Sequence</a>
          <a href="#add_category_Modal" class="btn btn-primary" data-bs-toggle="modal"><img src="{{ asset('public/admin_assets/images/add-square.svg') }}">Add Items</a>
        </div>

      </div>
    </div>
  </div>
  {{-- {{dd($data)}} --}}

  <div class="row mt-3" id="categories-drag">
    @if($code == 1)
    @foreach($data as $item)
    <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-12 mb-32" id="categoryCard{{$item->category_id}}">
      <div class="main_card">
        <div class="card_body">
          <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
            <h6 class="card_title"> {{ $item->name }} </h6>
            <div class="form-switch d-flex align-items-center gap-3 switch_Active">
              <label class="form-check-label dark_black" for="activeToggle{{$item->category_id}}">Active</label>
              <!-- {{$item->is_active}} -->
              <input class="form-check-input" type="checkbox" role="switch" id="activeToggle{{$item->category_id}}"
                @if($item->is_active == 1) checked @endif
              onchange="ActiveInactiveCategory('{{$item->category_id}}', this.checked ? 1 : 0)">
            </div>
          </div>
          @if($item->available_all_day == 0)
          <span class="time_span">
            {{ \Carbon\Carbon::createFromFormat('H:i:s', $item->time_from)->format('g:i A') }} -
            {{ \Carbon\Carbon::createFromFormat('H:i:s', $item->time_upto)->format('g:i A') }}
          </span>
          @else
          <span class="time_span"> All Day </span>
          @endif
          @if(!empty($item->images))
          <div class="card-img my-3">
            <img src="{{ $item->images[0]->name }}" alt="Image 0" class="img-fluid">
          </div>
          @endif
        </div>
        <div class="card_footer">
          <div class="d-flex align-items-center justify-content-between gap-3 mb-3">
            <div>
              <p class="Total_txt">Total sub category</p>
              <h6 class="Total_no dark_black">{{ $item->sub_category_count }} </h6>
            </div>
            <div class="action-btn-grp">

              <a href="#cat_edit_Modal" data-bs-toggle="modal" data-id="{{ $item->category_id }}" class="cateditBtn">
                <img src="{{ asset('public/admin_assets/images/edit.svg') }}">
              </a>

              <a href="javascript:void(0)" onclick="DeleteCategory('{{$item->category_id}}')"><img src="{{ asset('public/admin_assets/images/trash.svg') }}"></a>
            </div>
          </div>
          <a href="{{ route('admin.subcategory', $item->category_id) }}" class="btn View_btn w-100 radius-8">View Sub category</a>
        </div>
      </div>
    </div>
    @endforeach
    @else
    <p>NO DATA</p>
    @endif
  </div>
</div>


<!-- ===============================================Modal ==================================================-->

<div class="modal fade" id="add_category_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">Add Category</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="addCategoryForm" action="{{ route('admin.category.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="category_name" class="form-control" placeholder="Enter Category name" required data-parsley-required-message="Category name is required">
            </div>
            <input type="hidden" id="hidden_switch_value" name="available_all_day_value" value="0">

            <div class="row align-items-center">
              <div class="col-md-6 mb-3">
                <div class="form-switch switch-primary d-flex align-items-center gap-3">
                  <label class="form-check-label line-height-1 fw-bold dark_blue" for="available_all_day">Available All-day</label>
                  <input class="form-check-input" type="checkbox" id="available_all_day" name="available_all_day" value="1">
                </div>
              </div>
              <div class="col-md-6">
                <div class="row">
                  <div class="col-6">
                    <div class="form-group mb-3">
                      <label>Time From</label>
                      <input type="text" class="form-control timepicker" name="time_from" id="time_from" placeholder="HH:MM" required data-parsley-required-message="Time From is required" autocomplete="off">
                      <span class="form-icon-right-label">
                        <img src="{{ asset('public/admin_assets/images/calendar.svg') }}">
                      </span>
                    </div>
                  </div>
                  <div class="col-6">
                    <div class="form-group mb-3">
                      <label>Time Upto</label>
                      <input type="text" class="form-control timepicker" name="time_upto" id="time_upto" placeholder="HH:MM" required data-parsley-required-message="Time Upto is required" autocomplete="off">
                      <span class="form-icon-right-label">
                        <img src="{{ asset('public/admin_assets/images/calendar.svg') }}">
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="form-group mb-5">
              <label>Upload Images</label>
              <div class="doc-upload">
                <label class="document-label">
                  <input type="file" name="images[]" id="image-upload" required multiple data-parsley-required-message="Image is required" onchange="previewImages('add')">

                  <img src="{{ asset('public/admin_assets/images/upload.svg') }}">
                </label>
              </div>
              <div id="image-preview-add"></div>
            </div>
          </div>
          <div class="form-group text-center">
            <button type="submit" class="btn btn-primary text-dark hover-text-white btn-width">Add</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="cat_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">Edit Category</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" name="category_id" value="" class="form-control">
        <div class="add-form-box">
          <div class="form-group mb-3">
            <label>Category name</label>
            <input type="text" name="category_name" class="form-control" value="Big On Breakfast">
          </div>
          <div class="row align-items-center">
            <div class="col-md-6 mb-3">
              <div class="form-switch switch-primary d-flex align-items-center gap-3">
                <label class="form-check-label line-height-1 fw-bold dark_blue" for="available_all_day">Available All-day</label>
                <input class="form-check-input" type="checkbox" role="switch" id="available_all_day">
              </div>
            </div>

            <div class="col-md-6">
              <div class="row">
                <div class="col-6">
                  <div class="form-group mb-3">
                    <label>Time From</label>
                    <!-- <input type="text" class="form-control" name="time_from" value="6:00 AM"> -->
                    <input type="text" class="form-control timepicker" name="time_from" id="time_from" placeholder="HH:MM" required data-parsley-required-message="Time From is required" autocomplete="off">

                    <span class="form-icon-right-label">
                      <img src="{{ asset('public/admin_assets/images/calendar.svg') }}">
                    </span>
                  </div>
                </div>
                <div class="col-6">
                  <div class="form-group mb-3">
                    <label>Time Upto</label>
                    <!-- <input type="text" class="form-control" name="time_upto" value="11:00 AM"> -->
                    <input type="text" class="form-control timepicker" name="time_upto" id="time_upto" placeholder="HH:MM" required data-parsley-required-message="Time Upto is required" autocomplete="off">

                    <span class="form-icon-right-label">
                      <img src="{{ asset('public/admin_assets/images/calendar.svg') }}">
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="form-group mb-5">
          <label>Upload Image (Optional)</label>
          <div class="doc-upload">
            <label class="document-label h-auto p-10 justify-content-start">
              <input type="file" name="images[]" id="image-upload-edit" multiple 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>
        <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_category">Submit</button>
        </div>

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

@endsection
@section('script')
<!-- Script for manage available_all_day value -->
<script>
  $(document).ready(function() {
    const $switchElem = $('#available_all_day');
    const $timeFrom = $('#time_from');
    const $timeUpto = $('#time_upto');
    const $hiddenSwitchValue = $('#hidden_switch_value');

    function toggleTimeInputs(isChecked) {
      if (isChecked) {
        $timeFrom.prop('disabled', true).removeAttr('required');
        $timeUpto.prop('disabled', true).removeAttr('required');
        $hiddenSwitchValue.val('1');
      } else {
        $timeFrom.prop('disabled', false).attr('required', true);
        $timeUpto.prop('disabled', false).attr('required', true);
        $hiddenSwitchValue.val('0');
      }
    }
    toggleTimeInputs($switchElem.is(':checked'));
    $switchElem.change(function() {
      toggleTimeInputs($(this).is(':checked'));
    });
  });
</script>
<!-- Script for time slot -->
<script>
  $(document).ready(function() {
    $('#time_from, #time_upto').timepicker({
      showMeridian: true,
      minuteStep: 5,
      defaultTime: '00:00',
      autoclose: true,
      template: 'dropdown',
    }).on('changeTime.timepicker', function() {
      var timeFrom = $('#time_from').timepicker('getTime');
      var timeUpto = $('#time_upto').timepicker('getTime');

      if (timeFrom && timeUpto) {
        timeFrom = new Date('1970-01-01T' + timeFrom);
        timeUpto = new Date('1970-01-01T' + timeUpto);
        if (timeFrom.getTime() === timeUpto.getTime()) {
          $('#time_upto').timepicker('setTime', ''); // this is not working 
        }
      }
    });
  });
</script>
<!-- Script for delete category -->
<script>
  function DeleteCategory(category_id) {
    Swal.fire({
      title: 'Are you sure?',
      text: "Are you sure you want to delete this category?",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes',
      cancelButtonText: "No",
    }).then((result) => {
      if (result.isConfirmed) {
        $.ajax({
          url: "{{ route('admin.category.delete') }}",
          method: 'POST',
          data: {
            _token: '{{ csrf_token() }}',
            category_id: category_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>
<!-- Script for status change of category -->
<script>
  function ActiveInactiveCategory(category_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.category.active_inactive') }}",
          method: 'POST',
          data: {
            _token: '{{ csrf_token() }}',
            category_id: category_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>
<!-- Script for get data for edit model and show in inputs -->
<script>
  function convertTo12Hour(time) {
    let [hours, minutes] = time.split(':');
    hours = parseInt(hours);
    let ampm = hours >= 12 ? 'PM' : 'AM';
    hours = hours % 12 || 12;
    return hours + ':' + minutes + ' ' + ampm;
  }
  $(document).ready(function() {
    $('.cateditBtn').on('click', function() {
      var categoryId = $(this).data('id');
      var url = '{{ route("admin.category.edit", ":categoryId") }}';
      url = url.replace(':categoryId', categoryId);

      $.ajax({
        url: url,
        type: 'POST',
        data: {
          _token: '{{ csrf_token() }}',
          category_id: categoryId,
        },
        success: function(response) {
          console.log(response, "response");
          var category = response.data;
          $('#cat_edit_Modal input[name="category_id"]').val(category.category_id);
          $('#cat_edit_Modal input[name="category_name"]').val(category.name);

          if (category.available_all_day == 1) {
            $('#cat_edit_Modal #available_all_day').prop('checked', true);
          } else {
            $('#cat_edit_Modal #available_all_day').prop('checked', false);
          }
          var timeFrom = category.time_from || '';
          var timeUpto = category.time_upto || '';

          // $('#cat_edit_Modal input[name="time_from"]').val(timeFrom);
          // $('#cat_edit_Modal input[name="time_upto"]').val(timeUpto);
          let timeFrom12Hour = convertTo12Hour(timeFrom);
          let timeUpto12Hour = convertTo12Hour(timeUpto);

          // Set the values in the modal input fields
          $('#cat_edit_Modal input[name="time_from"]').val(timeFrom12Hour);
          $('#cat_edit_Modal input[name="time_upto"]').val(timeUpto12Hour);

          if ($('#cat_edit_Modal #available_all_day').prop('checked')) {
            $('#cat_edit_Modal input[name="time_from"]').prop('disabled', true);
            $('#cat_edit_Modal input[name="time_upto"]').prop('disabled', true);
          } else {
            $('#cat_edit_Modal input[name="time_from"]').prop('disabled', false);
            $('#cat_edit_Modal input[name="time_upto"]').prop('disabled', false);
          }

          $('#cat_edit_Modal #available_all_day').change(function() {
            if ($(this).prop('checked')) {
              $('#cat_edit_Modal input[name="time_from"]').prop('disabled', true);
              $('#cat_edit_Modal input[name="time_upto"]').prop('disabled', true);
            } else {
              $('#cat_edit_Modal input[name="time_from"]').prop('disabled', false);
              $('#cat_edit_Modal input[name="time_upto"]').prop('disabled', false);
            }
          });

          var images = category.images;
          var imageHtml = '';
          if (images.length > 0) {
            images.forEach(function(image) {
              imageHtml += `
              <div class="col-md-3 position-relative">
                <img src="${image.name}" alt="Category" class="preview_img">
                <a href="javascript:void(0)" onclick="hideImage(this); return false;" ><img src="{{ asset('public/admin_assets/images/close-circle.svg') }}" alt="close-circle" class="close-circle"></a>
              </div>
            `;
            });
          } else {
            imageHtml = '<p>No images available</p>';
          }
          var existingImages = category.images.map(function(image) {
            return image.name;
          }).join(',');
          $('#cat_edit_Modal input[name="existing_images"]').val(existingImages);
          $('#cat_edit_Modal .row.mt-11').html(imageHtml);
          $('#cat_edit_Modal').modal('show');
        },
        error: function(xhr, status, error) {
          console.log('Error:', error);
        }
      });
    });
  });

  function hideImage(element) {
    var imageWrapper = element.closest('.col-md-3');
    if (imageWrapper) {
      imageWrapper.style.display = 'none';
    }
    var remainingImages = [];
    document.querySelectorAll('.col-md-3 .preview_img').forEach(function(img) {
      if (img.closest('.col-md-3').style.display !== 'none') {
        remainingImages.push(img.src);
      }
    });
    console.log(remainingImages, "remainingImages");
    $('#cat_edit_Modal input[name="existing_images"]').val(remainingImages.join(','));
  }

  $('#submit_category').on('click', function() {
    var categoryId = $('#cat_edit_Modal input[name="category_id"]').val();
    var categoryName = $('#cat_edit_Modal input[name="category_name"]').val();
    var availableAllDay = $('#cat_edit_Modal #available_all_day').prop('checked') ? 1 : 0;
    var timeFrom = $('#cat_edit_Modal input[name="time_from"]').val();
    var timeUpto = $('#cat_edit_Modal input[name="time_upto"]').val();

    var formData = new FormData();
    formData.append('_token', '{{ csrf_token() }}');
    formData.append('category_name', categoryName);
    formData.append('available_all_day', availableAllDay);
    formData.append('time_from', timeFrom);
    formData.append('time_upto', timeUpto);
    formData.append('category_id', categoryId);
    var existingImages = $('#existing_images').val();
    console.log(existingImages, "existingImages");
    if (existingImages) {
      formData.append('existing_images', existingImages);
    }
    var files = $('#image-upload-edit')[0].files;
    for (var i = 0; i < files.length; i++) {
      formData.append('images[]', files[i]);
    }

    $.ajax({
      url: '{{ route("admin.category.update") }}',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(response) {
        console.log(response, "Updated category data");
        $('#cat_edit_Modal').modal('hide');
        location.reload();
      },
      error: function(xhr, status, error) {
        console.log('Error:', error);
      }
    });
  });
</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');
    }
    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>

<!-- Drag Category -->
<script>
  $(document).ready(function() {
    $("#categories-drag").sortable({
      disabled: true
    });

    $('#edit-sequence-btn').on('click', function() {
      $("#categories-drag").sortable('enable');
      $('#edit-sequence-btn').hide();
      $('#save-sequence-btn').show();
    });

    $('#save-sequence-btn').on('click', function() {
      var cat_ids = $('#categories-drag div').map(function(i, el) {
        return el.id ? el.id : null;
      }).get().filter(Boolean);

      $.ajax({
        url: "{{ route('admin.category.change_sequence') }}",
        type: 'POST',
        data: {
          id: cat_ids,
          "_token": "{{ csrf_token() }}"
        },
        dataType: 'json',
        success: function(response) {
          if (response.status == 'success') {
            toastr.success('Sequence updated successfully', 'Success');
            $("#categories-drag").sortable('disable');
            $('#save-sequence-btn').hide();
            $('#edit-sequence-btn').show();
          }
        },
        error: function() {
          toastr.error('Problem in changing order. Please try again.', 'Error');
        }
      });
    });
  });
</script>


@endsection