@extends('admin.layout')
@section('title','Consultar Horarios')
@section('links')
    <link rel="stylesheet" href="{{asset('admintemplate/assets/css/jquery.schedule.min.css')}}">
    <link rel="stylesheet" href="{{asset('admintemplate/assets/css/jquery.schedule-demo.min.css')}}">
    <link rel="stylesheet" href="{{asset("css/plugins/select2.min.css")}}">
    <style>
        .weekdays {
            margin: 0;
            padding: 10px 0;
            background-color:#ddd;
        }

        .weekdays li {
            display: inline-block;
            width: 13.6%;
            color: #666;
            text-align: center;
        }
    </style>
@endsection
@section('content')

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item text-primary"><a href="{{ route('schedule.create') }}">Nuevo Horario</a></li>
            <li class="breadcrumb-item active" aria-current="page">Consultar Horarios</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-md-12">
            <div class="card" style="width: 100%;">
                <div class="card-body">
                    <h5 class="card-title">Consultar</h5>

                    <div class="row mt-3">

                        <div class="col-md-4">
                            <div class="form-group">
                                <select class="js-example-basic-single form-control" id="period" name="period">
                                    <option value="-1">- SELECCIONE UN PERIODO -</option>
                                    @foreach ($periods as $item)
                                        <option value="{{ $item->period }}">{{ $item->period }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <select class="js-example-basic-single form-control" id="year" name="year">
                                    <option value="-1">- SELECCIONE UN AÑO -</option>
                                    @foreach ($years as $item)
                                        <option value="{{ $item->year }}">{{ $item->year }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <select class="js-example-basic-single form-control" name="unit" id="unit">
                                    <option value="-1">- SELECCIONE UNA UNIDAD ACADEMICA -</option>
                                    @foreach ($units as $item)
                                        <option value="{{ $item->id }}">{{ $item->code }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                    </div>

                    <hr>
                    
                    <div class="row mt-3">

                        <div class="col-md-6">
                            Grupo
                            <div class="row">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <select class="js-example-basic-single form-control" id="career" name="career">
                                            <option value="-1">- SELECCIONE UNA CARRERA -</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <select class="js-example-basic-single form-control" id="group" name="group">
                                            <option value="-1">- SELECCIONE UN GRUPO -</option>
                                        </select>
                                    </div>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-md-12 text-center">
                                    <button type="button" class="btn btn-primary btn-block" id="btn_grupos">CONSULTAR POR GRUPO</button>
                                </div>
                            </div>
                            
                        </div>

                        <div class="col-md-6">
                            Docente
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <select class="js-example-basic-single form-control" name="emplo" id="emplo">
                                            <option value="-1">- SELECCIONE UN DOCENTE -</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <button class="btn btn-primary btn-block" id="btn_docentes">CONSULTAR POR DOCENTE</button>
                                </div>
                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>


    </div>

    <div class="row">
        <div class="col-md-12">
            <ul class="weekdays">
                <li>LUNES</li>
                <li>MARTES</li>
                <li>MIERCOLES</li>
                <li>JUEVES</li>
                <li>VIERNES</li>
                <li>SABADO</li>
                <li>DOMINGO</li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <div id="schedule" class="jqs-demo"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <ul class="weekdays">
                <li>LUNES</li>
                <li>MARTES</li>
                <li>MIERCOLES</li>
                <li>JUEVES</li>
                <li>VIERNES</li>
                <li>SABADO</li>
                <li>DOMINGO</li>
            </ul>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-center" id="div_edit">
            
        </div>
    </div>  

@endsection
@section('scripts')
    <script src="{{asset('admintemplate/assets/js/plugins/jquery-ui.min.js')}}"></script>
    <script src="{{asset('admintemplate/assets/js/plugins/jquery.schedule.min.js')}}"></script>
    {{-- <script src="{{asset('admintemplate/assets/js/plugins/vueDev.js')}}"></script> --}}
    {{-- <script src="{{asset('admintemplate/assets/js/plugins/vueProd.js')}}"></script> --}}
    <script src="{{asset('js/plugins/select2.min.js')}}"></script>
    <script src="{{asset('js/scheduleConsult.js')}}"></script>
@endsection