@extends('layouts.index')

@section('estilos')
    <link rel="stylesheet" href="{{ asset('css/dataTables/bootstrap.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dataTables/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/dataTables/responsive.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
@stop

@section('menu')
    @include('menu.index')
@stop

@section('content')

<h3 class="text-muted color_pag">{{'Usuarios'}}</h3>
<!--<a href="acta_entrega/create" class="btn btn-sm btn-primary">Nueva</a>-->
<input type="hidden" id="identificador" value="#usuarios" >
<div class="espacio10 color_pag">
    <table id="usuarios" class="table table-striped table-bordered shadow-lg mt-4 dt-responsive nowrap" style="width:100%">
        <thead class="bg-primary text-white">
            <tr>
                <th scope="col" width="10%">{{'Rut'}}</th>
                <th scope="col" width="25%">{{'Nombre Completo'}}</th>
                <th scope="col" width="18%">{{'Categoria'}}</th>
                <th scope="col" width="15%">{{'Tipo'}}</th>
                <th scope="col" width="25%">{{'Opciones'}}</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($usuarios as $usuario)
                @php($index=$loop->iteration)
                <tr>
                    @if ($usuario->username == "master")
                        <td></td>
                    @else
                        <td>{{rut_con_formato($usuario->rut)}}</td>
                    @endif
                    <td>{{$usuario->nombres." ".$usuario->apellido_paterno." ".$usuario->apellido_materno}}</td>
                    <td>{{$usuario->categoria}}</td>
                    <td>{{$usuario->tipo_usuario}}</td>
                    <td>
                        <form action="{{ route ('user.destroy',$usuario->id)}}" method="POST">
                            @if ($usuario->username == "master")
                                <button type="button" disabled class="btn btn-sm btn-success">{{'Tipo'}}</button>
                                <button type="button" disabled class="btn btn-sm btn-primary">{{'Categoria'}}</button>
                                <button type="button" disabled class="btn btn-sm btn-warning">{{'Editar'}}</button>
                                <button type="button" disabled class="btn btn-sm btn-info">{{'Datos'}}</button>
                                <button type="button" disabled class="btn btn-sm btn-danger">{{'Borrar'}}</button>
                            @else
                                <input type="hidden" id="{{$index}}" value="{{$usuario->id}}" >
                                <a id="modal-tipo{{$index}}" onclick="tipo_usuario(this)" href="#tipo{{$index}}" class='btn btn-sm btn-success' data-toggle='modal'>{{'Tipo'}}</a>
                                <a id="modal-categoria{{$index}}" onclick="categoria_usuario(this)" href="#categoria{{$index}}" class='btn btn-sm btn-primary' data-toggle='modal'>{{'Categoria'}}</a>
                                <a href="/user/{{$usuario->id}}/edit" class="btn btn-sm btn-warning">{{'Editar'}}</a>
                                <a id="modal-dato{{$index}}" onclick="datos_usuario(this)" href="#dato{{$index}}" class='btn btn-sm btn-info' data-toggle='modal'>{{'Datos'}}</a>
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger">Borrar</button>
                            @endif
                        </form>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

<!-- Modales -->

<!-- Modal Datos Usuario -->

@if (isset($index))
    @for ($i=1; $i <= $index; $i++)
    <div class="modal fade" id="dato{{$i}}" role="dialog" aria-labelledby="modal_dato" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title color_pag" id="modal_dato_titulo{{$i}}">
                        Datos Usuario
                    </h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid color_pag">
                        <div class="row">
                            <div class="col-lg-4 col-4">
                                <label class="form-label">Rut</label>
                                <input type="text" id="rut{{$i}}" readonly class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                            <div class="col-lg-4 col-6">
                                <label class="form-label">Pasaporte</label>
                                <input type="text" id="pasaporte{{$i}}" readonly class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-12">
                                <label class="form-label">Nombres</label>
                                <input type="text" id="nombres{{$i}}" readonly class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-6">
                                <label class="form-label">Apellido Paterno</label>
                                <input type="text" id="apellido_paterno{{$i}}" readonly class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                            <div class="col-lg-6 col-6">
                                <label class="form-label">Apellido Materno</label>
                                <input type="text" id="apellido_materno{{$i}}" readonly class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-12">
                                <label class="form-label">Nombre Usuario</label>
                                <input type="text" id="username{{$i}}" readonly class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                            <div class="col-lg-4 col-6">
                                <label class="form-label">Fecha Nacimiento</label>
                                <input type="text" id="fecha_nacimiento{{$i}}" readonly class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                            <div class="col-lg-4 col-6">
                                <label class="form-label">Nacionalidad</label>
                                <input type="text" id="nacionalidad{{$i}}" readonly class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <label class="form-label">Direccion</label>
                                <input type="text" readonly id="direccion{{$i}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                            <div class="col-lg-4 col-5">
                                <label class="form-label">Comuna</label>
                                <input type="text" readonly id="comuna{{$i}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-7">
                                <label class="form-label">E-mail</label>
                                <input type="text" readonly id="email{{$i}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                            <div class="col-lg-4 col-5">
                                <label class="form-label">Telefono</label>
                                <input type="text" readonly id="telefono{{$i}}" class="form-control form-control-sm espaciomenos7 bg-fondo-ip" >
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-primary">Asignar</button>-->
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
    @endfor
