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

{% block show %}

    <div class="row">
        <div class="col-md-12">
            <div class="row">

                <form action="{{ path('updateeleveech',{'id': eleve.id}) }}" method="post">

                    <div class="col-md-12">
                        <div class="box box-primary">
                            <div class="box-header">
                                <h1 class="box-title">
                                    {{ eleve.fullNameAr }}
                                </h1>
                            </div>
                            <div class="box-header center-block">
                                <h4 class="box-title">
                                    {{ "admin.service.nbech"|trans }}
                                </h4>
                            </div>

                            <div class="box-body">
                                <div class="sonata-ba-collapsed-fields">

                                    <div id="sonata-ba-field-container-notes" class="form-group">

                                        <div class="sonata-ba-field sonata-ba-field-standard-natural">

                                            <div id="notes" class="">

                                                <div class="table-responsive">
                                                    <table class="table table-bordered table-sm ">
                                                        <thead class="thead-dark">

                                                        <tr class="bg-primary">
                                                            <th style="text-align: center" scope="col">{{ "admin.service.service"|trans }}</th>
                                                            <th style="text-align: center" scope="col">{{ "admin.service.ech"|trans }}</th>
                                                            <th style="text-align: center" scope="col">{{ "selv.afact"|trans }}</th>
                                                            <th style="text-align: center"  scope="col">{{ "selv.monrec"|trans }}</th>
                                                            <th style="text-align: center"  scope="col">{{ "selv.dateencais"|trans }}</th>
                                                            <th style="text-align: center"  scope="col">{{ "selv.modpai"|trans }}</th>
                                                            <th style="text-align: center"  scope="col">{{ "selv.etat"|trans }}</th>
                                                            <th style="text-align: center"  scope="col">{{ "selv.recupai"|trans }}</th>

                                                        </tr>

                                                        </thead>
{#                                                        {% dump echeances %}#}

                                                        {% for echeance in echeances %}

                                                            {% if hide is not defined %}
                                                                {% set hide = '' %}
                                                            {% endif %}
                                                            {% set hidden = '' %}
                                                            {% if echeance.echeance.service.id ==  hide %}
                                                                {% set hidden = 'hidden' %}
                                                            {% endif %}
                                                            {% set hide = echeance.echeance.service.id %}


                                                            <tr class="liste_des_services">

                                                            {% if  hidden != 'hidden' %}
                                                                <td style='border-bottom: #0b2e13;  text-align: center;font-size: large'  scope="col">  {{ echeance.echeance.service.name }} </td>

                                                            {% else %}
                                                                <td style='border:none;  text-align: center;'  class=" "  scope="col">  </td>

                                                            {% endif %}



                                                            <td style="text-align: center" scope="col">{{ echeance.echeance.name }}</td>
                                                            <td style="text-align: center" scope="col">{{ echeance.montantAvecPourcentage }}</td>
                                                                <td style="text-align: center" scope="col">{{ echeance.montant }}</td>
                                                                <td style="text-align: center" scope="col">{{ echeance.dateEmission is empty ? "" : echeance.dateEmission|date('d/m/Y') }}</td>
                                                            <td style="text-align: center" scope="col">{{ echeance.modePaiement }}</td>
                                                            <td style="text-align: center" scope="col">

                                                                {% if echeance.etatPaiement == 'Terminer' %}
                                                                    Terminé
                                                                {% else %}
                                                                    {{ echeance.etatPaiement }}
                                                                {% endif %}
                                                            </td>
                                                                {% if echeance.etatPaiement == 'Terminer' %}
                                                            <td style="text-align: center" scope="col">
                                                                    <a style="text-align: center;" title="{{ "admin.service.imprimer"|trans }}" target="_blank" href="{{ path('echeanceCardAction', { id:  echeance.id }) }}"
                                                                       class="collection-up btn btn-default center"><i class="fa fa-print"></i>
                                                                    </a>
                                                            </td>
                                                                {% endif %}
                                                        </tr>
                                                        {% endfor %}

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


                                        </div>
                                    </div>

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


                    </div>

                    <div class="col-md-12">
                        <div class="col-md-12">
                            <div class="box box-primary">
                                <div class="box-header">
                                    <h4 class="box-title">
                                        {{ "menu.Ajouter_Paiement"|trans }}
                                    </h4>
                                </div>
                                <div class="box-body">
                                    <div class="sonata-ba-collapsed-fields">

                                            <div class="col-md-3 form-group" id="sonata-ba-field-container-services">
                                                <label class="control-label" for="services">{{ 'admin.service.service'|trans }}</label>
                                                <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                                    <select id="services" name="services" class="myservice-js form-control">
                                                        <option value=""></option>

                                                        {% for service in services %}
                                                            <option value="{{ service.service.id }}" data-montantReste="{{ service.montantReste }}">
                                                                {{ service.service.name }} {{ "admin.service.resteapay"|trans }} : {{ service.montantReste }}
                                                            </option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-3 form-group" id="sonata-ba-field-container-echeances">
                                                <label class="control-label" for="echeances">{{ 'selv.ech'|trans }}</label>
                                                <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                                    <select id="echeances" name="echeances" class="echeances-js form-control">
                                                        <option value=""></option>
                                                        <!-- ... (your existing code for echeances options) -->
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-md-2 form-group" id="sonata-ba-field-container-date">
                                                <label class="control-label" for="monrec">{{ 'selv.monrec'|trans }}</label>
                                                <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                                    <input type="number" required="required" id="monrec" name="monrec" class="monrec-js form-control">
                                                    <!-- Placeholder for error message -->
                                                    <span id="monrec-error" class="text-danger"></span>
                                                </div>
                                            </div>




                                        <div class="col-md-2 form-group" >
                                            <label class="control-label" for="modepaiement">{{ 'selv.modpai'|trans }}</label>
                                            <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                                <select id="echeances" name="modepaiement" class="modepaiement-js form-control">

                                                            <option value="Chèque">{{ 'admin.service.cheque'|trans }}</option>
                                                            <option value="Cash">{{ 'admin.service.cash'|trans }}</option>

                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-md-2 form-group"  >
                                            <label class="control-label" for="date">{{ 'selv.dateencais'|trans }}</label>
                                            <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                                <input type="date" required="required" id="date" name="date" class="date-js form-control">
                                                <input type="hidden"  name="eleaneescolaireid" value="{{ eleve.id }}" class="elv-js form-control">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-2 form-group"  >
                                            <label class="control-label" for="examenType">&nbsp;</label>
                                            <div class="sonata-ba-field sonata-ba-field-standard-natural">
                                                <button type="submit" id="validate" class="btn btn-success"
                                                        name="btn_update_and_edit">
                                                    <i class="fa fa-save" aria-hidden="true"></i>
                                                    {{ 'admin.service.valider' | trans }}
                                                </button>
                                            </div>
                                        </div>
                                    </div>

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


                    </div>


                </form>
            </div>

        </div>

    </div>

{% endblock %}

{% block form %}

    <script type="text/javascript">
        var uniqId = '{{ admin.uniqId }}';
                $('select.echeances-js option').remove();

        let datat = {}
        {{ render(controller('App\\Controller\\SwitchAnneeScolaireController::lesAnneeJs')) }}
        $(document).ready(function () {
            let datat = {}






            $(document).on('change', '.myservice-js', function () {
                let $field = $(this);
                let data = {};
                $('select.mymatiere-js option').remove();

                var $echeances = $("select.echeances-js");

                // Clear existing options in select.echeances-js
                $echeances.empty();

                data['service'] = $field.val();

                $.post('{{ path('getEcheanceEleveByServiceAjax') }}', data).then(function (data) {
                    console.log(data);

                    $.each(data, function (key, val) {
                        $echeances.append($("<option></option>").attr("value", key).text(val));
                    });

                    // Other code related to setting values if needed
                });
            });



        });

    </script>



    <script>
        var currentDate = new Date().toISOString().split('T')[0];

        // Set the default date value in the format YYYY-MM-DD
        document.querySelector('.date-js').value = currentDate;
        document.addEventListener('DOMContentLoaded', function () {
            // Get the elements
            var servicesDropdown = document.getElementById('services');
            var monrecInput = document.getElementById('monrec');
            var errorSpan = document.getElementById('monrec-error');
            var validate = document.getElementById('validate');

            // Add an event listener to the services dropdown
            // servicesDropdown.addEventListener('change', function () {
            //     // You can also update the echeances dropdown options here using AJAX
            //     updateEcheancesDropdown();
            // });
            //
            // // Function to update the echeances dropdown options using AJAX
            // function updateEcheancesDropdown() {
            //     // You can make an AJAX request to fetch and populate echeances options
            //     // Example:
            //     // var selectedServiceId = servicesDropdown.value;
            //     // Make an AJAX request to get echeances based on selectedServiceId
            //     // Populate the echeancesDropdown with the fetched data
            // }

            // Add an event listener to the monrec input for validation
            monrecInput.addEventListener('input', function () {
                validateMonrec();
            });

            // Function to validate monrec input
            function validateMonrec() {
                var selectedOption = servicesDropdown.options[servicesDropdown.selectedIndex];
                var montantReste = parseFloat(selectedOption.getAttribute('data-montantReste'));
                var enteredAmount = parseFloat(monrecInput.value);

                if (enteredAmount > montantReste) {
                    errorSpan.textContent = 'Le montant ne doit pas dépasser le montant restant:  ' + montantReste;
                    validate.disabled = true;
                } else {
                    errorSpan.textContent = '';
                    validate.disabled = false;
                }
            }
        });
    </script>
{% endblock %}