@include('admin.layout-admin.head')

<!-- Begin page -->
<div id="layout-wrapper">

    @include('admin.layout-admin.navbar')

    <!-- removeNotificationModal -->
    <div id="removeNotificationModal" class="modal fade zoomIn" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        id="NotificationModalbtn-close"></button>
                </div>
                <div class="modal-body">
                    <div class="mt-2 text-center">
                        <lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop"
                            colors="primary:#495057,secondary:#f06548" style="width:100px;height:100px"></lord-icon>
                        <div class="mt-4 pt-2 fs-15 mx-4 mx-sm-5">
                            <h4 class="fw-bold">Are you sure ?</h4>
                            <p class="text-muted mx-4 mb-0">Are you sure you want to remove this Notification ?</p>
                        </div>
                    </div>
                    <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                        <button type="button" class="btn w-sm btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn w-sm btn-danger" id="delete-notification">Yes, Delete
                            It!</button>
                    </div>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- ========== App Menu ========== -->
    @include('admin.layout-admin.sidebar')
    <!-- Left Sidebar End -->
    <!-- Vertical Overlay-->
    <div class="vertical-overlay"></div>

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12" style="padding: 0 0 35px 0">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">Starter</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">Pages</a></li>
                                    <li class="breadcrumb-item active">Starter</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->
                <div class="col-xxl-12" style="padding: 30px 0 0">
                    <div class="card mt-xxl-n5">
                        <div class="card-header">
                            <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" href="#Tab1"
                                        role="tab">Kelembagaan Masyarakat
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#Tab2" role="tab">
                                       Dukungan Kebijakan terkait Pengendalian Perubahan Iklim
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" href="#Tab3" role="tab">
                                        Partisipasi Masyarakat
                                    </a>
                                </li>
                                {{-- <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#privacy" role="tab">
                                            <i class="far fa-envelope"></i> Privacy Policy
                                        </a>
                                    </li> --}}
                            </ul>
                        </div>
                        <div class="card-body p-4">
                            <div class="tab-content">
                                <div class="tab-pane active" id="Tab1" role="tabpanel">
                                     @include('admin.kelembagaan_masyarakat.kel_masyarakat')
                                    <div class="d-flex align-items-start gap-3 mt-4">
                                        <button type="button"
                                            class="btn btn-success btn-label right ms-auto nexttab nexttab"
                                            onclick="showTab('contact')"><i
                                                class="ri-arrow-right-line label-icon align-middle fs-16 ms-2"></i>Go to
                                            more
                                            info</button>
                                    </div>
                                    <script>
                                        function showTab(tabId) {
                                            // Sembunyikan semua tab
                                            document.querySelectorAll('.tab-content').forEach(tab => {
                                                tab.classList.remove('active');
                                            });

                                            // Tampilkan tab yang dipilih
                                            document.getElementById(tabId).classList.add('active');
                                        }
                                    </script>
                                </div>

                                <!--end tab-pane-->
                                <div class="tab-pane" id="Tab2" role="tabpanel">
                                    @include('admin.kelembagaan_masyarakat.dukungan_kebijakan_proklim')
                                </div>
                                <!--end tab-pane-->
                                <div class="tab-pane" id="Tab3" role="tabpanel">
                                    @include('admin.kelembagaan_masyarakat.partisipasi_masyarakat')
                                </div>
                                <div class="tab-pane" id="Tab3" role="tabpanel">
                                    {{-- @include('admin.adaptasi_perubahan.pengendalian_penyakit') --}}
                                </div>
                                <!--end tab-pane-->
                            </div>
                        </div>
                    </div>
                </div>

                {{-- @include('admin.adaptasi_perubahan.form_adaptasi_perubahan') --}}



            </div>
            <!-- container-fluid -->
        </div>
        <!-- End Page-content -->

        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-sm-6">
                        <script>
                            document.write(new Date().getFullYear())
                        </script> © Proklim.
                    </div>
                    <div class="col-sm-6">
                        <div class="text-sm-end d-none d-sm-block">
                            Dinas Lingkungan Hidup Provinsi DKI Jakarta
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->


<!--start back-to-top-->
<button onclick="topFunction()" class="btn btn-danger btn-icon" id="back-to-top">
    <i class="ri-arrow-up-line"></i>
</button>
<!--end back-to-top-->

<!--preloader-->
<div id="preloader">
    <div id="status">
        <div class="spinner-border text-primary avatar-sm" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
    </div>
</div>

<div class="customizer-setting d-none d-md-block">
    <div class="btn-info btn-rounded shadow-lg btn btn-icon btn-lg p-2" data-bs-toggle="offcanvas"
        data-bs-target="#theme-settings-offcanvas" aria-controls="theme-settings-offcanvas">
        <i class='mdi mdi-spin mdi-cog-outline fs-22'></i>
    </div>
</div>

@include('admin.layout-admin.setting')
@include('admin.layout-admin.script')