@extends('theme')
@section('content')
    <main class="main">

        <!-- Hero Section -->
        <section id="hero" class="hero section dark-background">

            <img src="{{ asset('storage/' . $banner->image) }}" alt="" data-aos="fade-in">

            <div class="container">
                <h2 data-aos="fade-up" data-aos-delay="100">PKBM<br>Cinta Damai</h2>

                <div class="d-flex mt-4" data-aos="fade-up" data-aos-delay="300">
                    <a href="{{ $register->link }}" target="_blank" class="btn-get-started">Daftar Sekarang</a>
                </div>
            </div>

        </section><!-- /Hero Section -->

        <!-- About Section -->
        <section id="about" class="about section">

            <div class="container">

                <div class="row gy-4">


                    <div class="col-lg-12 order-lg-1 content order-2" data-aos="fade-up" data-aos-delay="200">
                        <h3>Tentang Kami</h3>
                        <p class="fst-italic">
                            {!! $profile->short_profile !!}
                        </p>

                        <a href="/about" class="read-more"><span>Selengkapnya</span><i class="bi bi-arrow-right"></i></a>
                    </div>

                </div>

            </div>

        </section><!-- /About Section -->

        <!-- Counts Section -->
        <section id="counts" class="section counts light-background">

            <div class="container" data-aos="fade-up" data-aos-delay="100">

                <div class="row gy-4">

                    <div class="col-lg-3 col-md-6">
                        <div class="stats-item w-100 h-100 text-center">
                            <span data-purecounter-start="0" data-purecounter-end="{{ $totalStudents }}"
                                data-purecounter-duration="1" class="purecounter"></span>
                            <p>Siswa</p>
                        </div>
                    </div><!-- End Stats Item -->

                    <div class="col-lg-3 col-md-6">
                        <div class="stats-item w-100 h-100 text-center">
                            <span data-purecounter-start="0" data-purecounter-end="3" data-purecounter-duration="1"
                                class="purecounter"></span>
                            <p>Program</p>
                        </div>
                    </div><!-- End Stats Item -->

                    <div class="col-lg-3 col-md-6">
                        <div class="stats-item w-100 h-100 text-center">
                            <span data-purecounter-start="0" data-purecounter-end="{{ $totalTeacher }}"
                                data-purecounter-duration="1" class="purecounter"></span>
                            <p>Guru</p>
                        </div>
                    </div><!-- End Stats Item -->

                    <div class="col-lg-3 col-md-6">
                        <div class="stats-item w-100 h-100 text-center">
                            <span data-purecounter-start="0" data-purecounter-end="{{ $totalAlumni }}"
                                data-purecounter-duration="1" class="purecounter"></span>
                            <p>Lulusan</p>
                        </div>
                    </div><!-- End Stats Item -->

                </div>

            </div>

        </section><!-- /Counts Section -->

        <!-- Why Us Section -->
        <section id="why-us" class="section why-us">

            <div class="container">

                <div class="row gy-4">

                    <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
                        <div class="why-box">
                            <h3>Kenapa Kami</h3>
                            <p>
                                Kami menyelenggarakan Pendidikan Terbaik untuk semua masyarakat
                            </p>

                        </div>
                    </div><!-- End Why Box -->

                    <div class="col-lg-8 d-flex align-items-stretch">
                        <div class="row gy-4" data-aos="fade-up" data-aos-delay="200">
                            @foreach ($program as $data)
                                <div class="col-xl-4">
                                    <div class="icon-box d-flex flex-column justify-content-center align-items-center">
                                        <i class="bi bi-mortarboard"></i>
                                        <h4>{{ $data->name }}</h4>
                                        <p>{{ substr($data->description, 0, 100) }} ...</p>
                                    </div>
                                </div><!-- End Icon Box -->
                            @endforeach
                        </div>
                    </div>

                </div>

            </div>

        </section><!-- /Why Us Section -->

        <!-- Features Section -->
        <section id="features" class="features section">

            <div class="container">

                <div class="row gy-4">
                    @foreach ($app as $data)
                        <div class="col-lg-3 col-md-4" data-aos="fade-up" data-aos-delay="100">
                            <div class="features-item">
                                <i class="bi bi-link" style="color: #ffbb2c;"></i>
                                <h3><a href="{{ $data->link }}" class="stretched-link">{{ $data->name }}</a></h3>
                            </div>
                        </div><!-- End Feature Item -->
                    @endforeach
                </div>

            </div>

        </section><!-- /Features Section -->

        <!-- Courses Section -->
        <section id="courses" class="courses section">

            <!-- Section Title -->
            <div class="section-title container" data-aos="fade-up">
                <h2>Informasi</h2>
                <p>Infromasi Terbaru</p>
            </div><!-- End Section Title -->

            <div class="container">

                <div class="row">
                    @foreach ($news as $data)
                        <div class="col-lg-4 col-md-6 d-flex align-items-stretch" data-aos="zoom-in" data-aos-delay="100">
                            <div class="course-item">
                                <img src="{{ asset('storage/' . $data->image) }}" class="img-fluid" alt="...">
                                <div class="course-content">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <p class="category">{{ $data->type }}</p>
                                        <p class="price">{{ $data->created_at->diffForHumans() }}</p>
                                    </div>

                                    <h3><a href="/postdetail/{{ $data->slug }}">{{ $data->title }}</a></h3>
                                    <p class="description">{!! substr($data->description, 0, 100) !!}.</p>
                                    <div class="trainer d-flex justify-content-between align-items-center">
                                        <div class="trainer-profile d-flex align-items-center">

                                            <a href="" class="trainer-link">Admin</a>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div> <!-- End Course Item-->
                    @endforeach
                </div>

            </div>

        </section><!-- /Courses Section -->

        <!-- Trainers Index Section -->
        <!--<section id="trainers-index" class="section trainers-index">-->

        <!--    <div class="container">-->

        <!--        <div class="row">-->
        <!--            @foreach ($stucture as $data)-->
        <!--                <div class="col-lg-4 col-md-6 d-flex" data-aos="fade-up" data-aos-delay="100">-->
        <!--                    <div class="member">-->
        <!--                        <img src="{{ asset('storage/' . $data->image) }}" class="img-fluid" alt="">-->
        <!--                        <div class="member-content">-->
        <!--                            <h4>{{ $data->name }}</h4>-->
        <!--                            <span>{{ $data->position }}</span>-->


        <!--                        </div>-->
        <!--                    </div>-->
        <!--                </div><!-- End Team Member -->
        <!--            @endforeach-->
        <!--        </div>-->

        <!--    </div>-->

        <!--</section><!-- /Trainers Index Section -->

    </main>
@endsection