@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    <div class="row profileBanner" style="/*background: url('{{ asset("images/profileBanner.jpg") }}');*/ /*background:url('https://img.freepik.com/free-vector/gradient-purple-green-background_23-2150272599.jpg')*/">
        <div class="profileHeader">
            <h3 class="profileName">{{ $profile->MetaData->firstname.' '. $profile->MetaData->lastname }} </h3>
            {{--<p> {!! $profile->MetaData->about_me !!}</p>--}}
            {{--<div class="profileButton">
                <button class="btn white btn-outline btn-circle profileEdit ProfilemeuItem" data-action="editProfile">
                    <i class="fa fa-edit"></i> {{_t('profile.profile')}}
                </button>
                --}}{{--<button class="btn white btn-outline btn-circle profileEdit">
                    <i class="fa fa-image"></i> {{_t('profile.cover')}}
                </button>--}}{{--
            </div>--}}
        </div>
    </div>
    <div class="row profileContact">
        <div class="col-md-12">
            <div class="row">
                <div class="col-sm-3">
                    <div class="profile-sidebar">
                        <div class="portlet light profile-sidebar-portlet">
                            <div class="profile-userpic mt-element-overlay mt-scroll-right">
                                <div class="userPicInner mt-overlay-1">
                                    <div class="mt-overlay">
                                        <ul class="mt-info">
                                            <li>
                                                <a class="btn default btn-outline fmTrigger uploadProPic"
                                                   data-input="proPicInput" data-preview="proPicImg" href="javascript:"
                                                   id="fmTrigger">
                                                    <i class="fa fa-upload"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <input type="hidden" name="proPicInput" id="proPicInput">

                                    <img id="proPicImg"
                                         @if(isset($profile->MetaData->profile_pic) && $profile->MetaData->profile_pic != null )
                                         src="{{ asset($profile->MetaData->profile_pic) }}"
                                         @else
                                         src="{{ asset('photos/maleUser.jpg') }}"
                                         @endif
                                         class="img-responsive">
                                </div>
                            </div>
                            @php
                                $trimmedFirstName = strlen($profile->MetaData->firstname) > 15 ? substr($profile->MetaData->firstname, 0, 15) . '...' : $profile->MetaData->firstname;
                                $trimmedLastName = strlen($profile->MetaData->lastname) > 15 ? substr($profile->MetaData->lastname, 0, 15) . '...' : $profile->MetaData->lastname;
                            @endphp
                            <div class="profile-usertitle">
                            <div class="profile-usertitle-name"> {{ $trimmedFirstName . ' ' . $trimmedLastName }}
                            </div>
                            </div>
                            <div class="profile-userbuttons saveProfilePic" style="display: none">
                            <button type="button"
                                        class="btn btn-circle green btn-sm ladda-button">{{_t('profile.save')}}</button>
                            </div>

                            <div class="row profileHead-info ">
                                <div class="col-sm-12">
                                    <div class="profSocialLink">
                                        <ul>
                                            <li>
                                                <a href="{!! $profile->MetaData->facebook !!}">
                                                    <img src="{{ asset('photos/facebook.png') }}"/>
                                                    {{--<i class="fa fa-facebook" alt="{{ _t('profile.facebook') }}"></i>--}}
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{!! $profile->MetaData->twitter !!}">
                                                    <img src="{{ asset('photos/twitter.png') }}"/>
                                                    {{--<i class="fa fa-twitter" alt="{{ _t('profile.facebook') }}"></i> --}}
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{!! $profile->MetaData->linked_in !!}">
                                                    <img src="{{ asset('photos/linkedin.png') }}"/>
                                                   {{-- <i class="fa fa-linkedin" alt="{{ _t('profile.facebook') }}"></i>--}}
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{!! $profile->MetaData->instagram !!}">
                                                    <img src="{{ asset('photos/instagram.png') }}"/>
                                                   {{-- <i class="fa fa-instagram" alt="{{ _t('profile.facebook') }}"></i> --}}
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                               <div class="col-sm-12">
{{--                                   <div class="eachField row">--}}
{{--                                       <div class="col-sm-5">--}}
{{--                                           <label> <span class="overviewContent">{{ _t('profile.member_id') }}</span> </label>--}}
{{--                                       </div>--}}
{{--                                       <div class="col-sm-7"><label>: {{ $profile->member_id }}</label></div>--}}
{{--                                   </div>--}}
{{--                                   <div class="eachField row">--}}
{{--                                       <div class="col-sm-5">--}}
{{--                                           <label> <span class="overviewContent">{{ _t('profile.username') }}</span> </label>--}}
{{--                                       </div>--}}
{{--                                       <div class="col-sm-7"><label>: {{ $profile->username }}</label></div>--}}
{{--                                   </div>--}}
{{--                                   <div class="eachField row">--}}
{{--                                       <div class="col-sm-5">--}}
{{--                                           <label> <span class="overviewContent">{{ _t('profile.about_me') }}</span> </label>--}}
{{--                                       </div>--}}
{{--                                       <div class="col-sm-7">--}}
{{--                                           <label> : <span class=""> {!! $profile->MetaData->about_me !!}</span></label>--}}
{{--                                       </div>--}}
{{--                                   </div>--}}
                               </div>



                            </div>

                             <div class="profile-usermenu">
                                 <ul class="nav profileMenu">
                                     <li class="ProfilemeuItem active Overview" data-action="overview">
                                         <a><i class="icon-home viewProfile"></i> {{_t('profile.overview')}}</a>
                                     </li>
                                     <li class="ProfilemeuItem" data-action="editProfile">
                                         <a><i class="icon-pencil"></i> {{_t('profile.edit_profile')}}</a>
                                     </li>
                                     <li class="ProfilemeuItem active Overview" data-action="securityPIN">
                                         <a><i class="icon-lock"></i> {{_t('profile.security_PIN')}}</a>
                                     </li>
                                     <li class="ProfilemeuItem active Overview" data-action="setDefault">
                                         <a><i class="fa fa-globe"></i> {{_t('profile.setDefault')}}</a>
                                     </li>
                                     {!! defineFilter('profileMenuItem', '', 'adminProfile') !!}
                                 </ul>
                             </div>
                        </div>
                    </div>
                </div>
               {{-- <div class="col-sm-9">
                    <div class="profileHead-info">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="eachField row">
                                    <div class="col-sm-5">
                                        <label> <span class="overviewContent">{{ _t('profile.member_id') }}</span> </label>
                                    </div>
                                    <div class="col-sm-7"><label>: {{ $profile->member_id }}</label></div>
                                </div>
                                <div class="eachField row">
                                    <div class="col-sm-5">
                                        <label> <span class="overviewContent">{{ _t('profile.username') }}</span> </label>
                                    </div>
                                    <div class="col-sm-7"><label>: {{ $profile->username }}</label></div>
                                </div>
                                <div class="eachField row">
                                    <div class="col-sm-5">
                                        <label> <span class="overviewContent">{{ _t('profile.about_me') }}</span> </label>
                                    </div>
                                    <div class="col-sm-7">
                                        <label> : <span class=""> {!! $profile->MetaData->about_me !!}</span></label>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-3">
                                        <a class="btn btn-primary btnWallet"  href="#"><i class="fa fa-wallet"></i> E-wallet</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="portlet-body row">

                                    <div class="profSocialLink">
                                        <ul>
                                            <li>
                                                <a href="{!! $profile->MetaData->facebook !!}"><i class="fa fa-facebook" alt="{{ _t('profile.facebook') }}"></i> </a>
                                            </li>
                                            <li>
                                                <a href="{!! $profile->MetaData->twitter !!}"><i class="fa fa-twitter" alt="{{ _t('profile.facebook') }}"></i> </a>
                                            </li>
                                            <li>
                                                <a href="{!! $profile->MetaData->linked_in !!}"><i class="fa fa-linkedin" alt="{{ _t('profile.facebook') }}"></i> </a>
                                            </li>
                                            <li>
                                                <a href="{!! $profile->MetaData->instagram !!}"><i class="fa fa-instagram" alt="{{ _t('profile.facebook') }}"></i> </a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="eachField">
                                        <div class="col-sm-3">
                                            <label> <span class="overviewContent">{{ _t('profile.facebook') }}</span></label>
                                        </div>
                                        <div class="col-sm-9">
                                            <label> : <span class=""> {!! $profile->MetaData->facebook !!}</span></label>
                                        </div>
                                    </div>
                                    <div class="eachField">
                                        <div class="col-sm-3">
                                            <label> <span class="overviewContent">{{ _t('profile.twitter') }}</span></label>
                                        </div>
                                        <div class="col-sm-9">
                                            <label> : <span class=""> {!! $profile->MetaData->twitter !!}</span></label>
                                        </div>
                                    </div>
                                    <div class="eachField">
                                        <div class="col-sm-3">
                                            <label><span class="overviewContent">{{ _t('profile.linked_in') }}</span></label>
                                        </div>
                                        <div class="col-sm-9">
                                            <label> : <span class=""> {!! $profile->MetaData->linked_in !!}</span></label>
                                        </div>
                                    </div>
                                    <div class="eachField">
                                        <div class="col-sm-3">
                                            <label> <span class="overviewContent">{{ _t('profile.instagram') }}</span></label>
                                        </div>
                                        <div class="col-sm-9">
                                            <label> : <span class=""> {!! $profile->MetaData->instagram !!}</span></label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div class="row">
                            <div class="profile-usermenu">
                                <ul class="nav profileMenu">
                                    <li class="ProfilemeuItem active Overview" data-action="overview">
                                        <a><i class="icon-home viewProfile"></i> {{_t('profile.overview')}}</a>
                                    </li>
                                    <li class="ProfilemeuItem" data-action="editProfile">
                                        <a><i class="icon-settings"></i> {{_t('profile.edit_profile')}}</a>
                                    </li>
                                    <li class="ProfilemeuItem active Overview" data-action="securityPIN">
                                        <a><i class="icon-lock"></i> {{_t('profile.security_PIN')}}</a>
                                    </li>
                                    <li class="ProfilemeuItem active Overview" data-action="setDefault">
                                        <a><i class="fa fa-globe"></i> {{_t('profile.setDefault')}}</a>
                                    </li>
                                    {!! defineFilter('profileMenuItem', '', 'adminProfile') !!}
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>--}}
                <div class="col-sm-9">
                    <div class="partialContent" name="partialContent" id="partialContent" style="overflow: hidden;">

                    </div>
                </div>
            </div>
{{--            <div class="row">--}}
{{--                <div class="col-sm-12">--}}
{{--                    <div class="partialContent" name="partialContent" id="partialContent" style="overflow: hidden;">--}}

