@php
$employer=auth()->guard('employer')->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.')">
                        <i class="las la-pencil-alt"></i>
                    </label>
                </div>
                <div class="avatar-preview">
                    <div id="imagePreview"
                        style="background-image: url('{{ getImage(getFilePath('employer').'/'.$employer->image) }}');">
                    </div>
                </div>
            </div>
        </form>
        <div class="text-center">
            <h6 class="mt-3">{{$employer->company_name}}</h6>
            <span class="text--base mt-3">Email: {{$employer->email}}</span>
            <span class="text--base">Username: {{$employer->username}}</span>
        </div>
        <ul class="dashboard-sidebar__menu mt-3">
            <li>
                <a href="{{route('employer.home')}}" class="{{ menuActive('employer.home') }}">
                    <i class="las la-tachometer-alt"></i>@lang('Dashboard')
                </a>
            </li>
            <li>
                <a href="{{route('employer.job.create')}}" class="{{menuActive('employer.job.create')}}">
                    <i class="las la-school"></i>@lang('Create Job')
                </a>
            </li>
            <li>
                <a href="{{route('employer.job.index')}}" class="{{ menuActive('employer.job.index') }}">
                    <i class="las la-landmark"></i> @lang('All Job')
                </a>
            </li>

            <!-- <li>
                <a href="{{route('employer.profile.setting')}}" class="{{ menuActive('employer.profile.setting') }}">
                    <i class="las la-edit"></i>@lang('Profile Update')
                </a>
            </li>
            <li>
                <a href="{{route('employer.deposit.history') }}" class="{{ menuActive('employer.deposit*') }}">
                    <i class="lar la-file"></i>@lang('Deposit')
                </a>
            </li>
            <li>
                <a href="{{route('employer.ticket.index')}}" class="{{ menuActive('employer.ticket*') }}">
                    <i class="lar la-bookmark"></i>@lang('Support')
                </a>
            </li>  
            <li>
                <a href="{{route('employer.transactions')}}" class="{{menuActive('employer.transactions')}}">
                    <i class="las la-tablet-alt"></i>@lang('Transaction')
                </a>
            </li> -->
            <li>
                <a href="{{route('employer.change.password')}}" class="{{ menuActive('employer.change.password') }}">
                    <i class="las la-lock-open"></i>@lang('Change Password')
                </a>
            </li>
            <li>
                <a href="{{route('employer.twofactor')}}" class="{{ menuActive('employer.twofactor') }}">
                    <i class="las la-key"></i>@lang('2FA Security')
                </a>
            </li>
            <li>
                <a href="{{route('employer.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('employer.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('employer').'/:image') }}`;
                        $('#imagePreview').css({
                            "background-image": `url('${imageUrl.replace('default.png', `employer/${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;
    }

    .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-upload .avatar-preview {
        width: 100%;
        height: 100%;
        position: relative;
        background: gray;
        box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        border-radius: inherit;
    }

    .avatar-upload .avatar-preview>div {
        width: 100%;
        height: 100%;
        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