@extends($activeTemplate.'layouts.master')
@section('content')
<div class="col-xl-9 ps-xl-4">
    <h4 class="section-title text-center">Upload Photo</h4>
    <div class="custom--card mt-4">

        <form id="user-image-update" enctype="multipart/form-data">
            <div class="text-center">
                <div class="avatar-preview mt-2">
                    <div id="imagePreviewBody"
                        style="background-image: url('{{ getImage(getFilePath('user').'/'.$user->image,getFileSize('user')) }}');">
                    </div>
                </div>

                <p class="text--danger text-center">Only jpg, jpeg, png image file is allowed. Maximum file size is 1 MB. File Resolution must be {{ getFileSize('user') }} px.</p>

                <div class="photo-upload">
                    <input type='file' id="imageUpload" name="profile_image" accept=".png, .jpg, .jpeg" />
                    <label for="imageUpload" class="btn btn-sm btn--base" 
                            data-bs-toggle="tooltip"
                            title="@lang('Only jpg, jpeg, png image supported & file size is ') {{ getFileSize('user') }}@lang('px')">
                        <i class="las la-upload fs--18px"></i> Upload Photo
                    </label>
                </div>
            </div>
        </form>

    </div>

    <div class="navigator">
        <div class="left mt-4">
            <a href="{{ route('user.employment.index') }}" class="btn btn--base btn">Experience <i class="fas fa-angle-double-right"></i></a>
        </div> 
        <div class="right mt-4">
            <a href="{{ route('user.pdf.view') }}" class="btn btn--base btn">Upload Document <i class="fas fa-angle-double-right"></i></a>
        </div> 
    </div>
</div>
@endsection

@push('style')
    <style>
        .document-frame{
            width:100%;
            min-height:640px;
        }
    </style>
@endpush