@extends("admin.layout.layout")
@section("styles")
    @php
        $titulo = "Matriculas";
        $modulo = "Matriculas";
        $vista="Agenda";
    @endphp
    <title>{{getenv("APP_NAME")}} | {{$titulo }} {{$vista}}</title>

    <style>
        #tabla thead th {
            font-weight: bold;
        }
    </style>

@endsection

@section("contenido")
    <!--begin::Row-->
    <div class="row gx-5 gx-xl-10">
        <div class="card card-flush bgi-no-repeat bgi-size-contain bgi-position-x-end h-md-50 mb-1" style="background-color: #F1416C;)">
            <div class="card-header pt-5">
                <div class="card-title d-flex flex-column">
                    <span class="fs-2hx fw-bold text-white me-2 lh-1 ls-n2">{{$matriculas_sin_vb->count()}}</span>
                    <span class="text-white pt-1 fw-semibold fs-6">Matriculas pendientes {{$parametro->curso_lectivo->curso_lectivo}}</span>
                </div>
            </div>

            <div class="card-body d-flex align-items-end pt-0 mb-1">
                <div class="d-flex align-items-center flex-column mt-3 w-100">
                    <div class="d-flex justify-content-between fw-bold fs-6 text-white w-100 mt-auto mb-2">
                        @php
                            $totalMatriculas = $matriculas_sin_vb->count() + $matriculas_con_vb->count();
                            $porcentaje = $totalMatriculas > 0 ? ($matriculas_sin_vb->count() * 100) / $totalMatriculas : 0;
                        @endphp
                        <span>{{$totalMatriculas}} Total matrículas</span>
                        <span>{{$porcentaje}}% Sin VB</span>
                    </div>
                    <div class="h-8px mx-3 w-100 bg-white bg-opacity-50 rounded">
                        <div class="bg-white rounded h-8px" role="progressbar" style="width: {{$porcentaje}}%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>


                </div>

                <div class="d-flex mx-3">
                    <div class="form-group">
                        <label for="seccion_id" class="text-white">Sección</label>
                        <select class="form-select form-select-sm" id="seccion_id" name="seccion_id">
                            @foreach($secciones as $seccion)
                                <option value="{{$seccion->id}}">{{$seccion->seccion}}</option>

                            @endforeach
                        </select>
                    </div>

                </div>
            </div>
            <!--end::Card body-->
        </div>
        <div class="card mt-1">
            <div class="card-body my-0">
                <div class="row">
                    <div class="col-md-12">
                        <table id="tabla" class="table"></table>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection

@section("scripts")

@endsection