@extends('frontend.layouts.master')

@section('title')
Call Log Dashboard
@endsection

@section('css')
<style>
#page {
    text-align: center;
    padding: 60px 0;
}
.login-btn {
    width: 350px;
    font-size: 15px;
    line-height: 25px;
    font-weight: 700;
}
h1 {
    margin: 0.5em 0;
    font-size: 36px;
}
h1+p {
    margin-top: -0.5em;
    margin-bottom: 2em;
}
body {
    background: #fff;
    color: #424d57;
    font-family: "Source Sans Pro",sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}
.fullscreen-loader{
    background: #f3f3f4;
}
/* Center the loader */
#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 60px;
  height: 60px;
  margin: -76px 0 0 -76px;
  border: 8px solid #f3f3f3;
  border-radius: 50%;
  border-top: 8px solid #3498db;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
@endsection

@section('content')
@php
    $loaderClass = $error !== 'yes' ? 'd-none' : '';
@endphp
@if ($error !== 'yes')
<div id="page">
    <h1>Welcome to Softphone getmsg()!</h1>
    <p>Please log in to your LiveChat account.</p><br>
    <button id="login-button" class="btn btn-primary login-btn">Log in using LiveChat account</button>          
</div>
@endif
<div id="loader" class="{{$loaderClass}}"></div>
@endsection

@section('javascript') 
<script src="https://cdn.jsdelivr.net/npm/@livechat/accounts-sdk@2.0.6/dist/accounts-sdk.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/@livechat/accounts-sdk@2.0.10/dist/accounts-sdk.js"></script>-->
<script type="text/javascript">
    // window.onload="onWindowLoad()";
    // Replace with your actual LiveChat app client_id
    const client_id = '{{$client_id}}';
    const redirect_uri = '/live-chat/install';
    // const error = "{{empty($error) ? 'no' : $error}}";
    const error = "{{$error}}";
    
    $(document).ready(function(){

        if(error !== 'yes') {
            document.getElementById('login-button').onclick = (e) => {
                if (e && e.preventDefault) {
                    e.preventDefault();
                }
                $('#page').addClass('d-none');
                $('#loader').removeClass('d-none');
                getAccessToken(error);
            };
        } else {
            getAccessToken(error);
        }
    });

    var getAccessToken = function(error) {
        
        console.log('error is'+ error);
        let sdk = null;
        if(error !== 'yes') {
            sdk = new AccountsSDK({
                client_id: client_id,
            });
        } else {
            sdk = new AccountsSDK({
                client_id: client_id,
                scope: 'agents--my:ro',
            });
        }
        
        sdk.popup().authorize().then((authorizeData) => {
            // document.getElementById('access-token').innerHTML = authorizeData.access_token;
            // console.log(authorizeData);
            location.href = '/live-chat/install?access-token='+authorizeData.access_token+'&error='+error;
        }).catch((e) => {
            // Handle any errors here
            console.error('Error:', e);
            if(error !== 'yes') {
                // getAccessToken('yes');
                location.href = '/live-chat/app-widget/fullscreen?error=yes';
            }
        });
    }
</script>
@endsection