<!DOCTYPE html>
<html dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="author" content="Hypeople">
    <meta name="description" content="Responsive, Highly Customizable Dashboard Template" />
    <!-- Plugin -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/plugin/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/colors.css">

    <!-- Base -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/base/typography.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/base/base.css">

    <!-- Theme -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/theme/colors-dark.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/theme/theme-dark.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/custom-rtl.css">

    <!-- Layouts -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/sider.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/header.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/page-content.css">
    <link rel="stylesheet" type="text/css" href="../app-assets/css/components.css">

    <!-- Customizer -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/customizer.css">

    <!-- Pages -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/pages/page-knowledge-base.css">

    <!-- Horizontal -->
    <link rel="stylesheet" type="text/css" href="../app-assets/css/layouts/horizontal-menu.css">

    <!-- Custom -->
    <link rel="stylesheet" type="text/css" href="../assets/css/style.css">

    <title>RPA CLARO</title>
    <style>
        .icono-menu {
            font-size: 1.2em;
        }

        .submenu-item-icon {
            margin-top: 0px;
        }

        p.texto-menu span {
            font-size: 10px;
            display: block;
        }

        p.texto-menu {
            font-weight: bold;
            margin-bottom: 0px;
            line-height: 1em;
            margin-left: 6px;
        }

        span.submenu-item-icon:has(span) {
            display: flex;
        }

        .hp-horizontal-menu ul>li ul li a {
            padding: 10px 14px 8px 10px !important;
        }

        .circle_app {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }

        .no_integrado {
            opacity: 0.6;
            cursor: not-allowed;
        }

        .integrado {
            opacity: 1;
            cursor: pointer;
        }

        .logo {
            width: auto !important;
            height: 60px;
            margin-bottom: 10px;
        }

        .hp-knowledge-basic-card {
            min-height: 160px !important;
        }

        .card-body {
            padding: 14px 11px !important;
        }

        .btn.btn-primary:hover {
            background: #e9484f !important;
            border-color: #e9484f !important;
        }

        .btn-primary {
            color: #fff !important;
            background-color: #ed1b24 !important;
            border-color: #ed1b24 !important;
        }

        .hp-buy-now-btn {
            bottom: 6%;
            right: 32px !important;
        }

        .offcanvas.show {
            background: #f0f3f5 !important;
        }

        #loader {
            background-color: #ffffffd9;
            display: none;
            justify-content: center;
            align-items: center;
            width: 100vw;
            height: 100vh;
            z-index: 999999;
            position: fixed;
            top: 0;
            left: 0;
        }

        .py-sm-64 {
            padding-top: 20px !important;
            padding-bottom: 20px !important;
        }

        @media screen and (max-width: 1199px) {
            .hp-main-layout>header .hp-header-logo {
                display: block !important;
            }
        }

        @media screen and (max-width: 1199px) {
            body.horizontal-active .hp-horizontal-menu {
                display: block !important;
            }
        }
    </style>
</head>

