@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div>
                <div class="panel panel-primary">
                    <div class="panel-heading">Permisos</div>
                    <div class="panel-body">
                        <input type ="button" class="btn btn-success pull-right" value = "Nuevo" id = "nuevo">
                        <br>
                        <br>

                        <table id="tabla" class="table table-striped table-bordered dt-responsive" style="width:100% !important" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Nombre</th>
                                    <th>Descripción</th>
                                    <th style="width: 50px"></th>
                                </tr>
                            </thead>
                            <tbody id = "tablaBody">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Permiso</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="/permiso/crear" method="post" id = "formPermiso" accept-charset="utf-8">
                        <div class="form-group">
                            <label for="nombrePermiso">Nombre del Permiso:</label>
                            <input type="text" id = "nombrePermiso" name = "nombrePermiso">
                        </div>

                        <div class="form-group">
                            <label for="descripcionPermiso">Descripción del Permiso:</label>
                            <input type="text" id = "descripcionPermiso">
                        </div>

                        <div class="form-group">
                            <input type ="submit" class="btn btn-success pull-right" value = "Guardar" id = "crear">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalEditar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Editar Permiso</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="/permiso/actualizar" method="post" id = "formEditarPermiso" accept-charset="utf-8">
                        <input type="hidden" name="idEditarPermiso" id = "idEditarPermiso">

                        <div class="form-group">
                            <label for="nombrePermiso">Nombre del Permiso:</label>
                            <input type="text" id = "editarNombrePermiso" name = "editarNombrePermiso">
                        </div>

                        <div class="form-group">
                            <label for="descripcionPermiso">Descripción del Permiso:</label>
                            <input type="text" id = "editarDescripcionPermiso">
                        </div>

                        <div class="form-group">
                            <input type ="submit" class="btn btn-success pull-right" value = "Actualizar" id = "actualizar">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $('#tabla').DataTable({
            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "order": [[ 1, "asc" ]],
            stateSave: true,
            "ajax":{
                "url": "/permiso/list",
                "type": "GET"
            },
            "columns": [
                {"data":"id"},
                {"data":"name"},
                {"data":"description"},
            ],
            "language": {
                "url":"/js/Spanish.json"
            },
            "columnDefs": [
                {
                    "orderable":false,
                    "render": function ( data, type, row ) {
                            row.id;
                    }
                },
                {
                    "orderable":false,
                    "render": function ( data, type, row ) {
                            row.name;
                    }
                },
                {
                    "orderable":false,
                    "render": function ( data, type, row ) {
                            row.description;
                    }
                },
                {
                    "orderable":false,
                    "targets" : 3,
                    "render": function ( data, type, row ) {
                        return '<i class="fa fa-trash-o pull-right" title = "eliminar" style="cursor:pointer;"  onClick = eliminar('+row.id+')></i><i class="fa fa-pencil pull-right" title = "editar" style="cursor:pointer;"  onClick = editar('+row.id+')></i>';
                    }
                },
            ]
        });

        $('#modal').modal('hide');

        $('#nuevo').click(function(event) {
            $('#nombrePermiso').val('');
            $('#descripcionPermiso').val('');
            $('#modal').modal('show');
        });

        $("#formPermiso").validate({
            rules: {
                nombrePermiso: {
                    required: true,
                    minlength: 5,
                },
            },
            messages: {
                nombrePermiso: "Por favor ingrese un nombre",
            },
            errorElement: "nombrePermiso",
            errorPlacement: function (error, element) {
                // Add the `help-block` class to the error element
                error.addClass( "help-block" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.parent( "label" ) );
                } else {
                    error.insertAfter( element );
                }
            },
            submitHandler: function(form) {
                $.ajax({
                    url: '/permiso/crear',
                    type: "POST",
                    dataType: "json",
                    data: {
                        nombrePermiso: $('#nombrePermiso').val(),
                        descripcionPermiso: $('#descripcionPermiso').val(),
                    },
                })
                .done(function(data) {
                    alert(data.message);
                    $('#modal').modal('hide');
                    location.reload();
                })
                .fail(function(error) {
                    alert(error.message, error.error)
                    console.log("error");
                })
            }
        });

        function editar(id) {
            $.ajax({
                url: '/permiso/editar',
                type: "GET",
                dataType: "json",
                data: {
                    id:id
                },
            })
            .done(function(data) {
                console.log(data);
                $('#idEditarPermiso').val(data.data.id);
                $('#editarNombrePermiso').val(data.data.name);
                $('#editarDescripcionPermiso').val(data.data.description);
                $('#modalEditar').modal('show');
            })
            .fail(function() {
                console.log("error");
            })
        }

        $("#formEditarPermiso").validate({
            rules: {
                editarNombrePermiso: {
                    required: true,
                    minlength: 5,
                },
            },
            messages: {
                editarNombrePermiso: "Por favor ingrese un nombre",
            },
            errorElement: "editarNombrePermiso",
            errorPlacement: function ( error, element ) {
                // Add the `help-block` class to the error element
                error.addClass( "help-block" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.parent( "label" ) );
                } else {
                    error.insertAfter( element );
                }
            },
            submitHandler: function(form) {
                $.ajax({
                    url: '/permiso/actualizar',
                    type: "POST",
                    dataType: "json",
                    data: {
                        id: $('#idEditarPermiso').val(),
                        nombrePermiso: $('#editarNombrePermiso').val(),
                        descripcionPermiso: $('#editarDescripcionPermiso').val(),
                    },
                })
                .done(function(data) {
                    alert(data.message);
                    $('#modalEditar').modal('hide');
                    location.reload();
                })
                .fail(function(error) {
                    alert(error.message);
                    console.log("error");
                })
            }
        });

        function eliminar(id) {
            var pregunta = confirm("¿Deseas eliminar este registro?");

            if(pregunta) {
                $.ajax({
                    url: '/permiso/eliminar',
                    type: "DELETE",
                    dataType: "json",
                    data: {
                        id: id,
                    },
                })
                .done(function(data) {
                    alert(data.message);
                    location.reload();
                })
                .fail(function(error) {
                    alert(error.message);
                    console.log("error");
                })
            }
        }
    </script>
@endsection