@extends('layouts.dashboard')

@section('dashboard')
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Parametros Empresa</strong></li>
    </ul>
    <h1 class="titulo-h1 mb-4">Parametros Empresa</h1>
    <ul class="nav nav-tabs text-uppercase text-center no-gutters border-bottom" id="tab-principal" role="tablist">
        <li class="nav-item">
            <a class="nav-link active show" id="info-holding-tab" data-toggle="tab" href="#info-holding" role="tab"
                aria-controls="info-holding" aria-selected="true">Holding</a>
        </li>
    </ul>
    <div id="msje-formulario"></div>
    <div class="tab-content form-registro" id="content-principal">
        <div class="tab-pane fade active show" id="info-holding" role="tabpanel" aria-labelledby="info-holding-tab">
            <div class="row">
                <div class="col-md">
                    <div class="card h-100">
                        <form class="card-body form-registro" method="POST" action="{{ route('crear-holding') }}"
                            id="form-holding" onsubmit="return crearEditarHolding(this.id)">
                            {{ csrf_field() }}
                            <div class="row align-items-center form-group">
                                <label for="nombre-holding" class="col mb-0">Nombre Holding</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control form-control-sm border" id="nombre-holding"
                                        name="nombre_holding" required="required">
                                </div>
                            </div>
                            <div class="row align-items-center form-group">
                                <label class="col mb-0">RUT Empresa</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control form-control-sm border input-rut"
                                        name="rut_empresa" onkeypress="buscarEmpresasRut(event, this.value)">
                                </div>
                            </div>
                            <div class="row align-items-center form-group">
                                <div class="col-md-10 offset-2">
                                    <ul class="pl-3 mb-0" id="list-empresas-rut"></ul>
                                </div>
                            </div>
                            <div class="text-right">
                                <a href="{{ URL::current() }}" class="btn btn-blanco btn-sm mr-3">Cancelar</a>
                                <button type="submit" class="btn btn-primary btn-sm blq-btn"><i class="fa fa-floppy-o"></i>
                                    Crear Holding</button>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md">
                    <div class="card form-registro h-100" id="tabla-holding">
                        @include('dashboard.parametros.holding.table-holding')
                    </div>
                </div>
            </div>
        </div>
        <div class="card form-registro mt-4" id="tabla-usuarios-holding"></div>
    </div>
@endsection


