penjadwalan-ga/resources/views/admin/layouts/app.blade.php

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

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
    <title>@yield('title') &mdash; Robotku</title>
    <link rel="shortcut icon" href="{{ asset('img/shorticon.png') }}">

    <!-- General CSS Files -->
    <link rel="stylesheet" href="{{ asset('admin-assets/bootstrap/dist/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
        integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

    @stack('style')

    <!-- Template CSS -->
    <link rel="stylesheet" href="{{ asset('admin-assets/css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('admin-assets/css/components.css') }}">

    <link rel="stylesheet" href="{{ asset('library/izitoast/dist/css/iziToast.min.css') }}">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <style>
        @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

        h5{
            font-weight: 500;
        }
        *,
        body {
            font-family: "poppins", sans-serif;
        }

        .navbar-bg {
            background-color: #2c2ca9  !important;
        }

        .main-sidebar .sidebar-menu li a {
            height: fit-content;
            padding-block: 4px;
        }

        .main-sidebar .sidebar-menu li a .box,
        .main-sidebar .sidebar-menu li a{
            color: #000;
            width: 100%;
            padding-block: 6px;
            border-radius: 8px;
            transition: .3s;
        }
        body.sidebar-mini .main-sidebar .sidebar-menu > li.active > a{
            color: #fff!important;
        }

        .main-sidebar .sidebar-menu li a:hover .box,
        .main-sidebar .sidebar-menu li.active a,
        .main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a,
        .main-sidebar .sidebar-menu li ul.dropdown-menu li:hover > a{
            color: #f74eb3;
        }

        body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu>li.active>a:before,
        body .sidebar-style-2 .sidebar-menu>li.active>a:before {
            /*display: none;*/
            background-color: #f74eb3;
        }

        body.sidebar-mini .main-sidebar .sidebar-menu>li.active>a,
        body:not(.sidebar-mini) .sidebar-style-2 .sidebar-menu>li.active>a .box {
            /*background-color: #2c2ca9  !important;*/
            color: #f74eb3 !important;

        }

        .main-sidebar .sidebar-menu {
            margin-top: 10px;
        }

        .navbar .nav-link.nav-link-user img {
            border: 2px solid #fff;
            width: 30px;
            height: 30px;
            object-fit: cover;
            object-position: center;
        }

        .box-loader {
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 10000;
            background-color: #00000024;
            display: none;
            justify-content: center;
            align-items: center
        }

        .loader {
            width: 70px;
            aspect-ratio: 1;
            border-radius: 50%;
            border: 8px solid #0000;
            border-right-color: #6777ef;
            position: relative;
            animation: l24 1s infinite linear;
        }

        .loader:before,
        .loader:after {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: inherit;
            animation: inherit;
            animation-duration: 2s;
        }

        .loader:after {
            animation-duration: 4s;
        }

        @keyframes l24 {
            100% {
                transform: rotate(1turn)
            }
        }


        .sort{
            cursor: pointer;
        }
        .sort.asc,
        .sort.desc{
            color: #2c2ca9 !important;
        }
        .sort:after{
            content: "\f105";
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
        }
        .sort.asc:after{
            content: "\f106";
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
        }
        .sort.desc:after{
            content: "\f107";
            font-family: FontAwesome;
            font-style: normal;
            font-weight: normal;
            text-decoration: inherit;
            display: inline-block;
            vertical-align: middle;
            margin-left: 5px;
        }

        #id-table table thead tr th{
            font-weight: 400;
        }

        #id-table table tbody tr td{
            font-weight: 400;
        }
        #id-table .pagination{
            display: flex;
            justify-content: end;
            gap: 5px;
        }
        #id-table .pagination li.active{
            background-color: #f74eb3 ;
        }
        #id-table .pagination li{
            width: 28px;
            background-color: #2c2ca9;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            color: #fff;
        }
        #id-table .pagination li.disabled{
            display: none;
        }
        #id-table .pagination li a{
            color: #fff;
        }


        .iziToast{
            border-radius: 10px!important;
        }
        .iziToast:after{
            border-radius: 10px!important;
        }
        .iziToast-wrapper-bottomRight {
            bottom: 15px!important;
            right: 15px!important;
        }

        .card .card-header{
            border-bottom-color: #e5e5e5!important;
        }
        img.lazy {
            filter: blur(10px);
            transition: filter 0.5s ease-out;
        }

        img.lazy.loaded {
            filter: blur(0);
        }
        .main-sidebar .sidebar-menu li a i{
            margin-right: 5px;
        }
        .main-sidebar .sidebar-menu li.dropdown{
            padding-left: 2px;
        }
        .main-sidebar .sidebar-menu li.dropdown a i{
            margin-right: 10px;
        }

        .bg-light-secondary {
            color: #5b5b5b;
            background-color: #e0e0e0;
            border-radius: 6px !important;
            font-size: .8em;
        }
        .bg-light-danger{
            color: #f64e60;
            background-color: #ffe2e5;
            border-radius: 6px!important;
            font-size: .8em;
        }
        .bg-light-primary{
            color: #5c96fc;
            background-color: #ddeaff;
            border-radius: 6px!important;
            font-size: .8em;
        }
        .bg-light-warning{
            color: #ffa800;
            background-color: #fff4de;
            border-radius: 6px!important;
            font-size: .8em;
        }
        .bg-light-success{
            color: #0bb783;
            background-color: #d7f9ef;
            border-radius: 6px!important;
            /*font-size: .8em;*/
        }
        .bg-light-success:hover{
            color: #0bb783;
            background-color: #a4ecd9;
        }

        .full-text{
            white-space: nowrap;
        }
    </style>

    <!-- Start GA -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-94034622-3"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'UA-94034622-3');
    </script>
    <!-- END GA -->
