@php use Carbon\Carbon; @endphp
<div class="row">
    <div class="col-2">
        <div class="row">
            <x-adminlte-card>
                <img class="card-img-top"
                     src="https://static.vecteezy.com/system/resources/previews/018/765/757/original/user-profile-icon-in-flat-style-member-avatar-illustration-on-isolated-background-human-permission-sign-business-concept-vector.jpg" alt="Card image cap">
            </x-adminlte-card>

            <div class="row" style="width: 100%;">
                <div class="col-12 text-center">
                    <small class="">ID/UPI Number</small>
                    <h4 class="upi">-</h4>
                </div>
                {{--<div class="col-12 text-center">
                    <small class="">Country of Birth</small>
                    <p class="card-text">KEN </p>
                    <span class="fi fi-ke" style="font-size: 2rem;"></span>
                </div>--}}
            </div>
        </div>
    </div>

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

        <p>Citizen's Information</p>
        <div class="cardLine"></div>
        <div class="row">
            <div class="col-6">
                <small>First name</small>
                <p class="field-value fname"></p>
            </div>
            <div class="col-6">
                <small>Sur name</small>
                <p class="field-value sname"></p>
            </div>
            <div class="col-6">
                <small>Other name</small>
                <p class="field-value othername"></p>
            </div>

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

            <div class="col-6">
                <small>Date of Birth</small>
                <p class="field-value dob">
                    -
                </p>
            </div>
            <div class="col-6">
                <small>Gender</small>
                <p class="field-value gender">
                    -
                </p>
            </div>
            @if($role->hasPermissionTo('View Family'))
            <div class="col-6">
                <small>Family</small>
                <p class="field-value family">
                    -
                </p>
            </div>
            @endif
            @if($role->hasPermissionTo('View Clan'))
            <div class="col-6">
                <small>Clan</small>
                <p class="field-value clan">
                    -
                </p>
            </div>
            @endif
        </div>

        @if($role->hasPermissionTo('View Place of Residence'))
        <p>Location</p>
        <div class="cardLine2"></div>
        <div class="row">
            <div class="col-6">
                <small>District</small>
                <p class="field-value district">
                </p>
            </div>
            <div class="col-6">
                <small>Division</small>
                <p class="field-value division">
                    -
                </p>
            </div>
            <div class="col-6">
                <small>Location</small>
                <p class="field-value location">
                </p>
            </div>
            <div class="col-6">
                <small>Sub Location</small>
                <p class="field-value sublocation">
                </p>
            </div>
            <div class="col-6">
                <small>Village</small>
                <p class="field-value village">
                </p>
            </div>
            <div class="col-6">
                <small>Home Address</small>
                <p class="field-value home">
                </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-6">
                    <small>Serial number</small>
                    <p class="field-value serial">-</p>
                </div>
                <div class="col-6">
                    <small>Date of issue</small>
                    <p class="field-value dataissue">-</p>
                </div>

            </div>
        </div>


    </div>
</div>