@section('scripts')
    <script>
        function validarFormularioHolding(id) {
            let nombre = document.querySelector('#' + id + ' #nombre-holding').value;
            let empresas = document.querySelectorAll('#' + id + ' .input-empresa').length;

            if (!nombre) {
                simpleAlert('Por favor, ingrese el nombre del holding');
                return false;
            }

            if (empresas == 0) {
                simpleAlert('Por favor, ingrese empresas al holding');
                return false;
            }

            return true;
        }

        function validarFormularioUsuarioHolding(id) {
            let usuario = document.querySelector('#' + id + ' .input-usuario').value;
            let empresaActiva = document.querySelector('#' + id + ' .input-empresa-activa').value;
            let empresaHermana = document.querySelector('#' + id + ' .input-empresa-hermana').value;
            let permiso = document.querySelector('#' + id + ' .input-permiso').value;

            if (!usuario) {
                simpleAlert('Por favor, ingrese usuario al holding');
                return false;
            }
            if (!empresaActiva) {
                simpleAlert('Por favor, ingrese empresa activa al holding');
                return false;
            }
            if (!empresaHermana) {
                simpleAlert('Por favor, ingrese empresa hermana al holding');
                return false;
            }
            if (empresaActiva == empresaHermana) {
                simpleAlert('La empresa activa y hermana no pueden ser las mismas');
                return false;
            }
            if (!permiso) {
                simpleAlert('Por favor, ingrese permiso al holding');
                return false;
            }

            return true;
        }

        function crearEditarHolding(id) {
            var form = document.getElementById(id);
            var divMensajes = document.getElementById('msje-formulario');
            var action = form.getAttribute('action');
            if (!validarFormularioHolding(id)) {
                return false;
            }

            let formData = new FormData(form);

            fetch(action, {
                    method: 'POST',
                    body: formData,
                })
                .then(response => response.json())
                .then(data => {

                    if (data.errors) {
                        divMensajes.innerHTML =
                            '<div class="alert alert-danger mt-4">' + mostrarErrores(data.errors) + '</div>';
                    }

                    if (data.success) {
                        divMensajes.innerHTML =
                            '<div class="alert alert-success mt-4">' + data.success + '</div>';
                        mostrarTablaHolding();
                        mostrarTablaUsuariosHolding(data.id);
                    }

                    resetearFormularioHolding(form);
                    setTimeout(function() {
                        divMensajes.innerHTML = '';
                    }, 6000);
                })
                .catch(error => {
                    if (error.errors) {
                        console.log(error.errors);
                        divMensajes.innerHTML =
                            '<div class="alert alert-danger mt-4">' + error.errors + '</div>';
                    }
                });

            return false;
        }

        function eliminarHolding(holdingId, id) {
            confirmAlert('¿Desea eliminar el holding?', function() {
                var divMensajes = document.getElementById('msje-formulario');
                fetch('{{ route('eliminar-holding') }}', {
                        method: 'POST',
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            holding: holdingId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            delFila(id);
                            var element = document.getElementById('usuarios-holding-' + holdingId);
                            if (element) {
                                element.remove();
                            }
                            divMensajes.innerHTML =
                                '<div class="alert alert-success mt-4">' + data.success + '</div>';
                        }
                    })
                    .catch(error => {});
            });
        }

        function crearUsuariosHolding(id) {
            var form = document.getElementById(id);
            var divMensajes = document.getElementById('msje-formulario');
            var action = form.getAttribute('action');
            if (!validarFormularioUsuariosHolding(id)) {
                return false;
            }

            let formData = new FormData(form);

            fetch(action, {
                    method: 'POST',
                    body: formData,
                })
                .then(response => response.json())
                .then(data => {
                    if (data.errors) {
                        divMensajes.innerHTML =
                            '<div class="alert alert-danger mt-4">' + mostrarErrores(data.errors) + '</div>';
                    }
                    if (data.success) {
                        divMensajes.innerHTML =
                            '<div class="alert alert-success mt-4">' + data.success + '</div>';
                        mostrarTablaHolding();
                        cargarUsuariosHolding(data.id);
                    }

                    setTimeout(function() {
                        divMensajes.innerHTML = '';
                    }, 6000);
                })
                .catch(error => {
                    if (error.errors) {
                        console.log(error.errors);
                        divMensajes.innerHTML =
                            '<div class="alert alert-danger mt-4">' + error.errors + '</div>';
                    }
                });

            return false;
        }

        function buscarEmpresasRut(event, rut) {
            if (event.keyCode == 13) {
                fetch('{{ route('buscar-empresas-rut') }}', {
                        method: 'POST',
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            rut: rut
                        })
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Hubo un problema al buscar empresas por rut');
                        }
                        return response.text();
                    })
                    .then(data => {
                        if (data.trim() != '') {
                            document.getElementById('list-empresas-rut').insertAdjacentHTML('beforeend', data);
                        } else {
                            simpleAlert('No se encontró empresa con el rut indicado');
                        }
                    })
                    .catch(error => {});

            }
        }

        function mostrarTablaHolding() {
            fetch('{{ route('listar-holding') }}')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Hubo un problema al obtener los holdigns');
                    }
                    return response.text();
                })
                .then(data => {
                    document.getElementById('tabla-holding').innerHTML = data;
                })
                .catch(error => {});
        }

        function agregarUsuarioHolding(url) {
            fetch(url)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Hubo un problema al obtener los holdigns');
                    }
                    return response.text();
                })
                .then(data => {
                    document.querySelector('#tabla-usuarios-holding tbody').insertAdjacentHTML('beforeend', data);
                    document.querySelectorAll('.table .select2').forEach(element => {
                        $(element).select2();
                    });
                })
                .catch(error => {});
        }

        function mostrarTablaUsuariosHolding(holdingId) {
            fetch('{{ route('listar-usuarios-holding') }}', {
                    method: 'POST',
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        holding: holdingId
                    })
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Hubo un problema al obtener los usuarios del holding');
                    }
                    return response.text();
                })
                .then(data => {
                    document.getElementById('tabla-usuarios-holding').innerHTML = data;
                    document.querySelectorAll('.table .select2').forEach(element => {
                        $(element).select2();
                    });
                })
                .catch(error => {});

            return false;
        }

        function cargarDatosHolding(holdingId) {
            fetch('{{ route('cargar-datos-holding') }}', {
                    method: 'POST',
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}"
                    },
                    body: JSON.stringify({
                        holding: holdingId
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.querySelector('#form-holding [name=nombre_holding]').value = data.holding
                            .holding_nombre;
                        document.querySelector('#form-holding #list-empresas-rut').innerHTML = data.empresas;
                        document.getElementById('form-holding').setAttribute('action', data.action);
                        document.querySelector('#form-holding button[type=submit]').innerHTML =
                            '<i class="fa fa-pencil"></i> Editar Holding';
                    }
                })
                .catch(error => {});

            return false;
        }

        function crearEditarUsuarioHolding(action, rowId) {
            if (!validarFormularioUsuarioHolding(rowId)) {
                return false;
            }

            var row = document.getElementById(rowId);
            var divMensajes = document.getElementById('msje-formulario');

            var formData = new FormData();
            row.querySelectorAll('select, input').forEach(function(element) {
                formData.append(element.name, element.value);
            });

            fetch(action, {
                    method: 'POST',
                    body: formData,
                })
                .then(response => response.json())
                .then(data => {
                    if (data.errors) {
                        divMensajes.innerHTML =
                            '<div class="alert alert-danger mt-4">' + mostrarErrores(data.errors) + '</div>';
                    }
                    if (data.success) {
                        divMensajes.innerHTML =
                            '<div class="alert alert-success mt-4">' + data.success + '</div>';
                        if (data.usuario) {
                            $('#tabla-usuarios-holding tbody #' + rowId).replaceWith(data.usuario);
                            document.querySelectorAll('.table .select2').forEach(element => {
                                $(element).select2();
                            });
                        }
                    }

                    setTimeout(function() {
                        divMensajes.innerHTML = '';
                    }, 6000);
                })
                .catch(error => {
                    if (error.errors) {
                        divMensajes.innerHTML =
                            '<div class="alert alert-danger mt-4">' + error.errors + '</div>';
                    }
                });

            return false;
        }

        function eliminarUsuarioHolding(holdingUsuarioId, id) {
            confirmAlert('¿Desea eliminar el usuario del holding?', function() {
                var divMensajes = document.getElementById('msje-formulario');
                fetch('{{ route('eliminar-usuario-holding') }}', {
                        method: 'POST',
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            holding_usuario: holdingUsuarioId
                        })
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            delFila(id);
                            divMensajes.innerHTML =
                                '<div class="alert alert-success mt-4">' + data.success + '</div>';
                        }
                    })
                    .catch(error => {});
            });
        }

        function resetearFormularioHolding(form) {
            form.reset();
            form.setAttribute('action', '{{ route('crear-holding') }}');
            document.getElementById('list-empresas-rut').innerHTML = '';
            document.querySelector('#form-holding button[type=submit]').innerHTML =
                '<i class="fa fa-floppy-o"></i> Crear Holding';
        }

        function mostrarErrores(errors) {
            if (typeof errors === "string") {
                return errors;
            }

            let errorList = '<ul class="">';
            for (const [index, error] of Object.entries(errors)) {
                errorList +=
                    `<li><strong>${index.charAt(0).toUpperCase().replace('_', ' ') + index.slice(1).replace('_', ' ')}:</strong> ${error}</li>`;
            }
            errorList += '</ul>';

            return errorList;
        }
    </script>
@endsection