@extends('layouts.app')
<title>InsureMe | User Profile</title>
@section('content')

<style>
    .profile-image {
        margin: 0 auto;
    }

    .profile-image img {
        height: 8em;
        width: 8em;
    }

    .security-tab {
        min-height: 60vh;
    }

    .nav-pills-custom .nav-link {
        color: #aaa;
        background: #fff;
        position: relative;
    }

    .nav-pills-custom .nav-link.active {
        color: #45b649;
        background: #fff;
    }

    @media (min-width: 992px) {
        .nav-pills-custom .nav-link::before {
            content: '';
            display: block;
            border-top: 8px solid transparent;
            border-left: 10px solid #fff;
            border-bottom: 8px solid transparent;
            position: absolute;
            top: 50%;
            right: -10px;
            transform: translateY(-50%);
            opacity: 0;
        }
    }

    .nav-pills-custom .nav-link.active::before {
        opacity: 1;
    }

    .profile-area {
        min-height: 80vh;
        box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.6);
        -moz-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.6);
        -webkit-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.6);
        -o-box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.6);
    }

    .qr-code, .secret-code {
        margin: 0 auto;
    }

    #mfa-secret {
        cursor: pointer;
    }

    .apps img {
        height: 45px;
        width: 45px;
        margin: 0 auto;
    }

    .apps ul li {
        list-style: none;
        float: left;
        padding: 1em;
    }

    .apps ul li a {
        text-align: center;
        text-decoration: none;
    }

    .copied-to-clipboard {
        display: none;
    }

    .details div {
        margin-top: 0.5em;
    }

    .details-title {
        display: list-item;
        list-style-position: inside;

    }

</style>

<div class="copied-to-clipboard text-center float-right mt-2 mr-5" id="notice">
    <div class="alert alert-warning" role="alert">
        Copied to clipboard
    </div>
</div>

