{!! $app->show_message() !!}
<style>
    .bi-key:before {
        content: "\f44f";
        transform: rotate(135deg);
        font-size: 20px;
    }
</style>
<form method="POST" enctype="multipart/form-data" id="profile_setup_frm" action="{{lurl('app/user.profile/edit')}}">
    <div class="global-actions">
        <div class="left-content">
            <h4 class="global-title">{{__("Настройки пользователя")}}</h4>
        </div>
        <div class="right-content">
            <button name="submit" value="save" class="btn btn-success" type="submit"><i class="bi bi-save"></i>{{__(" Сохранить")}}</button>
            <button name="back" value="back" class="btn btn-primary" id="back_btn" type="button"><i class="bi bi-back"></i>{{__(" Закрыть")}}</button>
        </div>
    </div>
    <div class="card user-edit-card">
        <div class="card-body user-edit">
            <div class="row justify-content-center align-content-center">
                <div class="col-12 col-lg-3 col-xl-2 d-flex align-items-center justify-content-center me-md-0 me-xl-3">
                    <div class="d-flex flex-column align-items-center text-center img-container">
                        @php($profile_image = auth()->user()->profile_image)
                        <label class="img-profile-edit">
                            <img src="@if($profile_image == null) {{ asset("img/avatar.png") }}  @else {{ asset("storage/$profile_image") }} @endif" id="image_preview_container">
                            <input type="file" name="profile_image" id="profile_image"  class="d-none">
                        </label>
                    </div>
                </div>
                @csrf
                <div class="col-12 col-md-9 col-xl-9 mt-3">
                    <div class="d-flex justify-content-center align-items-center flex-column">
                        <label class="labels"><span style="width: 20px; height: 20px; background-color: #01b0e8; color: white; border-radius: 50%; padding: 5px 8px"><i class="bi bi-pen"></i></span>{{__(" Редактировать профиль")}}</label>
                    </div>
                    <div class="row mt-3">
                        <div class="col-lg-6 mb-3">
                            <label class="labels">{{__("Имя")}}</label>
                            <input type="text" name="name" class="form-control" placeholder="first name" value="{{ auth()->user()->name }}">
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="labels"> {{__("Почта")}}</label>
                            <input type="text" name="email" class="form-control" value="{{ auth()->user()->email }}" placeholder="Email">
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-lg-6 mb-3">
                            <label class="labels">{{__("Телефон")}}</label>
                            <input type="text" name="phone" id="phone" class="form-control mobile" placeholder="" value="{{ auth()->user()->phone }}">
                        </div>
                        <div class="col-lg-6 mb-3">
                            <label class="labels">{{__("О себе")}}</label>
                            <input type="text" name="about" class="form-control" value="{{ auth()->user()->about }}" placeholder="About">
                        </div>
                    </div>
                    <div class="d-flex justify-content-center align-items-center flex-column mt-3">
                        <label class="labels"><span style="width: 20px; height: 20px; background-color: #01b0e8; color: white; border-radius: 50%; padding: 7px 6px 3px 6px"><i class="bi bi-key"></i></span>{{__(" Сменить пароль")}}</label>
                    </div>
                    <div class="row mt-2">
                    <div class="col-lg-6 mb-3">
                        <label for="current_password" class="col-form-label">{{ __('Текущий пароль') }}</label>
                        <input id="current_password" type="password" class="form-control" name="current_password" autocomplete="off-current-password">
                    </div>
                    <div class="col-lg-6 mb-3">
                        <label for="new_password" class="col-form-label">{{ __('Новый пароль') }}</label>
                        <input id="new_password" type="password" class="form-control" name="new_password" autocomplete="new-password">
                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<x-component name="Js.After" :params="['app'=>$app]" />
<script>
    $(document).ready(function(){

        $("#profile_image").change(function(){
            let reader = new FileReader();

            reader.onload = (e) => {
                $("#image_preview_container").attr('src', e.target.result);
            }
            reader.readAsDataURL(this.files[0]);
        })

        document.getElementById('back_btn').addEventListener('click', function() {
            let current_url = window.location.href;
            window.location.href = current_url.replace('/edit', '');
        });
    })
</script>