@extends('admin.layout')
@section('title','Editar Horario')
@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')}}">
    <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.index') }}">Consultar Horarios</a></li>
            <li class="breadcrumb-item active" aria-current="page">Editar Horario</li>
        </ol>
    </nav>

    <div id="app">

        <div id="card" class="card card-info card-outline collapsed-card">

            <div class="card-header">
                <h3 class="card-title">Reasignar Horario</h3>
            </div>

            <div id="card_horario" class="card-body">
                <form id="form">
                    <meta name="csrf-token" content="{{ csrf_token() }}"/>
                    <div class="modal-body">

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>Periodo</label>
                                    <select class="form-control" id="period" name="period">
                                        <option value="{{ $period }}">{{ $period }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>AÑO</label>
                                    <select class="form-control" id="year" name="year">
                                        <option value="{{ $year }}">{{ $year }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="row">

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>UNIDAD ACADEMICA</label>
                                    <select class="form-control" id="unit" name="unit">
                                        <option value="{{ $unit_id }}">{{ $unit_code }}</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label>DOCENTES</label>
                                    <select class="form-control" id="employee_id" name="employee_id">
                                        <option value="{{ $employee_id }}">{{ $employee_name }}</option>
                                    </select>
                                </div>
                            </div>

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

        <div id="card" class="card card-info card-outline collapsed-card">
            <div class="card-body">

                <div class="row">
                    
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>UNIDAD(ES) DE APRENDIZAJE Y ACTIVIDADES COMPLEMENTARIAS</label>
                            <select v-model="unitActivitySelected" v-on:change="onUnitActivitiesChange()" class="form-control">
                                <option value="-1">- SELECCIONE UNA UNIDAD O ACTIVIDAD -</option>
                                <option v-for="(item, index) in unitsActivities" v-bind:value="index">
                                    @{{ item.description }}
                                </option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label>GRUPO</label>
                            <select v-model="groupsSelected" v-on:change="setSettings()" class="form-control">
                                <option value="-1">- SELECCIONE UN GRUPO -</option>
                                <option v-for="(item, index) in groups" v-bind:value="index">
                                    @{{ item.code + ' - ' + item.turn + ' - ' + item.careers.description + ' - ' + item.semesters.number + ' Semestre' }}
                                </option>   
                            </select>
                        </div>
                    </div>

                </div>
                
            </div>

        </div>

        <div class="row">
            <div class="col-md-4 text-left">
                <button v-bind:disabled="!canAssign" type="button" @click="assign()" class="btn btn-info">ASIGNAR</button>
            </div>
            <div class="col-md-4 text-center">
                <div class="row">
                    <div class="col-md-12">
                        <div class="alert" v-bind:class="{ 'alert-primary': totalHoursAssign <= employee.hours, 'alert-danger': totalHoursAssign > employee.hours }" role="alert">
                            <strong>HORAS POR ASIGNAR: @{{ employee.hours - totalHoursAssign }}</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4 text-right">
                <button v-bind:disabled="dataJoinModel.length == 0 || totalHoursAssign > employee.hours" type="button"  @click="confirmSave()" class="btn btn-success">GUARDAR HORARIO</button>
            </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 mb-2">
            <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-6 text-left">
                <button class="btn btn-secondary" @click="confirmRemove()" id="btnRemove">¿ELIMINASTE UNA ASIGNACIÓN? ACTUALIZAR</button>
            </div>
            
            <div class="col-md-6 text-right">
                <button type="button"  @click="confirmReset()" class="btn btn-secondary">REINICIAR ASIGNACIONES</button>
            </div>
        </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/scheduleEdit.js')}}"></script>
@endsection