@extends('layouts.menu')

@section('title', 'Contraseñas')

@section('contenido')

    <div class="card bg-light shadow-none p-3 mb-5 bg-light rounded">
        <div class="card-header card-header-pr77 mb-3">
            <div class="row justify-content-between">
                <div class="col-8">
                    <div class="row justify-content-between">
                        <div class="col-6">
                            <h2><b>Contraseñas</b></h2>
                        </div>
                        <div class="col-6" style=" display: flex; justify-content: center; align-items: center; ">

                        </div>
                    </div>
                </div>
                <div class="col-2" style="display: flex; justify-content: end;">
                    <button type="button" class="btn btn-lg btn-primary" data-bs-toggle="modal"
                            data-bs-target="#generarContrasenaModal">
                        <i class="fa-solid fa-key me-1"></i>
                        Agregar
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body">
            <table id="tabla_listado_contrasenas" class="table table-striped compact">
                <thead class="table-dark">
                <tr class="text-center">
                    <th width="5%">Id</th>
                    <th width="20%">Para</th>
                    <th width="40%">Contraseña</th>
                    <th width="10%">Fecha Uso</th>
                    <th width="30%" class="text-center">Opciones</th>
                </tr>
                </thead>
                <tbody>
                @if(!empty($contrasenas))
                    @foreach ($contrasenas as $key => $contrasena)
                        <tr class="text-center">
                            <td align="center">{{$contrasena->id}}</td>
                            <td>{{$contrasena->user->usuario}}</td>
                            <td class="text-center">
                                <div class="fw-bold">{{$contrasena->password}}</div>
                                <hr>
                                <button class="btn btn-secondary"
                                        onclick="copyToClipBoard('{{$contrasena->password}}')">
                                    <i class="fa-solid fa-clipboard"></i>
                                    <div class="badge text-wrap" style="width: 4rem;">Copiar</div>
                                </button>
                            </td>
                            <td>{{$contrasena->fecha_uso}}</td>
                            <td align="center">
                                <button type="button" class="btn btn-primary btn-sm me-3"
                                        onclick="editarContrasena({{$key}})">
                                    <i class="fa-solid fa-pen-to-square ms-2"></i>
                                    Editar
                                </button>
                                <button class="btn btn-danger btn-sm" onclick="eliminarContrasena({{$contrasena->id}})">
                                    <i class="fa-solid fa-trash ms-1"></i> Eliminar
                                </button>
                            </td>
                        </tr>
                    @endforeach
                @endif
                </tbody>
            </table>
        </div>

        <!-- Modal Generar Contrasena-->
        <div class="modal fade " id="generarContrasenaModal" tabindex="-1" aria-labelledby="generarContrasenaLabel"
             aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content bg-light">
                    <div class="modal-header card-header-pr77 pb-2 pt-4">
                        <h5 class="modal-title" id="generarContrasenaLabel" style="font-weight: 700;">
                            Generar Contraseña
                            <i class="fa-solid fa-key"></i>
                        </h5>
                        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form enctype="multipart/form-data" id="formulario_contrasena" novalidate>
                        @csrf
                        <div class="modal-body">
                            <div class="col-12 mb-2">
                                <label for="">Usuarios</label>
                                <select name="" id="usuario" class="form-control" required></select>
                                <div id="message_error_usuario">
                                    <span id='usuario_error'></span>
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <label for="">Fecha</label>
                                <input type="text" class="form-control" id="fecha" onclick="fecha_contrasena('fecha')"
                                       required>
                                <div id="message_error_fecha">
                                    <span id='fecha_error'></span>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-primary btn-lg" onclick="generarContrasena()">
                                <i class="fa-solid fa-floppy-disk"></i>
                                Guardar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>


        <!-- Modal Editar Contrasena-->
        <div class="modal fade " id="editarContrasenaModal" tabindex="-1" aria-labelledby="editarContrasenaLabel"
             aria-hidden="true">
            <div class="modal-dialog ">
                <div class="modal-content bg-light">
                    <div class="modal-header card-header-pr77 pb-2 pt-4">
                        <h5 class="modal-title" id="editarContrasenaLabel" style="font-weight: 700;">
                            Editar Contraseña
                            <i class="fa-solid fa-key"></i>
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <form enctype="multipart/form-data" id="formulario_editar_contrasena" novalidate>
                        @csrf
                        <div class="modal-body">
                            <input type="hidden" id="password_id_editar">
                            <div class="col-12 mb-2">
                                <label for="">Usuarios</label>
                                <select name="" id="usuario_editar" class="form-control" required></select>
                                <div id="message_error_usuario_editar">
                                    <span id='usuario_editar_error'></span>
                                </div>
                            </div>
                            <div class="col-12 mb-2">
                                <label for="">Fecha</label>
                                <input type="text" class="form-control" id="fecha_editar"
                                       onclick="fecha_contrasena('fecha_editar')"
                                       required>
                                <div id="message_error_fecha_editar">
                                    <span id='fecha_editar_error'></span>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                            <button type="button" class="btn btn-primary btn-lg" onclick="actualizarContrasena()">
                                <i class="fa-solid fa-floppy-disk"></i>
                                Guardar
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>


    </div>
@stop

@section('scripts')
    <script>
        const token = document.head.querySelector('meta[name="csrf-token"]');
        let arrayContrasenas = @json($contrasenas);
    </script>
    <script src="{{asset('/js/contrasenas/contrasenas.js')}}"></script>

@stop