<!doctype html>
<html lang="en">
<head>

<?php
/**
 * @var $data array
 * @var $timeLeft float
 * @var $auctionsData array
 * @var $activeAuctions WP_Term[]
 * @var $pastAuctions WP_Term[]
 * @var $excludeAuctions array
 * @var $shopAuctionsTerms array
 * @var $isAdmin boolean
 */

use auctionforge\inc\controllers\Settings;
use auctionforge\inc\helpers\SettingsHelper;
use auctionforge\inc\helpers\View;
//https://fomantic-ui.com/

$info = auctionforge_plugin_info();

$syncMode = SettingsHelper::isChecked(Settings::SYNC_FORCE_NAME, "off");
?>
    <meta charset="UTF-8">
    <title>Sync status with Bidspirit</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.css">
    <script>
        window.is_admin = "<?= current_user_can('administrator') ?>";
    </script>
    <?php wp_head(); ?>
</head>
<body>
<div class="ui vertical main container" style="padding-top:40px; padding-bottom:20px;">
    <div class="ui container">
        <div class="introduction">
            <h1 class="ui header">
                Sync status with Bidspirit
                <div class="sub header">
                    This page shows the status of the sync between the website and Bidspirit system.
                </div>
            </h1>
        </div>
    </div>
    <?php if (!$isAdmin) { ?>
    <div class="ui red message">
        Please login to the Wordpress to start the action.
        <a href="<?= wp_login_url("/bidspirit/status/") ?>">Login</a>
    </div>
    <?php } ?>
</div>

<div class="main ui container" style="padding-bottom:40px;">

    <div class="ui segment">
    <h2>Number of not synced lots:</h2>
    <div class="ui large <?= ($data['total'] > 0) ? "red" : "green" ?> label"
         data-tooltip="System sync around <?= RAW_LOT_LIMIT ?> lots per minute.">
        <i class="cloud icon"></i> <?= $data['total'] ?>
    </div>
    <div href="#" style="margin-top:5px; cursor:pointer;" onclick="location.reload();">Refresh page to see updated time. Click here to refresh this page.</div>
    </div>

    <div class="ui segment">
    <h2>Time left to sync lots:</h2>
    <div class="ui large <?= ($data['total'] > 0) ? "red" : "green" ?> label" style="display: inline-flex" data-tooltip="System sync around <?= RAW_LOT_LIMIT ?> lots per minute."
        <i class="clock icon"></i> <div id="print-time"></div>
    </div>
    <div href="#" style="margin-top:5px; cursor:pointer;" onclick="location.reload();">Refresh page to see updated time. Click here to refresh this page.</div>
    </div>

    <?php if (!empty($activeAuctions)) { ?>
    <h2>List of active auctions</h2>
    <table class="ui celled table">
        <thead>
        <tr>
            <th>Auction</th>
            <th>Total lots</th>
            <th>Not synced lots</th>
            <th style="width: 280px;">Actions</th>
        </tr>
        </thead>
        <tbody>
        <?= View::render('templates/chunks/sync-auction-item', [
            'auctions' => $activeAuctions,
            'auctionsData' => $auctionsData,
            'isAdmin' => 1
        ]); ?>
        </tbody>
    </table>
    <?php } ?>

    <h2 class="ui dividing header">List of past auctions</h2>
    <table class="ui celled table">
        <thead>
        <tr>
            <th>Auction</th>
            <th>Total lots</th>
            <th>Not synced lots</th>
            <th style="width: 280px;">Actions</th>
        </tr>
        </thead>
        <tbody>
        <?= View::render('templates/chunks/sync-auction-item', [
            'auctions' => $pastAuctions,
            'auctionsData' => $auctionsData,
            'isAdmin' => 1
        ]); ?>
        </tbody>
    </table>

    <h2 class="ui dividing header">Ignored auction list</h2>
    <table class="ui celled table">
        <thead>
        <tr>
            <th>Auction ID</th>
            <th style="width: 150px;">Actions</th>
        </tr>
        </thead>
        <tbody>
        <?= View::render('templates/chunks/sync-auction-simple-item', [
            'auctions' => $excludeAuctions,
            'isAdmin' => 1
        ]); ?>
        </tbody>
    </table>

    <div class="ui segment">
    <h2 class="ui dividing header">Want to sync spesific lot?</h2>
    <div class="ui form">
        <div class="field">
            <label>Copy paste here URL of the lot from Bidspirit system.</label>
            <input id="re-sync-single-lot-field" type="text" placeholder="Enter here lot URL from bidspirit...">
        </div>
        <button id="re-sync-single-lot" class="large ui button"
                data-tooltip="This button will sync spesific lot from Bidspirit.">
            Sync this lot
        </button>
    </div>
    </div>

    <div class="ui grid segment">
        <div class="row">
            <div class="column">
                <div class="ui">
                    <h2 class="ui dividing header">Don't see some auction in auction list?</h2>
                    <div class="ui">
                        <button id="do-full-sync" class="large ui button" data-tooltip="This button will start resync off all auctions process.">
                            Click here to resync auction list
                        </button>
                        <div class="ui dimmer">
                            <div class="ui text loader">Please wait</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        jQuery(document).ready(function() {
            document.getElementById('print-time').innerHTML = toCustomTimeString(<?= $timeLeft ?>);
        });

        const toCustomTimeString = (seconds) => {
            const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
            const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
            const secondsPart = (seconds % 60).toString().padStart(2, '0');
            return `${hours} hours ${minutes} minutes`;
        };
    });
</script>
<?php
wp_footer();
?>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.3/dist/semantic.min.js"></script>
<script src="<?= plugin_dir_url(__DIR__ . "/../../../") ?>assets/js/status-actions.js?ver=<?= $info['ver'] ?>"></script>
</body>
</html>