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

<head>
    <meta charset="utf-8">
    <title>{{@$title}} | SLHD</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
    <link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
    <link rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
    
    <link href="{{asset('assets/libs/jsvectormap/css/jsvectormap.min.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/app.min.css')}}" rel="stylesheet" type="text/css">
    <link href="{{asset('assets/css/icons.min.css')}}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{asset('assets/css/bootstrap-table.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/sweetalert.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/toast.min.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/select2/select2.bundle.css')}}">
    <link rel="stylesheet" href="{{asset('assets/css/custom.css')}}">
    <link rel="stylesheet" media="screen, print" href="{{asset('assets/css/datatables/datatables.bundle.css')}}">
    <script src="{{asset('assets/js/config.js')}}"></script>
    <style>
        .menu-text{
            font-size:13px!important;
        }
    </style>
    @yield('css')
</head>

<body>

    <div class="flex wrapper">

        @include('include.sidebar')

        <!-- ============================================================== -->
        <!-- Start Page Content here -->
        <!-- ============================================================== -->

        <div class="page-content">

            <!-- Topbar Start -->
            @include('include.header')
            <!-- Topbar End -->

            <main class="p-6">
                @if(@$breadcrumbs)
                <div class="flex justify-between items-center mb-6">
                    <h4 class="text-slate-900 dark:text-slate-200 text-lg font-medium">{{$title}}</h4>

                    <div class="md:flex hidden items-center gap-2.5 font-semibold">
                        @foreach($breadcrumbs as $k => $dataBread)
                        <div class="flex items-center gap-2">
                            @if($k != 0)
                            <i class="ri-arrow-right-s-line text-base text-slate-400 rtl:rotate-180"></i>
                            @endif
                            <a href="#" class="text-sm font-medium text-slate-700 dark:text-slate-400">{{$dataBread['name']}}</a>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif

                @yield('content')

            </main>

            <!-- Footer Start -->
            <footer class="footer h-16 flex items-center px-6 bg-white shadow dark:bg-gray-800 mt-auto">
                <div class="flex md:justify-between justify-center w-full gap-4">
                    <div>
                        <script>document.write(new Date().getFullYear())</script> © Dinas Lingkungan Hidup Provinsi DKI Jakarta</a>
                    </div>
                </div>
            </footer>
            <!-- Footer End -->

        </div>

        <!-- ============================================================== -->
        <!-- End Page content -->
        <!-- ============================================================== -->

    </div>

    <!-- Plugin Js -->
    <script src="{{asset('assets/libs/simplebar/simplebar.min.js')}}"></script>
    <script src="{{asset('assets/libs/lucide/umd/lucide.min.js')}}"></script>
    <script src="{{asset('assets/libs/@frostui/tailwindcss/frostui.js')}}"></script>

    <!-- App Js -->
    <script src="{{asset('assets/js/jquery.min.js')}}"></script>
    <script src="{{asset('assets/js/app.js')}}"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{asset('assets/js/bootstrap-table.min.js')}}"></script>
    <script src="{{ asset('assets/js/sweetalert.min.js') }}"></script>
    <script src="{{asset('assets/js/toast.min.js')}}"></script>
    <script src="{{asset('assets/js/select2/select2.bundle.js')}}"></script>
    <script type="text/javascript" src="{{asset('assets/js/datatables/datatables.bundle.js')}}"></script>
    <script>
            $(document).ready(function() {
                $('.select2').select2();
                $('.numberInput').on('input', function() {
                    this.value = this.value.replace(/[^0-9]/g, ''); // Hanya angka 0-9
                });
            });

            @if (Session::get('type')=='error')
                  toastr.error("{{ Session::get('message') }}", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
              @endif
              @if (Session::get('type')=='success')
                  toastr.success("{{ Session::get('message') }}", 'Berhasil!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
              @endif
              @if (Session::get('type')=='warning')
                  toastr.warning("{{ Session::get('message') }}", 'Whoopss!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
              @endif
              @if (Session::get('type')=='info')
                  toastr.info("{{ Session::get('message') }}", 'Info!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
              @endif
    </script>

    <!-- Dashboard App js -->
    @yield('js')
    <script>
    $('#button-toggle-menu').on('click',function(){
        $('.text-menu').toggle();
    });
 </script>
</body>

</html>