@extends('layouts.app', ['title'=>(isset($title)) ? $title : 'Inicio'])
@section('localcss')
    <link rel="stylesheet" href="/css/configuracion_email.css">
@endsection
@section('content')
<div class="margin-container"> 
    <div class="container"> 
        <div class="row">
            <div class="col-12 col-md-6 mb-3">  
                <div class="card card-sombras px-4 py-3">
                    <h4 class="text-center display-4 display-4-font mb-3"><b>Levels</b></h4>
                    <div class="dropdown-divider"></div>
                    {{--  A form is not allowed to be a child element of a table, tbody or tr  --}}
                    {{--  https://stackoverflow.com/questions/5967564/form-inside-a-table  --}}
                    <span class="text-right mr-5">Last</span>
                    @foreach($levels as $key => $level)
                    <div class="form-group">
                        <form role="form" method="POST" action="{{ route('levels.update', $level)}}">
                            {{ method_field('PUT') }}{{ csrf_field() }}
                            <div class="form-row">
                                @if($level->last_level == 1)
                                <label class="col-5" style="background:#eee;"><b>{{$level->idLevel}}</b>. {{$level->level}}</label>
                                @else
                                <label class="col-5"><b>{{$level->idLevel}}</b>. {{$level->level}}</label>
                                @endif
                                <div class="col-5">
                                    <input type="text" class="form-control" name="newLevel" placeholder="Editar {{$level->level}}">
                                </div>
                                @if($loop->last)
                                    @if($level->last_level == 1)
                                    <input class="col-1" type="checkbox" value="1" checked disabled>
                                    @else
                                    <input class="col-1" type="checkbox" name="lastLevel" value="1" id="newUltimo">
                                    @endif
                                @else
                                    <span class="col-1"></span>
                                @endif
                                <button type="submit" name="save{{$level->idLevel}}" id="save{{$level->idLevel}}" class="col-1 btn btn-success">
                                    <i class="fa fa-check-circle"></i>
                                </button>
                            </div>
                        </form>
                    </div>
                    @endforeach
                    @if($level->last_level == 0)
                    <form class="form-inline" role="form" method="POST" action="{{ route('levels.store') }}" id="nuevo-nivel">
                        {{ csrf_field() }}
                        <div class="row">
                            <div class="col">
                                <input type="text" name="level" class="form-control" placeholder="Nuevo nivel" required maxlength="20">
                            </div>
                            <div class="col">
                                    <div class="form-check">
                                    <input class="form-check-input" type="checkbox" name="last" value="1" id="newUltimo">
                                    <label class="form-check-label" for="newUltimo">
                                        Último nivel
                                    </label>
                                  </div>
                            </div>
                            <div class="text-center">
                                <button class="btn btn-info" type="submit">Guardar</button>
                            </div>
                        </div>
                    </form>
                    @endif
                    <hr>
                    <p>Estos son los niveles del ambiente, en nuestro antiguo formato teníamos 4 niveles: Fase, Subfase, Actividad y Tarea. Ahora puede ser cualquier cantidad a partir de 2.</p>
                </div>
            </div>
            <div class="col-12 col-md-6">  
                <div class="card card-sombras" id="roles-top">
                    <form class="px-4 py-3">
                        <h4 class="text-center display-4 display-4-font mb-3"><b>Roles</b></h4>
                        <div class="dropdown-divider"></div>
                        @foreach($roles as $role)
                            {{$role->idRole}}. <b>{{$role->name}}</b>: {{$role->description}} <br>
                        @endforeach
                        <hr>
                        <p>Estos roles están definidos por defecto en la configuración del ambiente, por tanto no deben ser borrados o modificados. Si crees que puede existir un rol adicional a estos 3, dejanos saber.</p>
                    </form>      
                </div>
            </div>
        </div>
    </div>    
    <br>
    <!-- ******************FOOTER******************** -->
    @include('layouts.footer')
    <!-- ******************END FOOTER******************** -->
</div>
@endsection
@section('localjs')
<script>
    $( document ).ready(function() {
        $("#Busqueda-Avanzada-1").click(function() {
                $("#Busqueda-1").removeClass("d-none");
            }
        );
        $("#Busqueda-1-cerrar").click(function() {
                $("#Busqueda-1").addClass("d-none");
            }
        );
        $("#Crear-fase-1").click(function() {
                $("#Crear-1").removeClass("d-none");
                $("#table-crar-1").addClass("d-none");
            }
        );
        $("#Crear-1-cerrar").click(function() {
                $("#Crear-1").addClass("d-none");
                $("#table-crar-1").removeClass("d-none");

            }
        );
    });
</script>
@endsection