<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SPMB SMK PGRI 01 Sukorejo</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        :root{
            --biru:#0b2c4d;
            --ungu:#5a2d82;
            --kuning:#f5c400;
            --putih:#ffffff;
        }

        body{
            font-family: 'Segoe UI', sans-serif;
            background-color: var(--putih);
        }

        /* HEADER */
        .header{
            background: linear-gradient(135deg, var(--biru), var(--ungu));
            color: white;
            padding: 20px 0;
        }

        .logo{
            width: 90px;
        }

        /* HERO */
        .hero{
            background: linear-gradient(135deg, var(--biru), var(--ungu));
            color: white;
            padding: 80px 20px;
            text-align: center;
        }

        .hero h1{
            font-weight: bold;
        }

        .hero p{
            font-size: 18px;
            opacity: 0.95;
        }

        /* BUTTON */
        .btn-daftar{
            background-color: var(--kuning);
            color: var(--biru);
            font-weight: bold;
            padding: 14px 34px;
            border-radius: 30px;
            border: none;
            transition: 0.3s;
        }

        .btn-daftar:hover{
            background-color: #e0b300;
            transform: scale(1.03);
        }

        /* JURUSAN */
        .jurusan-section{
            padding: 60px 20px;
            background-color: #f5f7fb;
        }

        .jurusan-title{
            text-align: center;
            font-weight: bold;
            color: var(--ungu);
            margin-bottom: 40px;
        }

        .jurusan-card{
            background: white;
            border-radius: 18px;
            padding: 30px;
            text-align: center;
            height: 100%;
            box-shadow: 0 8px 20px rgba(0,0,0,0.08);
            transition: 0.3s;
        }

        .jurusan-card:hover{
            transform: translateY(-8px);
        }

        .jurusan-icon{
            font-size: 42px;
            margin-bottom: 15px;
            color: var(--biru);
        }

        .jurusan-card h5{
            font-weight: bold;
            color: var(--ungu);
        }

        .jurusan-card p{
            font-size: 15px;
            color: #555;
        }

        /* INFO */
        .info{
            background-color: #f8f9fa;
            padding: 50px 20px;
        }

        .info h4{
            color: var(--ungu);
            font-weight: bold;
        }

        /* FOOTER */
        footer{
            background: linear-gradient(135deg, var(--biru), var(--ungu));
            color: white;
            padding: 15px;
            text-align: center;
            font-size: 14px;
        }

        @media (max-width: 768px){
            .hero h1{
                font-size: 26px;
            }

            .hero p{
                font-size: 16px;
            }
        }
    </style>
</head>
<body>

<!-- HEADER -->
<div class="header">
    <div class="container d-flex align-items-center gap-3">
        <img src="img/logo_skagris.png" alt="Logo SMK PGRI 01 Sukorejo" class="logo">
        <div>
            <h5 class="mb-0">SPMB ONLINE</h5>
            <small>SMK PGRI 01 Sukorejo</small>
        </div>
    </div>
</div>

<!-- HERO -->
<div class="hero">
    <div class="container">
        <h1>Selamat Datang di Website SPMB 2026/2027</h1>
        <h3 class="mb-3">SMK PGRI 01 Sukorejo</h3>
        <p>
            Selamat Bergabung untuk menuju kesuksesan.<br>
            Sistem Penerimaan Murid Baru Tahun Pelajaran 2026/2027.
        </p>
    </div>
</div>

