<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin 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: #060608;
            --card-bg: rgba(14, 14, 18, 0.7);
            --primary: #ef4444; /* High performance Crimson Red */
            --primary-glow: rgba(239, 68, 68, 0.35);
            --primary-border: rgba(239, 68, 68, 0.18);
            --text-main: #f8fafc;
            --text-muted: #94a3b8;
            --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(239, 68, 68, 0.06) 0%, transparent 45%),
                radial-gradient(circle at 90% 80%, rgba(239, 68, 68, 0.04) 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, 8, 12, 0.8);
            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);
            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%, #fca5a5 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);
            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%, #ff8888 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; }
        }

        /* Stats Grid */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 24px;
            margin-bottom: 40px;
        }

        .stat-card {
            background: var(--card-bg);
            border: 1px solid var(--primary-border);
            border-radius: 20px;
            padding: 26px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 68, 68, 0.02);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary);
            box-shadow: 0 25px 50px rgba(239, 68, 68, 0.12);
        }

        .stat-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--primary), transparent);
            opacity: 0.8;
        }

        .stat-value {
            font-family: var(--font-heading);
            font-size: 2.5rem;
            font-weight: 900;
            color: #ffffff;
            line-height: 1;
        }

        .stat-label {
            font-size: 0.78rem;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: var(--text-muted);
            margin-top: 8px;
            font-weight: 700;
        }

        .stat-icon {
            font-size: 2.5rem;
            color: rgba(239, 68, 68, 0.18);
            transition: all 0.3s;
        }

        .stat-card:hover .stat-icon {
            color: var(--primary);
            transform: scale(1.1) rotate(5deg);
            filter: drop-shadow(0 0 8px var(--primary-glow));
        }

        /* 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);
        }

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

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

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

        /* Activity Terminal Monitor */
        .terminal-container {
            background: rgba(6, 6, 8, 0.95);
            border: 1px solid rgba(239, 68, 68, 0.15);
            border-radius: 16px;
            font-family: var(--font-mono);
            padding: 20px;
            display: flex;
            flex-direction: column;
            height: 420px;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 0 30px rgba(239, 68, 68, 0.02);
            position: relative;
        }

        .terminal-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), transparent);
            border-radius: 16px 16px 0 0;
            opacity: 0.7;
        }

        .terminal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            padding-bottom: 14px;
            margin-bottom: 18px;
            font-size: 0.8rem;
            color: var(--primary);
            font-weight: 700;
            letter-spacing: 1px;
        }

        .terminal-search {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: #ffffff;
            border-radius: 8px;
            padding: 7px 14px;
            font-size: 0.8rem;
            outline: none;
            width: 220px;
            font-family: var(--font-family);
            transition: all 0.3s;
        }

        .terminal-search:focus {
            border-color: var(--primary);
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.2);
            background: rgba(255, 255, 255, 0.05);
        }

        .terminal-body {
            flex-grow: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding-right: 5px;
        }

        .terminal-body::-webkit-scrollbar {
            width: 6px;
        }

        .terminal-body::-webkit-scrollbar-thumb {
            background: rgba(239, 68, 68, 0.2);
            border-radius: 10px;
        }

        .terminal-row {
            display: flex;
            align-items: flex-start;
            font-size: 0.85rem;
            line-height: 1.5;
            border-bottom: 1px dashed rgba(255, 255, 255, 0.02);
            padding-bottom: 8px;
            transition: background 0.2s;
        }

        .terminal-row:hover {
            background: rgba(239, 68, 68, 0.03);
        }

        .terminal-time {
            color: var(--text-muted);
            min-width: 155px;
            font-size: 0.78rem;
            flex-shrink: 0;
        }

        .terminal-user {
            color: var(--primary);
            min-width: 120px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .terminal-action {
            color: var(--text-main);
            flex-grow: 1;
        }

        .terminal-ip {
            color: #4b5563;
            font-size: 0.78rem;
            margin-left: 15px;
            flex-shrink: 0;
        }

        .btn-clear {
            background: transparent;
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #f87171;
            padding: 8px 16px;
            border-radius: 10px;
            font-size: 0.82rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-heading);
        }

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

        /* Buttons & Forms */
        .btn-add {
            background: linear-gradient(135deg, var(--primary) 0%, #b91c1c 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(239, 68, 68, 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(239, 68, 68, 0.4);
            filter: brightness(1.1);
        }

        .btn-add:active {
            transform: translateY(0);
        }

        /* 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, 8, 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: #11141c;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            color: var(--primary);
            font-size: 0.95rem;
            box-shadow: 0 0 10px rgba(0,0,0,0.3);
        }

        .badge-role {
            background: rgba(239, 68, 68, 0.08);
            color: #f87171;
            border: 1px solid rgba(239, 68, 68, 0.2);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* 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);
        }

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

        .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 */
        .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: #0d0d12;
            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(239, 68, 68, 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(239, 68, 68, 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);
        }

        .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='%23ef4444' 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: #0b0b0f;
            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(239, 68, 68, 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);
        }

        /* 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(239, 68, 68, 0.08);
            color: #ffffff;
            border: 1px solid var(--primary-border);
            box-shadow: 0 0 20px rgba(239, 68, 68, 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); }
        }

        /* Mobile adaptation & Premium Responsiveness */
        @media (max-width: 992px) {
            .navbar {
                padding: 15px 25px;
            }
            .container {
                padding: 0 20px;
                margin: 25px auto;
            }
        }

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

            /* Horizontal Scrollable Tabs on Mobile */
            .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;
            }

            .terminal-container {
                height: 370px;
                padding: 15px;
            }

            /* Stackable Terminal Rows on Mobile */
            .terminal-row {
                flex-direction: column;
                gap: 4px;
                padding-bottom: 12px;
            }

            .terminal-time {
                font-size: 0.72rem;
                color: var(--primary);
                min-width: auto;
            }

            .terminal-user {
                min-width: auto;
                font-size: 0.8rem;
            }

            .terminal-ip {
                margin-left: 0;
                display: block;
                margin-top: 2px;
                font-size: 0.72rem;
            }
            
            .user-info {
                display: none;
            }

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

            .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-shield-halved"></i>
            <span>Admin Area</span>
        </a>
        <div class="nav-user">
            <div class="user-info">
                <div class="user-name">{{ $adminName }}</div>
                <div class="user-role">Super Admin</div>
            </div>
            <form action="{{ route('admin.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 Keamanan Admin</h1>
            <p>Kelola seluruh otorisasi akun (Admin, Petugas, Alumni) dan data Siswa secara terpusat.</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-logs-btn" onclick="switchTab('logs')">
                <i class="fa-solid fa-terminal"></i> Log & Statistik
            </button>
            <button class="tab-btn" id="tab-petugas-btn" onclick="switchTab('petugas')">
                <i class="fa-solid fa-users-gear"></i> Staff Petugas
            </button>
            <button class="tab-btn" id="tab-admins-btn" onclick="switchTab('admins')">
                <i class="fa-solid fa-user-shield"></i> Akun Admin
            </button>
            <button class="tab-btn" id="tab-alumni-btn" onclick="switchTab('alumni')">
                <i class="fa-solid fa-user-tie"></i> Data Alumni
            </button>
            <button class="tab-btn" id="tab-siswa-btn" onclick="switchTab('siswa')">
                <i class="fa-solid fa-graduation-cap"></i> Data Siswa
            </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: LOGS & STATISTIK -->
        <div class="tab-content active" id="content-logs">
            <!-- Stats Grid -->
            <div class="stats-grid">
                <div class="stat-card">
                    <div>
                        <div class="stat-value">{{ $stats['total_siswa'] }}</div>
                        <div class="stat-label">Siswa Aktif</div>
                    </div>
                    <i class="fa-solid fa-graduation-cap stat-icon"></i>
                </div>
                <div class="stat-card">
                    <div>
                        <div class="stat-value">{{ $stats['total_alumni'] }}</div>
                        <div class="stat-label">Alumni Tracer</div>
                    </div>
                    <i class="fa-solid fa-user-tie stat-icon"></i>
                </div>
                <div class="stat-card">
                    <div>
                        <div class="stat-value">{{ $stats['total_petugas'] }}</div>
                        <div class="stat-label">Akun Petugas</div>
                    </div>
                    <i class="fa-solid fa-users-gear stat-icon"></i>
                </div>
                <div class="stat-card">
                    <div>
                        <div class="stat-value">{{ $stats['total_admin'] }}</div>
                        <div class="stat-label">Akun Admin</div>
                    </div>
                    <i class="fa-solid fa-shield-halved stat-icon"></i>
                </div>
            </div>

            <div class="panel-card">
                <div class="panel-header">
                    <div class="panel-title">
                        <i class="fa-solid fa-terminal"></i>
                        <span>Terminal Log Audit Aktifitas</span>
                    </div>
                    @if(count($logs) > 0)
                        <form action="{{ route('admin.dashboard.clear-logs') }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin mengosongkan terminal log?')">
                            @csrf
                            <button type="submit" class="btn-clear">
                                <i class="fa-solid fa-eraser"></i>
                                Bersihkan Terminal
                            </button>
                        </form>
                    @endif
                </div>

                <div class="terminal-container">
                    <div class="terminal-header">
                        <span>SYSTEM LOG AUDIT ACTIVE</span>
                        <input type="text" id="terminal-search-input" class="terminal-search" placeholder="Cari log aktifitas..." onkeyup="filterLogs()">
                    </div>
                    <div class="terminal-body" id="terminal-log-rows">
                        @forelse($logs as $log)
                            <div class="terminal-row" data-search-text="{{ strtolower($log->user_name . ' ' . $log->activity) }}">
                                <span class="terminal-time">[{{ \Carbon\Carbon::parse($log->created_at)->format('d/M/Y H:i:s') }}]</span>
                                <span class="terminal-user">&gt; {{ $log->user_name }}</span>
                                <span class="terminal-action">{{ $log->activity }}</span>
                                <span class="terminal-ip">IP: {{ $log->ip_address ?? '127.0.0.1' }}</span>
                            </div>
                        @empty
                            <div style="color:#555; text-align:center; padding-top:120px; font-family: var(--font-mono)">
                                [ SYSTEM IDLE - LOG KOSONG ]
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <!-- TAB 2: STAFF PETUGAS (CRUD) -->
        <div class="tab-content" id="content-petugas">
            <div class="panel-card">
                <div class="panel-header">
                    <div class="panel-title">
                        <i class="fa-solid fa-user-gear"></i>
                        <span>Manajemen Akun Staff Petugas</span>
                    </div>
                    <button class="btn-add" onclick="openModal('modal-add-petugas')">
                        <i class="fa-solid fa-plus"></i> Tambah Staff
                    </button>
                </div>

                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>Petugas</th>
                                <th>Username</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($petugas as $item)
                                <tr>
                                    <td>
                                        <div class="avatar-cell">
                                            @if($item->foto && $item->foto !== 'default_petugas.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_petugas, 0, 1) }}</div>
                                            @endif
                                            <div>
                                                <div style="font-weight:600; color: #ffffff;">{{ $item->nama_petugas }}</div>
                                                <div style="font-size:0.75rem; color:var(--text-muted); margin-top: 2px;">{{ $item->jabatan }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted);">{{ $item->username }}</td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit" onclick="openEditPetugasModal('{{ $item->id_petugas }}', '{{ addslashes($item->nama_petugas) }}', '{{ addslashes($item->username) }}', '{{ addslashes($item->jabatan) }}')">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                            <form action="{{ route('admin.dashboard.petugas.destroy', $item->id_petugas) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus akun Petugas 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="3">
                                        <div class="no-data">
                                            <i class="fa-solid fa-folder-open"></i>
                                            Belum ada petugas terdaftar.
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- TAB 3: AKUN ADMIN (CRUD) -->
        <div class="tab-content" id="content-admins">
            <div class="panel-card">
                <div class="panel-header">
                    <div class="panel-title">
                        <i class="fa-solid fa-user-shield"></i>
                        <span>Manajemen Akun Administrator</span>
                    </div>
                    <button class="btn-add" onclick="openModal('modal-add-admin')">
                        <i class="fa-solid fa-plus"></i> Tambah Admin
                    </button>
                </div>

                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>Admin</th>
                                <th>Username</th>
                                <th>Level</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($admins as $item)
                                <tr>
                                    <td>
                                        <div class="avatar-cell">
                                            @if($item->foto && $item->foto !== 'default_admin.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_admin, 0, 1) }}</div>
                                            @endif
                                            <div>
                                                <div style="font-weight:600; color: #ffffff;">{{ $item->nama_admin }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="font-family: var(--font-mono); font-size: 0.85rem; color: var(--text-muted);">{{ $item->username }}</td>
                                    <td>
                                        <span class="badge-role">
                                            {{ $item->level }}
                                        </span>
                                    </td>
                                    <td>
                                        <div class="action-btns">
                                            <button class="btn-action btn-edit" onclick="openEditAdminModal('{{ $item->id_admin }}', '{{ addslashes($item->nama_admin) }}', '{{ addslashes($item->username) }}')">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                            @if($item->id_admin != $currentAdmin->id_admin)
                                                <form action="{{ route('admin.dashboard.admin.destroy', $item->id_admin) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus akun Admin ini?')">
                                                    @csrf
                                                    @method('DELETE')
                                                    <button type="submit" class="btn-action btn-delete">
                                                        <i class="fa-solid fa-trash-can"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4">
                                        <div class="no-data">
                                            <i class="fa-solid fa-folder-open"></i>
                                            Belum ada admin terdaftar.
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- TAB 4: DATA ALUMNI (CRUD) -->
        <div class="tab-content" id="content-alumni">
            <div class="panel-card">
                <div class="panel-header">
                    <div class="panel-title">
                        <i class="fa-solid fa-user-tie"></i>
                        <span>Manajemen Akun Alumni</span>
                    </div>
                    <button class="btn-add" onclick="openModal('modal-add-alumni')">
                        <i class="fa-solid fa-plus"></i> Tambah Alumni
                    </button>
                </div>

                <div class="table-responsive">
                    <table>
                        <thead>
                            <tr>
                                <th>Alumni</th>
                                <th>Tahun Lulus</th>
                                <th>Status</th>
                                <th>Instansi</th>
                                <th>Jabatan / Prodi</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); margin-top: 2px;">@ {{ $item->username }}</div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>{{ $item->tahun_lulus }}</td>
                                    <td>
                                        <span class="badge-role" style="background: {{ $item->kelanjutan === 'kerja' ? 'rgba(16, 185, 129, 0.08)' : 'rgba(59, 130, 246, 0.08)' }}; color: {{ $item->kelanjutan === 'kerja' ? '#34d399' : '#60a5fa' }}; border: 1px solid {{ $item->kelanjutan === 'kerja' ? 'rgba(16, 185, 129, 0.25)' : 'rgba(59, 130, 246, 0.25)' }};">
                                            {{ ucfirst($item->kelanjutan) }}
                                        </span>
                                    </td>
                                    <td>{{ $item->tempat }}</td>
                                    <td>{{ $item->jabatan }}</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) }}', '{{ addslashes($item->username) }}')">
                                                <i class="fa-solid fa-pen-to-square"></i>
                                            </button>
                                            <form action="{{ route('admin.dashboard.alumni.destroy', $item->id_alumni) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus data Alumni 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 alumni terdaftar.
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- TAB 5: DATA SISWA (CRUD) -->
        <div class="tab-content" id="content-siswa">
            <div class="panel-card">
                <div class="panel-header">
                    <div class="panel-title">
                        <i class="fa-solid fa-graduation-cap"></i>
                        <span>Manajemen Data Siswa Otomotif</span>
                    </div>
                    <button class="btn-add" onclick="openModal('modal-add-siswa')">
                        <i class="fa-solid fa-plus"></i> Tambah Siswa
                    </button>
                </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-role" style="background: rgba(255,255,255,0.04); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.06);">
                                            {{ ucfirst($item->jk) }}
                                        </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('admin.dashboard.siswa.destroy', $item->nis) }}" method="POST" onsubmit="return confirm('Apakah Anda yakin ingin menghapus data 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 siswa terdaftar.
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

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

                <form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    
                    <div style="text-align: center; margin-bottom: 30px;">
                        @if($currentAdmin->foto && $currentAdmin->foto !== 'default_admin.jpg' && file_exists(public_path($currentAdmin->foto)))
                            <img src="{{ asset($currentAdmin->foto) }}" alt="Avatar" style="width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); box-shadow: 0 0 20px var(--primary-glow);">
                        @else
                            <div style="width: 120px; height: 120px; 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: 3rem; font-weight: 900; color: #ffffff; border: 3px solid var(--primary); box-shadow: 0 0 20px var(--primary-glow); font-family: var(--font-heading)">
                                {{ substr($currentAdmin->nama_admin, 0, 1) }}
                            </div>
                        @endif
                        <div style="margin-top: 14px; font-size: 0.8rem; 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_admin" class="form-control" value="{{ $currentAdmin->nama_admin }}" 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="{{ $currentAdmin->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: 20px; padding: 14px;">
                        <i class="fa-solid fa-save"></i> Simpan Perubahan Profil
                    </button>
                </form>
            </div>
        </div>

    </div>

    <!-- MODAL: TAMBAH PETUGAS -->
    <div class="modal-overlay" id="modal-add-petugas">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-user-plus"></i>
                    <span>Daftarkan Petugas Baru</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-add-petugas')">&times;</button>
            </div>
            <form action="{{ route('admin.dashboard.petugas.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="add_nama">Nama Lengkap</label>
                        <input type="text" id="add_nama" name="nama_petugas" class="form-control" placeholder="Nama petugas..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_jabatan">Jabatan</label>
                        <input type="text" id="add_jabatan" name="jabatan" class="form-control" placeholder="Contoh: Staf Bengkel TKR" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_username">Username</label>
                        <input type="text" id="add_username" name="username" class="form-control" placeholder="Username baru..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_password">Password</label>
                        <input type="password" id="add_password" name="password" class="form-control" placeholder="Min 6 karakter..." required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-add-petugas')">Batal</button>
                    <button type="submit" class="btn-add">Daftarkan Akun</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: EDIT PETUGAS -->
    <div class="modal-overlay" id="modal-edit-petugas">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-user-pen"></i>
                    <span>Sunting Akun Petugas</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-edit-petugas')">&times;</button>
            </div>
            <form id="form-edit-petugas" method="POST">
                @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_petugas" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_jabatan">Jabatan</label>
                        <input type="text" id="edit_jabatan" name="jabatan" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_username">Username</label>
                        <input type="text" id="edit_username" name="username" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_password">Ubah Password</label>
                        <input type="password" id="edit_password" name="password" class="form-control" placeholder="Biarkan kosong jika tidak diubah">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-edit-petugas')">Batal</button>
                    <button type="submit" class="btn-add">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: TAMBAH ADMIN -->
    <div class="modal-overlay" id="modal-add-admin">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-user-shield"></i>
                    <span>Daftarkan Admin Baru</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-add-admin')">&times;</button>
            </div>
            <form action="{{ route('admin.register.submit') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="add_admin_nama">Nama Lengkap</label>
                        <input type="text" id="add_admin_nama" name="nama_admin" class="form-control" placeholder="Nama admin..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_admin_username">Username</label>
                        <input type="text" id="add_admin_username" name="username" class="form-control" placeholder="Username baru..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_admin_password">Password</label>
                        <input type="password" id="add_admin_password" name="password" class="form-control" placeholder="Min 6 karakter..." required>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-add-admin')">Batal</button>
                    <button type="submit" class="btn-add">Daftarkan Admin</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: EDIT ADMIN -->
    <div class="modal-overlay" id="modal-edit-admin">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-user-pen"></i>
                    <span>Sunting Akun Admin</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-edit-admin')">&times;</button>
            </div>
            <form id="form-edit-admin" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="edit_admin_nama_val">Nama Lengkap</label>
                        <input type="text" id="edit_admin_nama_val" name="nama_admin" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_admin_username_val">Username</label>
                        <input type="text" id="edit_admin_username_val" name="username" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_admin_password_val">Ubah Password</label>
                        <input type="password" id="edit_admin_password_val" name="password" class="form-control" placeholder="Biarkan kosong jika tidak diubah">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-edit-admin')">Batal</button>
                    <button type="submit" class="btn-add">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: TAMBAH ALUMNI -->
    <div class="modal-overlay" id="modal-add-alumni">
        <div class="modal-box" style="max-width: 550px;">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-user-plus"></i>
                    <span>Daftarkan Alumni Baru</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-add-alumni')">&times;</button>
            </div>
            <form action="{{ route('admin.dashboard.alumni.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body" style="max-height: 65vh; overflow-y: auto;">
                    <div class="form-group">
                        <label class="form-label" for="add_alumni_nama">Nama Lengkap</label>
                        <input type="text" id="add_alumni_nama" name="nama" class="form-control" placeholder="Nama alumni..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_alumni_tahun">Tahun Lulus</label>
                        <input type="number" id="add_alumni_tahun" name="tahun_lulus" class="form-control" placeholder="Tahun kelulusan..." min="1900" max="{{ date('Y')+1 }}" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_alumni_kelanjutan">Kelanjutan</label>
                        <select id="add_alumni_kelanjutan" name="kelanjutan" class="form-control" required style="background-color:#08090c; color:var(--text-main);">
                            <option value="kerja">Kerja</option>
                            <option value="kuliah">Kuliah</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_alumni_tempat">Tempat / Instansi</label>
                        <input type="text" id="add_alumni_tempat" name="tempat" class="form-control" placeholder="PT / Universitas..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_alumni_jabatan">Jabatan / Prodi</label>
                        <input type="text" id="add_alumni_jabatan" name="jabatan" class="form-control" placeholder="Mekanik / S1 Teknik..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_alumni_username">Username</label>
                        <input type="text" id="add_alumni_username" name="username" class="form-control" placeholder="Username untuk login..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_alumni_password">Password</label>
                        <input type="password" id="add_alumni_password" name="password" class="form-control" placeholder="Min 6 karakter..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_alumni_testimoni">Testimoni</label>
                        <textarea id="add_alumni_testimoni" name="testimoni" class="form-control" placeholder="Pesan kesan untuk sekolah..." required></textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_alumni_foto">Foto Alumni</label>
                        <input type="file" id="add_alumni_foto" name="foto" class="form-control" accept="image/*">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-add-alumni')">Batal</button>
                    <button type="submit" class="btn-add">Daftarkan Alumni</button>
                </div>
            </form>
        </div>
    </div>

    <!-- MODAL: EDIT ALUMNI -->
    <div class="modal-overlay" id="modal-edit-alumni">
        <div class="modal-box" style="max-width: 550px;">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-user-pen"></i>
                    <span>Sunting Data 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" style="max-height: 65vh; overflow-y: auto;">
                    <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">Kelanjutan</label>
                        <select id="edit_alumni_kelanjutan" name="kelanjutan" class="form-control" required style="background-color:#08090c; color:var(--text-main);">
                            <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_username">Username</label>
                        <input type="text" id="edit_alumni_username" name="username" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_alumni_password">Ubah Password</label>
                        <input type="password" id="edit_alumni_password" name="password" class="form-control" placeholder="Biarkan kosong jika tidak diubah">
                    </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">Foto Alumni (Opsional)</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 SISWA -->
    <div class="modal-overlay" id="modal-add-siswa">
        <div class="modal-box">
            <div class="modal-header">
                <div class="modal-title">
                    <i class="fa-solid fa-graduation-cap"></i>
                    <span>Daftarkan Siswa Baru</span>
                </div>
                <button class="modal-close" onclick="closeModal('modal-add-siswa')">&times;</button>
            </div>
            <form action="{{ route('admin.dashboard.siswa.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="form-group">
                        <label class="form-label" for="add_siswa_nama">Nama Lengkap</label>
                        <input type="text" id="add_siswa_nama" name="nama_siswa" class="form-control" placeholder="Nama siswa..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_siswa_kelas">Kelas</label>
                        <input type="text" id="add_siswa_kelas" name="kelas" class="form-control" placeholder="Contoh: XII TKR 1" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_siswa_jk">Jenis Kelamin</label>
                        <select id="add_siswa_jk" name="jk" class="form-control" required style="background-color:#08090c; color:var(--text-main);">
                            <option value="laki-laki">Laki-laki</option>
                            <option value="perempuan">Perempuan</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_siswa_alamat">Alamat Tinggal</label>
                        <input type="text" id="add_siswa_alamat" name="alamat" class="form-control" placeholder="Alamat lengkap..." required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="add_siswa_foto">Foto Siswa</label>
                        <input type="file" id="add_siswa_foto" name="foto" class="form-control" accept="image/*">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-cancel" onclick="closeModal('modal-add-siswa')">Batal</button>
                    <button type="submit" class="btn-add">Daftarkan Siswa</button>
                </div>
            </form>
        </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_siswa_nama">Nama Lengkap</label>
                        <input type="text" id="edit_siswa_nama" name="nama_siswa" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_siswa_kelas">Kelas</label>
                        <input type="text" id="edit_siswa_kelas" name="kelas" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_siswa_jk">Jenis Kelamin</label>
                        <select id="edit_siswa_jk" name="jk" class="form-control" required style="background-color:#08090c; color:var(--text-main);">
                            <option value="laki-laki">Laki-laki</option>
                            <option value="perempuan">Perempuan</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_siswa_alamat">Alamat Tinggal</label>
                        <input type="text" id="edit_siswa_alamat" name="alamat" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="edit_siswa_foto">Foto Siswa (Opsional)</label>
                        <input type="file" id="edit_siswa_foto" name="foto" class="form-control" accept="image/*">
                    </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>

    <script>
        // TAB SWAP SYSTEM
        function switchTab(tabId) {
            // Hide all tab contents
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            // Deactivate all tab buttons
            document.querySelectorAll('.tab-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            // Show selected tab content & activate button
            document.getElementById('content-' + tabId).classList.add('active');
            document.getElementById('tab-' + tabId + '-btn').classList.add('active');
        }

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

        // POPULATE EDIT PETUGAS MODAL
        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('active');
        }

        function openEditPetugasModal(id, nama, username, jabatan) {
            const form = document.getElementById('form-edit-petugas');
            form.action = `/admin/dashboard/petugas/${id}`;
            
            document.getElementById('edit_nama').value = nama;
            document.getElementById('edit_username').value = username;
            document.getElementById('edit_jabatan').value = jabatan;
            document.getElementById('edit_password').value = '';

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

        // POPULATE EDIT ADMIN MODAL
        function openEditAdminModal(id, nama, username) {
            const form = document.getElementById('form-edit-admin');
            form.action = `/admin/dashboard/admin/${id}`;
            
            document.getElementById('edit_admin_nama_val').value = nama;
            document.getElementById('edit_admin_username_val').value = username;
            document.getElementById('edit_admin_password_val').value = '';

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

        // POPULATE EDIT ALUMNI MODAL
        function openEditAlumniModal(id, nama, tahun, kelanjutan, tempat, jabatan, testimoni, username) {
            const form = document.getElementById('form-edit-alumni');
            form.action = `/admin/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_username').value = username;
            document.getElementById('edit_alumni_password').value = '';
            document.getElementById('edit_alumni_testimoni').value = testimoni;

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

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

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

        // LIVE TERMINAL LOG FILTER
        function filterLogs() {
            const input = document.getElementById('terminal-search-input');
            const filter = input.value.toLowerCase();
            const rows = document.querySelectorAll('#terminal-log-rows .terminal-row');

            rows.forEach(row => {
                const text = row.getAttribute('data-search-text');
                if (text.includes(filter)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }

        // Close modal when clicking on overlay
        window.onclick = function(event) {
            if (event.target.classList.contains('modal-overlay')) {
                event.target.classList.remove('active');
            }
        }
    </script>
</body>
</html>
