@extends('layout.backoffice')
@section('content')
    <div class="row">
        <div class="col-lg-6">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        {{ isset($datos['id_usuario']) ? 'Actualizar Usuario' : 'Crear Usuario' }}
                    </h3>
                </div>
                <form id="form_usuario">
                    <div class="card-body">
                        <input type="hidden" name="id_usuario" id="id_usuario" value="{{ $datos['id_usuario'] ?? '' }}">
                        <div class="form-group">
                            <label for="nombre">Nombre</label>
                            <input type="text" class="form-control form-control-border form-control-sm system_validador_vacio" id="nombre" name="nombre"
                                   value="{{ $datos['nombre'] ?? '' }}" placeholder="Nombre Completo">
                        </div>
                        <div class="form-group">
                            <label for="clave">Clave</label>
                            <input type="password" class="form-control form-control-border form-control-sm @if (!isset($datos['id_usuario'])) {{ 'system_validador_vacio' }} @endif" id="clave" name="clave" placeholder="Clave">
                        </div>
                        <div class="form-group">
                            <label for="email">Correo</label>
                            <input type="text" class="form-control form-control-border form-control-sm system_validador_vacio system_validador_email" id="email"
                                   name="email" placeholder="example@example.com" value="{{ $datos['email'] ?? '' }}">
                        </div>
                        <div class="form-group">
                            <label for="">Grupo Usuario</label>
                            <select name="grupo_usuario" id="grupo_usuario" class="form-control form-control-border form-control-sm system_validador_vacio">
                                <option value="">Seleccione una opcion</option>
                                @if (isset($datos['grupo_usuarios']))
                                    @foreach ($datos['grupo_usuarios'] as $grupo)
                                        <option value="{{ $grupo['id_usuario_grupo'] }}" {{ isset($datos['id_grupo']) ? $datos['id_grupo']  == $grupo['id_usuario_grupo'] ? 'selected' : '' : ''}}>
                                            {{ $grupo['nombre'] }}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="restringuido_local">Restringir Local</label>
                            <select name="restringuido_local" id="restringuido_local"
                                    class="form-control form-control-border form-control-sm system_validador_vacio">
                                <option value="">Seleccione una opcion</option>
                                <option value="1">Si</option>
                                <option value="2">No</option>
                                <option value="0">Sin restricciones</option>
                            </select>
                        </div>
                        <div class="form-group" id="input_ip" style="display: none">
                            <label for="ip_permitidas">Ips Permitidas(,)</label>
                            <input type="text" name="ip_permitidas" id="ip_permitidas" class="form-control form-control-border form-control-sm"
                                   value="{{ $datos['ip_permitidas'] ?? '' }}">
                        </div>

                        <div class="form-group">
                            <label for="estado">Estado</label>
                            <select name="estado" id="estado" class="form-control form-control-border form-control-sm system_validador_vacio">
                                @if (!isset($datos['estado']))
                                    <option value="">Seleccione una opcion</option>
                                    <option value="1">Activo</option>
                                    <option value="0">Inactivo</option>
                                @else
                                    @if ($datos['estado'] == 1)
                                        <option value="1" selected>Activo</option>
                                        <option value="0">Inactivo</option>
                                    @elseif($datos['estado'] == 0)
                                        <option value="0">Inactivo</option>
                                        <option value="1">Activo</option>
                                    @endif
                                @endif
                            </select>
                        </div>
                    </div>
                    <div class="mb-3 ml-3">
                        @if (!isset($datos['id_usuario']))
                            <button type="button" id="guardarUsuario" class="btn btn-primary btn-sm">Guardar</button>
                        @else
                            <button type="button" id="actualizarUsuario" class="btn btn-primary btn-sm">Actualizar</button>
                        @endif
                    </div>
                </form>
            </div>
        </div>

        <div class="col-lg-6">
            <div class="card">
                <div class="card-body table-responsive">
                    <div class="row">
                        <div class="col-12">
                            <table class="table table-hover text-nowrap table-sm"  id="tablaUsuarios">
                                <thead>
                                <tr>
                                    <th>Nombre</th>
                                    <th>Email</th>
                                    <th>Nombre Grupo</th>
                                    <th>Opcion</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($datos['usuarios'] as $user)
                                    <tr>
                                        <td>{{ $user['nombre'] }}</td>
                                        <td>{{ $user['email'] }}</td>
                                        <td>{{ $user['nombre_grupo'] }}</td>
                                        <td>
                                            <a href="{{ url('backoffice/usuarios?id=' . $user['id_usuario']) }}"><i
                                                    class="fa fa-edit"></i></a>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $('#restringuido_local').val("{{ $datos['restringuido_local'] ?? '' }}").change();

        $('#restringuido_local').on('change', function() {
            $('#input_ip').toggle($(this).val() === '2');
        });
        $('#input_ip').toggle($('#restringuido_local').val() === '2');

        jQuery('#guardarUsuario').on('click', function () {
            if (system_validarcampos("form_usuario")) {
                axios.post('usuarios', getDataJson("form_usuario")).then(function (resp) {
                    if (resp.data.error === 0) {
                        Swal.fire("El usuario ha sido creado con exito", '',
                            'success').then(function () {
                            window.location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

        jQuery('#actualizarUsuario').on('click', function () {
            if (system_validarcampos("form_usuario")) {
                axios.put('usuarios', getDataJson("form_usuario")).then(function (resp) {
                    if (resp.data.error === 0) {
                        Swal.fire("El usuario ha sido modificado con exito", '',
                            'success').then(function () {
                            window.location.reload();
                        });
                    } else {
                        notificarUsuario(resp.data.mensaje);
                    }
                });
            }
        });

        jQuery(document).ready(function () {
            dataTable(jQuery('#tablaUsuarios'))
        });
    </script>
@endsection