@extends('layouts.app')
@section('style')
<style>
    img {
        width: 100%;
        height: auto;
    }

    swiper-container {
        width: 100%;
        height: 100%;
    }

    swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .project-item {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 0 45px rgba(0, 0, 0, .07);
    }
</style>
@endsection
@section('content')
<div>
    <!-- CAROUSEL -->
    <!-- <swiper-container class="mySwiperTop" pagination="true" pagination-clickable="true" navigation="true" space-between="30" centered-slides="true" loop="false" autoplay-delay="2500" autoplay-disable-on-interaction="false">
        @foreach($list_slideshow AS $value)
        <swiper-slide>
            <img loading="lazy" class="lazyload" src="{{URL::asset(config('app.path_images').'/slideshow').'/'.$value->foto}}" style="width: 100%; max-height: 680px; object-fit: cover; aspect-ratio: 16/7.5" alt="...">
        </swiper-slide>
        @endforeach
    </swiper-container> -->

    <!-- Latar Belakang -->
    <section id="latar-belakang">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h3>Latar <span>Belakang</span></h3>
            </div>
            <div class="card">
                <div class="card-body">
                    <figure>
                        <blockquote class="blockquote">
                            <p>“Kita mengarah pada darurat ideologi pancasila. Kita sudah di tepi jurang.”</p>
                        </blockquote>
                        <figcaption class="blockquote-footer">
                            Direktur Pengkajian Materi Badan Pembinaan Ideologi Pancasila (BPIP) Dr Mohd Sabri – Podcast Tribun Manado 21/6/2023
                        </figcaption>
                    </figure>
                    <ul>
                        <li>83,3 Persen Siswa SMA Anggap Pancasila Bisa Diganti  (Survei oleh Setara Institute, Mei 2023)</li>
                        <li>Badan Pusat Statistik (BPS) melaporkan, ada 9,54% atau 26,16 juta penduduk miskin Indonesia pada 2022</li>
                        <li>Sebesar 65% Penduduk Indonesia berpendidikan kurang dari SMP sederajat. (Webinar Hasil Sensus Penduduk Tahun 2020)</li>
                        <li>Berdasarkan data Susenas yang diolah Bappenas tahun 2022, anak usia sekolah (7-18 tahun) yang tidak bersekolah mencapai 4.087.288 anak.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>

    <!-- Solusi -->
    <section id="solusi" class="team section-bg">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h3>Solusi <span>Permasalahan</span></h3>
            </div>
            <div class="card">
                <div class="card-body">
                    <p><strong>Pola Orang Tua Asuh - Anak Asuh</strong> dalam <strong>bidang pendidikan Membumikan Pancasila hingga Umum</strong> adalah salah satu pendekatan bahkan solusi  yang dapat sangat bermanfaat untuk memberdayakan anak-anak dari keluarga miskin (kelompok marginal),  yang dapat dilakukan oleh para <strong>Simpatisan</strong> sebagai upaya mengurangi kesenjangan sosial, membantu mengentaskan kemiskinan  dan mendukung mempersiapkan <strong>“Generasi Indonesia Emas 2045”</strong> yang berkarakter Pancasilais.</p>

                    <h6>Menjadi Orang Tua Asuh</h6>
                    <ul>
                        <li>Menjadi Orang Tua (Bapak/Ibu) Asuh dalam bidang pendidikan merupakan perbuatan mulia dalam upaya mengentaskan kesenjangan sosial dan mengurangi kemiskinan serta mendukung Pendidikan anak – anak dari kelompok marginal dalam menyongsong Generasi Indoenesia Emas 2045 yang berkarakter.</li>
                        <li>Dengan menyisihkan Rp. 10.000/anak /enam bulan maka kita sudah dapat menjadi Orang Tua Asuh dan memberi kesempatan kepada Anak Asuh untuk mendapat program dan materi pendidikan dalam mempersiapkan dan menapak masa depan yang lebih baik, sebagai Orang Tua Asuh juga mendapat Piagam Penghargaan.</li>
                    </ul>

                    <h6>Contoh Piagam Penghargaan</h6>
                    <div class="col-md-6 col-12">
                        <img src="/images/piagam-penghargaan-pengasuh.jpg" alt="piagam-penghargaan" class="img-fluid" width="100" height="100">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Materi Pembelajaran -->
    <section class="services">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h3>Materi <span>Pembelajaran</span></h3>
            </div>
            <div class="row g-2 justify-content-md-center">
                @foreach($materi_pembelajaran AS $key => $value)
                <div class="col-md-6 col-12 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
                    <a target="_blank" href="{{$value->mp_link}}">
                        <div class="project-item card">
                            <div class="card-body position-relative">
                                {{'> '.$value->mp_nama}}
                            </div>
                        </div>
                    </a>
                </div>
                <!-- <div class="col-lg-3 col-md-4 col-sm-6 col-12 mb-2 wow fadeInUp" data-wow-delay="0.1s" style="visibility: visible; animation-delay: 0.1s; animation-name: fadeInUp;">
                    <div class="project-item card">
                        <div class="card-body position-relative">
                            <img class="img-fluid" src="{{ $value->mp_icon }}" alt="1. P3K Sertifikasi Kemnaker RI" width="100" height="100" style="width: 100%; height: auto;; aspect-ratio: 1; object-fit: contain;">
                        </div>
                        <div class="mx-3 my-2">
                            <a class="btn btn-primary btn-block w-100 btn-sm" target="_blank" href="{{$value->mp_link}}">{{$value->mp_nama}}</a>
                        </div>
                    </div>
                </div> -->
                @endforeach
            </div>
        </div>
    </section>

    <!-- Perbandingan Program Membumikan Pancasila dengan Produk Lain -->
    <section id="perbandingan" class="team section-bg">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h3>Perbandingan Program <span>Membumikan Pancasila</span> dengan Produk Lain</h3>
            </div>
            <div class="card">
                <div class="m-2 table-responsive">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th colspan="2"></th>
                                <th>Membumikan Pancasila<br><small>(Khusus untuk Anak Marginal)</small></th>
                                <th>Membumikan Pancasila<br><small>(Harga Normal)</small></th>
                                <th>Ruang G</th>
                                <th>Zen</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td colspan="2">Harga Per 6 Bulan</td>
                                <td>Rp10.000/6 Bulan</td>
                                <td>Rp360.000/6 Bulan</td>
                                <td>Rp600.000/6 Bulan</td>
                                <td>Rp750.000/6 Bulan</td>
                            </tr>
                            <tr>
                                <td colspan="2">Harga Per 1 Bulan</td>
                                <td>Rp1.667/1 Bulan</td>
                                <td>Rp30.000/1 Bulan</td>
                                <td>Rp50.000/1 Bulan</td>
                                <td>Rp62.500/1 Bulan</td>
                            </tr>
                            <tr>
                                <td colspan="2">Pembelajaran Video Umum</td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                            </tr>
                            <tr>
                                <td colspan="2">Pembelajaran Video Pancasila</td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                            </tr>
                            <tr>
                                <td colspan="2">Wasbangbelneg</td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                            </tr>
                            <tr>
                                <td colspan="2">4 Pilar</td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                            </tr>
                            <tr>
                                <td colspan="2">Revolusi Mental</td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                            </tr>
                            <tr>
                                <td colspan="2">Kearifan Lokal</td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-check-circle-fill text-primary"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                            </tr>
                            <tr>
                                <td rowspan="3">Ilmci Teacher</td>
                                <td>QnA</td>
                                <td>300.000 Pertanyaan dan Jawaban</td>
                                <td>500.000 Pertanyaan dan Jawaban</td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                            </tr>
                            <tr>
                                <td>Kerangka Teori</td>
                                <td>30.000 Kerangka Teori</td>
                                <td>50.000 Kerangka Teori</td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                            </tr>
                            <tr>
                                <td>Video</td>
                                <td>10.000 Video</td>
                                <td>30.000 Video</td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                                <td><i class="bi bi-x-circle-fill text-danger"></i></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <section id="paket">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h3>Program <span>Pendidikan</span></h3>
                <!-- <p>Perusahaan-perusahaan yang telah menjalin kerja sama dengan kami hingga saat ini</p> -->
            </div>
            <div class="row row-cols-1 row-cols-sm-2 row-cols-md-2 row-cols-lg-3 mb-3 justify-content-center">
                <div class="col">
                    <div class="card mb-4 rounded-3 shadow-sm">
                        <div class="card-header py-3 text-center">
                            <h4 class="my-0 fw-normal">Silver</h4>
                        </div>
                        <div class="card-body">
                            <h2 class="card-title pricing-card-title text-center"><small class="text-muted fw-light fs-4">Rp</small>500.000<small class="text-muted fw-light">,-</small></h2>
                            <span class="text-start">Benefit :</span>
                            <ul class="list-unstyled mb-4 text-start">
                                <li><i class="bi bi-check2-circle text-primary me-2"></i>Piagam Penghargaan</li>
                                <li><i class="bi bi-check2-circle text-primary me-2"></i>50 Anak Asuh</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4 rounded-3 shadow-sm">
                        <div class="card-header py-3 text-center">
                            <h4 class="my-0 fw-normal">Gold</h4>
                        </div>
                        <div class="card-body">
                            <h2 class="card-title pricing-card-title text-center"><small class="text-muted fw-light fs-4">Rp</small>1.000.000<small class="text-muted fw-light">,-</small></h2>
                            <span class="text-start">Benefit :</span>
                            <ul class="list-unstyled mb-4 text-start">
                                <li><i class="bi bi-check2-circle text-primary me-2"></i>Piagam Penghargaan</li>
                                <li><i class="bi bi-check2-circle text-primary me-2"></i>100 Anak Asuh</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card mb-4 rounded-3 shadow-sm border-primary">
                        <div class="card-header py-3 text-center text-white bg-primary border-primary">
                            <h4 class="my-0 fw-normal">Titan</h4>
                        </div>
                        <div class="card-body">
                            <h2 class="card-title pricing-card-title text-center"><small class="text-muted fw-light fs-4">Rp</small>3.000.000<small class="text-muted fw-light">,-</small></h2>
                            <span class="text-start">Benefit :</span>
                            <ul class="list-unstyled mb-4 text-start">
                                <li><i class="bi bi-check2-circle text-primary me-2"></i>Piagam Penghargaan</li>
                                <li><i class="bi bi-check2-circle text-primary me-2"></i>300 Anak Asuh</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- MITRA INDUSTRI -->
    <!-- <section id="mitra-industri" class="team section-bg">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h3>Mitra <span>Industri</span></h3>
                <p>Perusahaan-perusahaan yang telah menjalin kerja sama dengan kami hingga saat ini</p>
            </div>
            <div class="container">
                <swiper-container class="mySwiper" init="false" autoplay-delay="2500" loop="true" autoplay-disable-on-interaction="false">
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220829_084153.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220829_084607.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220829_084813.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220829_084920.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220829_085135.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220829_085602.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220829_085749.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220829_090051.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220926_085347.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220926_085055.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                    <swiper-slide><img loading="lazy" class="img-thumbnail lazyload" src="{{{ URL::asset(config('app.path_images').'/mitra/20220926_085203.png') }}}" alt="mitra-industri" width="100" height="100"></swiper-slide>
                </swiper-container>
            </div>
        </div>
    </section> -->


</div>
@endsection
@section('javascript')
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
<script>
    // const swiperEl = document.querySelector('.mySwiper')
    // Object.assign(swiperEl, {
    //     slidesPerView: 1,
    //     spaceBetween: 10,
    //     pagination: {
    //         clickable: true,
    //     },
    //     injectStyles: [`
    //         .swiper-pagination {
    //             position: relative !important;
    //         }
    //         `],
    //     breakpoints: {
    //         "@0.00": {
    //             slidesPerView: 2,
    //             spaceBetween: 10,
    //         },
    //         "@0.75": {
    //             slidesPerView: 2,
    //             spaceBetween: 20,
    //         },
    //         "@1.00": {
    //             slidesPerView: 3,
    //             spaceBetween: 30,
    //         },
    //         "@1.25": {
    //             slidesPerView: 4,
    //             spaceBetween: 40,
    //         },
    //         "@1.50": {
    //             slidesPerView: 6,
    //             spaceBetween: 50,
    //         },
    //     },
    // });
    // swiperEl.initialize();
</script>
@endsection