@extends('layouts.app')

@section('content')
<div class="ind">
        <article>
            <div class="titlepag">
              <h2><button class="bt-arrow" onclick="chargePreviousUrl()"><i class="bi bi-arrow-left"></i></button>Nuevo usuario</h2>
              <hr>
            </div>
                <form class="new-user-form" action="{{route('crearUsuario')}}" method="post" id="nuevo-usuario"  onsubmit="disableButton('guardar-bt')" enctype="multipart/form-data">
                @csrf
                <div class="new-user-cont">
                    <img class="user-image" src="/img/user.png" alt="">
                    <div class="new-user-cont-1">
                        <div class="new-user-cont-1-1">
                            <label for="name">Nombre</label>
                            <input tabindex="1" name="name" id="name" type="text" required>
                        </div>
                        <div class="new-user-cont-1-1">
                            <label for="">Usuario</label>
                            <input tabindex="3" onchange="comprobarUsername()" name="username" id="username" type="text" required>
                        </div>
                        <div class="new-user-cont-1-1">
                            <label for="">Correo electronico</label>
                            <input tabindex="5" name="email" id="email" type="email">
                        </div>
                    </div>
                    <div class="new-user-cont-1-right">
                        <div class="new-user-cont-1-1">
                            <label for="">Apellido</label>
                            <input  name="lastname" id="lastname" type="text" tabindex="2" required>
                        </div>
                        <div class="new-user-cont-1-1">
                            <label for="">Contraseña</label>
                            <input tabindex="4" name="password" id="password" type="password">
                        </div>
                        <div class="new-user-cont-1-1">
                            <label for="">Rol</label>
                            <select name="rol" id="rol" required>
                                <option value="admin">Administrador</option>
                                <option value="user">Usuario</option>
                            </select>
                        </div>
                    </div>
                </div>
                <button class="new-user-asign-bt" type="button" data-bs-toggle="modal" data-bs-target="#asignaciones">Asignaciones</button>
                <div class="modal fade" data-bs-backdrop="static" id="asignaciones" tabindex="-1" aria-labelledby="asignacionesLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered modal-lg">
                    <div class="modal-content">
                    <div class="modal-header">
                        <h1 class="modal-title fs-5" id="nuevodepartamentoLabel">Asignaciones</h1>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        
                            <div class="new-user-cont-hor" id="assign-newuser">
                                <div class="new-user-cont-vert">
                                    <label for="">Asignar proyectos o departamentos:</label>
                                    <div class="new-user-ind-cont">
                                        
                                        <div class="new-user-asign-cont">
                                            <table class="asign-table-newuser">
                                                <thead>
                                                    <tr>
                                                        <th id="check"><input id="todos_proy" type="checkbox" onclick="selectAll('todos_proy', 'asign_proyectos[]')" value="todos"></th>
                                                        <th>Nombre</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($proyecto as $p)
                                                        <tr>
                                                            <td id="check"><input name="asign_proyectos[]" value="{{$p->id}}"  type="checkbox"></td>
                                                            <td><i class="bi bi-bezier2"></i> {{$p->name}}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                        <div class="new-user-asign-cont">
                                            <table class="asign-table-newuser">
                                                <thead>
                                                    <th id="check"><input onclick="selectAll('todos_dep', 'asign_departamentos[]')" type="checkbox" id="todos_dep"></th>
                                                    <th>Nombre</th>
                                                </thead>
                                                <tbody>
                                                    @foreach ($departamento as $d)
                                                        <tr>
                                                            <td id="check"><input name="asign_departamentos[]" type="checkbox" value="{{$d->id}}"></td>
                                                            <td><i class="bi bi-building-gear"></i> {{$d->name}}</td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" onclick="canelarAsign()" class="cancelar-bt" data-bs-dismiss="modal">Cancelar</button>
                        <button type="button" class="guardar-bt" data-bs-dismiss="modal">Asignar</button>
                    </div>
                    </div>
                </div>
            </div>
            <button type="submit" class="new-user-guardar" id="guardar-bt" form="nuevo-usuario">Guardar</button>
            </form>
        </article>
        <script>
            function comprobarUsername(){
                disableButton("guardar-bt")
                username=document.getElementById("username").value
                let data={
                    'username': username,
                    }
                fetch("{{route('comprobarUsername')}}", {
                    headers:{
                        "Content-Type": "application/json",
                        "Accept": "application/json, text-plain, */*",
                        "X-Requested-With": "XMLHttpRequest",
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    method:'POST',
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(function(result){
                    if(result.existe==1){
                        document.getElementById("username").style.color="red"
                        disableButton("guardar-bt")
                    }
                    else{
                        document.getElementById("username").style.color="black"
                        document.getElementById("guardar-bt").disabled=false
                    }
                })
            }

            function crearUsuario(){
                let data={
                    'name': document.getElementById('name').value,
                    'lastname': document.getElementById('lastname').value,
                    'username': document.getElementById('username').value,
                    'password': document.getElementById('password').value,
                    'rol': document.getElementById('rol').value,
                    'email': document.getElementById('email').value
                    }
                    alert(data);
                fetch("{{route('crearUsuario')}}", {
                    headers:{
                        "Content-Type": "application/json",
                        "Accept": "application/json, text-plain, */*",
                        "X-Requested-With": "XMLHttpRequest",
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    method:'POST',
                    body: JSON.stringify(data)
                })
                .then(response => response.json())
                .then(function(result){
                })
            }

            function verEditPw(){
                document.getElementById("edit-pw").style.display="flex";
            }

            function ocultarEditPw(){
                document.getElementById("edit-pw").style.display="none";
            }

            function canelarAsign(){
                ele=document.getElementsByName("asign_departamentos[]")
                for(var i=0; i<ele.length; i++){  
                    if(ele[i].type=='checkbox')  
                        ele[i].checked=false;
                }  
                ele2=document.getElementsByName("asign_proyectos[]")
                for(var i=0; i<ele2.length; i++){  
                    if(ele2[i].type=='checkbox')  
                        ele2[i].checked=false;
                }  
            }
        </script>
    </div>
@endsection