@extends('layouts.app')
@section('breadcrumbs')
    @include('__partials.breadcrumbs', [
        'data' => [
            ['route' => 'home', 'name' => 'Home'],
            ['route' => '', 'name' => 'Parametros'],
            ['route' => '', 'name' => 'Lista de areas']
        ],
        'show_add_button' => false,
        'add_button_route' => route('parametros.area')
    ])
@endsection
@section('content')
<div class="row">
    <div class="col-md-12 grid-margin">
        <div class="card">
            <div class="card-body">
                <center><h5>Áreas PQR</h5></center>
                <br>
                <form action="{{route('parametros.area')}}" method="get">
                    <div class="row">
                        <div class="col-md-12">
                            <label><b>Nombres</b></label>
                            <div class="input-group mb-3">
                                <input type="text" name="search" class="form-control border border-primary" placeholder="Nombre a buscar" aria-label="Nombre" aria-describedby="Nombre">
                                <div class="input-group-append">
                                <button class="btn btn-outline-success" id="BtnBuscar"><i class="fa fa-search" aria-hidden="true"></i> Buscar</button>
                                @if($flag)
                                    <button href="#" onclick="window.location.reload(true);" class="btn btn-outline-warning" id="BtnVolver">Volver</button>
                                @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <br>
                <div class="table-responsive">
                    <div class="col-md-12">
                        <table class="table table-hover table-striped">
                            <thead class="thead-light">
                                <tr>
                                    <th scope="col" class="text-center">#</th>
                                    <th scope="col">Nombre <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-crear-area">Crear área <i class="fa fa-plus-circle" aria-hidden="true"></i> </button></th>
                                    <th scope="col" class="text-center"><center>N° Usuarios</center></th>
                                    <th scope="col" class="text-center">Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                @if(count($documento) > 0)
                                                                        @foreach($documento as $area)
                                        <tr>
                                            <td class="text-center">
                                                <a style="cursor:pointer;" title="Editar niveles" data-toggle="modal" data-target="#modal-editar-area{{$area->id}}"><i class="fa-solid fa-pen-to-square" style="color:#0C83E2"></i></a> 1                                                <!-- Modal editar area -->
                                                <div class="modal fade" id="modal-editar-area{{$area->id}}" tabindex="-1" role="dialog" aria-labelledby="modal-editar-area{{$area->id}}" aria-hidden="true">
                                                    <div class="modal-dialog" role="document">
                                                        <div class="modal-content modal-md" style="bottom:82px;">
                                                            <div class="modal-header bg-primary text-light">
                                                                <h5 class="modal-title" id="titulo">Nueva área <i class="fa fa-plus-circle" aria-hidden="true"></i> </h5>
                                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                <form id="formeditnivarea{{$area->id}}" action="{{route('parametros.editarNivelesArea')}}" method="POST">
                                                                    {{csrf_field()}}
                                                                    <div class="form-group" style="text-align:left;">
                                                                        <label for="exampleInputEmail1">Nombre</label>
                                                                        <input type="text" id="nombre" name="nombre" class="nombre form-control" value="{{ $area->nombre }}" required>
                                                                        <br>
                                                                        @foreach($tipousuarios as $tpu)
                                                                            <div class="checkbox">
                                                                                <input type="checkbox" name="tipousersedit[]" value="{{ $tpu->id }}" @if(in_array($tpu->id, $area->areaniveles)) checked @endif>
                                                                                <label for="exampleInputEmail1" style="margin-top: 10px;">{{ mb_strtoupper($tpu->nombre) }}</label>
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                    <input type="hidden" name="id" value="{{$area->id}}">
                                                                    <div class="modal-footer">
                                                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar <i class="fa fa-times-circle" aria-hidden="true"></i></button>
                                                                        <button type="button" onclick="document.getElementById('formeditnivarea{{$area->id}}').submit()" class="btn btn-primary">Actualizar <i class="fa fa-plus-circle" aria-hidden="true"></i></button>
                                                                    </div>
                                                                </form>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>{{ mb_strtoupper($area->nombre) }}</td>
                                            <td class="text-center">{{ $area->count }}</td>
                                            <td class="text-center">
                                                <form action="{{route('parametros.actualizarArea')}}" method="POST">
                                                    {{csrf_field()}}
                                                    <div class="input-group">
                                                        <select class="active custom-select" name="active" id="active" aria-label="Seleccionar estado">
                                                            <option value="0" @if($area->active == 0) selected @endif>Inactivo</option>
                                                            <option value="1" @if($area->active == 1) selected @endif>Activo</option>
                                                        </select>
                                                        <div class="input-group-append">
                                                            <button class="btn btn-primary">Actualizar</button>
                                                        </div>
                                                        <input type="hidden" value="{{$area->id}}" name="id">
                                                    </div>
                                                </form>
                                            </td>
                                        </tr>
                                                                            @endforeach
                                @else
                                    <div class="alert alert-danger" role="alert">No hay áreas registradas</div>
                                @endif
                            </tbody>
                        </table>
                        @if(!$flag) {{$documento->appends(Input::except('page'))->links()}} @endif 
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="modal-crear-area" tabindex="-1" role="dialog" aria-labelledby="modal-crear-area" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-md" style="bottom:82px;">
                <div class="modal-header bg-primary text-light">
                    <h5 class="modal-title" id="titulo">Nueva área <i class="fa fa-plus-circle" aria-hidden="true"></i> </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form" action="{{route('parametros.guardarArea')}}" method="POST">
                        <div class="form-group">
                            {{csrf_field()}}
                            <label for="exampleInputEmail1">Nombre</label>
                            <input type="text" class="form-control" id="nombre" name="nombre" aria-describedby="nombre" placeholder="Insertar nombre" required>
                            <small id="nombreHelp" class="form-text text-muted">Nombre que llevará la nueva área</small>
                            @foreach($tipousuarios as $tpu)
                                <div class="checkbox">
                                    <input type="checkbox" name="tipousers[]" value="{{ $tpu->id }}">
                                    <label for="exampleInputEmail1" style="margin-top: 10px;">{{ mb_strtoupper($tpu->nombre) }}</label>
                                </div>
                            @endforeach
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar <i class="fa fa-times-circle" aria-hidden="true"></i></button>
                            <button type="submit" class="btn btn-primary">Guardar <i class="fa fa-plus-circle" aria-hidden="true"></i></button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div> 
@endsection