{% extends 'base.html.twig' %}
{% block title %}

{% endblock %}


{% block body %}

    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="container mt-5" style="margin-top: 80px">
        {{ include("layouts/Flash/_flash.html.twig") }}

        <div class="row">
            <div class="col-md-4 col-sm-12">

                {{ include('user/_sidebar.html.twig') }}
            </div>
            <div class="col-xs-12 col-sm-8 col-md-8" style="; background-color: #FFFFFF">

                <h4>{{ 'menu.profil.myinfos'| trans }}</h4>


                <div class="alert alert-danger message error" id="error-msg" style="display: none">

                </div>
                <hr class="colorgraph">

                {{ form_start(form, { 'attr': { 'id': 'form-registration','class': 'xs-campaign' }}) }}

                <div class="row">
                    <div class="col-md-12">
                        <label>{{ 'registration.input.firstname' | trans }}<b></b></label>
                        <div class="form-group">
                            {{ form_row(form.firstname, {'attr' : { 'placeholder' : 'registration.input.firstname' | trans  }}) }}

                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-md-12">
                        <label><b>{{ 'registration.input.lastname' | trans }}</b></label>
                        <div class="form-group">

                            {{ form_row(form.lastname, {'attr' : { 'placeholder' : 'registration.input.lastname' | trans  }}) }}


                        </div>
                    </div>

                </div>

{#                <div class="row">#}
{#                    <div class="col-md-12">#}
{#                        <label><b>{{ 'registration.input.email' | trans }}</b></label>#}
{#                        <div class="form-group">#}

{#                            {{ form_row(form.email, {'attr' : { 'placeholder' : 'registration.input.email' | trans  }}) }}#}

{#                        </div>#}
{#                    </div>#}

{#                </div>#}

                <div class="row">
                    <div class="col-md-12">
                        <label><b>{{ 'registration.input.phone' | trans }}</b></label>
                        <div class="form-group">

                            {{ form_row(form.phone, {'attr' : { 'placeholder' : 'registration.input.phone' | trans, 'class': 'telIput form-control', 'value': user.phone }}) }}
                            <input type="hidden" name="_csrf_token"   value="{{ csrf_token('registration') }}" >
                            <input type="hidden" name="country_code"   id="js-country-code" placeholder="dsfnsld" >

                            <input type="hidden" id="full_fone_number" name="full_fone_number" >
                        </div>
                    </div>

                </div>



                <div class="row">
                    <div class="col-md-12">
                        <label><b>{{ 'registration.input.residence' | trans }}</b></label>
                        <div class="form-group">

                            {{ form_row(form.residence, {'attr' : { 'placeholder' : 'registration.input.residence' | trans  }}) }}

                        </div>
                    </div>

                </div>

                <div class="row">
                    <div class="col-md-12">
                        <label><b>{{ 'registration.input.nationality' | trans }}</b></label>
                        <div class="form-group">

                            {{ form_row(form.nationality, {'attr' : { 'placeholder' : 'registration.input.nationality' | trans  }}) }}

                        </div>
                    </div>

                </div>


                <div class="row">
                    <div class="col-md-12">
                        <label><b>{{ 'registration.input.nationality' | trans }}</b></label>
                        <div class="form-group">

                            {{ form_row(form.birthday, {'attr' : { 'placeholder' : 'registration.input.nationality' | trans  }}) }}

                        </div>
                    </div>

                </div>




                <div class="xs-submit-wraper content-center">
                    <input type="submit" name="submit" value="{{ 'registration.btn'| trans}}" id="btn-submit" class="xs-submit-btn">
                </div>
                {{ form_end(form) }}
            </div>
        </div>

    </div>

{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/css/intlTelInput.css">
    <style type="text/css">
        .intl-tel-input {
            width: 100%;
        }

        .iti-flag {background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/img/flags.png");}

        @media  only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
            .iti-flag {background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/img/flags@2x.png");}
        }
    </style>
{% endblock %}
{% block javascripts %}

    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/js/intlTelInput.min.js"></script>
    <script>

        $(document).ready(function () {

            if ($(".telIput") != null) {

                var telInput = $(".telIput");
                var errorMsg = $('#error-msg');
                var errorMap = ["{% trans %} invalid.mobile.number {% endtrans %}", "{% trans %} invalid.country.code {% endtrans %}", "{% trans %} invalid.mobile.number.short {% endtrans %}", "{% trans %} invalid.mobile.number.long {% endtrans %}", "{% trans %} invalid.mobile.number {% endtrans %}"];

                var iti = $('.telIput').intlTelInput({
                    autoHideDialCode: false,
                    ///   autoPlaceholder: "on",
                    dropdownContainer: "body",
                    //  formatOnDisplay: false,
                    geoIpLookup: function (success, failure) {
                        $.get("http://ipinfo.io", function () {
                        }, "jsonp").always(function (resp) {
                            var countryCode =  "{{ user.countryCode }}";
                            success(countryCode);
                        });
                    },
                    // hiddenInput: "full_number",
                    initialCountry: "auto",
                    // nationalMode: false,
                    //onlyCountries: ['fr', 'gb', 'ch', 'ca', 'do'],
                    placeholderNumberType: "MOBILE",
                    // preferredCountries: ['cn', 'jp'],
                    separateDialCode: true,
                    autoPlaceholder: "aggressive",
                    formatOnDisplay: true,
                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/12.0.3/js/utils.js"
                });


                var reset = function () {
                    telInput.removeClass("is-invalid");
                    errorMsg.text("");
                    errorMsg.hide();
                    $("#btn-submit").prop('disabled', false);
                };


                telInput.on('blur', function () {
                    reset();
                    if (telInput.val().trim()) {
                        if (!$('.telIput').intlTelInput("isValidNumber")) {

                            telInput.addClass("is-invalid");
                            var errorCode = telInput.intlTelInput("getValidationError");

                            errorMsg.text(errorMap[errorCode]);
                            errorMsg.show();
                            $("#btn-submit").prop('disabled', true);
                        }
                    }
                });

// on keyup / change flag: reset
                telInput.on('change', reset);
                telInput.on('keyup', reset);


                $("#form-registration").submit(function () {
                    $("#full_fone_number").val(telInput.intlTelInput("getNumber"));
                    $("#js-country-code").val(telInput.intlTelInput("getSelectedCountryData").iso2);
                });
            }

        });

    </script>
{% endblock %}