@extends('layouts.master')

@section('content')

    <script type="text/javascript">
        $('document').ready(function () {
            $("#crearNoticia").validate({
                showErrors: function (errorMap, errorList) {
                    //LIMPIAR LOS TOOLTIPS PARA LOS ELEMENTOS VÁLIDOS
                    $.each(this.validElements(), function (index, element) {
                        var $element = $(element);
                        $element.data("title", "") // BORRAR EL TITULO - NO HAY ERROR ASOCIADO
                            .removeClass("error")
                            .tooltip("destroy");
                    });

                    // CREAR LOS TOOLTIPS PARA ELEMENTOS INVÁLIDOS
                    $.each(errorList, function (index, error) {
                        var $element = $(error.element);
                        $element.tooltip("destroy") // DESTRUIR TODO TOOLTIP EXISTENTE PARA PODER CREAR UNO NUEVO
                            .data("title", error.message)
                            .addClass("error")
                            .tooltip(); // CREAR UN NUEVO TOOLTIP CON EL MENSAJE DE ERROR ASOCIADO AL TITULO AGREGADO
                    });
                }
            });
        });
    </script>

    <div class="container">

        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">Crear Noticia</h3>
                    </div>
                    <div class="panel-body">
                        <form method="POST" action="{{ route('noticias.guardar') }}"
                              accept-charset="UTF-8" enctype="multipart/form-data" id="crearNoticia">
                                      
                            <input type="hidden" name="_token" value="{{ csrf_token() }}">

                            <div class="row text-left">
                                <div class="col-sm-4">
                                    <label for="nombre" class="text-primary"><b>Nombre</b></label>
                                </div>
                                <div class="col-sm-4">
                                    <label for="descripcion" class="text-primary"><b>Descripción</b></label>
                                </div>
                                <div class="col-sm-2">
                                    <label for="activo" class="text-primary"><b>Activa</b></label>
                                </div>
                                <div class="col-sm-2">
                                    <label for="activo" class="text-primary"><b>Sitio de Publicación</b></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control input-sm" id="nombre" name="nombre"
                                               data-container="body"
                                               data-placement="right"
                                               data-msg-required="Este campo es Requerido."
                                               data-rule-required="true"
                                        >
                                    </div>
                                    <div class="col-sm-4">
                                        <input type="text" class="form-control input-sm" id="descripcion"
                                               name="descripcion"
                                               data-container="body"
                                               data-placement="right"
                                               data-msg-required="Este campo es Requerido."
                                               data-rule-required="true"
                                        >
                                    </div>
                                    <div class="col-sm-2">
                                        <select name="activo" id="activo" class="form-control input-sm">
                                            <option value="1">SI</option>
                                            <option value="0">NO</option>
                                        </select>
                                    </div>
                                    <div class="col-sm-2">
                                        <select name="sitiopub" id="sitiopub" class="form-control input-sm">
                                            <option value="1">ZOOMEnvios</option>
                                            <option value="2">ZOOMEntregas</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="row text-left">
                                <div class="col-sm-5">
                                    <label for="fechamostrar" class="text-primary"><b>Fecha de la Noticia</b></label>
                                </div>
                                <div class="col-sm-7">
                                    <label for="file" class="text-primary"><b>Documento</b></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-5">
                                        <div class='input-group date' id='datetimepicker'>
                                            <input type="text" class="form-control input-sm" id="fechamostrar"
                                                   name="fechamostrar"
                                                   data-container="body"
                                                   data-placement="right"
                                                   data-msg-required="Este campo es Requerido."
                                                   data-rule-required="true"
                                            >
                                            <span class="input-group-addon">
                                                <span class="glyphicon glyphicon-calendar">
                                                </span>
                                            </span>
                                        </div>

                                    </div>
                                    <div class="col-sm-7">
                                        <input type="file" class="form-control input-sm" name="file"
                                               data-container="body"
                                               data-placement="right"
                                               data-msg-required="Este campo es Requerido."
                                               data-msg-extension="Sólo se permiten documentos con formato PDF."
                                               data-rule-required="true"
                                               data-rule-extension="pdf"
                                        >
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-sm" style="float: right;">Guardar</button>
                            <a href="{{ route('noticias.index') }}" class="btn btn-danger btn-sm"
                               style="float: right; margin-right: 20px">Cancelar</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('script')
    <script type="text/javascript">
        $(function () {
            $('#datetimepicker').datetimepicker({
                format: 'DD/MM/YYYY',
                useCurrent: false,
                dayViewHeaderFormat: 'MMMM YYYY',
                widgetPositioning: {
                    vertical: 'bottom'
                }

            });
        });
    </script>
@endsection