@extends('layouts.dashboard',['title'=> "Dashboard"])
<style>
    .jason-tatum {
        color: #071437;
        text-align: left;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 24px;
        font-weight: 600;
    }

    .s {
        color: #00a3ff;
        text-align: center;
        font-family: "Roboto-Medium", sans-serif;
        font-size: 28px;
        font-weight: 500;

    }

    .map,
    .map * {
        box-sizing: border-box;
    }

    .map {
        background: #f5f8fa;
        border-radius: 12px;
        border-style: solid;
        border-color: #f5f8fa;
        border-width: 12px;
        height: 416px;
        overflow: hidden;
    }


    .work-experience {
        color: #071437;
        text-align: left;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 16px;
        line-height: 24px;
        font-weight: 600;

    }

    .frame-83 {
        background: #3f4254;
        border-radius: 6px;
        padding: 9px 22px 9px 22px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 97px;
        height: 38px;

    }

    .add-new {
        color: #ffffff;
        text-align: center;
        font-family: "Inter-SemiBold", sans-serif;
        font-size: 11px;
        line-height: 12px;
        font-weight: 600;
    }

    .add {
        color: #1b84ff;
        text-align: center;
        font-family: "Inter-Regular", sans-serif;
        font-size: 11px;
        line-height: 12px;
        font-weight: 400;

        align-self: stretch;
    }


    .usetDetailsText {
        width: 75px;
        height: 20px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        font-size: 13px;
        color: #3F4254;
    }

    .userDetailsView {
        height: 39.5px;
    }

    .sucessBtn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 4px 9px;
        gap: 10px;
        width: 52px;
        height: 24.96px;
        background: #C9F7F5;
        border-radius: 5.76px;
    }

    .sucessBtnText {
        width: 34px;
        height: 16px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 10.56px;
        line-height: 16px;
        color: #1BC5BD;
    }

    .yellowBtn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 5px 7px;
        gap: 10px;
        width: 57px;
        height: 24.96px;
        background: #FFF4DE;
        border-radius: 5.76px;
    }

    .yellowBtnText {
        width: 43px;
        height: 16px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 10.56px;
        line-height: 16px;
        color: #FFA800;

    }

    .redBtn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 5px 3px;
        gap: 10px;
        width: 52px;
        height: 24.96px;
        background: #FFE2E5;
        border-radius: 5.76px;
    }

    .redBtnText {
        width: 46px;
        height: 16px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 500;
        font-size: 10.56px;
        line-height: 16px;
        color: #F64E60;
    }

    .detailsText {
        height: 20px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        line-height: 20px;
        color: #4B5675;
    }

    .Work-Experience {
        height: 24px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        color: #071437;
    }

    .experienceDetialView {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 11px 15px;
        gap: 10px;
        height: 61px;
        border: 1px solid #F1F1F4;
        border-radius: 12px;
    }

    .experienceTitle {
        width: 184px;
        height: 20px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        color: #071437;

    }

    .experienceSubTitle {
        width: 184px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 13px;
        color: #4B5675;
    }

    .skillsItems {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 5px 7px;
        gap: 10px;
        margin-left: 2px;
        margin-right: 2px;
        margin-top: 5;
        height: 23px;
        background: #F1F1F4;
        border-radius: 4px;
    }

    .skilsCss {
        width: 36px;
        height: 20px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 600;
        font-size: 14px;
        line-height: 20px;
        color: #000000;
    }

    .skillsAdd {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 5px;
        width: 25.26px;
        height: 18px;
    }

    .addLine {
        width: 25.26px;
        height: 1px;
        background: #1B84FF;
    }

    .addText {
        width: 25.26px;
        height: 12px;
        font-family: 'Inter';
        font-style: normal;
        font-weight: 400;
        font-size: 11px;
        line-height: 12px;
        text-align: center;
        color: #1B84FF;
    }

    .CurrentDeployment {
        width: 468px;
        height: 21px;
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        color: #3F4254;
    }
</style>
@section('content')

