@extends('adminlte::page')

@section('title', 'USUARIOS')

@section('content_header')

@stop

@section('content')
<br>


<x-adminlte-card title="LISTA DE USUARIOS" class="m-2" theme="dark" icon="fas fa-id-card">
    <div class="col-12">                                         
        <div class="row">
            <div class="col-12">
                <div class="card-body">
                    <div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4">
                        <div class="row">
                            <div class="col-sm-12">
                                <a href="#" data-href="" class="btn btn-info" data-toggle="modal" data-target="#addSector" data-placement="top" title="Agregar Sector">
                                    <span class="fas fa-plus-square">Agregar</span>
                                </a>
                                <br>
                                <table id="example2" class="table table-bordered table-striped dataTable dtr-inline collapsed" aria-describedby="example1">
                                    <thead class="text-center text-nowrap bg-dark ">
                                        <tr>
                                            <th>ID</th>
                                            <th>NOMBRES Y APELLIDOS</th>
                                            <th>USERNAME</th>
                                            <th>DNI</th>
                                            <th>ESTADO</th>
                                            <th>ROL</th>
                                            <th>PUESTO</th>
                                            <th>SERVICIO</th>
                                            <th>MODIFICAR</th>
                                            <th>ELIMINAR</th>
                                            <th>CONTRASEÑA</th>
                                            <th>EMAIL</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($usuarios as $usuario)
                                        <tr>
                                            <td>{{ $usuario->id-1 }}</td>
                                            <td>{{ $usuario->name }}</td>
                                            <td>{{ $usuario->username }}</td>
                                            <td>{{ $usuario->numdoc }}</td>
                                            @if( $usuario->estado == 1)
                                            <td><span class="badge bg-success">Activo</span></td>
                                            @else
                                            <td><span class="badge bg-danger">Anulado</span></td>
                                            @endif
                                            @if( $usuario->rol == 'admin')
                                            <td><span class="badge bg-info">Administrador</span></td>
                                            @else
                                            <td><span class="badge bg-secondary">Usuario</span></td>
                                            @endif
                                            <td>{{ $usuario->puesto }}</td>
                                            <td>{{ $usuario->tpservicio }}</td>
                                            <td class="text-center">
                                                <!-- <form action="{{ route('usuario.edit', ['id' => $usuario->id]) }}"> -->
                                                <form action="{{ route('usuario.edit',$usuario->id) }}">
                                                    <button class="btn btn-warning" title="Editar" name="btnEdit" id="btnEdit" type="submit">
                                                    <i class="fas fa-edit"></i>
                                                    </button>
                                                </form>
                                            </td>
                                            <td class="text-center">
                                                <form class="formDelete" method="post" action="{{ url('/user/edit/'.$usuario->id) }}">
                                                    @csrf
                                                    @method('delete')
                                                    <button class="btn btn-danger" title="Borrar" name="btnBorrar" id="btnBorrar" type="submit">
                                                    <i class="fas fa-trash"></i>
                                                    </button>
                                                </form>
                                            </td>
                                            <td>
                                                <form class="" method="post" action="{{ url('/resetpass/'.$usuario->id) }}">
                                                    @csrf
                                                    <button class="btn btn-info" title="Restablecer" type="submit">
                                                    <i class="fas fa-key"></i>
                                                    </button>
                                                </form>
                                            </td>
                                            <td>{{ $usuario->email }}</td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-adminlte-card>


