<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Petugas Dashboard | Otomotif SMKN 1 Cirebon</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800;900&family=Fira+Code:wght@400;500;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>
        :root {
            --bg-color: #050409;
            --card-bg: rgba(14, 11, 22, 0.7);
            --primary: #9d4edd;
            /* Operational Royal Purple */
            --primary-light: #c77dff;
            --primary-glow: rgba(157, 78, 221, 0.35);
            --primary-border: rgba(157, 78, 221, 0.18);
            --text-main: #f8f7ff;
            --text-muted: #b3b0cb;
            --font-family: 'Inter', sans-serif;
            --font-heading: 'Outfit', sans-serif;
            --font-mono: 'Fira Code', monospace;
            --success: #10b981;
            --danger: #ef4444;
            --warning: #f59e0b;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--font-family);
            background-color: var(--bg-color);
            background-image:
                radial-gradient(circle at 10% 20%, rgba(157, 78, 221, 0.05) 0%, transparent 45%),
                radial-gradient(circle at 90% 80%, rgba(157, 78, 221, 0.03) 0%, transparent 45%),
                repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.003) 0px, rgba(255, 255, 255, 0.003) 1px, transparent 1px, transparent 2px),
                repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.003) 0px, rgba(255, 255, 255, 0.003) 1px, transparent 1px, transparent 2px);
            background-size: 100% 100%, 100% 100%, 20px 20px, 20px 20px;
            color: var(--text-main);
            min-height: 100vh;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* Navbar */
        .navbar {
            background: rgba(8, 6, 12, 0.85);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border-bottom: 1px solid var(--primary-border);
            padding: 18px 35px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .nav-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: #ffffff;
            font-family: var(--font-heading);
            transition: all 0.3s;
        }

        .nav-brand:hover {
            opacity: 0.95;
            transform: scale(1.02);
        }

        .nav-brand i {
            font-size: 1.5rem;
            color: var(--primary-light);
            text-shadow: 0 0 15px var(--primary-glow);
        }

        .nav-brand span {
            font-weight: 900;
            font-size: 1.3rem;
            letter-spacing: -0.5px;
            background: linear-gradient(135deg, #ffffff 40%, var(--primary-light) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .nav-user {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .user-info {
            text-align: right;
        }

        .user-name {
            font-weight: 600;
            font-size: 0.92rem;
            color: #ffffff;
        }

        .user-role {
            font-size: 0.72rem;
            color: var(--primary-light);
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-top: 2px;
        }

        .btn-logout-nav {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.2);
            color: #f87171;
            padding: 10px 16px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-heading);
        }

        .btn-logout-nav:hover {
            background: var(--danger);
            color: #ffffff;
            box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
            transform: translateY(-2px);
        }

        /* Container */
        .container {
            max-width: 1280px;
            width: 100%;
            margin: 40px auto;
            padding: 0 30px;
            flex-grow: 1;
        }

        /* Welcome Header */
        .welcome-header {
            margin-bottom: 35px;
            animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .welcome-header h1 {
            font-family: var(--font-heading);
            font-size: 2.5rem;
            font-weight: 900;
            letter-spacing: -0.5px;
            background: linear-gradient(135deg, #ffffff 40%, var(--primary-light) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 6px;
        }

        .welcome-header p {
            color: var(--text-muted);
            font-size: 1rem;
            max-width: 800px;
        }

        @keyframes slideInUp {
            0% {
                transform: translateY(30px);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Alerts */
        .alert {
            background: rgba(16, 185, 129, 0.08);
            border: 1px solid rgba(16, 185, 129, 0.25);
            color: #34d399;
            padding: 16px 22px;
            border-radius: 14px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 0.92rem;
            animation: slideDown 0.4s ease-out;
        }

        .alert-danger {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.25);
            color: #f87171;
        }

        @keyframes slideDown {
            from {
                transform: translateY(-10px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        /* Section Cards */
        .panel-card {
            background: var(--card-bg);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid var(--primary-border);
            border-radius: 24px;
            padding: 35px;
            box-shadow: 0 25px 55px rgba(0, 0, 0, 0.6);
            display: flex;
            flex-direction: column;
            animation: slideInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            margin-bottom: 40px;
            min-height: 420px;
        }

        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .content-title {
            font-family: var(--font-heading);
            font-size: 1.4rem;
            font-weight: 800;
            display: flex;
            align-items: center;
            gap: 12px;
            color: #ffffff;
        }

        .content-title i {
            color: var(--primary-light);
            filter: drop-shadow(0 0 5px var(--primary-glow));
        }

        /* Buttons & Forms */
        .btn-add {
            background: linear-gradient(135deg, var(--primary) 0%, #7b2cbf 100%);
            color: #ffffff;
            border: none;
            border-radius: 10px;
            padding: 11px 22px;
            font-size: 0.88rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 5px 18px rgba(157, 78, 221, 0.25);
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-add:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(157, 78, 221, 0.4);
            filter: brightness(1.1);
        }

        /* Interactive Tables */
        .table-responsive {
            width: 100%;
            overflow-x: auto;
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(0, 0, 0, 0.25);
        }

        .table-responsive::-webkit-scrollbar {
            height: 6px;
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.9rem;
        }

        th {
            background: rgba(8, 6, 12, 0.5);
            color: var(--text-muted);
            font-weight: 700;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            text-transform: uppercase;
            font-size: 0.72rem;
            letter-spacing: 1px;
        }

        td {
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            color: var(--text-main);
            vertical-align: middle;
            transition: all 0.2s;
        }

        tr:hover td {
            background: rgba(255, 255, 255, 0.015);
        }

        .avatar-cell {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .avatar-img {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.1);
            background: #110e1a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--primary-light);
            font-size: 0.95rem;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
        }

        .badge-status {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: inline-block;
        }

        .badge-kerja {
            background: rgba(16, 185, 129, 0.08);
            color: #34d399;
            border: 1px solid rgba(16, 185, 129, 0.25);
        }

        .badge-kuliah {
            background: rgba(59, 130, 246, 0.08);
            color: #60a5fa;
            border: 1px solid rgba(59, 130, 246, 0.25);
        }

        .badge-gender {
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
            color: var(--text-muted);
            font-weight: 700;
            text-transform: uppercase;
        }

        /* Action Buttons */
        .action-btns {
            display: flex;
            gap: 10px;
        }

        .btn-action {
            width: 34px;
            height: 34px;
            border-radius: 10px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            font-size: 0.85rem;
            color: #ffffff;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
            text-decoration: none;
        }

        .btn-edit {
            background: rgba(157, 78, 221, 0.1);
            border: 1px solid rgba(157, 78, 221, 0.25);
            color: var(--primary-light);
        }

        .btn-edit:hover {
            background: var(--primary);
            color: #ffffff;
            box-shadow: 0 5px 12px var(--primary-glow);
            transform: translateY(-2px);
        }

        .btn-delete {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.2);
            color: #f87171;
        }

        .btn-delete:hover {
            background: var(--danger);
            color: #ffffff;
            box-shadow: 0 5px 12px rgba(239, 68, 68, 0.3);
            transform: translateY(-2px);
        }

        /* Modals Overlay & Box */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.75);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            padding: 20px;
        }

        .modal-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .modal-box {
            background: #0d0a14;
            border: 1px solid var(--primary-border);
            border-top: 4px solid var(--primary);
            border-radius: 24px;
            width: 100%;
            max-width: 460px;
            box-shadow: 0 35px 70px rgba(0, 0, 0, 0.8), 0 0 40px rgba(157, 78, 221, 0.05);
            overflow: hidden;
            transform: scale(0.95);
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .modal-overlay.active .modal-box {
            transform: scale(1);
        }

        .modal-header {
            padding: 22px 28px;
            background: rgba(157, 78, 221, 0.04);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .modal-title {
            font-family: var(--font-heading);
            font-size: 1.15rem;
            font-weight: 800;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .modal-title i {
            color: var(--primary-light);
        }

        .modal-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.5rem;
            cursor: pointer;
            transition: color 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
        }

        .modal-close:hover {
            color: #ffffff;
        }

        .modal-body {
            padding: 28px;
        }

        /* Form Controls */
        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            font-size: 0.78rem;
            font-weight: 600;
            color: var(--text-muted);
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .form-control {
            width: 100%;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            padding: 13px 16px;
            color: var(--text-main);
            font-size: 0.92rem;
            font-family: var(--font-family);
            outline: none;
            transition: all 0.3s;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 15px var(--primary-glow);
            background: rgba(0, 0, 0, 0.7);
        }

        textarea.form-control {
            resize: none;
            height: 90px;
        }

        select.form-control {
            cursor: pointer;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg fill='%239d4edd' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 40px;
        }

        select.form-control option {
            background-color: #0b0813;
            color: var(--text-main);
        }

        .modal-footer {
            padding: 18px 28px 28px;
            display: flex;
            justify-content: flex-end;
            gap: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            background: rgba(157, 78, 221, 0.01);
        }

        .btn-cancel {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-main);
            padding: 11px 22px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.88rem;
            transition: all 0.2s;
            font-family: var(--font-heading);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .btn-cancel:hover {
            background: rgba(255, 255, 255, 0.08);
        }

        .no-data {
            text-align: center;
            padding: 50px 20px;
            color: var(--text-muted);
        }

        .no-data i {
            font-size: 2.8rem;
            margin-bottom: 14px;
            display: block;
            opacity: 0.4;
            color: var(--primary-light);
        }

        /* Tabs Switcher */
        .tabs-container {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            padding-bottom: 14px;
            flex-wrap: wrap;
        }

        .tab-btn {
            background: transparent;
            border: 1px solid transparent;
            color: var(--text-muted);
            font-family: var(--font-heading);
            font-size: 0.92rem;
            font-weight: 700;
            padding: 12px 20px;
            cursor: pointer;
            border-radius: 12px;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .tab-btn.active {
            background: rgba(157, 78, 221, 0.08);
            color: #ffffff;
            border: 1px solid var(--primary-border);
            box-shadow: 0 0 20px rgba(157, 78, 221, 0.1);
        }

        .tab-btn:hover:not(.active) {
            color: #ffffff;
            background: rgba(255, 255, 255, 0.02);
        }

        .tab-content {
            display: none;
            animation: fadeInTab 0.5s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .tab-content.active {
            display: block;
        }

        @keyframes fadeInTab {
            from {
                opacity: 0;
                transform: translateY(12px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Responsive */
        @media (max-width: 992px) {
            .navbar {
                padding: 15px 25px;
            }

            .container {
                padding: 0 20px;
                margin: 25px auto;
            }
        }

        @media (max-width: 768px) {
            .navbar {
                padding: 14px 20px;
            }

            .tabs-container {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 8px;
                gap: 8px;
                scrollbar-width: none;
            }

            .tabs-container::-webkit-scrollbar {
                display: none;
            }

            .tab-btn {
                flex-shrink: 0;
                white-space: nowrap;
                padding: 10px 16px;
                font-size: 0.85rem;
                border-radius: 10px;
            }

            .user-info {
                display: none;
            }

            .btn-logout-nav span {
                display: none;
            }

            .btn-logout-nav {
                padding: 10px;
                border-radius: 8px;
            }

            .welcome-header h1 {
                font-size: 1.85rem;
            }

            .panel-card {
                padding: 25px 20px;
                border-radius: 20px;
            }
        }
    </style>
</head>

<body>

    <!-- Header Navbar -->
    <nav class="navbar">
        <a href="/" class="nav-brand">
            <i class="fa-solid fa-users-gear"></i>
            <span>Petugas Area</span>
        </a>
        <div class="nav-user">
            <div class="user-info">
                <div class="user-name">{{ Auth::guard('petugas')->user()->nama_petugas }}</div>
                <div class="user-role">Staff Bengkel</div>
            </div>
            <form action="{{ route('petugas.logout') }}" method="POST">
                @csrf
                <button type="submit" class="btn-logout-nav">
                    <i class="fa-solid fa-right-from-bracket"></i>
                    <span>Keluar</span>
                </button>
            </form>
        </div>
    </nav>

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

        <div class="welcome-header">
            <h1>Dashboard Operational Staff</h1>
            <p>Kelola Data Siswa, Tracer Study Alumni, Publikasi Pengumuman, Galeri Fasilitas, dan Informasi Staff
                Pengajar.</p>
        </div>

        <!-- Success & Danger Alerts -->
        @if(session('success'))
            <div class="alert">
                <i class="fa-solid fa-circle-check"></i>
                <span>{{ session('success') }}</span>
            </div>
        @endif

        @if($errors->any())
            <div class="alert alert-danger">
                <i class="fa-solid fa-triangle-exclamation"></i>
                <span>{{ $errors->first() }}</span>
            </div>
        @endif

        <!-- Tab Switcher -->
        <div class="tabs-container">
            <button class="tab-btn active" id="tab-siswa-btn" onclick="switchTab('siswa')">
                <i class="fa-solid fa-graduation-cap"></i> Data Siswa
            </button>
            <button class="tab-btn" id="tab-alumni-btn" onclick="switchTab('alumni')">
                <i class="fa-solid fa-address-book"></i> Tracer Study Alumni
            </button>
            <button class="tab-btn" id="tab-pengumuman-btn" onclick="switchTab('pengumuman')">
                <i class="fa-solid fa-bullhorn"></i> Pengumuman
            </button>
            <button class="tab-btn" id="tab-galeri-btn" onclick="switchTab('galeri')">
                <i class="fa-solid fa-images"></i> Galeri Visual
            </button>
            <button class="tab-btn" id="tab-guru-btn" onclick="switchTab('guru')">
                <i class="fa-solid fa-chalkboard-user"></i> Data Guru
            </button>
            <button class="tab-btn" id="tab-konten-btn" onclick="switchTab('konten')">
                <i class="fa-solid fa-file-pen"></i> Profil Jurusan
            </button>
            <button class="tab-btn" id="tab-profil-btn" onclick="switchTab('profil')">
                <i class="fa-solid fa-user-pen"></i> Profil Saya
            </button>
        </div>

        <!-- TAB 1: DATA SISWA -->
        <div class="tab-content active" id="content-siswa">
            <div class="panel-card">
                <div class="content-header">
                    <div class="content-title">
                        <i class="fa-solid fa-graduation-cap"></i>
                        <span>Manajemen Database Siswa Otomotif</span>
                    </div>
                </div>

                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>Siswa</th>
                                <th>NIS</th>
                                <th>Kelas</th>
                                <th>Gender</th>
                                <th>Alamat</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($siswa as $item)
                                <tr>
                                    <td>
                                        <div class="avatar-cell">
                                            @if($item->foto && $item->foto !== 'default_avatar.png' && file_exists(public_path($item->foto)))
                                                <img class="avatar-img" src="{{ asset($item->foto) }}" alt="Foto">
                                            @else
                                                <div class="avatar-img">{{ substr($item->nama_siswa, 0, 1) }}</div>
                                            @endif
                                            <div>
                                                <div style="font-weight:600; color: #ffffff;">{{ $item->nama_siswa }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td
                                        style="font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted);">
                                        {{ $item->nis }}</td>
                                    <td>{{ $item->kelas }}</td>
                                    <td>
                                        <span class="badge-gender">
                                            {{ $item->jk === 'laki-laki' ? 'Laki-laki' : 'Perempuan' }}
                                        </span>
                                    </td>
                                    <td>{{ $item->alamat }}</td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit"
                                                onclick="openEditSiswaModal('{{ $item->nis }}', '{{ addslashes($item->nama_siswa) }}', '{{ addslashes($item->kelas) }}', '{{ $item->jk }}', '{{ addslashes($item->alamat) }}')">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                            <form action="{{ route('petugas.dashboard.siswa.destroy', $item->nis) }}"
                                                method="POST"
                                                onsubmit="return confirm('Apakah Anda yakin ingin menghapus siswa ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-action btn-delete">
                                                    <i class="fa-solid fa-trash-can"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6">
                                        <div class="no-data">
                                            <i class="fa-solid fa-folder-open"></i>
                                            Belum ada data siswa.
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- TAB 2: DATA ALUMNI -->
        <div class="tab-content" id="content-alumni">
            <div class="panel-card">
                <div class="content-header">
                    <div class="content-title">
                        <i class="fa-solid fa-address-book"></i>
                        <span>Tracer Study & Karir Alumni</span>
                    </div>
                </div>

                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>Alumni</th>
                                <th>Tahun Lulus</th>
                                <th>Status</th>
                                <th>Tempat / Instansi</th>
                                <th>Jabatan / Prodi</th>
                                <th>Testimoni</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($alumni as $item)
                                <tr>
                                    <td>
                                        <div class="avatar-cell">
                                            @if($item->foto && $item->foto !== 'default_alumni.jpg' && file_exists(public_path($item->foto)))
                                                <img class="avatar-img" src="{{ asset($item->foto) }}" alt="Foto">
                                            @else
                                                <div class="avatar-img">{{ substr($item->nama, 0, 1) }}</div>
                                            @endif
                                            <div>
                                                <div style="font-weight:600; color: #ffffff;">{{ $item->nama }}</div>
                                                <div style="font-size:0.75rem; color:var(--text-muted)">@
                                                    {{ $item->username }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $item->tahun_lulus }}</td>
                                    <td>
                                        <span
                                            class="badge-status {{ $item->kelanjutan === 'kerja' ? 'badge-kerja' : 'badge-kuliah' }}">
                                            {{ ucfirst($item->kelanjutan) }}
                                        </span>
                                    </td>
                                    <td>{{ $item->tempat }}</td>
                                    <td>{{ $item->jabatan }}</td>
                                    <td style="max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"
                                        title="{{ $item->testimoni }}">{{ $item->testimoni }}</td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit"
                                                onclick="openEditAlumniModal('{{ $item->id_alumni }}', '{{ addslashes($item->nama) }}', '{{ $item->tahun_lulus }}', '{{ $item->kelanjutan }}', '{{ addslashes($item->tempat) }}', '{{ addslashes($item->jabatan) }}', '{{ addslashes($item->testimoni) }}')">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                            <form action="{{ route('petugas.dashboard.alumni.destroy', $item->id_alumni) }}"
                                                method="POST"
                                                onsubmit="return confirm('Apakah Anda yakin ingin menghapus data alumni ini? Tindakan ini permanen.')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-action btn-delete">
                                                    <i class="fa-solid fa-trash-can"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7">
                                        <div class="no-data">
                                            <i class="fa-solid fa-folder-open"></i>
                                            Belum ada data alumni terdaftar.
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- TAB 3: KELOLA PENGUMUMAN -->
        <div class="tab-content" id="content-pengumuman">
            <div class="panel-card">
                <div class="content-header">
                    <div class="content-title">
                        <i class="fa-solid fa-bullhorn"></i>
                        <span>Kelola Pengumuman Website</span>
                    </div>
                    <button class="btn-add" onclick="openModal('modal-add-pengumuman')">
                        <i class="fa-solid fa-plus"></i> Buat Pengumuman
                    </button>
                </div>

                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>Judul</th>
                                <th>Isi</th>
                                <th>Tanggal</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($pengumuman as $item)
                                <tr>
                                    <td style="font-weight: 600; min-width: 180px; color: #ffffff;">{{ $item->judul }}</td>
                                    <td style="color: var(--text-muted); max-width: 300px;">{{ Str::limit($item->isi, 80) }}
                                    </td>
                                    <td>{{ date('d M Y', strtotime($item->tanggal)) }}</td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit"
                                                onclick="openEditPengumumanModal('{{ $item->id_pengumuman }}', '{{ addslashes($item->judul) }}', `{{ addslashes($item->isi) }}`)">
                                                <i class="fa-solid fa-pen"></i>
                                            </button>
                                            <form
                                                action="{{ route('petugas.dashboard.pengumuman.destroy', $item->id_pengumuman) }}"
                                                method="POST" onsubmit="return confirm('Hapus pengumuman ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-action btn-delete">
                                                    <i class="fa-solid fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4">
                                        <div class="no-data">
                                            <i class="fa-solid fa-bullhorn"></i>
                                            Belum ada pengumuman. Klik tombol di atas untuk membuat.
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- TAB 4: KELOLA GALERI -->
        <div class="tab-content" id="content-galeri">
            <div class="panel-card">
                <div class="content-header">
                    <div class="content-title">
                        <i class="fa-solid fa-images"></i>
                        <span>Kelola Galeri & Fasilitas Website</span>
                    </div>
                    <button class="btn-add" onclick="openModal('modal-add-galeri')">
                        <i class="fa-solid fa-plus"></i> Tambah Foto
                    </button>
                </div>

                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>Foto</th>
                                <th>Judul</th>
                                <th>Deskripsi</th>
                                <th>Tanggal</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($galeri as $item)
                                <tr>
                                    <td>
                                        @if($item->foto && file_exists(public_path($item->foto)))
                                            <img src="{{ asset($item->foto) }}" alt="{{ $item->judul }}"
                                                style="width: 60px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid var(--primary-border);">
                                        @else
                                            <div
                                                style="width: 60px; height: 45px; background: #110e1a; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--primary-light); font-size: 1.2rem;">
                                                <i class="fa-solid fa-image"></i></div>
                                        @endif
                                    </td>
                                    <td style="font-weight: 600; color: #ffffff;">{{ $item->judul }}</td>
                                    <td style="color: var(--text-muted); max-width: 250px;">
                                        {{ Str::limit($item->deskripsi, 60) }}</td>
                                    <td>{{ date('d M Y', strtotime($item->tanggal_kegiatan)) }}</td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit"
                                                onclick="openEditGaleriModal('{{ $item->id_galeri }}', '{{ addslashes($item->judul) }}', `{{ addslashes($item->deskripsi) }}`)">
                                                <i class="fa-solid fa-pen"></i>
                                            </button>
                                            <form action="{{ route('petugas.dashboard.galeri.destroy', $item->id_galeri) }}"
                                                method="POST" onsubmit="return confirm('Hapus foto galeri ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-action btn-delete">
                                                    <i class="fa-solid fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5">
                                        <div class="no-data">
                                            <i class="fa-solid fa-images"></i>
                                            Belum ada foto galeri. Klik tombol di atas untuk menambahkan.
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- TAB 5: DATA GURU / PENGAJAR -->
        <div class="tab-content" id="content-guru">
            <div class="panel-card">
                <div class="content-header">
                    <div class="content-title">
                        <i class="fa-solid fa-chalkboard-user"></i>
                        <span>Kelola Data Guru / Pengajar</span>
                    </div>
                    <div style="display:flex; gap:10px; align-items:center; flex-wrap: wrap;">
                        <button class="btn-add" onclick="openModal('modal-add-guru')">
                            <i class="fa-solid fa-plus"></i> Tambah Guru
                        </button>

                        <a href="{{ route('petugas.dashboard.guru.export') }}" class="btn-add"
                            style="background: linear-gradient(135deg,#06b6d4 0%,#7dd3fc 100%);">
                            <i class="fa-solid fa-file-export"></i> Export JSON
                        </a>

                        <form action="{{ route('petugas.dashboard.guru.import') }}" method="POST"
                            enctype="multipart/form-data" style="display:inline-flex; align-items:center; gap:8px; margin:0;">
                            @csrf
                            <label for="guru_file" class="btn-add"
                                style="background: linear-gradient(135deg,#f59e0b 0%,#f97316 100%); cursor:pointer;">
                                <i class="fa-solid fa-file-import"></i> Import JSON
                            </label>
                            <input type="file" id="guru_file" name="guru_file" accept="application/json,.json"
                                style="display:none;" onchange="this.form.submit()">
                        </form>
                    </div>
                </div>

                <div class="table-responsive">
                    <form id="guru-bulk-delete-form" action="{{ route('petugas.dashboard.guru.bulk.destroy') }}" method="POST">
                        @csrf
                        <div id="guru-bulk-inputs"></div>
                        <table>
                            <thead>
                                <tr>
                                    <th style="width: 40px; text-align:center;"><input type="checkbox" id="guru-select-all" onclick="toggleAllGuruCheckboxes(this)"></th>
                                    <th>Guru</th>
                                    <th>NIP</th>
                                    <th>Mata Pelajaran</th>
                                    <th>Jabatan</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($guru as $item)
                                    <tr>
                                        <td style="text-align:center;"><input type="checkbox" class="guru-checkbox" value="{{ $item->nip }}"></td>
                                        <td>
                                            <div class="avatar-cell">
                                                @if($item->foto && $item->foto !== 'default_guru.jpg' && file_exists(public_path($item->foto)))
                                                    <img class="avatar-img" src="{{ asset($item->foto) }}" alt="Foto">
                                                @else
                                                    <div class="avatar-img">{{ substr($item->nama_guru, 0, 1) }}</div>
                                                @endif
                                                <div>
                                                    <div style="font-weight:600; color: #ffffff;">{{ $item->nama_guru }}</div>
                                                </div>
                                            </div>
                                        </td>
                                    <td style="font-family: var(--font-mono); font-size:0.85rem; color:var(--text-muted);">
                                        {{ $item->nip }}</td>
                                    <td>{{ $item->mapel }}</td>
                                    <td>{{ $item->jabatan }}</td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit"
                                                onclick="openEditGuruModal('{{ $item->nip }}', '{{ addslashes($item->nama_guru) }}', '{{ addslashes($item->mapel) }}', '{{ addslashes($item->jabatan) }}')">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                            <form action="{{ route('petugas.dashboard.guru.destroy', $item->nip) }}"
                                                method="POST"
                                                onsubmit="return confirm('Apakah Anda yakin ingin menghapus data guru ini?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn-action btn-delete">
                                                    <i class="fa-solid fa-trash-can"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6">
                                        <div class="no-data">
                                            <i class="fa-solid fa-chalkboard-user"></i>
                                            Belum ada data guru. Klik tombol di atas untuk menambahkan.
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                    </form>
                </div>
            </div>
        </div>

        <!-- TAB 6: KELOLA KONTEN WEBSITE -->
        <div class="tab-content" id="content-konten">
            <div class="panel-card" style="max-width: 700px; margin: 0 auto;">
                <div class="content-header" style="margin-bottom: 25px;">
                    <div class="content-title">
                        <i class="fa-solid fa-file-pen"></i>
                        <span>Edit Konten Profil Jurusan</span>
                    </div>
                </div>

                <form action="{{ route('petugas.dashboard.konten.update') }}" method="POST">
                    @csrf
                    @method('PUT')

                    <div class="form-group">
                        <label class="form-label" for="konten_nama">Nama Jurusan</label>
                        <input type="text" id="konten_nama" name="nama_jurusan" class="form-control"
                            value="{{ $profilJurusan->nama_jurusan ?? '' }}" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="konten_deskripsi">Deskripsi Jurusan</label>
                        <textarea id="konten_deskripsi" name="deskripsi" class="form-control" required
                            style="height: 120px;">{{ $profilJurusan->deskripsi ?? '' }}</textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="konten_visi">Visi</label>
                        <textarea id="konten_visi" name="visi" class="form-control" required
                            style="height: 100px;">{{ $profilJurusan->visi ?? '' }}</textarea>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="konten_misi">Misi</label>
                        <textarea id="konten_misi" name="misi" class="form-control" required
                            style="height: 120px;">{{ $profilJurusan->misi ?? '' }}</textarea>
                    </div>

                    <button type="submit" class="btn-add"
                        style="width: 100%; justify-content: center; margin-top: 15px; padding: 12px;">
                        <i class="fa-solid fa-save"></i> Simpan Perubahan Konten
                    </button>
                </form>
            </div>
        </div>

        <!-- TAB 7: PROFIL SAYA (PROFILE EDIT) -->
        <div class="tab-content" id="content-profil">
            <div class="panel-card" style="max-width: 600px; margin: 0 auto;">
                <div class="content-header" style="margin-bottom: 25px;">
                    <div class="content-title">
                        <i class="fa-solid fa-user-pen"></i>
                        <span>Pengaturan Profil Pribadi</span>
                    </div>
                </div>

                <form action="{{ route('petugas.profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')

                    <div style="text-align: center; margin-bottom: 25px;">
                        @php
                            $currentPetugas = Auth::guard('petugas')->user();
                        @endphp
                        @if($currentPetugas->foto && $currentPetugas->foto !== 'default_petugas.jpg' && file_exists(public_path($currentPetugas->foto)))
                            <img src="{{ asset($currentPetugas->foto) }}" alt="Avatar"
                                style="width: 110px; height: 110px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); box-shadow: 0 0 15px var(--primary-glow);">
                        @else
                            <div
                                style="width: 110px; height: 110px; border-radius: 50%; background: linear-gradient(135deg, var(--primary) 0%, rgba(255,255,255,0.05) 100%); margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; font-weight: 800; color: #ffffff; border: 3px solid var(--primary); box-shadow: 0 0 15px var(--primary-glow); font-family: var(--font-heading);">
                                {{ substr($currentPetugas->nama_petugas, 0, 1) }}
                            </div>
                        @endif
                        <div style="margin-top: 12px; font-size: 0.85rem; color: var(--text-muted);">Format foto: JPG,
                            PNG, GIF (Maks. 2MB)</div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="profile_nama">Nama Lengkap</label>
                        <input type="text" id="profile_nama" name="nama_petugas" class="form-control"
                            value="{{ $currentPetugas->nama_petugas }}" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="profile_jabatan">Jabatan</label>
                        <input type="text" id="profile_jabatan" name="jabatan" class="form-control"
                            value="{{ $currentPetugas->jabatan }}" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="profile_username">Username</label>
                        <input type="text" id="profile_username" name="username" class="form-control"
                            value="{{ $currentPetugas->username }}" required>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="profile_password">Ubah Password</label>
                        <input type="password" id="profile_password" name="password" class="form-control"
                            placeholder="Biarkan kosong jika tidak ingin mengubah password">
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="profile_foto">Foto Profil</label>
                        <input type="file" id="profile_foto" name="foto" class="form-control" accept="image/*">
                    </div>

                    <button type="submit" class="btn-add"
                        style="width: 100%; justify-content: center; margin-top: 15px; padding: 12px;">
                        <i class="fa-solid fa-save"></i> Simpan Perubahan Profil
                    </button>
                </form>
            </div>
        </div>

    </div>

    <!-- MODAL: EDIT SISWA -->
    <div class="modal-overlay" id="modal-edit-siswa">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-user-pen"></i>
                    <span>Sunting Data Siswa</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-edit-siswa')">&times;</button>
            </div>
            <form id="form-edit-siswa" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="edit_nama">Nama Lengkap</label>
                        <input type="text" id="edit_nama" name="nama_siswa" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_kelas">Kelas</label>
                        <input type="text" id="edit_kelas" name="kelas" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_jk">Jenis Kelamin</label>
                        <select id="edit_jk" name="jk" class="form-control" required>
                            <option value="laki-laki">Laki-laki</option>
                            <option value="perempuan">Perempuan</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_alamat">Alamat Tinggal</label>
                        <textarea id="edit_alamat" name="alamat" class="form-control" required></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_foto">Ganti Foto Profil</label>
                        <input type="file" id="edit_foto" name="foto" class="form-control" accept="image/*">
                        <small
                            style="color:var(--text-muted); font-size:0.75rem; margin-top:4px; display:block;">Biarkan
                            kosong jika tidak ingin mengubah foto</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-edit-siswa')">Batal</button>
                    <button type="submit" class="btn-add">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: EDIT ALUMNI -->
    <div class="modal-overlay" id="modal-edit-alumni">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-user-pen"></i>
                    <span>Sunting Data Tracer Alumni</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-edit-alumni')">&times;</button>
            </div>
            <form id="form-edit-alumni" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="edit_alumni_nama">Nama Lengkap</label>
                        <input type="text" id="edit_alumni_nama" name="nama" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_alumni_tahun">Tahun Lulus</label>
                        <input type="number" id="edit_alumni_tahun" name="tahun_lulus" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_alumni_kelanjutan">Status Kelanjutan</label>
                        <select id="edit_alumni_kelanjutan" name="kelanjutan" class="form-control" required>
                            <option value="kerja">Kerja</option>
                            <option value="kuliah">Kuliah</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_alumni_tempat">Tempat / Instansi</label>
                        <input type="text" id="edit_alumni_tempat" name="tempat" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_alumni_jabatan">Jabatan / Prodi</label>
                        <input type="text" id="edit_alumni_jabatan" name="jabatan" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_alumni_testimoni">Testimoni</label>
                        <textarea id="edit_alumni_testimoni" name="testimoni" class="form-control" required></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_alumni_foto">Ganti Foto Profil</label>
                        <input type="file" id="edit_alumni_foto" name="foto" class="form-control" accept="image/*">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-edit-alumni')">Batal</button>
                    <button type="submit" class="btn-add">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: TAMBAH PENGUMUMAN -->
    <div class="modal-overlay" id="modal-add-pengumuman">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-bullhorn"></i>
                    <span>Buat Pengumuman Baru</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-add-pengumuman')">&times;</button>
            </div>
            <form action="{{ route('petugas.dashboard.pengumuman.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="add_pengumuman_judul">Judul Pengumuman</label>
                        <input type="text" id="add_pengumuman_judul" name="judul" class="form-control"
                            placeholder="Judul pengumuman..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_pengumuman_isi">Isi Pengumuman</label>
                        <textarea id="add_pengumuman_isi" name="isi" class="form-control"
                            placeholder="Tuliskan isi pengumuman..." required style="height: 120px;"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-add-pengumuman')">Batal</button>
                    <button type="submit" class="btn-add">Publikasikan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: EDIT PENGUMUMAN -->
    <div class="modal-overlay" id="modal-edit-pengumuman">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-pen"></i>
                    <span>Sunting Pengumuman</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-edit-pengumuman')">&times;</button>
            </div>
            <form id="form-edit-pengumuman" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="edit_pengumuman_judul">Judul Pengumuman</label>
                        <input type="text" id="edit_pengumuman_judul" name="judul" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_pengumuman_isi">Isi Pengumuman</label>
                        <textarea id="edit_pengumuman_isi" name="isi" class="form-control" required
                            style="height: 120px;"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel"
                        onclick="closeModal('modal-edit-pengumuman')">Batal</button>
                    <button type="submit" class="btn-add">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: TAMBAH GALERI -->
    <div class="modal-overlay" id="modal-add-galeri">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-images"></i>
                    <span>Tambah Foto Galeri Baru</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-add-galeri')">&times;</button>
            </div>
            <form action="{{ route('petugas.dashboard.galeri.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="add_galeri_judul">Judul Foto</label>
                        <input type="text" id="add_galeri_judul" name="judul" class="form-control"
                            placeholder="Judul galeri..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_galeri_deskripsi">Deskripsi</label>
                        <textarea id="add_galeri_deskripsi" name="deskripsi" class="form-control"
                            placeholder="Deskripsi singkat kegiatan..." required></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_galeri_foto">Upload Foto</label>
                        <input type="file" id="add_galeri_foto" name="foto" class="form-control" accept="image/*"
                            required>
                        <div id="add_galeri_preview_container"
                            style="display: none; margin-top: 15px; text-align: center;">
                            <label class="form-label"
                                style="text-align: left; display: block; margin-bottom: 8px;">Preview Foto:</label>
                            <img id="add_galeri_preview" src="" alt="Preview"
                                style="max-width: 100%; max-height: 200px; border-radius: 10px; border: 2px solid var(--primary-border); object-fit: contain; box-shadow: 0 5px 15px rgba(0,0,0,0.5);">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-add-galeri')">Batal</button>
                    <button type="submit" class="btn-add">Upload Foto</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: EDIT GALERI -->
    <div class="modal-overlay" id="modal-edit-galeri">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-pen"></i>
                    <span>Sunting Foto Galeri</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-edit-galeri')">&times;</button>
            </div>
            <form id="form-edit-galeri" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="edit_galeri_judul">Judul Foto</label>
                        <input type="text" id="edit_galeri_judul" name="judul" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_galeri_deskripsi">Deskripsi</label>
                        <textarea id="edit_galeri_deskripsi" name="deskripsi" class="form-control" required></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_galeri_foto">Ganti Foto (opsional)</label>
                        <input type="file" id="edit_galeri_foto" name="foto" class="form-control" accept="image/*">
                        <small
                            style="color:var(--text-muted); font-size:0.75rem; margin-top:4px; display:block;">Biarkan
                            kosong jika tidak ingin mengubah foto</small>
                        <div id="edit_galeri_preview_container"
                            style="display: none; margin-top: 15px; text-align: center;">
                            <label class="form-label"
                                style="text-align: left; display: block; margin-bottom: 8px;">Preview Foto Baru:</label>
                            <img id="edit_galeri_preview" src="" alt="Preview"
                                style="max-width: 100%; max-height: 200px; border-radius: 10px; border: 2px solid var(--primary-border); object-fit: contain; box-shadow: 0 5px 15px rgba(0,0,0,0.5);">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-edit-galeri')">Batal</button>
                    <button type="submit" class="btn-add">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: TAMBAH GURU -->
    <div class="modal-overlay" id="modal-add-guru">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-chalkboard-user"></i>
                    <span>Tambah Data Guru Baru</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-add-guru')">&times;</button>
            </div>
            <form action="{{ route('petugas.dashboard.guru.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="add_guru_nip">NIP</label>
                        <input type="number" id="add_guru_nip" name="nip" class="form-control"
                            placeholder="Nomor Induk Pegawai..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_guru_nama">Nama Lengkap</label>
                        <input type="text" id="add_guru_nama" name="nama_guru" class="form-control"
                            placeholder="Nama guru..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_guru_mapel">Mata Pelajaran</label>
                        <input type="text" id="add_guru_mapel" name="mapel" class="form-control"
                            placeholder="Mata pelajaran yang diajarkan..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_guru_jabatan">Jabatan</label>
                        <input type="text" id="add_guru_jabatan" name="jabatan" class="form-control"
                            placeholder="Jabatan / posisi..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_guru_foto">Foto (Opsional)</label>
                        <input type="file" id="add_guru_foto" name="foto" class="form-control" accept="image/*">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-add-guru')">Batal</button>
                    <button type="submit" class="btn-add">Tambah Guru</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: EDIT GURU -->
    <div class="modal-overlay" id="modal-edit-guru">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-user-pen"></i>
                    <span>Sunting Data Guru</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-edit-guru')">&times;</button>
            </div>
            <form id="form-edit-guru" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="edit_guru_nama">Nama Lengkap</label>
                        <input type="text" id="edit_guru_nama" name="nama_guru" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_guru_mapel">Mata Pelajaran</label>
                        <input type="text" id="edit_guru_mapel" name="mapel" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_guru_jabatan">Jabatan</label>
                        <input type="text" id="edit_guru_jabatan" name="jabatan" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_guru_foto">Ganti Foto (Opsional)</label>
                        <input type="file" id="edit_guru_foto" name="foto" class="form-control" accept="image/*">
                        <small
                            style="color:var(--text-muted); font-size:0.75rem; margin-top:4px; display:block;">Biarkan
                            kosong jika tidak ingin mengubah foto</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-edit-guru')">Batal</button>
                    <button type="submit" class="btn-add">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        // TABS SWITCHER LOGIC
        function switchTab(tab) {
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('active');
            });

            document.getElementById('content-' + tab).classList.add('active');
            document.getElementById('tab-' + tab + '-btn').classList.add('active');
        }

        // MODAL TOGGLE LOGIC
        function openModal(modalId) {
            document.getElementById(modalId).classList.add('active');
        }

        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('active');
            // Reset previews if gallery modals are closed
            if (modalId === 'modal-add-galeri') {
                document.getElementById('add_galeri_foto').value = '';
                document.getElementById('add_galeri_preview').src = '';
                document.getElementById('add_galeri_preview_container').style.display = 'none';
            } else if (modalId === 'modal-edit-galeri') {
                document.getElementById('edit_galeri_foto').value = '';
                document.getElementById('edit_galeri_preview').src = '';
                document.getElementById('edit_galeri_preview_container').style.display = 'none';
            }
        }

        // POPULATE SISWA EDIT MODAL
        function openEditSiswaModal(nis, nama, kelas, jk, alamat) {
            const form = document.getElementById('form-edit-siswa');
            form.action = `/petugas/dashboard/siswa/${nis}`;

            document.getElementById('edit_nama').value = nama;
            document.getElementById('edit_kelas').value = kelas;
            document.getElementById('edit_jk').value = jk;
            document.getElementById('edit_alamat').value = alamat;

            openModal('modal-edit-siswa');
        }

        // POPULATE ALUMNI EDIT MODAL
        function openEditAlumniModal(id, nama, tahun, kelanjutan, tempat, jabatan, testimoni) {
            const form = document.getElementById('form-edit-alumni');
            form.action = `/petugas/dashboard/alumni/${id}`;

            document.getElementById('edit_alumni_nama').value = nama;
            document.getElementById('edit_alumni_tahun').value = tahun;
            document.getElementById('edit_alumni_kelanjutan').value = kelanjutan;
            document.getElementById('edit_alumni_tempat').value = tempat;
            document.getElementById('edit_alumni_jabatan').value = jabatan;
            document.getElementById('edit_alumni_testimoni').value = testimoni;

            openModal('modal-edit-alumni');
        }

        // POPULATE PENGUMUMAN EDIT MODAL
        function openEditPengumumanModal(id, judul, isi) {
            const form = document.getElementById('form-edit-pengumuman');
            form.action = `/petugas/dashboard/pengumuman/${id}`;
            document.getElementById('edit_pengumuman_judul').value = judul;
            document.getElementById('edit_pengumuman_isi').value = isi;
            openModal('modal-edit-pengumuman');
        }

        // POPULATE GALERI EDIT MODAL
        function openEditGaleriModal(id, judul, deskripsi) {
            const form = document.getElementById('form-edit-galeri');
            form.action = `/petugas/dashboard/galeri/${id}`;
            document.getElementById('edit_galeri_judul').value = judul;
            document.getElementById('edit_galeri_deskripsi').value = deskripsi;
            openModal('modal-edit-galeri');
        }

        // POPULATE GURU EDIT MODAL
        function openEditGuruModal(nip, nama, mapel, jabatan) {
            const form = document.getElementById('form-edit-guru');
            form.action = `/petugas/dashboard/guru/${nip}`;
            document.getElementById('edit_guru_nama').value = nama;
            document.getElementById('edit_guru_mapel').value = mapel;
            document.getElementById('edit_guru_jabatan').value = jabatan;
            openModal('modal-edit-guru');
        }

        function toggleAllGuruCheckboxes(source) {
            document.querySelectorAll('.guru-checkbox').forEach(checkbox => {
                checkbox.checked = source.checked;
            });
        }

        function submitBulkDelete() {
            const form = document.getElementById('guru-bulk-delete-form');
            const container = document.getElementById('guru-bulk-inputs');
            container.innerHTML = '';

            const checked = Array.from(document.querySelectorAll('.guru-checkbox:checked')).map(cb => cb.value);
            if (checked.length === 0) {
                alert('Pilih minimal satu data guru untuk dihapus.');
                return;
            }

            if (!confirm('Yakin ingin menghapus ' + checked.length + ' data guru terpilih?')) {
                return;
            }

            checked.forEach(nip => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'selected_nip[]';
                input.value = nip;
                container.appendChild(input);
            });

            form.submit();
        }

        // Click outside modal to close
        window.onclick = function (event) {
            if (event.target.classList.contains('modal-overlay')) {
                closeModal(event.target.id);
            }
        }

        // IMAGE PREVIEW LOGIC
        function initImagePreview(inputId, previewImgId, containerId) {
            const input = document.getElementById(inputId);
            const preview = document.getElementById(previewImgId);
            const container = document.getElementById(containerId);

            if (input && preview && container) {
                input.addEventListener('change', function () {
                    const file = this.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function (e) {
                            preview.src = e.target.result;
                            container.style.display = 'block';
                        }
                        reader.readAsDataURL(file);
                    } else {
                        preview.src = '';
                        container.style.display = 'none';
                    }
                });
            }
        }

        // Initialize previews on load
        document.addEventListener('DOMContentLoaded', function () {
            initImagePreview('add_galeri_foto', 'add_galeri_preview', 'add_galeri_preview_container');
            initImagePreview('edit_galeri_foto', 'edit_galeri_preview', 'edit_galeri_preview_container');
        });
    </script>
</body>

</html>