@extends('layouts.app')

@section('content')
@if(empty($users))
<div class="error-page-cont">
    <i class="bi bi-patch-exclamation-fill" style="font-size: 150px;"></i>
    <h2>No se encontro este usuario</h2>
</div>
@else
<div class="ind">
        <article>
            <div class="titlepag">
              <h2><button class="bt-arrow" onclick="history.back()"><i class="bi bi-arrow-left"></i></button>{{$users->name}} {{$users->lastname}}</h2>
              <hr>
            </div>
                <form class="edit-user-form" onsubmit="disableButton('boton-guardar')" action="{{route('editarUsuario')}}" method="post" id="nuevo-usuario" enctype="multipart/form-data">
                @csrf
                <div class="edit-user-cont">
                    <input type="text" name="id" value="{{$users->id}}" style="display: none;">
                    <img class="user-image" src="/img/user.png" alt="">
                    <div class="new-user-cont-1">
                        <div class="new-user-cont-1-1">
                            <label for="">Nombre</label>
                            <input tabindex="0" value="{{$users->name}}" name="name_edit" id="name" type="text" required>
                        </div>
                        <div class="new-user-cont-1-1">
                            <label for="">Correo electronico</label>
                            <input tabindex="4" value="{{$users->email}}" name="email_edit" 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 tabindex="1" value="{{$users->lastname}}" name="lastname_edit" id="lastname" type="text" required>
                        </div>
                        <div class="new-user-cont-1-1">
                            <label for="">Rol</label>
                            <select name="rol_edit" id="rol" required>
                                <option value="admin" @if($users->rol=="admin") selected @endif>Administrador</option>
                                <option value="user" @if($users->rol=="user") selected @endif>Usuario</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div style="margin-top: 50px;" class="edit-user-card">
                <h2>Asignaciones:</h2>
                <hr>
                <div class="new-user-cont-vert">
                    <div class="new-user-ind-cont">
                        
                        <div class="new-user-asign-cont">
                            <h4>Proyectos:</h4>
                            <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 ($proyectos as $p)
                                        <tr>
                                            <td id="check"><input name="asign_proyectos[]" type="checkbox" value="{{$p->id}}" @if($p->asignado==1) checked @endif></td>
                                            <td><i class="bi bi-bezier2"></i> {{$p->name}}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="new-user-asign-cont">
                            <h4>Departamentos:</h4>
                            <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}}" @if($d->asignado==1) checked @endif></td>
                                            <td><i class="bi bi-building-gear"></i> {{$d->name}}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <button type="submit" class="new-user-guardar" id="boton-guardar" form="nuevo-usuario">Guardar</button>
            </form>
        </article>
        <script>

            function comprobarUsername(){
                disableButton("boton-guardar")
                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("boton-guardar")
                    }
                    else{
                        document.getElementById("username").style.color="black"
                        document.getElementById("boton-guardar").disabled=false
                    }
                })
            }

        </script>
    </div>
    @endif
@endsection