@extends('admin.layouts.dashboard')
@section('title', 'All Sub Categories')
@section('content')
<!-- Main content -->
<section>
  <div class="container-fluid">
                
  <div class="row">            
  <div class="col-md-6 mb-3 mt-3"> <h3 class="mb-2 main-heading">Sub Categories</h3></div>
  <div class="col-md-6  mb-3 mt-3">
  <div class="input-group rounded-2 border-0">
           <input type="" class="form-control" name="search" value="" id="ajaxSearchItem" placeholder="Search..">
           <div class="input-group-append">
                <button class="btn btn-primary search-btn" type="button">
                    <i class="fas fa-search fa-sm"></i>
                </button>
            </div> 
          </div>
  </div></div>
   <!-- Success Message -->
   @if(session('success'))
            <div class="alert alert-success">
                {{ session('success') }}
            </div>
        @endif

    <div class="row" id="ajaxSearchData">
                        <div class="col-lg-12">
                            
                            <div class="table-responsive bg-white shadow rounded-3 p-3">
                            <table class="table table-head-fixed text-nowrap" id="example" id="example">
                                <thead>
                                  <tr>
                                    <th>#</th>
                                    <th>Category</th>
                                    <th>Name</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  @if($categories->count() > 0)
                                    @foreach($categories as $key =>$category)
                                    
                                    <tr>
                                      <td>{{ $categories->firstItem() + $key }}</td>
                                      <td> {{ $category->category ? $category->category->name : 'No Category' }}</td>
                                      <td>{{ $category->name }}</td>
                                      <td>
                                      @if($category->is_active)
                          @php $statusBtn = '<a title="Deactivate" href="'. route('change_status', ['type' => 'subcategory', 'id' => $category->id, 'status' => '0']) .'" class="btn btn-danger btn-sm"><i class="fa fa-user-times" aria-hidden="true"></i></a>' @endphp
                              Active
                          @else
                              @php $statusBtn = '<a title="Activate" href="'. route('change_status', ['type' => 'subcategory', 'id' => $category->id, 'status' => '1']) .'" class="btn btn-success btn-sm"><i class="fa fa-user-plus" aria-hidden="true"></i></a>' @endphp
                              Deactive
                          @endif
                                      </td>
                                      <td>
                                      {!! $statusBtn !!}
                                              <a style="text-decoration: underline;" href="{{ route('admin.subcategories.edit', $category->id) }}"><span class="btn btn-warning"><i class="fa fa-pencil-alt" aria-hidden="true"></i></span></a>
                                              <!-- <button class="btn btn-warning" ><i class="fa fa-plus" aria-hidden="true"></i></button> -->
                                              <form action="{{ route('admin.subcategories.destroy', $category->id) }}" method="POST" style="display:inline-block;">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger"
                                                    onclick="return confirm('Are you sure you want to delete this subcategory?')">
                                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                                </button>
                                            </form>
                                      </td>
                                    </tr>
                                    @endforeach
                                    <td colspan="11" class="text-end">
                    {!! $categories->links() !!}
                    </td>
                </tr>
                                      @else
                                         <div class="text-center">
                                              <h3>No subcategory Found</h3>
                                         </div>
                                      @endif
                                
                                        </table>
                            </div>
                        </div>
                    </div>
                </div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.1/js/jquery.dataTables.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/dataTables.buttons.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.html5.min.js" defer></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.0/js/buttons.print.min.js" defer></script> -->

<!-- jquery-validation Js -->
<script src="{{asset('vroom/assets/js/plugins/jquery.validate.min.js')}}"></script>
<!-- form-picker-custom Js -->
<script src="{{asset('vroom/assets/js/pages/form-validation.js')}}"></script>


<script>
   $(document).ready(function(){


$('#ajaxSearchItem').keyup(function(){
    var value = $(this).val();
   
 
    $.ajax({
       type:'GET',
       url:'{{ url("admin/subcategory/search") }}',
       data:{
        search:value,
        page:1
       },
       success:function(data) {
          $('#ajaxSearchData').html(data);
       },
       error:function(error){
        alert('error: ', error);
       }
    });

});
});

    
</script>