@include('hk.header')

<div class="content-wrapper">
  <section class="content-header">
    <div class="container-fluid">
      <div class="mb-2 row">
        <div class="col-sm-6">
          <h1>{{$category->name}} {{$page_title??''}}</h1>
        </div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">{{$page_title??''}}</li>
          </ol>
        </div>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-body">

              <div class="row">
                <div class="mb-3 col-md-3">
                  <a href="/subcategories/add/{{$category->id}}" class="mb-2 btn btn-primary">Add SubCategory</a>
                </div>

                <div class="mb-3 col-md-6">
                  <form method="GET" action="/subcategories/{{$category->id}}">
                    <div class="input-group">
                      <input type="text" name="search" class="form-control" placeholder="Search by SubCategory name" value="{{ request('search') }}">
                      <button type="submit" class="btn btn-primary">Search</button>
                    </div>
                  </form>
                </div>
              </div>

              {{-- BULK ACTION BAR --}}
              <form id="bulkMoveForm" method="POST" action="{{ route('subcategories.bulk-move') }}">
                @csrf
                <div class="mb-3 row align-items-end g-2">
                  <div class="col-md-4">
                    <label class="form-label fw-bold">Change main category of selected subcategories to:</label>
                    <select name="new_category_id" id="new_category_id" class="form-control" required>
                      <option value="">-- Select Main Category --</option>
                      @foreach($allCategories as $cat)
                        <option value="{{ $cat->id }}" {{ $cat->id == $category->id ? '' : '' }}>
                          {{ $cat->name }}
                        </option>
                      @endforeach
                    </select>
                  </div>
                  <div class="col-md-3">
                    <button type="submit" id="applyBulkMove" class="btn btn-success" disabled>
                      Apply to Selected
                    </button>
                  </div>
                </div>

                <table id="example1" class="table align-middle table-bordered table-striped">
                  <thead>
                    <tr>
                      <th style="width:40px;">
                        <input type="checkbox" id="select_all">
                      </th>
                      <th>ID</th>
                      <th>Image</th>
                      <th>SubCategory name</th>
                      <th>Order</th>
                      <th>Status</th>
                      <th>Created by</th>
                      <th>Action</th>
                      <th>Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    @foreach($subcategories as $row)
                      <tr>
                        <td>
                          <input type="checkbox" class="row_check" name="subcategory_ids[]" value="{{ $row->id }}">
                        </td>
                        <td>{{ $row->id }}</td>
                        <td><img src="http://tradevyapar.com/uploads/subcategories/{{ $row->image }}" height="70"></td>
                        <td>{{ $row->name }}</td>
                        <td>{{ $row->sort_order }}</td>
                        <td>{{ ($row->status==1)?'Active':'Inactive' }}</td>
                        <td>{{ $row->created_by ? $row->createdBy->name : '' }}</td>
                        <td><a href="/subcategories/{{ $category->id }}/edit/{{ $row->id }}" class="btn btn-primary btn-sm">Edit</a></td>
                        <td><a href="/subcategories/{{ $category->id }}/del/{{ $row->id }}" class="btn btn-danger btn-sm">Delete</a></td>
                      </tr>
                    @endforeach
                  </tbody>
                </table>
              </form>

              {{-- Pagination if needed --}}
              {{-- <div class="mt-3 pagination">
                {{ $subcategories->links('pagination::bootstrap-5') }}
              </div> --}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

<footer class="main-footer">
  <strong>Copyright &copy; 2025 <a href="/">Shop</a>.</strong> All rights reserved.
</footer>

<script src="{{asset('adminlte/plugins/jquery/jquery.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.bootstrap4.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/jszip/jszip.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/pdfmake/pdfmake.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/pdfmake/vfs_fonts.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.html5.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.print.min.js')}}"></script>
<script src="{{asset('adminlte/plugins/datatables-buttons/js/buttons.colVis.min.js')}}"></script>

<script>
  // Optional: initialize DataTable (kept simple so checkboxes work)
  $(function () {
    $("#example1").DataTable({
      responsive: true,
      autoWidth: false,
      // keep ordering/search; avoid re-rendering checkbox column IDs
    });
  });

  // Select all logic
  $(document).on('change', '#select_all', function() {
    $('.row_check').prop('checked', this.checked);
    toggleApplyButton();
  });

  $(document).on('change', '.row_check', function() {
    const all = $('.row_check').length;
    const checked = $('.row_check:checked').length;
    $('#select_all').prop('checked', all === checked);
    toggleApplyButton();
  });

  function toggleApplyButton() {
    const anyChecked = $('.row_check:checked').length > 0;
    $('#applyBulkMove').prop('disabled', !anyChecked);
  }

  // Confirm before submit
  $('#bulkMoveForm').on('submit', function(e) {
    const targetCat = $('#new_category_id').val();
    const count = $('.row_check:checked').length;
    if (!targetCat) {
      e.preventDefault();
      alert('Please select a main category to move into.');
      return;
    }
    if (count === 0) {
      e.preventDefault();
      alert('Please select at least one subcategory.');
      return;
    }
    if (!confirm('Move ' + count + ' subcategory(ies) to the selected main category?')) {
      e.preventDefault();
    }
  });
</script>