@extends('template.layout')

@section('styles')
@endsection

@section('content')
    <h1 class="page-title">
        <a href="{{ url('admin/dependencia/usuario') }}"><i class="icon-action-undo"></i></a>
        Editar Area de Usuario
    </h1>
    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <h1 class="caption-subject font-green sbold uppercase">Información General</h1>
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="col-lg-12">
                    {{ Form::model(null) }}
                    <div class="form-horizontal">
                        {!! Form::hidden('id', $rolesUsuario->id, ['class' => 'form-control']) !!}
                        <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                            {!! Form::label('usuario_nombres', 'Nombre:', ['class' => 'control-label']) !!}
                            {!! Form::text('usuario_nombres', $rolesUsuario->usuario_nombres, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                        </div>
                        <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                            {!! Form::label('usuario_dni', 'DNI:', ['class' => 'control-label']) !!}
                            {!! Form::text('usuario_dni', ($rolesUsuario->usuario_dni != "" ? $rolesUsuario->usuario_dni : "---"), ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                        </div>
                        <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                            {!! Form::label('usuario_telefono', 'Teléfono:', ['class' => 'control-label']) !!}
                            {!! Form::text('usuario_telefono', $rolesUsuario->usuario_telefono, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                        </div>
                        <div class="form-group col-lg-6 col-sm-6 col-xs-12" style="margin-right: 10px;">
                            {!! Form::label('usuario_email', 'E-mail:', ['class' => 'control-label']) !!}
                            {!! Form::text('usuario_email', $rolesUsuario->usuario_email, ['class' => 'form-control', 'disabled' => false, 'readonly' => 'readonly']) !!}
                        </div>
                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
        <br>
        <div class="portlet-title">
            <div class="caption">
                <h1 class="caption-subject font-green sbold uppercase">Dependencias</h1>
            </div>
        </div>
        <div class="portlet-body">
            <div class="row">
                <div class="col-lg-12">
                    <table id="dataTable" class="table table-hover nowrap dataTable dtr-inline" style="text-align: center;">
                        <thead>
                        <tr>
                            <th>Id</th>
                            <th>Nombre</th>
                            <th>Estado</th>
                        </tr>
                        </thead>
                        <tbody style="text-align: left !important;"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        var dataTableLanguage = {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar:",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        };
        var dataTable = [
            function (args) {
                $("#dataTable").DataTable({
                    language: dataTableLanguage,
                    processing: true,
                    serverSide: true,
                    destroy: true,
                    responsive: true,
                    ajax: {
                        data: {
                            id_usuario: args.id_usuario
                        },
                        type: "POST",
                        url: "{{ route('admin.dependencia.usuario.post') }}",
                        error: function (jqXHR, textStatus, errorThrown) {
                            /*console.log(jqXHR);
                            console.log(textStatus);
                            console.log(errorThrown);*/
                        }
                    },
                    columns: [
                        {
                            data: "dependencia_id",
                            name: "dependencia_id"
                        },
                        {
                            data: "dependencia_nombre",
                            name: "dependencia_nombre"
                        },
                        {
                            data: "dependencia_id",
                            name: "dependencia_id",
                            render: function(data, type, row) {
                                var render = "";
                                render += "<div class=\"onoffswitch\">";
                                render += " <input type=\"checkbox\" name=\"onoffswitch\" id=\"switch_";
                                render += data;
                                render += "\" class=\"onoffswitch-checkbox chk\" onclick=\"Editar(this, '{{ $rolesUsuario->user_id }}', ";
                                render += data;
                                render += ")\"";

                                if (row.id_dependencia != "") {
                                    render += " checked=\"checked\"";
                                }

                                render += ">";
                                render += "    <label class=\"onoffswitch-label\" for=\"switch_";
                                render += data;
                                render += "\" style=\"margin-bottom:0\">";
                                render += "        <span class=\"onoffswitch-inner\"></span>";
                                render += "        <span class=\"onoffswitch-switch\"></span>";
                                render += "    </label>";
                                render += "</div>";

                                return render;
                            }
                        }
                    ],
                    order: [
                        [0, "asc"]
                    ]
                });
            }
        ];

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        window.onload = function() {
            var args = {
                id_usuario: "{{ $rolesUsuario->user_id }}" * 1
            };

            CargarDataTables(-1, args);
        };

        function CargarDataTables(index, args) {
            index = index || -1;
            args = args || null;

            if (index < 0) {
                var dataTableLength = dataTable.length;
                for (var i = 0; i < dataTableLength; i++) {
                    dataTable[i](args);
                }
            } else {
                dataTable[index](args);
            }
        }
        
        function Editar(element, id_usuario, id_dependencia) {
            var url = "";
            var data = {
                id_usuario: id_usuario,
                id_dependencia: id_dependencia
            };

            if (!element.checked) {
                url = "{{ route('admin.dependencia.usuario.eliminar.post') }}";
                element.checked = false;
            } else {
                url = "{{ route('admin.dependencia.usuario.agregar.post') }}";
                element.checked = true;
            }

            $.ajax({
                data: data,
                type: "POST",
                url: url,
                error: function (jqXHR, textStatus, errorThrown) {
                    /*console.log(jqXHR);
                    console.log(textStatus);
                    console.log(errorThrown);*/
                    
                    swal({
                        showCancelButton: false,
                        showConfirmButton: true,
                        text: "No se pudo editar el registro",
                        title: "Error",
                        type: "error"
                    }, function (isConfirm) {

                    });
                },
                success: function (data, jqXHR, settings) {
                    /*console.log(data);
                    console.log(jqXHR);
                    console.log(settings);*/
                }
            });
        }
    </script>
@endsection