<div class="lg:flex justify-between w-full">
    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2">
        <div class="h-16 flex justify-between">
            <div class="jason-tatum my-3 mx-4"> {{Auth::user()->firstName}} {{Auth::user()->lastName}}</div>
            <form action="/update-image" method="post" enctype="multipart/form-data">
                @csrf
                <input id="profileUpdate" type="file" onchange="this.form.submit();" name="profileUpdate" class="hidden">
                <label for="profileUpdate">
                    <img class="mx-4 rounded-full w-14 h-14 mt-2" src="{{asset(Auth::user()->img)}}" />
                </label>
            </form>

        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Availability</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="sucessBtn mx-1"> <span class="sucessBtnText">Active</span></div>
                <div class="yellowBtn mx-1"><span class="yellowBtnText">Inactive</span></div>
                <div class="redBtn mx-1 "><span class="redBtnText">Relieved</span></div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Birthday</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->dob}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Gender</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->gender}} </div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Email</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->email}} </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Phone</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->phone}} </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Address</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->address}}</div>
            </div>
        </div>

    </div>


    <div class="rounded-xl shadow-lg map w-full lg:w-1/2 mx-2 mt-2">
        <div class="mapouter">
            <div class="gmap_canvas" id="mapSection"></div>
            <style>
                .mapouter {

                    text-align: right;
                    width: 100%;
                    height: 400px;
                }

                .gmap_canvas {
                    overflow: hidden;
                    background: none !important;
                    width: 100%;
                    height: 400px;
                }

                .gmap_iframe {
                    height: 400px !important;
                }
            </style>
        </div>
    </div>


</div>

<div class="lg:flex justify-between w-full mt-6">
    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2">

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Type</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->type}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Marital Status</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->maritalStatus}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Blood Group</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->bloodGroup}} </div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Genotype</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->genotype}} </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Height</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->height}} </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Weight</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->weight}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">L.G.A</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->lga}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">State</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->state}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Country</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->country}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">MedicalCon</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{Auth::user()->medicalCon}}</div>
            </div>
        </div>
    </div>

    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2 pr-6">
        <div class="h-16 flex justify-between">
            <div class="Work-Experience my-3 mx-4"> Education</div>
            <div class="frame-83 mx-2 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300">
                <div class="add-new">Add New</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="mb-4 pt-2">
            @foreach ($educations as $education)
            <div class="flex mx-4 experienceDetialView w-full my-1">
                <div class="experienceTitle mt-3 mx-2">{{$education->certification}}</div>
                <div class="experienceSubTitle mx-2">{{$education->institution}} - {{$education->date}}</div>
            </div>
            @endforeach


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

<div class="lg:flex justify-between w-full mt-6">
    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2">
        <div class="h-16 flex justify-between">
            <div class="Work-Experience my-3 mx-4"> Next of kin</div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Full Name</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$nextOfKin->fullName}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Email</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$nextOfKin->email}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Phone</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$nextOfKin->phone}} </div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Relationship</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$nextOfKin->relationship}} </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Home Address</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$nextOfKin->homeAddress}} </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView mb-4">
            <div class="usetDetailsText mt-3 mx-2">Work Address</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$nextOfKin->workAddress}}</div>
            </div>
        </div>

    </div>

    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2">
        <div class="mx-4">Guarantor 1</div>
        @if(count($guarantor)>0)
        <div class="h-16 flex justify-between">
            <div>
                <div class="Work-Experience mt-3 mx-4"> {{$guarantor[0]->title}} {{$guarantor[0]->fullName}}</div>

            </div>

            <img class="mx-4 rounded-full" src="{{asset($guarantor[0]->passport)}}" />
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Email</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[0]->email}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Phone</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[0]->phone}} </div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">NIN</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[0]->nin}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Address</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[0]->address}} </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Job Title</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[0]->jobTitle}} </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView mb-4">
            <div class="usetDetailsText mt-3 mx-2">Employer</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[0]->employer}}</div>
            </div>
        </div>
        @endif
    </div>

</div>

<div class="lg:flex justify-between w-full mt-6">

    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2">
        <div class="mx-4">Guarantor 2</div>
        @if(count($guarantor)>1)
        <div class="h-16 flex justify-between">
            <div>
                <div class="Work-Experience mt-3 mx-4"> {{$guarantor[1]->title}} {{$guarantor[1]->fullName}}</div>

            </div>

            <img class="mx-4 rounded-full" src="{{asset($guarantor[1]->passport)}}" />
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Email</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[1]->email}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Phone</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[1]->phone}} </div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">NIN</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[1]->nin}}</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Address</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[1]->address}} </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Job Title</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[1]->jobTitle}} </div>
            </div>
        </div>

        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView mb-4">
            <div class="usetDetailsText mt-3 mx-2">Employer</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">{{$guarantor[1]->employer}}</div>
            </div>
        </div>
        @endif
    </div>

    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2">
        <div class="h-16 flex justify-between">
            <div class="CurrentDeployment my-4 mx-4"> Current Deployment</div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Branch</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">VGC, Lagos Island</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Unit</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">124 Akanbi Road, VGC, Etiosa< Lagos </div>
                </div>
            </div>
            <hr class="mt-2" />
            <div class="flex mx-4 userDetailsView">
                <div class="usetDetailsText mt-3 mx-2">Unit Phone</div>
                <div class="mx-4 flex mt-3 flex">
                    <div class="detailsText mx-1">0989124678</div>
                </div>
            </div>

            <hr class="mt-2" />
            <div class="flex mx-4 userDetailsView">
                <div class="usetDetailsText mt-3 mx-2">Unit Email</div>
                <div class="mx-4 flex mt-3 flex">
                    <div class="detailsText mx-1">emailaddress@gmail.com </div>
                </div>
            </div>

            <hr class="mt-2" />
            <div class="flex mx-4 userDetailsView">
                <div class="usetDetailsText mt-3 mx-2">Status</div>
                <div class="mx-4 flex mt-3 flex">
                    <div class="sucessBtn mx-1"> <span class="sucessBtnText">Active</span></div>
                    <div class="yellowBtn mx-1"><span class="yellowBtnText">Inactive</span></div>
                    <div class="redBtn mx-1 "><span class="redBtnText">Relieved</span></div>
                </div>
            </div>

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