<!-- JURUSAN -->
<div class="jurusan-section">
    <div class="container">
        <h3 class="jurusan-title">Program Keahlian</h3>

        <div class="row g-4">
            <div class="col-md-4">
                <div class="jurusan-card">
                    <div class="jurusan-icon">💻</div>
                    <h5>Pengembangan Perangkat Lunak dan Gim (PPLG)</h5>
                    <p>
                        Membekali siswa dengan kemampuan pemrograman,
                        pembuatan aplikasi, website, dan sistem informasi
                        sesuai kebutuhan industri digital.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="jurusan-card">
                    <div class="jurusan-icon">🏍️</div>
                    <h5>Teknik & Bisnis Sepeda Motor (TBSM)</h5>
                    <p>
                        Mengembangkan kompetensi perawatan, perbaikan,
                        dan bisnis sepeda motor sesuai standar industri.
                    </p>
                </div>
            </div>

            <div class="col-md-4">
                <div class="jurusan-card">
                    <div class="jurusan-icon">📁</div>
                    <h5>Manajemen Perkantoran & Layanan Bisnis (MPLB)</h5>
                    <p>
                        Menyiapkan siswa menjadi tenaga administrasi
                        profesional dalam layanan perkantoran modern.
                    </p>
                </div>
            </div>
        </div>

<section class="py-5 bg-light">
    <div class="container">
        <h3 class="text-center mb-4">
            Grafik Jumlah Pendaftaran Murid Baru
        </h3>

        <canvas id="grafikPendaftaran"></canvas>
    </div>
</section>


        <!-- BUTTON -->
        <div class="text-center mt-5">
            <a href="<?php echo e(url('/daftar')); ?>" class="btn btn-daftar">
                Daftar Sekarang
            </a>
        </div>
    </div>
</div>

<!-- INFO SEKOLAH -->
<div class="info">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-4">
                <h4>Informasi Sekolah</h4>
                <p>
                    SMK PGRI 01 Sukorejo berkomitmen mencetak lulusan
                    siap kerja, berkarakter, dan berdaya saing tinggi.
                </p>
            </div>

            <div class="col-md-4">
                <h4>Kontak Kami</h4>
                <p>
                    📍 Jalan Raya Sapen No.49 Sukorejo, Kendal<br>
                    📞 0856 4327 6151 ( Nasirin )<br>
                    📞 0882 2549 4462 ( Roziqin )<br>
                    📞 0857 0256 9477 ( Agung )<br>
                    📞 0856 4020 5051 ( Pramita )<br>
                    📧 smkpgri01sukorejo@gmail.com
                </p>
            </div>
            <div class="col-md-4">
                <h4>Berkas Pendaftaran :</h4>
                <p>
                    Fotokopi akte kelahiran<br>
                    Fotokopi kartu keluarga<br>
                    Fotokopi KTP Orang Tua<br>
                    Foto 3x4 berwana ( Background Merah )<br>
                    Fotokopi Raport Semester 1-5 / Transkrip Nilai<br>
                    Fotokopi Ijazah terakhir / Surat Keterangan Lulus<br>
                    Fotokopi KIS, PKH, PKSt, atau yang lainnya ( Jika memiliki )<br>                    
                </p>
            </div>
        </div>
    </div>
</div>

<!-- FOOTER -->
<footer>
    © <?php echo e(date('Y')); ?> timrplskagris | All Rights Reserved
</footer>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>



<script>
    const ctx = document.getElementById('grafikPendaftaran');

    const jurusan = <?php echo json_encode($grafikPendaftaran->pluck('jurusan'), 15, 512) ?>;
    const total = <?php echo json_encode($grafikPendaftaran->pluck('total_pendaftaran'), 15, 512) ?>;

    const warna = [
        '#28be02',
        '#064ef8',
        '#bf0719',
        '#ffc107',
        '#6f42c1',
        '#fd7e14',
        '#20c997'
    ];

    new Chart(ctx, {
        type: 'bar',
        data: {
            labels: jurusan,
            datasets: [{
                label: 'Jumlah Pendaftaran',
                data: total,
                backgroundColor: warna.slice(0, jurusan.length),
                barPercentage: 0.5,
                categoryPercentage: 0.3,
                borderRadius: 8
            }]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: { precision: 0 }
                }
            }
        }
    });
</script>



</body>
</html>
<?php /**PATH C:\xampp\htdocs\spmb-skagris\resources\views/index.blade.php ENDPATH**/ ?>