@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">
                        Items</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 class="col-md-7">
                            <a class="btn bg-gradient-info mb-3" style="float: right;margin-right:15px;" href="{{ route('admin.items.create') }}">Add
                                New Items</a>
                                <button id="exportCSV" class="btn bg-gradient-info mb-0 mr-2" style="margin-right: 15px;float: right">Export as CSV</button>
                            <button id="deleteSelected" class="btn bg-gradient-info mb-0 mr-2 ml-auto" style="margin-right: 15px;float: right">Delete</button>
                            
                            
                        </div>
                    </div>
                </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-start">
                                    
                                    <div class="d-flex align-items-center justify-content-between" style="margin-right: 15px;">
                                        <select class="form-select" id="categoryFilter" style="width: 185.6px;">
                                            <option selected="" value="">Choose Category</option>
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="d-flex align-items-center justify-content-between" style="margin-right: 15px;">
                                        <select class="form-select" id="subcategoryFilter" style="width: 185.6px;" disabled>
                                            <option selected="" value="">Choose Subcategory</option>
                                        </select>
                                    </div>
                                    <button type="reset" class="btn bg-gradient-info mb-0 mr-2" id="resetButton">Reset</button>
                                </div>
                                <div class="table-top-right">
                                    <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>
                            <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">
                                                Item Code</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Item Name</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                Brand</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Model</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">
                                                Serial No</th>
                                            <th
                                                class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">
                                                Unit Type</th>
                                            <th style="display: none"></th>
                                            <th style="display: none"></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 ($items as $item)
                                      <tr>
                                        <td>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="checkbox{{ $item->id }}" name="item[]" value="{{ $item->id }}">
                                                <label class="form-check-label" for="checkbox{{ $item->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">{{ $item->item_code }}</h6>
                                            </div>
                                        </td>
                                        <td>
                                            <p class="text-xs font-weight-bold mb-0">{{ $item->item_title }}</p>
                                        </td>
                                        <td>
                                            @php
                                                $brandName = App\Models\Brand::where('id', $item->brand_type)->value('brand_name');
                                            @endphp
                                            <p class="text-xs font-weight-bold mb-0">{{ $brandName }}</p>
                                        </td>
                                        <td>
                                            <p class="text-xs font-weight-bold mb-0">{{ $item->model }}</p>
                                        </td>
                                        <td>
                                            <p class="text-xs font-weight-bold mb-0">{{ $item->serial_no }}</p>
                                        </td>
                                        <td>
                                            <p class="text-xs font-weight-bold mb-0">{{ $item->unit_type }}</p>
                                        </td>
                                        <td style="display: none">
                                            <p class="text-xs font-weight-bold mb-0">{{ $item->category_id }}</p>
                                        </td>
                                        <td style="display: none">
                                            <p class="text-xs font-weight-bold mb-0">{{ $item->sub_category_id }}</p>
                                        </td>
                                        <td>
                                            <h6 style="margin-bottom: 0px !important;">
                                                @if ($item->status == 1)
                                                    <span class="badge bg-success">Active</span>
                                                @else
                                                    <span class="badge bg-danger">InActive</span>
                                                @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.items.edit', $item->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{{ $item->id }}"
                                                        href="#">Change Status</a>
                                                </li>
                                            </ul>
                                        </td>
                                    </tr>
                                    <div class="modal fade" id="exampleModal{{ $item->id }}" tabindex="-1" aria-labelledby="exampleModalLabel{{ $item->id }}" aria-hidden="true">
                                        <div class="modal-dialog">
                                            <div class="modal-content">
                                                <form action="{{ route('admin.item.update.status', ['id' => $item->id]) }}" method="POST">
                                                    @csrf
                                                    <div class="modal-body pb-0">
                                                        <h1 class="modal-title fs-5 mb-3" id="exampleModalLabel{{ $item->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{{ $item->id }}" name="status" value="1" @if($item->status == 1) checked @endif>
                                                            <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxYes{{ $item->id }}">Active</label>
                                                        </div>
                                                        <div class="form-check form-check-inline">
                                                            <input class="form-check-input" type="radio" id="inlineCheckboxNo{{ $item->id }}" name="status" value="2" @if($item->status == 2) checked @endif>
                                                            <label class="form-check-label" style="font-weight: 600;" for="inlineCheckboxNo{{ $item->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 change the status ?</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>
                </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">Ok</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
                });
                
       // Add an event listener for the category select



             // Add event listeners for category and subcategory filters
            $('#categoryFilter').on('change', function () {
                const categoryId = $(this).val();
                
                // Enable the subcategory dropdown
                $('#subcategoryFilter').prop('disabled', false);
                
                // Clear existing subcategory options
                $('#subcategoryFilter').empty();
                
                // Add the default "Choose Subcategory" option
                $('#subcategoryFilter').append('<option selected="" value="">Choose Subcategory</option>');
                
                // Populate the subcategory dropdown with related subcategories
                @foreach ($subCategories as $subcategory)
                    if ("{{ $subcategory->category_id }}" === categoryId) {
                        $('#subcategoryFilter').append('<option value="{{ $subcategory->id }}">{{ $subcategory->sub_category_name }}</option>');
                    }
                @endforeach
                
                // Use DataTables' column().search() API to filter the table by category
                // table.column(8).search(categoryId).draw(); // 8 is the index of the Category ID column
            });

            $('#subcategoryFilter').on('change', function () {
                const subcategoryId = $(this).val();
                
                // Use DataTables' column().search() API to filter the table by subcategory
                table.column(9).search(subcategoryId).draw(); // 9 is the index of the Subcategory ID column
            });

            // $('#categoryFilter').on('change', function () {
            //     const selectedCategory = $(this).val();

            //     // Clear the previous search and draw the table
            //     table.search('').draw();

            //     // If a category is selected, filter the table rows
            //     if (selectedCategory) {
                    
            //         table
            //             .column(0) // Assuming category is in the first column (adjust as needed)
            //             .search(selectedCategory) // Search for the selected category
            //             .draw(); // Redraw the table
            //     }
            // });

            $('#categoryFilter').on('change', function () {
                // Get the selected date
                const selectedDate = this.value;

                // Filter the table based on the selected date
                table.column(8).search(selectedDate).draw();
            });


    $(document).ready(function() {

        document.getElementById("resetButton").addEventListener("click", function() {
            window.location.href = "{{ route('admin.items.index') }}";
        });

          $('#selectAll').change(function() {
              $('input[name="item[]"]').prop('checked', this.checked);
          });
      
          // Handle delete button click
          $('#deleteSelected').on('click', function() {
              const selectedIds = $('input[name="item[]"]: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.item-listing.delete-selected') }}',
                          type: 'POST',
                          data: {
                              selectedIds: selectedIds,
                              _token: '{{ csrf_token() }}',
                          },
                          success: function(response) {
                              if (response.success) {
                                  // Handle successful deletion
                                  swal("Success", "Selected records deleted successfully.", "success");
                                  location.reload();
                                  // You can also refresh the DataTable or update the table as needed.
                                  // For example: table.ajax.reload();
                              } else {
                                  swal("Error", "Failed to delete selected records.", "error");
                              }
                          },
                          error: function() {
                              swal("Error", "An error occurred while deleting records.", "error");
                          }
                      });
                  }
              });
        });
      
      // Handle export CSV button click
      $('#exportCSV').on('click', function() {
          const selectedIds = $('input[name="item[]"]:checked').map(function() {
              return this.value;
          }).get();
      
          if (selectedIds.length === 0) {
              alert('Please select at least one record to export as CSV.');
              return;
          }
      
          // Send a request to the export route
          $.ajax({
              url: '{{ route('admin.item-listing.export-csv') }}',
              type: 'POST',
              data: {
                  selectedIds: selectedIds,
                  _token: '{{ csrf_token() }}', // Include CSRF token for Laravel
              },
              xhrFields: {
                  responseType: 'blob' // Ensure the response is treated as a blob
              },
              success: function(response, status, xhr) {
                  if (response.size > 0) {
                      // Create a blob URL and initiate the download
                      const blob = new Blob([response], { type: 'text/csv' });
                      const url = window.URL.createObjectURL(blob);
                      const a = document.createElement('a');
                      a.href = url;
                      a.download = 'selected_records.csv';
                      a.style.display = 'none';
                      document.body.appendChild(a);
                      a.click();
                      window.URL.revokeObjectURL(url);
                      document.body.removeChild(a);
                  } else {
                      alert('Failed to export CSV.');
                  }
              },
              error: function() {
                  alert('An error occurred while exporting CSV.');
              }
          });
      });
      });
      
    
</script>
@endsection