<title>Top Worker -Best Leearning </title>

<?php $__env->startSection('css'); ?>
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
    <link rel="stylesheet" href="/resources/css/argon.css" type="text/css">
    <link rel="stylesheet" href="/resources/css/myapp.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="https://akotamicrojobs.net/assets/css/flipdown.css">

<style>
    .table th {
        background-color: rgba(250, 250, 250, 1); /* White faded background */
        color: #000066; /* Black font color */
        font-size: 12px;
    }
/* Remove vertical borders for table cells and adjust horizontal border color */
    .table-no-vertical-border th,
    .table-no-vertical-border td {
        border-left: none;  /* Remove left border */
        border-right: none; /* Remove right border */
        border-color: rgba(0, 0, 0, 0.1); /* Adjust the border color (0.1 for a very faint line) */
    }
    .table td {
        font-size: 14px;
        color: #000;
    }
    .rotor-bottom, .rotor, .rotor-leaf-front, .rotor-leaf-rear, .rotor-top {
    background-color: green !important;
  }
    
    .countdown {
            text-transform: uppercase;
            font-weight: bold;
        }
        
        .countdown span {
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
            font-size: 3rem;
            margin-left: 0.8rem;
        }
        
        .countdown span:first-of-type {
            margin-left: 0;
        }
        
        .countdown-circles {
            text-transform: uppercase;
            font-weight: bold;
        }
        
        .countdown-circles span {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .countdown-circles span:first-of-type {
            margin-left: 0;
        }
        
        .bg-gradient-4 {
            /*background: #007991;*/
            /*background: -webkit-linear-gradient(to right, #007991, #78ffd6);*/
            /*background: linear-gradient(to right, #007991, #78ffd6);*/
            padding: 5px;
        }
        
        .rounded {
            border-radius: 1rem !important;
        }
        
        .btn-demo {
            padding: 0.5rem 2rem !important;
            border-radius: 30rem !important;
            background: rgba(255, 255, 255, 0.3);
            text-transform: uppercase;
            font-weight: bold !important;
        }
        
        .btn-demo:hover, .btn-demo:focus {
            background: rgba(255, 255, 255, 0.5);
        }
        
        .l-date{
            background-color: green !important;
            color: #fff;
            padding: 0px 13px;
            border-radius: 10px;
            margin-left: 2px !important;
        }
        .l-date-text{
            color: #000;
            font-size: 15px !important;
            line-height: 10px !important;
            margin-left: 2px !important;
        }
        
        @media  screen and (max-width: 767px) {
            .l-date{
                font-size: 35px !important;
                padding: 0px 6px;
                border-radius: 5px;
            }
            
            .l-date-text{
                font-size: 10px !important;
            }
        }
</style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('user-content'); ?>
<div class="card mt-2">
    <div class="card-header">
        <div class="card-title text-center" style="font-weight: 500; color: #2ECC71; font-size: 22px;">Top 50 Worker</div>
    </div>
    <div class="card-body">
        <?php $__currentLoopData = $headlines; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $headline): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <div class="notice-box mb-2">
                <marquee bgcolor="green" style="color:white;padding: 5px;border-radius: 5px;margin-top: 5px" behavior="scroll">
                        <a href="" class="text-white" style="font-size:15px;">
                            <i class="fe fe-link me-2 white-text" aria-hidden="true"></i><?php echo e($headline->title); ?>

                        </a>
                </marquee>
            </div>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

<div class="row justify-content-center">
  <div class="col-lg-10">
    
      <div class="">
        <div class="text-center">
          <div id="flipdownTimer" class="flipdown d-inline-block"></div>
        </div>
        <h6>
          <script>
            document.addEventListener('DOMContentLoaded', () => {
              function calculateEndOfMonthTimestamp() {
                var currentDate = new Date();
                var lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
                lastDayOfMonth.setHours(23, 59, 59, 999);
                return Math.floor(lastDayOfMonth.getTime() / 1000);
              }

              function startFlipdown() {
                var endOfMonthTimestamp = calculateEndOfMonthTimestamp();
                console.log(endOfMonthTimestamp);

                var flipdown = new FlipDown(endOfMonthTimestamp, 'flipdownTimer')
                  .start()
                  .ifEnded(() => {
                    console.log('The countdown has ended!');
                    // Recalculate the timestamp for the end of the next month when the countdown ends
                    startFlipdown();
                  });
              }

              startFlipdown();
            });
          </script>
        </h6>
      </div>
    
  </div>
</div>

       <div class="table-responsive active">
        <?php if($top_users->isEmpty()): ?>
        <div class="text-center py-3">
            <p>No Record</p>
        </div>
        <?php else: ?>
            <table class="table table-bordered text-nowrap table-no-vertical-border table-flush" id="example1">
                <thead class="thead-light">
                    <tr>
                        <th scope="col border-bottom-0">RANK</th>
                        <th scope="col border-bottom-0">USER NAME</th>
                        <th scope="col border-bottom-0">WORK</th>
                    </tr>
                </thead>
                <tbody>
                    <?php $__currentLoopData = $top_users; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $data): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <tr>
                                <td><?php echo e($key + 1); ?></td> <!-- Increment rank with each row -->
                                <td><?php echo e(find_user($data->user_id)->name); ?></td>
                            
                                <td class="text-success font-weight-bold" >Satisfied <?php echo e($data->total); ?> <small class="text-success font-weight-bold">task</small></td>
                            </tr>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </tbody>
            </table>
        <?php endif; ?>    
        </div>
    </div>
</div>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('js'); ?>
<script src="https://www.microworkerspro.com/assets/js/flipdown.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js" integrity="sha512-lteuRD+aUENrZPTXWFRPTBcDDxIGWe5uu0apPEn+3ZKYDwDaEErIK9rvR0QzUGmUQ55KFE2RqGTVoZsKctGMVw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('user.layouts.master', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/microwo1/public_html/resources/views/user/pages/top-job-worked-user.blade.php ENDPATH**/ ?>