@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title">{{ translate('Facbook Catalog') }}</h3>

            </div>

        </div>
    </div>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <div class="box translate-box">
                    <ul class="nav nav-tabs justify-content-center" role="tablist">
                        <li class="nav-item">
                            <a id="dashboard" class="nav-link {{ $activeLink == 'dashboard' ? 'active' : '' }}"
                                href="{{ route('FbCatalog.configration') }}">
                                <span>{{ translate('Dashboard') }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="import" class="nav-link {{ $activeLink == 'import' ? 'active' : '' }}"
                                href="{{ route('FbCatalog.import') }}">
                                <span>{{ translate('Import') }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="export" class="nav-link {{ $activeLink == 'export' ? 'active' : '' }}"
                                href="{{ route('FbCatalog.export') }}">
                                <span>{{ translate('Export') }}</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a id="setting" class="nav-link {{ $activeLink == 'setting' ? 'active' : '' }}"
                                href="{{ route('FbCatalog.setting') }}">
                                <span>{{ translate('Setting') }}</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="box">
                    <div class="box-body">
                        <h6>{{ translate('You should login with facebook to use this app') }}</h6>
                        <div id="fb-root"></div>
                        <script async defer crossorigin="anonymous"
                                                src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v11.0&appId=350562526523770&autoLogAppEvents=1"
                                                nonce="hK98eXEs"></script>
                        <div class="fb-login-button" data-width="" data-size="large" data-button-type="continue_with"
                            data-layout="default" data-auto-logout-link="false" data-use-continue-as="false"></div>

                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection


@section('script')

    <script>
        window.fbAsyncInit = function() {
            FB.init({
                appId: '350562526523770',
                cookie: true,
                xfbml: true,
                version: 'v11.0'
            });

            FB.AppEvents.logPageView();

        };

        (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'));

        FB.getLoginStatus(function(response) {
            statusChangeCallback(response);
        });
    </script>
@endsection