<div class="col-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
            <h4 class="card-title">Contrato <%= data.contrato.prefijo %>-<%= data.contrato.idNumero %></h4>
            <p class="card-description">
                <span class="id-contrato d-none"><%= data.contrato.id %></span>
            </p>

            <div class="forms-sample form-asociar-pago">
                <h4>Titular</h4>
                <div class="mt-2">
                    <div class="form-group w-75">
                        <label for="">ID Fiscal</label>
                        <input type="text" disabled value="<%= data.titular.id %>" class="form-control titular-id">
                    </div>
                    <div class="form-group w-75">
                        <label for="">Nombres y Apellidos</label>
                        <input type="text" disabled value="<%= data.titular.razonSocial %>" class="form-control">
                    </div>
                </div>

                <hr>

                <div>
                    <h4 class="d-flex justify-content-between">Tipo de seguro <button class="btn btn-primary btn-seguro-change"> <i class="fa fa-pencil"></i> Cambiar plan</button></h4>
                    <select disabled name="" id="" class="form-control seguros-select">
                        <% 
                        for (let i = 0; i < data.seguro.length; i++) {
                            const seguro = data.seguro[i];
                        %>
                            <% if (seguro.id == data.contrato.idSeguro) { %>
                                <option data-prefijo="<%= seguro.prefijo %>" value="<%= seguro.id %>" selected><%= seguro.descripcion %></option>
                            <% } else {%> 
                                
                                <option value="<%= seguro.id %>" data-prefijo="<%= seguro.prefijo %>" ><%= seguro.descripcion %></option>    
                            <% } %>
                        <%
                        }
                        %>
                    </select>
                </div>

                <hr>

                <h4 class="d-flex justify-content-between">Beneficiarios <button class="btn btn-success btn-beneficiario-add"> <i class="fa fa-plus"></i> Agregar</button></h4>
                <div class="mt-2 w-100">
                    <table class="table table-striped table-responsive w-100">
                        <thead class="w-100">
                            <tr>
                                <th>Nombre y Apellido</th>
                                <th>Cédula de identidad</th>
                                <th>Fecha de nacimiento</th>
                                <th>Edad</th>
                                <th>Fecha de ingreso</th>
                                <th>Plan</th>
                                <th>Opciones</th>
                            </tr>
                        </thead>
                        <tbody class="beneficiario-rows w-100">
                            <% for( let i = 0; i < data.beneficiarios.length; i++ ) { %>
                                <% 
                                const beneficiario = data.beneficiarios[i]; 
                                const beneficiarioSeguro = data.seguro.find(( { id } ) => id == beneficiario.idSeguro)
                                %>
                                <tr class="beneficiario-row" data-id="<%= beneficiario.id %>">
                                    <td><%= beneficiario.razonSocial %></td>
                                    <td><%= beneficiario.id %></td>
                                    <td><%= helpers.dateFormattedDMY(null, null, null, beneficiario.fechaNacimiento) %></td>
                                    <td><%= helpers.dobToAge(beneficiario.fechaNacimiento) %></td>
                                    <td><%= helpers.dateFormattedDMY(null, null, null, beneficiario.fechaIngreso) %></td>
                                    <td><%= beneficiarioSeguro.descripcion %></td>
                                    <td class="d-flex">
                                        <a href="/beneficiarios/modificar/<%= beneficiario.id %>" target="_blank" class="btn btn-primary ml-2 btn-modify"> <i class="fa fa-pencil"></i> Modificar</a>
                                        <button class="btn btn-danger btn-erase ml-2"> <i class="fa fa-trash-o"></i> Eliminar</button>
                                    </td>
                                </tr>
                            <% } %>
                        </tbody>
                    </table>
                </div>

                <hr>

                <h4 class="d-flex justify-content-between">
                    Comentarios adicionales 
                    <button class="btn btn-primary btn-modify-textarea"> 
                        <i class="fa fa-pencil"></i> Modificar
                    </button> 
                    <button class="btn btn-success btn-comentario-accept d-none"> 
                        <i class="fa fa-check"></i> Aceptar
                    </button>
                </h4>
                <div class="mt-2 mb-2">
                    <textarea name="" value="<%= data.comentarios %>" rows="5" class="w-100 comentarios-textarea" disabled></textarea>
                </div>

                <a class="btn btn-info cancel-btn" href="/contratos"> <i class="fa fa-backward"></i> Retroceder</a>
            </div>
        </div>
    </div>
</div>

<dialog class="rounded">
    <div class="beneficiario-container" is-done="false">
        <div class="form-group">
            <button class="btn btn-primary btn-add-beneficiario">Aceptar</button>
            <button class="btn btn-secondary btn-cancel-beneficiario">Cancelar</button>
        </div>
        <div class="form-group">
            <label>¿Posee id fiscal? <input class="beneficiario-idFiscal-checkbox" type="checkbox" checked></label>
            <input type="text" class="form-control beneficiario-idFiscal" name="id"></input>
        </div>
        <div class="form-group">
            <label>Nombre</label>
            <input type="text" class="form-control beneficiario-name"></input>
        </div>
        <div class="form-group">
            <label>Fecha de nacimiento</label>
            <input type="date" value="<%= helpers.dateYMD() %>" 
            class="form-control beneficiario-birthdate"
            max="<%= helpers.dateYMD() %>"></input>
        </div>
        <div class="form-group">
            <label>Fecha de ingreso</label>
            <input type="date" value="<%= helpers.dateYMD() %>"
                class="form-control beneficiario-enter-date"
                max="<%= helpers.dateYMD() %>"></input>
        </div>
        <div class="form-group">
            <label>Tipo de seguro</label>
            <select name="" id="" class="form-control beneficiario-seguros-select">
                <% for(let i=0; i < data.seguro.length; i++ ) { %>
                    <% const seguro = data.seguro[i] %>
                        <option value="<%= seguro.id %>">
                            <%= seguro.descripcion %>
                        </option>
                        <% } %>
            </select>
        </div>
    </div>
</dialog>

<script>
    const resourceName = "<%= resourceName %>";

    const titleName = "<%= titleSingular %>";

    // user object
    const user = JSON.parse(`<%- JSON.stringify(user) %>`);

    const relationshipStructure = JSON.parse(`<%- JSON.stringify(relationship) %>`);
</script>

<script src="/js/components/individuals/contratos/script.js" defer></script>