@extends('layouts.app', ['title'=>(isset($title)) ? $title : 'Inicio'])

<link rel="stylesheet" href="/css/estado_tarea.css">
@section('content')
<div class="margin-container"> 
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12 col-md-10">
                <div class="jumbotron-fluid jumbotron-fluid-texto">
                    <h4 class="text-center display-4 display-4-font"><b>Estados de la {{$lastLevel->level}} (bitácora)</b></h4>
                </div>
                <div class="row">
                    <div class="col-sm-5 col-12 mb-2">
                        <a class="card card-width-1" id="Busqueda-Avanzada-1">
                            <div class="card-body">
                                <p class="card-text text-center"><i class="fa fa-align-left fa-fa-size"></i><b>Descripción</b></p>
                            </div>
                        </a>
                        <div id="Busqueda-1" class="d-none">
                            <div class="card  mt-3">
                                <div class="card-header bg-danger text-white">Descripción de un estado.<i class="fa fa-times text-white pull-right" id="Busqueda-1-cerrar"></i></div>
                                <div class="card-body">
                                    <p class="text-justify lead">Hay tres estados por defecto: <b>programado</b>, <b>activo</b> y <b>finalizado.</b> Estos no se puede eliminar, solo editar. Es posible agregar nuevos estados, aunque se recomienda que en total no sean más de 6, por facilidad al crear un nuevo registro de bitácora.
                                    </p>
                                </div>
                            </div>
                        </div>
                        <a class="card card-width-1" id="Crear-fase-1">
                            <div class="card-body">
                                <p class="card-text text-center"><i class="fa fa-magic fa-fa-size-color"></i><b>Crear Estado</b></p>
                            </div>
                        </a>
                        @include('layouts.alert-success')
                        <div id="Crear-1" class="d-none">
                            <div class="card  mt-3">
                                <div class="card-header bg-warning text-white"><i class="fa fa-times text-white pull-right" id="Crear-1-cerrar"></i></div>
                                <div class="card-body">
                                    <form method="POST" action="{{route('estados.store')}}">
                                        {{ csrf_field() }}
                                        <div class="form-group row">
                                            <label for="estado" class="col-sm-4">Estado: </label>
                                            <input type="text" class="form-control col-sm-8" id="estado" name="estado" aria-describedby="emailHelp" placeholder="">
                                        </div>
                                        <div class="form-group row">
                                            <label for="color" class="col-sm-4">Color</label>
                                            <input type="color" class="form-control col-sm-8" id="color" name="color" value="#eeeeee">
                                            <input id="color1" type="text" name="color1" value="#333399" />
                                        </div>
                                        <div class="form-group row">
                                            <label for="email" class="col-sm-4">Tiene email</label>
                                            <select class="form-control col-sm-8" id="email" name="email" required>
                                                <option value="">Seleccione</option>
                                                <option value="1">Sí</option>
                                                <option value="0">No</option>
                                            </select>
                                        </div>
                                        <button type="submit" class="btn btn-warning text-white">Crear</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{--  Pendiente la edición de los estados, aún no sé si editar en un td o editar por fuera en un modal  --}}
                    {{--  Otra opcion es organizar la tabla con jquery como:
                    https://paramquery.com/
                    http://js-grid.com/demos/  --}}
                    <div class="col-sm-7 col-12 mb-2">
                        <table class="table table-bordered table-hover table-light table-striped table-responsive">
                            <thead>
                                <tr>
                                    <th colspan="5" class="bg-danger text-white text-center">Estados existentes</th>    
                                </tr>
                                <tr>
                                    <th scope="col" width="5%">Id</th>
                                    <th scope="col" width="28%">Estado</th>
                                    <th scope="col" width="22%">Color</th>
                                    <th scope="col" width="25%">Envía Correo</th>
                                    <th scope="col" width="20%">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($estados as $key => $estado)
                                <tr>
                                    <td>{{$estado->idEstado}}</td>
                                    <td>{{$estado->estado}}</td>
                                    <td>
                                        <div class="inline">{{$estado->color}}</div>
                                        <div id="circleColor" class="inline" style="background-color:{{$estado->color}}"></div>
                                    </td>
                                    @if($estado->tiene_email == 0)
                                    <td>No</td>
                                    @else
                                    <td>Sí</td>
                                    @endif
                                    <td>
                                        <i class="fa fa-pencil text-success fa-fa-size-table text-center"></i>
                                        <form method="post" action="{{ route('estados.destroy', $estado)}}">
                                            {{ method_field('DELETE') }} {{csrf_field()}}
                                        @if($key > 2)
                                            <button type="submit">
                                                <i class="fa fa-trash text-danger fa-fa-size-table"></i>
                                            </button>
                                        </form>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    

       
                        

<!-- ***************END OPCIONES PRINCIPALES****************** -->

</div>
@endsection
@section('localjs')
<script>
        $( document ).ready(function() {

        });
</script>
@endsection