@section('vendor-style')
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/select2/select2-materialize.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/sweetalert/sweetalert.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/materialize-stepper/materialize-stepper.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/quill/katex.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/quill/monokai-sublime.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/quill/quill.snow.css')}}">
@endsection
@section('page-style')
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/app-file-manager.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/widget-timeline.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/form-select2.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/form-wizard.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/intro.css')}}">
@endsection

<div class="container">
    <div class="section">
        <div class="card">
            <div class="card-content">
                <div class="row">
                    <h6>DATOS GENERALES DE EVENTO</h6>
                </div>

                <div class="row">
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Fecha:* </strong></label>
                            {!! Form::date('fecha_evento', isset($registro) ? $registro->fecha_evento : null, ['class' => 'form-control', 'placeholder' => '', 'id' => 'fecha_evento', 'name' => 'fecha_evento', 'required']) !!}
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Hora inicio:* </strong></label>
                            {!! Form::time('inicia', isset($registro) ? $registro->hora_inicio : null, ['class' => 'form-control', 'placeholder' => '', 'id' => 'inicia', 'name' => 'inicia', 'required']) !!}
                        </div>
                    </div><div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Hora termino:* </strong></label>
                            {!! Form::time('termino', isset($registro) ? $registro->hora_termino : null, ['class' => 'form-control', 'placeholder' => '', 'id' => 'termino', 'name' => 'termino', 'required']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Tipo evento:* </strong></label>
                            {!! Form::select('tipo_evento',$tipoEvento, isset($registro) ? $registro->tipo_evento : [], ['class' => 'form-control browser-default select7', 'placeholder' => '', 'id' => 'tipo_evento', 'name' => 'tipo_evento', 'required']) !!}
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Sede:* </strong></label>
                            {!! Form::select('sede',$sedes, isset($registro) ? $registro->sede : [], ['class' => 'form-control browser-default select7', 'placeholder' => '', 'id' => 'sede', 'name' => 'sede', 'required']) !!}
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Comisión:* </strong></label>
{{--                            {!! Form::select('comisiones',$comisions, isset($registro->comisiones) ? $registro->comisiones[0]->id_comision :  [], ['class' => 'form-control browser-default select7', 'placeholder' => '', 'id' => 'comisiones', 'name' => 'comisiones[]','multiple'=>'multiple', 'required']) !!}--}}
                            {!! Form::select('comisiones',$comisions, [], ['class' => 'form-control browser-default select7', 'placeholder' => '', 'id' => 'comisiones', 'name' => 'comisiones[]','multiple'=>'multiple']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Tipo reunión:* </strong></label>
                            {!! Form::select('tipo_reunion',$tipoReunion, isset($registro) ? $registro->tipo_reunion : [], ['class' => 'form-control browser-default select7', 'placeholder' => '', 'id' => 'tipo_reunion', 'name' => 'tipo_reunion']) !!}
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Modalidad:* </strong></label>
                            {!! Form::select('modalidad',$modalidad, isset($registro) ? $registro->modalidad : [], ['class' => 'form-control browser-default select7', 'placeholder' => '', 'id' => 'modalidad', 'name' => 'modalidad', 'required']) !!}
                        </div>
                    </div>
                    <div class="input-field col s4">
                        <div class="form-group">
                            <label class="control-label"><strong>Nombre del evento:* </strong></label>
                            {!! Form::text('nombre_evento', isset($registro) ? $registro->nombre_evento : null, ['class' => 'form-control', 'placeholder' => '', 'id' => 'nombre_evento', 'name' => 'nombre_evento']) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <div class="form-group">
                            <label class="control-label"><strong>Materia:* </strong></label>
                            {!! Form::text('materia', isset($registro) ? $registro->materia : null, ['class' => 'form-control', 'placeholder' => '', 'id' => 'materia', 'name' => 'materia', 'required']) !!}
                        </div>
                    </div>
                </div>
<input type="hidden" name="hoy" id="hoy" value="{{$actual}}">
                <div class="row">
                    <div class="col s12">
                        <center>
                            <button class="waves-effect waves-dark btn btn-primary" type="submit" id="b1" onclick="enviaForm()">
                                Guardar
                            </button>
                        </center>
                        <div id="loader1" style="display: none;" class="loader1">
                            <img style="position: relative; left: 45%; top: 40%; width: 10%; height: 10%;" src="{{ asset('images/logo/cube.gif') }}">
                            <p style="position: relative; left: 46%; top: 40%;">Enviando . . .</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
    <script src="{{ asset('vendors/select2/select2.full.min.js') }}"></script>
    <script src="{{ asset('js/scripts/form-select2.js') }}"></script>
    <script src="{{ asset('vendors/sweetalert/sweetalert.min.js') }}"></script>
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $(document).ready(function() {
            $("#tipo_evento").change();

            $(".select7").select2({
                open: false,
                focus: false,
                placeholder: "Seleccione una opción",
                language: "es"
            });
        });

        $(document).on('change', '#tipo_evento', function() {
            var tipo_evento = $("#tipo_evento").val();
            if (tipo_evento == 2) {
                $("#comisiones").prop("required", true);
                $("#comisiones").prop("disabled", false);
                $("#tipo_reunion").prop("required", true);
                $("#tipo_reunion").prop("disabled", false);
                $("#materia").prop("required", true);
                $("#materia").prop("disabled", false);
            } else if (tipo_evento == 3) {
                $("#comisiones").prop("required", false);
                $("#comisiones").prop("disabled", true);
                $("#tipo_reunion").prop("required", false);
                $("#tipo_reunion").prop("disabled", true);
                $("#materia").prop("required", true);
                $("#materia").prop("disabled", false);
            } else if (tipo_evento == 1) {
                $("#comisiones").prop("required", false);
                $("#comisiones").prop("disabled", true);
                $("#tipo_reunion").prop("required", false);
                $("#tipo_reunion").prop("disabled", true);
                $("#materia").prop("required", false);
                $("#materia").prop("disabled", true);
            }
        })

        $(document).on('blur', '#fecha_evento', function() {
            var fecha = $("#fecha_evento").val();
            var hoy = $("#hoy").val();
            if (fecha < hoy) {
                swal({
                    title: "¡Atención!",
                    text: "No se pueden agendar evento con fecha pasada",
                    icon: 'warning',
                    dangerMode: true,
                    timer: 3000,
                    buttons: false
                }).then(function (){
                    $("#fecha_evento").val('');
                });
            }
        });
        $(document).on('change', '#sede', function() {
            var salon = $("#sede").val();
            var fecha_limite_atencion = $("#fecha_evento").val();
            var inicio = $("#inicia").val();
            var termino = $("#termino").val();
            if (termino != '' && inicio!= '' && salon != '' && fecha_limite_atencion != ''){
                if (salon != 11){
                    $.ajax({
                        type: 'GET',
                        data: {
                            'termino': termino,
                            'inicio': inicio,
                            'salon': salon,
                            'fecha_limite_atencion': fecha_limite_atencion,
                        },
                        url: "{{ url('getDisponibilidad') }}",
                        success: function (response) {
                            console.log(response);
                            if (response == 1){
                                swal({
                                    title: "¡Atención!",
                                    text: "El salón no esta disponible, ya existe un evento agendado.",
                                    icon: 'warning',
                                    dangerMode: true,
                                    timer: 4000,
                                    buttons: false
                                }).then(function() {
                                    $("#sede").val('').trigger('change.select2');
                                });
                            }
                        },
                    });
                }
            }
        });

        function enviaForm()
        {
            $(".loader1").show();
            document.getElementById('b1').style.display='none';
        }
    </script>
@endpush