<!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">
                    
                    <div class="row mb-4">
                        <div class="col-md-8">
                            <h2><i class="bi bi-wallet2"></i> Cuenta #<%= cuenta.id %></h2>
                            <h4 class="text-muted"><%= cuenta.nombre %> <%= cuenta.apellido %></h4>
                        </div>
                        <div class="col-md-4 text-end">
                            <div class="card bg-success text-white">
                                <div class="card-body py-2">
                                    <small>Saldo Disponible</small>
                                    <h2 class="mb-0 fw-bold"><%= empresa.moneda %> <%= parseFloat(cuenta.saldo_actual).toFixed(2) %></h2>
                                </div>
                            </div>
                        </div>
                    </div>

                    <% if(mensajeError && mensajeError.length > 0) { %>
                        <div class="alert alert-danger"><%= mensajeError %></div>
                    <% } %>
                    <% if(mensajeExito && mensajeExito.length > 0) { %>
                        <div class="d-none" id="flashMessageSuccess"><%= mensajeExito %></div>
                    <% } %>

                    <div class="row g-4">
                        <div class="col-md-4">
                            <div class="card card-box p-4 border-primary h-100 shadow-sm">
                                <h5 class="text-primary mb-3">Realizar Transacción</h5>
                                <form action="/ahorros/transaccion" method="POST">
                                    <input type="hidden" name="cuenta_id" value="<%= cuenta.id %>">
                                    <div class="mb-3">
                                        <label class="form-label">Tipo de Movimiento</label>
                                        <select name="tipo" class="form-select" required>
                                            <option value="deposito">📥 Depósito (Entrada)</option>
                                            <option value="retiro">📤 Retiro (Salida)</option>
                                        </select>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Monto (<%= empresa.moneda %>)</label>
                                        <input type="number" step="0.01" name="monto" class="form-control form-control-lg fw-bold" placeholder="0.00" required>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Observación</label>
                                        <textarea name="observacion" class="form-control" rows="2"></textarea>
                                    </div>
                                    <button type="submit" class="btn btn-dark w-100 py-2">Procesar Operación</button>
                                </form>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="card card-box p-0 shadow-sm">
                                <div class="card-header bg-white fw-bold py-3">Últimos Movimientos</div>
                                <div class="table-responsive">
                                    <table class="table table-hover mb-0 align-middle">
                                        <thead class="table-light">
                                            <tr>
                                                <th>Fecha</th>
                                                <th>Tipo</th>
                                                <th>Detalle</th>
                                                <th class="text-end">Monto</th>
                                                <th class="text-center">Voucher</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <% if(movimientos.length > 0) { %>
                                                <% movimientos.forEach(m => { %>
                                                    <tr>
                                                        <td class="small"><%= new Date(m.fecha_movimiento).toLocaleString() %></td>
                                                        <td>
                                                            <% if(m.tipo_movimiento == 'deposito') { %>
                                                                <span class="badge bg-success-subtle text-success border border-success">Depósito</span>
                                                            <% } else { %>
                                                                <span class="badge bg-danger-subtle text-danger border border-danger">Retiro</span>
                                                            <% } %>
                                                        </td>
                                                        <td class="text-muted small"><%= m.observacion || '-' %></td>
                                                        <td class="text-end fw-bold <%= m.tipo_movimiento == 'deposito' ? 'text-success' : 'text-danger' %>">
                                                            <%= m.tipo_movimiento == 'deposito' ? '+' : '-' %> <%= empresa.moneda %> <%= parseFloat(m.monto).toFixed(2) %>
                                                        </td>
                                                        <td class="text-center">
                                                            <a href="/reportes/ticket_ahorro/<%= m.id %>" target="_blank" class="btn btn-sm btn-outline-secondary">
                                                                <i class="bi bi-printer-fill"></i>
                                                            </a>
                                                        </td>
                                                    </tr>
                                                <% }) %>
                                            <% } else { %>
                                                <tr><td colspan="5" class="text-center py-4 text-muted">Sin movimientos registrados.</td></tr>
                                            <% } %>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<%- include('../partials/footer') %>