@extends('template.layout')

@section('content')

    <h1 class="page-title">
        <a href="{{ url('admin/encuestas') }}" title="Volver"><i class="icon-action-undo"></i></a>
        Gesti&oacute;n de Encuestas
        <small>Editar Encuesta</small>
    </h1>

{{ Form::model($encuesta, array('route' => array('encuesta.editar', $encuesta->id), 'id'=>'form-cabecera', 'method' => 'POST')) }}
    {{ csrf_field() }}
<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-check-square font-green"></i>
            <span class="caption-subject font-green sbold uppercase"> Datos Principales de la Encuesta </span>
        </div>
        <div class="actions">
            <a class="btn btn-success" href="{{ url('admin/encuestas/enviar/' . $encuesta->id) }}"> <i class="icon-action-redo"></i> Enviar Encuesta </a>
            <button id="submitCabecera" type="submit" class="btn btn-primary ladda-button" data-style="slide-down">
                <span class="ladda-label">
                    <i class="fa fa-save"></i>
                <span class="hidden-xs"> Guardar Cabecera </span>
                </span>
                <span class="ladda-spinner"></span>
            </button>
        </div>
    </div>
    <div class="portlet-body">
        <div class="form-body">
            {!! Form::hidden('id', $encuesta->id, ['id' => 'EncuestaId']) !!}
            <div class="form-group">
                {!! Form::label('nombre', 'Nombre', ['class' => 'control-label']) !!}
                {!! Form::text('nombre', null, ['class' => 'form-control','required'=>'required']) !!}
            </div>
            <div class="form-group">
                {!! Form::label('descripcion', 'Descripcion', ['class' => 'control-label']) !!}
                {!! Form::textarea('descripcion', null, ['class' => 'form-control','required'=>'required', 'style' => 'height:120px; resize:none']) !!}
            </div>
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        {!! Form::label('fecha_publicacion', 'Fecha de Publicación', ['class' => 'control-label']) !!}
                        {!! Form::text('fecha_publicacion', $encuesta->fecha_publicacion->format('d/m/Y'), ['id' => 'FechaPublicacion','class' => 'form-control','required'=>'required', 'style' => 'resize:none']) !!}
                    </div>
                </div>
                <div class="col-xs-6">
                    <div class="form-group">
                        {!! Form::label('fecha_finalizacion', 'Fecha de Finalización', ['class' => 'control-label']) !!}
                        {!! Form::text('fecha_finalizacion', $encuesta->fecha_finalizacion->format('d/m/Y'), ['id' => 'FechaFinalizacion','class' => 'form-control','required'=>'required', 'style' => 'resize:none']) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{!! Form::close() !!}

<div class="portlet light">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-check-square font-green"></i>
            <span class="caption-subject font-green sbold uppercase"> Preguntas </span>
        </div>
        <div class="actions">
            <button class="btn btn-primary Nuevo">
                <i class="fa fa-plus"></i>
                <span class="hidden-xs"> Agregar Pregunta </span>
            </button>
        </div>
    </div>
    <div class="portlet-body">
        @for ($i = 0;  $i < count($encuesta->preguntas); $i++)
            @if ($encuesta->preguntas[$i]->id_tipo_pregunta == 1)
                <div class="form-group encuesta-edit-pregunta">
                    <div class="form-group">{{$i+1}}.- {{$encuesta->preguntas[$i]->descripcion}}
                        <div class="pull-right">
                            <button id="Pregunta_{{$encuesta->preguntas[$i]->id}}" class="button-a Editar" style="color:#1b76d6"><i class="fa fa-pencil-square-o"></i></button>
                            <button id="Pregunta_{{$encuesta->preguntas[$i]->id}}" class="button-a Eliminar" style="color:#EC6248"><i class="fa fa-trash-o"></i></button>
                        </div>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" disabled="disabled">
                    </div>
                </div>
            @elseif ($encuesta->preguntas[$i]->id_tipo_pregunta == 2)
                <div class="form-group encuesta-edit-pregunta">
                    <div class="form-group">
                        {{$i + 1}}.-{{$encuesta->preguntas[$i]->descripcion}}
                        <div class="pull-right">
                            <button id="Pregunta_{{$encuesta->preguntas[$i]->id}}" class="button-a Editar" style="color:#1b76d6"><i class="fa fa-pencil-square-o"></i></button>
                            <button id="Pregunta_{{$encuesta->preguntas[$i]->id}}" class="button-a Eliminar" style="color:#EC6248"><i class="fa fa-trash-o"></i></button>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="icheck-inline">
                            <div class="input-group">
                                <div class="icheck-inline">
                                    @foreach ($encuesta->preguntas[$i]->respuestas as $respuesta)
                                        <label>
                                            <input type="radio" name="{{$encuesta->preguntas[$i]->id}}" class="icheck" disabled="disabled" style="word-break:break-all" data-radio="iradio_square-blue"> {{$respuesta->descripcion}}
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @elseif ($encuesta->preguntas[$i]->id_tipo_pregunta == 3)
                <div class="form-group encuesta-edit-pregunta">
                    <div class="form-group">
                        {{$i + 1}}.-{{$encuesta->preguntas[$i]->descripcion}}
                        <div class="pull-right">
                            <button id="Pregunta_{{$encuesta->preguntas[$i]->id}}" class="button-a Editar" style="color:#1b76d6"><i class="fa fa-pencil-square-o"></i></button>
                            <button id="Pregunta_{{$encuesta->preguntas[$i]->id}}" class="button-a Eliminar" style="color:#EC6248"><i class="fa fa-trash-o"></i></button>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="icheck-inline">
                            <div class="input-group">
                                <div class="icheck-inline">
                                    @foreach ($encuesta->preguntas[$i]->respuestas as $respuesta)

                                        <label>
                                            <input type="checkbox" name="{{$encuesta->preguntas[$i]->id}}" class="icheck" disabled="disabled" style="word-break:break-all" data-checkbox="icheckbox_square-blue"> {{$respuesta->descripcion}}
                                        </label>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        @endfor
    </div>
</div>

<div id="AgregarPregunta"></div>
<div id="EditarModal"></div>
@endsection
@section('scripts')
<script>

    $('#FechaPublicacion').datepicker({
        language: 'es',
        autoclose: true,
        startDate: '{{ $encuesta->fecha_publicacion->format('d-m-Y') < time() ? $encuesta->fecha_publicacion->format('d-m-Y') : date() }}',
        endDate: '{{ $encuesta->fecha_finalizacion->format('d-m-Y') }}'
    })
        .on('changeDate', function(e) {
            $('#FechaFinalizacion').datepicker('setStartDate', e.date);
        });
    $('#FechaFinalizacion').datepicker({
        language: 'es',
        autoclose: true,
        startDate: '{{ $encuesta->fecha_publicacion->format('d-m-Y') }}',
    })
        .on('changeDate', function(e) {
            $('#FechaPublicacion').datepicker('setEndDate', e.date);
        });
    $("#form-cabecera").validate({
        submitHandler: function (form) {
            var l = Ladda.create(document.querySelector('#submitCabecera'));
            l.start();
            form.submit();
        }
    });

    var urlPregunta = "{{url('admin/encuestas/pregunta')}}";
    var urlEncuesta = "{{ url('admin/encuestas/editar', ['id' => $encuesta->id]) }}";

    $(function () {
        $('button.Nuevo').on('click', function () {
            this.blur();
            var button = $(this);
            $(this).prop('disabled', true);
            $.ajax({
                url: urlPregunta + "/registrar",
                type: 'GET',
                cache: false,
                success: function (result) {
                    $('#AgregarPregunta').html(result).find('.modal').modal({
                        show: true
                    });
                    button.prop('disabled', false);
                }
            });
            return false;
        });
        return false;
    });

    $(function () {
        $('button.Editar').on('click', function () {
            this.blur();
            var button = $(this);
            button.prop("disabled",true);
            var id = $(this).attr('id').replace('Pregunta_', '');
            $.ajax({
                url: urlPregunta + "/editar",
                data:{
                    id: id
                },
                type: 'GET',
                cache: false,
                success: function (result) {
                    $('#EditarModal').html(result).find('.modal').modal({
                        show: true
                    });
                },
                complete: function (result) {
                    button.prop('disabled', false);
                }
            });

            return false;
        });

        return false;
    });
    function RemoveRespuesta(button) {
        $(button).parent().parent().remove();
    }

    function AddRespuestaUnica() {
        $("#SeleccionUnica").append("<div class='form-group row'><div class='col-lg-9 col-md-8 margin-bottom-5'> <input type='text' class='RespuestaUnica form-control' /></div><div class='col-lg-3 col-md-4'><button onclick='RemoveRespuesta(this);' class='btn btn-danger' style='width:100%;'><i class='fa fa-minus' style='padding-right:10px'></i>Elimnar</button></div></div>");
    }

    function AddRespuestaMultiple() {
        $("#SeleccionMultiple").append("<div class='form-group row'><div class='col-lg-9 col-md-8 margin-bottom-5'> <input type='text' class='RespuestaMultiple form-control' /></div><div class='col-lg-3 col-md-4'><button onclick='RemoveRespuesta(this);' class='btn btn-danger' style='width:100%;'><i class='fa fa-minus' style='padding-right:10px'></i>Elimnar</button></div></div>");
    }

    function AddRespuestaUnicaEditar() {
        $("#SeleccionUnicaEditar").append("<div class='form-group row'><div class='col-lg-9 col-md-8 margin-bottom-5'> <input type='text' class='RespuestaUnicaEditar form-control' /></div><div class='col-lg-3 col-md-4'><button onclick='RemoveRespuesta(this);' class='btn btn-danger' style='width:100%;'><i class='fa fa-minus' style='padding-right:10px'></i>Elimnar</button></div></div>");
    }

    function AddRespuestaMultipleEditar() {
        $("#SeleccionMultipleEditar").append("<div class='form-group row'><div class='col-lg-9 col-md-8 margin-bottom-5'> <input type='text' class='RespuestaMultipleEditar form-control' /></div><div class='col-lg-3 col-md-4'><button onclick='RemoveRespuesta(this);' class='btn btn-danger' style='width:100%';><i class='fa fa-minus' style='padding-right:10px'></i>Elimnar</button></div></div>");
    }



    function GuardarPreguntaEditar() {
//        $('#SavePreguntaEditar').prop('disabled', true);
        var pregunta = $('#PreguntaDescripcionEditar').val();
        var TipoPreguntaId = $('#TipoPreguntaEditar').val();
        var EncuestaId = $('#EncuestaId').val();
        var all_inputs = $(".Respuesta");
        var preguntaId = $("#PreguntaEditarId").val();
        var respuesta_vacia = false;
        if (TipoPreguntaId === "2")
        {
            all_inputs = $(".RespuestaUnicaEditar");
        }
        else if (TipoPreguntaId === "3") {
            all_inputs = $(".RespuestaMultipleEditar");
        }
        var stringArray = new Array();

        for (i = 0 ; i < all_inputs.length ; i++) {
            if ( all_inputs.eq(i).val() == "") {
                respuesta_vacia = true;
            }
            stringArray[i] = all_inputs.eq(i).val();
        }
        var postData = {
            listkey: stringArray,
            EncuestaId: EncuestaId,
            TipoPreguntaId: TipoPreguntaId,
            descripcionPregunta: pregunta,
            PreguntaId: preguntaId
        };

        if (pregunta === "") {
            $('#PreguntaDescripcionEditar').attr('placeholder','Agregue la Descripcion de la Respuesta')
            $('#SavePreguntaEditar').prop('disabled', false);
            return;
        }
        else if ((TipoPreguntaId === "2" || TipoPreguntaId === "3") && (all_inputs.length === 0 || typeof all_inputs === "undefined")) {
            $('#SavePreguntaEditar').prop('disabled', false);
            PorLlenarAlternativasEditar();
            return;
        } else if ((TipoPreguntaId === "2" || TipoPreguntaId === "3") && respuesta_vacia) {
            PorCompletarAlternativas();
            $('#SavePregunta').prop('disabled', false);
            return;
        }

        var lbtn = Ladda.create(document.querySelector('#SavePreguntaEditar'));
        lbtn.start();
        $.ajax({
            type: "POST",
            url: urlPregunta + "/editar",
            data: postData,
            success: function() {
                location.href = urlEncuesta;
            },
            error: function(data) {
                swal("Ocurrió un problema", "No se pudo editar la pregunta.", "error");
                lbtn.toggle();
            },
            complete: function () {
            }
        });
    }

    function GuardarPregunta() {
        var pregunta = $('#PreguntaDescripcion').val();
        var TipoPreguntaId = $('#TipoPregunta').val();
        var EncuestaId = $('#EncuestaId').val();
        var all_inputs = $(".Respuesta");
        var respuesta_vacia = false;
        if (TipoPreguntaId === "2")
        {
            all_inputs = $(".RespuestaUnica");
        }
        else if (TipoPreguntaId === "3") {
            all_inputs = $(".RespuestaMultiple");
        }
        var stringArray = new Array();

        for (i = 0 ; i < all_inputs.length ; i++) {
            if ( all_inputs.eq(i).val() == "") {
                respuesta_vacia = true;
            }
            stringArray[i] = all_inputs.eq(i).val();
        }
        var postData = {
            listkey: stringArray,
            EncuestaId: EncuestaId,
            TipoPreguntaId: TipoPreguntaId,
            descripcionPregunta: pregunta
        };

        if (pregunta === "") {
            $('#PreguntaDescripcion').attr('placeholder','Agregue la Descripcion de la Respuesta')
            $('#SavePregunta').prop('disabled', false);
            return;
        }
        else if ((TipoPreguntaId === "2" || TipoPreguntaId === "3") && (all_inputs.length === 0 || typeof all_inputs === "undefined")) {
            PorLlenarAlternativas();
            $('#SavePregunta').prop('disabled', false);
            return;
        } else if ((TipoPreguntaId === "2" || TipoPreguntaId === "3") && respuesta_vacia) {
            PorCompletarAlternativas();
            $('#SavePregunta').prop('disabled', false);
            return;
        }
        var lbtn = Ladda.create(document.querySelector('#SavePregunta'));
        lbtn.start();
        $.ajax({
            type: "POST",
            url: urlPregunta + '/registrar',
            data: postData,
            success: function() {
                location.href = urlEncuesta;
            },
            error: function(data) {
                swal("Ocurrió un problema", "No se pudo registrar la pregunta.", "error");
                lbtn.toggle();
            },
            complete: function () {

            }
        });
    }

    function PorLlenar() {
        swal({
            title: "Pregunta sin Nombre",
            text: "Por favor llena la descripcion de la pregunta",
            type: "warning",
            showCancelButton: false,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Aceptar",
            closeOnConfirm: true
        })
    }

    function PorLlenarAlternativas() {
        swal({
            title: "No has Agregado Opciones",
            text: "Tu pregunta de selección no cuenta con opciones disponibles",
            type: "warning",
            showCancelButton: false,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Aceptar",
            closeOnConfirm: true
        })
    }

    function PorCompletarAlternativas() {
        swal({
            title: "Complete las respuestas",
            text: "Tu pregunta de selección cuenta con opciones vacías",
            type: "warning",
            showCancelButton: false,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Aceptar",
            closeOnConfirm: true
        })
    }

    function PorLlenarEdtar() {
        swal({
            title: "Pregunta sin Nombre",
            text: "Por favor llena la descripcion de la pregunta",
            type: "warning",
            showCancelButton: false,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Aceptar",
            closeOnConfirm: true
        })
    }

    function PorLlenarAlternativasEditar() {
        swal({
            title: "No has Agregado Opciones",
            text: "Tu pregunta de selección no cuenta con opciones disponibles",
            type: "warning",
            showCancelButton: false,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Aceptar",
            closeOnConfirm: true
        })
    }


    $('button.Eliminar').click(function () {
        var id = $(this).attr('id').replace('Pregunta_', '');
        swal({
                title: '¿Está seguro de eliminar esta Pregunta?',
                text: "Una vez borrado no se podrá recuperar",
                type: 'warning',
                showCancelButton: true,
                closeOnConfirm: false,
                showLoaderOnConfirm: true
            },
            function (isConfirm) {
                if (isConfirm) {
                    EliminarPregunta(id);
                }
            })
    });

    function EliminarPregunta(id) {
        $.ajax({
            url: urlPregunta + "/eliminar",
            type: "POST",
            data:{
                id: id
            },
            beforeSend: function () {
            },
            complete: function () {

            },
            success: function (result) {
                if (result === "TRUE") {
                    location.href = urlEncuesta;
                }
                else {
                    swal("Oops!", "Hubo un Problema con su solicitud!", "Danger");
                }
            },
            error: function (result) {

            }
        });
    }
</script>
@endsection