@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">
                        Category</li>
                </ol>
            </nav>
            <div class="row">
                <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">
                    <div class="card pt-3 mb-4 mt-4">
                        <div class="card-body px-0 pt-0 pb-2">
                            @if(isset($category))
                            <form action="{{ route('admin.categories.update', $category->id)}}" method="POST">
                                @csrf
                                @method('PUT')
                            <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;">Enter
                                                Category</label>
                                                <div>
                                                    <input type="text" class="form-control  @error('category_name') is-invalid @enderror" placeholder="Category"
                                                aria-label="Email" name="category_name" aria-describedby="username-addon" value="{{ @$category->category_name }}">
                                                @error('category_name')
                                                <span class="invalid-feedback" role="alert">
                                                    <strong style="display: block">{{ $message }}</strong>
                                                </span>
                                                @enderror
                                                </div>
                                            
                                        </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>
                            </form>
                            @else
                            <form action="{{ route('admin.categories.store') }}" method="POST">
                                @csrf
                            <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;">Enter
                                                Category</label>
                                                <div>
                                                    <input type="text" class="form-control  @error('category_name') is-invalid @enderror" placeholder="Category"
                                                aria-label="Email" name="category_name" aria-describedby="username-addon">
                                            @error('category_name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong style="display: block">{{ $message }}</strong>
                                            </span>
                                            @enderror
                                                </div>
                                            
                                        </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>
                        </form>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <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 dataTables_length">
                                        <button id="deleteSelected" class="btn bg-gradient-info mb-0 mr-2">Delete</button>
                                    </div>
                                </div>
                            </div>
                            @if(session('success'))
                            <div class="alert alert-success">
                                {{ session('success') }}
                            </div>
                        @endif
                        
                            <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 opacity-7" for="selectAll" style="color: #344767 !important;font-size: 13px !important; font-weight: 700 !important;">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 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 ($categories as $category)
                                        <tr>
                                            <td>
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" id="checkbox{{ $category->id }}" name="category[]" value="{{ $category->id }}">
                                                    <label class="form-check-label" for="checkbox{{ $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">
                                                    <h6 class="mb-0 text-sm">{{ $category->category_name }}</h6>
                                                </div>
                                            </td>
                                            <td>
                                                <h6 style="margin-bottom: 0px !important;">
                                                    @if ($category->category_status == 1)
                                                        <span class="badge bg-success">Active</span></h6>
                                                    @else
                                                        <span class="badge bg-danger">InActive</span></h6>
                                                    @endif
                                            </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" style="display: inline-block;"
                                                            href="{{ route('admin.categories.edit', $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 delete-record" data-record-id="{{ $category->id }}" href="#">Delete</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{{ $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> --}}
                                                </ul>
                                            </td>
                                        </tr>
                                        <div class="modal fade" id="exampleModal{{ $category->id }}" tabindex="-1" aria-labelledby="exampleModalLabel{{ $category->id }}" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <form action="{{ route('admin.update.category.status', ['id' => $category->id]) }}" method="POST">
                                                        @csrf
                                                        <div class="modal-body pb-0">
                                                            <h1 class="modal-title fs-5 mb-3" id="exampleModalLabel{{ $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{{ $category->id }}" name="status" value="1" @if($category->category_status == 1) checked @endif>
                                                                <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxYes{{ $category->id }}">Active</label>
                                                            </div>
                                                            <div class="form-check form-check-inline">
                                                                <input class="form-check-input" type="radio" id="inlineCheckboxNo{{ $category->id }}" name="status" value="2" @if($category->category_status == 2) checked @endif>
                                                                <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxNo{{ $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>
    
    // Initialize DataTable when the document is ready
        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
            });
    
    
      $(document).ready(function() {
        $('#selectAll').change(function() {
            $('input[name="category[]"]').prop('checked', this.checked);
        });

        $('#deleteSelected').on('click', function() {
              const selectedIds = $('input[name="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.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");
                          }
                      });
                  }
              });
        });
    
         // 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.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 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",
        //                         });
        //                     }
        //                 });
        //             }
        //         });
        // });
    });
</script>
@endsection