<div class="profile">
    <div class="container">
        <div class="row profile-area mt-3 ">
            <div class="col-md-3 p-4">
                <div class="nav flex-column nav-pills nav-pills-custom" id="v-pills-tab" role="tablist"
                     aria-orientation="vertical">
                    <a class="nav-link mb-3 p-3 shadow active" id="user-profile-tab" data-toggle="tab"
                       href="#user-profile" role="tab" aria-controls="user-profile" aria-selected="true">
                        <i class="fa fa-user-circle-o mr-2"></i>
                        <span class="font-weight-bold small text-uppercase">Personal information</span></a>

                    @if ($mfa_details)
                    <a class="nav-link mb-3 p-3 shadow" id="user-security-tab" data-toggle="tab"
                       href="#user-security" role="tab" aria-controls="user-security" aria-selected="false">
                        <i class="fa fa-shield mr-2"></i>
                        <span class="font-weight-bold small text-uppercase">Security</span></a>
                    @endif
                </div>
            </div>

            <div class="col-md-9">
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade shadow rounded bg-white show active p-5" id="user-profile" role="tab"
                         aria-labelledby="profile-tab">
                        <div class="profile-info">
                            <div class="row flex-lg-nowrap">
                                <div class="col">
                                    <div class="row">
                                        <div class="col mb-3">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="e-profile">
                                                        <div class="row">
                                                            <div class="col-12 col-sm-auto mb-3 profile-image">
                                                                <img alt="profile-image"
                                                                     class=" rounded-circle d-flex justify-content-center align-items-center rounded"
                                                                     src="{{$user_details->profile_image}}">
                                                            </div>
                                                        </div>
                                                        <div class="container pt-3">
                                                            <div class="details row">
                                                                <div class="col-3 details-title"><b>First name<span
                                                                            class="float-right">:</span></b></div>
                                                                <div class="col-9">{{$user_details->first_name}}</div>
                                                                <div class="col-3 details-title"><b>Last name<span
                                                                            class="float-right">:</span></b></div>
                                                                <div class="col-9">{{$user_details->last_name}}</div>
                                                                <div class="col-3 details-title"><b>Email<span
                                                                            class="float-right">:</span></b></div>
                                                                <div class="col-9">{{$user_details->email}}</div>
                                                                <div class="col-3 details-title"><b>Mobile<span
                                                                            class="float-right">:</span></b></div>
                                                                <div class="col-9">{{$user_details->mobile_number}}
                                                                </div>
                                                                <div class="col-3 details-title"><b>Agent code<span
                                                                            class="float-right">:</span></b></div>
                                                                <div class="col-9">{{$user_details->agent_code}}</div>
                                                                <div class="col-3 details-title"><b>Company<span
                                                                            class="float-right">:</span></b></div>
                                                                <div class="col-9">
                                                                    {{$user_details->company?$user_details->company->comp_name:"N/A"}}
                                                                </div>
                                                                <div class="col-3 details-title"><b>Branch<span
                                                                            class="float-right">:</span></b></div>
                                                                <div class="col-9">
                                                                    {{$user_details->branch?$user_details->branch->name:"N/A"}}
                                                                </div>
                                                            </div>
                                                        </div>

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

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

                    @if ($user_details)
                    <div class="tab-pane fade shadow rounded bg-white p-5" id="user-security" role="tab"
                         aria-labelledby="security-tab">
                        <div class="row flex-lg-nowrap">
                            <div class="col mfa mb-3">
                                <div class="card p-2 security-tab">
                                    <div class="qr-code">
                                        <img alt="qr-code" src="{{env('GOOGLE_CHART_API').$mfa_details->mfa_uri}}">
                                    </div>
                                    <div class="secret-code mt-3">
                                        <p class="alert alert-success" id="mfa-secret" role="alert"
                                           onclick="copyToClipboard(this.id)">{{$mfa_details->mfa_secret}}</p>
                                    </div>

                                    <div class="instructions">
                                        <b>Instructions</b>
                                        <ul>
                                            <li>Download an application from below list.</li>
                                            <li>Confirm the mobile time is correct.</li>
                                            <li>Scan the QR code for add this application in to the authenticator app.
                                            </li>
                                            <li>Or you can manually add the application by entering an app name and this
                                                secret key.
                                            </li>
                                        </ul>
                                    </div>

                                    <div class="apps">
                                        <b>Apps</b>
                                        <div class="row mt-3">
                                            <div class="col-6">
                                                Android :
                                                <ul>
                                                    <li>
                                                        <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en&gl=US"
                                                           target="_blank">
                                                            <img
                                                                src="https://play-lh.googleusercontent.com/HPc5gptPzRw3wFhJE1ZCnTqlvEvuVFBAsV9etfouOhdRbkp-zNtYTzKUmUVPERSZ_lAL=s180-rw"
                                                                alt="google-auth">
                                                            <span>Google Authenticator</span>
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a href="https://play.google.com/store/apps/details?id=com.azure.authenticator&hl=en&gl=US"
                                                           target="_blank">
                                                            <img
                                                                src="https://play-lh.googleusercontent.com/T7_4mv5aTo4XdLWz_vAQ2Hg8E-uMf_XUZMtdHdnf5ifZEP413DhOEDo2YEMSSL1Jl4k=s180-rw"
                                                                alt="google-auth">
                                                            <span>Microsoft Authenticator</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>

                                            <div class="col-6">
                                                Ios :
                                                <ul>
                                                    <li>
                                                        <a href="https://apps.apple.com/us/app/google-authenticator/id388497605"
                                                           target="_blank">
                                                            <img
                                                                src="https://play-lh.googleusercontent.com/HPc5gptPzRw3wFhJE1ZCnTqlvEvuVFBAsV9etfouOhdRbkp-zNtYTzKUmUVPERSZ_lAL=s180-rw"
                                                                alt="google-auth">
                                                            <span>Google Authenticator</span>
                                                        </a>
                                                    </li>

                                                    <li>
                                                        <a href="https://apps.apple.com/us/app/microsoft-authenticator/id983156458"
                                                           target="_blank">
                                                            <img
                                                                src="https://play-lh.googleusercontent.com/T7_4mv5aTo4XdLWz_vAQ2Hg8E-uMf_XUZMtdHdnf5ifZEP413DhOEDo2YEMSSL1Jl4k=s180-rw"
                                                                alt="google-auth">
                                                            <span>Microsoft Authenticator</span>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    function copyToClipboard(id) {
        const text = document.getElementById(id).innerText;
        const elem = document.createElement("textarea");
        document.body.appendChild(elem);
        elem.value = text;
        elem.select();
        document.execCommand("copy");
        document.body.removeChild(elem);
        showAlert();
    }

    function showAlert() {
        $('#notice').show();
        setTimeout(function () {
            $('#notice').hide();
        }, 5000);
    }

    const url = window.location.href;
    if (url.toString().includes('#user-security')) {
        let classes = ["active", "show"];
        const profile_element = document.getElementById("user-profile");
        const profile_tab = document.getElementById("user-profile-tab");
        const security_element = document.getElementById("user-security");
        const security_element_tab = document.getElementById("user-security-tab");
        security_element.classList.add(...classes);
        security_element_tab.classList.add(...classes);
        profile_tab.classList.remove(...classes);
        profile_element.classList.remove(...classes);
    }
</script>