@php use Carbon\Carbon;
 @endphp

@foreach($passport as $human_passport)
<div class="row">
    <div class="col-2">
        <div class="row">
            <x-adminlte-card>
                @if($modalStatus)
                    <img class="card-img-top"
                         src="{{ asset('../images/imgplaceholder.png') }}" 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($role->hasPermissionTo("Basic View ID Details"))
                        <div class="col-12 text-center">
                            @if(isset($human_passport->identity_card_no))
                                <small class="">UPI Number</small>
                                <h4 class="upi">{{ $human_passport->identity_card_no }}</h4>
                            @else
                                <div class="skeleton skeleton-text short"></div>
                            @endif
                        </div>

                        <div class="col-12 text-center">
                            @if(isset($human_passport->identity_card_no))
                                <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

            </div>
        </div>

            @if($role->hasPermissionTo("Basic View ID Details"))
                <div class="row">
                    @if(isset($human_passport->identity_card_no))
                        <x-adminlte-card style="margin: 1rem auto;">
                            <img class="card-img-top" height="100"
                                 src="{{ asset('../images/fingerprints/biometric.png') }}" alt="Card image cap">
                        </x-adminlte-card>
                    @else
                        <div class="skeleton skeleton-text short"></div>
                    @endif
                </div>
            @endif

    </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>Passport Information</p>
        <div class="cardLine"></div>
        <div class="row">
            <div class="col-6">
                <small>First names</small>
                @if(isset($human_passport->first_names))
                    <p class="field-value">{{ $human_passport->first_names}}</p>
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            <div class="col-6">
                <small>Sur name</small>
                @if(isset($human_passport->mother_passport_no))
                    -
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
            <div class="col-6">
                <small>Other names</small>
                @if(isset($human_passport->last_name))
                    <p class="field-value">{{ $human_passport->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_passport->birth_date))
                    <p class="field-value">{{ Carbon::parse($human_passport->birth_date)->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_passport->gender))
                   -
                @else
                    <div class="skeleton skeleton-text short"></div>
                @endif
            </div>
        </div>
        @endif
        @if($role->hasPermissionTo("Basic View Passport Details"))
           <p>Parent(s) Information</p>
           <div class="cardLine2"></div>
                <div class="row">
                    <div class="col-8">
                        <small>Mother</small>
                        @if(isset($human_passport->mother_name))
                            <p class="field-value">
                                <i class="fas fa-female" style="color: #008500;"></i>
                               {{ $human_passport->mother_name }}
                            </p>
                        @else
                            <div class="skeleton skeleton-text short"></div>
                        @endif
                    </div>
                    @if($role->hasPermissionTo("Basic View Passport Details"))
                     <div class="col-4">
                            <small>UPI no.</small>
                            @if(isset($human_passport->mother_identity_card_no))
                                <p class="field-value">
                                    {{ $human_passport->mother_identity_card_no }}
                                </p>
                            @else
                                <div class="skeleton skeleton-text short"></div>
                            @endif
                       </div>
                        <div class="col-12">
                            <small>Passport No.</small>
                            @if(isset($human_passport->mother_passport_no))
                                <p class="field-value">
                                    {{ $human_passport->mother_passport_no }}
                                </p>
                            @else
                                <div class="skeleton skeleton-text short"></div>
                            @endif
                        </div>
                    @endif

                    <div class="col-8">
                        <small>Father</small>
                        @if($human_passport->father_name)
                            <p class="field-value">
                                <i class="fas fa-male" style="color: #008500;"></i>
                                {{ $human_passport->father_name }}
                            </p>
                        @else
                            <div class="skeleton skeleton-text short"></div>
                        @endif
                    </div>
                    @if($role->hasPermissionTo("Basic View Passport Details"))
                        <div class="col-4">
                            <small>UPI no.</small>
                            @if($human_passport->father_identity_card_no)
                                <p class="field-value">
                                    {{ $human_passport->father_identity_card_no }}
                                </p>
                            @else
                                <div class="skeleton skeleton-text short"></div>
                            @endif
                        </div>
                        <div class="col-12">
                            <small>Passport no.</small>
                            @if($human_passport->father_passport_no)
                                <p class="field-value">
                                    $human_passport->father_passport_no
                                </p>
                            @else
                                <div class="skeleton skeleton-text short"></div>
                            @endif
                        </div>
                    @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

                        $headings = [
                            'Passport No.',
                            'Issued Date.',
                            'Expiry Date.',
                            'Status.'
                        ];
                        $count=0;
                    @endphp

                    <x-adminlte-datatable id="clients-table searchResultsCard" :heads="$headings">
                        <tr>
                            <td>
                                @if(isset($human_passport->passport_no))
                                    <p class="field-value">{{ $human_passport->passport_no }}</p>
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                @if(isset($human_passport->issue_date))
                                    <p class="field-value">{{ Carbon::parse($human_passport->issue_date)->format("d-m-Y") }}</p>
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                @if(isset($human_passport->expiry_date))
                                    <p class="field-value">{{ Carbon::parse($human_passport->expiry_date)->format("d-m-Y") }}</p>
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                @if(isset($human_passport->expiry_date))
                                    <span class="badge badge-secondary">
                                            <i class="fa fa-check-circle"></i>Current</span>
                                @else
                                    <div class="skeleton skeleton-text short"></div>
                                @endif
                            </td>
                        </tr>

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

    <style>
        .idDocimg{
            background-image:url("../images/national_ID.png");
            background-size: 30rem;
            width: 80vw;
            height: 25vh;
            background-repeat: no-repeat
        }
        .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>
@endforeach
