@extends('admin.layouts.dashboard')
@section('title', 'All Brands')
@section('content')
<!-- Main content -->
<section>
  <div class="container-fluid">
  <div class="row"> <div class="col-md-6 mt-3 mb-3" >  <h3 class="mb-2 main-heading">Brands</h3></div>
                               
<div class="col-md-6 mt-3 mb-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>

    <div class="row" id="ajaxSearchData">
                        <div class="col-lg-12">
                            
                            <div class="table-responsive shadow rounded-3 bg-white p-3">
                            <table class="table table-head-fixed text-nowrap" id="example">
                                <thead>
                                  <tr>
                                     <th>SNo</th>
                                    <th>Image</th>
                                    <th>Name</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                  </tr>
                                </thead>
                                <tbody>
                                  @if($brands->count() > 0)
                                    @foreach($brands as $key => $brand)
                                    <tr>
                                      <td>{{ $brands->firstItem() + $key }}</td>
                                      <td>
                                        <img class="" id="blah0" src="{{ !empty($brand->image) ? asset('storage/'.$brand->image) : '#' }}" alt="your image" width="20%" height="20%"/>
                                      </td>
                                      <td><a  style="text-decoration: underline!important; color:#000;" href="{{ route('admin.brands.edit', $brand->id) }}">{{ $brand->name }}</a></td>
                                      <td>
                                                      @if($brand->is_active)
                                                              @php $statusBtn = '<a title="Deactivate" href="'. route('change_status', ['type' => 'brand', 'id' => $brand->id, 'status' => '0']) .'" class=""><i class="fa fa-user-times text-red" aria-hidden="true"></i></a>' @endphp
                                                                  Active
                                                              @else
                                                                  @php $statusBtn = '<a title="Activate" href="'. route('change_status', ['type' => 'brand', 'id' => $brand->id, 'status' => '1']) .'" class=""><i class="fa fa-user-plus text-green" aria-hidden="true"></i></a>' @endphp
                                                                  Deactive
                                                              @endif
                                      </td>
                                      <td>
                                                              {!! $statusBtn !!}
                                                              {{-- <a style="text-decoration: underline;" href="{{ route('admin.categories.edit', $brand->id) }}"><span class=""><i class="fa fa-pencil-alt text-green" aria-hidden="true"></i></span></a> --}}
                                                              <!-- <button class="btn btn-warning" ><i class="fa fa-plus" aria-hidden="true"></i></button> -->
                                      </td>
                                    </tr>
                                    @endforeach
                                    <tr>
                    <td colspan="11">
                    {!! $brands->links() !!}
                    </td>
                </tr>
                                      @else
                                         <div class="text-center">
                                              <h3>No brand 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/brand/search") }}',
       data:{
        search:value,
        page:1
       },
       success:function(data) {
          $('#ajaxSearchData').html(data);
       },
       error:function(error){
        alert('error: ', error);
       }
    });

});
});

    
</script>