@php
$user=auth()->user();
@endphp
<div class="col-xl-3 col-lg-6 col-md-8">
    <div class="dashboard-sidebar">
        <form id="user-image-update" enctype="multipart/form-data">
            <div class="avatar-upload">
                <div class="avatar-upload__edit">
                    <input type='file' id="imageUpload" name="profile_image" accept=".png, .jpg, .jpeg" />
                    <label for="imageUpload"
                            data-bs-toggle="tooltip"
                            title="@lang('Only ') @lang('jpeg'), @lang('jpg'), @lang('png') @lang(' image supported & file size is ') {{ getFileSize('user') }}@lang('px')">
                        <i class="las la-pencil-alt"></i>
                    </label>
                </div>
                <div class="avatar-preview">
                    <div id="imagePreview"
                        style="background-image: url('{{ getImage(getFilePath('user').'/'.$user->image,getFileSize('user')) }}');">
                    </div>
                </div>
            </div>
        </form>
                <div class="text-center">
                    <h5 class="mt-3">{{$user->englishname}}</h5>
                    <span class="text--base">Username: {{$user->username}}</span>
                    <span class="text--base">Email: {{$user->email}}</span>
                </div>
                <ul class="dashboard-sidebar__menu mt-3">
                    <li>
                        <a href="{{route('user.home')}}" class="{{ menuActive('user.home') }}">
                            <i class="las la-layer-group"></i> @lang('Dashboard')
                        </a>
                    </li>
                    <li>
                        <a href="{{route('user.profile.setting')}}" class="{{ menuActive('user.profile.setting') }}">
                            <i class="las la-edit"></i>@lang('General Information')
                        </a>
                    </li>
                    <li>
                        <a href="{{route('user.education.index')}}" class="{{menuActive('user.education.index')}}">
                            <i class="las la-school"></i>@lang('Educational Qualification')
                        </a>
                    </li>
                    <li>
                        <a href="{{route('user.employment.index')}}" class="{{ menuActive('user.employment.index') }}">
                            <i class="las la-landmark"></i> @lang('Experience')
                        </a>
                    </li>
                    <li>
                        <a href="{{route('user.photo.view') }}" class="{{ menuActive('user.photo.view') }}">
                            <i class="lar la-user"></i>@lang('Photo Upload')
                        </a>
                    </li>
                    <li>
                        <a href="{{route('user.pdf.view') }}" class="{{ menuActive('user.pdf.view') }}">
                            <i class="lar la-file"></i>@lang('Documents Upload')
                        </a>
                    </li>
                    <li>
                        <a href="{{route('user.job.application.list')}}" class="{{menuActive('user.job.application.list')}}">
                            <i class="las la-tablet-alt"></i>@lang('Applied Jobs')
                        </a>
                    </li>
                    <!-- <li>
                        <a href="{{route('user.favorite.job.list')}}" class="{{ menuActive('user.favorite.job.list') }}">
                            <i class="lar la-bookmark"></i>@lang('Favourite Job')
                        </a>
                    </li>
                    <li>
                        <a href="{{route('user.twofactor')}}" class="{{ menuActive('user.twofactor') }}">
                            <i class="las la-key"></i>@lang('2FA Security')
                        </a>
                    </li> -->
                    <li>
                        <a href="{{route('user.change.password')}}" class="{{ menuActive('user.change.password') }}">
                            <i class="las la-lock-open"></i>@lang('Change Password')
                        </a>
                    </li>
                    <!-- <li>
                        <a href="{{route('ticket.index')}}" class="{{ menuActive('ticket*') }}">
                            <i class="la la-ticket"></i>@lang('Support')
                        </a>
                    </li> -->
                    <li>
                        <a href="{{route('user.logout')}}">
                            <i class="las la-sign-out-alt"></i>@lang('Logout')
                        </a>
                    </li>
                </ul>
    </div>
</div>

@push('script')
<script>
    "use strict";
    (function ($) {
        $('input[name=profile_image]').on('change', function (e) {
            $("#user-image-update").trigger('submit');
        });
        $("#user-image-update").on('submit', function (e) {
            e.preventDefault();

            const CSRF_TOKEN = `{{ csrf_token() }}`;

            let formData = new FormData($(this)[0]);
            let action   = "{{ route('user.update.image') }}";

            $.ajax({
                headers    : { 'X-CSRF-TOKEN': CSRF_TOKEN },
                url        : action,
                method     : "POST",
                data       : formData,
                cache      : false,
                contentType: false,
                processData: false,
                beforeSend : function () {
                    $('.avatar-upload').addClass('animate-border');
                },
                complete:function(){
                    $('.avatar-upload').removeClass('animate-border');
                },
                success: function (resp) {
                    if(resp.success){
                        notify('success',resp.message);
                        let imageUrl=`{{ getImage(getFilePath('user').'/:image') }}`;
                        $('#imagePreviewBody').css({
                            "background-image": `url('${imageUrl.replace('default.png',`user/profile/${resp.image_name}`)}')`
                        });
                        $('#imagePreview').css({
                            "background-image": `url('${imageUrl.replace('default.png',`user/profile/${resp.image_name}`)}')`
                        });
                    }else{
                        notify('error',resp.errors || resp.message);
                    }
                },
                error: function (e) {
                    notify('error',"@lang('Something went wrong')");
                }
            });
        });
    })(jQuery);

</script>
@endpush

@push('style')
<style>
    .avatar-upload {
        width: 100%;
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: 18px;
        background: #fff;
        overflow: hidden;
    }

    .avatar-upload .avatar-upload__edit {
        position: absolute;
        right: 5px;
        z-index: 1;
        bottom: 5px;
    }

    .avatar-upload .avatar-upload__edit input {
        display: none;
    }

    .photo-upload input {
        display: none;
    }

    .avatar-upload .avatar-upload__edit input+label {
        display: grid;
        place-content: center;
        width: 40px;
        height: 40px;
        margin-bottom: 0;
        border-radius: 100%;
        border: 1px solid transparent;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.12);
        cursor: pointer;
        font-size: 1.2rem;
        font-weight: normal;
        color: #fff;
        transition: all 0.2s ease-in-out;
        background-color: #{{$general->base_color }}
    }

    .avatar-preview {
        width: 250px;
        height: 250px;
        justify-content: center;
        align-items: center;
        position: relative;
        background: gray;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        border-radius: inherit;
    }

    .avatar-preview>div {
        width: 250px;
        height: 250px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        border-radius: inherit;
    }

    .animate-border {
        position: relative;
        isolation: isolate;
        overflow-x: hidden;
    }

    .animate-border::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 3px;
        width: 50px;
        animation: animateThis 1s linear infinite;
        background: #{{ $general->base_color }};
    }

    @-webkit-keyframes animateThis {
        0% {
            left: 0;
        }

        100% {
            left: 100%;

        }
    }
</style>
@endpush