{% extends 'admin/formPage.html.twig' %}

{% block LienPrecedent %}<a href="{{ path('app_admin_compagnies') }}">Liste des souscriptions</a> {% endblock%}
{% block Item %} Souscriptions {% endblock %}
{% block formContent %}
    <div class="x_content">
        <form action="{{ path('app_admin_souscription_auto_new_add') }}" method="post" novalidate name="addsous" id="addsous">
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="client">Client <span class="required">*</span>
                </label>
                <div class="col-md-3 col-sm-3 ">
                    <input placeholder="Rechercher client" type="text" id="client" name="client" data-autocomplete-url="{{ path('admin_utility_clients') }}" required="required" class="form-control js-client-autocomplete ">
                    <input type="hidden" name="idClient" id="idClient">
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <input placeholder="(code client)" type="text" id="codeClient" name="codeClient" required="required" readonly class="form-control ">
                </div>
                <div class="col-md-1 col-sm-1 ">
                    <button id="addClient" class="btn btn-success form-control " disabled> + client </button>
                </div>
            </div>

            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="assureur">Assureur <span class="required">*</span>
                </label>
                <div class="col-md-4 col-sm-4 ">
                    <input placeholder="Rechercher un assureur" type="text"  id="assureur" name="assureur" data-autocomplete-url="{{ path('admin_utility_compagnie') }}" required="required" class="form-control js-compagnie-autocomplete ">
                    <input type="hidden" name="idAssureur" id="idAssureur">
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <input type="text" readonly name="nomAssureur" placeholder="Assureur" id="nomAssureur" class="form-control">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="tauxGlobal">Taux global auto<span class="required">*</span>
                </label>
                <div class="col-md-3 col-sm-3 ">
                    <select name="codeAuto" id="codeAuto" required="required" class="form-control">
                        <option>Choisir code Auto</option>
                        <option value="410">410</option>
                        <option value="420">420 flotte</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <input type="number" max="99" min="1" class="form-control" required name="tauxGlobal" placeholder="Taux globale" id="tauxGlobal" >
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <button class="btn btn-success" id="addAuto" disabled>+ Vehicule</button>
                </div>

            </div>
            <div class="item form-group autoForm" id="autoform1">
                <div class="col-md-12 ">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2>Vehicule <small class="autoNum">1</small></h2>
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                </li>
                            </ul>
                            <div class="clearfix"></div>
                        </div>
                        <div class="x_content">
                            <br />
                            <div class="item form-group ">
                                <div class="col-md-4 col-sm-3 ">
                                    <lable class="label">Immatriculation*</lable>
                                    <input placeholder="Immatriculation" type="text" required="required" class="form-control immatriculation">
                                </div>
                                <div class="col-md-4 col-sm-2 ">
                                    <lable class="label">Date 1ere mise circulation*</lable>
                                    <input placeholder="Date 1ere mise circulation" type="date" required="required" class="form-control dateCirculation">
                                </div>
                                <div class="col-md-4 col-sm-2 ">
                                    <lable class="label">Numéro du chassis*</lable>
                                    <input placeholder="Numéro du chassis" type="text" required="required" class="form-control numChassis">
                                </div>
                            </div>
                            <div class="item form-group">
                                <div class="col-md-4 col-sm-3 ">
                                    <lable class="label">Marque*</lable>
                                    <input placeholder="Marque" type="text" required="required" class="form-control marque">
                                </div>
                                <div class="col-md-4 col-sm-2 ">
                                    <lable class="label">Modéle*</lable>
                                    <input placeholder="Modéle" type="text" required="required" class="form-control modele">
                                </div>
                                <div class="col-md-4 col-sm-2 ">
                                    <lable class="label">Energie*</lable>
                                    <select class="form-control energie">
                                        <option value="" selected>Energie</option>
                                        <option value="ELECTRIQUE">ELECTRIQUE</option>
                                        <option value="ESSENCE">ESSENCE</option>
                                        <option value="GAZOIL">GAZOIL</option>
                                        <option value="AUTRE">AUTRE</option>
                                    </select>
                                </div>
                            </div>
                            <div class="item form-group">
                                <div class="col-md-4 col-sm-3 ">
                                    <lable class="label">Nombre de place*</lable>
                                    <input placeholder="Nombre de place" type="number" min="1" required="required" class="form-control nbPlace">
                                </div>
                                <div class="col-md-4 col-sm-2 ">
                                    <lable class="label">Tonnage</lable>
                                    <input placeholder="Tonnage" type="text"   class="form-control tonnage">
                                </div>
                                <div class="col-md-4 col-sm-2 ">
                                    <lable class="label">Carosserie*</lable>
                                    <input placeholder="Carosserie" type="text"   class="form-control carosserie">
                                </div>
                            </div>
                            <div class="item form-group">
                                <div class="col-md-4 col-sm-3 ">
                                    <lable class="label">Puissance (en CV)*</lable>
                                    <input placeholder="Puissance" type="number" min="1" required="required" class="form-control puissance">
                                </div>
                                <div class="col-md-4 col-sm-3 ">
                                    <lable class="label">Valeur Neuf*</lable>
                                    <input placeholder="Valeur Neuf" type="text" required="required" class="form-control valNeuf">
                                </div>
                                <div class="col-md-4 col-sm-2 ">
                                    <label class="label">Valeur Assurée*</label>
                                    <input placeholder="Valeur Assurée" type="text" required="required" class="form-control valAssure">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="Garanties">Garanties<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    {% for garantie in garanties %}
                        <div class="">
                            <label>
                                <input {%  if garantie.nom is same as ("Responsabilité Civile") %} checked="checked" readonly {% endif %} type="checkbox"  name="garanties[]" value="{{ garantie.id }}" class="js-switch garanties" /> {{ garantie.nom }}
                            </label>
                        </div>
                    {% endfor %}
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="dateDebut">Date debut<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="dateDebut" name="dateDebut" type="datetime-local" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="dateEcheance">Date d'echeance<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="dateEcheance" name="dateEcheance" type="datetime-local" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="primeTotal">Prime Total<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="primeTotal" name="primeTotal" type="number" min="1" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="primeNette">Prime Nette<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="primeNette" name="primeNette" type="number" min="1" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="coutPolice">Cout Police<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="coutPolice" name="coutPolice" type="number" min="1" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="percentPolice">Pourcentage police<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="percentPolice" name="percentPolice" type="number" min="0" max="100" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="numPolice">Numero de police<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="numPolice" name="numPolice" type="text" required="required" class="form-control ">
                </div>
            </div>

            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="montantTaxe">Montant Taxe<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="montantTaxe" name="montantTaxe" type="number" min="1" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="montantApporteur">Montant Apporteur<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="montantApporteur" name="montantApporteur" type="number" min="0" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="bonMal">Bonus/Malus<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="bonMal" name="bonMal" type="number" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="tauxReduc">Taux Reduction<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="tauxReduc" name="tauxReduc" type="number" min="0" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="fga">FGA<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="fga" name="fga" type="number" required="required" class="form-control ">
                </div>
            </div>

            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="numAvenant">Numero avenant<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="numAvenant" name="numAvenant" type="text" required="required" class="form-control ">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="numlient">Numero Client<span class="required">*</span>
                </label>
                <div class="col-md-6 col-sm-6 ">
                    <input placeholder="" id="numlient" name="numlient" type="text" required="required" class="form-control ">
                </div>
            </div>

            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="assureur">Apporteur d'affaire <span class="required">*</span>
                </label>
                <div class="col-md-1 col-sm-1 ">
                    <input type="checkbox" name="apporteurSwitch" id="apporteurSwitch" class="js-switch" />
                </div>
                <div class="col-md-3 col-sm-3 ">
                    <input disabled placeholder="Rechercher un apporteur" type="text"  id="apporteur" name="apporteur" data-autocomplete-url="{{ path('admin_utility_apporteur') }}" required="required" class="form-control js-apporteur-autocomplete apporteurs">
                    <input type="hidden" name="idApporteur" id="idApporteur apporteurs">
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <input disabled placeholder="Pourcentage apporteur" min="1" type="number" required="required" name="percent_apporteur" id="percent_apporteur" class="form-control apporteurs">
                </div>
                <div class="col-md-1 col-sm-1 ">
                    <input disabled placeholder="(code apporteur)" type="text" readonly id="codeApporteur" name="codeApporteur" class="form-control apporteurs">
                </div>
            </div>

            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="assureur"> <span class="required"></span>
                </label>
                <div class="col-md-1 col-sm-1 ">
                    <input disabled type="checkbox" name="apporteurSolde" id="apporteurSolde" class=" apporteurs" /> Soldé
                </div>
                <div class="col-md-3 col-sm-3 ">
                    <input disabled placeholder="Avance payé" min="1" type="number" required="required" name="avanceApporteur" id="avanceApporteur" class="form-control apporteurs">
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <select disabled name="modePaiementApporteur" id="modePaiementApporteur" class="apporteurs form-control">
                        <option value="">Mode de paiement</option>
                        <option value="cash">Espece</option>
                        <option value="Chéque">Chéque</option>
                        <option value="Virement">Virement</option>
                    </select>
                </div>
                <div class="col-md-1 col-sm-1 ">
                    <input disabled placeholder="Ref." type="text"  id="refApporteur" name="refApporteur" class="form-control apporteurs">
                </div>
            </div>
            <div class="item form-group">
                <label class="col-form-label col-md-3 col-sm-3 label-align" for="assureur">Affaire <span class="required">*</span>
                </label>
                <div class="col-md-1 col-sm-1 ">
                    <input type="checkbox" name="affaireSolde" id="affaireSolde" class="js-switch" />Soldé
                </div>
                <div class="col-md-3 col-sm-3 ">
                    <input placeholder="Montant avancé" type="text"  id="avanceAffaire" name="avanceAffaire" class="form-control ">
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <select name="modePaiement" class="form-control" id="modePaiement">
                        <option value="">Mode de paiement</option>
                        <option value="cash">Espece</option>
                        <option value="Chéque">Chéque</option>
                        <option value="Virement">Virement</option>
                    </select>
                </div>
                <div class="col-md-1 col-sm-1 ">
                    <input placeholder="Ref." min="1" type="text"  id="refAffaire" name="refAffaire" class="form-control">
                </div>
            </div>
            <div class="item form-group row">
                <div class="col-md-2 col-sm-2 ">
                    <label for="" class="label"></label>
                    <button id="calcul" class="form-control" >Calculer</button>
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <label for="" class="label">Montant Apporteur</label>
                    <input placeholder="Total ***" readonly  type="text"  id="calcApporteur" class="form-control">
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <label for="" class="label">Montant comm. Proxim</label>
                    <input placeholder="Total ***" readonly  type="text"  id="calcProxim" class="form-control">
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <label for="" class="label">Montant Total</label>
                    <input placeholder="Total ***" readonly  type="text"  id="calcTotal" class="form-control">
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <label for="" class="label">Total ***</label>
                    <input placeholder="Total ***" readonly  type="text"  id="" class="form-control">
                </div>
                <div class="col-md-2 col-sm-2 ">
                    <label for="" class="label">Total ***</label>
                    <input placeholder="Total ***" readonly  type="text"  id="" class="form-control">
                </div>

            </div>


            <div class="ln_solid"></div>
            <div class="item form-group">
                <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                    <a class="btn btn-warning" href="{{ path('app_admin_compagnies') }}">Annuler</a>
                    <button type="submit" name="valider" class="btn btn-success">Enregistrer</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="https://cdn.jsdelivr.net/autocomplete.js/0/autocomplete.jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            let sectionsCount = 1;
            $('.js-client-autocomplete').each(function() {
                var autocompleteUrl = $(this).data('autocomplete-url');

                $(this).autocomplete({hint: false}, [
                    {
                        source: function(query, cb) {
                            $.ajax({
                                url: autocompleteUrl+'?query='+query
                            }).then(function(data) {
                                cb(data.clients);
                            });
                        },
                        displayKey: 'nom',
                        debounce: 100
                    }
                ]).on('autocomplete:selected', function (event,suggestion,dataset) {
                    $("#codeClient").val(suggestion.code);
                    $("#idClient").val(suggestion.id);
                });
            });

            $('.js-apporteur-autocomplete').each(function() {
                var autocompleteUrl = $(this).data('autocomplete-url');

                $(this).autocomplete({hint: false}, [
                    {
                        source: function(query, cb) {
                            $.ajax({
                                url: autocompleteUrl+'?query='+query
                            }).then(function(data) {
                                cb(data.apporteurs);
                            });
                        },
                        displayKey: 'nom',
                        debounce: 100
                    }
                ]).on('autocomplete:selected', function (event,suggestion,dataset) {
                    $("#percent_apporteur").val(suggestion.taux);
                    $("#idApporteur").val(suggestion.id);
                    $("#codeApporteur").val(suggestion.code);

                });
            });
            let tauxComm = null ;
            let trigger = true;
            $('.js-compagnie-autocomplete').each(function() {
                var autocompleteUrl = $(this).data('autocomplete-url');

                $(this).autocomplete({hint: false}, [
                    {
                        source: function(query, cb) {
                            $.ajax({
                                url: autocompleteUrl+'?query='+query
                            }).then(function(data) {
                                cb(data.compagnies);
                            });
                        },
                        displayKey: 'nom',
                        debounce: 100
                    }
                ]).on('autocomplete:selected', function (event,suggestion,dataset) {
                    $("#idAssureur").val(suggestion.id);
                    $("#nomAssureur").val(suggestion.nom);
                    $("#percentPolice").val(suggestion.poliecePercent);
                    tauxComm = suggestion.tauxCommissions;
                    $("#codeAuto").val(0).change();
                    trigger = true;
                });
            });

            $("#codeAuto").on("change",function (e){
                if (!trigger) {
                    trigger = true;
                    return 0;
                }
                if (tauxComm !== null){
                    let stop = false;
                    if ($(this).val()==="410"){
                        $("#addAuto").prop('disabled', true);
                        $(".autoForm").slice(1).empty();
                        sectionsCount = 1;
                        tauxComm.forEach(function (taux){
                            if (taux.branche.code ==="410"){
                                $("#tauxGlobal").val(taux.taux);
                                stop = true;
                            }else if(!stop) {
                                $("#tauxGlobal").val("");
                            }
                        });
                    }else if ($(this).val()==="420"){
                        $("#addAuto").prop('disabled', false);
                        tauxComm.forEach(function (taux){
                            if (taux.branche.code ==="420"){
                                $("#tauxGlobal").val(taux.taux);
                                stop = true;
                            }else if(!stop) {
                                $("#tauxGlobal").val("");
                            }
                        });
                    }else{
                        $("#tauxGlobal").val("");
                        $("#addAuto").prop('disabled', true);
                        $(".autoForm").slice(1).empty();
                        sectionsCount = 1;
                    }
                }else {
                    trigger = false;
                    alert("Selectionné une compagnie d'abord");
                    $("#codeAuto").val(0).change();
                    $("#addAuto").prop('disabled', true);
                    $(".autoForm").slice(1).empty();
                    sectionsCount = 1;
                }

            });



            var elem = document.querySelector('#apporteurSolde');
            var switchery = new Switchery(elem);
            $("#apporteurSwitch").on('change', function() {
                if ( $(this).is(':checked')) {
                    $(".apporteurs").prop('disabled', false).val("");
                    switchery.enable();
                    //$('#modePaiementApporteur').selectpicker('refresh');
                } else {
                    $(".apporteurs").prop('disabled', true).val("");
                    //change switch value and disable
                    switchery.element.checked = false;
                    switchery.setPosition();
                    switchery.disable();
                    //$('#modePaiementApporteur').selectpicker('refresh');
                }

            });
            $("#apporteurSolde").on('change', function() {
                if ( $(this).is(':checked')) {
                    $("#avanceApporteur").prop('disabled', true);
                    $("#avanceApporteur").val("");
                } else {

                    $("#avanceApporteur").prop('disabled', false);
                }

            });

            $("#affaireSolde").on('change',function (){
                if ( $(this).is(':checked')) {
                    $("#avanceAffaire").prop('disabled', true);
                    $("#avanceAffaire").val("");
                } else {
                    $("#avanceAffaire").prop('disabled', false);
                }
            });
            const template = $('#autoform1').clone();

            $('body ').on('click', '#addAuto', function() {

                //increment
                sectionsCount++;
                var newId = 'autoform' + sectionsCount;
                //loop through each input
                var section = $('#autoform1').clone();

                section.find('small').html(sectionsCount);
                section.attr("id",newId);
                var lastAuto = $(".autoForm").last();
                section.append('<button class="btn btn-danger delAuto">X</button>');
                section.insertAfter(lastAuto);

                return false;
            });

            //remove section
            $('body').on('click', '.delAuto', function() {
                //fade out section
                $(this).parent().fadeOut(300, function(){
                    //remove parent element (main section)
                    $(this).empty();
                    return false;
                });
                return false;
            });

            $("#addsous").submit(function (e){
                e.preventDefault();
                var actionurl = e.currentTarget.action;
                var tabAuto = [];
                $(".autoForm").each(function (){
                    tabAuto.push({
                        "immatriclation" : $(this).find(".immatriculation").val(),
                        "dateCirculation":$(this).find(".dateCirculation").val(),
                        "numChassis":$(this).find(".numChassis").val(),
                        "marque":$(this).find(".marque").val(),
                        "modele":$(this).find(".modele").val(),
                        "energie":$(this).find(".energie").val(),
                        "nbPlace":$(this).find(".nbPlace").val(),
                        "tonnage":$(this).find(".tonnage").val(),
                        "carosserie":$(this).find(".carosserie").val(),
                        "puissance":$(this).find(".puissance").val(),
                        "valNeuf":$(this).find(".valNeuf").val(),
                        "valAssure":$(this).find(".valAssure").val()
                    });
                });
                console.log(tabAuto);

            });

            $("#calcul").click(function (){
                $("#calcTotal").val(parseFloat($("#fga").val())+parseFloat($("#primeNette").val())+parseFloat($("#montantTaxe").val())+parseFloat($("#coutPolice").val()));
                $("#calcProxim").val((($("#tauxGlobal").val()*$("#primeNette").val())+($("#percentPolice").val()*$("#coutPolice").val()))/100);
                $("#calcApporteur").val($("#calcProxim").val()*$("#percent_apporteur")/100);
            });
        });
    </script>


{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('src/scss/algolia.css') }}">
{% endblock %}

{% block selpicker %}
    <!-- disable selpicker -->
{% endblock %}