{% extends 'base.html.twig' %}
{% block title %}Update Policy Status - Admin{% endblock %}
{% block stylesheets %} 
   	<style>
      table{
            width:  100%;
            border-collapse: collapse;
        }
        .btn-update, .btn-update:hover{background:#2bbbad;color:white;}
    </style>
{% endblock %}
{% block body %}
{{ include("mx/nav_menu.twig",{option:'update-policy-status'}) }}
<main>
	<div class="row">
        <form id="policy-status-form" class="col-12">
            <div class="container-form">
                {% if policies_number > 0 %}
                    <div class="text-end">                   
                        <button type="button" class="btn btn-update">Update Policy Status</button>                  
                    </div>
                    <h5 class="text-center"><b>Results:</b> {{ policies_number }} policies</h5>
                    
                    <div class="line orange"></div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th data-field="id_policy">Id Policy</th>
                                <th data-field="policy_number">Policy Number</th>
                                <th data-field="certificate_number">Certificate Number</th>
                                <th data-field="end_date">End Date </th>
                                <th data-field="wrong_status">Wrong Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for x in policies %}
                                <tr>
                                    <td>
                                       {{ x.id_policy_info }}
                                       <input type="hidden" name="id-policy-{{ x.id_policy_info }}" value="{{ x.id_policy_info }}">
                                    </td>
                                    <td>
                                        {{ x.policy_number }}
                                    </td>
                                    <td>
                                        {{ x.certificate_number }}
                                    </td>
                                    <td>
                                        {{ x.end_date|date('F d, Y') }}
                                    </td>
                                    <td>
                                        {{ x.policy_status }}
                                    </td>
                                </tr>
                            {% endfor %} 
                        </tbody>
                    </table>
                {% else %}
                    <div class="teal white-text center-align" style="padding:25px;">
                      <h5>No hay Pólizas por Actualizar</h5>
                    </div>
                {% endif %}
            </div>
        </form>
	</div>
</main>        
{% endblock %}

{% block javascripts %}
    <script>
        $(function(){
            $('.btn').click(function(){
                var params = $("#policy-status-form").serializeArray();
                 var policies = [];
                // Recorrer params
                $.each(params, function(index, field) {
                    // Comprobar si el nombre del campo comienza con 'id-policy-'
                    if (field.name.startsWith('id-policy-')) {
                        policies.push(field.value); // Agregar el valor al array policies
                    }
                });
                $.ajax({
                    type : 'POST',
                    url  : `${getUrlApiByEnvironment(ENV)}/update-policy-status`,
                    data : JSON.stringify({
                            option: 'update',
                            idPolicy:policies,
                    })
                }).done(function({response}){
                    if(response == true){
                        iziToast.success({
                                title: 'Success',
                                message: 'Se ha actualizado los status',
                                position:'center',
                                timeOut: 2000,
                        });
                        location.reload(true);
                    }
                });
            });
        });
    </script>
{% endblock %}