
<div>
    <div class="col-10 offset-1" wire:loading>
        <div >
            <div class="info-box shadow-lg">
                <div class="info-box-content">
                    <div class="skeleton skeleton-text short"></div>
                    <div class="skeleton skeleton-text short"></div>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table id="clients-table searchResultsCard" style="width:100%" class="table table-bordered table-hover table-striped">
                            <thead>
                            <tr>
                                <th> <div class="skeleton skeleton-text short"></div> </th>
                                <th> <div class="skeleton skeleton-text short"></div> </th>
                                <th> <div class="skeleton skeleton-text short"></div></th>
                                <th> <div class="skeleton skeleton-text short"></div> </th>
                                <th> <div class="skeleton skeleton-text short"></div> </th>
                                <th><div class="skeleton skeleton-text short"></div> </th>
                                <th> <div class="skeleton skeleton-text short"></div> </th>
                                <th> <div class="skeleton skeleton-text short"></div> </th>
                                <th> <div class="skeleton skeleton-text short"></div> </th>
                            </tr>
                            </thead>
                            <tbody>
                            <div class="skeleton skeleton-text short"></div>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-10 offset-1" wire:loading.remove>
        @php
            use Carbon\Carbon;
        @endphp

        @if(!is_null($humans))
            <div class="row">
                <x-adminlte-card theme="lightblue" theme-mode="outline">
                    <div>
                        <h5>Searched for: {{ $doctype }} record.</h5>
                        <small>Requested: </small>
                        <strong>{{ $search_count }} Record(s)</strong>
                    </div>
                    <div>
                        <small>Found: </small>
                        <strong class="text-success">{{ count($records_found) }}  Record(s)</strong>
                    </div>
                </x-adminlte-card>
            </div>
        @endif

        @if(!empty($records_not_found))
            <div class="info-box shadow-lg">
            <span class="info-box-icon bg-danger">
                <i class="fa fa-exclamation-triangle"></i>
            </span>
                <div class="info-box-content">
                    <span class="info-box-text">{{ count($records_not_found) }} not found !</span>
                    <div style="display: flex;">

                        @foreach($records_not_found as $record_not_found)
                            <span class="info-box-number record-not-found">
                        {{ $record_not_found }}
                        <i class="fa fa-exclamation-circle" style="color: red;"></i>
                      </span>
                        @endforeach

                    </div>
                </div>
            </div>
        @endif

        @if(!is_null($humans))
            @php
                switch ($doctype){
                   case 'ID':
                       $docNumTitle = 'Serial Number';
                   break;
                   case 'Birth':
                       $docNumTitle = 'Entry Number';
                   break;
                   case 'Passport':
                       $docNumTitle = 'Passport Number';
                   break;
                   default:
                       $docNumTitle='Doc Number';
                }

                $headings = [
                           'ID number',
                           $docNumTitle,
                           'First name',
                           'Other names',
                           'Sur name',
                           'Nationality',
                           'Gender',
                           'Date of birth',
                           'Action'
                       ];
                       $count=0;
            @endphp
            <x-adminlte-card>
                <x-adminlte-datatable id="clients-table searchResultsCard" :heads="$headings" striped hoverable bordered>

                    @foreach($humans as $human)
                        @foreach($human as $doc_human)
                            <tr>
                                <td><h4 class="text-black">{{ $doc_human['o_pid'] ?? '-' }}</h4></td>
                                <td><h4 class="text-info">{{ $serial_number[$count] ?? '-' }}</h4></td>
                                <td>{{ $doc_human['name'] ?? '-' }}</td>
                                <td>{{ $doc_human['last_name'] ?? '-' }}</td>
                                <td>{{ $doc_human['surn'] ?? '-' }}</td>
                                <td>KENYAN <span class="fi fi-ke" style="font-size: 1rem;"></span></td>
                                <td>{{ $doc_human['sex'] ?? '-' }}</td>
                                <td>
                                    {{ Carbon::parse($doc_human['date_birth'])->format("d-m-Y") ?? '-' }}
                                </td>
                                <td>
                                    <x-adminlte-button
                                        label="Details"
                                        theme="info"
                                        id="humanbtn"
                                        icon="fas fa-info-circle"
                                        wire:click="triggerResultsModal({{ $doc_human['o_pid'] ?? 0 }},'{{ $serial_number[$count] ?? 0 }}','{{ $doctype ?? 0 }}')"
                                        data-toggle="modal"
                                    />
                                </td>
                            </tr>
                            @php $count++; @endphp
                        @endforeach

                    @endforeach

                </x-adminlte-datatable>
            </x-adminlte-card>
        @endif

    </div >
</div>

