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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Dashboard</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="{{ asset('assets/vendor/fontawesome/css/fontawesome.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/fontawesome/css/solid.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/fontawesome/css/brands.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/master.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/vendor/flagiconcss/css/flag-icon.min.css') }}" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <link href="https://cdn.datatables.net/1.11.4/css/dataTables.bootstrap5.min.css" rel="stylesheet">

    <style>
        .current-datetime {
            font-size: 16px;
            color: black;
        }

        .changed-time {
            margin-top: 17px;
            color: red;
            font-weight: bold;
        }

        .active-navbar {
            background-color: #2196F3;
            /* Set the background color */
            color: #000000;
            font-weight: bold;
        }
        .page-header{
            padding: 15px 20px;
            background: #fff;
            border-top: 1px solid #f9f9f9;
            margin-top: 0px;
        }
        .page-header h2{
            font-weight: 600;
        }
    </style>
    @yield('style')
</head>

<body>
    <div class="wrapper">
        @include('admin.layouts.sidebar')
        <div id="body" class="active">
            <!-- navbar navigation component -->
            @include('admin.layouts.header')
            <!-- end of navbar navigation -->
            @if(request()->routeIs('admin.dashboard'))
            <div class="col-md-12 page-header">
                <h2 class="page-title">Dashboard</h2>
            </div>
            @elseif(request()->routeIs('admin.advertisements.index'))
            <div class="col-md-12 page-header">
                <h2 class="page-title">Manage Advertisements</h2>
            </div>
            @endif
            
            <div class="content">
                <div class="container">
                    @yield('content')

                </div>
            </div>
        </div>
    </div>
    <script src="{{ asset('assets/vendor/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/script.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc="
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
    <script src="https://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
    </script>
    <script src="https://cdn.datatables.net/1.11.4/js/dataTables.bootstrap5.min.js"></script>

    <script>
        function updateDateTime() {
            var datetimeElement = document.getElementById("datetime");
            var currentDatetime = new Date();

            var options = {
                weekday: 'long',
                month: 'long',
                day: 'numeric',
                year: 'numeric',
                hour: 'numeric',
                minute: 'numeric',
                second: 'numeric'
            };
            var currentDatetimeString = currentDatetime.toLocaleDateString('en-US', options);

            datetimeElement.innerText = currentDatetimeString;

            // Get the current time and check if it has changed
            var currentTime = currentDatetime.getTime();
            if (datetimeElement.dataset.lastTime && datetimeElement.dataset.lastTime !== currentTime.toString()) {
                datetimeElement.classList.add("changed-time");
            } else {
                datetimeElement.classList.remove("changed-time");
            }
            datetimeElement.dataset.lastTime = currentTime.toString();
        }

        // Call the updateDateTime function initially
        updateDateTime();

        // Update the datetime every second
        setInterval(updateDateTime, 1000);


        $(document).ready(function() {
            $('.nav-item.dropdown').on('click', function() {
                $(this).find('.dropdown-menu').toggle();
            });
        });

        // Function to open the modal popup
        $(document).ready(function() {
            $('#logout-button').click(function() {
                $('#logout-form').submit();
            });
        });
    </script>
    @stack('scripts')
</body>

</html>