{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}



        </div>
    </div>

    <script type="text/javascript">"use strict";
        $(function () {
            Ladda.bind('.ladda-button');

            $(".ProfilemeuItem").click(function () {
                $(".ProfilemeuItem").removeClass("active");
                $(this).addClass("active");
                simulateLoading('.partialContent');
                var unitAction = $(this).attr('data-action');
                $.post('{{ scopeRoute('profile.requestUnit') }}', {unit: unitAction}, function (data) {
                    $('.partialContent').html(data);
                });
            });

            //trigger overview
            $('.viewProfile').trigger('click');

            //Initialize file manager

            var domain = '{{ asset('filemanage') }}';

            $('.uploadProPic').filemanager('image', {prefix: domain});

            $('.uploadProPic').click(function () {
                $('.saveProfilePic').show();
            });


        });

        //save profile pic

        $('.saveProfilePic').click(function () {
            if ($('#proPicInput').val()) {
                $.post('{{ scopeRoute('profile.saveProfileImage') }}', {proPicInput: $('#proPicInput').val()}, function () {
                    toastr.success("{{_t('profile.profile_picture_saved_successfully')}}");
                    $('.saveProfilePic').hide();
                });
            }

        });

    </script>
    <style>
        .page-content {
            /*background: #f4f6fb !important;*/
            padding: 0px 0 0px 0px !important;
        }

        .row.mainBreadcrumb {
            display: none;
        }

