@extends('adminlte::page')

@section('plugins.Sweetalert2', true)

@section('title', 'Crear 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-8">

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

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

                        <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') }}">
                                @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') }}</textarea>
                                @if ($errors->any())
                                    @error('descripcion')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                @endif
                            </div>

                            <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') }}">
                                @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') }}">
                                @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') }}">
                                @if ($errors->any())
                                    @error('sitio_web')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                @endif
                            </div>

                            @if (Gate::check('empresa.edit-areas'))
                                <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>#</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="botonDeCreacion"><i class="fas fa-plus-circle" style="margin-right: 2px;"></i> Crear 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') }}">
@stop

@section('js')
    @if (Gate::check('empresa.edit-areas'))
        <script>
            function EnviarCamposParaProcesarlo() {
                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("registrosAreaSectores").value = registrosDeAreasSectores;

                document.getElementById("botonDeCreacion").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 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 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 descripción área/sector 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("botonDeCreacion").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 Creada!',
                text: '{{ session('alerta') }}',
                confirmButtonColor: "#448aff",
                confirmButtonText: "Confirmar"
            })
        </script>
    @endif
@stop