@section('title', 'Program Studi')

@extends('Frontend.Layouts.app')
@section('content')
<div class="min-h-screen h-auto flex flex-col items-center md:flex-row justify-center md:justify-start py-8 md:py-[100px] px-4 md:px-[200px] bg-right-top bg-cover bg-no-repeat"
    style="background-image: url('{{ asset('./images/background/bg-1.png') }}');">
    <div class="flex flex-col md:items-start justify-center items-center w-full md:w-[90%] mt-4 md:mt-0" data-aos="fade-up">

        <x-header-section subtext="BIAYA & PROGRAM STUDI {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}"
            subtext-color="#0B3D0B" title=" " title-color="#124185" />

        @foreach($biayas->groupBy('kategori') as $kategori => $biayasByKategori)
            <h1 class="text-3xl md:text-4xl font-bold text-primary font-poppins mb-4 text-center md:text-start w-full">
                {{ $kategori }}
            </h1>

            <div class="swiper mySwiper w-full">
                <div class="swiper-wrapper space-x-[10px] pb-[20px] md:ps-[20px]">
                    @foreach($biayasByKategori as $biaya)

                        <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">
                            <h3 class="text-lg font-semibold text-primary font-poppins">{{ $biaya->jurusan }}</h3>
                            <div class="text-sm font-dmsans text-gray-600 space-y-1">
                                <p>Biaya Registrasi Pendaftaran:
                                    <span class="text-primary font-medium">
                                        <!--BIAYA PENDAFtARAN-->
                                        @if($kategori == 'Kelas Hybrid')
                                            {{ $settings['s1'] ?? 'tidak tersedia' }}
                                        @elseif($kategori == 'Kelas Karyawan')
                                            {{ $settings['s1'] ?? 'tidak tersedia' }}
                                        @elseif($kategori == 'Kelas Reguler Sore')
                                            {{ $settings['s1'] ?? 'tidak tersedia' }}
                                        @else
                                            Tidak tersedia
                                        @endif
                                    </span>
                                </p>
                                <p>Biaya Awal: <span class="text-primary font-medium">Rp. {{ number_format($biaya->biaya_awal, 0, ',', '.') }}</span></p>
                                <p>Biaya Bulanan: <span class="text-primary font-medium">Rp. {{ number_format($biaya->biaya_spp, 0, ',', '.') }}</span></p>
                            </div>
                            <div class="flex justify-between items-center mt-3 gap-3">
                                <a href="/pendaftaran" class="bg-primary hover:bg-primary font-medium py-2 px-3 rounded-md text-sm transition-all w-full text-center text-white">Daftar Sekarang</a>
                                <a href="/brosur" class="bg-primary hover:bg-primary font-medium py-2 px-3 rounded-md text-sm transition-all w-full text-center text-white">Informasi</a>
                            </div>
                        </div>
                    @endforeach
                </div><br>
                <div class="swiper-pagination mt-2"></div>
            </div>
        @endforeach

        <div data-aos="fade-up" class="flex md:items-center justify-center items-center flex-col w-full pt-5">
            <div class="w-full h-[1px] bg-blue-900 my-4"></div>
            <p class="text-center md:text-start mb-5 text-[14px] font-dmsans md:text-[14px] lg:text-[16px]">
                Bersama {{ $settings['nama kampus'] ?? 'Nama kampus tidak tersedia' }}, kami hadir untuk membangun masa depan gemilang melalui program studi terbaik, pengajaran berkualitas, dan fasilitas modern yang dirancang untuk mendukung langkah suksesmu.
            </p>
            <a class="bg-yellow-400"url="/pendaftaran">PENDAFTARAN ONLINE</a>
        </div>
    </div>
</div>
@endsection