@php use Carbon\Carbon;
 @endphp
<div class="row">
    <div class="col-2">
        <div class="row">
            <x-adminlte-card>
                @if($modalStatus)
                    <img class="card-img-top"
                         src="{{ asset('../images/passport-photo.jpg') }}" alt="Card image cap">
                @else
                    <div class="skeleton skeleton-text short skeleton-img"></div>
                @endif
            </x-adminlte-card>
            <div class="row" style="width: 100%;">

                @if($doctype == 'Birth')
                    @if($role->hasPermissionTo("Basic View Birth Details"))
                    <div class="col-12 text-center">
                        @if(isset($human))
                            <small class="">Birth Entry Number</small>
                            <h4 class="upi">{{ $serialNum }}</h4>
                        @else
                            <div class="skeleton skeleton-text short"></div>
                        @endif
                    </div>
                    <div class="col-12 text-center">
                        @if(isset($human))
                            <small class="">Country of Birth</small>
                            <p class="card-text">KEN </p>
                            <span class="fi fi-ke" style="font-size: 2rem;"></span>
                        @else
                            <div class="skeleton skeleton-text short"></div>
                        @endif
                    </div>
                    @endif
                @endif

                @if($doctype == 'ID')
                    @if($role->hasPermissionTo("Basic View ID Details"))
                        <div class="col-12 text-center">
                            @if(isset($human->o_pid))
                                <small class="">UPI Number</small>
                                <h4 class="upi">{{ $human->o_pid }}</h4>
                            @else
                                <div class="skeleton skeleton-text short"></div>
                            @endif
                        </div>

                        <div class="col-12 text-center">
                            @if(isset($human->o_pid))
                                <small class="">Country of Birth</small>
                                <p class="card-text">{{ $human->birth_country }} </p>
                                <span class="fi fi-ke" style="font-size: 2rem;"></span>
                            @else
                                <div class="skeleton skeleton-text short"></div>
                            @endif
                        </div>
                    @endif
               @endif

            </div>
        </div>

    </div>

    <div class="col-6" style="padding-left: 27px;">
        @if($role->hasAnyPermission(["Basic View ID Details", "Basic View Passport Details", "Basic View Birth Details"]))
        <p>Citizen's Information</p>
        <div class="cardLine"></div>
        <div class="row">
            <div class="col-6">
                <small>First name</small>
                @if(isset($human->name))
                    <p class="field-value">{{ $human->name }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            <div class="col-6">
                <small>Sur name</small>
                @if(isset($human->surn))
                    <p class="field-value">{{ $human->surn }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            <div class="col-6">
                <small>Other name</small>
                @if(isset($human->last_name))
                    <p class="field-value">{{ $human->last_name }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>

            <div class="col-6">
            </div>

            <div class="col-6">
                <small>Date of Birth</small>
                @if(isset($human->date_birth))
                    <p class="field-value">{{ Carbon::parse($human->date_birth)->format("d-m-Y") }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            <div class="col-6">
                <small>Gender</small>
                @if(isset($human->sex))
                    <p class="field-value">{{ $human->sex }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>

            @if($doctype == 'ID')
                @if($role->hasPermissionTo("Basic View ID Family"))
            <div class="col-6">
                <small>Family</small>
                @if(isset($human->family))
                    <p class="field-value">{{ $human->family }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
                @endif
                    @if($role->hasPermissionTo("Basic View ID Clan"))
            <div class="col-6">
                <small>Clan</small>
                @if(isset($human->clan))
                    <p class="field-value">{{ $human->clan }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            @endif
            @endif
        </div>
        @endif
        @if($doctype == 'Birth')
        @if($role->hasPermissionTo("Basic View Birth Details"))
        <p>Parent(s) Information</p>
        <div class="cardLine2"></div>
        <div class="row">
                <div class="col-8">
                    <small>Mother</small>
                    @if(isset($docums[0]['M_NAME']))
                        <p class="field-value">
                            <i class="fas fa-female" style="color: #008500;"></i>
                            {{ $docums[0]['M_NAME'] }} {{ $docums[0]['M_OTHNAME'] }} {{ $docums[0]['M_SURN'] }}
                        </p>
                    @else
                        <div class="skeleton skeleton-text short"></div>
                    @endif
                </div>
            @if($role->hasPermissionTo("Basic View Birth Mother ID number"))
                <div class="col-4">
                    <small>ID no.</small>
                    @if(isset($docums[0]['MOTHER_DOC_NUMBER']))
                        <p class="field-value">
                           {{ $docums[0]['MOTHER_DOC_NUMBER'] }}
                        </p>
                    @else
                        <div class="skeleton skeleton-text short"></div>
                    @endif
                </div>
            @endif
                <div class="col-8">
                    <small>Father</small>
                    @if(isset($docums[0]['F_NAME']))
                        <p class="field-value">
                            <i class="fas fa-male" style="color: #008500;"></i>
                            {{ $docums[0]['F_NAME'] }} {{ $docums[0]['F_OTHNAME'] }} {{ $docums[0]['F_SURN'] }}
                        </p>
                    @else
                        <div class="skeleton skeleton-text short"></div>
                    @endif
                </div>
            @if($role->hasPermissionTo("Basic View Birth Father ID number"))
                <div class="col-4">
                    @if(isset($docums[0]['F_NAME']))
                    <small>ID no.</small>
                        -
                    @endif
                </div>
            @endif
        </div>
        @endif
        @endif
        @if($role->hasAnyPermission(["Basic View ID Details", "Basic View Passport Details", "Basic View Birth Details"]))
        <p>Location</p>
        <div class="cardLine2"></div>
        <div class="row">

            @if($doctype == 'Birth')
                <div class="col-6">
                    <small>District</small>
                    @if(isset($human->addressBirth->adresComp))
                        <p class="field-value">{{ $human->addressBirth->adresComp->name }}</p>
                    @else
                        <div class="skeleton skeleton-text short"></div>
                    @endif
                </div>
                <div class="col-6">
                    <small>Division</small>
                    <p class="field-value">-</p>
                </div>
            @endif

            @if($doctype == 'ID')
            <div class="col-6">
                <small>District</small>
                @if(isset($human->addressLive->adresComp->name))
                    <p class="field-value">{{ $human->addressLive->adresComp->name }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            <div class="col-6">
                <small>Division</small>
                <p class="field-value">-</p>
            </div>
            <div class="col-6">
                <small>Location</small>
                @if(isset($human->addressLive->addressLocation->name))
                    <p class="field-value">{{ $human->addressLive->addressLocation->name }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            <div class="col-6">
                <small>Sub Location</small>
                @if(isset($human->addressLive->sublocat))
                    <p class="field-value">{{ $human->addressLive->sublocat }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            @if($role->hasAnyPermission(["Basic View ID Place of Residence","Basic View Birth Place of Residence","Basic View Passport Place of Residence"]))
            <div class="col-6">
                <small>Village</small>
                @if(isset($human->addressLive->village))
                    <p class="field-value">{{ $human->addressLive->village }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            <div class="col-6">
                <small>Home Address</small>
                @if(isset($human->addressLive->home_adr))
                    <p class="field-value">{{ $human->addressLive->home_adr }}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            @endif
            @endif

        </div>
        @endif
    </div>

    <div class="col-4">
        <div class="row">
            <p>Document Information</p>
            <div class="cardLine"></div>
            <div class="row" style="width: 100%;">
                <div class="col-12">
                    @php
                        if($doctype == 'Birth'){
                            $tbl_doc='Entry No.';
                        }else{
                            $tbl_doc='Serial No.';
                        }
                        $headings = [
                            'ID No.',
                            $tbl_doc,
                            'Issued on.',
                            'Status.'
                        ];
                        $count=0;
                    @endphp
                    <x-adminlte-datatable id="clients-table searchResultsCard" :heads="$headings">
                                <tr>
                                    <td>
                                        @if(isset($docums[0]['O_PID']))
                                            <p class="field-value">{{ $docums[0]['O_PID'] }}</p>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
                                        @if(isset($docums[0]['SER_NUM']))
                                            <p class="field-value">{{ $docums[0]['SER_NUM'] }}</p>
                                        @else
                                            <div class="skeleton skeleton-text short"></div>
                                        @endif
                                    </td>
                                    <td>
                                        @if(isset($docums[0]['O_DATE']))
                                            {{ Carbon::parse($human->data_scan)->format("d-m-Y") }}
                                        @else
                                            <div class="skeleton skeleton-text short"></div>
                                        @endif
                                    </td>
                                    <td>
                                        @if(isset($docums[0]['SER_NUM']))
                                            <span class="badge badge-success">
                                            <i class="fa fa-check-circle"></i>Current</span>
                                        @else
                                            <div class="skeleton skeleton-text short"></div>
                                        @endif
                                    </td>
                                </tr>

                          @if(isset($docums))<p>Replaced: <strong>{{ count($docums)-1 }}</strong> times</p>@endif

                    </x-adminlte-datatable>
                </div>
            </div>
        </div>
    </div>

    <style>
        .skeleton-img{
            padding: 8rem;
        }
        .skeleton {
            animation: shimmer 1.5s infinite;
            background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
            background-size: 1000px 100%;
            position: relative;
        }

        @keyframes shimmer {
            0% {
                background-position: -1000px 0;
            }
            100% {
                background-position: 1000px 0;
            }
        }

        .skeleton-text {
            height: 30px;
            width: 100%;
            margin: 6px 0;
            background-color: #f0f0f0;
        }

        .skeleton-text.short {
            width: 50%;
        }

        .skeleton-card {
            padding: 16px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 16px;
        }

        .skeleton-table {
            width: 100%;
            border-collapse: collapse;
        }
        .skeleton-tabs{
            width: 5rem;
        }
        .skeleton-table th, .skeleton-table td {
            padding: 8px;
            border: 1px solid #ddd;
        }
    </style>
</div>