@endif

<!-- Modal Actualizacion de Tipo de Usuarios -->

@if (isset($index))
    @for ($i=1; $i < $index; $i++)
    <div class="modal fade" id="tipo{{$i}}" role="dialog" aria-labelledby="modal_tipo" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title color_pag" id="modal_tipo_titulo{{$i}}">
                        Actualizar tipo de usuario
                    </h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid color_pag">
                        <form action="/user/cargar_tipo_usuario" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-10">
                                    <label for="label_tipo" class="col-form-label">Tipo Usuario asignado</label>
                                    <input type="text" id="tipo_actual{{$i}}" class="form-control form-control-sm" readonly>
                                    <input type="hidden" name="user_id" id="user_id_tp{{$i}}">
                                </div>
                            </div>

                            <div class="row espacio15">
                                <div class="col-md-10">
                                    <label class="form-label">Nuevo Tipo Usuario</label>
                                    <select id="tipo_usuario_id{{$i}}" required name="tipo_usuario_id" class="form-control form-control-sm bg-fondo-ip" tabindex="2">
                                        <option value="">{{'Seleccionar'}}</option>
                                        @foreach ($tipo_usuarios as $tipo_usuario)
                                            <option value="{{$tipo_usuario->id}}">{{$tipo_usuario->nombre}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row espacio30">
                                <div class="col-md-6">
                                    <button type="submit" class="btn active btn-sm btn-primary">Asignar/Cambiar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-primary">Asignar</button>-->
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
    @endfor
@endif

<!-- Modal Actualizacion y/o Asignacion de de Categorias -->

@if (isset($index))
    @for ($i=1; $i < $index; $i++)
    <div class="modal fade" id="categoria{{$i}}" role="dialog" aria-labelledby="modal_categoria" aria-hidden="true">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title color_pag" id="modal_categoria_titulo{{$i}}">
                        Actualizar y/o asignacion de Categoria
                    </h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid color_pag">
                        <form action="/user/cargar_categoria" method="POST">
                            @csrf
                            <div class="row">
                                <div class="col-md-10">
                                    <label for="label_tipo" class="col-form-label">Categoria Actual</label>
                                    <input type="text" id="categoria_actual{{$i}}" class="form-control form-control-sm" readonly>
                                    <input type="hidden" name="user_id" id="user_id_cat{{$i}}">
                                    <input type="hidden" name="categoria_actual" id="categ_actual{{$i}}">
                                </div>
                            </div>

                            <div class="row espacio15">
                                <div class="col-md-10">
                                    <label class="form-label">Nueva Categoria</label>
                                    <select id="categoria_id{{$i}}" required name="categoria_id" class="form-control form-control-sm bg-fondo-ip" tabindex="2">
                                        <option value="">{{'Seleccionar'}}</option>
                                        @foreach ($categorias as $categoria)
                                            <option value="{{$categoria->id}}">{{$categoria->nombre}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row espacio30">
                                <div class="col-md-6">
                                    <button type="submit" class="btn active btn-sm btn-primary">Asignar/Cambiar</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" class="btn btn-primary">Asignar</button>-->
                    <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">Cerrar</button>
                </div>
            </div>
        </div>
    </div>
    @endfor
@endif

@stop

@section('scripts')
    <script src="{{ asset('js/dataTables/jquery-3.5.1.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/jquery.dataTables.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/dataTables.bootstrap4.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/dataTables.responsive.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/responsive.bootstrap4.min.js') }}" defer></script>
    <script src="{{ asset('js/dataTables/config-dt.js') }}" defer></script>
@stop