@extends('adminlte::page')

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

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

@section('content')
    <p></p>

    <div class="row">
    <div class="col-4 col-sm-4">
    <div class="card card-primary card-outline">
        <div class="card-body box-profile">
        <div class="text-center">
        <img src="{{asset('images/photo.webp')}}" class="profile-user-img rounded-circle img-center img-fluid shadow shadow-lg--hover">    
    </div>

    <p class="text-muted text-center fullname-label">Full names</p>
        <h3 class="profile-username text-center fullname-text">John Kariuki Doe</h3>
    <p class="text-muted text-center id-label">UPI Number</p>
    <p class="text-center bg-primary text-white rounded py-2 id-number">23344567</p>
        </div>

        </div>
    </div>
    <div class="col-8 col-sm-8">
        <div class="card card-primary card-outline card-outline-tabs">
            <div class="card-header p-0 border-bottom-0">
                <ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
                <li class="nav-item">
                <a class="nav-link active" id="custom-tabs-four-home-tab" data-toggle="pill" href="#custom-tabs-four-home" role="tab" aria-controls="custom-tabs-four-home" aria-selected="true">Personal Details</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" id="custom-tabs-current-tab" data-toggle="pill" href="#custom-tabs-current" role="tab" aria-controls="custom-tabs-current" aria-selected="false">Current Data</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" id="custom-tabs-four-messages-tab" data-toggle="pill" href="#custom-tabs-four-messages" role="tab" aria-controls="custom-tabs-four-messages" aria-selected="false">Family Relations</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" id="custom-tabs-four-photos-tab" data-toggle="pill" href="#custom-tabs-four-photos" role="tab" aria-controls="custom-tabs-four-photo" aria-selected="false">Photos</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" id="custom-tabs-four-history-tab" data-toggle="pill" href="#custom-tabs-history" role="tab" aria-controls="custom-tabs-four-history" aria-selected="false">History</a>
                </li>
                
                </ul>
            </div>
        <div class="card-body">
        <div class="tab-content" id="custom-tabs-four-tabContent">
        <div class="tab-pane fade active show" id="custom-tabs-four-home" role="tabpanel" aria-labelledby="custom-tabs-four-home-tab">
        
        
           <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <!-- Identification Information
                    <hr /> -->

                    <p>
                    <span class="text-muted">First Name</span><br />
                    <strong>John</strong>
                    </p>

                    <p>
                    <span class="text-muted">Other Names</span><br />
                    <strong>Kariuki</strong>
                    </p>

                    <p>
                    <span class="text-muted">Last Name</span><br />
                    <strong>Doe</strong>
                    </p>

                    <p>
                    <span class="text-muted">UPI/Passport No</span><br />
                    <strong>23344567</strong>
                    </p>

                    <p>
                    <span class="text-muted">Pin</span><br />
                    <strong>23344567</strong>
                    </p>

                    <p>
                    <span class="text-muted">Serial No</span><br />
                    <strong>23344567</strong>
                    </p>

                    <p>
                    <span class="text-muted">Place of Issue</span><br />
                    <strong>Nairobi</strong>
                    </p>

                    <p>
                    <span class="text-muted">Date of Issue</span><br />
                    <strong>23/02/2024</strong>
                    </p>

                    <p>
                    <span class="text-muted">County</span><br />
                    <strong>Nairobi</strong>
                    </p>

                    <p>
                    <span class="text-muted">District</span><br />
                    <strong>Thika</strong>
                    </p>

                    <p>
                    <span class="text-muted">Division</span><br />
                    <strong>Thika</strong>
                    </p>

                    <p>
                    <span class="text-muted">Location</span><br />
                    <strong>Thika</strong>
                    </p>

                    <p>
                    <span class="text-muted">Sub-Location</span><br />
                    <strong>Thika</strong>
                    </p>

                </div>
                <div class="col-md-6">
                    <!-- Personal Information
                    <hr /> -->
                    <p>
                    <span class="text-muted">Gender</span><br />
                    <strong>Male</strong>
                    </p>

                    <p>
                    <span class="text-muted">Date of Birth</span><br />
                    <strong>23/02/1999</strong>
                    </p>

                    <p>
                    <span class="text-muted">Nationality</span><br />
                    <strong>Kenyan</strong>
                    </p>

                    <p>
                    <span class="text-muted">Place of Birth</span><br />
                    <strong>Nairobi</strong>
                    </p>

                    <p>
                    <span class="text-muted">Mother Name</span><br />
                    <strong>Siprosa Oketch</strong>
                    </p>

                    <p>
                    <span class="text-muted">Father Name</span><br />
                    <strong>John Doe</strong>
                    </p>

                    
                </div>
            </div>

            </div>
        </div>


        <div class="tab-pane fade" id="custom-tabs-current" role="tabpanel" aria-labelledby="custom-tabs-current-tab">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                    <p>
                    <span class="text-muted">Place of Birth</span><br />
                    <strong>Birth Province - Nairobi</strong><br />
                    <strong>Birth District - Nairobi</strong>
                    </p>
                    </div>

                    <div class="col-md-6">
                    <p>
                    <span class="text-muted">Place of Residence</span><br />
                    <strong>County - Nairobi</strong><br />
                    <strong>Sub-county - Nairobi</strong><br />
                    <strong>District - Nairobi</strong><br />
                    <strong>Division - Nairobi</strong><br />
                    <strong>Location - Nairobi</strong>
                    </p>
                    </div>


                    <div class="col-md-6">
                    <p>
                    <span class="text-muted">Occupation</span><br />
                    <strong>Doctor</strong>
                    </p>
                    </div>

                    <div class="col-md-6">
                    <p>
                    <span class="text-muted">Family</span><br />
                    <strong>Place of Birth - Nairobi</strong><br />
                    <strong>Place of Residence - Nairobi</strong>
                    </p>
                    </div>
                </div>

            </div>
        </div>

        <div class="tab-pane fade" id="custom-tabs-four-messages" role="tabpanel" aria-labelledby="custom-tabs-four-messages-tab">
            <div class="container">

            </div>
        </div>

        <div class="tab-pane fade" id="custom-tabs-four-photo" role="tabpanel" aria-labelledby="custom-tabs-four-photo-tab">
            <div class="container">
                
            </div>
        </div>

        <div class="tab-pane fade" id="custom-tabs-four-history" role="tabpanel" aria-labelledby="custom-tabs-four-history-tab">
            <div class="container">
                
            </div>
        </div>

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

   
@stop

@section('css')
    {{-- Add here extra stylesheets --}}
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <style>
        body{
            background-color: #f4f7fe;
        }

        .main-sidebar{
            background-color: #0D1B2A;
        }

        label{
            font-weight: normal !important;
        }

        textarea{
            min-height: 157px;
        }

        textarea.form-control{
            background-color: #fff !important;
        }

        .id-number{
            width: 50%;
            margin: 0 auto;
        }

        .profile-user-img{
            width: 40%;
        }

        .fullname-label{
            margin-top: 2%;
        }
        .fullname-text{
            margin-top: -5%;
        }

        strong{
            color: #0d1b2a;
        }

    </style>
@stop

@section('js')
    
@stop