<div class="modal fade show" id="addSector" aria-modal="true" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">REGISTRAR NUEVO USUARIO</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <form action="{{ route('usuario.create') }}" method="POST" autocomplete="off">
            @csrf
                <div class="modal-body">
                    <div class="card-body">
                        <div class="row ">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        {{-- INGRESE SECTOR --}}
                                        <label for="">APELLIDOS Y NOMBRES</label>                                       
                                        <x-adminlte-input type="text" name="name" id="name" required placeholder="Ingrese nombres" label-class="text-lightblue">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text">
                                                    <i class="fas fa-id-card text-dark"></i>
                                                </div>
                                            </x-slot>
                                        </x-adminlte-input>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        {{-- NOMBRE DE USUARIO --}}
                                        <label for="">NOMBRE DE USUARIO</label>
                                        <x-adminlte-input type="text" required name="username" id="username" placeholder="Ingrese username" label-class="text-lightblue">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text">
                                                    <i class="fas fa-user text-dark"></i>
                                                </div>
                                            </x-slot>
                                        </x-adminlte-input>  
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12">
                                        {{-- DOC. NACIONAL DE IDENTIDAD --}}
                                        <label for="">DOC. NACIONAL DE IDENTIDAD</label>
                                        <x-adminlte-input type="text" required name="numdoc" id="numdoc" placeholder="Ingrese username" label-class="text-lightblue">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text">
                                                    <i class="fas fa-user text-dark"></i>
                                                </div>
                                            </x-slot>
                                        </x-adminlte-input>  
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-12">
                                        {{-- ROL --}}
                                        <label for="">ROL</label>
                                        <x-adminlte-select type="text" required name="rol" id="rol" placeholder="Ingrese username" label-class="text-lightblue">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text">
                                                    <i class="fas fa-user text-dark"></i>
                                                </div>
                                            </x-slot>
                                            <option value="">-- seleccione --</option>
                                            <option value="admin">Administrador</option>
                                            <option value="user">Usuario</option>
                                        </x-adminlte-select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-12">
                                        {{-- SERVICIO --}}
                                        <label for="">SERVICIO</label>
                                        <x-adminlte-select type="text" required name="tpservicio" id="tpservicio" placeholder="Ingrese servicio" label-class="text-lightblue">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text">
                                                    <i class="fas fa-user text-dark"></i>
                                                </div>
                                            </x-slot>
                                            <option value="">-- seleccione --</option>
                                        </x-adminlte-select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="row">
                                    <div class="col-md-12">
                                        {{-- PUESTO --}}
                                        <label for="">PUESTO</label>
                                        <x-adminlte-select type="text" required name="puesto" id="puesto" placeholder="Ingrese puesto" label-class="text-lightblue">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text">
                                                    <i class="fas fa-user text-dark"></i>
                                                </div>
                                            </x-slot>
                                            
                                        </x-adminlte-select>  
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        {{-- CORREO --}}
                                        <label for="">CORREO</label>                                       
                                        <x-adminlte-input type="email" required name="email" id="email" placeholder="Ingrese correo" label-class="text-lightblue">
                                            <x-slot name="prependSlot">
                                                <div class="input-group-text">
                                                    <i class="fas fa-user text-dark"></i>
                                                </div>
                                            </x-slot>
                                        </x-adminlte-input>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>

@stop

@section('css')
@stop

@section('js')

    <script>

        let servicios = ["CAJA", "PLATAFORMA", "MESA DE PARTES"];

        let puestos = ["CAJA 1", "CAJA 2", "MODULO 1", "MODULO 2", "MODULO 3", "MODULO 4", "MODULO 5", "MESA PARTES 1", "MESA PARTES 2"];

        let Servicio=document.getElementById("tpservicio")
        let Puesto=document.getElementById("puesto")
        
        function rUbicacion(combobox, valores)
        {
            Puesto.innerHTML=''

            for(let index of valores){
                combobox.innerHTML+=`
                    <option>${index}</option>
                `
            }
        }

        function completeUbicacion(){
            rUbicacion(Servicio, servicios)
        }
        completeUbicacion()

        Servicio.addEventListener('change',(e)=>{
            let dato=e.target.value
            switch(dato){
                case 'CAJA':
                    rUbicacion(Puesto, puestos.slice(0,2))
                    break;
                
                case 'PLATAFORMA':
                    rUbicacion(Puesto, puestos.slice(2,7))
                    break;
                
                case 'MESA DE PARTES':
                    rUbicacion(Puesto, puestos.slice(7,9))
                    break;
            }
        });
    </script>

@stop