<?php
// Aktifkan tampilan error
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);

// Koneksi ke database
require_once '../admin/config.php';
$conn = connectDB();

// Default: hasil tidak ditampilkan
$show_results = '0';

// Cek status penampilan hasil
$status_sql = "SELECT setting_value FROM settings WHERE setting_name = 'show_results'";
$status_result = $conn->query($status_sql);
if ($status_result && $status_result->num_rows > 0) {
    $show_results = $status_result->fetch_assoc()['setting_value'];
}

// Ambil cabang lomba dari parameter GET jika ada
$id_cabang_lomba = isset($_GET['cabang']) ? (int)$_GET['cabang'] : null;

// Array untuk menyimpan peserta berdasarkan cabang lomba
$pesertaPerCabangLomba = [];

// Jika status penampilan hasil aktif
if ($show_results == '1') {
    $sql_base = "SELECT 
    p.nisn_peserta,
    COALESCE(dk.Nama_Peserta, dkb.Nama_Peserta, dkb2.Nama_Peserta) as nama_peserta,
    COALESCE(dk.Nama_Sekolah, dkb.Nama_Sekolah, dkb2.Nama_Sekolah) as nama_sekolah,
    cl.Bidang_Lomba,
    cl.ID as id_cabang_lomba,
    SUM(p.nilai_total) as total_nilai,
    COUNT(p.id) as jumlah_juri,
    CASE 
        WHEN dk.NISN IS NOT NULL THEN 'kota_salatiga'
        WHEN dkb2.NISN IS NOT NULL THEN 'kabupaten_demak'
        ELSE 'kabupaten_semarang'
    END as region
FROM 
    penilaian p
    LEFT JOIN domisilikota dk ON p.nisn_peserta = dk.NISN AND p.domisili = 'kota_salatiga'
    LEFT JOIN domisilikabupaten dkb ON p.nisn_peserta = dkb.NISN AND p.domisili = 'kabupaten_semarang'
    LEFT JOIN domisilikabupaten2 dkb2 ON p.nisn_peserta = dkb2.NISN AND p.domisili = 'kabupaten_demak'
    LEFT JOIN cabang_lomba cl ON p.id_cabang_lomba = cl.ID
WHERE 
    1=1";

    // Filter cabang jika dipilih
    if (!empty($id_cabang_lomba)) {
        $sql_base .= " AND p.id_cabang_lomba = $id_cabang_lomba";
    }

    // Kelompokkan dan urutkan peserta
    $sql_base .= "
        GROUP BY p.nisn_peserta, cl.ID, region, cl.Bidang_Lomba,
                 dk.Nama_Peserta, dkb.Nama_Peserta, dkb2.Nama_Peserta,
                 dk.Nama_Sekolah, dkb.Nama_Sekolah, dkb2.Nama_Sekolah,
                 dk.NISN, dkb.NISN, dkb2.NISN
        ORDER BY cl.ID, region, total_nilai DESC";

    $result = $conn->query($sql_base);

    if ($result && $result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $cabangLombaId = $row['id_cabang_lomba'];
            $region = $row['region'];

            // Inisialisasi array cabang lomba jika belum ada
            if (!isset($pesertaPerCabangLomba[$cabangLombaId])) {
                $pesertaPerCabangLomba[$cabangLombaId] = [
                    'nama_cabang' => $row['Bidang_Lomba'],
                    'regions' => [
                        'kota_salatiga' => [],
                        'kabupaten_semarang' => [],
                        'kabupaten_demak' => []
                    ]
                ];
            }

            // Tambahkan peserta ke array berdasarkan region
            if (in_array($region, ['kota_salatiga', 'kabupaten_semarang', 'kabupaten_demak'])) {
                $pesertaPerCabangLomba[$cabangLombaId]['regions'][$region][] = $row;
            }
        }
    }
}

// Ambil semua cabang lomba untuk dropdown/filter
$sql_cabang = "SELECT ID, Bidang_Lomba FROM cabang_lomba ORDER BY Bidang_Lomba";
$result_cabang = $conn->query($sql_cabang);
$cabang_options = [];
if ($result_cabang && $result_cabang->num_rows > 0) {
    while ($row = $result_cabang->fetch_assoc()) {
        $cabang_options[] = $row;
    }
}

