<!DOCTYPE html>
<html lang="es">
<%- include('../partials/head') %>
<body>
    <div class="container-fluid">
        <div class="row flex-nowrap">
            <%- include('../partials/sidebar') %>

            <div class="col py-3">
                <div class="container" style="max-width: 800px;">
                    
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h2>📅 Cronograma de Pagos</h2>
                        <a href="/prestamos" class="btn btn-outline-secondary">Volver</a>
                    </div>

                    <div class="card card-box p-4 border-0 shadow">
                        
                        <div class="d-flex justify-content-between border-bottom pb-3 mb-3">
                            <div>
                                <h5 class="fw-bold text-primary"><%= prestamo.nombre %> <%= prestamo.apellido %></h5>
                                <p class="text-muted mb-0">Préstamo #<%= prestamo.id %> | <%= prestamo.frecuencia.toUpperCase() %></p>
                            </div>
                            <div class="text-end">
                                <h3 class="fw-bold"><%= empresa.moneda %> <%= parseFloat(prestamo.monto_total).toFixed(2) %></h3>
                                <small class="text-muted">Total a Pagar</small>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table class="table table-striped text-center">
                                <thead class="table-dark">
                                    <tr>
                                        <th># Cuota</th>
                                        <th>Fecha de Vencimiento</th>
                                        <th>Monto a Pagar</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% cronograma.forEach(cuota => { 
                                        const hoy = new Date();
                                        const vencida = new Date(cuota.fecha) < hoy;
                                    %>
                                        <tr>
                                            <td class="fw-bold"><%= cuota.numero %></td>
                                            <td class="<%= vencida ? 'text-danger fw-bold' : '' %>">
                                                <%= cuota.fecha.toLocaleDateString() %>
                                                <% if(vencida) { %><i class="bi bi-exclamation-circle-fill ms-1 small"></i><% } %>
                                            </td>
                                            <td><%= empresa.moneda %> <%= cuota.monto.toFixed(2) %></td>
                                            <td>
                                                <span class="badge bg-light text-dark border">Programado</span>
                                            </td>
                                        </tr>
                                    <% }) %>
                                </tbody>
                            </table>
                        </div>

                        <div class="mt-4 text-end">
                            <a href="/reportes/cronograma_pdf/<%= prestamo.id %>" target="_blank" class="btn btn-danger btn-lg">
                                <i class="bi bi-file-pdf-fill"></i> Descargar PDF Oficial
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
<%- include('../partials/footer') %>