/*** custom style****/

        .row.profileBanner {
            background-color: #f4f6fb !important;
        }
        .profile-usermenu ul.nav.profileMenu {}

        .profile-usermenu ul.nav.profileMenu li.ProfilemeuItem {
            list-style: none;
            display: block;
            padding: 0px 10px;
        }
        .profile-sidebar {
            width: 100% !important;
        }

       /* .profileHead-info {
            background-color: #fff;
            border-radius: 10px !important;
            padding: 25px;
            min-height: 300px;
            position: relative;
            border-bottom: solid 2px #abb9ba;
        }*/
        .row.profileHead-info {
            margin: 0px;
        }

        .profileHead-info .profSocialLink {}

        .profileHead-info .profSocialLink ul {
            padding: 0px;
            margin: 0px;
            float: none;
            text-align: center;
        }

        .profileHead-info .profSocialLink ul li {}

        .profileHead-info .profSocialLink ul li {
            list-style: none;
            display: inline-block;
            font-size: 20px;
            color: #444444;
        }

        .profileHead-info .profSocialLink ul li a {
            color: #939393;
            text-decoration: none !important;

        }
        .profileHead-info .profSocialLink ul li a:hover {
            text-decoration: none !important;
            color: #444444;
        }
        .row.profileBanner:before {
            /* background: linear-gradient(87deg, #13202f, #242424) !important; */
            /* background: linear-gradient(87deg, #172b4d, #1a174d) !important; */
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: all .15s ease;
            /* opacity: 0.9; */
            /*background-color: #fff;*/
            opacity: 0.5;
        }
        .profileHead-info .eachField {}

        .profileHead-info .eachField label {
            font-weight: 600;
            color: #222;
        }

        .profileHead-info .eachField label span.overviewContent {
            color: #333;
            font-weight: 500;
        }

        .profileHead-info .profile-usermenu {
            margin: 0px;
            position: absolute;
            bottom: -1px;
            padding-bottom: 0px;
        }

        .profile-usermenu ul.nav.profileMenu li.ProfilemeuItem.active {
            /*border-bottom: solid 3px #03a9f4;*/
        }

        .profile-usermenu ul.nav.profileMenu li.ProfilemeuItem.active a {
            background-color: transparent;
            border: 0px;
            text-align: left;
            margin-left: 0px;
            color: #03a9f4;
            font-weight: 600;
        }
        .profile-usermenu ul.nav.profileMenu li.ProfilemeuItem a {
            font-size: 14px;
            padding: 10px 5px;
        }
        .profile-usermenu ul.nav.profileMenu li.ProfilemeuItem:hover {
            /*border-bottom: solid 3px #03a9f4;*/
        }
        a.btn.btnWallet {
            background-color: #03a9f4;
            border: solid 1px #03a9f4;
            border-radius: 6px !important;
            padding: 10px 15px;
        }
        .row.profileContact .profile-content .portlet-title .caption {
            color: #222 !important;
        }

        .row.profileContact .profile-content .portlet-title .caption span.caption-subject {
            color: #222 !important;
        }
        .row.profileContact .securityPinChanger h2, .row.profileContact .setDefault h2 {
            color: #222 !important;
        }
        .profile-usertitle-name {
            color: #313e44;
        }
        .profile-usermenu {
            padding-top: 15px;
            padding-bottom: 20px;
            border-top: solid 1px #ddd;
            margin-top: 15px;
        }
        @media(max-width:767px){
            .profileHead-info .profile-usermenu {
                position: relative !important;
            }

            .profileHead-info {
                padding-bottom: 0px !important;
            }

            .profileHead-info .profSocialLink ul {
                margin: 15px 7px !important;
                float: none !important;
            }
        }
        @media (max-width: 500px) {
            .profile-usermenu ul.nav.profileMenu li.ProfilemeuItem {
               /* width: 49% !important;*/
            }
        }

        /**** black theme ****/

        body.darkModeTheme .profileHead-info .eachField label span.overviewContent {
            color: #ffffff;
            font-weight: 500;
        }
        body.darkModeTheme .profileHead-info .eachField label {
            font-weight: 600;
            color: #ffffff;
        }
        body.darkModeTheme .profileHead-info {
            background-color: #212529;
            /*border-bottom: solid 2px #03a9f4;*/
        }
        body.darkModeTheme .profile-usertitle-name {
            color: #efd81b;
        }
        body.darkModeTheme .profile-usermenu ul li a {
            color: #c5c5c5;
        }
        body.darkModeTheme .profile-usermenu ul li {
            border-bottom: 1px solid transparent;
        }
        body.darkModeTheme .row.profileContact .profile-content .portlet-title .caption span.caption-subject {
            color: #ffffff !important;
        }
        body.darkModeTheme .row.profileContact .securityPinChanger h2, body.darkModeTheme .row.profileContact .setDefault h2 {
            color: #ffffff !important;
        }
        body.darkModeTheme .profile-usermenu ul li.active a{
            background-color: transparent !important;
            border-left: 0px !important;
        }
        body.darkModeTheme .profileHead-info .profSocialLink ul li a {
            color: #f5d283;
        }
        body.darkModeTheme .row.profileBanner {
            background-color:#1a1d21 !important;
        }
        body.darkModeTheme .row.profileBanner .profileHeader h3.profileName {
            color: #d6d6d6;
        }
        body.darkModeTheme .row.profileBanner .profileButton button.btn.profileEdit {
            cursor: pointer;
            margin-top: 11px;
            border-color: #fab30d !important;
            color: #fab30d !important;
        }
        body.darkModeTheme .row.profileBanner .profileButton button.btn.profileEdit:hover{
            background-color:#fab30d !important;
            border-color: #fab30d !important;
            color: #fff !important;
        }
        body.darkModeTheme .profile-usermenu ul.nav.profileMenu li.ProfilemeuItem.active a{
            color: #fab30d !important;
        }
    </style>
@endsection