@section('title', 'Biaya dan Jurusan')
@extends('Frontend.Layouts.app2')

@section('content')
    <div class="container mx-auto px-4 lg:px-16 py-10 font-poppins">
        <x-header-section-page title="Biaya dan Jurusan Universitas Darul Ulum Islamic Centre Sudirman" breadcrumb-home="Home"
            breadcrumb-current="Biaya dan Jurusan" />
            
            
        <br><p class="text-lg font-bold mb-3 mt-8 font-poppins text-primary">Gelombang 1 (November 2025 - Februari 2026)</p>
        
        <!-- Biaya Formulir -->
        <div class="swiper mySwiper max-w-[1300px] w-full mt-6">
            <div class="swiper-wrapper space-x-[10px] pb-[20px] md:ps-[20px]">
                <!-- SMA ke S1 -->
                <!-- Loop through s1 kelas reguler -->
                @foreach ($data['non_rpl'] as $program)
                    <div
                        class="swiper-slide bg-white shadow-lg rounded-lg p-5 w-full sm:w-[280px] md:w-[320px] flex flex-col space-y-4">
                        <!-- Judul -->
                        <h3 class="text-lg font-semibold text-primary font-poppins">
                                                    </h3>

                        <!-- Detail Biaya -->
                        <div class="text-sm font-dmsans text-gray-600 space-y-1">
                            <p>Biaya Pendaftaran: <span class="text-primary font-medium">Rp.
                                    0</span></p>
                            <p>Biaya Awal: <span class="text-primary font-medium">Rp.
                                    </span></p>
                            <p>Biaya Bulanan: <span class="text-accent font-medium">Rp. </span></p>
                        </div>

                        <!-- Tombol -->
                        <div class="flex justify-between items-center mt-3 gap-3">
                            <a href="/pendaftaran"
                                class="bg-primary hover:bg-secondary text-white font-medium py-2 px-3 rounded-md text-sm transition-all w-full text-center">Daftar
                                Sekarang</a>
                            <a href="/brosur"
                                class="bg-secondary hover:bg-accent text-white font-medium py-2 px-3 rounded-md text-sm transition-all w-full text-center">Info
                                Lanjut</a>
                        </div>
                    </div>
                @endforeach

                <!-- D3 ke S1 -->
                <!-- Loop through s1 kelas khusu -->
                @foreach ($data['rpl'] as $program)
                    <div
                        class="swiper-slide bg-blue shadow-lg rounded-lg p-5 w-full sm:w-[280px] md:w-[320px] flex flex-col space-y-4">
                        <!-- Judul -->
                        <h3 class="text-lg font-semibold text-primary font-poppins">
                             ( Kelas RPL )
                        </h3>

                        <!-- Detail Biaya -->
                        <div class="text-sm font-dmsans text-gray-600 space-y-1">
                            <p>Biaya Pendaftaran: <span class="text-primary font-medium">Rp.
                                    0</span></p>
                            <p>Biaya Awal: <span class="text-primary font-medium">Rp.
                                    </span></p>
                            <p>Biaya Bulanan: <span class="text-accent font-medium">Rp. </span></p>
                        </div>

                        <!-- Tombol -->
                        <div class="flex justify-between items-center mt-3 gap-3">
                            <a href="/pendaftaran"
                                class="bg-primary hover:bg-secondary text-white font-medium py-2 px-3 rounded-md text-sm transition-all w-full text-center">Daftar
                                Sekarang</a>
                            <a href="/page/14"
                                class="bg-secondary hover:bg-accent text-white font-medium py-2 px-3 rounded-md text-sm transition-all w-full text-center">Info
                                Lanjut</a>
                        </div>
                    </div>
                @endforeach

                <!-- Loop through s1 kelas khusu -->
                @foreach ($data['s2'] as $program)
                    <div
                        class="swiper-slide bg-white shadow-lg rounded-lg p-5 w-full sm:w-[280px] md:w-[320px] flex flex-col space-y-4">
                        <!-- Judul -->
                        <h3 class="text-lg font-semibold text-primary font-poppins">
                                                    </h3>

                        <!-- Detail Biaya -->
                        <div class="text-sm font-dmsans text-gray-600 space-y-1">
                            <p>Biaya Pendaftaran: <span class="text-primary font-medium">Rp.
                                    0</span></p>
                            <p>Biaya Awal: <span class="text-primary font-medium">Rp.
                                    </span></p>
                            <p>Biaya Bulanan: <span class="text-accent font-medium">Rp. </span></p>
                        </div>

                        <!-- Tombol -->
                        <div class="flex justify-between items-center mt-3 gap-3">
                            <a href="/pendaftaran"
                                class="bg-primary hover:bg-secondary text-white font-medium py-2 px-3 rounded-md text-sm transition-all w-full text-center">Daftar
                                Sekarang</a>
                            <a href="/page/14"
                                class="bg-secondary hover:bg-accent text-white font-medium py-2 px-3 rounded-md text-sm transition-all w-full text-center">Info
                                Lanjut</a>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div data-aos="fade-up" class="text-center shadow-xl mt-8">
            <div data-aos="fade-up" class="bg-secondary py-8 rounded-lg">
                <h2 data-aos="fade-up" class="text-xl font-poppins font-bold text-white mb-3">Ubah Masa Depanmu Bersama
                    Universitas Darul Ulum Islamic Centre Sudirman
                </h2>
                <p data-aos="fade-up" class="text-white font-dmsans mb-5">"Belajar dengan hati, sukses dengan ilmu – Daftar
                    di Universitas Darul Ulum Islamic Centre Sudirman sekarang!" </p>
                <a href="/pendaftaran" data-aos="fade-up"
                    class="bg-white text-secondary font-poppins font-medium py-2 px-6 rounded-full shadow-md hover:bg-gray-100 transition">
                    Daftar Sekarang
                </a>
            </div>
        </div>
    </div>
@endsection