@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/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 Birth Details"))
                        <div class="col-12 text-center">
                            @if(isset($birth_human))
                                <small class="">Birth Entry Number</small>
                                <h4 class="upi">
                                    {{ $birth_docums[0]['SER_NUM'] }}
                                </h4>
                            @else
                                <div class="skeleton skeleton-text short"></div>
                            @endif
                        </div>
                        <div class="col-12 text-center">
                            @if(isset($birth_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
            </div>
        </div>
    </div>

    <div class="col-6" style="padding-left: 27px;">

        @if($role->hasAnyPermission(["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($birth_human->name))
                        <p class="field-value">{{ $birth_human->name }}</p>
                    @else
                        <div class="skeleton skeleton-text short"></div>
                    @endif
                </div>
                <div class="col-6">
                    <small>Sur name</small>
                    @if(isset($birth_human->surn))
                        <p class="field-value">{{ $birth_human->surn }}</p>
                    @else
                        <div class="skeleton skeleton-text short"></div>
                    @endif
                </div>
                <div class="col-6">
                    <small>Other name</small>
                    @if(isset($birth_human->last_name))
                        <p class="field-value">{{ $birth_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($birth_human->date_birth))
                        <p class="field-value">{{ Carbon::parse($birth_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($birth_human->sex))
                        <p class="field-value">{{ $birth_human->sex }}</p>
                    @else
                        <div class="skeleton skeleton-text short"></div>
                    @endif
                </div>
            </div>
        @endif

        @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($birth_docums[0]['M_NAME']))
                            <p class="field-value">
                                <i class="fas fa-female" style="color: #008500;"></i>
                                {{ $birth_docums[0]['M_NAME'] }} {{ $birth_docums[0]['M_OTHNAME'] }} {{ $birth_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($birth_docums[0]['MOTHER_DOC_NUMBER']))
                                <p class="field-value">
                                    {{ $birth_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($birth_docums[0]['F_NAME']))
                            <p class="field-value">
                                <i class="fas fa-male" style="color: #008500;"></i>
                                {{ $birth_docums[0]['F_NAME'] }} {{ $birth_docums[0]['F_OTHNAME'] }} {{ $birth_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($birth_docums[0]['F_NAME']))
                                <small>ID no.</small>
                                -
                            @endif
                        </div>
                    @endif
                </div>
            @endif

        @if($role->hasAnyPermission(["Basic View Birth Details"]))
            <p>Location</p>
            <div class="cardLine2"></div>
            <div class="row">
                <div class="col-6">
                        <small>District</small>
                        @if(isset($birth_human->addressBirth->adresComp))
                            <p class="field-value">{{ $birth_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>
            </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 = [
                            'ID No.',
                            'Entry No.',
                            'Issued on.',
                            'Status.'
                        ];
                        $count=0;
                    @endphp
                    <x-adminlte-datatable id="clients-table searchResultsCard" :heads="$headings">
                        <tr>
                            <td>
                                @if(isset($birth_docums[0]['O_PID']))
                                    <p class="field-value">{{ $birth_docums[0]['O_PID'] }}</p>
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                @if(isset($birth_docums[0]['SER_NUM']))
                                    <p class="field-value">{{ $birth_docums[0]['SER_NUM'] }}</p>
                                @else
                                    <div class="skeleton skeleton-text short"></div>
                                @endif
                            </td>
                            <td>
                                @if(isset($birth_docums[0]['O_DATE']))
                                    {{ Carbon::parse($birth_human->data_scan)->format("d-m-Y") }}
                                @else
                                    <div class="skeleton skeleton-text short"></div>
                                @endif
                            </td>
                            <td>
                                @if(isset($birth_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($birth_docums))<p>Replaced: <strong>{{ count($birth_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>
