{% extends 'base.html' %}

{% block titulo %}Servicio de Transporte{% endblock %}

{% block seccion %}
<div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
    <div>
        <h3 class="fw-bold mb-3">Panel Principal</h3>
        <h6 class="op-7 mb-2">Servicio de Transporte del Ejército Bolivariano</h6>
    </div>
</div>
{% endblock %}

{% block contenido %}
{% load humanize %}



<div class="row">
    <div class="col-sm-7 col-md-4">
        <div class="card card-stats card-round">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-icon">
                        <div class="icon-big text-center icon-primary bubble-shadow-small">
                            <i class="fas fa-car"></i>
                        </div>
                    </div>
                    <div class="col col-stats ms-3 ms-sm-0">
                        <div class="numbers">
                            <p class="card-category">Vehículos Administrativos</p>
                            <h4 class="card-title">{{ vehiculos_administrativos_count|intcomma }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-7 col-md-4">
        <div class="card card-stats card-round">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-icon">
                        <div class="icon-big text-center icon-info bubble-shadow-small">
                            <i class="fas fa-truck-monster"></i>
                        </div>
                    </div>
                    <div class="col col-stats ms-3 ms-sm-0">
                        <div class="numbers">
                            <p class="card-category">Vehículos Tácticos</p>
                            <h4 class="card-title">{{ vehiculos_tacticos_count|intcomma }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-7 col-md-4">
        <div class="card card-stats card-round">
            <div class="card-body">
                <div class="row align-items-center">
                    <div class="col-icon">
                        <div class="icon-big text-center icon-success bubble-shadow-small">
                            <i class="fas fa-shield-alt"> + </i> <i class="fas fa-crosshairs"></i>
                        </div>
                    </div>
                    <div class="col col-stats ms-3 ms-sm-0">
                        <div class="numbers">
                            <p class="card-category">Unidades</p>
                            <h4 class="card-title">{{ unidades_count|intcomma }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <div class="card-title">Grafico de Cantidades Comparativas</div>
      </div>
      <div class="card-body">
        <div class="chart-container">
          <canvas
            id="pieChart"
            style="width: 50%; height: 50%"
          ></canvas>
        </div>
      </div>
    </div>
  </div>

{% endblock %}



{% block js %}


<script>
    $(document).ready(function() {
        $.ajax({
            url: '/api/datos/', // Ruta correcta al endpoint
            method: 'GET',
            success: function(data) {
                var ctx = document.getElementById('pieChart').getContext('2d');
                var myPieChart = new Chart(ctx, {
                    type: "pie",
                    data: {
                        datasets: [
                            {
                                data: [data.vehiculos_administrativos, data.vehiculos_tacticos, data.unidades], // Asegúrate de que estos campos existan en la respuesta
                                backgroundColor: ["#1d7af3", "#f3545d", "#fdaf4b"],
                                borderWidth: 0,
                            },
                        ],
                        labels: ['Vehículos Administrativos', 'Vehículos Tácticos', 'Unidades'],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        legend: {
                            position: "bottom",
                            labels: {
                                fontColor: "rgb(154, 154, 154)",
                                fontSize: 11,
                                usePointStyle: true,
                                padding: 20,
                            },
                        },
                        pieceLabel: {
                            render: "percentage",
                            fontColor: "white",
                            fontSize: 14,
                        },
                        tooltips: false,
                        layout: {
                            padding: {
                                left: 20,
                                right: 20,
                                top: 20,
                                bottom: 20,
                            },
                        },
                    },
                });
            },
            error: function(xhr, status, error) {
                console.error("Error al obtener los datos: ", error);
            }
        });
    });
</script>



{% endblock  %}