<title>Notice Board - Best Leearning</title>
@extends('user.layouts.master')
@section('css')
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700">
    <link rel="stylesheet" href="https://www.powerworkerearn.com/resources/css/argon.css" type="text/css">
    <link rel="stylesheet" href="https://www.powerworkerearn.com/resources/css/myapp.css" type="text/css">
    <link rel="stylesheet" type="text/css" href="https://powerworkerearn.com/assets/css/flipdown.css">
    <style>
        .notice_gif {
            max-width: 300px; 
            height: 250px; 
            display: block; 
            margin: 0 auto;
        }
        .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;
        }
    </style>
@endsection
@section('user-content')
<div class="row justify-content-center mt-2">
    <div class="col md-6">
        <div class="card">
            <div class="card-header p-3">
                <h2 class="text-center m-0" style="color:#2ECC71;">Notice Board</h2>
                <div class="notice-box mb-2 mt-4">
                    <marquee bgcolor="transparent" style="padding: 5px;border-radius: 5px;border: 1px solid red;" behavior="scroll"><a style="font-size:15px; color: red"><i class="fas fa-link me-2" aria-hidden="true"></i>Event for Content Creator will start Soon...</a></marquee>
                    <div class="row">
                        <div class="col-md-4 mt-2">
                            <img src="https://www.powerworkerearn.com/backend/img/about-us/notice.gif" class="notice_gif" alt="GIF Home" />
                        </div>-->
                        <div class="col md-6 mt-4 text-center">    
                            <div id="flipdownTimer" class="flipdown d-inline-block"></div>
                            <h6>
                                <script>
                                    document.addEventListener('DOMContentLoaded', () => {
                                        function calculateEndOf4DaysTimestamp() {
                                            var startDate = new Date();
                                            startDate.setHours(0, 0, 0, 0); // Set hours to 00:00:00
                                            var endDate = new Date(startDate.getTime() + (4 * 24 * 60 * 60 * 1000));
                                            return Math.floor(endDate.getTime() / 1000);
                                        }
                            
                                        function startFlipdown() {
                                            var endOf4DaysTimestamp = calculateEndOf4DaysTimestamp();
                                            var flipdown = new FlipDown(endOf4DaysTimestamp, 'flipdownTimer')
                                                .start()
                                                .ifEnded(() => {
                                                    console.log('The countdown has ended!');
                                                    setTimeout(() => {
                                                        document.getElementById('flipdownTimer').innerHTML = ''; // Clear previous countdown
                                                        startFlipdown(); // Start new countdown
                                                    }, 1000); // Wait for 1 second before restarting
                                                });
                                        }
                            
                                        startFlipdown();
                                    });
                                </script>
                            </h6>-->
                            
                            <p style="background:#28B463;color: white;padding: 15px;border-radius: 5px;margin-top: 10px">{!!about_us()->slider_note!!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script src="https://www.powerworkerearn.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>
@endsection
