{% extends '@EasyAdmin/page/content.html.twig' %}




{% block main %}
<style>
    .example-wrapper { margin: 1em auto; max-width: 800px; width: 95%; font: 18px/1.5 sans-serif; }
    .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
</style>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <link rel="stylesheet" type="text/css" href="{{ asset('css/sweetalert2.min.css') }}">

    <link rel="stylesheet" type="text/css" href="{{ asset('css/swiper.css') }}">

    <link rel="stylesheet" type="text/css" href="{{ asset('css/animate.css') }}">
<div class="row">


<div class="col-sm-12 "
     style="margin-top: -50px; z-index: 400; background-image: url('{{ asset('background/background_user.jpg') }}');  background-repeat: revert; background-size: cover ">

    <br>

    {% if user.userPicture is not null %}
    <img src="{{ onlinePath }}/media/{{ user.userPicture }}" alt="" style="box-shadow: 0px 0px 20px 0px rgba(252,35,158,0.78);z-index: 200; width: 130px; height: 130px; border-style: solid; border-color: rgba(220,9,161,0.5); border-radius: 50% " class="circle; ">

    {% elseif  user.userPicture is  null  %}
        <img src="{{ asset('img/user/user_testimony.jpg') }}" style="width: 130px; height: 130px" alt="">

    {% endif %}


    <i class="fas fa-camera " style="width: 40px; color: deeppink; font-size: 23px; padding: 6px;  height: 40px; border-radius: 20px; border-style: solid; border-color: deeppink; margin-left: -20px; " data-bs-toggle="tooltip" data-bs-title="Update Your Picture"></i>

    <h2 style="font-family: Lucida Handwriting; font-weight: 600; padding: 10px">Hi, {{  user.firstName}} {{ user.lastName }}</h2>

    <div class="col-sm-12  " style="height: 100px; width: 100%; margin-top: -100px; z-index: 100;

    background: -webkit-linear-gradient(90deg,  rgba(232,22,165,0.2),rgba(255,255,255,0.37)) !important;"></div>

</div>

    <div class="col-sm-12">

        <div class="col-sm-12 " style="margin-top: 20px">

            <h5>Personal Information</h5>
        </div>

        <div class="col-sm-12 " style="height: 2px; margin-top: 10px; width: 100%; color: black; background: #0e4e36">

        </div>

        <form  data-aos="zoom-out-down" data-aos-duration="2000" onsubmit="return false;"   id="update_user_form" >

            <div class="row">

                <div class="col-sm-12 col-md-5">
                    <div class="form-group col-sm-12 ">
                        <label for="lastName">Last Name</label>
                        <input value="{{ user.lastName }}" type="text" class="form-control" id="lastName" aria-describedby="lastNameHelp" placeholder="lastname">
                        <small id="lastNameHelp" class="form-text text-muted">Your LastName.</small>
                    </div>

                </div>
                <div class="col-sm-12 col-md-5">
                    <div class="form-group col-sm-12 ">
                        <label for="firstName">First Name</label>
                        <input value="{{ user.firstName }}" type="text" class="form-control" id="firstName" aria-describedby="firstNameHelp" placeholder="lastname">
                        <small id="firstNameHelp" class="form-text text-muted">Your firstName.</small>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-md-5">
                    <div class="form-group col-sm-12 ">
                        <label for="phoneNumber">phoneNumber</label>
                        <input value="{{ user.phoneNumber }}" type="text" class="form-control" id="phoneNumber" aria-describedby="phoneNumberHelp" placeholder="lastname">
                        <small id="phoneNumberHelp" class="form-text text-muted">Your phoneNumber.</small>
                    </div>

                </div>
                <div class="col-sm-12 col-md-5">
                    <div class="form-group col-sm-12 ">
                        <label for="email"> email</label>
                        <input disabled="disabled" value="{{ user.email }}" type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="email">
                        <small id="emailHelp" class="form-text text-muted">Your email.</small>
                    </div>
                </div>
            </div>



            <div class="col-sm-12 " style="">

                <h5>Location</h5>
            </div>

            <div class="col-sm-12 " style="height: 2px; margin-top: 10px; width: 100%; color: black; background: #0e4e36">

            </div>

            <div class="row">


                <div class="col-sm-12 col-md-4">
                    <div class="form-group col-sm-12 ">
                        <label for="address">Adresse</label>
                        {% if user.address is not null   %}
                        <input value="{{ user.address.location }}" type="text" class="form-control" id="address" aria-describedby="addressHelp" placeholder="address">

                        {% else %}
                            <input value="" type="text" class="form-control" id="address" aria-describedby="addressHelp" placeholder="address">

                        {% endif %}
                        <small id="addressHelp" class="form-text text-muted">Your Adresse.</small>
                    </div>
                </div>


                        {% if user.address is not null   %}

                            {% if user.address.town is not null   %}

                                {% if user.address.town.country is not null   %}

                                <div class="col-sm-12 col-md-4">
                                    <div class=" col-sm-12 ">
                                        <label for="country"> Country</label>
                                         <input disabled="disabled" value="{{ user.address.town.country.countryName }}"
                                                type="text" class="form-control" id="country"
                                                aria-describedby="countryHelp" placeholder="country">
                                        <small id="countryHelp" class="form-text text-muted">Your Country.</small>
                                    </div>
                                </div>
                              {% endif %}
                            {% endif %}
                        {% endif %}


                <div class="col-sm-12 col-md-4">
                    <div class="form-group col-sm-12 " id="">
                        <label for="town"> Town</label>
                        {% if user.address is not null   %}
                            {% if user.address.town is not null   %}

                               <input disabled="disabled" value="{{ user.address.town.townName }}" type="text" class="form-control" id="town" aria-describedby="townHelp" placeholder="town">

                            {% else %}
                                <select class="js-example-basic-single" name="town" id="town" style="width: 100%;   height: 40px; border-color: lightgray; border-style: solid;  ">
                                    {% for town in towns %}
                                        <option value="{{ town.id }}">{{ town.townName }}</option>
                                    {%endfor %}

                                </select>
                            {% endif %}
                        {% else %}
                            <select class="js-example-basic-single" name="town" id="town" style="width: 100%; height: 40px; border-color: lightgray; border-style: solid; border-radius: 10px  ">
                                {% for town in towns %}
                                    <option value="{{ town.id }}">{{ town.townName }} - {{ town.country.countryName }}</option>
                                {%endfor %}

                            </select>
                        {% endif %}
                        <small id="townHelp" class="form-text text-muted">Your Town.</small>
                    </div>
                </div>


            </div>




            <button id="btnSubmitLog"
                    type="submit" class="btn btn-primary col-sm-8 offset-sm-2 col-md-3 offset-md-7"
                    style="height: 40px; margin-top: 20px; margin-bottom: 30px">Update
            <i class="fas fa-user-edit right" style="float: right; right: 0;"></i></button>
        </form>
    </div>



