@extends('layouts.dashboard')

@section('content')
    <section class="container all-container">
        <div class="header-titulo">
            Requerimiento
        </div>
        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="nav-home" aria-selected="true">Estado</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#historial" role="tab" aria-controls="nav-profile" aria-selected="false">Historial</a>
                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#comentarios" role="tab" aria-controls="nav-profile" aria-selected="false">Comentarios</a>
            </div>
        </nav>
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                <!-- ========Requerimiento Barra header============= -->
                <div class="card mb-1">
                    <div class="card-header titulo-eliminar">
                        <div class="title">
                        </div>
                        <div class="eliminar-container">
                            @if (isset(Auth::user()->role) && Auth::user()->role == 'cliente' && $requerimiento->estado == 'PENDIENTE')
                                <span class="btn btn-sm {{$requerimiento->estado}}" id="estado">ENVIADO</span>
                            @elseif (isset(Auth::user()->role) && Auth::user()->role == 'cliente' && $requerimiento->estado == 'CONFIRMADO')
                                <span class="btn btn-sm {{$requerimiento->estado}}" id="estado">RECIBIDO</span>
                            @else
                                <span class="btn btn-sm {{$requerimiento->estado}}" id="estado">{{$requerimiento->estado}}</span>
                            @endif
                            <div class="btn-group mr-2">
                                @if (isset(Auth::user()->role) && Auth::user()->role == 'admin')
                                    <button class="btn btn-sm btn-outline-secondary" onclick="window.location='{{ route("AsignarDesarrollador",[$requerimiento->id]) }}'" data-toggle="tooltip" data-placement="bottom" title="Agregar desarrollador"><i class="fas fa-user-plus"></i></button>
                                @endif
                                @if($requerimiento->estado == 'PENDIENTE'|| isset(Auth::user()->role) && Auth::user()->role == 'admin' || Auth::user()->role == 'desarrollador')
                                    <button class="btn btn-sm btn-outline-secondary" onclick="editar()" data-toggle="tooltip" data-placement="bottom" title="Editar"><i class="fas fa-edit"></i></button>
                                    <button class="btn btn-sm btn-outline-secondary" onclick="eliminarlo('{{ route("eliminarRequerimineto",[$requerimiento->id]) }}','{{ route('requerimientos') }}')" data-toggle="tooltip" data-placement="bottom" title="Eliminar"><i class="far fa-trash-alt" ></i></button>
                                @endif
                            </div>
                        </div>
                    </div>
                    <!-- ========Requerimiento Barra header FIN============= -->
                    <!-- ========Requerimiento Estado INICIO============= -->
                    <div class="card-body padding-10">
                        <form action="{{ route('ActualizarRequerimiento',[$requerimiento->id])}}" method="post"  id="form-datos">
                            {{ csrf_field() }}
                            <div class="form-group row">
                                <div class="col-sm-2">Titulo</div>
                                <div class="col-sm-10">
                                    <input class="form-control" name="titulo" value="{{$requerimiento->titulo}}" required disabled>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-2">Aplicacion</div>
                                <div class="col-sm-10 col-md-2">
                                    <span class="form-control span-edit-show">{{$requerimiento->app_name}}</span>
                                    <select class="form-control span-edit-hidden" name="aplicacion" onchange="filtrarModulos(this.value)" required disabled>
                                        <option value=''>-Aplicaciones</option>
                                        @foreach($aplicacionesUsuario as $aplicacionusuario)
                                            <option value="{{$aplicacionusuario->app_id}}">{{$aplicacionusuario->app_name}}</option>
                                        @endforeach 
                                    </select>
                                </div>
                                <div class="col-sm-10 col-md-4">
                                    <span class="form-control span-edit-show">{{$requerimiento->modulo_name}}</span>
                                    <select class="form-control span-edit-hidden" name="modulo" url="{{ route('obtenerModulos')}}" onchange="filtrarFormularios(this.value)"  id="modulos" required disabled>
                                        <option value=''>-Modulos</option>
                                    </select>
                                </div>
                                <div class="col-sm-10 col-md-4">
                                    <span class="form-control span-edit-show">
                                    @if(isset ($requerimiento->form_name))
                                        {{$requerimiento->form_name}}
                                    @endif
                                    </span>
                                    <select class="form-control span-edit-hidden" url="{{ route('obtenerFormularios')}}" name="formulario" id="formularios" disabled>
                                        <option value=''>-Formularios</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-2">Prioridad</div>
                                <div class="col-sm-10 col-md-2">
                                    <span class="form-control span-edit-show">{{$requerimiento->prioridad}}</span>
                                    <select class="form-control span-edit-hidden" name="prioridad" required disabled>
                                        <option value="normal">Normal</option>
                                        <option value="importante">Importante</option>
                                        <option value="urgente">Urgente</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-sm-2">Tipo</div>
                                <div class="col-sm-10 col-md-2">
                                    <span class="form-control span-edit-show">{{$requerimiento->tipo}}</span>
                                    <select class="form-control span-edit-hidden" name="tipo" required disabled>
                                        <option value="mejora">Mejora</option>
                                        <option value="Correccion">Correccion</option>
                                    </select>
                                </div>
                            </div>
                            <fieldset class="form-group">
                                <div class="row">
                                    <legend class="col-form-label col-sm-2 pt-0">Descripcion</legend>
                                    <div class="col-sm-10">
                                    <textarea  style="resize: none;" rows="5" id="textarea" name="descripcion" class="form-control" required disabled>{{$requerimiento->descripcion}}</textarea>
                                    </div>
                                </div>
                            </fieldset>    
                            @if ($requerimiento->estado == 'PENDIENTE' && Auth::user()->role == 'cliente' || Auth::user()->role == 'admin')
                            <div class="form-group buttons-edit-container row">
                                <div class="col-sm-10">
                                    <button type="button" onclick="editar()" id="button-cancelar" class="btn btn-dark">Cancelar</button>
                                    <button type="submit" id="button-guardar" class="btn btn-light">Guardar</button>
                                </div>
                            </div>
                            @endif
                        </form>
                        <!-- cambiar estado  inicio-->
                        @if (Auth::user()->role == 'desarrollador')
                        <div class="estado-requerimiento">
                            <span class="estado-requerimiento-title">Cambiar estado del requerimineto</span>
                            <form class="" method="post" action="{{ route('actualizarEstadoRequerimiento',[$requerimiento->id])}}">
                                {{ csrf_field() }}
                                <div class="form-group row">
                                    <div class="col-sm-2">Estado</div>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="estado" onchange="mostrarFecha(this.value)" required>
                                            <option value="REALIZADO">REALIZADO</option>
                                            <option value="PROCESO">PROCESO</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row" id="fechaAproximada">
                                    <div class="col-sm-2">Fecha aproximada</div>
                                    <div class="col-sm-10">
                                        <input type="datetime-local" id="TiempoAproximado" class="form-control" name="TiempoAproximado">
                                    </div>
                                </div>
                                <div class="button-estadoRequerimiento-container">
                                    <button type="submit" class="btn btn-primary btn-block">Guardar</button>
                                </div>
                            </form>
                        </div>
                        @endif
                        <!-- cambiar estado  FIN-->
                    </div>
                    <div class="card-footer small text-muted" style="display: flex;flex-direction: row;justify-content: space-between;">
                        {{$requerimiento->updated_at}}
                        @if($requerimiento->TiempoAproximado != '0000-00-00 00:00:00' && $requerimiento->TiempoAproximado != null)
                            <div class="TiempoAproximado-container">
                                <strong>Tiempo aproximado para completar este requerimiento:</strong>
                                {{$requerimiento->TiempoAproximado}}
                            </div>
                        @endif
                    </div>
                    <!-- ======== /Requerimiento Estado FIN============= -->
                </div>
                <!-- cambiar estado cliente inicio-->
                @if (Auth::user()->role == 'cliente' && $requerimiento->estado == 'REALIZADO')
                <div class="card mb-3">
                    <div class="card-header titulo-eliminar">
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('actualizarEstadoRequerimiento',[$requerimiento->id])}}">
                            {{ csrf_field() }}
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif   
                            <select class="form-control col-md-4 mb-2"  name="estado" required>
                                <option value="APROBADO">APROBADO</option>
                                <option value="INCOMPLETO">INCOMPLETO</option>
                            </select>
                            <div id="razonContainer" class="mb-2">
                                <div class="">Razon de su respuesta. ***</div>
                                <textarea class="form-control col-md-4" rows="8" style="resize:none" id="razon" name="razon" required></textarea>
                            </div>
                            <div class="button-respuesta-estado-container col-md-4">
                                <button type="submit" class="btn btn-primary">Guardar</button>
                            </div>
                        </form>
                    </div>
                    <div class="card-footer small text-muted">
                    </div>
                </div>
                @endif
                <!-- cambiar estado cliente fin-->
                <!-- Lista desarrolladores requerimiento inicio-->
                @if (isset(Auth::user()->role) && Auth::user()->role == 'admin')
                <div class="card mb-3">
                    <div class="card-header">
                    <i class="fas fa-ruler"></i> Desarrolladores del requerimiento
                    </div>
                    <div class="card-body">
                        <div class="container">
                            <div class="row">
                                @if ( $requerimientos_desarrolladores == '[]')
                                <small class="text-muted">Este requerimiento no tiene Desarrolladores</small>
                                @endif
                                @foreach($requerimientos_desarrolladores as $requerimiento_desarrollador)
                                    <a class="col-md-4 list-group-item list-group-item-action flex-column pointer">
                                        <i onclick="destroydeveloperRequirement('{{ route('destroydeveloperRequirement',[$requerimiento_desarrollador->id]) }}')" class="fas fa-backspace float-right deleteIcon"></i>
                                        <div onclick="window.location='{{ route("user",[$requerimiento_desarrollador->desarrollador_id]) }}'" class="d-flex w-100 justify-content-between">
                                        <h5 class="mb-1">{{$requerimiento_desarrollador->desarrollador_name}}</h5>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                <!-- Lista desarrolladores requerimiento fin-->
            </div>
            <div class="tab-pane fade" id="historial" role="tabpanel" aria-labelledby="profile-tab">
                <!-- Historial requerimiento inicio-->
                <div class="card text-center">
                    <div class="card-body">
                        <div class="table-container">
                            <table class="table table-hover table-bordered text-center">
                                <thead>
                                <tr class="table-active">
                                    <th>Estado</th>
                                    <th>Detalles</th>
                                    <th>Fecha</th>
                                </tr>
                                </thead>
                                <tbody id="myTable">
                                        @foreach($historial_requerimientos as $historial_requerimiento)
                                        <tr style="cursor:pointer;z-index:-99">
                                            <td class="td-estado">
                                                <span class="badge {{$historial_requerimiento->estado_requerimiento}}">
                                                @if (isset(Auth::user()->role) && Auth::user()->role == 'cliente' && $historial_requerimiento->estado_requerimiento == 'PENDIENTE')
                                                    ENVIADO
                                                @elseif (isset(Auth::user()->role) && Auth::user()->role == 'cliente' && $historial_requerimiento->estado_requerimiento == 'CONFIRMADO')
                                                    RECIBIDO
                                                @else
                                                    {{$historial_requerimiento->estado_requerimiento}}
                                                @endif
                                                </span>
                                            </td>
                                            <td>{{substr($historial_requerimiento->razon, 0, 140)}}</td>
                                            <td style="width:170px">{{$historial_requerimiento->created_at}}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if($requerimiento->estado == 'APROBADO')
                    <div class="card-footer text-muted">
                        <span class="btn btn-dark btn-block cursor-n">Finalizado</span>
                    </div>
                    @endif
                </div>
                
                <!-- Historial requerimiento fin-->
            </div>
            <div class="tab-pane fade" id="comentarios" role="tabpanel" aria-labelledby="profile-tab">
                <div class="card">
                    <div class="card-body">
                        <!-- Bloquear comentarios si el requerimiento esta Aprobado/Terminado -->
                        @if($requerimiento->estado == 'APROBADO')
                        <div class="card-footer text-muted">
                            <span class="btn btn-dark btn-block cursor-n">Finalizado</span>
                        </div>
                        @else
                        <form action="{{ route('AgregarComentario',[$requerimiento->id]) }}" method="post">
                            {{ csrf_field() }}
                            <div class="comentario-container col-md-6 mx-auto">
                                <div class="img-container mx-auto">
                                    <div class="image" style="background-image: url('https://www.eldescomunal.com/wp-content/uploads/2018/03/goku.jpg')"></div>
                                </div>
                                <div class="comentario-contenido mx-auto">
                                    <textarea class="contenido" name="contenido" id="contenido" resize="none" placeholder="Comentar..."></textarea>
                                </div>
                                <div class="button-comentar-container mx-auto">
                                    <button class="btn btn-light light2">Comentar</button>
                                </div>
                            </div>
                        </form>
                        @endif
                        <div class="Comentario form-control mt-2">
                            <div class="comentarios-title-container mx-auto mb-1">
                                <span class="comentarios-title">Lista de comentarios:</span>
                            </div>
                            @if($comentarios == '[]')
                                <p class="text-muted text-center">No hay comentarios</p>
                            @endif
                            @foreach($comentarios as $comentario)
                            <div class="comentario-container mx-auto mb-2">
                                <div class="img-container mx-auto">
                                    <div class="image" style="background-image: url('https://www.eldescomunal.com/wp-content/uploads/2018/03/goku.jpg')"></div>
                                    <div class="nombre-container">
                                        <span class="badge">{{$comentario->user_name}}</span>
                                        <span class="badge">{{$comentario->created_at}}</span>
                                    </div>
                                    @if (isset(Auth::user()->role) && Auth::user()->role == 'admin')
                                        <i onclick="eliminarComentario('{{ route("eliminarComentario",[$comentario->id]) }}')" class="fas fa-backspace"></i>
                                    @endif
                                </div>
                                <div class="comentario-contenido mx-auto">
                                    <span class="contenido">{{$comentario->contenido}}</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{App\requerimientos::recibir($requerimiento->id, $requerimiento->estado)}}
    </section>
    <style>        
        #mainNav.navbar-dark .navbar-collapse .navbar-sidenav>.nav-item>.RequerimientosLink {color:#1c8dff;}
    </style>
	<script src="{{ asset('js/sweetalert.min.js') }}"></script>
	<link  media="all" rel="stylesheet" type="text/css" href="{{ asset('css/general.css') }}">
	<script src="{{ asset('js/aplicacion.js') }}"></script>
	<script src="{{ asset('js/requerimientos.js') }}"></script>
@endsection