{% extends 'base.html' %}
{% load static %}
{% block titulo %}CRÉDITOS Y ABONOS del {{fecha_inicio_str}} a  {{fecha_fin_str}}{% endblock %}

{% block content %}

<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10">
        

        <form method="GET" action="{% url 'creditos_cliente' %}" class="mb-4">
            <div class="row">
                <div class="col-md-4">
                    <label for="yearSelect" class="form-label">Selecciona cliente:</label>
                    <select name="cliente" id="cliente" class="form-control select2" required>
                        <option value="">Seleccione un cliente</option>
                        {% for id, name in client_choices %}
                        <option value="{{ id }}" {% if select_client == id %}selected{% endif %}>{{ name }}</option>
                        {% endfor %}
                    </select>
                </div>
        
                <div class="col-md-3">
                    <label for="yearSelect" class="form-label"><i class="fas fa-calendar-alt"></i> Fecha de inicio:</label>

                    <input type="text" id="fechaInicio" name="fecha_inicio" class="form-control datepicker"
                        value="{{ fecha_inicio }}" placeholder="Selecciona la fecha" required>
                </div>
        
                <div class="col-md-3">
                    <label for="yearSelect" class="form-label"><i class="fas fa-calendar-alt"></i> Fecha FIN:</label>
                    <input type="text" id="fechaFin" name="fecha_fin" class="form-control datepicker"
                        value="{{ fecha_fin }}" placeholder="Selecciona la fecha" required>
                </div>
        
                <div class="col-md-2 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary w-100">Filtrar</button>
                </div>
            </div>
        </form>
        


        <div class="row">
            
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-4">
                        <div class="card marine-card sales-card">
                            <div class="card-header">
                                <h5 class="card-title"></i>CRÉDITO</h5>
                            </div>
                            <div class="card-body">
                                <div class="marine-stat">
                                    <div class="summary-value text-center display-4">
                                        {{ info.creditos }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card marine-card sales-card">
                            <div class="card-header">
                                <h5 class="card-title"></i>ABONOS</h5>
                            </div>
                            <div class="card-body">
                                <div class="marine-stat">
                                    <div class="summary-value text-center display-4">
                                        {{ info.abonos }}
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card marine-card sales-card">
                            <div class="card-header">
                                <h5 class="card-title"></i> POR PAGAR</h5>
                            </div>
                            <div class="card-body">
                                <div class="marine-stat">
                                    <div class="summary-value text-center display-4">
                                        {{ info.por_pagar }}
                                    </div>
                                </div>
                               
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-md-12">
                <!-- Gráfica General de Ventas -->
                <div class="card shadow mb-4">
                    <div class="card-body">
                        <!--           <h5 class="card-title text-center"><i class="fas fa-chart-line"></i> Gráfica de CRECIMIeNTO EN
                            COMPRAS, CREDITOS Y ABONOS
                            por
                            Mes en {{anio_seleccionado}}</h5>-->
                        <div id="graph-container" class="mt-3">
                            <!-- Aquí se inyecta la gráfica -->
                            {{ info.grafica|safe }}
                        </div>
                    </div>
                </div>
            </div>
            
        </div>


       
    </div>

</div>
{% endblock %}