@extends('layout.backoffice')
@section('content')

    <script>
        var dataJsonEntrenamiento = {};
        var dataMetaEntrenamiento = {};
        var bloquearVerificacionPorCargaJson = false;
        var bloquearVerificacionPorCargaMeta = false;
    </script>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Scrapper Power Price</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8 ">
                            <iframe onload="chargeIframe()" class="full-screen-preview__frame" id="visual-editor" src=""></iframe>
                        </div>
                        <div class="col-md-4">
                            <div class="col-12">
                                <div class="card card-primary card-outline card-outline-tabs">
                                    <div class="card-header p-0 border-bottom-0">
                                        <ul class="nav nav-tabs" role="tablist">
                                            <li class="nav-item">
                                                <a class="nav-link active" id="scrapper-tab-entrenamiento-tab" data-toggle="pill" href="#scrapper-tab-entrenamiento" role="tab" aria-controls="scrapper-tab-entrenamiento" aria-selected="true">Entrenamiento</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" id="scrapper-tab-pruebas-tab" data-toggle="pill" href="#scrapper-tab-pruebas" role="tab" aria-controls="scrapper-tab-pruebas" aria-selected="false">Pruebas</a>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="card-body">
                                        <div class="tab-content" id="scrapper-tab">
                                            <div class="tab-pane fade show active" id="scrapper-tab-entrenamiento" role="tabpanel" aria-labelledby="scrapper-tab-entrenamiento-tab">

                                                <form id="form-entrenar">
                                                    <div class="form-group d-flex">
                                                        <div class="col">
                                                            <label class="label">NOMBRE</label>
                                                            <div class="row">
                                                                <input class="form-control form-control-border border-width-2 system_validador_vacio" name="nombre" type="text">
                                                            </div>
                                                        </div>
                                                        <div class="ml-2 col">
                                                            <label class="label">CÓDIGO</label>
                                                            <div class="row">
                                                                <input class="form-control form-control-border border-width-2 system_validador_vacio" name="codigo" type="text">
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div class="form-group">
                                                                <div class="custom-control custom-switch">
                                                                    <input name="enablejs" type="checkbox" class="custom-control-input" id="customSwitch1">
                                                                    <label class="custom-control-label" for="customSwitch1">JS</label>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="label">HORAS PROGRAMADAS (Rangos de horas en el que se ejecutará el rastreador)</label>
                                                        <div class="nodo-cron mt-2">
                                                            <div class="row">
                                                                <label for="">Nodo 1</label>
                                                            </div>
                                                            <div class="row">
                                                                <input type="text" placeholder="Nombre" class="cron-name col-4 mr-2 form-control form-control-border border-width-2" name="cron[nodo0][nombre]">
                                                                <input placeholder="hora" min="2" max="23" class="cron-time col-4 mr-2 form-control form-control-border border-width-2" name="cron[nodo0][hora]" type="number">
                                                            </div>
                                                        </div>
                                                        <div class="nodo-cron mt-2">
                                                            <div class="row">
                                                                <label for="">Nodo 2</label>
                                                            </div>
                                                            <div class="form-group d-flex flex-row">
                                                                <input type="text" placeholder="Nombre" class="cron-name col-4 mr-2 form-control form-control-border border-width-2" name="cron[nodo1][nombre]">
                                                                <input placeholder="hora" min="2" max="23" class="cron-time col-4 mr-2 form-control form-control-border border-width-2" name="cron[nodo1][hora]" type="number">
                                                            </div>
                                                        </div>
                                                        <div class="nodo-cron mt-2">
                                                            <div class="row">
                                                                <label for="">Nodo 3</label>
                                                            </div>
                                                            <div class="form-group d-flex flex-row">
                                                                <input type="text" placeholder="Nombre" class="cron-name col-4 mr-2 form-control form-control-border border-width-2" name="cron[nodo2][nombre]">
                                                                <input placeholder="hora" min="2" max="23" class="cron-time col-4 mr-2 form-control form-control-border border-width-2" name="cron[nodo2][hora]" type="number">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="label">URL</label>
                                                        <div class="row">
                                                            <input class="url_choice col-10 form-control form-control-border border-width-2 system_validador_vacio" name="url" type="text">
                                                            <button type="button" class="btn-cargar col-2 btn btn-default"><i class="fa-solid fa-upload"></i></button>
                                                        </div>
                                                    </div>

                                                    <ul class="nav nav-tabs" role="tablist">
                                                        <li class="nav-item">
                                                            <a class="nav-link active" id="entrenamiento-tab-json" data-toggle="pill" href="#tab-entrenamiento-json" role="tab" aria-controls="entrenamiento-tab-jso" aria-selected="true">Json</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" id="entrenamiento-tab-metadata" data-toggle="pill" href="#tab-entrenamiento-metadata" role="tab" aria-controls="entrenamiento-tab-metadata" aria-selected="false">MetaData</a>
                                                        </li>
                                                        <li class="nav-item">
                                                            <a class="nav-link" id="entrenamiento-tab-manual" data-toggle="pill" href="#tab-entrenamiento-manual" role="tab" aria-controls="entrenamiento-tab-manual" aria-selected="false">Manual</a>
                                                        </li>
                                                    </ul>

                                                    <div class="tab-content">
                                                        <div class="tab-pane fade pt-3 show active" id="tab-entrenamiento-json" role="tabpanel" aria-labelledby="tab-entrenamiento-json">
                                                            @include('page.rastreadores.scrapper.entrenamiento.json')
                                                        </div>
                                                        <div class="tab-pane fade pt-3" id="tab-entrenamiento-metadata" role="tabpanel" aria-labelledby="tab-entrenamiento-metadata">
                                                            @include('page.rastreadores.scrapper.entrenamiento.meta')
                                                        </div>
                                                        <div class="tab-pane fade pt-3" id="tab-entrenamiento-manual" role="tabpanel" aria-labelledby="tab-entrenamiento-manual">
                                                            @include('page.rastreadores.scrapper.entrenamiento.manual')
                                                        </div>
                                                    </div>

                                                    <div class="row">
                                                        <div class="col-3">
                                                            <button type="button" id="btn-entrenar" class="btn btn-success">Entrenar</button>
                                                        </div>
                                                    </div>
                                                </form>


                                            </div>

                                            <div class="tab-pane fade" id="scrapper-tab-pruebas" role="tabpanel" aria-labelledby="scrapper-tab-pruebas-tab">
                                                <div class="form-group">
                                                    <label class="label">URL</label>
                                                    <div class="row">
                                                        <input class="url_choice col-10 form-control form-control-border border-width-2 system_validador_vacio" name="url" type="text">
                                                        <button data-function="pruebas" type="button" class="btn-cargar col-2 btn btn-default"><i class="fa-solid fa-upload"></i></button>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="label">Titulo</label>
                                                        <textarea id="titulo_resultado" disabled class="input-realdata form-control  border-width-2" name="titulo" rows="2"></textarea>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="label">Precio</label>
                                                        <textarea id="precio_resultado" disabled class="input-realdata form-control border-width-2" name="precio" rows="2"></textarea>
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <div class="row">
                                                        <label class="label">En inventario</label>
                                                        <textarea id="inventario_resultado" disabled class="input-realdata form-control border-width-2" name="inventario" rows="2"></textarea>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var datosCargados = false;
        var domain = ''

        const calcHeight = () => {
            jQuery('.full-screen-preview__frame').height(jQuery(window).height() - jQuery(window).height() * .2);
        }

        jQuery(document).ready(function () {
            calcHeight();
        });
        jQuery(window).resize(function () {
            calcHeight();
        });

        jQuery('.cron-name').on('change', function () {
            if (jQuery(this).val() !== '') {
                jQuery(this).next().addClass('system_validador_vacio')
            } else {
                jQuery(this).next().removeClass('system_validador_vacio')
            }
        })

        jQuery('.btn-cargar').on('click', async function () {
            let url = jQuery(this).parent().find('.url_choice').val();
            if (jQuery(this).data('function') === "pruebas") {
                Mostrarloader();
                const respuesta = await axios.post('scrapper/rastreo', {url});
                Ocultarloader();
                Swal.fire('Cargando datos, verifiquelos, si están mal por favor volver a entrenar el sitio')
                if (!respuesta.error) {
                    if (!respuesta.data.error) {
                        const {
                            titulo,
                            precio,
                            precio_oferta,
                            inventario
                        } = respuesta.data.data;
                        jQuery('#titulo_resultado').val(titulo);
                        jQuery('#precio_resultado').val(precio);
                        jQuery('#precio_oferta_resultado').val(precio_oferta);
                        jQuery('#inventario_resultado').val(inventario === 1 ? 'Si' : 'No');
                    } else {
                        Swal.fire(respuesta.data.mensaje)
                    }
                }
            } else {
                await cargarDatosSitio(url);
                setUrlIframe(url)
            }
        })

        const cargarDatosSitio = async (url) => {
            const visualEditorUrl = jQuery('#visual-editor').attr('src');
            const urlFormat = new URL(url);
            let domain = urlFormat.hostname;

            if (!visualEditorUrl.includes(domain)) {
                jQuery('#form-entrenar input:not(input[name="url"])').val('').change();
                jQuery('#form-entrenar textarea').val('').change();
                datosCargados = false;
            }
            if (!datosCargados) {
                const consultaDatos = await axios.post('scrapper/consultarSitio', {url})
                const {data, error} = consultaDatos;
                if (!error && !data.error) {
                    datosCargados = true;
                    const {sitio} = data.data;
                    jQuery('input[name="nombre"]').val(sitio.nombre);
                    jQuery('input[name="codigo"]').val(sitio.codigo);
                    jQuery('input[name="enablejs"]').prop('checked', sitio.requiere_renderizar);

                    if (sitio.condicion_busqueda !== '') {
                        const entrenamiento = JSON.parse(sitio.condicion_busqueda);
                        console.log(entrenamiento)
                        const {manual, json, meta, cron} = entrenamiento;

                        for(let nodo in cron){
                            jQuery(`input[name="cron[${nodo}][nombre]"]`).val(cron[nodo].nombre).change();
                            jQuery(`input[name="cron[${nodo}][hora]"]`).val(cron[nodo].hora).change();
                        }

                        if (manual !== undefined) {
                            cargarDatosManuales(manual);
                        }
                        if (json !== undefined) {
                            dataJsonEntrenamiento = json;
                        }

                        if (meta !== undefined) {
                            dataMetaEntrenamiento = meta;
                        }
                    }
                }
            }
        }

        jQuery('#btn-entrenar').on('click', async () => {
            if (system_validarcampos('form-entrenar')) {
                let isError = false;
                jQuery('.cron-time').each(function () {
                    const valorActual = parseInt(jQuery(this).val());
                    const valorSiguiente = parseInt(jQuery(this).next().val());
                    if (Number.isInteger(valorSiguiente)) {
                        if (valorSiguiente - valorActual < 4) {
                            Swal.fire('Las horas programadas deben llevarse 4 horas de diferencia')
                            isError = true;
                        }
                    } else if (valorActual > 24 || valorActual < 1) {
                        Swal.fire('Las horas permitidaas van entre 1 y 24 horas')
                        isError = true;
                    }
                })

                if (!isError) {
                    let disabled = jQuery('#form-entrenar').find(':input:disabled').attr('disabled', false)
                    let respuesta = await axios.post('scrapper/entrenamiento', getDataJson("form-entrenar"));
                    disabled.attr('disabled', true)
                    if (!respuesta.error) {
                        if (!respuesta.data.error) {
                            Swal.fire('Sitio web entrenado correctamene, proceda a realizar pruebas')
                        } else {
                            Swal.fire(respuesta.data.mensaje)
                        }
                    }
                }
            }
        })

        const chargeIframe = () => {
            Mostrarloader();
            jQuery('#visual-editor').contents().children().each(function () {
                addListenertochild(this)
            })

            cargarDataJson();
            cargarDataMeta();

            jQuery('#visual-editor').contents().find('body').append(`
                <style>
                [personalvll="active"]{
                    background-color: lightblue;
                }
                .vllLLantasColorPerzonalizado2019{
                    background-color: lightblue;
                }
                </style>
            `)

            jQuery('#visual-editor').contents().find('link').each(function () {
                if (jQuery(this).attr('href') !== undefined) {
                    let normal = jQuery(this).attr('href');
                    if (normal.startsWith('/')) {
                        jQuery(this).attr('href', domain + normal);
                    } else if (!normal.startsWith('http')) {
                        jQuery(this).attr('href', domain + '/' + normal);
                    }
                }
            })

            jQuery('#visual-editor').contents().find('script, img').each(function () {
                if (jQuery(this).attr('src') !== undefined) {
                    let normal = jQuery(this).attr('src');
                    if (normal.startsWith('/')) {
                        jQuery(this).attr('src', domain + normal);
                    } else if (!normal.startsWith('http')) {
                        jQuery(this).attr('src', domain + '/' + normal);
                    }
                }
            })
            Ocultarloader();
        }

        const setUrlIframe = (url) => {
            try {
                const enablejs = jQuery('#customSwitch1').prop('checked') === true ? 1 : 0;
                const serverRecurse = `