<!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 PPLG</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=Outfit:wght@300;400;500;600;700;800&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: #080710;
            --card-bg: rgba(25, 18, 38, 0.65);
            --primary: #9d4edd;
            --primary-light: #c77dff;
            --primary-glow: rgba(157, 78, 221, 0.3);
            --text-main: #f8f7ff;
            --text-muted: #b3b0cb;
            --border-color: rgba(199, 125, 255, 0.18);
            --font-family: 'Outfit', sans-serif;
            --success: #10b981;
            --danger: #ef4444;
        }

        * {
            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 90% 10%, rgba(157, 78, 221, 0.1) 0%, transparent 40%),
                radial-gradient(circle at 10% 90%, rgba(199, 125, 255, 0.08) 0%, transparent 40%),
                linear-gradient(rgba(8, 7, 16, 0.96), rgba(8, 7, 16, 0.96));
            color: var(--text-main);
            min-height: 100vh;
            overflow-x: hidden;
            display: flex;
            flex-direction: column;
        }

        /* Navbar */
        .navbar {
            background: rgba(15, 12, 25, 0.8);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-bottom: 1px solid var(--border-color);
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .nav-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: #ffffff;
        }

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

        .nav-brand span {
            font-weight: 700;
            font-size: 1.2rem;
            letter-spacing: 0.5px;
        }

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

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

        .user-name {
            font-weight: 600;
            font-size: 0.9rem;
        }

        .user-role {
            font-size: 0.75rem;
            color: var(--primary-light);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .btn-logout-nav {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.2);
            color: #f87171;
            padding: 8px 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 0.85rem;
            font-weight: 600;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .btn-logout-nav:hover {
            background: var(--danger);
            color: #ffffff;
            transform: translateY(-1px);
        }

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

        /* Welcome Header */
        .welcome-header {
            margin-bottom: 30px;
            animation: fadeIn 0.8s ease-out;
        }

        .welcome-header h1 {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(135deg, #ffffff 40%, var(--primary-light) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 5px;
        }

        .welcome-header p {
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        /* Alerts */
        .alert {
            background: rgba(16, 185, 129, 0.1);
            border: 1px solid rgba(16, 185, 129, 0.3);
            color: #34d399;
            padding: 15px 20px;
            border-radius: 12px;
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            animation: slideDown 0.4s ease-out;
        }

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

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

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

        .tab-btn {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1rem;
            font-weight: 600;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-family);
        }

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

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

        /* Content Card */
        .dashboard-card {
            background: var(--card-bg);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            margin-bottom: 40px;
            min-height: 400px;
        }

        .tab-content {
            display: none;
            animation: fadeIn 0.5s ease-out;
        }

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

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Actions Header */
        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .content-title {
            font-size: 1.3rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 10px;
        }

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

        .btn-add {
            background: linear-gradient(135deg, var(--primary) 0%, #7b2cbf 100%);
            color: #ffffff;
            border: none;
            border-radius: 10px;
            padding: 10px 20px;
            font-size: 0.9rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 15px var(--primary-glow);
            font-family: var(--font-family);
        }

        .btn-add:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px var(--primary-glow);
            filter: brightness(1.1);
        }

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

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

        th {
            background: rgba(15, 12, 25, 0.6);
            color: var(--text-muted);
            font-weight: 600;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.5px;
        }

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

        tr:last-child td {
            border-bottom: none;
        }

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

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

        .avatar-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--border-color);
            background: #110e1a;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--primary-light);
            font-size: 0.95rem;
        }

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

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

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

        .badge-gender {
            padding: 3px 8px;
            border-radius: 6px;
            font-size: 0.8rem;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-muted);
        }

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

        .btn-action {
            width: 32px;
            height: 32px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            font-size: 0.85rem;
            color: #ffffff;
            text-decoration: none;
        }

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

        .btn-edit:hover {
            background: var(--primary);
            color: #ffffff;
            transform: translateY(-2px);
        }

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

        .btn-delete:hover {
            background: var(--danger);
            color: #ffffff;
            transform: translateY(-2px);
        }

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

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

        .modal-box {
            background: #110f1e;
            border: 1px solid var(--border-color);
            border-radius: 20px;
            width: 100%;
            max-width: 500px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 30px rgba(157, 78, 221, 0.1);
            overflow: hidden;
            transform: scale(0.9);
            transition: transform 0.3s ease;
        }

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

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

        .modal-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: #ffffff;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .modal-close {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-size: 1.2rem;
            cursor: pointer;
            transition: color 0.2s;
        }

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

        .modal-body {
            padding: 25px;
            max-height: 70vh;
            overflow-y: auto;
        }

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

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

        .form-control {
            width: 100%;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            padding: 11px 14px;
            color: var(--text-main);
            font-size: 0.9rem;
            font-family: var(--font-family);
            outline: none;
            transition: all 0.3s;
        }

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

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

        .modal-footer {
            padding: 15px 25px 25px;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .btn-cancel {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: var(--text-main);
            padding: 10px 18px;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.85rem;
            transition: all 0.2s;
            font-family: var(--font-family);
        }

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

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

        .no-data i {
            font-size: 2.5rem;
            margin-bottom: 12px;
            display: block;
            opacity: 0.5;
        }

        /* Mobile adaptation & Premium Responsiveness */
        @media (max-width: 768px) {
            .navbar {
                padding: 12px 20px;
            }

            .container {
                margin: 15px auto;
                padding: 0 15px;
            }

            .dashboard-card {
                padding: 20px 15px;
            }

            .content-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 12px;
            }

            .btn-add {
                width: 100%;
                justify-content: center;
            }

            /* Horizontal Scrollable Tabs on Mobile (Crucial for 7 tabs) */
            .tabs-container {
                flex-wrap: nowrap;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                padding-bottom: 8px;
                gap: 8px;
                scrollbar-width: none; /* Firefox */
                -ms-overflow-style: none; /* IE/Edge */
            }

            .tabs-container::-webkit-scrollbar {
                display: none; /* Safari/Chrome */
            }

            .tab-btn {
                flex-shrink: 0;
                white-space: nowrap;
                padding: 8px 14px;
                font-size: 0.85rem;
            }

            /* Larger, touch-friendly action buttons in tables */
            .btn-action {
                width: 34px;
                height: 34px;
                font-size: 0.9rem;
            }

            .action-btns {
                gap: 10px;
            }
        }

        @media (max-width: 576px) {
            .nav-brand span {
                font-size: 1rem;
            }

            .nav-brand i {
                font-size: 1.25rem;
            }

            /* Hide User Info details on mobile to preserve layout space */
            .user-info {
                display: none;
            }

            .btn-logout-nav span {
                display: none; /* Show icon only */
            }

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

            .nav-user {
                gap: 8px;
            }

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

            .welcome-header p {
                font-size: 0.85rem;
            }

            .panel-card {
                padding: 20px 15px !important;
            }

            .modal-box {
                border-radius: 16px;
            }

            .modal-body, .modal-footer {
                padding: 20px;
            }
        }
    </style>