<body class="horizontal-active">
    <div id="loader">
        <div class="col hp-flex-none w-auto">
            <div class="spinner-border text-danger" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </div>
    </div>
    <main class="hp-bg-color-dark-90 d-flex min-vh-100">
        <div class="hp-main-layout hp-main-layout-horizontal">

            <header>
                <div class="row w-100 m-0">
                    <div class="col px-0">
                        <div class="row w-100 align-items-center justify-content-between position-relative">
                            <div
                                class="hp-header-text-info col col-lg-14 col-xl-16 hp-header-start-text d-flex align-items-center hp-horizontal-none">
                                <div class="d-flex overflow-hidden rounded-4 hp-bg-color-black-0 hp-bg-color-dark-100"
                                    style="min-width: 45px; width: 45px; height: 45px;">
                                    <img src="https://yoda.hypeople.studio/yoda-admin-template/app-assets/img/memoji/newspaper.svg"
                                        alt="Newspaper" height="80%" style="margin-top: auto; margin-left: auto;">
                                </div>

                                <p
                                    class="hp-header-start-text-item hp-input-label fw-normal hp-text-color-black-100 hp-text-color-dark-0 ms-12 mb-0 lh-1 d-flex align-items-center">
                                    Do you know the latest update of 2022?&nbsp;&nbsp;
                                    <span class="hp-text-color-primary-1">Our roadmap is alive for future
                                        updates.</span>
                                </p>
                            </div>

                            <div class="hp-horizontal-logo-menu d-flex align-items-center w-auto">
                                <div class="col hp-flex-none w-auto hp-horizontal-block">
                                    <div class="hp-header-logo d-flex align-items-center">
                                        <a class="position-relative">

                                            <img class="hp-logo hp-sidebar-visible hp-dark-none"
                                                src="../assets/img/logo-claro.png" style="display: block;" alt="logo">
                                        </a>
                                    </div>
                                </div>

                                <div class="col hp-flex-none w-auto hp-horizontal-block hp-horizontal-menu ps-24">
                                    <ul class="d-flex flex-wrap align-items-center">
                                        <li class="px-24">
                                            <a href="javascript:;" id="reload-app">
                                                <span style="display:flex;">
                                                    <span class="submenu-item-icon">
                                                        <i
                                                            class="icono-menu hp-text-color-dark-0 ri-2x ri-restart-line"></i>
                                                    </span>

                                                    <p class="texto-menu">Recargar <span>(CTRL + SHFT + R)</span></p>
                                                </span>
                                            </a>
                                        </li>
                                        <!-- <li class="px-24">
                                            <a href="javascript:;" id="show-dev">
                                                <span style="display:flex;">
                                                    <span class="submenu-item-icon">
                                                        <i
                                                            class="icono-menu hp-text-color-dark-0 ri-2x ri-tools-fill"></i>
                                                    </span>

                                                    <p class="texto-menu">Mostrar DevTools <span>(CTRL + SHFT +
                                                            L)</span></p>
                                                </span>
                                            </a>
                                        </li> -->
                                        <!-- <li class="px-24">

                                            <a href="javascript:;" id="show-tutorial">
                                                <span style="display:flex;">
                                                    <span class="submenu-item-icon">
                                                        <i
                                                            class="icono-menu hp-text-color-dark-0 ri-2x ri-question-line"></i>
                                                    </span>

                                                    <p class="texto-menu">Tutorial</p>
                                                </span>
                                            </a>
                                        </li> -->
                                        <li class="px-24">
                                            <a href="javascript:;" id="close-app">
                                                <span style="display:flex;">
                                                    <span class="submenu-item-icon">
                                                        <i
                                                            class="icono-menu hp-text-color-dark-0 ri-2x ri-logout-circle-r-line"></i>
                                                    </span>

                                                    <p class="texto-menu">Salir/Cerrar</p>
                                                </span>
                                            </a>
                                        </li>
                                        <li class="px-24">

                                            <a href="javascript:;" id="show-help">
                                                <span style="display:flex;">
                                                    <span class="submenu-item-icon">
                                                        <i
                                                            class="icono-menu hp-text-color-dark-0 ri-2x ri-question-line"></i>
                                                    </span>

                                                    <p class="texto-menu">Acerca</p>
                                                </span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="hp-header-search d-none col">
                                <input type="text" class="form-control" placeholder="Search..." id="header-search"
                                    autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <div class="hp-main-layout-content">

                <div class="row mb-32 gy-32">

                    <div class="col-12">
                        <div class="hp-bg-black-bg py-32 py-sm-64 px-24 px-sm-48 px-md-50 position-relative overflow-hidden hp-page-content"
                            style="border-radius: 13px;">
                            <svg width="358" height="336" fill="none" xmlns="http://www.w3.org/2000/svg"
                                class="position-absolute hp-rtl-scale-x-n1" style="bottom: 0px; right: 0px;">
                                <path
                                    d="M730.404 135.471 369.675-6.641l88.802 164.001-243.179-98.8 246.364 263.281-329.128-126.619 114.698 166.726-241.68-62.446"
                                    stroke="url(#a)" stroke-width="40" stroke-linejoin="bevel"></path>
                                <defs>
                                    <linearGradient id="a" x1="315.467" y1="6.875" x2="397.957" y2="337.724"
                                        gradientUnits="userSpaceOnUse">
                                        <stop stop-color="#fff"></stop>
                                        <stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
                                    </linearGradient>
                                </defs>
                            </svg>

                            <div class="row">
                                <div class="col-sm-6 col-12">
                                    <div class="row">
                                        <div class="col-12">
                                            <h1 class="mb-0 hp-text-color-black-0"> Bienvenido: <span
                                                    id="user_pc"></span></h1>
                                        </div>
                                        <div class="col-12">
                                            <p class="h5 mb-0 mt-24 hp-text-color-black-0"> Lista de aplicativos
                                                disponibles </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="row">
                            <div class="col-6 col-xl-6 col-xxxl-6">
                                <div class="row g-16">
                                    <div class="col hp-flex-none w-auto">
                                        <button id="all_apps" type="button"
                                            class="btn btn-primary"><span>Todos</span></button>
                                    </div>
                                    <div class="col hp-flex-none w-auto">
                                        <button id="active_apps" type="button"
                                            class="btn btn-primary"><span>Activos</span></button>
                                    </div>
                                    <div class="col hp-flex-none w-auto">
                                        <button id="inactive_apps" type="button"
                                            class="btn btn-primary"><span>Inactivos</span></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 col-xl-6 col-xxxl-6">
                                <div class="input-group input-group-md">
                                    <input type="text" id="search-input" class="form-control"
                                        placeholder="Buscar aplicativo" aria-describedby="search-input-button">
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class="row g-32" id="aplicativos">
                        </div>
                    </div>
                </div>

            </div>

            <footer class="w-100 py-18 px-16 py-sm-24 px-sm-32 hp-bg-color-black-20 hp-bg-color-dark-90">
                <div class="row">
                    <div class="col-12">
                        <p class="hp-badge-text fw-semibold mb-0 text-center text-sm-start hp-text-color-dark-30">
                            <strong>VERSIÓN <span id="app-version"></span></strong>
                        </p>
                    </div>
                </div>
            </footer>
        </div>
        <!-- <a class="hp-buy-now-btn position-fixed">
            <button id="open_drawer" type="button" class="btn btn-primary" data-bs-toggle="offcanvas"
                data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><span>Solicitar HelpDesk</span></button>
        </a> -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
            <div class="offcanvas-header">
                <h4 id="offcanvasRightLabel">Solicitud Helpdesk</h4>
                <button type="button" id="close_drawer"
                    class="btn-close text-reset hp-bg-none d-flex align-items-center justify-content-center"
                    data-bs-dismiss="offcanvas" aria-label="Close">
                    <i class="ri-close-line hp-text-color-dark-0 lh-1" style="font-size: 24px;"></i>
                </button>
            </div>

            <div class="offcanvas-body">
                <div class="row hp-authentication-page">
                    <div class="hp-bg-black-20 hp-bg-color-dark-90 col-12">
                        <div class="row hp-image-row h-100 px-8 px-sm-16 px-md-0 pb-32 pb-sm-0 pt-32 pt-md-0">
                            <div class="col-12 px-0">
                                <div class="row h-100 w-100 mx-0 align-items-center justify-content-center">
                                    <div class="col-xl-9 col-12">
                                        <p class="h5 mb-0 fw-normal hp-text-color-black-80 hp-text-color-dark-20">
                                            Utiliza
                                            este
                                            formulario para solicitar soporte. Recuerda incluir la mayor cantidad de
                                            detalles.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-12 py-lg-0">
                        <div class="row align-items-center justify-content-center mx-4 mx-sm-n32">
                            <div class="col-10 px-8 px-sm-0 pt-24 pb-48">
                                <p style="font-size: 12px;line-height: 15px;">Para que el soporte sea efectivo, vamos a
                                    recopilar información técnica, para ello debes realizar el proceso con el aplicativo
                                    que
                                    este presentando falla. Cuando estés preparado da click en recopilar información y
                                    accede al aplicativo, luego cuando en pantalla se visualice el error o la falla da
                                    de
                                    nuevo click en detener recopilación y se te habilitara el botón de enviar</p>
                                <button id="record" class="btn btn-primary w-100">
                                    Recopilar información
                                </button>
                                <form id="helpdesk" class="mt-16">
                                    <div class="mb-16">
                                        <label for="description" class="form-label" disabled>Descripción de la
                                            solicitud:</label>
                                        <textarea name="description" id="description" class="form-control" required
                                            disabled></textarea>
                                    </div>
                                    <button id="send" type="submit" class="btn btn-primary w-100" disabled>
                                        Enviar Solicitud
                                    </button>
                                </form>
                                <video src="" width="100%" height="auto"></video>
                            </div>
                        </div>
                        <img class="m-auto w-100" src="../assets/img/helpdesk.png" alt="Background Image">
                    </div>
                </div>
            </div>
        </div>
        <div class="scroll-to-top">
            <button type="button" class="btn btn-primary btn-icon-only rounded-circle hp-primary-shadow">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="16px"
                    width="16px" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <path fill="none" d="M0 0h24v24H0z"></path>
                        <path d="M13 7.828V20h-2V7.828l-5.364 5.364-1.414-1.414L12 4l7.778 7.778-1.414 1.414L13 7.828z">
                        </path>
                    </g>
                </svg>
            </button>
        </div>
        <span id="param1"></span>
        <span id="param2"></span>
        <script>
            const { ipcRenderer } = require('electron');



            document.getElementById('reload-app').addEventListener('click', () => {
                console.log('reload-app');
                ipcRenderer.send('reload-app');
            });

            document.getElementById('close-app').addEventListener('click', () => {
                console.log('close-app');
                ipcRenderer.send('close-app');
            });

            document.getElementById('show-help').addEventListener('click', () => {
                console.log('show-help');
                ipcRenderer.send('show-help');
            });

            // document.getElementById('show-tutorial').addEventListener('click', () => {
            //     console.log('show-tutorial');
            //     ipcRenderer.send('show-tutorial');
            // });

            ipcRenderer.on('params', (event, url) => {
                console.log('params:', url);
                document.querySelector('#param1').textContent = url;
                // document.querySelector('#param2').textContent = params.param2;
            });

            ipcRenderer.on('set-version', (event, version) => {
                console.log('set-version:', version);
                document.getElementById('app-version').textContent = version;
            });

            ipcRenderer.on('set-userpc', (event, user_pc) => {
                console.log('set-userpc:', user_pc);
                document.getElementById('user_pc').textContent = user_pc;
            });

            ipcRenderer.on('data-apps', (event, data_apps) => {
                $('#aplicativos').append(data_apps);
                $('#loader').css('display', 'none');
                updateButtonCounts();
            });

            const shortcutDivs = document.querySelectorAll('.shortcut');
            console.log(shortcutDivs);

            shortcutDivs.forEach((div) => {
                div.addEventListener('click', () => {
                    const code = div.getAttribute('code');
                    data_service = { "code": code }
                    ipcRenderer.send('openNewWindow', data_service);
                });
            });
        </script>
        <!-- Custom -->
        <script src="../assets/js/index.js"></script>
        <script src="../assets/js/helpdesk.js"></script>

        <script src="../app-assets/js/plugin/bootstrap.bundle.min.js"></script>
        <script src="../app-assets/js/layouts/sider.js"></script>
        <script src="../app-assets/js/show-code/component-notification.min.js"></script>
        <script src="../app-assets/js/show-code/show-code-btn.min.js"></script>
        <script src="../app-assets/js/show-code/component-drawer.min.js"></script>

        <!-- Components -->
        <script src="../app-assets/js/plugin/highlight.min.js"></script>
        <script src="../app-assets/js/components/notification.js"></script>
</body>

</html>