{% extends 'TARJETAS/templates/base.html' %}
{% load static %}

{% block title %}Estado de Cuenta - Tarjeta{% endblock %}

{% block content %}
<!-- Content Header (Page header) -->
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Estado de Cuenta</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="{% url 'tarjetas:screen_dashboard' %}">Inicio</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'tarjetas:screen_tarjetas' %}">Tarjetas</a></li>
                    <li class="breadcrumb-item active">Estado de Cuenta</li>
                </ol>
            </div>
        </div>
    </div>
</section>

<!-- Main content -->
<section class="content">
    <div class="container-fluid">
        <!-- Periodo Selector -->
        <div class="card card-primary">
            <div class="card-header">
                <h3 class="card-title">Seleccionar Periodo</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Tarjeta:</label>
                            <select class="form-control select2" style="width: 100%;">
                                <option selected="selected">Visa Platinum ****1234</option>
                                <option>Mastercard Gold ****5678</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Periodo de Corte (día 19):</label>
                            <select class="form-control select2" style="width: 100%;">
                                <option selected="selected">Mayo 2023</option>
                                <option>Abril 2023</option>
                                <option>Marzo 2023</option>
                                <option>Febrero 2023</option>
                                <option>Enero 2023</option>
                                <option>Diciembre 2022</option>
                                <option>Noviembre 2022</option>
                                <option>Octubre 2022</option>
                                <option>Septiembre 2022</option>
                                <option>Agosto 2022</option>
                                <option>Julio 2022</option>
                                <option>Junio 2022</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <button class="btn btn-primary">Generar Reporte</button>
                <button class="btn btn-default float-right">Imprimir Estado de Cuenta</button>
            </div>
        </div>

        <!-- Resumen General -->
        <div class="card card-secondary">
            <div class="card-header">
                <h3 class="card-title">Resumen del Periodo</h3>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="info-box bg-light">
                            <span class="info-box-icon bg-info"><i class="fas fa-credit-card"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Límite de Crédito</span>
                                <span class="info-box-number">$25,000.00</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="info-box bg-light">
                            <span class="info-box-icon bg-success"><i class="fas fa-hand-holding-usd"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Crédito Disponible</span>
                                <span class="info-box-number">$12,450.50</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="info-box bg-light">
                            <span class="info-box-icon bg-warning"><i class="fas fa-file-invoice-dollar"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Pago Mínimo</span>
                                <span class="info-box-number">$1,250.00</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="info-box bg-light">
                            <span class="info-box-icon bg-danger"><i class="fas fa-calendar-alt"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Fecha de Pago</span>
                                <span class="info-box-number">15/06/2023</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Movimientos del Periodo -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Movimientos del Periodo (19/04/2023 al 19/05/2023)</h3>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="text-white">
                            <tr>
                                <th>Fecha</th>
                                <th>Descripción</th>
                                <th>Referencia</th>
                                <th>Cargos</th>
                                <th>Abonos</th>
                                <th>Saldo</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Saldo Anterior -->
                            <tr class="table-active">
                                <td>19/04/2023</td>
                                <td colspan="2"><strong>SALDO ANTERIOR</strong></td>
                                <td></td>
                                <td></td>
                                <td class="text-right">$8,450.50</td>
                            </tr>
                            
                            <!-- Gastos -->
                            <tr class="table-info">
                                <td colspan="6"><strong>GASTOS</strong></td>
                            </tr>
                            <tr>
                                <td>20/04/2023</td>
                                <td>Compra en Amazon</td>
                                <td>AMZN*MKTPLACE</td>
                                <td class="text-right text-danger">$1,250.00</td>
                                <td></td>
                                <td class="text-right">$9,700.50</td>
                            </tr>
                            <tr>
                                <td>25/04/2023</td>
                                <td>Supermercado</td>
                                <td>SUPERMERCADO LA CADENA</td>
                                <td class="text-right text-danger">$850.50</td>
                                <td></td>
                                <td class="text-right">$10,551.00</td>
                            </tr>
                            <tr>
                                <td>02/05/2023</td>
                                <td>Restaurante</td>
                                <td>RESTAURANTE EL BUEN SABOR</td>
                                <td class="text-right text-danger">$350.00</td>
                                <td></td>
                                <td class="text-right">$10,901.00</td>
                            </tr>
                            
                            <!-- Cobros Automáticos -->
                            <tr class="table-info">
                                <td colspan="6"><strong>COBROS AUTOMÁTICOS</strong></td>
                            </tr>
                            <tr>
                                <td>19/05/2023</td>
                                <td>Interés anual MN</td>
                                <td>INT ANUAL MN</td>
                                <td class="text-right text-danger">$120.75</td>
                                <td></td>
                                <td class="text-right">$11,021.75</td>
                            </tr>
                            <tr>
                                <td>19/05/2023</td>
                                <td>Interés anual ME</td>
                                <td>INT ANUAL ME</td>
                                <td class="text-right text-danger">$45.30</td>
                                <td></td>
                                <td class="text-right">$11,067.05</td>
                            </tr>
                            <tr>
                                <td>19/05/2023</td>
                                <td>Interés moratorio</td>
                                <td>INT MORATORIO</td>
                                <td class="text-right text-danger">$85.20</td>
                                <td></td>
                                <td class="text-right">$11,152.25</td>
                            </tr>
                            <tr>
                                <td>19/05/2023</td>
                                <td>Interés por sobregiro</td>
                                <td>INT SOBREGIRO</td>
                                <td class="text-right text-danger">$62.50</td>
                                <td></td>
                                <td class="text-right">$11,214.75</td>
                            </tr>
                            
                            <!-- Pagos -->
                            <tr class="table-info">
                                <td colspan="6"><strong>PAGOS</strong></td>
                            </tr>
                            <tr>
                                <td>10/05/2023</td>
                                <td>Pago realizado</td>
                                <td>PAGO TARJETA</td>
                                <td></td>
                                <td class="text-right text-success">$2,000.00</td>
                                <td class="text-right">$9,214.75</td>
                            </tr>
                            
                            <!-- Saldo Actual -->
                            <tr class="table-active">
                                <td>19/05/2023</td>
                                <td colspan="2"><strong>SALDO ACTUAL</strong></td>
                                <td></td>
                                <td></td>
                                <td class="text-right">$9,214.75</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col-md-6">
                        <p class="text-muted"><strong>Notas:</strong></p>
                        <ul class="text-muted">
                            <li>Los intereses se calculan sobre el saldo promedio diario</li>
                            <li>El pago mínimo corresponde al 10% del saldo actual</li>
                            <li>Fecha límite de pago: 15/06/2023</li>
                        </ul>
                    </div>
                    <div class="col-md-6 text-right">
                        <p><strong>Total Cargos:</strong> <span class="text-danger">$2,764.25</span></p>
                        <p><strong>Total Abonos:</strong> <span class="text-success">$2,000.00</span></p>
                        <p><strong>Saldo Final:</strong> <span class="font-weight-bold">$9,214.75</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block modals %}