<div class="lg:flex justify-between w-full mt-6">
    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2 pr-6">
        <div class="h-16 flex justify-between">
            <div class="Work-Experience my-3 mx-4"> Work Experience</div>
            <div class="frame-83 mx-2 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300">
                <div class="add-new">Add New</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="mb-4">
            <div class="flex mx-4 experienceDetialView w-full">
                <div class="experienceTitle mt-3 mx-2">Teams Supervisor</div>
                <div class="experienceSubTitle mx-2">Secure-Point - Jan, 2019</div>
            </div>
            <div class="flex mx-4 experienceDetialView w-full">
                <div class="experienceTitle mt-3 mx-2">Operations Lead</div>
                <div class="experienceSubTitle mx-2">Randers Security - Mar, 2016</div>
            </div>
            <div class="flex mx-4 experienceDetialView w-full">
                <div class="experienceTitle mt-3 mx-2">Teams Supervisor</div>
                <div class="experienceSubTitle mx-2">Nedbank Security - Mar, 2019</div>
            </div>

        </div>
        <div class="flex mb-4 justify-between pb-4">
            <div class="mt-3 skilsCss mx-4">Skills</div>
            <div class="flex mx-2">
                <span class="skillsItems">HR</span>
                <span class="skillsItems">noCode</span>
                <span class="skillsItems">Web Design</span>
            </div>
            <div class="skillsAdd">
                <div class="addText">
                    Add
                </div>
                <div class="addLine"> </div>
            </div>
        </div>

    </div>

    <div class="rounded-xl shadow-lg w-full lg:w-1/2 mx-2 mt-2">
        <div class="h-16 flex justify-between">
            <div class="CurrentDeployment my-4 mx-4"> Current Deployment</div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Branch</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">VGC, Lagos Island</div>
            </div>
        </div>
        <hr class="mt-2" />
        <div class="flex mx-4 userDetailsView">
            <div class="usetDetailsText mt-3 mx-2">Unit</div>
            <div class="mx-4 flex mt-3 flex">
                <div class="detailsText mx-1">124 Akanbi Road, VGC, Etiosa< Lagos </div>
                </div>
            </div>
            <hr class="mt-2" />
            <div class="flex mx-4 userDetailsView">
                <div class="usetDetailsText mt-3 mx-2">Unit Phone</div>
                <div class="mx-4 flex mt-3 flex">
                    <div class="detailsText mx-1">0989124678</div>
                </div>
            </div>

            <hr class="mt-2" />
            <div class="flex mx-4 userDetailsView">
                <div class="usetDetailsText mt-3 mx-2">Unit Email</div>
                <div class="mx-4 flex mt-3 flex">
                    <div class="detailsText mx-1">emailaddress@gmail.com </div>
                </div>
            </div>

            <hr class="mt-2" />
            <div class="flex mx-4 userDetailsView">
                <div class="usetDetailsText mt-3 mx-2">Status</div>
                <div class="mx-4 flex mt-3 flex">
                    <div class="sucessBtn mx-1"> <span class="sucessBtnText">Active</span></div>
                    <div class="yellowBtn mx-1"><span class="yellowBtnText">Inactive</span></div>
                    <div class="redBtn mx-1 "><span class="redBtnText">Relieved</span></div>
                </div>
            </div>

        </div>
    </div>
</div>
<script>
    navigator.geolocation.getCurrentPosition(function(position) {
        document.getElementById("mapSection").innerHTML = `<iframe src="https://maps.google.com/maps?q=${position.coords.latitude}, ${ position.coords.longitude}&z=15&output=embed" width="100%" height="100%" frameborder="0" style="border:0"></iframe>`;
        console.log("location tracking ...", position.coords.latitude, position.coords.longitude);
    });
</script>
@stop