@extends('layouts.app')

 @section('breadcrumb', Breadcrumbs::render('serviceprovider-list'))
@section('content')   
<section class="card">  
<div class="">
      <div id="append-filter-text"></div>
    </div>
    <div class="row p-2">
    <div class="col-md-12">
      <header class="card-header bold d-flex justify-content-between px-2 pt-2 pb-3">
          <div>Service providers</div>
        
          <div class="">
              {{-- <button class="btn btn-sm btn-dark"><i class="fas fa-download"></i> Export</button>
              --}}
             
              
              
              {{-- <button data-toggle="collapse" data-target="#collapse-table-filter-distributor-list" aria-expanded="false" aria-controls="collapse-table-filter-distributor-list" type="button" class="btn btn-sm btn-secondary mr-1"><i class="fa fa-filter"></i> Filter</button>
                --}}             
             
              <a href="{{route('create_serviceprovider')}}" class="btn btn-sm btn-dark text-white"><i class="fa fa-plus"></i> Create new</a>
             
          </div>
        
      </header>
    </div>
    
  
    
     </div>
    <div class="px-4 bg-light" id="filter-datatable-block__distributor-list">
      <div class="collapse mb-4 mt-4" id="collapse-table-filter-distributor-list">
        <div class="">
            <div class="row">
                
                <div class="col-md-3">
                    <div class="form-group">
                        <label>{{__('fields.created_by')}}</label>
                        <select data-name="created by" class="form-control get-created-user" name="category_created_by">
                            <option value="">- Created by -</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label>{{__('fields.created_at')}}</label>
                        <input data-name="created at" name="category_created_at" class="datepicker form-control" placeholder="Date" />
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-2 text-right">
          <button data-type="datatable" data-table="distributor-list" class="btn btn-info btn-sm reset-datatable-filter">Clear</button>
          <button data-type="datatable" data-table="distributor-list" class="btn btn-dark btn-sm datatable-filter-find">Submit</button>
        </div>
      </div>
    </div>
        <x-Datatable 
            id="tbl-serviceproviders"
            headers="Name,Email,Phone"
            createUrl="create_serviceprovider"
            filter="false"            
            create="false"
            hiddenHeaders="created by"
            title="Service providers" 
                     
        >          
      </x-Datatable>   
</section>       

@endsection
@section('script')
<script src="{{asset('modules/admin/serviceprovider/datatable.js')}}"></script> 
@endsection