{# templates/superadmin_v2/artisans/sa_gestion_artisans_add.html.twig #}
{% extends 'superadmin_v2/superadmin.html.twig' %}

{% block title %}Ajouter Artisan - {{ parent() }}{% endblock %}

{% block body %}
    {{ render(controller('App\\Controller\\Superadmin\\SaLayoutController::breadcrumb', {'rubriques_id':rubriques_id, 'action':filariane_action} )) }}

    {{ include('superadmin_v2/layout/sa_tab.html.twig') }}

    <div class="section__content section__content--p30">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    {{ form_start(form, {'attr': {'class':'form-horizontal', 'id':'ge_artisan_form', 'name':'ge_artisan_form', 'method':'post', 'action':path('superadmin_gestion_artisans_add')}}) }}
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.societe, "Société *", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-4 fg-m-bottom">
                                {{ form_widget(form.societe, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-societe">{{ form_errors(form.societe) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.gerant, "Gérant", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-4 fg-m-bottom">
                                {{ form_widget(form.gerant, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-gerant">{{ form_errors(form.gerant) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.adresse, "Adresse *", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-4 fg-m-bottom">
                                {{ form_widget(form.adresse, {'attr': {'class':'form-control', 'style':'resize:none;', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-adresse">{{ form_errors(form.adresse) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.ville, "Ville *", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-3 fg-m-bottom">
                                {{ form_widget(form.ville, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-ville">{{ form_errors(form.ville) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.cp, "Code postal *", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-2 fg-m-bottom">
                                {{ form_widget(form.cp, {'attr': {'class':'form-control', 'maxlength':'5', 'size':'5', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-cp">{{ form_errors(form.cp) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.email, "Email", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-4 fg-m-bottom">
                                {{ form_widget(form.email, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-email">{{ form_errors(form.email) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.tel, "Tél.", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-3 fg-m-bottom">
                                {{ form_widget(form.tel, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-tel">{{ form_errors(form.tel) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.mobile, "Mobile", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-3 fg-m-bottom">
                                {{ form_widget(form.mobile, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-mobile">{{ form_errors(form.mobile) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.mobileBis, "Tél. / Mobile (2)", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-3 fg-m-bottom">
                                {{ form_widget(form.mobileBis, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-mobile-bis">{{ form_errors(form.mobileBis) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.mobileTrois, "Mobile (3)", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-3 fg-m-bottom">
                                {{ form_widget(form.mobileTrois, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-mobile-trois">{{ form_errors(form.mobileTrois) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.siret, "N° SIRET", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-4 fg-m-bottom">
                                {{ form_widget(form.siret, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-siret">{{ form_errors(form.siret) }}</div>
                        </div>
                        <div class="row form-group fg-m-bottom">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                {{ form_label(form.tva, "N° TVA", {'label_attr': {'class':'form-control-label spa-label'}}) }}
                            </div>
                            <div class="col-12 col-md-4 fg-m-bottom">
                                {{ form_widget(form.tva, {'attr': {'class':'form-control', 'autocomplete':'none'}}) }}
                            </div>
                            <div class="offset-md-2 col-md-8 fm-error" id="error-artisan-tva">{{ form_errors(form.tva) }}</div>
                        </div>

                        {# <div class="row form-group fg-m-bottom" style="margin-bottom:24px;">
                            <div class="col col-md-2 spa-col-label fg-m-bottom">
                                <label class="form-control-label spa-label">Services</label>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-check">
                                    {% for key, value in nos_services %}
                                    <div class="checkbox">
                                        <label for="form_services_{{ key }}" class="form-check-label">
                                            <input type="checkbox" class="form-check-input" id="form_services_{{ key }}" name="form[services][]" value="{{ key }}"> {{ value }}
                                        </label>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-check">
                                    {% for key, value in nos_depannages %}
                                    <div class="checkbox">
                                        <label for="form_services_{{ key }}" class="form-check-label">
                                            <input type="checkbox" class="form-check-input" id="form_services_{{ key }}" name="form[services][]" value="{{ key }}"> {{ value }}
                                        </label>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-check">
                                    {% for key, value in nos_traitements %}
                                    <div class="checkbox">
                                        <label for="form_services_{{ key }}" class="form-check-label">
                                            <input type="checkbox" class="form-check-input" id="form_services_{{ key }}" name="form[services][]" value="{{ key }}"> {{ value }}
                                        </label>
                                    </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div> #}

                        <div class="row form-group">
                            <div class="col col-md-2"></div>
                            <div class="col-12 col-md-4">
                                <button type="button" id="add_ge_artisan" class="btn btn-info btn-sm btn-block">
                                    <!--i class="zmdi zmdi-refresh"></i>&nbsp;--> Ajouter
                                </button>
                                <input type="hidden" id="form_pass_email" name="form[pass_email]" value="0">
                            </div>
                        </div>
                    {{ form_end(form) }}
                </div>
            </div>

            {{ include('superadmin_v2/layout/sa_footer.html.twig') }}
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
    // <![CDATA[
    $(document).ready(function(){
        $(document).on('keypress', 'form#ge_artisan_form #form_cp', function(e) {
            if ( e.which!=8 && e.which!=0 && (e.which<48 || e.which>57)) {
                return false;
            }
        });

        $(document).on('keyup', 'form#ge_artisan_form #form_email', function() {
            var ge_artisan_email = $('form#ge_artisan_form #form_email').val();
            var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (ge_artisan_email.length > 5 && regex.test(ge_artisan_email)) {
                //alert(ge_artisan_email);
                $.ajax({
                    url : "{{ path('superadmin_gestion_artisans_check_email') }}",
                    type : 'POST',
                    data : {email:ge_artisan_email},
                    dataType : 'json',
                    success : function(response){
                        if (response.code == 200) {
                            $('form#ge_artisan_form input#form_pass_email').val(response.value);
                        }
                    },
                    error : function(e){
                    }
                });
            }                
        });

        var addArtisanTelInputField = document.querySelector('form#ge_artisan_form input#form_tel');
        var addArtisanTelInput = window.intlTelInput(addArtisanTelInputField, {
            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') }}",
        });
        var addArtisanMobileInputField = document.querySelector('form#ge_artisan_form input#form_mobile');
        var addArtisanMobileInput = window.intlTelInput(addArtisanMobileInputField, {
            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') }}",
        });
        var addArtisanMobileBisInputField = document.querySelector('form#ge_artisan_form input#form_mobileBis');
        var addArtisanMobileBisInput = window.intlTelInput(addArtisanMobileBisInputField, {
            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') }}",
        });
        var addArtisanMobileTroisInputField = document.querySelector('form#ge_artisan_form input#form_mobileTrois');
        var addArtisanMobileTroisInput = window.intlTelInput(addArtisanMobileTroisInputField, {
            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#ge_artisan_form #form_tel', function(e) {
            if (e.which != 43 && e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                return false;
            }
        });

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

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

        $(document).on('click', '#add_ge_artisan', function(){
            var ckeck = 0;
            
            if ($('form#ge_artisan_form #form_societe').val().length == 0) {	
                ckeck += 1;
                $('#error-artisan-societe').html('Veuillez insérer le nom de société');
                $('form#ge_artisan_form #form_societe').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-artisan-societe').html('');
                });
            }
            /* if ($('form#ge_artisan_form #form_gerant').val().length == 0) {	
                ckeck += 1;
                $('#error-artisan-gerant').html('Veuillez insérer le nom de gérant');
                $('form#ge_artisan_form #form_gerant').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-artisan-gerant').html('');
                });
            } */
            if ($('form#ge_artisan_form #form_adresse').val().length == 0) {	
                ckeck += 1;
                $('#error-artisan-adresse').html('Veuillez insérer l\'adresse');
                $('form#ge_artisan_form #form_adresse').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-artisan-adresse').html('');
                });
            }
            if ($('form#ge_artisan_form #form_ville').val().length == 0) {	
                ckeck += 1;
                $('#error-artisan-ville').html('Veuillez insérer la ville');
                $('form#ge_artisan_form #form_ville').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-artisan-ville').html('');
                });
            }
            if ($('form#ge_artisan_form #form_cp').val().length != 5) {	
                ckeck += 1;
                $('#error-artisan-cp').html('Veuillez insérer le code postal');
                $('form#ge_artisan_form #form_cp').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-artisan-cp').html('');
                });
            }
            var artisan_form_email = $('form#ge_artisan_form #form_email').val();
            /* if (artisan_form_email.length == 0) {		
                ckeck += 1;
                $('#error-artisan-email').html('Veuillez insérer l\'email');
                $('form#ge_artisan_form #form_email').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-artisan-email').html('');
                });            
            } */
            var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
            if (artisan_form_email.length > 0 && !regex.test(artisan_form_email)) {		
                ckeck += 1;
                $('#error-artisan-email').html('Email "' + artisan_form_email + '" n\'est pas valide');
                $('form#ge_artisan_form #form_email').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-artisan-email').html('');
                });            
            }
            if ((artisan_form_email.length > 0 && regex.test(artisan_form_email)) && $('form#ge_artisan_form #form_pass_email').val() == 0) {	
                ckeck += 1;
                $('#error-artisan-email').html('Email existe déjà !');
                $('form#ge_artisan_form #form_email').addClass('is-invalid').on('focus', function(){
                    $(this).removeClass('is-invalid');
                    $('#error-artisan-email').html('');
                });
            }

            var addArtisanTelSelector = $('form#ge_artisan_form #form_tel');
            var addArtisanTelVal = addArtisanTelSelector.val();
            var addArtisanTelLength = addArtisanTelVal.length;
            if (addArtisanTelLength > 0) {
                var addArtisanTelNumber = addArtisanTelInput.getNumber();
                var addArtisanTelIsValid = addArtisanTelInput.isValidNumber();
                var addArtisanTelType = addArtisanTelInput.getNumberType();
                if (!addArtisanTelIsValid) {
                    ckeck += 1;
                    $('#error-artisan-tel').html('Le n° de tél. "' + addArtisanTelVal + '" n\'est pas valide');
                    addArtisanTelSelector.css({'border':'1px solid #ff0000'}).on('focus', function(){
                        $(this).css({'border':'1px solid #cccccc'});
                        $('#error-artisan-tel').html('');
                    });
                } else {
                    $('form#ge_artisan_form #form_inteTel').val(addArtisanTelNumber);
                }
            } else {
                $('form#ge_artisan_form #form_inteTel').val('');
            }

            var addArtisanMobileSelector = $('form#ge_artisan_form #form_mobile');
            var addArtisanMobileVal = addArtisanMobileSelector.val();
            var addArtisanMobileLength = addArtisanMobileVal.length;
            if (addArtisanMobileLength > 0) {
                var addArtisanMobileNumber = addArtisanMobileInput.getNumber();
                var addArtisanMobileIsValid = addArtisanMobileInput.isValidNumber();
                var addArtisanMobileType = addArtisanMobileInput.getNumberType();
                if (!addArtisanMobileIsValid || addArtisanMobileType !== intlTelInputUtils.numberType.MOBILE) {
                    ckeck += 1;
                    $('#error-artisan-mobile').html('Veuillez insérer un n° de tél. mobile');
                    addArtisanMobileSelector.css({'border':'1px solid #ff0000'}).on('focus', function(){
                        $(this).css({'border':'1px solid #cccccc'});
                        $('#error-artisan-mobile').html('');
                    });
                } else {
                    $('form#ge_artisan_form #form_inteMobile').val(addArtisanMobileNumber);
                }
            } else {
                $('form#ge_artisan_form #form_inteMobile').val('');
            }

            var addArtisanMobileBisSelector = $('form#ge_artisan_form #form_mobileBis');
            var addArtisanMobileBisVal = addArtisanMobileBisSelector.val();
            var addArtisanMobileBisLength = addArtisanMobileBisVal.length;
            if (addArtisanMobileBisLength > 0) {
                var addArtisanMobileBisNumber = addArtisanMobileBisInput.getNumber();
                var addArtisanMobileBisIsValid = addArtisanMobileBisInput.isValidNumber();
                var addArtisanMobileBisType = addArtisanMobileBisInput.getNumberType();
                if (!addArtisanMobileBisIsValid) {
                    ckeck += 1;
                    $('#error-artisan-mobile-bis').html('Le n° de tél. "' + addArtisanMobileBisVal + '" n\'est pas valide');
                    addArtisanMobileBisSelector.css({'border':'1px solid #ff0000'}).on('focus', function(){
                        $(this).css({'border':'1px solid #cccccc'});
                        $('#error-artisan-mobile-bis').html('');
                    });
                } else {
                    $('form#ge_artisan_form #form_inteMobileBis').val(addArtisanMobileBisNumber);
                }
            } else {
                $('form#ge_artisan_form #form_inteMobileBis').val('');
            }

            var addArtisanMobileTroisSelector = $('form#ge_artisan_form #form_mobileTrois');
            var addArtisanMobileTroisVal = addArtisanMobileTroisSelector.val();
            var addArtisanMobileTroisLength = addArtisanMobileTroisVal.length;
            if (addArtisanMobileTroisLength > 0) {
                var addArtisanMobileTroisNumber = addArtisanMobileTroisInput.getNumber();
                var addArtisanMobileTroisIsValid = addArtisanMobileTroisInput.isValidNumber();
                var addArtisanMobileTroisType = addArtisanMobileTroisInput.getNumberType();
                if (!addArtisanMobileTroisIsValid || addArtisanMobileTroisType !== intlTelInputUtils.numberType.MOBILE) {
                    ckeck += 1;
                    $('#error-artisan-mobile-trois').html('Veuillez insérer un n° de tél. mobile');
                    addArtisanMobileTroisSelector.css({'border':'1px solid #ff0000'}).on('focus', function(){
                        $(this).css({'border':'1px solid #cccccc'});
                        $('#error-artisan-mobile-trois').html('');
                    });
                } else {
                    $('form#ge_artisan_form #form_inteMobileTrois').val(addArtisanMobileTroisNumber);
                }
            } else {
                $('form#ge_artisan_form #form_inteMobileTrois').val('');
            }

            if (ckeck == 0) {
                $('form#ge_artisan_form').submit();
                return true;
            } else {
                return false;
            }
        });
    });
    // ]]>
    </script>
{% endblock %}