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

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>{{$title}}</title>
    <link rel="icon" type="image/x-icon" href="{{asset('assets/img/paja_logo_2.png')}}">
    <!-- Custom fonts for this template-->
    <link href="{{ asset('/') }}assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="{{ asset('/') }}assets/css/sb-admin-2.css" rel="stylesheet">
    <link href="{{ asset('/') }}assets/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">    
    <link href="{{asset('assets/css/dropify.css')}}" rel="stylesheet">
    <link id="dynamic-css1" href="{{asset('assets/css/custom-admin.css')}}" rel="stylesheet">
    <link href="{{ asset('/') }}assets/css/bootstrap-datepicker3.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    @stack('css-app')
    <style>
        <style>
   .cus-logout {
            position: absolute;
            bottom: 0;
        }

            .cus-logout .nav-link, .cus-logout .nav-link i {
                color: rgba(255, 0, 0, 1) !important;
            }

        hr.sidebar-divider {
            margin-right: 0 !important;
            margin-left: 0 !important;
        }

        .demo-chart {
            height: 18rem;
            width: 18rem;
        }

        .chart-kotak {
            height: 25rem !important;
        }

        .download-btn {
            width: 4rem;
            height: 2rem;
            padding: 2px !important;
        }

        .nav-tabs.custom-tabs {
            width: max-content;
            /* padding-left: 1rem;
            padding-right: 1rem; */
            background-color: #fff;
            border-radius: 2rem;
        }

        .nav-tabs.custom-tabs .nav-item, .nav-tabs.custom-tabs .nav-item .nav-link {
            border-radius: 2rem;
            color: #000;
        }

        .nav-tabs.custom-tabs .nav-item .nav-link.active {
            border: 0;
            background-color: aliceblue;
            color: #395bcf;
        }

        .sidebar hr.sidebar-divider {
            margin: 0;
        }

        .span-nav {
            color: #cac5c2;
            font-size: .85rem;
            margin-top: 1rem;
            margin-left: 1.2rem;
        }
        .toggled > .nav-item.p-3 {
            padding: 0 !important;
        }
        .toggled > .span-nav {
            text-align: center;
            margin-left: 0;
        }
        .toggled > .nav-item > .nav-link > .fas.mr-2 {
            margin-right: 0 !important;
        }
        @@media screen and (min-width: 768px) {
            .sidebar.toggled
            {
                display: none;
            }
        }
</style>
    </style>
</head>
<body id="page-top">

@yield('content-app')
<script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>

<script src="{{ asset('/') }}assets/vendor/jquery/jquery.min.js"></script>
<script src="{{ asset('/') }}assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <!-- Core plugin JavaScript-->
<script src="{{ asset('/') }}assets/vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Custom scripts for all pages-->
<script src="{{ asset('/') }}assets/js/sb-admin-2.min.js"></script>
<!-- endinject -->
<!-- Page level plugins -->
<script src="{{ asset('/') }}assets/vendor/datatables/jquery.dataTables.min.js"></script>
<script src="{{ asset('/') }}assets/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script src="{{ asset('/') }}assets/Scripts/custom.js"></script>
<script src="{{ asset('/') }}assets/vendor/swal/sweetalert2.all.min.js"></script>
<script src="{{ asset('/') }}assets/Scripts/bootstrap-datepicker.js"></script>

<!-- Page level custom scripts -->
<script src="{{ asset('/') }}assets/js/demo/datatables-demo.js"></script>
<script type="text/javascript" src="{{asset('assets/js/moment.min.js')}}"></script>
<script>
    // $(function(){
    //     var current = location.pathname;
    //     console.log(current);
    //     $('.navbar-nav .nav-item a').each(function(){
    //         var $this = $(this);
    //         // if the current path is like this link, make it active
    //         if($this.attr('href').indexOf(current) !== -1){
    //             $this.closest('nav-item').addClass('active');
    //         }
    //     })
    // })
    $(document).ready(function () {
        let path = window.location.href.split('?')[0];
        $(".navbar-nav a.nav-link").each(function () {
            if (this.href === path) {

                $(this).addClass("active");
                var level = $(this).parent();
                if (level.is('nav')) {
                    level.parent().addClass("show");
                    level.parent().prev().addClass("active");
                }
            }
        });
    });
</script>
<script>
    window.addEventListener('load', updateCSSVersion);
    function updateCSSVersion() {
        const version = getCurrentVersionDate();
        const cssLink1 = document.getElementById('dynamic-css1');
        // const cssLink2 = document.getElementById('dynamic-css2');
        cssLink1.href = `{{asset('assets/css/custom-admin.css')}}?v=${version}`;
        // cssLink2.href = `{{asset('css/new-custom-app.css')}}?v=${version}`;
        // console.log(cssLink.href);
    }
    function getCurrentVersionDate() {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0'); // Add 1 to month since it's zero-based
        const day = String(currentDate.getDate()).padStart(2, '0');
        const hours = String(currentDate.getHours()).padStart(2, '0');
        const minutes = String(currentDate.getMinutes()).padStart(2, '0');
        const seconds = String(currentDate.getSeconds()).padStart(2, '0');

        return `${year}${month}${day}${hours}${minutes}${seconds}`;
    }

</script>
@stack('js-app')

</body>

</html>