<!-- Modal para detalles de movimiento -->
<div class="modal fade" id="modal-movimiento">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Detalles del Movimiento</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <dl class="row">
                    <dt class="col-sm-4">Fecha:</dt>
                    <dd class="col-sm-8">20/04/2023</dd>
                    <dt class="col-sm-4">Descripción:</dt>
                    <dd class="col-sm-8">Compra en Amazon</dd>
                    <dt class="col-sm-4">Referencia:</dt>
                    <dd class="col-sm-8">AMZN*MKTPLACE</dd>
                    <dt class="col-sm-4">Monto:</dt>
                    <dd class="col-sm-8">$1,250.00</dd>
                    <dt class="col-sm-4">Categoría:</dt>
                    <dd class="col-sm-8">Compras Online</dd>
                    <dt class="col-sm-4">Comercio:</dt>
                    <dd class="col-sm-8">Amazon México</dd>
                </dl>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary">Imprimir Comprobante</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(function () {
        // Inicializar select2
        $('.select2').select2({
            theme: 'bootstrap4'
        });

        // DataTable para movimientos (si fuera necesario)
        $('.table').DataTable({
            responsive: true,
            paging: false,
            searching: false,
            info: false,
            ordering: false
        });

        // Ejemplo de manejo de clic en fila para mostrar modal
        $('table tbody tr').on('click', function() {
            $('#modal-movimiento').modal('show');
        });
    });
</script>
{% endblock %}