@extends('adminlte::page')

@section('title', 'IPRS | Search Results')

@section('content_header')
    <h1>Results</h1>
@stop

@section('content')
    <x-adminlte-card>

        <div class="card-body">
            <div class="row">
                 <div class="col-2">
                    <div class="row"></div>

                     <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">
                                 <div class="col-12 text-center">
                                     <small class="">UPI Number</small>
                                     <h4 class="upi">1242341324</h4>
                                 </div>
                                 <div class="col-12 text-center">
                                     <small class="">Country of Birth</small>
                                     <p class="card-text">KEN </p>
                                 </div>
                         </div>

                     </div>
                 </div>

                <div class="col-5" 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">Michael</p>
                        </div>
                        <div class="col-6">
                            <small>Sur name</small>
                            <p class="field-value">Miutinf</p>
                        </div>
                        <div class="col-6">
                            <small>Other name</small>
                            <p class="field-value">Ngi</p>
                        </div>
                        <div class="col-6"></div>
                    </div>

                    <p>Location</p>
                    <div class="cardLine2"></div>
                    <div class="row">
                        <div class="col-6">
                            <small>District</small>
                            <p class="field-value">Thika</p>
                        </div>
                        <div class="col-6">
                            <small>Division</small>
                            <p class="field-value">Thika Town</p>
                        </div>
                        <div class="col-6">
                            <small>Location</small>
                            <p class="field-value">Thika Mkt</p>
                        </div>
                        <div class="col-6">
                            <small>Sub Location</small>
                            <p class="field-value">Thika</p>
                        </div>
                    </div>

                </div>

                <div class="col-5">
                    <div class="row">
                        <p>Document Information</p>
                        <div class="cardLine"></div>
                        <div class="row">
                            <div class="col-6">
                                <small>Serial number</small>
                                <p class="field-value">2453366574</p>
                            </div>
                            <div class="col-6">
                                <small>UPI number</small>
                                <p class="field-value">33557575</p>
                            </div>
                            <div class="col-6">
                                <small>Place of issue</small>
                                <p class="field-value">Thika</p>
                            </div>
                            <div class="col-6">
                                <small>Date of issue</small>
                                <p class="field-value">23 / 04 / 2020</p>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-10">
                            <p>Document History</p>
                            <table class="table">
                                <thead>
                                    <th>#Serial</th>
                                    <th>Status</th>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>687234325</td>
                                    <td><span class="badge badge-info">active</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <x-slot name="footerSlot">
            <x-adminlte-button class="d-flex ml-auto" theme="danger" label="Close"
                               icon="fas fa-sign-in"/>
        </x-slot>
    </x-adminlte-card>
@endsection

@section('css')
    <style>
        .cardLine {
            width: 80%;
            height: 1px;
            background-color: #2e2b5a;
            margin-bottom: 1rem;
        }

        .cardLine2 {
            width: 80%;
            height: 1px;
            background-color: #2e2b5a;
            margin-bottom: 1rem;
        }

        .cardLine3 {
            width: 80%;
            height: 1px;
            background-color: #2e2b5a;
            margin-bottom: 1rem;
        }
        .upi{
            color: #115403;
            background-color: #6fff90;
            border-color: #28a745;
            box-shadow: none;
            padding: 9px;
            border-radius: 10px;
        }

        .field-value {
            font-size: 1.5rem;
            font-weight: 600;
            color: #010110;
        }
    </style>

@stop
