@php 

$sortedType = '';
$sortedValue = '';
if(isset($data['sortType']) && isset($data['sortValue']) && $records->count() > 0){
$sortedType = $data['sortType'];
$sortedValue = $data['sortValue'];
}

@endphp

<div class="row">
            <div class="col-sm-12">
            <table class="table table-striped table-sm sortByTableHeader" style="with:100%">
                <thead>
                    <tr> 
                       <th width="20%"> <span onclick="sortType(this)">Name&nbsp;<i class="@if($sortedType == "first_name" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "first_name" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="first_name"></i> </span></th>
                        <!--th width="15%" onclick="sortType(this)">Title <i class="@if($sortedType == "job_title" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "job_title" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="job_title"></i></th-->
                        <th width="10%"><span onclick="sortType(this)">Rate&nbsp;<i class="@if($sortedType == "rate" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "rate" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="rate"></i> </span></th>
                        <th width="10%"><span onclick="sortType(this)">Applications&nbsp;<i class="@if($sortedType == "requests_count" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "requests_count" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="requests_count"></i> </span> </th>
                        <th width="10%"><span onclick="sortType(this)">Experience&nbsp;<i class="@if($sortedType == "total_experience_years" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "total_experience_years" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="total_experience_years"></i> </span>  </th>
                        <th width="10%"><span onclick="sortType(this)">Available&nbsp;<i class="@if($sortedType == "available_date" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "available_date" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="available_date"></i></span> </th>
                        <th width="10%"><span onclick="sortType(this)">Notice&nbsp;<i class="@if($sortedType == "notice_period" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "notice_period" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="notice_period"></i> </span></th>
                        <!-- <th width="10%"><span onclick="sortType(this)">Passport Number&nbsp;<i class="@if($sortedType == "passport_number" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "passport_number" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="passport_number"></i> </span></th>
                        <th width="10%"><span onclick="sortType(this)">Pan Card Number&nbsp;<i class="@if($sortedType == "pan_number" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "pan_number" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="pan_number"></i> </span></th>
                        <th width="10%"><span onclick="sortType(this)">DOB&nbsp;<i class="@if($sortedType == "dob" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "dob" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="dob"></i> </span></th> -->
                        <th width="10%"><span onclick="sortType(this)">Location&nbsp;<i class="@if($sortedType == "location_preference" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "location_preference" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="location_preference"></i> </span></th>
                        <th width="10%"><span onclick="sortType(this)">Created&nbsp;<i class="@if($sortedType == "userDetail->name" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "created_at" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="created_by"></i> </span></th>
                        <th width="10%"><span onclick="sortType(this)">Date&nbsp;<i class="@if($sortedType == "created_at" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "created_at" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="created_at"></i></span></th>
                        <th width="5%">Action</th>
                    </tr>
                </thead>
                
                @if($records->count() > 0)
                <tbody>
                
                    @foreach($records as $record)
                    @php $detailUrl = url('marketplace/people/view/'.$record->person_id); @endphp

                    <tr>
        
                    <td><strong> <a href="javascript:;" onclick="getDetail('{{$detailUrl}}')">{{$record->first_name.' '.$record->middle_init.' '.$record->last_name}}</a></strong>&nbsp;<a href="{{$detailUrl}}" target="_blank"><i class="cil-external-link"></i></a><br/>{{$record->job_title}}</td>
                    <!--td>{{$record->job_title}}</td-->
                        <td>{{$record->rate_currency . ' ' . $record->rate . '/' . $record->rate_type}}</td>
                       <td>{{$record->requests_count}}</td>
                       <td>{{$record->total_experience_years}}</td>
                        <td>{{$record->available_date}}</td>
                        <td>{{$record->notice_period}}</td>
                        <!-- <td>{{$record->passport_number}}</td>
                        <td>{{$record->pan_number}}</td>
                        <td>{{$record->dob}}</td> -->
                        <td>{{$record->location_preference}}</td>
                        <td>{{$record->username}}</td>
                        <td>{{showTimeFormat($record->created_at, 'm/d/Y')}}</td>
                        <td>
                        <label class="c-switch c-switch-label c-switch c-switch-success">
                            <input class="c-switch-input" type="checkbox" value="{{$record->id}}" onchange="updateStatus(this)"  @if( $record->status == "Active"){{'checked=""'}}@endif><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                        </label>  
                        </td>
                    </tr> 
                    @endforeach
                </tbody>
                @else
                <tbody>
                 <tr class="odd"><td valign="top" colspan="13" class="dataTables_empty text-center">No matching records found</td></tr>
                </tbody>
                @endif
            </table>
            </div>
            </div>
            <div class="row">
            <input type="hidden" class="sortValue" value="{{$sortedValue}}">
            <input type="hidden" class="sortType" value="{{$sortedType}}">
                <div class="col-sm-12 col-md-5">
                    <div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">
                    Showing {{ $records->firstItem() }} to {{ $records->lastItem() }} of {{$records->total()}} entries
                    </div>
                </div>
                <div class="col-sm-12 col-md-7">
                    <div class="dataTables_paginate paging_simple_numbers float-right" id="peoplePagination">
                        {{$records->links('vendor.pagination.bootstrap-4')}}
                    </div>
                </div>
            </div>
        </div>