@php 

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




$calloutColors = ['c-callout-info', 'c-callout-danger', 'c-callout-warning', 'c-callout-success', 'c-callout-primary'];

$key = 0;
$appStatus = ['Scheduled', 'Completed', 'Cancelled'];

@endphp
<div class="row ">
@foreach($appStatus as $status)
@php 
$interviewsRecords = interviewCounts($data, ['statusCount' => $status]);
@endphp
@if($interviewsRecords == 0)
@php continue; @endphp
@endif
  <div class="col-sm-2">
    <a href="javascript:;" class="text-decoration-none" onclick="applyStatusFilters('{{$status}}')">
    <div class="c-callout b-t-1 b-r-1 b-b-1 {{$calloutColors[$key]}}">
      <small class="text-muted">{{$status}}</small><br>
      <strong class="h4">{{$interviewsRecords}}</strong>
    </div>
    </a>
  </div>

  
  @endforeach

</div><!--/.row-->

<div class="row">
            <div class="col-sm-12">
            <table class="table table-striped table-sm sortByTableHeader" style="with:100%">
                <thead>
                    <tr> 
                        <th><span onclick="sortType(this)">Date&nbsp;<i class="@if($sortedType == "interview_date" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "interview_date" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="interview_date"></i> </span></th>
                        <th><span onclick="sortType(this)">Time&nbsp;<i class="@if($sortedType == "interview_time" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "interview_time" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="interview_time"></i> </span></th>
                        <th><span onclick="sortType(this)">Timezone&nbsp;<i class="@if($sortedType == "interview_timezone" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "interview_timezone" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="interview_timezone"></i> </span> </th>
                        <th><span onclick="sortType(this)">Duration&nbsp;<i class="@if($sortedType == "interview_duration" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "interview_duration" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="interview_duration"></i></span> </th>
                        <th><span onclick="sortType(this)">Scheduled By&nbsp;<i class="@if($sortedType == "scheduled_by" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "scheduled_by" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="scheduled_by"></i></span> </th>
                        <th><span onclick="sortType(this)">Interviewer&nbsp;<i class="@if($sortedType == "interviewer_name" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "interviewer_name" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="interviewer_name"></i></span> </th>
                        <th><span onclick="sortType(this)">Candidate&nbsp;<i class="@if($sortedType == "name" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "name" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="name"></i></span> </th>
                        <th><span onclick="sortType(this)">Job Application&nbsp;<i class="@if($sortedType == "application_name" && $sortedValue == "desc"){{'cil-data-transfer-up'}}@else{{'cil-data-transfer-down'}}@endif" data-sort="@if($sortedType == "application_name" && $sortedValue == "desc"){{'asc'}}@else{{'desc'}}@endif" data-name="application_name"></i> </span></th>
                        <th>Completed?</th>
                    </tr>
                </thead>
                <!-- // -->
                @if($records->count() > 0)
                <tbody>
                    @foreach($records as $record)
                    @php $detailUrl = route('applications.show', $record->application_id); 
                    $candidateDetailUrl = '';
                    if($record->person_id){
                        $candidateDetailUrl = url('marketplace/people/view/'.$record->person_id);
                    }
                      
                    @endphp

                    <tr>
                        <td><strong> <a href="javascript:;" onclick="openFilterPopup('{{$record->id}}')">{{showTimeFormat($record->interview_date, 'm/d/Y')}}</a></strong></td>
                        <td>{{$record->interview_time}}</td>
                        <td>{{$record->interview_timezone}}</td>
                        <td>{{$record->interview_duration}}</td>
                        <td>{{$record->scheduled_by}}</td>
                        <td>{{$record->interviewer_name}}</td>
                        <td>@if($candidateDetailUrl)<a href="{{$candidateDetailUrl}}">{{$record->person_name}}</a>@endif</td>
                        <td><a href="{{$detailUrl}}">{{$record->application_name}}</a></td>
                        <td>
                        <div class="sortingAction text-center p-0 m-0">                                        
                            <label class="c-switch c-switch-label c-switch-opposite c-switch c-switch-success">                        
                                <input class="c-switch-input p-0 m-0" type="checkbox" name="completed" value="true" @if($record->status == 'Completed'){{'checked'}}@endif onchange="updateStatus('{{$record->id}}', this)"  ><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                            </label><br/>
                        </div>
                        </td>

                    </tr> 
                    @endforeach
                </tbody>
                @else
                <tbody>
                 <tr class="odd"><td valign="top" colspan="9" 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="companyPagination">
                        {{$records->links('vendor.pagination.bootstrap-4')}}
                    </div>
                </div>
            </div>
        </div>