@extends('session_main')
@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <a class="close_side_menu" href="javascript:void(0);"></a>
    <div class="rbt-page-banner-wrapper"></div>
    <!-- Start Card Style -->
    <div class="rbt-dashboard-area rbt-section-overlayping-top rbt-section-gapBottom">
        <div class="container">
                    <div class="row">
                        <div class="col-lg-3">
                            <!-- Start Dashboard Sidebar  -->
                            <div class="rbt-default-sidebar sticky-top rbt-shadow-box rbt-gradient-border">
                                <div class="inner">
                                    <div class="content-item-content">

                                        <x-student-dashboard-side :data="$person" :chatbotdata="$chatbotdata" />

                                    </div>
                                </div>
                            </div>
                            <!-- End Dashboard Sidebar  -->
                        </div>
                        <div class="col-lg-9">
                            <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--60">

                            <h2>Conectar su chat bot a Facebook, Instagram, Whatsapp</h2>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="rbt-form-group"><br></div>
                            </div>
                            @switch($person->conectado_redes)
                                    @case('1')
                                        <div  class="rbt-btn btn-md btn-gradient hover-icon-reverse w-100">
                                            <a href="#" onclick="activar()">
                                                <span class="icon-reverse-wrapper">
                                                    <span class="btn-text" style="color:#fff" >Conectar con Facebook</span>
                                                <span class="btn-icon" style="color:#fff"><i class="feather-arrow-right"></i></span>
                                                <span class="btn-icon" style="color:#fff"><i class="feather-arrow-right"></i></span>
                                                </span>
                                            </a>
                                        </div>
                                    @break


                                    @case('2')
                                        <div  class="rbt-btn btn-md btn-gradient hover-icon-reverse w-100">
                                            <a href="#" onclick="logout()">
                                                <span class="icon-reverse-wrapper">
                                                    <span class="btn-text" style="color:#fff" >Desconectar con Facebook</span>
                                                <span class="btn-icon" style="color:#fff"><i class="feather-arrow-right"></i></span>
                                                <span class="btn-icon" style="color:#fff"><i class="feather-arrow-right"></i></span>
                                                </span>
                                            </a>
                                        </div>
                                    @break


                            @endswitch


                            <div class="col-lg-12 col-md-12 col-sm-12 col-12">
                                    <div class="rbt-form-group"><br></div>
                            </div>
                            <p _ngcontent-rti-c132="" style="line-height: 20px; font-size: 14px;"><span _ngcontent-rti-c132="" style="font-weight: bold; font-size: 16px;">Beneficios de conectar tus cuentas de Facebook Business, Instagram Business y WhatsApp Business a Chat bot:</span><br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> 1. Ahorro de tiempo: Al tener todas tus cuentas empresariales en un solo lugar, disminuyes el tiempo que gastas en cambiar de plataforma.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> 2. Automatización: Con el asistente virtual de Chat bot, puedes automatizar las respuestas a tus clientes a través de múltiples plataformas, lo que te permite enfocarte en otras tareas importantes.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> 3. Mejor atención al cliente: Acceder a tus cuentas de mensajería empresarial te permite responder de manera rápida y eficiente a tus clientes en tiempo real.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""><span _ngcontent-rti-c132="" style="font-weight: bold; font-size: 16px;">Pasos para conectar tu cuentas Bussines de Meta con Chat bot:</span><br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> Paso 1: Selecciona la opción "Login con Facebook Business".<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> Paso 2: Ingresa tus credenciales de Facebook Business para acceder a tus cuentas de Facebook, Instagram y WhatsApp Business.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> Paso 3: Confirma que deseas conectar tus cuentas de Instagram y WhatsApp Business a la aplicación Chat bot.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> Paso 4: Configura las respuestas automáticas que deseas que el asistente virtual proporcione a tus clientes a través de las diferentes plataformas.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> Paso 5: Guarda los ajustes y activa el asistente virtual de Chat bot.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""><span _ngcontent-rti-c132="" style="font-weight: bold; font-size: 16px;">Requisitos para conectar Instagram Business:</span><br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> 1. Para conectar tu cuenta de Instagram con Chat bot, es necesario que tengas una cuenta de Instagram Business y que esté asociada a una página de Facebook.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> 2. Confirma que tu cuenta de Instagram Business esté correctamente configurada para recibir y responder a mensajes.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> 3. Asegúrate que tu cuenta de Instagram esté conectada a una Fan Page de Facebook y que se haya activado la opción de acceso a los mensajes.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""><span _ngcontent-rti-c132="" style="font-weight: bold; font-size: 16px;">Pasos específicos para conectar WhatsApp Business:</span><br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> 1. El número de teléfono que estás utilizando no debe estar conectado a ninguna otra cuenta de WhatsApp.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> 2. Debes tener una cuenta de bussiness de Facebook.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> 3. Debes tener una cuenta de administrador de negocios bussines de Facebook.<br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> 4. Debes tiener acceso al número de teléfono y puedes verificarlo a través de SMS o llamada de voz durante el proceso de registro. <br _ngcontent-rti-c132=""><br _ngcontent-rti-c132=""> Nota: Recuerda que, si tienes alguna duda o problema para conectar tus cuentas empresariales a la aplicación Chat bot o configurarlas para recibir y responder mensajes, puedes contactar con el equipo de soporte de Chat bot para recibir ayuda adicional. ¡Gracias por utilizar nuestra aplicación para mejorar la atención al cliente de tu negocio! </p>

                            <!-- Set the element id for the JSON response -->
                            
                            <p id="profile"></p>

                            <script>

                            function activar(){
                        
                                                    <!-- Add the Facebook SDK for Javascript -->
                                            
                                                    (function(d, s, id){
                                                                        var js, fjs = d.getElementsByTagName(s)[0];
                                                                        if (d.getElementById(id)) {return;}
                                                                        js = d.createElement(s); js.id = id;
                                                                        js.src = "https://connect.facebook.net/en_US/sdk.js";
                                                                        fjs.parentNode.insertBefore(js, fjs);
                                                                        }(document, 'script', 'facebook-jssdk')
                                                    );


                                                    window.fbAsyncInit = function() {
                                                        <!-- Initialize the SDK with your app and the Graph API version for your app -->
                                                        FB.init({
                                                            appId      : '238232815896682',
                                                            xfbml      : true,
                                                            version    : 'v18.0'
                                                        });
                                                        
                                                        //FB.logout(function(response) {
                                                          //  document.location.reload();
                                                        //});
                                                        <!-- If you are logged in, automatically get your name and email adress, your public profile information -->
                                                        FB.login(function(response) {
                                                                if (response.authResponse) {
                                                                    console.log('Welcome!  Fetching your information.... ');
                                                                    console.log(response);
                                                                    FB.api('/me', {fields: 'name, email'}, function(response) {
                                                                        login();
                                                                        //document.getElementById("profile").innerHTML = "Good to see you, " + response.name + ". i see your email address is " + response.email
                                                                    });
                                                                } else { 
                                                                    <!-- If you are not logged in, the login dialog will open for you to login asking for permission to get your public profile and email -->
                                                                    console.log('User cancelled login or did not fully authorize.'); }
                                                        }, {
                                                        scope: 'pages_messaging, instagram_manage_messages, whatsapp_business_messaging, whatsapp_business_management, instagram_basic, pages_show_list, read_insights, instagram_manage_insights, pages_manage_metadata',
                                                        return_scopes: true
                                                        });
                                                    };
                                }

                                function login() {
                                    var formData = new FormData();
                                    formData.append('user_id', '{{$person->id}}');
                                    fetch('chat-bot-canales-login', {method: 'POST', body: formData,  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}})
                                        .then((response) => {document.location.reload();})
                                        .catch(error => console.error(error));
                                }

                                function logout() {
                                    var formData = new FormData();
                                    formData.append('user_id', '{{$person->id}}');
                                    fetch('chat-bot-canales-logout', {method: 'POST', body: formData,  headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}})
                                        .then((response) => {document.location.reload();})
                                        .catch(error => console.error(error));
                                }

                            </script>


                                

                            </div>

                        </div>
            </div>
        </div>
    </div>
    <!-- End Card Style -->

    <x-separetor />

@endsection