<!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: 900px;">
                    
                    <div class="d-flex align-items-center mb-4 text-primary">
                        <i class="bi bi-credit-card-2-front fs-2 me-2"></i>
                        <h2 class="mb-0">Registrar Cobro</h2>
                    </div>

                    <% if(mensajeError && mensajeError.length > 0) { %>
                        <div class="alert alert-danger"><%= mensajeError %></div>
                    <% } %>

                    <div class="row g-4">
                        
                        <div class="col-md-5">
                            <div class="card card-box p-4 bg-light h-100">
                                <h5 class="fw-bold mb-3 border-bottom pb-2">Resumen del Préstamo #<%= prestamo.id %></h5>
                                
                                <p class="mb-2"><strong>Cliente:</strong> <%= prestamo.nombre %> <%= prestamo.apellido %></p>
                                
                                <p class="mb-2"><strong>Total Prestado:</strong> <%= empresa.moneda %><%= parseFloat(prestamo.monto_prestado).toFixed(2) %></p>
                                
                                <p class="mb-3"><strong>Cuotas:</strong> <%= prestamo.cuotas %> (<%= prestamo.frecuencia %>)</p>

                                <div class="bg-white p-3 rounded border text-center shadow-sm mt-3">
                                    <small class="text-muted text-uppercase">Saldo Pendiente</small>
                                    <h2 class="text-danger fw-bold mb-0">
                                        <%= empresa.moneda %> <%= parseFloat(saldoPendiente).toFixed(2) %>
                                    </h2>
                                </div>

                                <div class="mt-4">
                                    <div class="d-grid">
                                        <button class="btn btn-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#historialCollapse">
                                            Ver Historial de Pagos
                                        </button>
                                    </div>
                                    <div class="collapse mt-2" id="historialCollapse">
                                        <ul class="list-group list-group-flush small">
                                            <% if(historial.length > 0) { %>
                                                <% historial.forEach(h => { %>
                                                    <li class="list-group-item d-flex justify-content-between bg-transparent px-0">
                                                        <span><%= new Date(h.fecha_pago).toLocaleDateString() %></span>
                                                        <span class="fw-bold text-success">+<%= empresa.moneda %><%= parseFloat(h.monto_pagado).toFixed(2) %></span>
                                                    </li>
                                                <% }) %>
                                            <% } else { %>
                                                <li class="list-group-item bg-transparent px-0 text-muted">Sin pagos previos</li>
                                            <% } %>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-7">
                            <div class="card card-box p-4 h-100 shadow-sm">
                                <form action="/pagos/guardar" method="POST">
                                    <input type="hidden" name="prestamo_id" value="<%= prestamo.id %>">

                                    <div class="mb-4">
                                        <label class="form-label fw-bold">Monto a Cobrar (<%= empresa.moneda %>) *</label>
                                        <input type="number" step="0.01" name="monto_pagado" class="form-control form-control-lg border-success" placeholder="0.00" required autofocus>
                                        <div class="form-text">
                                            Máximo a cobrar: <%= empresa.moneda %><%= parseFloat(saldoPendiente).toFixed(2) %>
                                        </div>
                                    </div>

                                    <div class="mb-4">
                                        <label class="form-label">Observaciones (Opcional)</label>
                                        <textarea name="observaciones" class="form-control" rows="3" placeholder="Ej: Pago de cuota 2 por transferencia"></textarea>
                                    </div>

                                    <div class="d-grid gap-2">
                                        <button type="submit" class="btn btn-success btn-lg">
                                            <i class="bi bi-check-circle"></i> Confirmar Pago
                                        </button>
                                        <a href="/prestamos" class="btn btn-outline-secondary">Cancelar</a>
                                    </div>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
<%- include('../partials/footer') %>