@extends('adminlte::page')

@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)

@section('title', 'Editar Empresa | Guiñez Ingeniería')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center">
            <div class="col-lg-9">

                <div class="card card-aspen">
                    <div class="card-header">
                        <h3 class="card-title">Editar Empresa</h3>
                    </div>

                    <form id="formularioDeEmpresa" method="POST" action="{{ route('empresa.update', $empresa) }}">
                        @csrf
                        @method('put')

                        <div class="card-body">
                            <div class="form-group">
                                <label for="nombre">Nombre</label>
                                <input type="text" class="form-control @if ($errors->any()) @if ($errors->has('nombre')) is-invalid @else is-valid @endif @endif" name="nombre" value="{{ old('nombre', $empresa->nombre) }}">
                                @if ($errors->any())
                                    @error('nombre')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                @endif
                            </div>

                            <div class="form-group">
                                <label for="descripcion">Descripción</label>
                                <textarea class="form-control @if ($errors->any()) @if ($errors->has('descripcion')) is-invalid @else is-valid @endif @endif" name="descripcion" rows="3">{{ old('descripcion', $empresa->descripcion) }}</textarea>
                                @if ($errors->any())
                                    @error('descripcion')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                @endif
                            </div>

                            <div  class="contenedor-dos-campos-por-fila">
                                <div class="form-group">
                                    <label for="telefono">Teléfono</label>
                                    <input type="text" class="form-control @if ($errors->any()) @if ($errors->has('telefono')) is-invalid @else is-valid @endif @endif" name="telefono" value="{{ old('telefono', $empresa->telefono) }}">
                                    @if ($errors->any())
                                        @error('telefono')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    @endif
                                </div>
    
                                <div class="form-group">
                                    <label for="correo">Correo</label>
                                    <input type="text" class="form-control @if ($errors->any()) @if ($errors->has('correo')) is-invalid @else is-valid @endif @endif" name="correo" value="{{ old('correo', $empresa->correo) }}">
                                    @if ($errors->any())
                                        @error('correo')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    @endif
                                </div>
    
                                <div class="form-group">
                                    <label for="sitio_web">Sitio Web</label>
                                    <input type="text" class="form-control @if ($errors->any()) @if ($errors->has('sitio_web')) is-invalid @else is-valid @endif @endif" name="sitio_web" value="{{ old('sitio_web', $empresa->sitio_web) }}">
                                    @if ($errors->any())
                                        @error('sitio_web')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    @endif
                                </div>

                                <div class="form-group">
                                    <label>Estado</label>
                                    <select class="form-control lista-despegable-con-buscador @if ($errors->any()) @if ($errors->has('estado')) input-error-icon @else input-success-icon @endif @endif" id="campoEstadoDeLaEmpresa" name="estado" data-live-search="true">
                                        @if (old('estado', $empresa->estado) == 'Operativo')
                                            <option value="">--Seleccionar Estado--</option>
                                            <option value="Operativo" selected>Operativo</option>
                                            <option value="Inactivo">Inactivo</option>
                                        @elseif(old('estado', $empresa->estado) == 'Inactivo')
                                            <option value="">--Seleccionar Estado--</option>
                                            <option value="Operativo">Operativo</option>
                                            <option value="Inactivo" selected>Inactivo</option>
                                        @else
                                            <option value="">--Seleccionar Estado--</option>
                                            <option value="Operativo">Operativo</option>
                                            <option value="Inactivo">Inactivo</option>
                                        @endif
                                    </select>
                                    @if ($errors->any())
                                        @error('estado')
                                            <div class="invalid-feedback" style="display: block;">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    @endif
                                </div>
                            </div>

                            @if (Gate::check('empresa.edit-areas'))
                                <div class="dt-responsive table-responsive">
                                    <table class="table table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-areas-sectores-registrados">
                                        <thead>
                                            <tr role="row">
                                                <th colspan="6" class="text-center">ÁREAS/SECTORES REGISTRADOS DE LA EMPRESA </th>
                                            </tr>
                                            <tr role="row">
                                                <th>#</th>
                                                <th>Nombre Área/Sector</th>
                                                <th>Descripción Área/Sector</th>
                                                <th>Observación</th>
                                                <th>Estado</th>
                                                <th>Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registrosDeAreasSectoresRegistrados">
                                            @php
                                                $cantidadAreas = 0;
                                                $oldRegistrosAresRegistrado=old('registros_area_registrados', '[]');
                                                $oldRegistrosAresRegistrado=json_decode($oldRegistrosAresRegistrado);                                                
                                            @endphp
                                            @if (count($empresa->areas) > 0)
                                                @foreach ($empresa->areas as $area)
                                                    @php
                                                        $cantidadAreas++;
                                                        $estadoArea=$area->estado;
                                                        foreach ($oldRegistrosAresRegistrado as $oldArea) {
                                                            if($oldArea->idArea==$area->id){
                                                                $estadoArea=$oldArea->tipoAccion;
                                                            }
                                                        }
                                                    @endphp
                                                    <tr>
                                                        @if (count($area->ordenesDeTrabajos) > 0)
                                                            <td style="display:none;" class="tabla-orden-trabajo-areas-sectores-registrado">Con OT</td>
                                                        @else
                                                            <td style="display:none;" class="tabla-orden-trabajo-areas-sectores-registrado">Sin OT</td>
                                                        @endif
                                                        <td style="display:none;" class="tabla-tipo-accion-areas-sectores-registrado">{{ $estadoArea}}</td>
                                                        <td style="display:none;" class="tabla-id-areas-sectores-registrado">{{ $area->id }}</td>
                                                        <td style="display:none;" class="tabla-estado-oculto-areas-sectores-registrado">{{ $area->estado }}</td>
                                                        <td class="tabla-contador-areas-sectores-registrado">{{ $cantidadAreas }}</td>
                                                        <td class="tabla-nombre-areas-sectores-registrado">{{ $area->nombre }}</td>
                                                        <td class="tabla-descripcion-areas-sectores-registrado">{{ $area->descripcion }}</td>
                                                        @if ($estadoArea == 'Operativo')
                                                            <td class="tabla-observacion-areas-sectores-registrado item-error-verde">El área/sector se encuentra registrado en base de datos y se puede utilizar en las órdenes de trabajos. </td>
                                                        @elseif($estadoArea == 'Inactivo')
                                                            <td class="tabla-observacion-areas-sectores-registrado item-error-verde">El área/sector se encuentra registrado en base de datos y no puede utilizarse en las órdenes de trabajos. </td>
                                                        @elseif($estadoArea == 'Remover')
                                                            <td class="tabla-observacion-areas-sectores-registrado item-error-verde">El área/sector será removida de la plataforma cuando se edite la información de la empresa.</td>
                                                        @endif
                                                        <td class="tabla-estado-areas-sectores-registrado">
                                                            @if ($estadoArea == 'Operativo')
                                                                <span class="badge badge-success">{{ $estadoArea }}</span>
                                                            @elseif($estadoArea == 'Inactivo')
                                                                <span class="badge badge-danger">{{ $estadoArea }}</span>
                                                            @elseif($estadoArea == 'Remover')
                                                                <span class="badge badge-danger">{{ $estadoArea }}</span>
                                                            @endif
                                                        </td>
                                                        <td class="tabla-accion-areas-sectores-registrado">
                                                            <div class="btn-group ">
                                                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>
                                                                <div class="dropdown-menu">
                                                                    @if ($estadoArea == 'Operativo')
                                                                        <a class="dropdown-item" href="#" onclick="deshabilitarAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock" aria-hidden="true"></i> Deshabilitar Área/Sector</a>
                                                                        <a class="dropdown-item" href="#" onclick="removerAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Área/Sector</a>
                                                                    @elseif($estadoArea == 'Inactivo')
                                                                        <a class="dropdown-item" href="#" onclick="habilitarAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock-open" aria-hidden="true"></i> Habilitar Área/Sector</a>
                                                                        <a class="dropdown-item" href="#" onclick="removerAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Área/Sector</a>
                                                                    @elseif($estadoArea == 'Remover')
                                                                        <a class="dropdown-item" href="#" onclick="cancelarRemoverAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-times-circle" aria-hidden="true"></i> Cancelar La Remoción Del Área/Sector</a>
                                                                    @endif
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr id="areasSectoresRegistradosNoDisponibleEnLaTabla">
                                                    <td colspan="6" class="text-center">No hay áreas/sectores disponibles en la tabla</td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                                <input type="hidden" id="registrosAreaSectoresRegistrados" name="registros_area_registrados" value="{{ old('registros_area_registrados', '[]') }}">

                                <fieldset class="fieldset-color-aspen">
                                    <legend class="titulo-fieldset-color-aspen">Áreas/Sectores</legend>

                                    <div class="form-group">
                                        <label for="cargo">Nombre Área/Sector</label>
                                        <input type="text" class="form-control" id="campoNombreAreaSector">
                                        <div class="invalid-feedback" id="validacionCampoNombreAreaSector">

                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="descripcion">Descripción Área/Sector</label>
                                        <textarea class="form-control" id="campoDescripcionAreaSector" rows="3"></textarea>
                                        <div class="invalid-feedback" id="validacionCampoDescripcionAreaSector">

                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-aspen" onclick="agregarCamposDeAreaSector()"> Agregar Área/Sector</button>
                                </fieldset>

                                <div class="dt-responsive table-responsive">
                                    <table class="table table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-areas-sectores">
                                        <thead>
                                            <tr role="row">
                                                <th colspan="4" class="text-center">ÁREAS/SECTORES NUEVOS</th>
                                            </tr>
                                            <tr role="row">
                                                <th>#</th>
                                                <th>Nombre Área/Sector</th>
                                                <th>Descripción Área/Sector</th>
                                                <th>Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registrosDeAreasSectores">
                                            <tr id="areasSectoresNoDisponibleEnLaTabla">
                                                <td colspan="4" class="text-center">No hay áreas/sectores disponibles en la tabla</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <input type="hidden" id="registrosAreaSectores" name="registros_area" value="{{ old('registros_area', '[]') }}">
                            @endif

                        </div>

                        <div class=" card-footer">
                            <button type="button" onclick="EnviarCamposParaProcesarlo()" class="btn btn-aspen" id="botonDeEdicion"><i class="fas fa-edit" style="margin-right: 2px;"></i> Editar Empresa </button>
                            <a href="{{ route('empresa.index') }}" role="button" class="btn btn-secondary"><i class="fas fa-arrow-alt-circle-left" style="margin-right: 2px;"></i> Volver</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/generico.css') }}">
    <style>
        .item-error-rojo {
            font-weight: 700;
            color: #dc3545;
        }

        .item-error-verde {
            font-weight: 700;
            color: #28a745;
        }
    </style>
