<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Layanan Editing Disertasi & Jurnal Scopus Profesional{% endblock %}</title>
    
    <!-- 1. FAVICON -->
    <link rel="shortcut icon" href="{{ url_for('static', filename='images/logologisrisetcrop.png') }}" type="image/png">
    
    <!-- Google Fonts: Inter -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Pustaka Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Kustomisasi CSS Internal -->
    <style>
        body { 
            font-family: 'Inter', sans-serif; 
        }
        .tab-content { 
            display: none; 
        }
        .tab-content.active { 
            display: block; 
        }
    </style>
</head>
<body class="bg-gray-50 text-slate-800 antialiased flex flex-col min-h-screen">
    
    <!-- Navbar -->
    <nav class="bg-slate-900 text-white shadow-md">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            
            <!-- 2. LOGO DI NAVBAR -->
            <a href="{{ url_for('index') }}" class="flex items-center min-w-[250px]">
                <img src="{{ url_for('static', filename='images/logologisrisetbanner.png') }}" 
                     alt="Logo Logis Riset" 
                     class="w-64 h-auto object-contain block"
                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                <span class="hidden font-bold text-amber-500 text-xl tracking-wide">LOGIS RISET</span>
            </a>

            <!-- Menu Navigasi Kanan dengan Multi-User Role Context -->
            <div class="flex items-center space-x-4">
                {% if current_user.is_authenticated %}
                    <div class="flex items-center space-x-2 mr-2">
                        <span class="text-gray-300 text-sm">Halo, {{ current_user.username }}</span>
                        <!-- BADGE DINAMIS BERDASARKAN ROLE PENGGUNA (Sintaks Baris Dirapikan) -->
                        <span class="text-[10px] font-bold px-2 py-0.5 rounded-full border tracking-wide uppercase {% if current_user.role == 'Super Admin' %}bg-rose-950 text-rose-400 border-rose-800{% elif current_user.role == 'Editor' %}bg-amber-950 text-amber-400 border-amber-800{% elif current_user.role == 'Konsultan' %}bg-emerald-950 text-emerald-400 border-emerald-800{% else %}bg-indigo-950 text-indigo-400 border-indigo-800{% endif %}">
                            {{ current_user.role }}
                        </span>
                    </div>
                    <a href="{{ url_for('dashboard') }}" class="text-sm hover:text-amber-500 transition">Workspace</a>
                    <a href="{{ url_for('logout') }}" class="bg-red-600 hover:bg-red-700 px-3 py-1.5 rounded-lg text-xs font-medium transition">Logout</a>
                {% else %}
                    <a href="{{ url_for('login') }}" class="text-sm hover:text-amber-500 transition">Login</a>
                    <a href="{{ url_for('register') }}" class="bg-indigo-600 hover:bg-indigo-500 px-4 py-2 rounded-lg text-sm font-semibold text-white transition shadow-sm">Daftar</a>
                {% endif %}
            </div>
        </div>
    </nav>

    <!-- Flash Messages Notification -->
    <div class="container mx-auto mt-4 px-4">
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="p-4 rounded-xl mb-4 text-sm font-medium {% if category == 'danger' %}bg-red-50 text-red-700 border border-red-100{% else %}bg-green-50 text-green-700 border border-green-100{% endif %}">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}
    </div>

    <!-- Main Content Slot -->
    <main class="flex-grow container mx-auto p-4">
        {% block content %}{% endblock %}
    </main>

    <!-- 3. TOMBOL WHATSAPP MELAYANG GLOBAL -->
    <div style="position: fixed; bottom: 24px; right: 24px; z-index: 99999;">
        <a href="https://wa.me/6282122307021?text=Halo%20Logis%20Riset,%20saya%20tertarik%20dengan%20Layanan%20Editing%20Jurnal/Disertasi." 
           target="_blank" 
           rel="noopener noreferrer" 
           class="flex items-center justify-center w-14 h-14 bg-green-500 hover:bg-green-600 text-white rounded-full shadow-xl hover:scale-110 transition-all duration-300 group"
           style="display: flex; align-items: center; justify-content: center; width: 56px; height: 56px;">
            
            <!-- SVG Icon WhatsApp -->
            <svg class="w-8 h-8 fill-current" viewBox="0 0 24 24" style="width: 32px; height: 32px;">
                <path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397 0 11.973 0c3.184.001 6.177 1.242 8.426 3.496 2.248 2.253 3.487 5.244 3.486 8.428-.003 6.625-5.339 11.971-11.916 11.971-2.004-.001-3.973-.505-5.724-1.47L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.825 1.451 5.436 0 9.86-4.37 9.864-9.799.002-2.63-1.023-5.101-2.885-6.965C16.528 1.983 14.07 1.957 11.977 1.957c-5.438 0-9.863 4.374-9.867 9.802 0 1.78.475 3.52 1.376 5.075L2.417 21.54l4.23-1.386zM17.92 14.28c-.324-.162-1.916-.946-2.212-1.054-.297-.109-.514-.162-.73.162-.217.324-.838 1.055-1.027 1.271-.19.216-.379.243-.703.081-.324-.162-1.37-.505-2.61-1.611-.965-.86-1.616-1.923-1.806-2.247-.19-.325-.02-.5-.181-.662-.146-.146-.324-.379-.487-.568-.162-.189-.216-.324-.324-.541-.109-.217-.055-.405-.028-.567.027-.162.216-.514.324-.703.109-.189.162-.324.243-.541.081-.216.041-.405-.014-.567-.054-.162-.514-1.243-.703-1.703-.185-.445-.37-.383-.514-.39l-.433-.008c-.162 0-.433.061-.66.312-.227.25-1.12 1.096-1.12 2.674 0 1.579 1.148 3.104 1.31 3.32.162.216 2.26 3.45 5.476 4.838.765.33 1.363.528 1.829.676.769.244 1.47.21 2.025.128.618-.092 1.916-.784 2.186-1.54.27-.757.27-1.405.189-1.54-.081-.135-.297-.216-.621-.378z"/>
            </svg>
            
            <!-- Tooltip Hover -->
            <span class="absolute right-16 bg-slate-900 text-white text-xs px-3 py-1.5 rounded-md opacity-0 group-hover:opacity-100 whitespace-nowrap transition-opacity pointer-events-none shadow-md">
                Hubungi Admin WA
            </span>
        </a>
    </div>

    <script>
    function kirimKeWhatsapp(event) {
        event.preventDefault();
        const nomorTujuan = "6282122307021"; 
        const nama = document.getElementById('wa-nama').value;
        const pendekatan = document.getElementById('wa-pendekatan').value;
        const email = document.getElementById('wa-email').value;

        const teksPesan = `Halo Tim Konsultan Akademik,%0A%0A` +
                          `Saya ingin pesan *Disertasi/Jurnal/Paper/Makalah* dengan detail berikut:%0A` +
                          `• *Nama Lengkap & Gelar:* ${encodeURIComponent(nama)}%0A` +
                          `• *Pendekatan Riset:* ${encodeURIComponent(pendekatan)}%0A` +
                          `• *Email Aktif:* ${encodeURIComponent(email)}%0A%0A` +
                          `Mohon informasi langkah konsultasi selanjutnya. Terima kasih!`;

        const urlWhatsapp = `https://wa.me/${nomorTujuan}?text=${teksPesan}`;
        window.open(urlWhatsapp, '_blank');
    }
    </script>

</body>
</html>