@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Inicio";
        $modulo = "Dash";
        $vista="Dashboard";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo}}</title>
@endsection
@section("contenido")
    <div class="row gx-5 gx-xl-10 align-items-stretch">
        <div class="col-sm-3 mb-5 mb-xl-10">
            <div class="card card-flush h-lg-100">
                <!--begin::Header-->
                <div class="card-header pt-5">
                    <!--begin::Title-->
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Matriculas totalizadas</span>
                        <span class="text-gray-400 mt-1 fw-semibold fs-6">Periodo {{$parametro->periodo->periodo}}</span>
                    </h3>
                    <!--end::Title-->
                </div>
                <!--end::Header-->
                <!--begin::Body-->
                <div class="card-body pt-5">
                    <div class="d-flex flex-stack">
                        <div class="text-gray-700 fw-semibold fs-6 me-2">Total matrículas</div>
                        <div class="d-flex align-items-senter">
                            <i class="ki-outline ki-arrow-up-right fs-2 text-success me-2"></i>
                            <span class="text-gray-900 fw-bolder fs-6">{{$totalMatriculas}}</span>
                        </div>
                    </div>
                    @foreach($tiposSexo as $tipoSexo)
                        <div class="separator separator-dashed my-3"></div>

                        <div class="d-flex flex-stack">
                            <div class="text-gray-700 fw-semibold fs-6 me-2">{{ $tipoSexo->tipo_sexo }}</div>
                            <div class="d-flex align-items-center">
                                @if ($tipoSexo->id == 1)
                                    <i class="fas fa-person fs-2 text-primary me-2"></i>
                                @elseif ($tipoSexo->id == 2)
                                    <i class="fas fa-person-dress fs-2 text-danger me-2"></i>
                                @else
                                    <i class="fas fa-venus-mars fs-2 text-info me-2"></i>
                                @endif
                                <span class="text-gray-900 fw-bolder fs-6">{{ isset($resultados[$tipoSexo->id]) ? $resultados[$tipoSexo->id] : 0 }}</span>
                            </div>
                        </div>
                    @endforeach
                    <div class="separator separator-dashed my-3"></div>
                    <div class="d-flex flex-stack">
                        <div class="text-gray-700 fw-semibold fs-6 me-2">Total Denegadas</div>
                        <div class="d-flex align-items-senter">
                            <i class="ki-outline ki-dislike fs-2 text-danger me-2"></i>
                            <span class="text-gray-900 fw-bolder fs-6">{{$totalDenegadas}}</span>
                        </div>
                    </div>

                    <div class="separator separator-dashed my-3"></div>
                    <div class="d-flex flex-stack">
                        <div class="text-gray-700 fw-semibold fs-6 me-2">Total Trasladados</div>
                        <div class="d-flex align-items-senter">
                            <i class="ki-outline ki-route fs-2 text-warning me-2"></i>
                            <span class="text-gray-900 fw-bolder fs-6">{{$totalTraslados}}</span>
                        </div>
                    </div>

                    <div class="separator separator-dashed my-3"></div>
                    <div class="d-flex flex-stack">
                        <div class="text-gray-700 fw-semibold fs-6 me-2">Total Excluidos</div>
                        <div class="d-flex align-items-senter">
                            <i class="ki-outline ki-courier-express fs-2 text-info me-2"></i>
                            <span class="text-gray-900 fw-bolder fs-6">{{$totalExcluidos}}</span>
                        </div>
                    </div>


                </div>
            </div>
        </div>

        <div class="col-sm-9 mb-5 mb-xl-10">
            <div class="card card-flush h-lg-100">
                <!--begin::Header-->
                <div class="card-header pt-5">
                    <!--begin::Title-->
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Matrículas por nivel y por sexo</span>
                        <span class="text-gray-400 mt-1 fw-semibold fs-6">Periodo {{$parametro->periodo->periodo}}</span>
                    </h3>
                    <!--end::Title-->
                </div>
                <!--end::Header-->
                <!--begin::Body-->
                <div class="card-body pt-5">
                    <div id="grafico" style="height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row gx-5 gx-xl-10">
        <div class="col-sm-3 mb-5 mb-xl-10">
            <div class="card card-flush h-lg-100" id="divCupos">
                <!--begin::Header-->
                <div class="card-header pt-5">
                    <!--begin::Title-->
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Secciones con cupos</span>
                        <small>Total cupos disponibles  <span class="badge badge-success">{{$seccionesDisponibles->sum('disponible')}}</span></small>
                        <span class="text-gray-400 mt-1 fw-semibold fs-6">Periodo {{$parametro->periodo->periodo}}
                            <span id="printCupos" style="cursor: pointer" class="badge badge-success"> <i class="fas fa-file-excel"></i></span>
                        </span>
                    </h3>
                    <!--end::Title-->
                </div>
                <div class="card-body pt-5" style="max-height: 400px; overflow-y: auto;">
                    @foreach($seccionesDisponibles as $grupo)
                        <div class="separator separator-dashed my-3"></div>

                        <div class="d-flex flex-stack">
                            <div class="text-gray-700 fw-semibold fs-6 me-2">{{ $grupo->grupo }}</div>
                            <div class="d-flex align-items-center">
                                @if($grupo->disponible<=5)
                                    <i class="ki-outline ki-arrow-down-left fs-2 text-warning me-2"></i>
                                @else
                                    <i class="ki-outline ki-arrow-up-right fs-2 text-success me-2"></i>
                                @endif
                                <span class="text-gray-900 fw-bolder fs-6">{{ $grupo->disponible }}</span>
                                <span class="text-gray-400 fw-bold fs-6">/{{ $grupo->cupo }}</span>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="col-sm-4 mb-5 mb-xl-10">
            <div class="card card-flush h-lg-100" id="divCupos">
                <!--begin::Header-->
                <div class="card-header pt-5">
                    <!--begin::Title-->
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Matrículas por Nacionalidad</span>
                        <span class="text-gray-400 mt-1 fw-semibold fs-6">Periodo {{$parametro->periodo->periodo}}</span>
                    </h3>
                    <!--end::Title-->
                </div>
                <div class="card-body pt-5">
                    <div id="graficoNacionalidad" style="height: 350px;"></div>
                </div>
            </div>
        </div>

        <div class="col-sm-5 mb-5 mb-xl-10">
            <div class="card card-flush h-lg-100" id="divCupos">
                <!--begin::Header-->
                <div class="card-header pt-5">
                    <!--begin::Title-->
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Matrículas por Ruta</span>
                        <span class="text-gray-400 mt-1 fw-semibold fs-6">Periodo {{$parametro->periodo->periodo}}</span>
                    </h3>
                    <!--end::Title-->
                </div>
                <div class="card-body pt-5">
                    <div id="graficoRuta" style="height: 350px;"></div>
                </div>
            </div>
        </div>

        <div class="col-sm-4 mb-5 mb-xl-10">
            <div class="card card-flush h-lg-100">
                <!--begin::Header-->
                <div class="card-header pt-5">
                    <!--begin::Title-->
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Matrículas por estado</span>
                        <span class="text-gray-400 mt-1 fw-semibold fs-6">Periodo {{$parametro->periodo->periodo }}</span>
                    </h3>
                    <!--end::Title-->
                </div>
                <div class="card-body pt-5">
                    <div id="graficoEstado" style="height: 350px;"></div>
                </div>
            </div>
        </div>

        <div class="col-sm-8 mb-5 mb-xl-10">
            <div class="card card-flush h-lg-100">
                <!--begin::Header-->
                <div class="card-header pt-5">
                    <!--begin::Title-->
                    <h3 class="card-title align-items-start flex-column">
                        <span class="card-label fw-bold text-dark">Matrículas por satélite</span>
                        <span class="text-gray-400 mt-1 fw-semibold fs-6">Periodo {{$parametro->periodo->periodo}}</span>
                    </h3>
                    <!--end::Title-->
                </div>
                <!--end::Header-->
                <!--begin::Body-->
                <div class="card-body pt-5">
                    <div id="graficoPorSatelite" style="height: 350px;"></div>
                </div>
            </div>
        </div>

    </div>