</div>

    {{ parent() }}
    <script src="{{ asset('js/jquery-3.2.1.min.js') }}"></script>
    <script src="{{ asset('js/materialize.min.js') }}"></script>
    <script src="{{ asset('js/sweetalert2.all.min.js') }}"></script>

    <script src="{{ asset('js/slick.js') }}"></script>
    <script src="{{ asset('js/callus.js') }}"></script>
    <script src="{{ asset('js/aes.js') }}"></script>
    <script src="{{ asset('js/tripledes.js') }}"></script>
    <script src="{{ asset('js/enc-base64-min.js') }}"></script>
    <script src="{{ asset('js/index.js') }}"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>


    <script type="text/javascript">

        $(document).ready(function() {



            $('.js-example-basic-single').select2();
        });
        var Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 14000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        });



        var apiBaseUrl="{{ host }}"
        var loginUrl="{{ path('authentication_token') }}";
        $('#update_user_form').submit(function(){
            updateUserForm()
        });


        function updateUserForm() {


            var lastName= $("#lastName").val();
            var firstName= $("#firstName").val();
            var email= $("#email").val();
            var location= $("#address").val();
            var country= $("#country").val();
            var town= $("#town").val();
            var phoneNumber= $("#phoneNumber").val();

            $.ajax({
                method: "POST",
                tryCount  : 0,
                retryLimit  : 4,
                url: " {{ path('app_user_profile_update') }}",
                "headers": {
                    "Content-Type": "application/json"
                },
                // lastName,firstName,email, location,town,country
                data: JSON.stringify({

                    "lastName": lastName,
                    "firstName": firstName,
                    "email": email,
                    "location": location,
                    "town": town,
                    "country": country,
                    "phoneNumber": phoneNumber,
                    "userId":"{{ user.id }}"

                }),
                beforeSend:function () {

                    $("#preloadStep2").removeClass("hide");
                    $("#btnSubmitLog").addClass("disabled").html("login in progress...");
                },
                success: function(data){
                    $("#preloadStep2").addClass("hide");

                    $("#btnSubmitLog").removeClass("disabled").html("Connexion")


                    Toast.fire({
                        icon: 'success',
                        title: "Profile updated"
                    });

                    window.location.reload();

                },
                error:function (xhr, textStatus, errorThrown) {
                    $("#btnSubmitLog").removeClass("disabled").html("Try Again")


                    $("#preloadStep2").addClass("hide");

                    Toast.fire({
                        icon: 'warning',
                        title: "Invalid Username or Password"
                    });



                }

            });


        }



    </script>


{% endblock %}