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

{% block title %}Estado de Cuenta{% 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="#">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">
        <!-- Tarjeta de Resumen -->
        <div class="card card-primary card-outline">
            <div class="card-header">
                <h3 class="card-title">Resumen de la Tarjeta</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-minus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3 col-sm-6 col-12">
                        <div class="info-box bg-gradient-info">
                            <span class="info-box-icon"><i class="far 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">$10,000.00</span>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 70%"></div>
                                </div>
                                <span class="progress-description">
                                    70% utilizado
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-12">
                        <div class="info-box bg-gradient-success">
                            <span class="info-box-icon"><i class="fas fa-hand-holding-usd"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Disponible</span>
                                <span class="info-box-number">$3,000.00</span>
                                <div class="progress">
                                    <div class="progress-bar" style="width: 30%"></div>
                                </div>
                                <span class="progress-description">
                                    30% disponible
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-12">
                        <div class="info-box bg-gradient-warning">
                            <span class="info-box-icon"><i class="fas fa-money-bill-wave"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Pago Mínimo</span>
                                <span class="info-box-number">$500.00</span>
                                <span class="progress-description">
                                    Vence: 15/06/2023
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6 col-12">
                        <div class="info-box bg-gradient-danger">
                            <span class="info-box-icon"><i class="fas fa-calendar-times"></i></span>
                            <div class="info-box-content">
                                <span class="info-box-text">Pago Total</span>
                                <span class="info-box-number">$7,000.00</span>
                                <span class="progress-description">
                                    Vence: 15/06/2023
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-3">
                    <div class="col-md-6">
                        <div class="card card-secondary">
                            <div class="card-header">
                                <h3 class="card-title">Información de la Tarjeta</h3>
                            </div>
                            <div class="card-body">
                                <dl class="row">
                                    <dt class="col-sm-4">Titular:</dt>
                                    <dd class="col-sm-8">Juan Pérez</dd>
                                    <dt class="col-sm-4">Número:</dt>
                                    <dd class="col-sm-8">**** **** **** 1234</dd>
                                    <dt class="col-sm-4">Tipo:</dt>
                                    <dd class="col-sm-8">Visa Platinum</dd>
                                    <dt class="col-sm-4">Banco:</dt>
                                    <dd class="col-sm-8">Banco Ejemplo</dd>
                                    <dt class="col-sm-4">Fecha de Corte:</dt>
                                    <dd class="col-sm-8">25/05/2023</dd>
                                    <dt class="col-sm-4">Fecha de Pago:</dt>
                                    <dd class="col-sm-8">15/06/2023</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card card-secondary">
                            <div class="card-header">
                                <h3 class="card-title">Resumen de Movimientos</h3>
                            </div>
                            <div class="card-body">
                                <div class="chart">
                                    <canvas id="pieChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabla de Movimientos -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Movimientos del Periodo</h3>
                <div class="card-tools">
                    <div class="input-group input-group-sm">
                        <input type="text" class="form-control" placeholder="Buscar...">
                        <div class="input-group-append">
                            <button class="btn btn-primary">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover table-striped">
                        <thead class="text-white" style="background-color: #A3B0C7 !important;">
                            <tr>
                                <th>Fecha</th>
                                <th>Descripción</th>
                                <th>Categoría</th>
                                <th>Monto</th>
                                <th>Tipo</th>
                                <th>Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>10/05/2023</td>
                                <td>Compra en Amazon</td>
                                <td>Compras Online</td>
                                <td class="text-danger">$1,200.00</td>
                                <td><span class="badge bg-warning">Compra</span></td>
                                <td><span class="badge bg-success">Procesado</span></td>
                            </tr>
                            <tr>
                                <td>08/05/2023</td>
                                <td>Supermercado</td>
                                <td>Alimentos</td>
                                <td class="text-danger">$850.50</td>
                                <td><span class="badge bg-warning">Compra</span></td>
                                <td><span class="badge bg-success">Procesado</span></td>
                            </tr>
                            <tr>
                                <td>05/05/2023</td>
                                <td>Pago de Servicio</td>
                                <td>Servicios</td>
                                <td class="text-danger">$350.00</td>
                                <td><span class="badge bg-warning">Compra</span></td>
                                <td><span class="badge bg-success">Procesado</span></td>
                            </tr>
                            <tr>
                                <td>03/05/2023</td>
                                <td>Intereses</td>
                                <td>Intereses</td>
                                <td class="text-danger">$120.75</td>
                                <td><span class="badge bg-danger">Cargo</span></td>
                                <td><span class="badge bg-success">Procesado</span></td>
                            </tr>
                            <tr>
                                <td>01/05/2023</td>
                                <td>Pago realizado</td>
                                <td>Pago</td>
                                <td class="text-success">$2,000.00</td>
                                <td><span class="badge bg-success">Pago</span></td>
                                <td><span class="badge bg-success">Aplicado</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer clearfix">
                <ul class="pagination pagination-sm m-0 float-right">
                    <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                    <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
                </ul>
                <button class="btn btn-sm btn-default">
                    <i class="fas fa-download"></i> Descargar Estado de Cuenta
                </button>
            </div>
        </div>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script src="{% static 'plugins/chart.js/Chart.min.js' %}"></script>
<script>
    $(function () {
        // Pie Chart
        var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
        var pieData = {
            labels: [
                'Compras',
                'Servicios',
                'Intereses',
                'Pagos'
            ],
            datasets: [
                {
                    data: [2050.5, 350, 120.75, 2000],
                    backgroundColor: [
                        '#f56954',
                        '#00a65a',
                        '#f39c12',
                        '#00c0ef'
                    ]
                }
            ]
        }
        var pieOptions = {
            maintainAspectRatio: false,
            responsive: true,
        }
        new Chart(pieChartCanvas, {
            type: 'pie',
            data: pieData,
            options: pieOptions
        })
    })
</script>
{% endblock %}