<?php
/*
 * Developed By Devozon
 *
 * Check Out at https://devozon.com/
 * Email: support@devozon.com
 * Message: https://www.facebook.com/devozon
 *
 * Please feel free to contact me at any time if you need a custom script or any development work.
 *
 * Devozon Team:
 * Coded by Sanad Nabil
 * Theme by Ahmed Reda
 * Tested By Smith Carter
 *
 * Devozon All rights reserved
 * Copyright (c) 2023-2024.
 * Last Update 15 \ 9 \ 2024
 */

/**
 * Provide a admin area view for the plugin
 *
 * This file is used to markup the admin-facing aspects of the plugin.
 *
 * @link       https://devozon.com
 * @since      1.0.0
 *
 * @package    FENSE_BPVT
 * @subpackage FENSE_BPVT/admin/partials
 */

if ( !defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

$Fense_FUN = ( new FENSE_BPVT_FUN );

?>

<?php if ( !$Fense_FUN->IsKeyValid() ): ?>
    <div class="container mt-4 dberror" style="max-width: 100%!important;">
        <div class="row">
            <div class="col-md-12">

                <div class="alert alert-danger alert-dismissible alert-additional fade show mb-xl-0" role="alert">
                    <div class="alert-body">
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        <div class="d-flex">
                            <div class="flex-shrink-0 me-3">
                                <i class="ri-alert-line fs-16 align-middle"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h5 class="alert-heading"><?php echo esc_html__( 'Looks like something went wrong!', 'fense-block-vpn-proxy' ) ?></h5>
                                <p class="mb-0"><?php echo esc_html__( 'You can always get a free key from ', 'fense-block-vpn-proxy' )
                                            . '<a target="_blank" class="text-danger" href="' . esc_url( FENSE_BPVT_PLUGIN::SITE ) . 'register">' . esc_html__( 'Fense', 'fense-block-vpn-proxy' ) . '</a>' ?></p>
                            </div>
                        </div>
                    </div>
                    <div class="alert-content">
                        <p class="mb-0"><?php echo esc_html__( 'Please reload the page and make sure that you have added the activation key for your account correctly.', 'fense-block-vpn-proxy' ) ?></p>
                    </div>
                </div>

                <hr>

                <div class="alert alert-danger alert-dismissible alert-label-icon label-arrow fade show mb-xl-0"
                     role="alert">
                    <i class="ri-error-warning-line label-icon"></i>
                    <p>
                        <?php echo esc_html__( 'Important : plugin is not activated because You are using a wrong Access Token. If you don\'t have an account feel free to register an account for free from ', 'fense-block-vpn-proxy' )
                                . '<a target="_blank" class="text-primary" href="' . esc_url( FENSE_BPVT_PLUGIN::SITE ) . 'register">' . esc_html__( 'Fense', 'fense-block-vpn-proxy' ) . '</a>' ?>
                    </p>
                    <p>
                        <?php echo esc_html__( 'After creating an account login and copy your Access Token from your account dashboard and put it here in Api Key below. see our ', 'fense-block-vpn-proxy' )
                                . '<a target="_blank"  class="text-primary" href="' . esc_url( FENSE_BPVT_PLUGIN::SITE ) . 'wordpress">' . esc_html__( 'docs', 'fense-block-vpn-proxy' ) . '</a>' ?>
                    </p>
                </div>
            </div>
        </div>
    </div>

<?php else: ?>

    <script !src="">var settings = false;</script>
    <div class="container mt-4 dberror d-none" style="max-width: 100%!important;">
        <div class="row">
            <div class="col-md-12">
                <div class="alert alert-danger alert-dismissible alert-additional fade show mb-xl-0" role="alert">
                    <div class="alert-body">
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        <div class="d-flex">
                            <div class="flex-shrink-0 me-3">
                                <i class="ri-alert-line fs-16 align-middle"></i>
                            </div>
                            <div class="flex-grow-1">
                                <h5 class="alert-heading"><?php echo esc_html__( 'Looks like something went wrong!', 'fense-block-vpn-proxy' ) ?></h5>
                                <p class="mb-0"><?php echo esc_html__( 'You can always get a free key from ', 'fense-block-vpn-proxy' )
                                            . '<a target="_blank" class="text-danger" href="' . esc_url( FENSE_BPVT_PLUGIN::SITE ) . 'register">' . esc_html__( 'Fense', 'fense-block-vpn-proxy' ) . '</a>' ?></p>
                            </div>
                        </div>
                    </div>
                    <div class="alert-content">
                        <p class="mb-0"><?php echo esc_html__( 'Please reload the page and make sure that you have added the activation key for your account correctly.', 'fense-block-vpn-proxy' ) ?></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container" style="max-width: 100%!important;">
        <div class="main_info" data-url="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>"></div>
        <div class="row">
            <div class="col-md-4">
                <div class="card card-animate bg-primary">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-white-50 mb-0 fs-22"><?php echo esc_html__( 'Today', 'fense-block-vpn-proxy' ) ?></p>
                                <h2 class="mt-4 ff-secondary fw-semibold text-white" id="today"></h2>
                                <div class="loading">
                                    <div class="spinner-grow text-light" role="status">
                                        <span class="sr-only"><?php echo esc_html__( 'Loading...', 'fense-block-vpn-proxy' ) ?></span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-soft-light rounded-circle fs-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                         stroke-linejoin="round" class="feather feather-clock text-white"><circle
                                                cx="12" cy="12" r="10"></circle><polyline
                                                points="12 6 12 12 16 14"></polyline></svg>
                                </span>
                                </div>
                            </div>
                        </div>
                    </div><!-- end card body -->
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-animate bg-primary">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-white-50 mb-0 fs-22"><?php echo esc_html__( 'Last 7 Days', 'fense-block-vpn-proxy' ) ?></p>
                                <h2 class="mt-4 ff-secondary fw-semibold text-white" id="last7days"></h2>
                                <div class="loading">
                                    <div class="spinner-grow text-light" role="status">
                                        <span class="sr-only"><?php echo esc_html__( 'Loading...', 'fense-block-vpn-proxy' ) ?></span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-soft-light rounded-circle fs-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                         stroke-linejoin="round" class="feather feather-clock text-white"><circle
                                                cx="12" cy="12" r="10"></circle><polyline
                                                points="12 6 12 12 16 14"></polyline></svg>
                                </span>
                                </div>
                            </div>
                        </div>
                    </div><!-- end card body -->
                </div>
            </div>
            <div class="col-md-4">
                <div class="card card-animate bg-primary">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p class="fw-medium text-white-50 mb-0 fs-22"><?php echo esc_html__( 'This Month', 'fense-block-vpn-proxy' ) ?></p>
                                <h2 class="mt-4 ff-secondary fw-semibold text-white" id="thismonth"></h2>
                                <div class="loading">
                                    <div class="spinner-grow text-light" role="status">
                                        <span class="sr-only"><?php echo esc_html__( 'Loading...', 'fense-block-vpn-proxy' ) ?></span>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-soft-light rounded-circle fs-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                         stroke-linejoin="round" class="feather feather-clock text-white"><circle
                                                cx="12" cy="12" r="10"></circle><polyline
                                                points="12 6 12 12 16 14"></polyline></svg>
                                </span>
                                </div>
                            </div>
                        </div>
                    </div><!-- end card body -->
                </div>
            </div>
        </div>


        <div class="row">

            <?php if ( $Fense_FUN->IsDailyLimitReached() ): ?>
                <div class="col-12">
                    <div class="alert alert-danger alert-dismissible alert-additional fade show mb-xl-0"
                         role="alert">
                        <div class="alert-body">
                            <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            <div class="d-flex">
                                <div class="flex-shrink-0 me-3">
                                    <i class="ri-alert-line fs-16 align-middle"></i>
                                </div>
                                <div class="flex-grow-1">
                                    <h5 class="alert-heading"><?php echo esc_html__( 'Looks Like your current plan has reached its daily request limit !', 'fense-block-vpn-proxy' ) ?></h5>
                                    <p class="mb-0"><?php echo esc_html__( 'You can always upgrade your plan from ', 'fense-block-vpn-proxy' )
                                                . '<a target="_blank" class="text-danger" href="' . esc_url( FENSE_BPVT_PLUGIN::SITE ) . 'register">' . esc_html__( 'Fense', 'fense-block-vpn-proxy' ) . '</a>' ?></p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            <?php endif; ?>

            <div class="col-md-3">
                <div class="card p-1" style="height: 521px">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-borderless mb-0">
                                <tbody>
                                <tr>
                                    <th class="ps-0"
                                        scope="row"><?php echo esc_html__( 'Name', 'fense-block-vpn-proxy' ) ?>:
                                    </th>
                                    <td class="text-muted"><strong class="name"></strong></td>
                                </tr>
                                <tr>
                                    <th class="ps-0"
                                        scope="row"><?php echo esc_html__( 'Expire', 'fense-block-vpn-proxy' ) ?>
                                        :
                                    </th>
                                    <td class="text-muted"><strong class="expire"></strong></td>
                                </tr>
                                <tr>
                                    <th class="ps-0"
                                        scope="row"><?php echo esc_html__( 'Plan', 'fense-block-vpn-proxy' ) ?>:
                                    </th>
                                    <td class="text-muted"><strong class="plan"></strong></td>
                                </tr>
                                <tr>
                                    <th class="ps-0"
                                        scope="row"><?php echo esc_html__( 'Allowed api requests Per day', 'fense-block-vpn-proxy' ) ?>
                                        :
                                    </th>
                                    <td class="text-muted"><strong class="api"></strong></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="alert alert-secondary alert-border-left alert-dismissible fade show mb-xl-0 mt-4"
                             role="alert">
                            <i class="ri-error-warning-line me-3 align-middle fs-16"></i>
                            <?php echo esc_html__( 'Please note that all data automatically refreshed after 15 min', 'fense-block-vpn-proxy' ) ?>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>

                    </div><!-- end card body -->
                </div>
            </div>
            <div class="col-md-9">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h6 class="card-title mb-0"><?php echo esc_html__( 'This Month', 'fense-block-vpn-proxy' ) ?></h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body collapse show" style="min-width: 100% !important;">
                        <div id="myChart"></div>

                        <div class="loading">
                            <p class="card-text placeholder-glow mt-5">
                                <span class="placeholder col-1"></span>
                                <span class="placeholder col-2"></span>
                                <span class="placeholder col-4"></span>
                                <span class="placeholder col-3"></span>
                                <span class="placeholder col-7"></span>
                                <span class="placeholder col-1"></span>
                                <span class="placeholder col-3"></span>
                                <span class="placeholder col-6"></span>
                                <span class="placeholder col-8"></span>
                                <span class="placeholder col-7"></span>
                            </p>
                        </div>

                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h6 class="card-title mb-0"><?php echo esc_html__( 'This Month', 'fense-block-vpn-proxy' ) ?></h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body collapse show">

                        <div data-simplebar data-simplebar-direction="rtl" data-simplebar-auto-hide="false"
                             data-simplebar-track="primary" style="max-height: 300px;">
                            <!-- Striped Rows -->
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th><?php echo esc_html__( 'Time', 'fense-block-vpn-proxy' ) ?></th>
                                    <th><?php echo esc_html__( 'Ip', 'fense-block-vpn-proxy' ) ?></th>
                                    <th><?php echo esc_html__( 'Country', 'fense-block-vpn-proxy' ) ?></th>
                                    <th><?php echo esc_html__( 'Type', 'fense-block-vpn-proxy' ) ?></th>
                                </tr>
                                </thead>
                                <tbody id="ips"></tbody>
                            </table>
                            <div class="loading">
                                <p class="card-text placeholder-glow mt-5">
                                    <span class="placeholder col-1"></span>
                                    <span class="placeholder col-2"></span>
                                    <span class="placeholder col-4"></span>
                                    <span class="placeholder col-3"></span>
                                    <span class="placeholder col-7"></span>
                                    <span class="placeholder col-1"></span>
                                    <span class="placeholder col-3"></span>
                                    <span class="placeholder col-6"></span>
                                    <span class="placeholder col-8"></span>
                                    <span class="placeholder col-7"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center">
                            <div class="flex-grow-1">
                                <h6 class="card-title mb-0"><?php echo esc_html__( 'This Month', 'fense-block-vpn-proxy' ) ?></h6>
                            </div>
                        </div>
                    </div>
                    <div class="card-body collapse show">

                        <div data-simplebar data-simplebar-direction="rtl" data-simplebar-auto-hide="false"
                             data-simplebar-track="primary" style="max-height: 300px;">
                            <!-- Striped Rows -->
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th></th>
                                    <th><?php echo esc_html__( 'Country', 'fense-block-vpn-proxy' ) ?></th>
                                    <th>Total</th>
                                    <th>Proxy</th>
                                    <th>Vpn</th>
                                    <th>Tor</th>
                                </tr>
                                </thead>
                                <tbody id="countries"></tbody>
                            </table>
                            <div class="loading">
                                <p class="card-text placeholder-glow mt-5">
                                    <span class="placeholder col-1"></span>
                                    <span class="placeholder col-2"></span>
                                    <span class="placeholder col-4"></span>
                                    <span class="placeholder col-3"></span>
                                    <span class="placeholder col-7"></span>
                                    <span class="placeholder col-1"></span>
                                    <span class="placeholder col-3"></span>
                                    <span class="placeholder col-6"></span>
                                    <span class="placeholder col-8"></span>
                                    <span class="placeholder col-7"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <div class="error alert alert-danger p-3 d-none"><?php echo esc_html__( 'Error: Wrong Api Key', 'fense-block-vpn-proxy' ) ?></div>


<?php endif; ?>