@stop

@section('js')
    <script>
        $('#campoEstadoDeLaEmpresa').selectpicker({
            dropupAuto: false
        });
    </script>

    @if (Gate::check('empresa.edit-areas'))
        <script>
            function EnviarCamposParaProcesarlo() {
                let registrosDeAreasSectoresRegistrados = [];
                let filasAreasSectoresRegistrados = document.getElementById('tabla-areas-sectores-registrados').tBodies[0].querySelectorAll("tr");
                filasAreasSectoresRegistrados.forEach(filaAreaSector => {
                    if (filaAreaSector.querySelector(".tabla-contador-areas-sectores-registrado")) {
                        let nombreAreaSector = filaAreaSector.querySelector(".tabla-nombre-areas-sectores-registrado").innerHTML.trim();
                        let descripcionAreaSector = filaAreaSector.querySelector(".tabla-descripcion-areas-sectores-registrado").innerHTML.trim();
                        let tipoAccion = filaAreaSector.querySelector(".tabla-tipo-accion-areas-sectores-registrado").innerHTML.trim();
                        let idArea = filaAreaSector.querySelector(".tabla-id-areas-sectores-registrado").innerHTML.trim();

                        let objectoAreaSectorRegistrado = {
                            nombreAreaSector: nombreAreaSector,
                            descripcionAreaSector: descripcionAreaSector,
                            tipoAccion: tipoAccion,
                            idArea: idArea
                        };

                        registrosDeAreasSectoresRegistrados.push(objectoAreaSectorRegistrado);
                    }
                });
                registrosDeAreasSectoresRegistrados = JSON.stringify(registrosDeAreasSectoresRegistrados);

                let registrosDeAreasSectores = [];
                let filasAreasSectores = document.getElementById('tabla-areas-sectores').tBodies[0].querySelectorAll("tr");
                filasAreasSectores.forEach(filaAreaSector => {
                    if (filaAreaSector.querySelector(".tabla-contador-areas-sectores")) {
                        let nombreAreaSector = filaAreaSector.querySelector(".tabla-nombre-areas-sectores").innerHTML.trim();
                        let descripcionAreaSector = filaAreaSector.querySelector(".tabla-descripcion-areas-sectores").innerHTML.trim();

                        let objectoAreaSector = {
                            nombreAreaSector: nombreAreaSector,
                            descripcionAreaSector: descripcionAreaSector
                        };

                        registrosDeAreasSectores.push(objectoAreaSector);
                    }
                });
                registrosDeAreasSectores = JSON.stringify(registrosDeAreasSectores);
                document.getElementById("registrosAreaSectoresRegistrados").value = registrosDeAreasSectoresRegistrados;
                document.getElementById("registrosAreaSectores").value = registrosDeAreasSectores;

                document.getElementById("botonDeEdicion").setAttribute("disabled", true);
                document.getElementById("preloader").removeAttribute("style");
                document.getElementById("img-preloader").style.display = "block";
                document.getElementById("formularioDeEmpresa").submit();
            }

            let cantidadMaximaDeRegistrosDeAreasSectores = 0;
            let registrosDeAreasSectoresOld = JSON.parse(document.getElementById("registrosAreaSectores").value);
            if (registrosDeAreasSectoresOld.length > 0) {
                registrosDeAreasSectoresOld.forEach(elemento => {
                    cantidadMaximaDeRegistrosDeAreasSectores++;
                    if (document.getElementById("areasSectoresNoDisponibleEnLaTabla")) {
                        document.getElementById("areasSectoresNoDisponibleEnLaTabla").remove();
                    }
                    document.getElementById("registrosDeAreasSectores").innerHTML +=
                        '<tr role="row" class="odd">' +
                        '<td class="tabla-contador-areas-sectores">' + cantidadMaximaDeRegistrosDeAreasSectores + '</td>' +
                        '<td class="tabla-nombre-areas-sectores">' + elemento.nombreAreaSector + '</td>' +
                        '<td class="tabla-descripcion-areas-sectores">' + elemento.descripcionAreaSector + '</td>' +
                        '<td class="tabla-accion-areas-sectores">' +
                        '<button onclick="habilitarBotonConfirmarEliminaciononAreaSector(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                        '<button onclick="eliminarFilaAreaSector(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-recurso mr-1">Confirmar</button>' +
                        '</td>' +
                        '</tr>';
                });
            }

            function removerAreaSectorRegistrado(filaAreaSector){
                if(filaAreaSector.querySelector(".tabla-orden-trabajo-areas-sectores-registrado").innerHTML=="Con OT"){
                    filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").innerHTML=" El área/sector no puede ser removida, por el motivo que se está utilizando en algunas órdenes de trabajos.";
                    filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").setAttribute("class","tabla-observacion-areas-sectores-registrado item-error-rojo")
                }else if(filaAreaSector.querySelector(".tabla-orden-trabajo-areas-sectores-registrado").innerHTML=="Sin OT"){
                    filaAreaSector.querySelector(".tabla-tipo-accion-areas-sectores-registrado").innerHTML='Remover';
                    filaAreaSector.querySelector(".tabla-estado-areas-sectores-registrado").innerHTML='<span class="badge badge-danger">Removido</span>';
                    filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").setAttribute("class","tabla-observacion-areas-sectores-registrado item-error-verde")
                    filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").innerHTML=" El área/sector será removida de la plataforma cuando se edite la información de la empresa.";

                    filaAreaSector.querySelector(".tabla-accion-areas-sectores-registrado").innerHTML=
                    '<div class="btn-group ">'+
                        '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>'+
                        '<div class="dropdown-menu">'+
                            '<a class="dropdown-item" href="#" onclick="cancelarRemoverAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-times-circle" aria-hidden="true"></i> Cancelar La Remoción Del Área/Sector</a>'+
                        '</div>'+
                    '</div>';
                }
            }

            function cancelarRemoverAreaSectorRegistrado(filaAreaSector){
                if(filaAreaSector.querySelector(".tabla-estado-oculto-areas-sectores-registrado").innerHTML=="Operativo"){
                    filaAreaSector.querySelector(".tabla-tipo-accion-areas-sectores-registrado").innerHTML='Operativo';
                    filaAreaSector.querySelector(".tabla-estado-areas-sectores-registrado").innerHTML='<span class="badge badge-success">Operativo</span>';
                    filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").innerHTML="El área/sector se encuentra registrado en base de datos y se puede utilizar en las órdenes de trabajos.";
                    filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").setAttribute("class","tabla-observacion-areas-sectores-registrado item-error-verde")

                    filaAreaSector.querySelector(".tabla-accion-areas-sectores-registrado").innerHTML=
                    '<div class="btn-group ">'+
                        '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>'+
                        '<div class="dropdown-menu">'+
                            '<a class="dropdown-item" href="#" onclick="deshabilitarAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock" aria-hidden="true"></i> Deshabilitar Área/Sector</a>'+
                            '<a class="dropdown-item" href="#" onclick="removerAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Área/Sector</a>'+
                        '</div>'+
                    '</div>';
                }else if(filaAreaSector.querySelector(".tabla-estado-oculto-areas-sectores-registrado").innerHTML=="Inactivo"){
                    filaAreaSector.querySelector(".tabla-tipo-accion-areas-sectores-registrado").innerHTML='Inactivo';
                    filaAreaSector.querySelector(".tabla-estado-areas-sectores-registrado").innerHTML='<span class="badge badge-danger">Inactivo</span>';
                    filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").innerHTML="El área/sector se encuentra registrado en base de datos y no puede utilizarse en las órdenes de trabajos.";
                    filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").setAttribute("class","tabla-observacion-areas-sectores-registrado item-error-verde")

                    filaAreaSector.querySelector(".tabla-accion-areas-sectores-registrado").innerHTML=
                    '<div class="btn-group ">'+
                        '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>'+
                        '<div class="dropdown-menu">'+
                            '<a class="dropdown-item" href="#" onclick="habilitarAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock-open" aria-hidden="true"></i> Habilitar Área/Sector</a>'+
                            '<a class="dropdown-item" href="#" onclick="removerAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Área/Sector</a>'+
                        '</div>'+
                    '</div>';
                }
            }

            function deshabilitarAreaSectorRegistrado(filaAreaSector){
                filaAreaSector.querySelector(".tabla-tipo-accion-areas-sectores-registrado").innerHTML='Inactivo';
                filaAreaSector.querySelector(".tabla-estado-areas-sectores-registrado").innerHTML='<span class="badge badge-danger">Inactivo</span>';
                filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").innerHTML="El área/sector se encuentra registrado en base de datos y no puede utilizarse en las órdenes de trabajos.";
                filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").setAttribute("class","tabla-observacion-areas-sectores-registrado item-error-verde")

                filaAreaSector.querySelector(".tabla-accion-areas-sectores-registrado").innerHTML=
                '<div class="btn-group ">'+
                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>'+
                    '<div class="dropdown-menu">'+
                        '<a class="dropdown-item" href="#" onclick="habilitarAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock-open" aria-hidden="true"></i> Habilitar Área/Sector</a>'+
                        '<a class="dropdown-item" href="#" onclick="removerAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Área/Sector</a>'+
                    '</div>'+
                '</div>';
            }

            function habilitarAreaSectorRegistrado(filaAreaSector){
                filaAreaSector.querySelector(".tabla-tipo-accion-areas-sectores-registrado").innerHTML='Operativo';
                filaAreaSector.querySelector(".tabla-estado-areas-sectores-registrado").innerHTML='<span class="badge badge-success">Operativo</span>';
                filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").innerHTML="El área/sector se encuentra registrado en base de datos y se puede utilizar en las órdenes de trabajos. ";
                filaAreaSector.querySelector(".tabla-observacion-areas-sectores-registrado").setAttribute("class","tabla-observacion-areas-sectores-registrado item-error-verde")

                filaAreaSector.querySelector(".tabla-accion-areas-sectores-registrado").innerHTML=
                '<div class="btn-group ">'+
                    '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Acciones</button>'+
                    '<div class="dropdown-menu">'+
                        '<a class="dropdown-item" href="#" onclick="deshabilitarAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock" aria-hidden="true"></i> Deshabilitar Área/Sector</a>'+
                            '<a class="dropdown-item" href="#" onclick="removerAreaSectorRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Área/Sector</a>'+
                    '</div>'+
                '</div>';
            }

            function agregarCamposDeAreaSector() {
                let campoNombreAreaSector = document.getElementById("campoNombreAreaSector").value.trim();
                let campoDescripcionAreaSector = document.getElementById("campoDescripcionAreaSector").value.trim();
                if (campoNombreAreaSector.length > 0 && campoDescripcionAreaSector.length > 0) {
                    cantidadMaximaDeRegistrosDeAreasSectores++;
                    if (document.getElementById("areasSectoresNoDisponibleEnLaTabla")) {
                        document.getElementById("areasSectoresNoDisponibleEnLaTabla").remove();
                    }
                    document.getElementById("registrosDeAreasSectores").innerHTML +=
                        '<tr role="row" class="odd">' +
                        '<td class="tabla-contador-areas-sectores">' + cantidadMaximaDeRegistrosDeAreasSectores + '</td>' +
                        '<td class="tabla-nombre-areas-sectores">' + campoNombreAreaSector + '</td>' +
                        '<td class="tabla-descripcion-areas-sectores">' + campoDescripcionAreaSector + '</td>' +
                        '<td class="tabla-accion-areas-sectores">' +
                        '<button onclick="habilitarBotonConfirmarEliminaciononAreaSector(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                        '<button onclick="eliminarFilaAreaSector(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-recurso mr-1">Confirmar</button>' +
                        '</td>' +
                        '</tr>';

                    document.getElementById("campoNombreAreaSector").value = "";
                    document.getElementById("validacionCampoNombreAreaSector").innerHTML = "";
                    document.getElementById("campoNombreAreaSector").setAttribute("class", "form-control");

                    document.getElementById("campoDescripcionAreaSector").value = "";
                    document.getElementById("validacionCampoDescripcionAreaSector").innerHTML = "";
                    document.getElementById("campoDescripcionAreaSector").setAttribute("class", "form-control");
                } else {
                    if (campoNombreAreaSector.length > 0) {
                        document.getElementById("campoNombreAreaSector").setAttribute("class", "form-control is-valid");
                        document.getElementById("validacionCampoNombreAreaSector").innerHTML = "";
                    } else {
                        document.getElementById("campoNombreAreaSector").setAttribute("class", "form-control is-invalid");
                        document.getElementById("validacionCampoNombreAreaSector").innerHTML = "El campo nombre área/sector del postulante es obligatorio";
                    }

                    if (campoDescripcionAreaSector.length > 0) {
                        document.getElementById("campoDescripcionAreaSector").setAttribute("class", "form-control is-valid");
                        document.getElementById("validacionCampoDescripcionAreaSector").innerHTML = "";
                    } else {
                        document.getElementById("campoDescripcionAreaSector").setAttribute("class", "form-control is-invalid");
                        document.getElementById("validacionCampoDescripcionAreaSector").innerHTML = "El campo nombre del postulante es obligatorio";
                    }
                }
            }

            function deshabilitarBotonesConfirmarEliminacionAreaSector() {
                let botones = document.querySelectorAll(".boton-confirmar-recurso");
                botones.forEach(elemento => {
                    elemento.style.display = 'none';
                });
            }

            function habilitarBotonConfirmarEliminaciononAreaSector(boton) {

                if (boton.nextElementSibling.style.display == 'none') {
                    deshabilitarBotonesConfirmarEliminacionAreaSector();
                    boton.nextElementSibling.style.display = 'inline-block';
                } else {
                    if (boton.nextElementSibling.style.display == 'inline-block') {
                        deshabilitarBotonesConfirmarEliminacionAreaSector();
                    }
                }

            }

            function eliminarFilaAreaSector(boton) {
                let elementoFila = boton.parentElement.parentElement;

                elementoFila.remove();
                cantidadMaximaDeRegistrosDeAreasSectores = 0;
                let filas = document.getElementById('tabla-areas-sectores').tBodies[0].querySelectorAll("tr");
                if (filas.length > 0) {
                    filas.forEach(elemento => {
                        cantidadMaximaDeRegistrosDeAreasSectores++;
                        elemento.querySelector(".tabla-contador-areas-sectores").innerHTML = cantidadMaximaDeRegistrosDeAreasSectores;
                    });
                } else {
                    document.getElementById("registrosDeAreasSectores").innerHTML =
                        '<tr id="areasSectoresNoDisponibleEnLaTabla">' +
                        '<td colspan="4" class="text-center">No hay áreas/sectores disponibles en la tabla</td>' +
                        '</tr>';
                }
            }
        </script>
    @else
        <script>
            function EnviarCamposParaProcesarlo() {
                document.getElementById("botonDeEdicion").setAttribute("disabled", true);
                document.getElementById("preloader").removeAttribute("style");
                document.getElementById("img-preloader").style.display = "block";
                document.getElementById("formularioDeEmpresa").submit();
            }
        </script>
    @endif

    @if (session('alerta') != null)
        <script>
            Swal.fire({
                icon: 'success',
                title: '¡Empresa Editada!',
                text: '{{ session('alerta') }}',
                confirmButtonColor: "#448aff",
                confirmButtonText: "Confirmar"
            })
        </script>
    @endif
@stop