<?= $this->extend('backend/layout/main'); ?>
<?= $this->section('title'); ?>Monitoring<?= $this->endSection(); ?>
<?= $this->section('styles'); ?>
<style>
    .loader {
        width: 100%;
        height: 4.8px;
        display: inline-block;
        position: relative;
        background: #a9a9a9;
        overflow: hidden;
    }

    .loader::after {
        content: '';
        width: 96px;
        height: 4.8px;
        background: red;
        position: absolute;
        top: 0;
        left: 0;
        box-sizing: border-box;
        animation: hitZak 1s linear infinite alternate;
    }

    @keyframes hitZak {
        0% {
            left: 0;
            transform: translateX(-1%);
        }

        100% {
            left: 100%;
            transform: translateX(-99%);
        }
    }
</style>
<?= $this->endSection(); ?>
<?= $this->section('content'); ?>
<div class="container-fluid dashboard-content">
    <!-- ============================================================== -->
    <!-- pageheader -->
    <!-- ============================================================== -->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="page-header">
                <h2 class="pageheader-title">Visitor Monitoring </h2>
                <div class="page-breadcrumb">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="<?= url_to('admin_home') ?>" class="breadcrumb-link">Dashboard</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Monitoring</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <!-- ============================================================== -->
    <!-- end pageheader -->
    <!-- ============================================================== -->
    <div class="row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <h3 class="text-center">
                <span class="loader"></span>
            </h3>
            <!-- Modal -->
            <div class="modal fade" id="newVisitors" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">New Visitor</h5>
                            <a href="#" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </a>
                        </div>
                        <div class="modal-body">
                            -- Waiting for new visitors --
                        </div>
                        <div class="modal-footer">
                            <a href="#" class="btn btn-secondary" data-dismiss="modal">Close</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?= $this->endSection(); ?>

<?= $this->section('scripts'); ?>
<script>
    $(document).ready(function() {
        setInterval(getNewVisitors, 10000);
    });

    function getNewVisitors() {
        $.ajax({
            type: 'GET',
            url: "<?= url_to('get_new_visitor') ?>",
            success: function(response) {
                if (response.length > 0) {
                    showModal(response);
                }
            }
        });
    }

    function showModal(html) {
        $('#newVisitors .modal-body').html(html);
        $('#newVisitors').modal('show');
    }
</script>
<?= $this->endSection(); ?>