@endsection


@section("scripts")
    <script>
        $( document ).ready(function() {

            var theme = $('html').attr('data-bs-theme');
            var textColor = (theme == 'dark') ? '#fff' : '#000';


            function setupBarChart() {
                var options = {
                    chart: {
                        type: 'bar',
                        height: 350,
                        stacked: true,
                        foreColor: textColor,
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '30%',
                            endingShape: 'rounded',
                        },
                    },
                    xaxis: {
                        categories: @json($graficaData['labels']),
                    },
                    series: @json($graficaData['series']),
                    legend: {
                        position: 'top',
                    },
                    colors: ['#007bff', '#dc3545', '#ffc107'],
                };

                var chart = new ApexCharts(document.querySelector("#grafico"), options);
                chart.render();
            }

            // Función para configurar y renderizar el gráfico de pastel (nacionalidades)
            function setupPieChart() {
                var pieChartOptions = {
                    chart: {
                        type: 'pie',
                        height: 500,
                        foreColor: textColor,
                    },

                    labels: @json($graficaDataNacionalidad['labels']),
                    series: @json($graficaDataNacionalidad['series'][0]['data']),
                    legend: {
                        position: 'bottom',
                    },

                };

                var pieChart = new ApexCharts(document.querySelector("#graficoNacionalidad"), pieChartOptions);
                pieChart.render();
            }
            // Función para configurar y renderizar el gráfico de pastel (nacionalidades)
            function setupPieEstado() {
                var pieChartOptions = {
                    chart: {
                        type: 'pie',
                        height: 500,
                        foreColor: textColor,
                    },

                    labels: @json($graficaDataEstado['labels']),
                    series: @json($graficaDataEstado['series'][0]['data']),
                    legend: {
                        position: 'bottom',
                    },


                };

                var pieChart = new ApexCharts(document.querySelector("#graficoEstado"), pieChartOptions);
                pieChart.render();
            }


            function setupColumnChartRuta() {
                var columnChartOptionsRuta = {
                    chart: {
                        type: 'bar', // Cambiar a tipo de gráfico de barras (columnas)
                        height: 350,
                        foreColor: textColor,
                    },
                    plotOptions: {
                        bar: {
                            horizontal: true,
                            columnWidth: '30%',
                            endingShape: 'rounded',
                        },
                    },
                    xaxis: {
                        categories: @json($graficaDataRuta['labels']),
                    },
                    series: @json($graficaDataRuta['series']),
                    legend: {
                        position: 'top',
                    },
                    colors: ['#007bff', '#dc3545', '#ffc107', '#28a745', '#ff5722', '#673ab7', '#e91e63', '#009688', '#795548', '#607d8b'],
                };

                var columnChartRuta = new ApexCharts(document.querySelector("#graficoRuta"), columnChartOptionsRuta);
                columnChartRuta.render();
            }

            function setupBarSatelite() {
                var options = {
                    chart: {
                        type: 'bar',
                        height: 350,
                        stacked: true,
                        foreColor: '#333',  // Cambiar al color del texto según tu preferencia
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '30%',
                            endingShape: 'rounded',
                        },
                    },
                    xaxis: {
                        categories: @json($matriculaPorSatelite['labels']),
                    },
                    series: @json($matriculaPorSatelite['series']),
                    legend: {
                        position: 'top',
                    },
                    colors: ['#007bff', '#dc3545', '#ffc107', '#28a745', '#8000c6', '#673ab7', '#e91e63', '#009688', '#795548', '#607d8b'],
                    dataLabels: {
                        enabled: true
                    },
                    tooltip: {
                        y: {
                            formatter: function (val) {
                                return val + " matriculas";
                            }
                        }
                    }
                };

                var chart = new ApexCharts(document.querySelector("#graficoPorSatelite"), options);
                chart.render();
            }


            $(document).ready(function () {
                setupBarChart(); // Llamar a la función para el gráfico de barras
                setupPieChart(); // Llamar a la función para el gráfico de pastel (nacionalidades)
                setupPieEstado(); // Llamar a la función para el gráfico de pastel (nacionalidades)
                setupColumnChartRuta(); // Llamar a la función para el gráfico de pastel (rutas)
                setupBarSatelite(); // Llamar a la función para el gráfico de barras

            });
        });
    </script>
@endsection