<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard {{ $role }} | 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">
    <style>
        :root {
            --bg-color: #08090c;
            --card-bg: rgba(18, 22, 32, 0.6);
            --primary: #6366f1; /* default indigo */
            --primary-glow: rgba(99, 102, 241, 0.4);
            --text-main: #f3f4f6;
            --text-muted: #9ca3af;
            --border-color: rgba(255, 255, 255, 0.08);
            --font-family: 'Outfit', sans-serif;
        }

        /* Adjust colors based on role */
        @if($role === 'Admin')
        :root {
            --primary: #ef4444;
            --primary-glow: rgba(239, 68, 68, 0.4);
            --card-bg: rgba(24, 18, 18, 0.6);
            --border-color: rgba(239, 68, 68, 0.15);
        }
        @elseif($role === 'Petugas')
        :root {
            --primary: #9d4edd;
            --primary-glow: rgba(157, 78, 221, 0.4);
            --card-bg: rgba(22, 18, 30, 0.6);
            --border-color: rgba(157, 78, 221, 0.15);
        }
        @elseif($role === 'Alumni')
        :root {
            --primary: #10b981;
            --primary-glow: rgba(16, 185, 129, 0.4);
            --card-bg: rgba(14, 24, 20, 0.6);
            --border-color: rgba(16, 185, 129, 0.15);
        }
        @endif

        * {
            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 50% -20%, var(--primary-glow) 0%, transparent 50%),
                linear-gradient(rgba(8, 9, 12, 0.98), rgba(8, 9, 12, 0.98));
            color: var(--text-main);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
            overflow-x: hidden;
        }

        .container {
            width: 100%;
            max-width: 580px;
            z-index: 10;
        }

        .dashboard-card {
            background: var(--card-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--border-color);
            border-radius: 28px;
            padding: 50px 40px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
            text-align: center;
            position: relative;
            overflow: hidden;
            animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes slideUp {
            0% { transform: translateY(30px); opacity: 0; }
            100% { transform: translateY(0); opacity: 1; }
        }

        .success-badge {
            background: rgba(16, 185, 129, 0.12);
            color: #10b981;
            font-size: 0.8rem;
            font-weight: 700;
            padding: 8px 18px;
            border-radius: 50px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 30px;
            border: 1px solid rgba(16, 185, 129, 0.25);
        }

        .success-badge svg {
            width: 14px;
            height: 14px;
            fill: none;
            stroke: currentColor;
            stroke-width: 3;
        }

        .user-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary) 0%, rgba(255,255,255,0.05) 100%);
            margin: 0 auto 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.5rem;
            font-weight: 800;
            color: #ffffff;
            border: 2px solid var(--primary);
            box-shadow: 0 0 25px var(--primary-glow);
        }

        .role-title {
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 0.8rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 8px;
        }

        h1 {
            font-size: 2.2rem;
            font-weight: 800;
            margin-bottom: 12px;
            background: linear-gradient(135deg, #ffffff 40%, rgba(255,255,255,0.6) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .welcome-msg {
            color: var(--text-muted);
            font-size: 1rem;
            margin-bottom: 40px;
            line-height: 1.6;
        }

        .panel-info {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 18px;
            padding: 22px;
            border: 1px solid rgba(255, 255, 255, 0.03);
            margin-bottom: 40px;
            text-align: left;
        }

        .info-row {
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            font-size: 0.9rem;
        }

        .info-row:last-child {
            border-bottom: none;
        }

        .info-label {
            color: var(--text-muted);
        }

        .info-val {
            font-weight: 600;
            color: #ffffff;
        }

        .btn-logout {
            width: 100%;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #f3f4f6;
            border-radius: 14px;
            padding: 16px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: var(--font-family);
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .btn-logout:hover {
            background: rgba(239, 68, 68, 0.1);
            border-color: rgba(239, 68, 68, 0.4);
            color: #f87171;
            transform: translateY(-2px);
        }

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

        .form-group {
            margin-bottom: 18px;
            text-align: left;
        }

        .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: 12px;
            padding: 12px 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);
            box-shadow: 0 0 12px var(--primary-glow);
            background: rgba(0, 0, 0, 0.6);
        }

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

        select.form-control {
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg fill='%2310b981' 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 12px center;
            padding-right: 35px;
            cursor: pointer;
        }

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

        .dashboard-grid-alumni {
            display: grid;
            grid-template-columns: 1fr 1.4fr;
            gap: 30px;
            margin-top: 30px;
            align-items: start;
        }

        .btn-submit {
            width: 100%;
            background: linear-gradient(135deg, var(--primary) 0%, #059669 100%);
            color: #ffffff;
            border: none;
            border-radius: 12px;
            padding: 14px;
            font-size: 0.95rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 4px 18px var(--primary-glow);
            text-transform: uppercase;
            letter-spacing: 1px;
            font-family: var(--font-family);
        }

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

        .alert-success {
            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;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .alert-danger {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #f87171;
            padding: 15px 20px;
            border-radius: 12px;
            margin-bottom: 25px;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        @media (max-width: 768px) {
            .dashboard-grid-alumni {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .dashboard-card {
                padding: 30px 20px;
                border-radius: 20px;
            }
            h1 {
                font-size: 1.8rem;
            }
            .welcome-msg {
                font-size: 0.9rem;
                margin-bottom: 25px;
            }
            .panel-info {
                padding: 15px;
                margin-bottom: 25px;
            }
            .info-row {
                font-size: 0.85rem;
                padding: 8px 0;
            }
            .btn-logout {
                padding: 12px;
                font-size: 0.9rem;
            }
            .user-avatar {
                width: 80px;
                height: 80px;
                font-size: 2rem;
                margin-bottom: 20px;
            }
        }
    </style>
</head>
<body>
    @php
        $alumni = Auth::guard('alumni')->user();
    @endphp

    <div class="container" style="max-width: 1000px; margin: 30px auto;">
        
        <!-- Alerts -->
        @if(session('success'))
            <div class="alert-success">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><polyline points="20 6 9 17 4 12"></polyline></svg>
                <span>{{ session('success') }}</span>
            </div>
        @endif

        @if($errors->any())
            <div class="alert-danger">
                <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                <span>{{ $errors->first() }}</span>
            </div>
        @endif

        <div class="dashboard-grid-alumni">
            
            <!-- COLUMN 1: RESUME CARD -->
            <div class="dashboard-card" style="padding: 40px 25px;">
                <div class="success-badge">
                    <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>
                    <span>Otentikasi Berhasil</span>
                </div>

                <!-- Avatar -->
                @if($alumni->foto && $alumni->foto !== 'default_alumni.jpg' && file_exists(public_path($alumni->foto)))
                    <img src="{{ asset($alumni->foto) }}" alt="Foto" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--primary); box-shadow: 0 0 15px var(--primary-glow); margin: 0 auto 25px; display: block;">
                @else
                    <div class="user-avatar">
                        {{ substr($name, 0, 1) }}
                    </div>
                @endif

                <span class="role-title">Portal {{ $role }}</span>
                <h1>Halo, {{ $name }}!</h1>
                <p class="welcome-msg" style="margin-bottom: 25px;">Senang melihat Anda kembali. Berikut resume karir / studi Anda yang terdaftar.</p>

                <div class="panel-info" style="margin-bottom: 25px;">
                    <div class="info-row">
                        <span class="info-label">Tahun Lulus</span>
                        <span class="info-val">{{ $alumni->tahun_lulus }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Status</span>
                        <span class="info-val" style="color: var(--primary)">{{ ucfirst($alumni->kelanjutan) }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Tempat / Instansi</span>
                        <span class="info-val">{{ $alumni->tempat }}</span>
                    </div>
                    <div class="info-row">
                        <span class="info-label">Jabatan / Prodi</span>
                        <span class="info-val">{{ $alumni->jabatan }}</span>
                    </div>
                </div>

                <div style="background: rgba(0,0,0,0.15); border-left: 3px solid var(--primary); padding: 15px; border-radius: 6px; font-style: italic; color: var(--text-muted); font-size: 0.88rem; text-align: left; margin-bottom: 30px;">
                    "{{ $alumni->testimoni }}"
                </div>

                <!-- Secured POST Logout Form -->
                <form action="{{ route($logoutRoute) }}" method="POST" id="logout-form">
                    @csrf
                    <button type="submit" class="btn-logout">
                        <svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
                        <span>Keluar dari Portal</span>
                    </button>
                </form>
            </div>

            <!-- COLUMN 2: EDIT PROFILE FORM -->
            <div class="dashboard-card" style="padding: 40px 30px; text-align: left;">
                <h2 style="font-size: 1.4rem; font-weight: 800; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); padding-bottom: 10px;">
                    <i class="fa-solid fa-user-pen" style="color: var(--primary); margin-right: 8px;"></i> Sunting Profil Saya
                </h2>

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

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

                    <div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                        <div>
                            <label class="form-label" for="profile_tahun">Tahun Lulus</label>
                            <input type="number" id="profile_tahun" name="tahun_lulus" class="form-control" value="{{ $alumni->tahun_lulus }}" min="1900" max="{{ date('Y')+1 }}" required>
                        </div>
                        <div>
                            <label class="form-label" for="profile_kelanjutan">Status Kelanjutan</label>
                            <select id="profile_kelanjutan" name="kelanjutan" class="form-control" required>
                                <option value="kerja" {{ $alumni->kelanjutan === 'kerja' ? 'selected' : '' }}>Kerja</option>
                                <option value="kuliah" {{ $alumni->kelanjutan === 'kuliah' ? 'selected' : '' }}>Kuliah</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                        <div>
                            <label class="form-label" for="profile_tempat">Tempat / Instansi</label>
                            <input type="text" id="profile_tempat" name="tempat" class="form-control" value="{{ $alumni->tempat }}" required autocomplete="off">
                        </div>
                        <div>
                            <label class="form-label" for="profile_jabatan">Jabatan / Prodi</label>
                            <input type="text" id="profile_jabatan" name="jabatan" class="form-control" value="{{ $alumni->jabatan }}" required autocomplete="off">
                        </div>
                    </div>

                    <div class="form-group" style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                        <div>
                            <label class="form-label" for="profile_username">Username</label>
                            <input type="text" id="profile_username" name="username" class="form-control" value="{{ $alumni->username }}" required autocomplete="off">
                        </div>
                        <div>
                            <label class="form-label" for="profile_password">Ubah Password</label>
                            <input type="password" id="profile_password" name="password" class="form-control" placeholder="Kosongkan jika tidak diubah">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="form-label" for="profile_testimoni">Testimoni</label>
                        <textarea id="profile_testimoni" name="testimoni" class="form-control" required>{{ $alumni->testimoni }}</textarea>
                    </div>

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

                    <button type="submit" class="btn-submit" style="margin-top: 10px;">
                        <span>Simpan Perubahan <i class="fa-solid fa-save" style="margin-left: 6px;"></i></span>
                    </button>
                </form>
            </div>

        </div>

    </div>
</body>
</html>