// Fungsi untuk menampilkan tabel peringkat peserta
function renderPemenangTable($peserta) {
    // Ambil 10 besar
    $topPeserta = array_slice($peserta, 0, 3);

    if (empty($topPeserta)) {
        return '<div class="py-4 px-6 text-center text-gray-500">Tidak ada data peserta.</div>';
    }

    $output = '
    <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Peringkat</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">NISN</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nama Peserta</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Sekolah</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Nilai Total</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Juri</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200">';

    $rank = 1;
    foreach ($topPeserta as $peserta) {
        $rowClass = '';
        $medalClass = 'top-10';
        $medalIcon = 'award';

        if ($rank == 1) {
            $rowClass = 'gold';
            $medalClass = 'gold';
            $medalIcon = 'trophy';
        } elseif ($rank == 2) {
            $rowClass = 'silver';
            $medalClass = 'silver';
            $medalIcon = 'medal';
        } elseif ($rank == 3) {
            $rowClass = 'bronze';
            $medalClass = 'bronze';
            $medalIcon = 'medal';
        }

        $output .= '
            <tr class="student-row ' . $rowClass . '">
                <td class="px-6 py-4 whitespace-nowrap">
                    <div class="flex items-center">
                        <div class="medal ' . $medalClass . ' mr-2">
                            <i class="fas fa-' . $medalIcon . '"></i>
                        </div>
                        <span class="font-medium">' . $rank . '</span>
                    </div>
                </td>
                <td class="px-6 py-4 text-sm text-gray-500">' . $peserta['nisn_peserta'] . '</td>
                <td class="px-6 py-4 font-medium text-gray-900">' . $peserta['nama_peserta'] . '</td>
                <td class="px-6 py-4 text-sm text-gray-500">' . $peserta['nama_sekolah'] . '</td>
                <td class="px-6 py-4 text-sm font-semibold text-purple-600">' . number_format($peserta['total_nilai'], 2) . '</td>
                <td class="px-6 py-4 text-sm text-gray-500">' . $peserta['jumlah_juri'] . ' Juri</td>
            </tr>';
        $rank++;
    }

    $output .= '</tbody></table>';
    return $output;
}
?>


