@extends('layout.app')
@section('content')

<br>
<div class="card">
    <div class="card-side bg-color-primary text-3 text-uppercase ">Komunitas Peduli Sungai Wilayah Sungai Mahakam</div>
    <div class="col-12 col-lg-12">
        <hr> <!-- Post Content -->
        <p class="mx-2"> <b>
            Komunitas Masyarakat Peduli Sungai (KMPS) adalah kelompok masyarakat yang bersatu untuk menjaga, 
            melestarikan, dan memulihkan kondisi sungai dan ekosistem di sekitarnya. Komunitas Masyarakat Peduli Sungai (KMPS)
            terlibat dalam berbagai kegiatan seperti pemeliharaan sungai, pengawasan aktivitas sosial di sepanjang infrastruktur sungai, dan edukasi masyarakat tentang pentingnya menjaga kebersihan sungai.
            </b>
        </p>
        <p class="mx-2"><b>
            Tujuan utama Komunitas Masyarakat Peduli Sungai (KMPS) adalah:

            </b></p>

        <ul>
            <li>Menciptakan kesadaran akan pentingnya sungai dalam kehidupan sehari-hari;</li>
            <li>Menjaga keberlanjutan ekosistem air;</li>
            <li>Mengatasi masalah pencemaran atau degradasi sungai.
            </li>
        </ul>

        <div class="toggle toggle-primary toggle-lg" data-plugin-toggle="">
            <section class="toggle"> <a class="toggle-title appear-animation animated maskUp appear-animation-visible"
                    data-appear-animation="maskUp" data-appear-animation-delay="300"
                    style="animation-delay: 300ms;">Daftar Komunitas Masyarakat Peduli Sungai (KMPS)</a>
                <div class="toggle-content">
                    <p class="mx-2"> Sampai dengan saat ini Komunitas Masyarakat Peduli Sungai (KMPS) yang telah terbentuk sebanyak xx KMPS dengan rincian sebagai berikut:. </p>
                    <table class="table table-bordered">
                        <thead class="text-center">
                            <tr>
                                <th>Nomor</th>
                                <th>Nama KMPS</th>
                                <th>Tahun Pendirian</th>
                                <th>Nomor Akta Notaris</th>
                                <th>Wilayah Operasional</th>
                                <th>Detail</th>
                            </tr>
                        </thead>
                        <tbody class="text-center">
                            <tr>
                                <td>1</td>
                                <td>Deluga</td>
                                <td>2019</td>
                                <td>10/dd/222/2029</td>
                                <td>Sub Das Karang Mumus Kota Samarinda</td>
                                <td>
                                    <div class="btn-group gap-2" role="group" aria-label="Basic example">
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fas fa-eye"></i> Detail</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>Deluga</td>
                                <td>2019</td>
                                <td>10/dd/222/2029</td>
                                <td>Sub Das Karang Mumus Kota Samarinda</td>
                                <td>
                                    <div class="btn-group gap-2" role="group" aria-label="Basic example">
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fas fa-eye"></i> Detail</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>Deluga</td>
                                <td>2019</td>
                                <td>10/dd/222/2029</td>
                                <td>Sub Das Karang Mumus Kota Samarinda</td>
                                <td>
                                    <div class="btn-group gap-2" role="group" aria-label="Basic example">
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fas fa-eye"></i> Detail</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>Deluga</td>
                                <td>2019</td>
                                <td>10/dd/222/2029</td>
                                <td>Sub Das Karang Mumus Kota Samarinda</td>
                                <td>
                                    <div class="btn-group gap-2" role="group" aria-label="Basic example">
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fas fa-eye"></i> Detail</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>Deluga</td>
                                <td>2019</td>
                                <td>10/dd/222/2029</td>
                                <td>Sub Das Karang Mumus Kota Samarinda</td>
                                <td>
                                    <div class="btn-group gap-2" role="group" aria-label="Basic example">
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fas fa-eye"></i> Detail</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>Deluga</td>
                                <td>2019</td>
                                <td>10/dd/222/2029</td>
                                <td>Sub Das Karang Mumus Kota Samarinda</td>
                                <td>
                                    <div class="btn-group gap-2" role="group" aria-label="Basic example">
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fas fa-eye"></i> Detail</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>Deluga</td>
                                <td>2019</td>
                                <td>10/dd/222/2029</td>
                                <td>Sub Das Karang Mumus Kota Samarinda</td>
                                <td>
                                    <div class="btn-group gap-2" role="group" aria-label="Basic example">
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fas fa-eye"></i> Detail</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>1</td>
                                <td>Deluga</td>
                                <td>2019</td>
                                <td>10/dd/222/2029</td>
                                <td>Sub Das Karang Mumus Kota Samarinda</td>
                                <td>
                                    <div class="btn-group gap-2" role="group" aria-label="Basic example">
                                        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fas fa-eye"></i> Detail</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </section>
          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog  modal-dialog-centered modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
        
                        <iframe src="./doc/majalah-FKM-UI_edisi-13.pdf" width="100%" height="100%"
                        style="width:100%; height:500px;" frameborder="0"></iframe>
        
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
              </div>
            </div>
          </div>
      </div>
        </div>
    </div>
</div>

@endsection