{# templates/superadmin_v2/devis/sa_devis_edit_devis_form.html.twig #}
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Demande de devis / Mettre à jour</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">ID : {{ devis.id }}</p>

            <form class="form-horizontal" name="edit_devis_form" id="edit_devis_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="ville" class="form-control-label spa-label">Ville</label>
                    </div>
                    <div class="col-12 col-md-4 fg-m-bottom">
                        <input type="text" class="form-control" name="form[ville]" id="ville" value="{{ ville }}">
                    </div>
                    <div class="offset-md-3 col-md-8 fm-error" id="ville-error"></div>
                </div>
                <div class="row form-group fg-m-bottom">
                    <div class="col col-md-3 spa-col-label fg-m-bottom">
                        <label for="cp" class="form-control-label spa-label">Code postal</label>
                    </div>
                    <div class="col-12 col-md-2 fg-m-bottom">
                        <input type="text" class="form-control" name="form[cp]" id="cp" value="{{ cp }}">
                        <input type="hidden" class="form-control" name="form[idVille]" id="idVille" value="{{ devis.idVille }}">
                    </div>
                    <div class="offset-md-3 col-md-8 fm-error" id="cp-error"></div>
                    <div class="offset-md-3 col-md-8">
                        <div id="search_ville">
                            <div class="close_search_ville">X</div>
                            <div class="data_search_ville"></div>
                        </div>
                    </div>
                </div>
                <div class="row form-group fg-m-bottom">
                    <div class="col col-md-3 spa-col-label fg-m-bottom">
                        <label for="adresse" class="form-control-label spa-label">Adresse</label>
                    </div>
                    <div class="col-12 col-md-8 fg-m-bottom">
                        <input type="text" class="form-control" name="form[adresse]" id="adresse" value="{{ devis.adresse }}">
                    </div>
                    <div class="offset-md-3 col-md-8 fm-error" id="adresse-error"></div>
                </div>
                <div class="row form-group fg-m-bottom">
                    <div class="col col-md-3 spa-col-label fg-m-bottom">
                        <label for="adresseFacturation" class="form-control-label spa-label">Adresse facturation</label>
                    </div>
                    <div class="col-12 col-md-8 fg-m-bottom">
                        <textarea class="form-control" name="form[adresseFacturation]" id="adresseFacturation" rows="4" style="resize:none;">{{ devis.adresseFacturation }}</textarea>
                    </div>
                    <div class="offset-md-3 col-md-8 fm-error" id="adresse-facturation-error"></div>
                </div>
                <div class="row form-group fg-m-bottom">
                    <div class="col col-md-3 spa-col-label fg-m-bottom">
                        <label for="tel" class="form-control-label spa-label">Tél. / Mobile</label>
                    </div>
                    <div class="col-12 col-md-3 fg-m-bottom">
                        <input type="text" class="form-control" name="form[tel]" id="tel" value="{{ devis.tel }}">
                    </div>
                    <div class="offset-md-3 col-md-8 fm-error" id="tel-error"></div>
                    <input type="hidden" name="form[inte_tel]" id="inte_tel" value="{{ devis.tel }}">
                </div>
                <div class="row form-group fg-m-bottom">
                    <div class="col col-md-3 spa-col-label fg-m-bottom">
                        <label for="service" class="form-control-label spa-label">Service</label>
                    </div>
                    <div class="col-12 col-md-8 fg-m-bottom">
                        <select class="form-control" name="form[service]" id="service">
                            <option value="0"></option>
                            <optgroup label="Nettoyage">
                            {% for row in nos_services %}
                            <option value="{{ row.id }}"{% if devis.idService == row.id %} selected{% endif %}>{{ row.service_nom }}</option>
                            {% endfor %}
                            </optgroup>
                            <optgroup label="Dépannage">
                            {% for row in nos_depannages %}
                            <option value="{{ row.id }}"{% if devis.idService == row.id %} selected{% endif %}>{{ row.service_nom }}</option>
                            {% endfor %}
                            </optgroup>
                            <optgroup label="Nuisible">
                            {% for row in nos_traitements %}
                            <option value="{{ row.id }}"{% if devis.idService == row.id %} selected{% endif %}>{{ row.service_nom }}</option>
                            {% endfor %}
                            </optgroup>
                        </select>
                    </div>
                    <div class="offset-md-3 col-md-8 fm-error" id="service-error"></div>
                </div>
                <div class="row form-group fg-m-bottom" id="detailService">{{ select_detail_service|raw }}</div>
                <div class="row form-group fg-m-bottom" id="surface_label">
                    <div class="col col-md-3 spa-col-label fg-m-bottom">
                        <label for="surface" class="form-control-label spa-label">
                            {{ devis.surface_lab }}{% if devis.surface_unite|length > 0 %} ({{ devis.surface_unite }}){% endif %}
						</label>
                    </div>
                    <div class="col-12 col-md-2 fg-m-bottom">
                        <input type="text" class="form-control" name="form[surface]" id="surface" value="{{ devis.surface }}">
                    </div>
                    <div class="offset-md-3 col-md-8 fm-error" id="surface-error"></div>
                </div>
                <div class="row form-group fg-m-bottom" id="frequence_label">
                    <div class="col col-md-3 spa-col-label fg-m-bottom">
                        <label class="form-control-label spa-label">{{ devis.frequence_lab }}</label>
                    </div>
                    <div class="col-12 col-md-6 fg-m-bottom">
                        <select for="frequence" class="form-control" name="form[frequence]" id="frequence">
                            <option value="0"></option>
                            {% for row in frequences %}
                            <option value="{{ row.intervention_key }}"{% if devis.frequence == row.intervention_key %} selected{% endif %}>{{ row.intervention_nom }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="offset-md-3 col-md-8 fm-error" id="frequence-error"></div>
                </div>
                <div class="row form-group fg-m-bottom">
                    <div class="col col-md-3 spa-col-label fg-m-bottom">
                        <label for="description" class="form-control-label spa-label">Message</label>
                    </div>
                    <div class="col-12 col-md-8 fg-m-bottom">
                        <textarea class="form-control" name="form[description]" id="description" rows="8" style="resize:none;">{{ devis.description }}</textarea>
                    </div>
                    <div class="offset-md-3 col-md-8 fm-error" id="description-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="edit_devis" id="edit_devis" value="edit_devis">
                    </div>
                    <div class="col-12 col-md-6 fg-m-bottom">
                        <button type="button" id="edit_devis_submit" class="btn btn-info btn-sm btn-block">
                            <i class="zmdi zmdi-refresh"></i>&nbsp; Mettre à jour
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="modal-footer"></div>
    </div>
</div>
<script>

    function validateTel(editDevisTelInput, check) {
        let editDevisTelSelector = $('form#edit_devis_form #tel');
        let editDevisTelVal = editDevisTelSelector.val();
        let editDevisTelLength = editDevisTelVal.length;
        if (editDevisTelLength > 0) {
            let editDevisTelNumber = editDevisTelInput.getNumber();
            let editDevisTelIsValid = editDevisTelInput.isValidNumber();
            if (!editDevisTelIsValid) {
                check += 1;
                $('#tel-error').html('Le n° de tél. "' + editDevisTelVal + '" n\'est pas valide');
                editDevisTelSelector.css({'border': '1px solid #ff0000'}).on('focus', function () {
                    $(this).css({'border': '1px solid #cccccc'});
                    $('#tel-error').html('');
                });
            } else {
                $('form#edit_devis_form #inte_tel').val(editDevisTelNumber);
            }
        } else {
            $('form#edit_devis_form #inte_tel').val('');
        }
        return check;
    }

    $(document).ready(function () {
        var editDevisTelInputField = document.querySelector('form#edit_devis_form input#tel');
        var editDevisTelInput = window.intlTelInput(editDevisTelInputField, {
            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') }}",
        });
        $(document).on('click', 'form#edit_devis_form #edit_devis_submit', function(){
            var check = 0;

            if ($('form#edit_devis_form input#idVille').val() == 0) {
                check += 1;
                $('form#edit_devis_form input#idVille').addClass('is-invalid');
                $('div#ville-error').html("Veuillez choisir une ville");
                $('div#cp-error').html("Veuillez choisir une ville");
                $('form#edit_devis_form input#idVille').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#ville-error').html('');
                    $('div#cp-error').html('');
                });
            }

            if ($('form#edit_devis_form input#adresse').val().length == 0) {
                check += 1;
                $('form#edit_devis_form input#adresse').addClass('is-invalid');
                $('div#adresse-error').html("Veuillez insérer l'adresse");
                $('form#edit_devis_form #adresse').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#adresse-error').html('');
                });
            }

            if ($('form#edit_devis_form select#service').val() == 0) {
                check += 1;
                $('form#edit_devis_form select#service').addClass('is-invalid');
                $('div#service-error').html("Veuillez choisir un service");
                $('form#edit_devis_form select#service').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#service-error').html('');
                });
            }

            if ($('#detailService').html().length > 0 && $('form#edit_devis_form select#detail_service').val() == 0) {
                check += 1;
                $('form#edit_devis_form select#detail_service').addClass('is-invalid');
                $('div#detail-service-error').html("Veuillez choisir un détail service");
                $('form#edit_devis_form select#detail_service').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#detail-service-error').html('');
                });
            }

            if ($('form#edit_devis_form select#frequence').val() == 0) {
                check += 1;
                $('form#edit_devis_form select#frequence').addClass('is-invalid');
                $('div#frequence-error').html("Veuillez remplir ce champ");
                $('form#edit_devis_form select#frequence').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#frequence-error').html('');
                });
            }

            if ($('form#edit_devis_form textarea#description').val().length == 0) {
                check += 1;
                $('form#edit_devis_form textarea#description').addClass('is-invalid');
                $('div#description-error').html("Veuillez insérer la description");
                $('form#edit_devis_form #description').focus(function(){
                    $(this).removeClass('is-invalid');
                    $('div#description-error').html('');
                });
            }
            check = validateTel(editDevisTelInput, check)

            if (check == 0) {
                $('form#edit_devis_form').submit();
                return true;
            } else {
                return false;
            }
        });
    });
</script>