@extends('template.layout')
@section('styles')
@endsection

@section('content')
    <h1 class="page-title">
        <a href="{{ url('foro/categoria', ['id' => $tema->id_categoria]) }}" title="Volver"><i class="icon-action-undo"></i></a> {{ $categoria->nombre }}
        <small> {{ $categoria->descripcion }} </small>
    </h1>

    <div class="portlet solid tema-titulo">
        <div class="portlet-title">
            <div class="caption">
                <span class="caption-subject"> {{ $tema->nombre }} </span>
                <span class="caption-helper" style="color: white; font-size:12px">Publicado: {{ $tema->created_at->diffForHumans() }}</span>
            </div>
            <div class="actions">
                <button id="btn-fav" class="btn btn-info" onclick="addFavorito()" tabindex="-1" title="Favorito">
                    @if($favorito)
                        <i id="tema-{{ $tema->id }}" class="fa fa-star"></i>
                    @else
                        <i id="tema-{{ $tema->id }}" class="fa fa-star-o"></i>
                    @endif
                </button>

                <button class="btn btn-info" onclick="focusReply()">
                    <i class="fa fa-share"></i>
                    <span class="hidden-xs"> Responder </span>
                </button>
            </div>
        </div>
    </div>

    <div class="posts">
        @include('pages.foro.partials.comentarios')
    </div>

    <div id="myPager" class="text-right"></div>

    <div class="portlet light" style="border: 1px solid rgba(134, 193, 222, 0.5); padding: 10px 20px;">
        <div class="portlet-title" style="border-bottom:1px solid;">
            <div class="caption">
                <i class="fa fa-user" style="font-size:25px"></i>
                <span class="caption-subject" style="font-size:15px"> {{ Auth::user()->full_name }} </span>
            </div>
        </div>

        <div class="portlet-body">
            <div class="row" style="margin:0">
                {{ Form::open(array('id' => 'form-validation','route' => 'comentario.registrar')) }}
                <div class="form-body">
                    <div class="form-group hide">
                        {!! Form::text('id_tema', $tema->id, array('placeholder' => 'id','class' => 'form-control')) !!}
                    </div>
                    <div class="form-group hide">
                        {!! Form::text('id_cita', 0, array('id' => 'id_cita','class' => 'form-control')) !!}
                    </div>
                    <div class="form-group">
                        {!! Form::textarea('mensaje', null, array('id' => 'mensaje','placeholder' => 'Escribe un comentario...','class' => 'form-control','style' => 'resize:none; height:120px', 'required' => 'required')) !!}
                    </div>

                    <div>
                        <div id="msg_cita" style="float: left; display: inline-block"></div>
                        <div style="float: right; display: inline-block">
                            <button id="submitBtn" type="submit" class="btn btn-primary mt-ladda-btn ladda-button" data-style="slide-down">
                                <span class="ladda-label">Comentar</span>
                                <span class="ladda-spinner"></span>
                            </button>
                        </div>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

@endsection

@section('scripts')
    <script>
        function addFavorito() {
            console.log(this);
            $('#btn-fav').blur();
            var icon = $('#tema-' + {{ $tema->id }});
            if (icon.hasClass('fa fa-star') == true) {
                icon
                    .removeClass('fa fa-star')
                    .addClass('fa fa-star-o')
            }
            else {
                if (icon.hasClass('fa fa-star-o') == true) {
                    icon
                        .removeClass('fa fa-star-o')
                        .addClass('fa fa-star')
                }
            }
            $.ajax({
                url: '{{ url('foro/tema/favorito', [ 'id' => $tema->id ]) }}',
                type: 'POST',
                success: function (result) {
                    console.log(result);

                },
                error: function (result) {
                    swal("Oops", "Ocurrió un error al realizar su solicitud", "error");
                    var icon = $('#tema-' + {{ $tema->id }});
                    if (icon.hasClass('fa fa-star') == true) {
                        icon
                            .removeClass('fa fa-star')
                            .addClass('fa fa-star-o')
                    }
                    else {
                        if (icon.hasClass('fa fa-star-o') == true) {
                            icon
                                .removeClass('fa fa-star-o')
                                .addClass('fa fa-star')
                        }
                    }
                }
            });
        };

        function addCita(id, name) {
            deleteCita();
            $('#id_cita').val(id);
            $("#msg_cita").append('<label>Citando a: ' + name + ' </label>' + '<button class="button-a delete-color" onclick="deleteCita()" type="button" tabindex="-1" style="margin-left: 3px;"><i class="fa fa-trash-o"></i></button>')
            focusReply();
        }

        function deleteCita() {
            $("#msg_cita").text("");
            $('#id_cita').val(0);
        }

        function deleteComentario(id) {
            swal({
                    title: "¿Estás seguro?",
                    text: "Se eliminará tu comentario",
                    type: "warning",
                    confirmButtonText: "Si",
                    cancelButtonText: " No",
                    showCancelButton: true,
                    closeOnConfirm: false,
                    showLoaderOnConfirm: true,
                },
                function () {
                    post('{{ url('foro/tema/comentario/eliminar') }}' + '/' + id, null);
                });
        };

        function focusReply() {
            $("#mensaje").focus();
        }

        window.onbeforeunload = function (e) {
            if ($('#mensaje').val() != "" || $('#msg_cita').text() != "")
            {
                return '¿Esta seguro que quiere salir sin guardar los cambios?';
            }
        };

        $(function () {
            $('button[type=submit]').click(function (e) {
                window.onbeforeunload = null;
            });
        });

        var validateForm = function () {
            var form1 = $('#form-validation');
            var error1 = $('.alert-danger', form1);
            var success1 = $('.alert-success', form1);

            form1.validate({
                errorElement: 'span',
                errorClass: 'help-block help-block-error',
                focusInvalid: false,
                ignore: "",
                rules: {
                    Mensaje: {
                        required: true
                    }
                },
                errorPlacement: function errorPlacement(error, element) { element.after(error); },
                highlight: function (element) {
                    $(element)
                        .closest('.form-group').addClass('has-error');
                },
                unhighlight: function (element) {
                    $(element)
                        .closest('.form-group').removeClass('has-error');
                },
                submitHandler: function (form) {
                    var l = Ladda.create(document.querySelector('#submitBtn'));
                    l.start();
                    form.submit();
                }
            });
        }

        jQuery(document).ready(function () {
            validateForm();
        });
    </script>
@endsection