</head>
</head>

<body>
    {{-- Delete Modal --}}
    <div class="modal fade" id="logoutmodal" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Peringatan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    Apakah kamu yakin ingin logout?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary text-dark" data-dismiss="modal">Tutup</button>
                    <form id="logout-form" action="/logout" method="POST" style="display: none;">
                        @csrf
                        <button type="submit" class="btn btn-primary">Logout</button>
                    </form>
                    <button type="button" class="btn btn-primary"
                        onclick="event.preventDefault(); document.getElementById('logout-form').submit();">Logout</button>
                </div>

            </div>
        </div>
    </div>
    {{-- Akhir modal --}}

    <div id="app">
        <div class="main-wrapper">
            <!-- Header -->
            @include('admin.components.header')

            <!-- Sidebar -->
            @include('admin.components.sidebar')

            <!-- Content -->
            @yield('main')

            <!-- Footer -->
            @include('admin.components.footer')
        </div>
    </div>

    <!-- General JS Scripts -->

    <script src="https://code.jquery.com/jquery-3.7.1.js"
            integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <!-- Menambahkan Popper.js dari CDN -->
{{--    <script src="https://unpkg.com/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>--}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="{{ asset('admin-assets/bootstrap/dist/js/bootstrap.min.js') }}"></script>
    <script src="{{ asset('admin-assets/jquery.nicescroll/dist/jquery.nicescroll.min.js') }}"></script>
    <script src="{{ asset('admin-assets/js/stisla.js') }}"></script>
    <script src="{{ asset('library/listjs/list.min.js') }}"></script>
    <script src="{{ asset('library/izitoast/dist/js/iziToast.min.js') }}"></script>
    @if (session('success'))
        <script>
            iziToast.success({
                title: '',
                backgroundColor: '#fff',
                timeout: 12000,
                position: 'bottomRight',
                overlay: false,
                progressBar: false,
                message: '{{ session('success') }}'
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            iziToast.error({
                title: '',
                theme: 'dark',
                backgroundColor: '#f74eb3',
                color: '#fff',
                titleColor: '#fff',
                iconColor: '#fff',
                messageColor: '#fff',
                timeout: 15000,
                position: 'bottomRight',
                overlay: false,
                progressBar: false,
                message: '{{ session('error') }}'
            });
        </script>
    @endif

    @if ($errors->any())
        <script>
            @foreach ($errors->all() as $error)
            iziToast.error({
                title: 'Error',
                theme: 'dark',
                backgroundColor: '#f74eb3',
                color: '#fff',
                titleColor: '#fff',
                iconColor: '#fff',
                messageColor: '#fff',
                timeout: 15000,
                position: 'bottomRight',
                overlay: false,
                progressBar: false,
                message: '{{ $error }}'
            });
            @endforeach
        </script>
    @endif


    <script>
        function iziToastCustom(type, message){
            if (type === 'success'){
                iziToast.success({
                    title: '',
                    message: message,
                    backgroundColor: '#fff',
                    timeout: 3000,
                    position: 'bottomRight',
                    overlay: false,
                    progressBar: false
                });
            }else if(type === 'fail'){
                iziToast.error({
                    title: '',
                    theme: 'dark',
                    backgroundColor: '#f74eb3',
                    color: '#fff',
                    titleColor: '#fff',
                    iconColor: '#fff',
                    messageColor: '#fff',
                    timeout: 5000,
                    position: 'bottomRight',
                    overlay: false,
                    progressBar: false,
                    message: message
                });
            }else{
                console.info('custom toast undefined!');
            }
        }


        const lazyImages = $('img.lazy');

        const observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    const src = $(img).attr('data-src');

                    if (src) {
                        $(img).attr('src', src).removeAttr('data-src');
                        $(img).on('load', function () {
                            $(img).addClass('loaded');
                        });
                    }

                    observer.unobserve(img);
                }
            });
        });

        // Observasi semua gambar lazy
        setTimeout(() => {
            lazyImages.each(function () {
                observer.observe(this);
            });
        }, 500);
    </script>

    @stack('scripts')

    <!-- Template JS File -->
    <script src="{{ asset('admin-assets/js/scripts.js') }}"></script>
    <script src="{{ asset('admin-assets/js/custom.js') }}"></script>
</body>

</html>