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

<head>
    <meta charset="utf-8">
    <title>DIKPLHD | Dinas Lingkungan Hidup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="shortcut icon" href="{{asset('assets/logo-dlh.png')}}">
    <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>

    @yield('css')
</head>

<body class="">
    <nav class="relative bg-gradient-to-r from-cyan-500 to-success mix-blend-multiply blur-3xl">
        <div class="container mx-auto">
            <div class="flex justify-between items-center px-5 py-5">
                <div class="flex flex-row items-center gap-3">
                    <div class="p-1 bg-white rounded-full">
                        <img src="{{asset('assets/logo-dlh.png')}}" width="40" alt="">
                    </div>
                    <div>
                        <h5 class="text-white bold text-2xl">DIKPLHD</h5>
                        <h5 class="text-white ">Dinas Lingkungan Hidup</h5>
                    </div>
                </div>
                <div class="flex flex-row gap-10">
                    <a class="text-white font-bold" href="{{url('/')}}">Home</a>
                    <a class="text-white font-bold" href="{{url('/search?page=opd')}}">OPD</a>
                    <a class="text-white font-bold" href="{{url('/search?page=dataset')}}">Dataset</a>
                </div>
                <div>
                    <a class="btn text-white font-bold" href="{{url('login')}}">Login&nbsp;<i class="ri-login-box-line"></i></a>
                </div>
            </div>
        </div>
    </nav>
    
    @yield('content')

    <div class="p-12 text-white" style="background:#333;">
        <div class="container">
            <div class="flex flex-row justify-between items-center gap-6 mb-5">
                <div>
                    <p>
                        Kontak Kami : <br>

                        Jl. Mandala V No. 67 Jakarta Timur <br>

                        Telp: (021) 8092744  <br>

                        Email:dinaslh@jakarta.go.id
                    </p>
                </div>
                <div class="flex flex-row justify-center items-center gap-2">
                    <div class="p-1 bg-white rounded-full">
                        <img src="https://lingkunganhidup.jakarta.go.id/images/weblink/logo_klhk.png" width="40" alt="">
                    </div>
                    <div class="p-1 bg-white rounded-full">
                        <img src="https://lingkunganhidup.jakarta.go.id/images/weblink/logoaja-jsc.png" width="40" alt="">
                    </div>
                    <div class="p-1 bg-white rounded-full">
                        <img src="https://lingkunganhidup.jakarta.go.id/images/weblink/UPsbadanaer.jpg" width="40" alt="">
                    </div>
                    <div class="p-1 bg-white rounded-full">
                        <img src="https://lingkunganhidup.jakarta.go.id/images/weblink/sipepeng1.jpg" width="40" alt="">
                    </div>
                    <div class="p-1 bg-white rounded-full">
                        <img src="https://lingkunganhidup.jakarta.go.id/images/weblink/logo-jca2.png" width="40" alt="">
                    </div>
                    <div class="p-1 bg-white rounded-full">
                        <img src="https://lingkunganhidup.jakarta.go.id/images/weblink/logo-dlh.png" width="40" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex flex-row items-center text-center justify-center p-4 text-white" style="background:#333;">
        <p>Copyright © {{date('Y')}} Dinas Lingkungan Hidup Provinsi DKI Jakarta. All Right Reserved</p>
    </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')
</body>

</html>