{% extends 'layout/backEndLayout.html.twig' %}


{% block content %}
        
         <form action={{path("admin_paymentPlans_new")}} method="POST">
                <div class="row mt-4">
                    <div class="col-12 jumbotron" >
                        <div class="m-1 box-shadow">
                                <div class="card-header row">
                                                    <h4 class="my-0 font-weight-normal text-center text-justify text-uppercase col-7"> Grille de tranches de scolarite par classe </h4>
                                                    {% if(year.paymentPlan) %}
                                                        <a style="width:3%;" class="btn btn-warning " href="{{ path('admin_paymentPlans_edit', {id: year.paymentPlan.id}) }}">
                                                                <i class="fa fa-edit"  aria-hidden="true"></i> 
                                                        </a>
                                                        &nbsp;&nbsp;&nbsp;
                                                        <a style="width:3%;" class="btn btn-primary " target="_blank" href="{{ path('admin_payment_plan_print', {id: 0}) }}">
                                                                <i class="fa fa-file"  aria-hidden="true"></i> 
                                                        </a>
                                                         &nbsp;&nbsp;&nbsp;
                                                        <a style="width:3%;" class="btn btn-outline-dark " target="_blank" href="{{ path('admin_classroom_insolvents') }}">
                                                            <i class="fa fa-users" aria-hidden="true">
                                                                
                                                            </i>
                                                        </a>
                                                         &nbsp;&nbsp;&nbsp;
                                                        <a style="width:3%;" class="btn btn-outline-dark " target="_blank" href="{{ path('admin_classroom_insolvents_percentage') }}">
                                                           <i class="fa fa-percent" aria-hidden="true"></i>

                                                        </a>
                                                    {% else %}
                                                        <label for="slice" class="col-4 text-uppercase"> Definir le nombre de tranches </label>
                                                        <input class="form-control col-1" type="number" min="0" max="3" value="0" id="slice" placeholder="nombre de tranches">
                                                    {% endif %}
                                </div>
                                <table  width="100%" class="table table-striped  table-bordered">
                                    <thead>
                                        <tr class="row">
                                            <th class="text-center col-1" scope="col">Niveau</th>
                                            <th  class="text-center col-1" id="roomTHead" scope="col">Classe</th>
                                            {% if(year.paymentPlan) %}
                                                
                                                {% for tranche in year.paymentPlan.installments|reduce((unique, item)=>item.ranking in unique ? unique : unique|merge([item.ranking]), [])|sort %}
                                                    {% if(tranche > 0) %}
                                                        <th  class="text-center col-2" id="roomTHead" colspan="2" scope="col">Tranche {{ tranche }}</th>
                                                    {% endif %}
                                                {% endfor %}
                                            {% endif %}
                                            <th  class="text-center col-2" scope="col" colspan="2">Frais Examen 
                                            {% if( not year.paymentPlan) %}
                                                <input class="form-check-input" type="checkbox" id="checkbox_0"  checked>
                                            {% endif %}
                                        </th>                            
                                            <th  class="text-center col-1" scope="col">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for room in rooms %}
                                            <tr class="row">
                                                <td  class="text-center col-1" scope="row">{{ room.level.name }}</td>
                                                <td  class="text-center col-1 roomTBody" scope="row" data-room={{ room.id }}>{{ room.name }}</td>
                                                {% if(year.paymentPlan) %} {# If there is already a tuition payment schedule... #}
                                                    {% for tranche in year.paymentPlan.installments %}
                                                        {% if(tranche.classRoom.id == room.id) %}
                                                            <td  class="text-center col-1" scope="row">{{ tranche.amount }}</td>
                                                            <td  class="text-center col-1" scope="row">{{ tranche.deadline|date("d-m-Y") }}</td>
                                                        {% endif %}
                                                    {% endfor %}
                                                    {%  if(room.apc) %}{# If the class passes the official exams? #}
                                                    {% else %}
                                                            <td  class="text-center col-1" scope="row"></td>
                                                            <td  class="text-center col-1" scope="row"></td>
                                                    {% endif %}
                                                {% else %} {# If there is not yet a tuition payment schedule #}
                                                    {%  if(room.apc) %} {# If the class passes the official exams? #}
                                                        <td  class="text-center col-1" scope="row">  <input type="number" value="0" class="form-control input-sm" name={{"tranche_class_0_"~room.id}} /></td>
                                                        <td  class="text-center col-1" scope="row">   <input type="date"  class="form-control input-sm" name={{"deadline_class_0_"~room.id}} /></td>
                                                    {% else %}
                                                        <td  class="text-center col-2" colspan="2" scope="row"></td>
                                                    {% endif %}
                                                {% endif %}
                                                <td  class="text-center col-1 sum" scope="row"></td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                        </div>
                    </div>
                </div>
            
                <div class="row mt-2 mx-auto">
                                <div class=" col-3">
                                </div>
                                {% if(year.paymentPlan|length <= 0) %}
                                    <div class=" col-3 mx-auto btn-group d-inline-flex p-2 bd-highlight">
                                        <button class="btn btn-danger" type="submit">
                                            <b><i class="fa fa-balance-scale"></i>submit</b>
                                        </button>
                                    </div>
                                    <div class="  col-3 mx-auto btn-group d-inline-flex p-2 bd-highligh">
                                        <a class="btn btn-info" href="{{ path('admin_school_years') }}">
                                            <i class="fa fa-list"></i>
                                            {{ 'Change school year'|trans({}, 'admin') }}
                                        </a>
                                    </div>
                                 {% else %}
                                    <div class=" col-3 mx-auto btn-group d-inline-flex p-2 bd-highlight">
                                        <a  class="btn btn-warning " href="{{ path('admin_paymentPlans_edit', {id: year.paymentPlan.id}) }}">
                                                                   
                                        
                                            <i class="fa fa-edit"  aria-hidden="true">Modifier l'echequier de scolarite</i> 
                                        </a>
                                    </div>
                                    

                                 {% endif %}
                                <div class=" col-3">
                                </div>
                </div>
        </form>
   
{% endblock %}
{% block javascripts %}
	{{parent()}}
    <script type="text/javascript">
        const slice = $("#slice"), roomTHead=$("#roomTHead")  ;
        const sumTd = $(".sum");
        console.log(document.getElementById('js-pp-delete-form'));
        var trancheClass = $("input[name*='tranche_class']"), deadlineClass = $("input[name*='deadline_class']");
        $('form').on('keypress keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                return false;
            }
        });
      
        
        sliceSize = slice.val();
        for(let i=sliceSize; i>=1 ; i--) {
                 $(`<th style=\"width:16%;\" class=\"text-center  inserted\" scope=\"col\" colspan=\"2\">Tranche ${i}</th>`).insertAfter(roomTHead); 
        } 
     
        slice.change(function(){
            $('.inserted').each(function(){
                    $(this).remove();
            });
            sliceSize = slice.val();
            for(let i=sliceSize; i>=1 ; i--) {
                  $(`  <th  class=\"text-center col-2 inserted\" scope=\"col\" colspan=\"2\">Tranche ${i}   <input class="form-check-input" type="checkbox" id="checkbox_${i}"  checked></th>`).insertAfter(roomTHead);
                  $(".roomTBody").each(function() {
                        let roomId = $(this).closest("tr").find(".roomTBody").data("room");
                        $(` <td  class=\"text-center col-1 inserted\" scope=\"row\"><input type=\"number\"  value=\"0\" class=\"form-control input-sm\" name="tranche_class_${i}_${roomId}" /></td>
                            <td  class=\"text-center col-1 inserted\" scope=\"row\"><input type=\"date\"  class=\"form-control  input-sm\" name="deadline_class_${i}_${roomId}"/></td>
                                 `).insertAfter($(this));
                      
                  });
                  
            } 
             $("input[name*='tranche_class']").change(function(e){
                let sum = 0;
                let tranches = $(e.target).closest("tr").find("input[name*='tranche_class']");
                tranches.each(function(){
                    sum += parseInt($(this).val());
                });
                $(this).closest("tr").find(".sum").text(sum);
                const parts = $(this).attr( "name" ).split("_");
                const tranche = parts[2];
                const room = parts[3];
              
                if($("#checkbox_"+tranche).is(":checked")){
                    $(`input[name*="tranche_class_${tranche}_"]`).val(e.target.value);
                }
            });
            $("input[name*='deadline_class']").change(function(e){
                const parts = $(this).attr( "name" ).split("_");
                const tranche = parts[2];
                const room = parts[3];
                if($("#checkbox_"+tranche).is(":checked")){
                    $(`input[name*="deadline_class_${tranche}_"]`).val(e.target.value);
                }
            });
            
         });
       

        
    </script>
{% endblock javascripts %}