@extends('template.layout')

@section('styles')
    <link href="{{asset('plugins/bootstrap-fileinput/bootstrap-fileinput.css')}}" rel="stylesheet" type="text/css" />
    <style>
        .select2.select2-container.select2-container--default{
            width: 95% !important;
        }
        .select2-selection.select2-selection--single{
            height: 33px !important;
        }
    </style>
@endsection

@section('content')
    <h1 class="page-title">
        Agregar Proyección Social
    </h1>
    <div class="portlet light portlet-fit portlet-datatable bordered" style="padding-top: 25px;">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject font-green sbold uppercase"> Formulario para el ingreso de una nueva Proyección Social </span>
            </div>
        </div>
        <div class="portlet-body">

            {!! Form::open(array('id' => 'form-validation','enctype'=>'multipart/form-data','route' => array('proyeccion.crear'))) !!}
            <div class="form-horizontal">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('nombre', 'Nombre de la Proyección:', ['class' => 'control-label']) !!}
                            {!! Form::text('nombre', null, ['class' => 'form-control','required'=>'required']) !!}
                        </div>
                        <div class="form-group col-lg-3 col-xs-3" style="margin-right: 10px;">
                            {!! Form::label('alumno', 'Alumnos:', ['class' => 'control-label']) !!}
                            {!! Form::select('alumno[]', $alumnos, null, ['id'=>'selectAlumnos','class' => 'select2','style'=>'width:100%', 'multiple' => 'multiple']) !!}
                            <h6 id="ArrAlumno" style="color: #e73d4a"></h6>
                        </div>
                        <div class="form-group col-lg-3 col-xs-3" style="margin-right: 10px;">
                            {!! Form::label('profesor', 'Profesor:', ['class' => 'control-label']) !!}
                            {!! Form::select('profesor[]', $profesores, null, ['id'=>'selectProfesor', 'class' => 'select2','style'=>'width:100%', 'multiple' => 'multiple']) !!}
                            <h6 id="ArrProfesor" style="color: #e73d4a"></h6>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('campo', 'Campo de investigación:', ['class' => 'control-label']) !!}
                            <select class="select2" style="width:100%" required="required" id="campo_investigacion" name="campo_investigacion" required="required">
                                @foreach($investigaciones as $item)
                                    <option value="{{$item->id}}">{{$item->descripcion}}</option>
                                @endforeach
                            </select>
                            <i class="glyphicon glyphicon-plus" id="Agregar_Campo"></i>
                            <h6 style="color: grey">Si no logra encontrar el campo de investigación puede agregar uno a su derecha presionando  (<i class="glyphicon glyphicon-plus"></i>)</h6>
                        </div>
                        <div class="form-group col-lg-6 col-xs-6" style="margin-right: 10px;">
                            {!! Form::label('fecha_nacimiento', 'Fecha de publicación:', ['class' => 'control-label']) !!}
                            {!! Form::date('fecha_nacimiento', null, array('placeholder' => '','class' => 'form-control date' ,'data-provider' => 'datepicker','style' => 'resize:none;', 'required' => 'required')) !!}
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-group col-lg-7 col-xs-7" style="margin-right: 10px;">
                            <div class="col-md-7" style="padding-left: 0;">

                                {!! Form::label('campo', 'Adjuntar archivo del campo de investigación (.pdf):', ['class' => 'control-label']) !!}
                                <div class="fileinput fileinput-new" data-provides="fileinput">
                                    <div class="input-group input-large">
                                        <div class="form-control uneditable-input input-fixed input-medium" data-trigger="fileinput" >
                                            <i class="fa fa-file-pdf-o fileinput-exists" ></i>&nbsp;
                                            <span class="fileinput-filename"> </span>
                                        </div>
                                        <span class="input-group-addon btn default btn-file">
                                            <span class="fileinput-new"> Selecionar archivo </span>
                                            <span class="fileinput-exists"> Cambiar archivo </span>
                                            {!! Form::file('input_text', array('id' => 'input_text', 'required' => 'required', 'name' => 'input_text')) !!}
                                        </span>
                                        <a href="javascript:;" class="input-group-addon btn red fileinput-exists" data-dismiss="fileinput"> Eliminar </a>
                                    </div>
                                </div>
                                <h6 id="mensajeh6" style="color: red"></h6>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-actions" style="text-align: left; padding-top: 50px;">
                    <a class="btn dark btn-outline" href="{{ url('gestionarproyecto')}}">Cancelar</a>
                    {!! Form::submit('Guardar', ['class' => 'btn green btn-submit']) !!}
                </div>

            </div>

            {!! Form::close() !!}

            @include('alerts.index')

        </div>
    </div>
@endsection

@section('scripts')
    <script src="{{asset('plugins/bootstrap-fileinput/bootstrap-fileinput.js')}}" type="text/javascript"></script>
    <script>

        $(document).ready(function () {

            $("#form-validation").submit(function () {
                var size = parseFloat((($("#input_text").get(0).files[0].size)*(0.000001)).toFixed(2));
                var ext = $('#input_text').val().split('.').pop();
                var texto_pdf="", texto_integrante = "Debe ingresar por lo menos un integrante para el proyecto, Alumno o Profesor";

                if($("#selectAlumnos").val() === null && $("#selectProfesor").val() === null){
                    $("#ArrProfesor,#ArrAlumno").empty();
                    $("#ArrProfesor,#ArrAlumno").text(texto_integrante);
                    return false;
                }



                if(ext == 'pdf'){
                    if(size < 25){
                        $(".btn-submit").attr('disabled',true);
                        return true;
                    }
                    else{
                        texto_pdf = 'El archivo no puede pesar mas de 25 MB';
                        $("#mensajeh6").empty();
                        $("#mensajeh6").text(texto_pdf);
                        $(".btn-submit").attr('disabled',false);
                        return false;
                    }
                }
                else{
                    texto_pdf = 'El archivo tiene que ser de formato PDF (.pdf)';
                    $("#mensajeh6").empty();
                    $("#mensajeh6").text(texto_pdf);
                    $(".btn-submit").attr('disabled',false);
                    return false;
                }
            });
        });




        $("#form-validation").validate({});


        $('#campo_investigacion').select2();
        $('#selectAlumnos').select2();
        $('#selectProfesor').select2();




        $("#Agregar_Campo").on('click',function () {

            swal({
                    title: "Campo de Investigación",
                    text: "Agregue un nuevo campo de investigación para su Proyecto Social: ",
                    type: "input",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    confirmButtonText: "Agregar",
                    cancelButtonText: "Cancelar",
                    animation: "slide-from-top",
                    inputPlaceholder: "Campo de Investigación"
                },
                function(inputValue){
                    if (inputValue === false) return false;

                    if (inputValue === "") {
                        swal.showInputError("Registrar Campo de Investigación");
                        return false
                    }

                    $.ajax({
                        type: "post",
                        url: "{{url('agregarcampo')}}",
                        data: {campo : inputValue},
                        success: function (data) {
                            $("#campo_investigacion").empty();
                            var select  = $.makeArray(data['items']);
                            for(var s = 0; s < data['c']; s++){
                                $("#campo_investigacion").append("<option value='"+select[s]['id']+"' name='"+select[s]['descripcion']+"'>"+select[s]['descripcion']+"</option>");
                            }

                            $('#campo_investigacion > option[name="'+inputValue+'"]').attr('selected','selected');


                            swal("Agregado", "Campo de Investigación: " + inputValue + " agregado", "success");

                        }
                    });



                });
        });



    </script>
@endsection