@extends('front.layoutwithout')

@section('title','Faltas')
@section('sub-title')

@section('content')

    <div class="row" id="tickets">
        <div class="col-xl-12">

            <div class="tab-content" id="myTabContent">

                <div class="tab-pane fade show active" id="1" role="tabpanel" aria-labelledby="1-tab">
                    <div class="row">
                        <div class="col-xl-3">
                            <div class="form-group">
                                <label class="radio-inline" style="margin-left: 0;">
                                    <input type="radio" class="type_click" name="type" value="alumno" checked> Alumno
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" class="type_click" name="type" value="grupo"> Grupo
                                </label>
                            </div>
                        </div>
                    </div>

                    <div id="alumno">

                        <form>
                            @csrf
                            <div class="row">
                                <div class="col-xl-2 col-lg-4">
                                    <div class="form-group">
                                        <label>Matricula</label>
                                        <input type="text"
                                            name="enrollment"
                                            id="enrollment-id"
                                            class="form-control">
                                    </div>
                                </div>

                                <div class="col-xl-8 col-lg-4">
                                    <div class="form-group">
                                        <label>Carrera</label>
                                        <input type="text" name="career" id="career" class="form-control" disabled>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg-4">
                                    <div class="form-group">
                                        <label>Semestre</label>
                                        <input type="text" name="semester" id="semester" class="form-control" disabled>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xl-8 col-lg-6 offset-xl-2">
                                    <div class="form-group">
                                        <label>Nombre</label>
                                        <input type="text" name="name" id="name" class="form-control" disabled>
                                    </div>
                                </div>
                                <div class="col-xl-2 col-lg-4">
                                    <div class="form-group">
                                        <label>Grupo</label>
                                        <input type="text" name="group" id="group" class="form-control" disabled>
                                    </div>
                                </div>
                            </div>
                        </form>

                        <div class="row">
                            <div class="col-xl-12">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped" id="subjects-table">
                                        <thead>
                                            <tr>
                                                <th style="width:7%;">Clave</th>
                                                <th>Materia</th>
                                                <th style="width:7%;">Hrs x Sem</th>
                                                <th style="width:7%;">Faltas</th>
                                                <th style="width:7%;">Más</th>
                                                <th style="width:7%;">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody id="subjects-table-body">
                                            <tr id="subjects-placeholder" class="text-center">
                                                <td colspan="6"><br></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <form id="student-absences-form">
                            <div class="row" id="absences-form">
                                <input type="hidden" name="enrollment">
                                <input type="hidden" name="student-id" id="student-id">
                                <div class="col-xl-8">
                                    <label>Materia</label>
                                    <select name="subject" class="form-control" id="select_subjects">
                                        <option value="0">-- Selecciona la materia --</option>
                                    </select>
                                </div>
                                <div class="col-xl-2">
                                    <div class="form-group">
                                        <label>Faltas</label>
                                        <input type="text" name="absences" class="form-control" id="student-absences">
                                    </div>
                                </div>
                                <div class="col-xl-2">
                                    <label>Más</label>
                                    <input type="text" name="absences-plus" class="form-control" id="student-absences-plus">
                                </div>
                                <div class="col-xl-4">
                                    <button type="button" class="btn btn-primary" id="student-absences-submit">Capturar</button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <div id="grupo" style="display:none;">

                        <form>
                            <input type="hidden" name="subject_id" id="fill_subject_group">
                            <div class="row">
                                <div class="col-xl-2 col-lg-3">
                                    <div class="form-group">
                                        <div class="checkbox checkbox-css">
                                            <input type="checkbox" name="quarter" id="quarter" value="0"/>
                                            <label for="quarter">Cuatrimestre</label>
                                        </div>
                                    </div>
                                </div>
                            </div><br>
                            <div class="row">
                                <div class="col-xl-2 col-lg-4">
                                    <div class="form-group">
                                        <label>Plan</label>
                                        <select name="career_plan_id" id="career_plan_id" class="form-control">
                                            @foreach($data['plans'] as $plan)
                                                <option value="{{$plan->id}}">{{$plan->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg-4">
                                    <label>Grupo</label>
                                    @php
                                        $groups = [
                                            'A','B','C','D','E','F','G','H','I','J',
                                            'K','L','M','N','O','P','Q','R','S','T',
                                            'U','V','W','X','Y','Z'];
                                    @endphp
                                    <select name="group_id" class="form-control">
                                        @foreach($groups as $group)
                                            <option value="{{$group}}">{{$group}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-xl-8 col-lg-4">
                                    <div class="form-group">
                                        <label>Carrera</label>
                                        <select name="career_id" id="career_id" class="form-control">
                                            @foreach($data['careers'] as $career)
                                                <option value="{{$career->id}}">{{$career->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-xl-2 col-lg-2">
                                    <div class="form-group">
                                        <label>Cve. Materia</label>
                                        <input type="text" id="subject-code" class="form-control">
                                    </div>
                                </div>

                                <div class="col-xl-8 col-lg-8">
                                    <div class="form-group">
                                        <label>Materia</label>
                                        <input type="text" name="subject" id="subject" class="form-control" disabled>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lg-2">
                                    <div class="form-group">
                                        <label>‎</label>
                                        <button type="button" id="get-subjects-btn" class="btn btn-block disabled" disabled="">Consultar</button>
                                    </div>
                                </div>

                            </div>
                        </form>

                        <div class="row">
                            <div class="col-xl-12">
                                <h3>Alumnos inscritos en la materia</h3>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped" id="table_1">
                                        <thead>
                                            <tr>
                                                <th style="width:10%;">Num.</th>
                                                <th style="width:10%;">Matrícula</th>
                                                <th>Nombre</th>
                                                <th style="width:7%;">Faltas</th>
                                                <th style="width:7%;">Más</th>
                                                <th style="width:7%;">Total</th>
                                            </tr>
                                        </thead>
                                        <tbody id="students-table-body">

                                            <tr id="students-placeholder" class="text-center">
                                                <td colspan="6"><br></td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <form id="group-absences-form">
                            <div class="row" id="group-absences-form">
                                <div class="col-xl-8">
                                    <label>Alumno</label>
                                    <select name="select-students" class="form-control" id="select-students">
                                        <option value="0">-- Selecciona el alumno --</option>
                                    </select>
                                </div>
                                <div class="col-xl-2">
                                    <div class="form-group">
                                        <label>Faltas</label>
                                        <input type="text" name="absences" class="form-control" id="group-student-absences">
                                    </div>
                                </div>
                                <div class="col-xl-2">
                                    <label>Más</label>
                                    <input type="text" name="absences-plus" class="form-control" id="group-student-absences-plus">
                                </div>
                                <div class="col-xl-4">
                                    <button type="button" class="btn btn-primary" id="group-student-absences-submit">Capturar</button>
                                </div>
                            </div>
                        </form>
                        <!-- STUDEENTS ABSNCES GROUP FORM -->
                    </div>

                </div>

            </div>

        </div>
    </div>

@endsection

@push('css')
@endpush

@push('js')
    <script src="{{ asset('/js/absences.js') }}"></script>
@endpush