<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hasil Penilaian FLS3N 2026</title>
    <link rel="shortcut icon" href="..\assets\logoFLS3N.png" type="image/x-icon">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"/>
    <style>
        html, body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8fafc;
            scroll-behavior: smooth;
            height: 100%;
            padding : 0;
            margin: 0;
        }

        /* Wrapper for the entire page content to enable sticky footer */
        .page-wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* Minimal height of viewport */
        }

        /* Main content grows to push footer down */
        .content-wrapper {
            flex: 1 0 auto; /* Grow and don't shrink */
        }

        .main-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 80px;
            background: rgba(157, 23, 77, 0.95);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            z-index: 10;
            box-shadow: 0 4px 20px rgba(157, 23, 77, 0.3);
            transition: all 0.3s ease;
        }

        .main-header:hover {
            background: rgba(157, 23, 77, 1);
        }
        /* Logo styling */
        .logo-container {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .main-header .logo-container img {
            height: 65px;
            transition: transform 0.3s ease;
        }

        .main-header .logo-container img:hover {
            transform: scale(1.05);
        }

        .main-header .logo img {
            height: 65px;
            transition: transform 0.3s ease;
        }

        .main-header .logo img:hover {
            transform: scale(1.05);
        }

        .main-header .instansi-name {
            font-size: 26px;
            font-weight: 700;
            letter-spacing: 1px;
            background: linear-gradient(90deg, #fff, #f0abfc);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
        }

        .page-title {
            position: relative;
            display: inline-block;
        }

        .page-title::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #8b5cf6, #a78bfa);
            border-radius: 4px;
        }

        .filter-card {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .result-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
            border: 1px solid rgba(0, 0, 0, 0.05);
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .result-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .result-header {
            padding: 1.5rem;
            background: linear-gradient(90deg, #8b5cf6, #a78bfa);
            color: white;
        }
        
        .result-subheader {
            border-left: 4px solid #8b5cf6;
        }

        .medal {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .medal.gold {
            background: linear-gradient(45deg, #ffd700, #f59e0b);
        }

        .medal.silver {
            background: linear-gradient(45deg, #c0c0c0, #9ca3af);
        }

        .medal.bronze {
            background: linear-gradient(45deg, #cd7f32, #d97706);
        }

        .medal.top-10 {
            background: linear-gradient(45deg, #8b5cf6, #a78bfa);
        }

        .student-row {
            transition: all 0.3s ease;
        }

        .student-row:hover {
            background-color: #f8f9fa;
        }

        .student-row.gold {
            background-color: rgba(255, 215, 0, 0.1);
        }

        .student-row.gold:hover {
            background-color: rgba(255, 215, 0, 0.2);
        }

        .student-row.silver {
            background-color: rgba(192, 192, 192, 0.1);
        }

        .student-row.silver:hover {
            background-color: rgba(192, 192, 192, 0.2);
        }

        .student-row.bronze {
            background-color: rgba(205, 127, 50, 0.1);
        }

        .student-row.bronze:hover {
            background-color: rgba(205, 127, 50, 0.2);
        }

        .btn-filter {
            background: linear-gradient(90deg, #8b5cf6, #a78bfa);
            color: white;
            border-radius: 8px;
            padding: 0.5rem 1.5rem;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
        }

        .btn-filter:hover {
            box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
            transform: translateY(-2px);
        }

        .btn-back {
            background: linear-gradient(90deg, #9d174d, #db2777);
            color: white;
            border-radius: 8px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            transition: all 0.3s ease;
            border: none;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-back:hover {
            box-shadow: 0 4px 12px rgba(157, 23, 77, 0.3);
            transform: translateY(-2px);
        }

        footer {
            background: linear-gradient(90deg, #9d174d, #be185d);
            color: white;
            text-align: center;
            padding: 1.5rem 0;
            width: 100%;
            box-shadow: 0 -5px 20px rgba(157, 23, 77, 0.2);
            flex-shrink: 0; /* Don't shrink the footer */
        }

        footer p {
            margin: 0;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
        }

        @media (max-width: 768px) {
            .main-header {
                padding: 0 1rem;
                height: 70px;
            }
            
            .main-header .logo-container img {
                height: 45px;
            }
            
            .main-header .instansi-name {
                font-size: 20px;
            }
            
        }

        .fade-in {
            animation: fadeIn 1s ease-in-out;
        }

        .slide-up {
            animation: slideUp 0.8s ease-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from { transform: translateY(50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        /* For announcement not yet available */
        .not-available-container {
            min-height: 40vh; /* Provide enough space when no results */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Tabs styling for Kota/Kabupaten */
        .domisili-tabs {
            display: flex;
            background-color: #f3f4f6;
            border-radius: 0.5rem;
            overflow: hidden;
            margin-bottom: 1rem;
        }
        
        .domisili-tab {
            flex: 1;
            text-align: center;
            padding: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .domisili-tab.active {
            background-color: #8b5cf6;
            color: white;
        }
        
        .domisili-tab:not(.active):hover {
            background-color: #e5e7eb;
        }
        
        .domisili-content {
            display: none;
        }
        
        .domisili-content.active {
            display: block;
        }
        /* banner */
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: Arial, sans-serif;
            /* background: url('background.jpg') no-repeat center center fixed;
            background-size: cover; */
            overflow: auto;
        }

        #splash-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            background: transparent; /* <- penting */
            display: flex;
            justify-content: center;
            align-items: center;
            pointer-events: auto;
            transition: opacity 1s ease;
        }

        .splash-modal {
            background: white; /* hanya di dalam kotak modal */
            padding: 10px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
            animation: fadeIn 0.6s ease;
        }

        .splash-modal img {
            width: 100%;
            max-width: 1100px;
            border-radius: 8px;
        }

        .region-tab-btn {
            transition: all 0.3s ease;
        }

        .region-tab-btn:hover {
            color: #1f2937 !important;
            border-bottom-color: #d1d5db !important;
        }

        .region-tab-btn.active {
            color: #1f2937 !important;
            border-bottom-color: #007bff !important;
            font-weight: 600;
        }

        .region-content {
            animation: fadeIn 0.3s ease;
        }
    </style>
</head>
<body>
    <!-- Splash -->
    <!-- Splash -->
    <!-- Splash -->
  <div id="splash-overlay">
    <div class="splash-modal">
      <img src="our banner.jpg" alt="Banner UNISBANK">
    </div>
  </div>



    <!-- Script -->
    <script>
    window.addEventListener("load", () => {
      const overlay = document.getElementById('splash-overlay');

      setTimeout(() => {
        overlay.style.opacity = '0';
        overlay.style.pointerEvents = 'none';
        setTimeout(() => {
          overlay.style.display = 'none';
        }, 1000);
      }, 5000); // banner tampil 5 detik
    });

    // Function to show region tabs
    function showRegionTab(event, regionId) {
        event.preventDefault();
        
        // Hide all region contents
        const contents = document.querySelectorAll('.region-content');
        contents.forEach(content => {
            content.style.display = 'none';
        });
        
        // Remove active class from all tabs
        const tabs = document.querySelectorAll('.region-tab-btn');
        tabs.forEach(tab => {
            tab.classList.remove('active');
        });
        
        // Show selected region content
        document.getElementById(regionId).style.display = 'block';
        
        // Add active class to clicked tab
        event.target.closest('.region-tab-btn').classList.add('active');
    }
  </script>


    <div class="page-wrapper">
        <header class="main-header">
        <div class="logo-container"> 
            <img src="../assets/tutwurii.png" alt="Logo TI Unisbank">
            <img src="../assets/unisbank.png" alt="Logo Unisbank">
            <img src="../assets/logoFLS3N.png" alt="Logo FLS3N">    
            </div>
            <div class="instansi-name">FLS3N 2026</div>
        </header>
        
        <div class="content-wrapper">
            <div class="container mx-auto px-4 pt-28 pb-16">
                <div class="mb-10 text-center fade-in">
                    <h1 class="page-title text-purple-600 font-bold text-4xl md:text-5xl mb-4">HASIL PENILAIAN LOMBA</h1>
                    <p class="text-gray-600 max-w-2xl mx-auto mt-6">Daftar Juara 1, 2, dan 3 setiap cabang lomba FLS3N 2026 Cabang Wilayah Dinas I</p>
                    <p class="text-gray-600 max-w-2xl mx-auto mt-6">Selamat kepada para peserta telah menunjukkan prestasi dan bakat luar biasa!</p>
                    <p class="text-gray-600 max-w-2xl mx-auto mt-6"><b>Juara 1 setiap Cabang Lomba akan mewakili ke Tingkat Propinsi</b></p>
                </div>
                
                <?php if ($show_results != '1'): ?>
                <!-- Message when results are not yet available -->
                <div class="not-available-container">
                    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-8 rounded-lg shadow-lg max-w-3xl mx-auto mb-8 slide-up">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 mr-4">
                                <i class="fas fa-clock text-yellow-400 text-4xl"></i>
                            </div>
                            <div>
                                <h3 class="text-2xl font-bold text-yellow-800 mb-2">Pengumuman Belum Tersedia</h3>
                                <p class="text-yellow-700 text-lg mb-2">
                                    Hasil penilaian dan pengumuman pemenang lomba belum dirilis oleh panitia.
                                </p>
                                <p class="text-yellow-600">
                                    Silahkan periksa kembali halaman ini nanti. Terima kasih atas kesabaran Anda.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <?php else: ?>
                <!-- Filter form is only shown when results are available -->
                <div class="filter-card mb-8 slide-up">
                    <form action="" method="get" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label for="cabang" class="block text-sm font-medium text-gray-700 mb-1">Cabang Lomba</label>
                            <select name="cabang" id="cabang" class="w-full rounded-md border-gray-300 shadow-sm focus:border-purple-500 focus:ring focus:ring-purple-200">
                                <option value="">Semua Cabang Lomba</option>
                                <?php foreach($cabang_options as $option): ?>
                                    <option value="<?php echo $option['ID']; ?>" <?php echo (isset($_GET['cabang']) && $_GET['cabang'] == $option['ID']) ? 'selected' : ''; ?>>
                                        <?php echo $option['Bidang_Lomba']; ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>
                        <div class="flex items-end">
                            <button type="submit" class="btn-filter">
                                <i class="fas fa-filter mr-2"></i> Filter Hasil
                            </button>
                        </div>
                    </form>
                </div>
                
                <?php if (empty($pesertaPerCabangLomba)): ?>
    <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-8">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-exclamation-circle text-yellow-400"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-yellow-700">
                    Tidak ada data penilaian yang tersedia untuk filter yang dipilih.
                </p>
            </div>
        </div>
    </div>
<?php else: ?>
    <div class="grid grid-cols-1 gap-8 slide-up" style="animation-delay: 0.2s">
        <?php foreach ($pesertaPerCabangLomba as $cabangId => $cabangData): ?>
            <div class="result-card">
                <div class="result-header">
                    <h2 class="text-2xl font-bold"><?php echo $cabangData['nama_cabang']; ?></h2>
                </div>
                
                <!-- Region Tabs -->
                <div style="border-bottom: 2px solid #e5e7eb; display: flex; gap: 0; margin-top: 1.5rem;">
                    <a href="#" onclick="showRegionTab(event, 'kota_<?php echo $cabangId; ?>')" class="region-tab-btn active" style="padding: 12px 16px; border: none; border-bottom: 3px solid transparent; color: #6b7280; cursor: pointer; transition: all 0.3s; text-decoration: none;">
                        <img src="../assets/kota-salatiga.png" alt="Kota" style="height: 20px; width: 20px; margin-right: 8px; display: inline-block; vertical-align: middle;"> Kota Salatiga
                    </a>
                    <a href="#" onclick="showRegionTab(event, 'kab_semarang_<?php echo $cabangId; ?>')" class="region-tab-btn" style="padding: 12px 16px; border: none; border-bottom: 3px solid transparent; color: #6b7280; cursor: pointer; transition: all 0.3s; text-decoration: none;">
                        <img src="../assets/kabupaten-semarang.png" alt="Kab Semarang" style="height: 20px; width: 20px; margin-right: 8px; display: inline-block; vertical-align: middle;"> Kabupaten Semarang
                    </a>
                    <a href="#" onclick="showRegionTab(event, 'kab_demak_<?php echo $cabangId; ?>')" class="region-tab-btn" style="padding: 12px 16px; border: none; border-bottom: 3px solid transparent; color: #6b7280; cursor: pointer; transition: all 0.3s; text-decoration: none;">
                        <img src="../assets/kabupaten-demak.png" alt="Kab Demak" style="height: 20px; width: 20px; margin-right: 8px; display: inline-block; vertical-align: middle;"> Kabupaten Demak
                    </a>
                </div>
                
                <!-- Kota Salatiga Results -->
                <div id="kota_<?php echo $cabangId; ?>" class="region-content" style="display: block;">
                    <div class="overflow-x-auto">
                        <?php echo renderPemenangTable($cabangData['regions']['kota_salatiga']); ?>
                    </div>
                </div>

                <!-- Kabupaten Semarang Results -->
                <div id="kab_semarang_<?php echo $cabangId; ?>" class="region-content" style="display: none;">
                    <div class="overflow-x-auto">
                        <?php echo renderPemenangTable($cabangData['regions']['kabupaten_semarang']); ?>
                    </div>
                </div>

                <!-- Kabupaten Demak Results -->
                <div id="kab_demak_<?php echo $cabangId; ?>" class="region-content" style="display: none;">
                    <div class="overflow-x-auto">
                        <?php echo renderPemenangTable($cabangData['regions']['kabupaten_demak']); ?>
                    </div>
                </div>
            </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

                
                </div>
                <?php endif; ?>
                
                <div class="mt-12 text-center">
                    <a href="../dashboard_awal" class="btn-back">
                        <i class="fas fa-arrow-left mr-2"></i> Kembali ke Halaman Utama
                    </a>
                </div>
            </div>
        </div>
        
        <footer class="bg-gradient-to-r from-pink-800 to-pink-700 text-white py-8 mt-12">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row items-center md:items-start justify-between">
            <!-- Logo and Copyright Section -->
            <div class="flex flex-col items-center md:items-start mb-6 md:mb-0">
                <div class="flex items-center gap-2 mb-4">
                    <img src="../assets/pkl.png" alt="Logo team" class="h-12">
                    <div class="text-xl font-bold">FTII Unisbank</div>
                </div>
                <p class="text-sm">Portal ini dikembangkan dan didukung oleh Fakultas Teknologi Informasi & Industri (FTII) Universitas Stikubank Semarang.</p>
                <p class="text-sm text-gray-300 opacity-80">&copy;<?php echo date("Y"); ?> FTII Unisbank. All rights reserved.</p>
                <a href="https://linktr.ee/ourteamftii" class="text-white hover:text-pink-200 transition-colors mt-2 flex items-center">
                    <span class="text-sm">Our Team</span>
                    <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                </a>
                <a href="our banner.jpg" class="text-white hover:text-pink-200 transition-colors mt-2 flex items-center">
                    <span class="text-sm">Our Banner</span>
                    <i class="fas fa-external-link-alt ml-1 text-xs"></i>
                </a>
            </div>
            
            <!-- PMB Unisbank Button Section -->
            <div class="text-center md:text-right">
                <h3 class="text-xl font-bold mb-4 relative inline-block pb-2 after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-1 after:bg-white after:rounded">PMB Unisbank</h3>
                <div class="flex justify-end">
                    <a href="https://www.unisbank.ac.id/v3/pmb-unisbank/" target="_blank" class="relative overflow-hidden bg-gradient-to-r from-blue-600 to-blue-400 text-white px-5 py-3 rounded-full font-semibold shadow-lg flex items-center gap-2 group">
                        <span class="absolute inset-0 bg-gradient-to-r from-green-600 to-green-400 translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-in-out"></span>
                        <i class="fas fa-user-graduate text-lg relative z-10 group-hover:animate-bounce"></i>
                        <span class="relative z-10 group-hover:animate-pulse">Penerimaan Mahasiswa Baru Unisbank</span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Smooth scroll animation for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    document.querySelector(this.getAttribute('href')).scrollIntoView({
                        behavior: 'smooth'
                    });
                });
            });
        });
    </script>
</body>
</html>

<?php $conn->close(); ?>