</head>
<body>

    <!-- Header Navbar -->
    <nav class="navbar">
        <a href="/" class="nav-brand">
            <i class="fa-solid fa-gears"></i>
            <span>Otomotif Hub</span>
        </a>
        <div class="nav-user">
            <div class="user-info">
                <div class="user-name"><?php echo e($petugasName); ?></div>
                <div class="user-role">Petugas Otomotif</div>
            </div>
            <form action="<?php echo e(route('petugas.logout')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <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 Staf Petugas</h1>
            <p>Kelola data akademik siswa dan riwayat kelanjutan studi/karir alumni secara langsung di bawah ini.</p>
        </div>

        <!-- Success & Validation Alerts -->
        <?php if(session('success')): ?>
            <div class="alert">
                <i class="fa-solid fa-circle-check"></i>
                <span><?php echo e(session('success')); ?></span>
            </div>
        <?php endif; ?>

        <?php if($errors->any()): ?>
            <div class="alert alert-danger">
                <i class="fa-solid fa-triangle-exclamation"></i>
                <span><?php echo e($errors->first()); ?></span>
            </div>
        <?php 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-user-tie"></i> 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
            </button>
            <button class="tab-btn" id="tab-guru-btn" onclick="switchTab('guru')">
                <i class="fa-solid fa-chalkboard-user"></i> Guru
            </button>
            <button class="tab-btn" id="tab-konten-btn" onclick="switchTab('konten')">
                <i class="fa-solid fa-file-pen"></i> Konten
            </button>
            <button class="tab-btn" id="tab-profil-btn" onclick="switchTab('profil')">
                <i class="fa-solid fa-user-pen"></i> Profil Saya
            </button>
        </div>

        <div class="dashboard-card">

            <!-- TAB 1: DATA SISWA -->
            <div class="tab-content active" id="content-siswa">
                <div class="content-header">
                    <div class="content-title">
                        <i class="fa-solid fa-users"></i>
                        <span>Daftar 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>
                            <?php $__empty_1 = true; $__currentLoopData = $siswa; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr>
                                    <td>
                                        <div class="avatar-cell">
                                            <?php if($item->foto && $item->foto !== 'default_avatar.png' && file_exists(public_path($item->foto))): ?>
                                                <img class="avatar-img" src="<?php echo e(asset($item->foto)); ?>" alt="Foto">
                                            <?php else: ?>
                                                <div class="avatar-img"><?php echo e(substr($item->nama_siswa, 0, 1)); ?></div>
                                            <?php endif; ?>
                                            <div>
                                                <div style="font-weight:600;"><?php echo e($item->nama_siswa); ?></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="font-family: monospace; font-size:0.95rem;"><?php echo e($item->nis); ?></td>
                                    <td><?php echo e($item->kelas); ?></td>
                                    <td>
                                        <span class="badge-gender">
                                            <?php echo e($item->jk === 'laki-laki' ? 'Laki-laki' : 'Perempuan'); ?>

                                        </span>
                                    </td>
                                    <td style="max-width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"><?php echo e($item->alamat); ?></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit" onclick="openEditSiswaModal('<?php echo e($item->nis); ?>', '<?php echo e(addslashes($item->nama_siswa)); ?>', '<?php echo e(addslashes($item->kelas)); ?>', '<?php echo e($item->jk); ?>', '<?php echo e(addslashes($item->alamat)); ?>')">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                            <form action="<?php echo e(route('petugas.dashboard.siswa.destroy', $item->nis)); ?>" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus siswa ini?')">
                                                <?php echo csrf_field(); ?>
                                                <?php echo method_field('DELETE'); ?>
                                                <button type="submit" class="btn-action btn-delete">
                                                    <i class="fa-solid fa-trash-can"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="6">
                                        <div class="no-data">
                                            <i class="fa-solid fa-folder-open"></i>
                                            Belum ada data siswa.
                                        </div>
                                    </td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- TAB 2: DATA ALUMNI -->
            <div class="tab-content" id="content-alumni">
                <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>
                            <?php $__empty_1 = true; $__currentLoopData = $alumni; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr>
                                    <td>
                                        <div class="avatar-cell">
                                            <?php if($item->foto && $item->foto !== 'default_alumni.jpg' && file_exists(public_path($item->foto))): ?>
                                                <img class="avatar-img" src="<?php echo e(asset($item->foto)); ?>" alt="Foto">
                                            <?php else: ?>
                                                <div class="avatar-img"><?php echo e(substr($item->nama, 0, 1)); ?></div>
                                            <?php endif; ?>
                                            <div>
                                                <div style="font-weight:600;"><?php echo e($item->nama); ?></div>
                                                <div style="font-size:0.75rem; color:var(--text-muted)">@ <?php echo e($item->username); ?></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td><?php echo e($item->tahun_lulus); ?></td>
                                    <td>
                                        <span class="badge-status <?php echo e($item->kelanjutan === 'kerja' ? 'badge-kerja' : 'badge-kuliah'); ?>">
                                            <?php echo e($item->kelanjutan); ?>

                                        </span>
                                    </td>
                                    <td><?php echo e($item->tempat); ?></td>
                                    <td><?php echo e($item->jabatan); ?></td>
                                    <td style="max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="<?php echo e($item->testimoni); ?>"><?php echo e($item->testimoni); ?></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit" onclick="openEditAlumniModal('<?php echo e($item->id_alumni); ?>', '<?php echo e(addslashes($item->nama)); ?>', '<?php echo e($item->tahun_lulus); ?>', '<?php echo e($item->kelanjutan); ?>', '<?php echo e(addslashes($item->tempat)); ?>', '<?php echo e(addslashes($item->jabatan)); ?>', '<?php echo e(addslashes($item->testimoni)); ?>')">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                            <form action="<?php echo e(route('petugas.dashboard.alumni.destroy', $item->id_alumni)); ?>" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus data alumni ini? Tindakan ini permanen.')">
                                                <?php echo csrf_field(); ?>
                                                <?php echo method_field('DELETE'); ?>
                                                <button type="submit" class="btn-action btn-delete">
                                                    <i class="fa-solid fa-trash-can"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="7">
                                        <div class="no-data">
                                            <i class="fa-solid fa-folder-open"></i>
                                            Belum ada data alumni terdaftar.
                                        </div>
                                    </td>
                                </tr>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- TAB 3: KELOLA PENGUMUMAN -->
            <div class="tab-content" id="content-pengumuman">
                <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>
                            <?php $__empty_1 = true; $__currentLoopData = $pengumuman; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr>
                                    <td style="font-weight: 600; min-width: 180px;"><?php echo e($item->judul); ?></td>
                                    <td style="color: var(--text-muted); max-width: 300px;"><?php echo e(Str::limit($item->isi, 80)); ?></td>
                                    <td><?php echo e(date('d M Y', strtotime($item->tanggal))); ?></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit" onclick="openEditPengumumanModal('<?php echo e($item->id_pengumuman); ?>', '<?php echo e(addslashes($item->judul)); ?>', `<?php echo e(addslashes($item->isi)); ?>`)">
                                                <i class="fa-solid fa-pen"></i>
                                            </button>
                                            <form action="<?php echo e(route('petugas.dashboard.pengumuman.destroy', $item->id_pengumuman)); ?>" method="POST" onsubmit="return confirm('Hapus pengumuman ini?')">
                                                <?php echo csrf_field(); ?>
                                                <?php echo method_field('DELETE'); ?>
                                                <button type="submit" class="btn-action btn-delete">
                                                    <i class="fa-solid fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <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>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- TAB 4: KELOLA GALERI -->
            <div class="tab-content" id="content-galeri">
                <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>
                            <?php $__empty_1 = true; $__currentLoopData = $galeri; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr>
                                    <td>
                                        <?php if($item->foto && file_exists(public_path($item->foto))): ?>
                                            <img src="<?php echo e(asset($item->foto)); ?>" alt="<?php echo e($item->judul); ?>" style="width: 60px; height: 45px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-color);">
                                        <?php 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>
                                        <?php endif; ?>
                                    </td>
                                    <td style="font-weight: 600;"><?php echo e($item->judul); ?></td>
                                    <td style="color: var(--text-muted); max-width: 250px;"><?php echo e(Str::limit($item->deskripsi, 60)); ?></td>
                                    <td><?php echo e(date('d M Y', strtotime($item->tanggal_kegiatan))); ?></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit" onclick="openEditGaleriModal('<?php echo e($item->id_galeri); ?>', '<?php echo e(addslashes($item->judul)); ?>', `<?php echo e(addslashes($item->deskripsi)); ?>`)">
                                                <i class="fa-solid fa-pen"></i>
                                            </button>
                                            <form action="<?php echo e(route('petugas.dashboard.galeri.destroy', $item->id_galeri)); ?>" method="POST" onsubmit="return confirm('Hapus foto galeri ini?')">
                                                <?php echo csrf_field(); ?>
                                                <?php echo method_field('DELETE'); ?>
                                                <button type="submit" class="btn-action btn-delete">
                                                    <i class="fa-solid fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <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>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- TAB 5: DATA GURU / PENGAJAR -->
            <div class="tab-content" id="content-guru">
                <div class="content-header">
                    <div class="content-title">
                        <i class="fa-solid fa-chalkboard-user"></i>
                        <span>Kelola Data Guru / Pengajar</span>
                    </div>
                    <button class="btn-add" onclick="openModal('modal-add-guru')">
                        <i class="fa-solid fa-plus"></i> Tambah Guru
                    </button>
                </div>

                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>Guru</th>
                                <th>NIP</th>
                                <th>Mata Pelajaran</th>
                                <th>Jabatan</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php $__empty_1 = true; $__currentLoopData = $guru; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
                                <tr>
                                    <td>
                                        <div class="avatar-cell">
                                            <?php if($item->foto && $item->foto !== 'default_guru.jpg' && file_exists(public_path($item->foto))): ?>
                                                <img class="avatar-img" src="<?php echo e(asset($item->foto)); ?>" alt="Foto">
                                            <?php else: ?>
                                                <div class="avatar-img"><?php echo e(substr($item->nama_guru, 0, 1)); ?></div>
                                            <?php endif; ?>
                                            <div>
                                                <div style="font-weight:600;"><?php echo e($item->nama_guru); ?></div>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="font-family: monospace; font-size:0.95rem;"><?php echo e($item->nip); ?></td>
                                    <td><?php echo e($item->mapel); ?></td>
                                    <td><?php echo e($item->jabatan); ?></td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit" onclick="openEditGuruModal('<?php echo e($item->nip); ?>', '<?php echo e(addslashes($item->nama_guru)); ?>', '<?php echo e(addslashes($item->mapel)); ?>', '<?php echo e(addslashes($item->jabatan)); ?>')">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                            <form action="<?php echo e(route('petugas.dashboard.guru.destroy', $item->nip)); ?>" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus data guru ini?')">
                                                <?php echo csrf_field(); ?>
                                                <?php echo method_field('DELETE'); ?>
                                                <button type="submit" class="btn-action btn-delete">
                                                    <i class="fa-solid fa-trash-can"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </td>
                                </tr>
                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
                                <tr>
                                    <td colspan="5">
                                        <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>
                            <?php endif; ?>
                        </tbody>
                    </table>
                </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; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color); padding: 30px; border-radius: 20px;">
                    <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="<?php echo e(route('petugas.dashboard.konten.update')); ?>" method="POST">
                        <?php echo csrf_field(); ?>
                        <?php echo method_field('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="<?php echo e($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;"><?php echo e($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;"><?php echo e($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;"><?php echo e($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; background: rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color); padding: 30px; border-radius: 20px;">
                    <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="<?php echo e(route('petugas.profile.update')); ?>" method="POST" enctype="multipart/form-data">
                        <?php echo csrf_field(); ?>
                        <?php echo method_field('PUT'); ?>
                        
                        <div style="text-align: center; margin-bottom: 25px;">
                            <?php
                                $currentPetugas = Auth::guard('petugas')->user();
                            ?>
                            <?php if($currentPetugas->foto && $currentPetugas->foto !== 'default_petugas.jpg' && file_exists(public_path($currentPetugas->foto))): ?>
                                <img src="<?php echo e(asset($currentPetugas->foto)); ?>" alt="Avatar" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); box-shadow: 0 0 15px var(--primary-glow);">
                            <?php else: ?>
                                <div style="width: 100px; height: 100px; 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.5rem; font-weight: 800; color: #ffffff; border: 3px solid var(--primary); box-shadow: 0 0 15px var(--primary-glow);">
                                    <?php echo e(substr($currentPetugas->nama_petugas, 0, 1)); ?>

                                </div>
                            <?php 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="<?php echo e($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="<?php echo e($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="<?php echo e($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>
    </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">
                <?php echo csrf_field(); ?>
                <?php echo method_field('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">
                <?php echo csrf_field(); ?>
                <?php echo method_field('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="<?php echo e(route('petugas.dashboard.pengumuman.store')); ?>" method="POST">
                <?php echo csrf_field(); ?>
                <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">
                <?php echo csrf_field(); ?>
                <?php echo method_field('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="<?php echo e(route('petugas.dashboard.galeri.store')); ?>" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>
                <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(--border-color); 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">
                <?php echo csrf_field(); ?>
                <?php echo method_field('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(--border-color); 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="<?php echo e(route('petugas.dashboard.guru.store')); ?>" method="POST" enctype="multipart/form-data">
                <?php echo csrf_field(); ?>
                <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">
                <?php echo csrf_field(); ?>
                <?php echo method_field('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');
        }

        // Click outside modal to close (safely triggering closeModal)
        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>
<?php /**PATH D:\laragon\www\Otomotif_by_PPLG\resources\views/dashboard/petugas.blade.php ENDPATH**/ ?>