@extends('web.layouts.container')
@section('content')
    <section class="inner_header">
        <img src="{{asset('assets/web/images/icons/inner.svg')}}" alt="" class="inner_shap">
        <div class="container">
            <ul class="links">
                <li>
                    <a href="{{LaravelLocalization::getLocalizedURL($lang, route('home'), [], true)}}">{{__('main.home')}}</a>
                </li>
                <li>
                    <a href="#">{{__('members.my_profile')}}</a>
                </li>
            </ul>
            <h4>{{__('members.my_profile')}}</h4>
        </div>
    </section>

    <section class="profile-pg section_padding">
        <div class="container">
            <form method="post" action="{{route('user.updateProfile', $user)}}" class="update_profile_form">
            <div class="user_img">
                <div class="img">
                    <img id="img-profile" class="img-fluid image-profile"
                         src="{{asset($user->photo ?? 'assets/web/images/person.png')}}" alt="your image">
                    <a class="up__btn" href="#"><i class="bi bi-pen"></i></a>
                    <input type="file" name="photo" class="custom-file-input" id="input-profile"
                           onchange="readURL(this);" required />
                </div>
            </div>
            <div class="inner">
                    <div class="row justify-content-center">
                        <div class="col-md-6">
                            <div class="form-group">
                                <input dir="auto" name="name" type="text" value="{{$user->name}}" class="form-control" placeholder="{{__('members.name')}}"/>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <input dir="auto" name="email" type="email" value="{{$user->email}}" class="form-control" placeholder="{{__('members.email')}}"/>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <select name="city_id" class="form-control">
                                    <option selected disabled>{{__('members.city_id')}}</option>
                                    @if(count($cities))
                                        @foreach($cities as $city)
                                            <option {{$user->city_id == $city->id ? 'selected' : ''}} value="{{$city->id}}">{{$city->name}}</option>
                                        @endforeach
                                    @endif
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <select name="gender" class="form-control">
                                    <option selected disabled>{{__('members.gender')}}</option>
                                    <option {{$user->gender == 'male' ? 'selected' : ''}} value="male">{{__('members.male')}}</option>
                                    <option {{$user->gender == 'female' ? 'selected' : ''}} value="female">{{__('members.female')}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <input dir="auto" name="employer" type="text" value="{{$user->employer}}" class="form-control" placeholder="{{__('members.employer')}}"/>
                            </div>
                        </div>
                        <div class="col-md-12 mt-4">
                            <button class="submit-butn butn m-auto d-block update_profile_button"><span><b> {{__('members.sve_data')}} </b></span></button>
                        </div>
                    </div>
            </div>
            </form>
        </div>
    </section>

    <div class="modal confirmConsult save_data_modal fade" id="confirmConsult" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body">
                    <img src="{{asset('assets/web/images/icons/confirm.png')}}" alt="" class="icon"/>
                    <div class="content text-center mt-4">
                        <h3 class="title text-dark mb-2"><b>{{__('members.save_successfully')}}</b></h3>
                    </div>
                </div>
            </div>
        </div>
    </div>


@endsection

@section('inner_js')
    <script>
        $('.update_profile_button').click(async function (e) {
            e.preventDefault();
            $(this).attr('disabled', true);
            let form = $('.update_profile_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            data.append('update_profile', true);

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method,
                contentType: false,
                processData: false,
            });

            if (response.errors) {
                $(this).attr('disabled', false);
                toasterError(response.errors);
            }
            if (response.message) {
                let myModal = new bootstrap.Modal(document.querySelector('.save_data_modal'));
                myModal.show();
                setTimeout(function () {
                   window.location.href = response.url;
                }, 1000);
            }
        });

        // $('.save_data_modal').on('hide.bs.modal', function () {
        //     window.location.reload();
        // });


        $(function() {
            $("#input-profile").change(function() {
                readURL1(this);
            });
        });

        function readURL1(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    //alert(e.target.result);
                    $('#img-profile').attr('src', e.target.result);
                    $('#saveImage').fadeIn();
                }
                reader.readAsDataURL(input.files[0]);
            }
        }

    </script>
@endsection