{# templates/client_v2/client_edit_mobile_form.html.twig #}
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Modifier mon n° de tél. mobile</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="$('#app_modal').modal('hide');">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <p class="p-modal">&nbsp;</p>

            <form class="form-horizontal" name="edit_mobile_form" id="edit_mobile_form" method="post" action="">
                <div class="row form-group fg-m-bottom">
                    <div class="col col-md-3 spa-col-label fg-m-bottom">
                        <label for="mobile" class="form-control-label spa-label">Tél. mobile</label>
                    </div>
                    <div class="col-12 col-md-8 fg-m-bottom">
                        <input type="text" class="form-control" name="form[mobile]" id="mobile" value="{{ devis.tel }}">
                    </div>
                    <div class="offset-md-3 col-md-8 fm-error" id="mobile-error"></div>
                </div>
                <div class="row form-group fg-m-bottom">
                    <div class="col col-md-3 spa-col-label fg-m-bottom">
                        <input type="hidden" name="form[devis]" id="devis" value="{{ devis.id }}">
                        <input type="hidden" name="form[inte_mobile]" id="inte_mobile" value="{{ devis.tel }}">
                        <input type="hidden" name="edit_mobile" id="edit_mobile" value="edit_mobile">
                    </div>
                    <div class="col-12 col-md-6 fg-m-bottom">
                        <button type="button" id="edit_mobile_submit" class="btn btn-info btn-sm btn-block">
                            <i class="zmdi zmdi-refresh"></i>&nbsp; Envoyer
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer"></div>
    </div>
</div>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function(){
    var phoneInputField = document.querySelector('form#edit_mobile_form input#mobile');
    var phoneInput = window.intlTelInput(phoneInputField, {
        preferredCountries: ['fr', 'gp', 'mq', 'gf', 're', 'yt', 'mc', 'pf', 'be', 'ch', 'es', 'it', 'de', 'lu', 'gb'],
        separateDialCode: true,
        utilsScript:"{{ asset('plugins/intl-tel-input/17.0.8/js/utils.min.js') }}",
    });
    $('div.iti').css({'display':'block'});

    $(document).on('keypress', 'form#edit_mobile_form #mobile', function(e) {
        if (e.which != 43 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
            return false;
        }
    });

    $(document).on('click', 'form#edit_mobile_form #edit_mobile_submit', function(){
        var ckeck = 0;

        var devisTelSelector = $('form#edit_mobile_form #mobile');
        var devisTelVal = devisTelSelector.val();
        var devisTelLength = devisTelVal.length;
        if (devisTelLength == 0) {
            ckeck += 1;
            $('#mobile-error').html('Veuillez insérer le n° de tél.');
            devisTelSelector.css({'border':'1px solid #ff0000'}).on('focus', function(){
                $(this).css({'border':'1px solid #cccccc'});
                $('#mobile-error').html('');
            });
        } else if (devisTelLength > 0) {
            var telNumber = phoneInput.getNumber();
            var telIsValid = phoneInput.isValidNumber();
            var telType = phoneInput.getNumberType();
            if (!telIsValid) {
                ckeck += 1;
                $('#mobile-error').html('Le n° de tél. "' + devisTelVal + '" n\'est pas valide');
                devisTelSelector.css({'border':'1px solid #ff0000'}).on('focus', function(){
                    $(this).css({'border':'1px solid #cccccc'});
                    $('#mobile-error').html('');
                });
            } else {
                if (telType !== intlTelInputUtils.numberType.MOBILE) {
                    ckeck += 1;
                    $('#mobile-error').html('Veuillez insérer un n° de tél. mobile');
                    devisTelSelector.css({'border':'1px solid #ff0000'}).on('focus', function(){
                        $(this).css({'border':'1px solid #cccccc'});
                        $('#mobile-error').html('');
                    });
                } else {
                    $('form#edit_mobile_form #inte_mobile').val(telNumber);
                }
            }
        }

        if (ckeck == 0) {
            $('form#edit_mobile_form').submit();
            return true;
        } else {
            return false;
        }
    });

});
// ]]>
</script>