@extends('admin.layouts.app')

@section('content')
@push('styles')
<style>
  div#myTable_filter {
    display: none;
  }
  #myTable_wrapper{
    padding-left: 15px;
    padding-right: 15px;
  }
</style>
@endpush
<div class="container-fluid py-4">
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb bg-transparent mb-0 pb-0 px-0 me-sm-6 me-5">
        <li class="breadcrumb-item text-sm"><a class="opacity-5 text-dark" href="{{ route('admin.dashboard') }}">Dashboard</a>
        </li>
        <li class="breadcrumb-item text-sm text-dark active font-weight-bolder" aria-current="page">
            Sub Category</li>
    </ol>
</nav>
  <div class="row mt-4">
    <div class="col-12">
      <div class="row justify-content-between">
        <div class="col-md-4">
          {{-- <a class="btn bg-gradient-info mb-3" href="./dashboard.html">Back</a> --}}
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      @if(isset($subCategory))
      <form action="{{ route('admin.sub-categories.update', $subCategory->id) }}" method="POST">
        @csrf
        @method('PUT')
        <div class="card pt-3 mb-4">
          <div class="card-body px-0 pt-0 pb-2">
            <div class="d-md-flex align-items-start justify-content-center px-3 mb-3">
              <div class="table-top-left d-flex align-items-start justify-content-between">
                <div class="d-md-flex align-items-start justify-content-start">
                  <div class="d-flex align-items-start justify-content-start" style="margin-right: 15px;">
                    <label class="mb-0" style="margin-right: 10px; white-space: nowrap; margin-top: 10px">Select
                      Category</label>
                    <select class="form-select w-100" id="validationCustom04" name="category_id" style="width: 185.6px !important;" required>
                      <option value="">Select</option>
                      @foreach ($categories as $category)
                          <option value="{{ $category->id }}" @if($category->id == $subCategory->category_id) selected @endif>{{ $category->category_name }}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="d-flex align-items-start justify-content-start">
                    <label class="mb-0" style="margin-right: 10px; white-space: nowrap; margin-top: 10px">Enter
                      Subcategory</label>
                    <input type="text" class="form-control" name="sub_category_name" placeholder="Sub Category" value="{{ $subCategory->sub_category_name }}" required>
                       @error('sub_category_name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                        @enderror
                  </div>
                </div>

              </div>
              <div class="table-top-right">
                <button type="submit" class="btn bg-gradient-info mb-0 mr-2">Update</button>
                {{-- <a class="btn bg-gradient-info mb-0 ml-2" href="">Save</a> --}}
              </div>
            </div>
          </div>
        </div>
      </form>
      @else
      <form action="{{ route('admin.sub-categories.store') }}" method="POST">
        @csrf
        <div class="card pt-3 mb-4">
          <div class="card-body px-0 pt-0 pb-2">
            <div class="d-md-flex align-items-start justify-content-center px-3 mb-3">
              <div class="table-top-left d-flex align-items-start justify-content-between">
                <div class="d-md-flex align-items-start justify-content-start">
                  <div class="d-flex align-items-start justify-content-start" style="margin-right: 15px;">
                    <label class="mb-0" style="margin-right: 10px; white-space: nowrap; margin-top: 10px">Select
                      Category</label>
                    <select class="form-select w-100" id="validationCustom04" name="category_id" style="width: 185.6px !important;" required>
                      <option value="">Select</option>
                      @foreach ($categories as $category)
                        <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                      @endforeach
                    </select>
                  </div>
                  <div class="d-flex align-items-start justify-content-start" style="margin-right: 15px;">
                    <label class="mb-0" style="margin-right: 10px; white-space: nowrap; margin-top: 10px">Enter
                      Subcategory</label>
                    <input type="text" class="form-control" name="sub_category_name" placeholder="Sub Category" aria-label=""
                      aria-describedby="username-addon" required>
                  </div>
                </div>

              </div>
              <div class="table-top-right">
                <button type="submit" class="btn bg-gradient-info mb-0 mr-2">Save</button>
                {{-- <a class="btn bg-gradient-info mb-0 ml-2" href="">Save</a> --}}
              </div>
            </div>
          </div>
        </div>
      </form>
      @endif
    </div>
  </div>
  @if(session('success'))
          <div class="alert alert-success">
              {{ session('success') }}
          </div>
            @endif
            @if(session('error'))
            <div class="alert alert-danger">
                {{ session('error') }}
            </div>
         @endif
  <div class="row">
    <div class="col-12">
      <div class="card pt-3 mb-4">
        <div class="card-body px-0 pt-0 pb-2">
          <div class="d-md-flex align-items-center justify-content-between px-3 mb-3">
            <div class="table-top-left d-flex align-items-center justify-content-between">
                <div class="input-group">
                    <span class="input-group-text text-body"><i class="fas fa-search" aria-hidden="true"></i></span>
                    <input type="text" class="form-control" id="search_name" placeholder="Search">
                  </div>
            </div>
            <div class="table-top-right">
                <div class="d-flex align-items-center justify-content-between" style="margin-right: 15px;">
                    <button id="deleteSelected" class="btn bg-gradient-info mb-0 mr-2">Delete</button>
                  </div>
              
            </div>
          </div>
          

          <div class="table-responsive p-0">
            <table class="table align-items-center mb-0" id="myTable">
              <thead>
                <tr>
                  <th>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="selectAll">
                        {{-- <label class="form-check-label" for="selectAll">Select All</label> --}}
                    </div>
                </th>
                  <th
                  class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                  SL.No</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                    Category</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                   Sub Category</th>
                  <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                    Status</th>
                  <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                    Action</th>
                </tr>
              </thead>
              <tbody>
                @foreach ($subCategories as $sub_category)
                <tr>
                  <td>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="checkbox{{ $sub_category->id }}" name="sub_category[]" value="{{ $sub_category->id }}">
                        <label class="form-check-label" for="checkbox{{ $sub_category->id }}"></label>
                    </div>
                  </td>
                  <td>
                    <div class="d-flex px-2 py-1">
                        <h6 class="mb-0 text-sm">{{ $loop->iteration }}</h6>
                    </div>
                </td>
                  <td>
                    <div class="d-flex px-2 py-1">
                      @if ($sub_category->category)
                        <h6 class="mb-0 text-sm">{{ $sub_category->category->category_name }}</h6>
                      @else
                          <h6 class="mb-0 text-sm">No Category Found</h6>
                      @endif
                    </div>
                  </td>
                  <td>
                    <p class="text-xs font-weight-bold mb-0">{{ @$sub_category->sub_category_name }}</p>
                  </td>
                  <td>
                    <h6 style="margin-bottom: 0px !important;">
                      @if ($sub_category->sub_category_status == 1)
                      <span class="badge bg-success">Active</span></h6>
                      @else
                          <span class="badge bg-danger">InActive</span></h6>
                      @endif
                    </h6>
                  </td>
                  <td>
                    <ul class="nav table-btn-group" style="flex-wrap: nowrap;">
                      <li class="nav-item" style="display: flex;
                      align-items: center;">
                        <a class="mb-0 mx-2 my-1" style="display: inline-block;" href="{{ route('admin.sub-categories.edit', $sub_category->id) }}"><i class="fas fa-edit"
                            aria-hidden="true"></i></a>
                      </li>
                      <li class="nav-item">
                        <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" role="button"
                            data-bs-toggle="modal" data-bs-target="#exampleModal{{ $sub_category->id }}"
                            href="#">Change Status</a>
                    </li>
                      {{-- <li class="nav-item">
                        <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" role="button" data-bs-toggle="modal"
                          data-bs-target="#exampleModal" href="#">Delete</a>
                      </li> --}}
                      {{-- <li class="nav-item">
                        <a class="btn bg-gradient-info mb-0 mr-2 btn-sm delete-record" data-record-id="{{ $sub_category->id }}" href="#">Delete</a>
                      </li> --}}
                    </ul>
                  </td>
                </tr>
                <div class="modal fade" id="exampleModal{{ $sub_category->id }}" tabindex="-1" aria-labelledby="exampleModalLabel{{ $sub_category->id }}" aria-hidden="true">
                  <div class="modal-dialog">
                      <div class="modal-content">
                          <form action="{{ route('admin.update.sub_category.status', ['id' => $sub_category->id]) }}" method="POST">
                              @csrf
                              <div class="modal-body pb-0">
                                  <h1 class="modal-title fs-5 mb-3" id="exampleModalLabel{{ $sub_category->id }}">Do you want to change the status ?</h1>
                                  <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" id="inlineCheckboxYes{{ $sub_category->id }}" name="status" value="1" @if($sub_category->sub_category_status == 1) checked @endif>
                                      <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxYes{{ $sub_category->id }}">Active</label>
                                  </div>
                                  <div class="form-check form-check-inline">
                                      <input class="form-check-input" type="radio" id="inlineCheckboxNo{{ $sub_category->id }}" name="status" value="2" @if($sub_category->sub_category_status == 2) checked @endif>
                                      <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxNo{{ $sub_category->id }}">Inactive</label>
                                  </div>
                              </div>
                              <div class="modal-footer border-0 pt-0">
                                  <button type="submit" class="btn bg-gradient-info mb-0 mr-2 btn-sm">Confirm</button>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>     
                @endforeach
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body pb-0">
          <h1 class="modal-title fs-5 mb-3" id="exampleModalLabel">Do you want to Delete ?</h1>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" id="inlineCheckbox1" value="option1" checked>
            <label class="form-check-label" style="font-weight: 600;" for="inlineCheckbox1">Yes</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" id="inlineCheckbox2" value="option2">
            <label class="form-check-label" style="font-weight: 600;" for="inlineCheckbox2">No</label>
          </div>
          <!-- <p><strong>Register :</strong> <span style="color: #198754;">Staff Data Saved Successfully.</span></p> -->
        </div>
        <div class="modal-footer border-0 pt-0">
          <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button> -->
          <a class="btn bg-gradient-info mb-0 mr-2 btn-sm" href="./dashboard.html">Confirm</a>
        </div>
      </div>
    </div>
  </div>


  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>

  <!-- Include SweetAlert CSS and JS files -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>



  <script src="{{ asset('js/app.js') }}"></script>
  <script>
    let table = new DataTable('#myTable', {
          responsive: true,
      });
  
       // Add an event listener for the search input
       $('#search_name').on('input', function () {
              table.search(this.value).draw(); // Apply the search and redraw the table
          });
        // Add an event listener for the delete buttons
    //     $('.delete-record').on('click', function (e) {
    //     e.preventDefault();
    //     var recordId = $(this).data('record-id');
    //     var $this = $(this); // Store reference to $(this)

    //     // Show the SweetAlert confirmation dialog
    //     swal({
    //         title: "Are you sure?",
    //         text: "Once deleted, you will not be able to recover this record!",
    //         icon: "warning",
    //         buttons: true,
    //         dangerMode: true,
    //     })
    //     .then((willDelete) => {
    //         if (willDelete) {
    //             // User confirmed, perform the delete action
    //             $.ajax({
    //                 type: "POST",
    //                 url: "{{ route('admin.sub-categories.delete') }}", // Replace with your delete route
    //                 data: {
    //                     "_token": "{{ csrf_token() }}",
    //                     "id": recordId
    //                 },
    //                 success: function (response) {
    //                     if (response.success) {
    //                         // Record deleted successfully, you can remove the table row
    //                         swal("The sub category has been deleted!", {
    //                             icon: "success",
    //                         });
    //                         // Remove the table row using $this
    //                         $this.closest('tr').remove();
    //                         location.reload();
    //                     } else {
    //                         swal("Oops! Something went wrong.", {
    //                             icon: "error",
    //                         });
    //                     }
    //                 },
    //                 error: function (xhr, status, error) {
    //                     swal("Oops! Something went wrong.", {
    //                         icon: "error",
    //                     });
    //                 }
    //             });
    //         }
    //     });
    // });

    $('#selectAll').change(function() {
            $('input[name="sub_category[]"]').prop('checked', this.checked);
        });

          $('#deleteSelected').on('click', function() {
              const selectedIds = $('input[name="sub_category[]"]:checked').map(function() {
                  return this.value;
              }).get();
      
              if (selectedIds.length === 0) {
                  alert('Please select at least one record to delete.');
                  return;
              }
      
              // Show SweetAlert confirmation
              swal({
                  title: "Confirm Deletion",
                  text: "Are you sure you want to delete the selected records?",
                  icon: "warning",
                  buttons: {
                      cancel: "Cancel",
                      confirm: "Delete"
                  },
                  dangerMode: true,
              })
              .then((willDelete) => {
                  if (willDelete) {
                      // User confirmed, send the selectedIds to your server using an AJAX POST request
                      $.ajax({
                          url: '{{ route('admin.sub-categories.delete') }}',
                          type: 'POST',
                          data: {
                              selectedIds: selectedIds,
                              _token: '{{ csrf_token() }}',
                          },
                          success: function(response) {
                              if (response.success) {
                                  // Handle successful deletion
                                  swal("Success", response.message, "success");
                                  location.reload();
                                  // You can also refresh the DataTable or update the table as needed.
                                  // For example: table.ajax.reload();
                              } else {
                                swal("Error", response.message, "error");
                              }
                            },
                          error: function() {
                              swal("Error", "An error occurred while deleting records.", "error");
                          }
                      });
                  }
              });
        });
  </script>
  @endsection