@extends('layouts.app')

@section('scripts')
    @vite(['resources/js/procesoSeleccion/candidatos-validacion.js'])
    @vite(['resources/js/procesoSeleccion/candidatos.js'])
    @vite(['resources/js/utils.js'])
@endsection


@section('styles')
    @vite(['resources/css/procesoSeleccion/candidatos.css'])
@endsection

@section('title')
    {{ Breadcrumbs::render('candidatos') }}
    <div class="page-header">
        <h2>Candidatos a licenciaturas de ingreso indirecto</h2>
    </div>
@endsection

@section('content')


    <div class="card mb-3" >
        <div class="card-header text-bg-secondary">
            Datos
        </div>
        <div class="card-body">
            <div class="row" >
                <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="control-label">Carrera:</label>
                        {!! Form::text('dato_carrea', $carrera['carrera'] , ['class' => 'form-control text-uppercase input-falso fw-bold'  ]) !!}
                    </div>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="control-label">Periodo:</label>
                        {!! Form::text('dato_periodo', $periodoActual , ['class' => 'form-control text-uppercase input-falso'  ]) !!}
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="control-label">Total registrados:</label>
                        {!! Form::text('dato_total_registrados', $totalRegistrados , ['class' => 'form-control text-uppercase input-falso'  ]) !!}
                    </div>
                </div>
                <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
                    <div class="form-group">
                        <label class="control-label">Total aceptados:</label>
                        {!! Form::text('dato_total_aceptados', $totalAceptados , [ 'id' => 'dato_total_aceptados',   'class' => 'form-control text-uppercase input-falso'  ]) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>




    <div class="clearfix"></div>

    <nav id="menus-tabs">
        <div class="nav nav-tabs" id="nav-tab" role="tablist">
            <button class="nav-link active"  data-bs-toggle="tab" data-bs-target="#nav-listado"
                    type="button" role="tab" aria-controls="nav-listado-tab" aria-selected="true">Listado
            </button>
            <button class="nav-link "  data-bs-toggle="tab" data-bs-target="#nav-estadisticas" type="button" role="tab" aria-controls="nav-estadisticas-tab" aria-selected="false" tabindex="-1">
                Estadísticas
            </button>
        </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane  show active p-3" id="nav-listado" role="tabpanel" aria-labelledby="nav-listado-tab" tabindex="0">
            <div class="row">
                <div class="d-flex flex-row-reverse bd-highlight">
                    {!! Form::button('<i class="bi bi-file-earmark-excel"></i>
                            Reporte Completo',['class' => 'btn btn-primary reporte_completo',
                            'id' => 'btnReporteCompleto', 'data-toggle' => 'modal']) !!}
                </div>
            </div>
            @include('procesoSeleccion.candidatos.list')

        </div>
        <div class="tab-pane  " id="nav-estadisticas" role="tabpanel" aria-labelledby="nav-estadisticas-tab" tabindex="0">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 p-3">
                    <div id="pop_div"></div>
                    @barchart('Population', 'pop_div')

                    <div id="chart-div"></div>
                    @piechart('TipoIngreso', 'chart-div')

                    <div id="donut-div"></div>
                    @donutchart('Sexo', 'donut-div')

                    <div id="column-div"></div>
                    @columnchart('Edad', 'column-div')
                    <br/>
                    <div id="estados-div"></div>
                    @donutchart('Estados', 'estados-div')
                </div>
            </div>
        </div>
    </div>
@endsection

@section('modal')
    @include('procesoSeleccion.candidatos.modals.new-modal')
    @include('common.modals.mdl-confirmation')
    {!! Generate::modalErrors() !!}
@endsection