{% extends 'menuback.html.twig' %}

{% block stylesheets %}
{{parent()}}
<style>
    #btnSearch {
        float: right;
        margin-right: 30%;

    }

    #loading {
        position: absolute;

            {
            # position: fixed;
            #
        }

            {
            # border: 1px solid #0d9243;
            #
        }

        display:none;

            {
            # margin: auto;
            #
        }

        right: 40%;
        top:300px;

    }

    .hidden {
        display: none;
    }


    #progress {
        position: absolute;
        width: 20%;
        margin-top: -2%;
        margin-left: 54%;
        display: none;

    }
</style>

{% endblock %}

{% block body %}
<div class="main-content" style="min-height: 568px;">
    <section class="section">
        {{ form_start(form) }}
        <center>
            <h1> <b style="color:crimson;font-size:19px;"> Ajouter une commande</b></h1>
            <p id="msgerror" style="color: red; text-align: center;"></p>
        </center>
        <div class="row">
            <div class="col-md-6">

                <div class="card">
                    <div class="card-header">

                        <h4>Informations client</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table dataTable table-striped">
                                <tbody>
                                    <tr>
                                        <div class="form-group col-md-12">
                                            {{ form_widget(form.nom, {'attr': {'class': 'form-control','placeholder':'Nom'}})
                                            }}
                                            <div class="invalid-feedback">
                                                {{ form_errors(form.nom) }}
                                            </div>

                                    </tr>

                                    <tr>
                                        <div class="form-group col-md-12">
                                            {{ form_widget(form.prenoms, {'attr': {'class': 'form-control','placeholder':'Prenoms'}})
                                            }}
                                            <div class="invalid-feedback">
                                                {{ form_errors(form.prenoms) }}
                                            </div>
                                        </div>

                                    </tr>

                                    <tr>
                                        <div class="form-group col-md-12">
                                            {{ form_widget(form.email, {'attr': {'class': 'form-control','placeholder':'email client'}})
                                            }}
                                            <div class="invalid-feedback">
                                                {{ form_errors(form.email) }}
                                            </div>
                                        </div>

                                    </tr>

                                    <tr>
                                        <div class="form-group col-md-12">
                                            AGENCE DE TRAITEMENT
                                            {{ form_widget(form.uotreich, {'attr': {'class': 'form-control'}}) }}
                                            <div class="invalid-feedback">
                                                {{ form_errors(form.uotreich) }}
                                            </div>
                                        </div>

                                    </tr>

                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">

                        <h4>Informations de livraison</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table dataTable table-striped">
                                <tbody>

                                    <tr>
                                        <div class="form-group col-md-12">



                                            {{ form_widget(form.priorite) }}
                                            <div class="invalid-feedback">
                                                {{ form_errors(form.priorite) }}
                                            </div>
                                        </div>


                                    </tr>
                                    <tr>
                                        <div class="form-group col-md-12">



                                            {{ form_widget(form.typecommune, {'attr': {'class': 'js-example-basic-single1' }})
                                            }}
                                            <div class="invalid-feedback">
                                                {{ form_errors(form.typecommune) }}
                                            </div>
                                        </div>


                                    </tr>
                                    <tr>
                                        <div class="form-group col-md-12">



                                            {{ form_widget(form.adresseclientlivraison, {'attr': {'class': 'form-control','placeholder':'Adresse de livraison'}})
                                            }}
                                            <div class="invalid-feedback">
                                                {{ form_errors(form.adresseclientlivraison) }}
                                            </div>
                                        </div>


                                    </tr>
                                    <tr>
                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <div class="label-1">
                                                    <span id="mobile-valid" class="hidden mob" style="color:green;">
                                                        <i class="fa fa-check pwd-valid"></i>Numero valide
                                                    </span>
                                                    <span id="folio-invalid" class="hidden mob-helpers"
                                                        style="color:red;">
                                                        <i class="fa fa-times mobile-invalid"></i>Numero non valide
                                                    </span>
                                                </div>
                                                {{ form_widget(form.telephone, {'attr': {'class': 'form-control','placeholder':'Saisir contact 1'}})
                                                }}
                                                <a id="btnSearch" class="btn btn-success "
                                                    style="display: none;">Rechercher</a>

                                                <div class="invalid-feedback">
                                                    {{ form_errors(form.telephone) }}
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                {{ form_widget(form.contact, {'attr': {'class': 'form-control','placeholder':'Saisir contact 2'}})
                                                }}
                                                <div class="invalid-feedback">
                                                    {{ form_errors(form.contact) }}
                                                </div>
                                            </div>
                                        </div>

                                    </tr>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>




        <div class="row">
            <div class="col-12 col-sm-12 col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Informations sur le produit</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive table-invoice">
                            <table class="table table-striped">
                                <tbody>

                                    <legend>Article:</legend>

                                    <ul class="tags" data-prototype="
              {% filter escape %}
                {% include 'commandes/produit_proto.html.twig' with { 'form': form.produit.vars.prototype } only %}
              {% endfilter %}">
                                    </ul>
                                    {#  data-prototype="{{ form_widget(form.produit.vars.prototype)|e('html_attr') }}"
                      {# <table class="table">
                        <th  >Produit</th>
                        <th  >Quantité</th>
                         
                        <th >Action</th>
                        <tr>
                            <td  >{{ form_widget(f.produit) }}</td>
                            <td  >{{ form_widget(f.qte) }}</td>
                            
                            <td  >
                                <input type="submit" value="Add" name="bt" class="btn btn-warning"/>
                                <i class="glyphicon glyphicon-save"></i>
                            </td>
                        </tr>
                    </table>
                    <table class="table table-condensed">
                        <thead class="thead-dark">
                            <tr>
                                <th>Ligne</th>
                                <th class="col-md-2">Désignation Article</th>
                                <th class="col-md-1">Quantité</th>
                                <th class="col-md-1">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for t in lcomm %}
                            <tr>
                                <td class="col-md-2">{{ t.lig }}</td>
                                <td class="col-md-1">{{ t.produit.designation }}</td>
                                <td class="col-md-1">{{ t.qte }}</td>
                                <td class="col-md-1">
                                    <a href="{{ path('supprimer', {'id': t.lig }) }}" 
                                    class="btn btn-danger">
                                    <i class="glyphicon glyphicon-apple"></i>
                                    Supprimer
                                    </a>
                                </td>
                            </tr>
                            {% endfor %} #}
                                </tbody>
                            </table>

                            </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-12 col-sm-12 col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4>Commentaires</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive table-invoice">
                            <table class="table table-striped">
                                <tbody>
                                    <div class="row">
                                        <div class="form-group col-md-12">

                                            <fieldset>
                                                <legend>Commentaire(s):</legend>
                                                <input name="valide" value="ok" type="hidden" class="form-control">
                                                <textarea rows="10" name="comment" placeholder="Entrer votre message"
                                                    class="form-control"></textarea>
                                            </fieldset>
                                        </div>


                                    </div>


                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">

                        <h4>Statut de la commande et canal de communication</h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table dataTable table-striped">
                                <table class="table table-striped">
                                    <tbody>
                                        <tr>
                                            <th>Confirmation </th>
                                            <th>
                                                <div class="form-group col-md-6">
                                                    <label class="d-block"> décocher la case si la commande n'est pas
                                                        valider</label>
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox"
                                                            id="defaultCheck2" value="true" name="validercomande"
                                                            checked>
                                                        <label class="form-check-label1" for="defaultCheck2"
                                                            style="margin-left:50px;">

                                                            Valider
                                                        </label>
                                                    </div>
                                                    <div class="invalid-feedback">
                                                    </div>
                                                </div>
                                            </th>

                                        </tr>

                                        <tr>
                                            <th>Canal de communication:</th>
                                            <th> {{ form_widget(form.typecanalcom) }}

                                                <div class="invalid-feedback">
                                                    {{ form_errors(form.typecanalcom


) }}

                                                </div>
                                            </th>

                                        </tr>



                                        </tr>

                                    </tbody>
                                </table>

                                <div class="form-row">
                                    <div class="form-group col-md-9">


                                    </div>

                                    <div class="form-group col-md-3">



                                    </div>
                                </div>


                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">

                        <h4>Information complementaire sur la livraison </h4>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table dataTable table-striped">
                                <tbody>
                                    <tr>
                                        <th>date livraison :</th>
                                        <th> {{ form_widget(form.datelivraison) }}
                                            <div class="invalid-feedback">
                                                {{ form_errors(form.datelivraison


) }}
                                            </div>
                                        </th>

                                    </tr>

                                    <tr>
                                        <th>Frais de livraison:</th>
                                        <th> {{ form_widget(form.fraislivraison) }}
                                            <label id="affiche"></label>
                                            <div class="invalid-feedback" style="background-color:red;">
                                                {{ form_errors(form.fraislivraison


) }}

                                            </div>
                                        </th>




                                    </tr>
                                    <tr>
                                        <th>Frais de livraison Sous traitant:</th>
                                        <th> {{ form_widget(form.fraislivraisonsoustraitant) }}
                                            <label id="affiche"></label>
                                            <div class="invalid-feedback" style="background-color:red;">
                                                {{ form_errors(form.fraislivraisonsoustraitant


) }}

                                            </div>
                                        </th>




                                    </tr>

                                    <tr>
                                        <th>Reduction prix:</th>
                                        <th> {{ form_widget(form.reducbool) }}
                                            <label id="affiche"></label>
                                            <div class="invalid-feedback" style="background-color:red;">
                                                {{ form_errors(form.reducbool


) }}

                                            </div>
                                        </th>

                                    </tr>



                                    <tr id="commandesmontant">

                                        <th>Montant reduction:</th>
                                        <th> {{ form_widget(form.montantreduction) }}

                                            <div class="invalid-feedback" style="background-color:red;">
                                                {{ form_errors(form.montantreduction


) }}


                                            </div>
                                        </th>
                                    </tr>

                                    <tr>
                                        <th>Paiement par avance:</th>
                                        <th> {{ form_widget(form.paiementbool) }}
                                            <label id="affiche"></label>
                                            <div class="invalid-feedback" style="background-color:red;">
                                                {{ form_errors(form.paiementbool


) }}

                                            </div>
                                        </th>
                                    </tr>

                                    <tr id="commandesmontant1">
                                       <th>Montant paiement par avance:</th>
                                        <th> {{ form_widget(form.montantpaiementavance) }}
                                            <label id="affiche"></label>
                                            <div class="invalid-feedback" style="background-color:red;">
                                 {{ form_errors(form.montantpaiementavance) }}
                                            </div>
                                        </th>




                                    </tr>
                 



                              

                               


                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                {# <button  class="btn btn-primary">Enregistrer</button> #}
                <input type="submit" value="Valider" name="bt" class="btn btn-success" />

                {# {{ form_widget(form.submit) }} #}
            </div>
            <div class="col-md-6">
                <a href="javascript:history.back()" class="btn btn-warning">Retour a la liste</a>

            </div>
        </div>
        {{ form_end(form) }}


    </section>
</div>
{# <div id="loading">
        <img src="{{asset("back/img/loading.gif")}}" alt="Loader" />
    </div> #}
{% endblock %}
{% block javascripts %}
{{parent()}}
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>



<script type="text/javascript">
    $(document).ready(function () {
        var stylesa = {
            color: "#FFFFFF",
            fontWeight: "bold",
            fontSize: "20px",
            fontStyle: "italic",
            position: "center"

        };
        $(".form-check-label").html("Cochez pour Transferer la commande vers treichville").css(stylesa);

        $("#commandes_telephone").on("blur", function () {
            var mobNum = $(this).val();
            var filter = /^\d{09}$/;

            if (filter.test(mobNum)) {
                if (mobNum.length == 09) {
                    // alert("valid");
                    $("#mobile-valid").removeClass("hidden");
                    $("#folio-invalid").addClass("hidden");
                } else {
                    alert('Merci de mettre un numero correct de 09 chiffres');
                    $("#folio-invalid").removeClass("hidden");
                    $("#mobile-valid").addClass("hidden");
                    return false;
                }
            } else {
                alert('Attention Numero non valable Mettre un numero a 09 chiffres');
                $("#folio-invalid").removeClass("hidden");
                $("#mobile-valid").addClass("hidden");
                return false;
            }

        });







        $("#commandesmontant").css("display", "none");
        $("#commandesmontant1").css("display", "none");
        $("#commandesmontant2").css("display", "none");


        $("#commandes_reducbool").change(function () {
            var styles = {
                color: "#FFFFFF",
                fontWeight: "bold",
                fontSize: "20px",
                fontStyle: "italic",
                position: "center"

            };
            var styles1 = {
                color: "#01579B",
                fontWeight: "bold",
                fontSize: "20px",
                fontStyle: "italic",
                position: "center"

            };

            console.log("Valeur selectionée 1", $("#commandes_reducbool").val());
            if ($("#commandes_reducbool").val() == 1) {
                console.log("OUI");
                $("#commandesmontant").css("display", "block");
                $("#affiche").html("").css(styles);

            }
            if ($("#commandes_reducbool").val() == 2) {
                console.log("NON");
                document.getElementById("commandes_montantreduction").value = '0';

                $("#commandesmontant").css("display", "none");
                $("#affiche").html("").css(styles1);
            }
            if ($("#commandes_reducbool").val() === "") {
                $("#commandesmontant").css("display", "none");
                console.log("RIEN");
                $("#affiche").html("").css(styles1);
            }


        });
        $("#commandes_paiementbool").change(function () {
            var styles = {
                color: "#FFFFFF",
                fontWeight: "bold",
                fontSize: "20px",
                fontStyle: "italic",
                position: "center"

            };
            var styles1 = {
                color: "#01579B",
                fontWeight: "bold",
                fontSize: "20px",
                fontStyle: "italic",
                position: "center"

            };

            console.log("Valeur selectionée 1", $("#commandes_paiementbool").val());
            if ($("#commandes_paiementbool").val() == 1) {
                console.log("OUI");
                $("#commandesmontant1").css("display", "block");
                $("#commandesmontant2").css("display", "block");

                $("#affiche").html("").css(styles);

            }
            if ($("#commandes_paiementbool").val() == 2) {
                console.log("NON");


                document.getElementById("commandes_montantpaiementavance").value = '0';

                $("#commandesmontant1").css("display", "none");
                $("#commandesmontant2").css("display", "none");

                $("#affiche").html("").css(styles1);
            }
            if ($("#commandes_paiementbool").val() === "") {
                $("#commandesmontant1").css("display", "none");
                $("#commandesmontant2").css("display", "none");

                console.log("RIEN");
                $("#affiche").html("").css(styles1);
            }


        });

        $('.js-example-basic-single1').select2({
            theme: "classic",
            placeholder: 'CHOISIR UNE COMMUNE',
            "language": {
                "noResults": function () {
                    return "Aucun resultat trouvé <a href='#' class='btn btn-danger'>Reésayez</a>";
                }
            },
            escapeMarkup: function (markup) {
                return markup;
            }
        });





        var $addTagLink = $(
            '<a href="#" class="btn btn-icon icon-left btn-primary"><i class="far fa-edit"></i> Ajouter un article</a>'
            );
        var $newLinkLi = $('<li></li>').append($addTagLink);

        jQuery(document).ready(function () {
            // Get the ul that holds the collection of tags
            var $collectionHolder = $('ul.tags');

            // add the "add a tag" anchor and li to the tags ul
            $collectionHolder.append($newLinkLi);

            // count the current form inputs we have (e.g. 2), use that as the new
            // index when inserting a new item (e.g. 2)
            $collectionHolder.data('index', $collectionHolder.find(':input').length);

            $addTagLink.on('click', function (e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // add a new tag form (see code block below)
                addTagForm($collectionHolder, $newLinkLi);
            });


        });

        function addTagForm($collectionHolder, $newLinkLi) {
            // Get the data-prototype explained earlier
            var prototype = $collectionHolder.data('prototype');

            // get the new index
            var index = $collectionHolder.data('index');

            // Replace '$$name$$' in the prototype's HTML to
            // instead be a number based on how many items we have
            var newForm = prototype.replace(/__name__/g, index);

            // increase the index with one for the next item
            $collectionHolder.data('index', index + 1);

            // Display the form in the page in an li, before the "Add a tag" link li
            var $newFormLi = $('<li></li>').append(newForm);

            // also add a remove button, just for this example
            $newFormLi.append(
                '<a href="#" class="remove-tag btn btn-icon btn-danger"><i class="fas fa-times"></i></a>');

            $newLinkLi.before($newFormLi);

            // handle the removal, just for this example
            $('.remove-tag').click(function (e) {
                e.preventDefault();

                $(this).parent().remove();

                return false;
            });
        }




    });
</script>


<script type="text/javascript">
    var styles1 = {
        color: "#01579B",
        fontWeight: "bold",
        fontSize: "20px",
        fontStyle: "italic",
        position: "center"

    };

    //activer  le bouton rechercher lorsqu on saisi un caractère
    $("#commandes_telephone").keyup(function () {
        if ($("#commandes_telephone").val().length == 09 ) {
            console.log("ihuhiu");
            $("#btnSearch").fadeIn();

            
        } else {
             
            $("#btnSearch").fadeOut();

        }


         
    });


  

    $("#btnSearch").click(function () {
     
      
        getInfo($("#commandes_telephone").val());
    });

    function getInfo(numtelephone) {
        console.log(numtelephone);
        //get Nombre groupe
        $.ajax({
            url: '{{path('getinfoclient')}}',
            type: 'POST',
            dataType: 'json',
            async: false,
            data: {
                numtelephone: numtelephone
            },

            success: function (data) {
                if (data['Result'] === 'OK') {

                    $("#msgerror").html("Ce client existe dans le systeme").css(styles1);

                    var res = data['Record'];

                    $("#commandes_nom").attr("value", res["nom"]);
                    $("#commandes_prenoms").attr("value", res["prenoms"]);
                    $("#commandes_email").attr("value", res["email"]);
                    $("#commandes_adresseclientlivraison").attr("value", res["adresseclientlivraison"]);

                    $("#progress").css("display", "none");

                } else if (data['Result'] === 'ERROR') {
                    $("#msgerror").empty().append(data['Message']);

                    $("#commandes_nom").attr("value", "");
                    $("#commandes_prenoms").attr("value", "");
                    $("#commandes_email").attr("value", "");
                    $("#commandes_adresseclientlivraison").attr("value", "");
                    $("#progress").css("display", "none");
                }
            },
            error: function () {
                alert('Erreur système ');
                $("#progress").css("display", "none");
            }
        });
    }





    function modifValues() {
        var val = $('#progress progress').attr('value');
        if (val >= 100) {
            val = 5;
        }
        var newVal = val * 1 + 0.25;
        var txt = Math.floor(newVal) + '%';

        $('#progress progress').attr('value', newVal).text(txt);
        $('#progress strong').html(txt);
    }
    setInterval(function () {
        modifValues();
    }, 1);
</script>
{% endblock %}