@extends('adminlte::page')

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

@section('title', 'Editar Recursos del Contrato | 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 Recursos del Contrato</h3>
                    </div>

                    <form id="formularioDeContrato" method="POST" action="{{ route('contrato.update-recursos', $contrato) }}">
                        @csrf
                        @method('put')

                        <div class="card-body">

                            <div class="form-group">
                                <label for="numero_contrato">Número de Contrato</label>
                                <input type="text" class="form-control" name="numero_contrato" value="{{ old('numero_contrato', $contrato->numero_contrato) }}" readonly="true">
                            </div>

                            @if (count($contrato->proyectos) > 0)
                                <div>
                                    <label>Proyectos </label>
                                    <div style="display: grid; grid-template-columns: 1fr 1fr; grid-column-gap:10px;">
                                        @foreach ($contrato->proyectos as $proyecto)
                                            <div>
                                                <p>{{ $proyecto->nombre }}</p>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @else
                                <div>
                                    <label>Proyectos </label>
                                    <p>Sin Proyectos Asociados</p>
                                </div>
                            @endif

                            @if (Gate::check('contrato.edit-recursos'))
                                <div class="dt-responsive table-responsive">
                                    <table class="table table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-recursos-registrados">
                                        <thead>
                                            <tr role="row">
                                                <th colspan="8" class="text-center">REGISTROS RECURSOS REGISTRADOS DEL CONTRATO </th>
                                            </tr>
                                            <tr role="row">
                                                <th>#</th>
                                                <th>Tipo Recurso</th>
                                                <th>Nombre del Recurso</th>
                                                <th>Unidad de Medición</th>
                                                <th>Descripción</th>
                                                <th>Observación</th>
                                                <th>Estado</th>
                                                <th>Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registrosDeRecursosRegistrados">
                                            @php
                                                $cantidadRecursos = 0;
                                            @endphp
                                            @if (count($contrato->recursos) > 0)
                                                @foreach ($contrato->recursos as $recurso)
                                                    @php
                                                        $cantidadRecursos++;
                                                    @endphp
                                                    <tr>
                                                        <td style="display:none;" class="tabla-tipo-accion-recursos-registrado">{{ $recurso->estado }}</td>
                                                        <td style="display:none;" class="tabla-id-recursos-registrado">{{ $recurso->id }}</td>
                                                        <td style="display:none;" class="tabla-estado-oculto-recursos-registrado">{{ $recurso->estado }}</td>
                                                        <td class="tabla-contador-recursos-registrado">{{ $cantidadRecursos }}</td>
                                                        <td class="tabla-tipo-recursos-registrado">{{ $recurso->tipo_recurso }}</td>
                                                        <td class="tabla-nombre-recursos-registrado">{{ $recurso->nombre }}</td>
                                                        <td class="tabla-unidad-medicion-recursos-registrado">{{ $recurso->unidadDeMedida->unidad }}</td>
                                                        <td class="tabla-descripcion-recursos-registrado">{{ $recurso->descripcion }}</td>
                                                        <td class="tabla-observacion-recursos-registrado">
                                                            @if ($recurso->estado == 'Operativo')
                                                                El recurso se encuentra registrado en base de datos y se puede utilizar en las órdenes de trabajos.
                                                            @elseif($recurso->estado == 'Inactivo')
                                                                El recurso se encuentra registrado en base de datos y no puede utilizarse en las órdenes de trabajos.
                                                            @endif
                                                        </td>
                                                        <td class="tabla-estado-recursos-registrado">
                                                            @if ($recurso->estado == 'Operativo')
                                                                <span class="badge badge-success">{{ $recurso->estado }}</span>
                                                            @elseif($recurso->estado == 'Inactivo')
                                                                <span class="badge badge-danger">{{ $recurso->estado }}</span>
                                                            @endif
                                                        </td>
                                                        <td class="tabla-accion-recursos-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 ($recurso->estado == 'Operativo')
                                                                        <a class="dropdown-item" href="#" onclick="deshabilitarRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock" aria-hidden="true"></i> Deshabilitar Recurso</a>
                                                                    @elseif($recurso->estado == 'Inactivo')
                                                                        <a class="dropdown-item" href="#" onclick="habilitarRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock-open" aria-hidden="true"></i> Habilitar Recurso</a>
                                                                    @endif
                                                                    <a class="dropdown-item" href="#" onclick="removerRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Recurso</a>
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            @else
                                                <tr id="recursosRegistradosNoDisponibleEnLaTabla">
                                                    <td colspan="6" class="text-center">No hay recursos disponibles en la tabla</td>
                                                </tr>
                                            @endif
                                        </tbody>
                                    </table>
                                </div>
                                <input type="hidden" id="registrosRecursosRegistrados" name="registros_recursos_registrados" value="{{ old('registros_recursos_registrados', '[]') }}">

                                <fieldset class="fieldset-color-aspen">
                                    <legend class="titulo-fieldset-color-aspen">Recursos</legend>

                                    <div class="contenedor-dos-campos-por-fila">
                                        <div class="form-group">
                                            <label>Tipo Recurso</label>
                                            <select class="form-control lista-despegable-con-buscador" id="campoTipoDelRecurso" name="tipo_recurso">
                                                <option value="">--Seleccionar Tipo Recurso--</option>
                                                @foreach ($tiposDeRecursos as $tipoDelRecurso)
                                                    @if (old('tipo_recurso') == $tipoDelRecurso)
                                                        <option selected value="{{ $tipoDelRecurso }}">{{ $tipoDelRecurso }}</option>
                                                    @else
                                                        <option value="{{ $tipoDelRecurso }}">{{ $tipoDelRecurso }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validacionCampoTipoDelRecurso">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="cargo">Nombre del Recurso</label>
                                            <input type="text" class="form-control" id="campoNombreDelRecurso">
                                            <div class="invalid-feedback" id="validacionCampoNombreDelRecurso">

                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label>Unidad de Medición</label>
                                            <select class="form-control lista-despegable-con-buscador" id="campoUnidadDeMedicionDelRecurso" name="id_unidad" data-live-search="true">
                                                <option value="">--Seleccionar Unidad de Medición--</option>
                                                @foreach ($unidadDeMedida as $unidad)
                                                    @if (old('id_unidad') == $unidad->id)
                                                        <option selected value="{{ $unidad->id }}">{{ $unidad->unidad }}</option>
                                                    @else
                                                        <option value="{{ $unidad->id }}">{{ $unidad->unidad }}</option>
                                                    @endif
                                                @endforeach
                                            </select>
                                            <div class="invalid-feedback" id="validacionCampoUnidadDeMedicionDelRecurso">

                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="descripcion">Descripción del Recurso</label>
                                        <textarea class="form-control" id="campoDescripcionDelRecurso" rows="3"></textarea>
                                        <div class="invalid-feedback" id="validacionCampoDescripcionDelRecurso">

                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-aspen" onclick="agregarCamposDelRecurso()"> Agregar Recurso</button>
                                </fieldset>

                                <div class="dt-responsive table-responsive">
                                    <table class="table table-bordered" role="grid" aria-describedby="base-style_info" id="tabla-recursos">
                                        <thead>
                                            <tr role="row">
                                                <th colspan="6" class="text-center">RECURSOS NUEVOS </th>
                                            </tr>
                                            <tr role="row">
                                                <th>#</th>
                                                <th>Tipo Recurso</th>
                                                <th>Nombre del Recurso</th>
                                                <th>Unidad de Medición</th>
                                                <th>Descripción</th>
                                                <th>Acción</th>
                                            </tr>
                                        </thead>
                                        <tbody id="registrosDeRecursos">
                                            <tr id="recursosNoDisponibleEnLaTabla">
                                                <td colspan="6" class="text-center">No hay recursos disponibles en la tabla</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <input type="hidden" id="registrosRecursos" name="registros_recursos" value="{{ old('registros_recursos', '[]') }}">
                            @endif

                            <div class="form-group">
                                <label for="descripcion">Descripción</label>
                                <textarea class="form-control" name="descripcion" rows="3" readonly="true">{{ old('descripcion', $contrato->descripcion) }}</textarea>
                            </div>

                        </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 Contrato </button>
                            <a href="{{ route('contrato.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') }}">
@stop

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

    @if (Gate::check('contrato.edit-recursos'))
        <script>
            function EnviarCamposParaProcesarlo() {
                let registrosDeRecursosRegistrados = [];
                let filasRecursosRegistrados = document.getElementById('tabla-recursos-registrados').tBodies[0].querySelectorAll("tr");
                filasRecursosRegistrados.forEach(filaRecurso => {
                    if (filaRecurso.querySelector(".tabla-contador-recursos-registrado")) {
                        let tipoRecurso = filaRecurso.querySelector(".tabla-tipo-recursos-registrado").innerHTML.trim();
                        let nombreRecurso = filaRecurso.querySelector(".tabla-nombre-recursos-registrado").innerHTML.trim();
                        let unidadMedicionRecurso = filaRecurso.querySelector(".tabla-unidad-medicion-recursos-registrado").innerHTML.trim();
                        let descripcionRecurso = filaRecurso.querySelector(".tabla-descripcion-recursos-registrado").innerHTML.trim();
                        let tipoAccion = filaRecurso.querySelector(".tabla-tipo-accion-recursos-registrado").innerHTML.trim();
                        let idRecurso = filaRecurso.querySelector(".tabla-id-recursos-registrado").innerHTML.trim();

                        let objectoRecursoRegistrado = {
                            tipoRecurso: tipoRecurso,
                            nombreRecurso: nombreRecurso,
                            unidadMedicionRecurso: unidadMedicionRecurso,
                            descripcionRecurso: descripcionRecurso,
                            tipoAccion: tipoAccion,
                            idRecurso: idRecurso
                        };

                        registrosDeRecursosRegistrados.push(objectoRecursoRegistrado);
                    }
                });
                registrosDeRecursosRegistrados = JSON.stringify(registrosDeRecursosRegistrados);

                let registrosDeRecursos = [];
                let filasRecursos = document.getElementById('tabla-recursos').tBodies[0].querySelectorAll("tr");
                filasRecursos.forEach(filaRecurso => {
                    if (filaRecurso.querySelector(".tabla-contador-recursos")) {
                        let tipoRecurso = filaRecurso.querySelector(".tabla-tipo-recurso-recursos").innerHTML.trim();
                        let nombreRecurso = filaRecurso.querySelector(".tabla-nombre-recurso-recursos").innerHTML.trim();
                        let unidadDeMedidaRecurso = filaRecurso.querySelector(".tabla-unidad-medicion-recursos").innerHTML.trim();
                        let descripcionRecurso = filaRecurso.querySelector(".tabla-descripcion-recursos").innerHTML.trim();

                        let objectoRecurso = {
                            tipoRecurso: tipoRecurso,
                            nombreRecurso: nombreRecurso,
                            unidadDeMedidaRecurso: unidadDeMedidaRecurso,
                            descripcionRecurso: descripcionRecurso
                        };

                        registrosDeRecursos.push(objectoRecurso);
                    }
                });
                registrosDeRecursos = JSON.stringify(registrosDeRecursos);
                document.getElementById("registrosRecursos").value = registrosDeRecursos;
                document.getElementById("registrosRecursosRegistrados").value = registrosDeRecursosRegistrados;

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

            let cantidadMaximaDeRegistrosDeRecursos = 0;
            let registrosDeRecursosOld = JSON.parse(document.getElementById("registrosRecursos").value);
            if (registrosDeRecursosOld.length > 0) {
                registrosDeRecursosOld.forEach(elemento => {
                    cantidadMaximaDeRegistrosDeRecursos++;
                    if (document.getElementById("recursosNoDisponibleEnLaTabla")) {
                        document.getElementById("recursosNoDisponibleEnLaTabla").remove();
                    }
                    document.getElementById("registrosDeRecursos").innerHTML +=
                        '<tr role="row" class="odd">' +
                        '<td class="tabla-contador-recursos">' + cantidadMaximaDeRegistrosDeRecursos + '</td>' +
                        '<td class="tabla-tipo-recurso-recursos">' + elemento.tipoRecurso + '</td>' +
                        '<td class="tabla-nombre-recurso-recursos">' + elemento.nombreRecurso + '</td>' +
                        '<td class="tabla-unidad-medicion-recursos">' + elemento.unidadDeMedidaRecurso + '</td>' +
                        '<td class="tabla-descripcion-recursos">' + elemento.descripcionRecurso + '</td>' +
                        '<td class="tabla-accion-recursos">' +
                        '<button onclick="habilitarBotonConfirmarEliminacionDelRecurso(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                        '<button onclick="eliminarFilaDelRecurso(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-recurso mr-1">Confirmar</button>' +
                        '</td>' +
                        '</tr>';
                });
            }

            function removerRecursoRegistrado(filaRecurso) {
                filaRecurso.querySelector(".tabla-tipo-accion-recursos-registrado").innerHTML = 'Remover';
                filaRecurso.querySelector(".tabla-estado-recursos-registrado").innerHTML = '<span class="badge badge-danger">Removido</span>';
                filaRecurso.querySelector(".tabla-observacion-recursos-registrado").innerHTML = " El recurso será removida de la plataforma cuando se edite la información del contrato.";

                filaRecurso.querySelector(".tabla-accion-recursos-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="cancelarRemoverRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-times-circle" aria-hidden="true"></i> Cancelar La Remoción Del Recurso</a>' +
                    '</div>' +
                    '</div>';
            }

            function cancelarRemoverRecursoRegistrado(filaRecurso) {
                if (filaRecurso.querySelector(".tabla-estado-oculto-recursos-registrado").innerHTML == "Operativo") {
                    filaRecurso.querySelector(".tabla-tipo-accion-recursos-registrado").innerHTML = 'Operativo';
                    filaRecurso.querySelector(".tabla-estado-recursos-registrado").innerHTML = '<span class="badge badge-success">Operativo</span>';
                    filaRecurso.querySelector(".tabla-observacion-recursos-registrado").innerHTML = "El recurso se encuentra registrado en base de datos y se puede utilizar en las órdenes de trabajos.";

                    filaRecurso.querySelector(".tabla-accion-recursos-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="deshabilitarRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock" aria-hidden="true"></i> Deshabilitar Recurso</a>' +
                        '<a class="dropdown-item" href="#" onclick="removerRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Recurso</a>' +
                        '</div>' +
                        '</div>';
                } else if (filaRecurso.querySelector(".tabla-estado-oculto-recursos-registrado").innerHTML == "Inactivo") {
                    filaRecurso.querySelector(".tabla-tipo-accion-recursos-registrado").innerHTML = 'Inactivo';
                    filaRecurso.querySelector(".tabla-estado-recursos-registrado").innerHTML = '<span class="badge badge-danger">Inactivo</span>';
                    filaRecurso.querySelector(".tabla-observacion-recursos-registrado").innerHTML = "El recurso se encuentra registrado en base de datos y no puede utilizarse en las órdenes de trabajos.";

                    filaRecurso.querySelector(".tabla-accion-recursos-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="habilitarRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock-open" aria-hidden="true"></i> Habilitar Recurso</a>' +
                        '<a class="dropdown-item" href="#" onclick="removerRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Recurso</a>' +
                        '</div>' +
                        '</div>';
                }
            }

            function deshabilitarRecursoRegistrado(filaRecurso) {
                filaRecurso.querySelector(".tabla-tipo-accion-recursos-registrado").innerHTML = 'Inactivo';
                filaRecurso.querySelector(".tabla-estado-recursos-registrado").innerHTML = '<span class="badge badge-danger">Inactivo</span>';
                filaRecurso.querySelector(".tabla-observacion-recursos-registrado").innerHTML = "El recurso se encuentra registrado en base de datos y no puede utilizarse en las órdenes de trabajos.";

                filaRecurso.querySelector(".tabla-accion-recursos-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="habilitarRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock-open" aria-hidden="true"></i> Habilitar Recurso</a>' +
                    '<a class="dropdown-item" href="#" onclick="removerRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Recurso</a>' +
                    '</div>' +
                    '</div>';
            }

            function habilitarRecursoRegistrado(filaRecurso) {
                filaRecurso.querySelector(".tabla-tipo-accion-recursos-registrado").innerHTML = 'Operativo';
                filaRecurso.querySelector(".tabla-estado-recursos-registrado").innerHTML = '<span class="badge badge-success">Operativo</span>';
                filaRecurso.querySelector(".tabla-observacion-recursos-registrado").innerHTML = "El recurso se encuentra registrado en base de datos y se puede utilizar en las órdenes de trabajos. ";

                filaRecurso.querySelector(".tabla-accion-recursos-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="deshabilitarRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-lock" aria-hidden="true"></i> Deshabilitar Recurso</a>' +
                    '<a class="dropdown-item" href="#" onclick="removerRecursoRegistrado(this.parentElement.parentElement.parentElement.parentElement)"><i class="fas fa-trash" aria-hidden="true"></i> Remover Recurso</a>' +
                    '</div>' +
                    '</div>';
            }

            function seleccionarTodosLosItems(checkbox) {
                if (checkbox.checked == true) {
                    let todosLosCheckBox = document.querySelectorAll(".checkbox-seleccion-item");
                    todosLosCheckBox.forEach(item => {
                        item.checked = true;
                    });
                } else if (checkbox.checked == false) {
                    let todosLosCheckBox = document.querySelectorAll(".checkbox-seleccion-item");
                    todosLosCheckBox.forEach(item => {
                        item.checked = false;
                    });
                }
            }

            function agregarCamposDelRecurso() {
                let campoTipoDelRecurso = document.getElementById("campoTipoDelRecurso").value.trim();
                let campoNombreDelRecurso = document.getElementById("campoNombreDelRecurso").value.trim();
                let campoUnidadDeMedicion = document.getElementById("campoUnidadDeMedicionDelRecurso").value.trim();
                let campoNombreUnidadDeMedicion = document.getElementById("campoUnidadDeMedicionDelRecurso").options[document.getElementById("campoUnidadDeMedicionDelRecurso").selectedIndex].text;
                let campoDescripcionDelRecurso = document.getElementById("campoDescripcionDelRecurso").value.trim();
                if (campoTipoDelRecurso.length > 0 && campoNombreDelRecurso.length > 0 && campoUnidadDeMedicion.length > 0 && campoDescripcionDelRecurso.length > 0) {
                    cantidadMaximaDeRegistrosDeRecursos++;
                    if (document.getElementById("recursosNoDisponibleEnLaTabla")) {
                        document.getElementById("recursosNoDisponibleEnLaTabla").remove();
                    }
                    document.getElementById("registrosDeRecursos").innerHTML +=
                        '<tr role="row" class="odd">' +
                        '<td class="tabla-unidad-medicion-recursos" style="display:none;">' + campoUnidadDeMedicion + '</td>' +
                        '<td class="tabla-contador-recursos">' + cantidadMaximaDeRegistrosDeRecursos + '</td>' +
                        '<td class="tabla-tipo-recurso-recursos">' + campoTipoDelRecurso + '</td>' +
                        '<td class="tabla-nombre-recurso-recursos">' + campoNombreDelRecurso + '</td>' +
                        '<td class="tabla-nombre-unidad-medicion-recursos">' + campoNombreUnidadDeMedicion + '</td>' +
                        '<td class="tabla-descripcion-recursos">' + campoDescripcionDelRecurso + '</td>' +
                        '<td class="tabla-accion-recursos">' +
                        '<button onclick="habilitarBotonConfirmarEliminacionDelRecurso(this)" type="button" class="btn btn-danger mr-1"><i class="fas fa-trash-alt"></i></button>' +
                        '<button onclick="eliminarFilaDelRecurso(this)" style="display: none;" type="button" class="btn btn-danger boton-confirmar-recurso mr-1">Confirmar</button>' +
                        '</td>' +
                        '</tr>';

                    $('#campoTipoDelRecurso').selectpicker('val', "");
                    document.getElementById("validacionCampoTipoDelRecurso").innerHTML = "";
                    document.getElementById("campoTipoDelRecurso").classList.remove('input-success-icon');
                    document.getElementById("campoTipoDelRecurso").classList.remove('input-error-icon');
                    document.getElementById("validacionCampoTipoDelRecurso").style.display = "none";

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

                    $('#campoUnidadDeMedicionDelRecurso').selectpicker('val', "");
                    document.getElementById("validacionCampoUnidadDeMedicionDelRecurso").innerHTML = "";
                    document.getElementById("campoUnidadDeMedicionDelRecurso").classList.remove('input-success-icon');
                    document.getElementById("campoUnidadDeMedicionDelRecurso").classList.remove('input-error-icon');
                    document.getElementById("validacionCampoUnidadDeMedicionDelRecurso").style.display = "none";

                    document.getElementById("campoDescripcionDelRecurso").value = "";
                    document.getElementById("validacionCampoDescripcionDelRecurso").innerHTML = "";
                    document.getElementById("campoDescripcionDelRecurso").setAttribute("class", "form-control");
                } else {
                    if (campoTipoDelRecurso.length > 0) {
                        document.getElementById("campoTipoDelRecurso").classList.remove('input-error-icon');
                        document.getElementById("campoTipoDelRecurso").classList.add('input-success-icon');
                        document.getElementById("validacionCampoTipoDelRecurso").innerHTML = "";
                        document.getElementById("validacionCampoTipoDelRecurso").style.display = "none";
                    } else {
                        document.getElementById("campoTipoDelRecurso").classList.remove('input-success-icon');
                        document.getElementById("campoTipoDelRecurso").classList.add('input-error-icon');
                        document.getElementById("validacionCampoTipoDelRecurso").innerHTML = "El campo tipo del recurso es obligatorio";
                        document.getElementById("validacionCampoTipoDelRecurso").style.display = "block";
                    }

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

                    if (campoUnidadDeMedicion.length > 0) {
                        document.getElementById("campoUnidadDeMedicionDelRecurso").classList.remove('input-error-icon');
                        document.getElementById("campoUnidadDeMedicionDelRecurso").classList.add('input-success-icon');
                        document.getElementById("validacionCampoUnidadDeMedicionDelRecurso").innerHTML = "";
                        document.getElementById("validacionCampoUnidadDeMedicionDelRecurso").style.display = "none";
                    } else {
                        document.getElementById("campoUnidadDeMedicionDelRecurso").classList.remove('input-success-icon');
                        document.getElementById("campoUnidadDeMedicionDelRecurso").classList.add('input-error-icon');
                        document.getElementById("validacionCampoUnidadDeMedicionDelRecurso").innerHTML = "El campo unidad de medición del recurso es obligatorio";
                        document.getElementById("validacionCampoUnidadDeMedicionDelRecurso").style.display = "block";
                    }

                    if (campoDescripcionDelRecurso.length > 0) {
                        document.getElementById("campoDescripcionDelRecurso").setAttribute("class", "form-control is-valid");
                        document.getElementById("validacionCampoDescripcionDelRecurso").innerHTML = "";
                    } else {
                        document.getElementById("campoDescripcionDelRecurso").setAttribute("class", "form-control is-invalid");
                        document.getElementById("validacionCampoDescripcionDelRecurso").innerHTML = "El campo descripción del recurso es obligatorio";
                    }
                }
            }

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

            function habilitarBotonConfirmarEliminacionDelRecurso(boton) {

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

            }

            function eliminarFilaDelRecurso(boton) {
                let elementoFila = boton.parentElement.parentElement;
                elementoFila.remove();
                cantidadMaximaDeRegistrosDeRecursos = 0;
                let filas = document.getElementById('tabla-recursos').tBodies[0].querySelectorAll("tr");
                if (filas.length > 0) {
                    filas.forEach(elemento => {
                        cantidadMaximaDeRegistrosDeRecursos++;
                        elemento.querySelector(".tabla-contador-recursos").innerHTML = cantidadMaximaDeRegistrosDeRecursos;
                    });
                } else {
                    document.getElementById("registrosDeRecursos").innerHTML =
                        '<tr id="recursosNoDisponibleEnLaTabla">' +
                        '<td colspan="6" class="text-center">No hay recursos 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("formularioDeContrato").submit();
            }

            function seleccionarTodosLosItems(checkbox) {
                if (checkbox.checked == true) {
                    let todosLosCheckBox = document.querySelectorAll(".checkbox-seleccion-item");
                    todosLosCheckBox.forEach(item => {
                        item.checked = true;
                    });
                } else if (checkbox.checked == false) {
                    let todosLosCheckBox = document.querySelectorAll(".checkbox-seleccion-item");
                    todosLosCheckBox.forEach(item => {
                        item.checked = false;
                    });
                }
            }
        </script>
    @endif

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