{% extends "base.html" %}

{% block title %}Admin Dashboard - Project Management System{% endblock %}

{% block navbar %}
<div class="navbar bg-base-100 shadow-lg">
    <div class="flex-1">
        <a class="btn btn-ghost normal-case text-xl">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
            </svg>
            Dashboard Admin
        </a>
    </div>
    <div class="flex-none">
        <div class="menu menu-horizontal px-1">
            <li>
                <a href="{{ url_for('user_management') }}" class="btn btn-ghost">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
                    </svg>
                    Users
                </a>
            </li>
        </div>
        <div class="dropdown dropdown-end">
            <label tabindex="0" class="btn btn-ghost">
                <div class="indicator">
                    <div class="badge badge-primary badge-xs indicator-item"></div>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                </div>
            </label>
            <ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
                <li><span class="text-sm opacity-70">{{ session.full_name }}</span></li>
                <li><span class="text-xs opacity-50">{{ session.user_role|title }}</span></li>
                <li><div class="divider my-1"></div></li>
                <li><a href="{{ url_for('admin_dashboard') }}">Dashboard</a></li>
                <li><a href="{{ url_for('user_management') }}">User Management</a></li>
                <li><a href="{{ url_for('logout') }}">Logout</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<!-- Mobile Filter Toggle Button -->
<div class="lg:hidden mb-4">
    <button id="filterToggle" class="btn btn-outline w-full relative">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
        </svg>
        <span id="filterToggleText">Tampilkan Filter</span>
        {% set active_filters = current_filters.status or current_filters.admin or current_filters.team or current_filters.date %}
        {% if active_filters %}
        <div class="badge badge-primary badge-sm absolute -top-2 -right-2">!</div>
        {% endif %}
        <svg id="filterArrow" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
        </svg>
    </button>
</div>

<div class="flex flex-col lg:flex-row gap-6">
    <!-- Sidebar with Filters -->
    <div id="filterSidebar" class="lg:w-80 w-full hidden lg:block transition-all duration-300 ease-in-out">
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                    </svg>
                    Filter Proyek
                </h2>
                
                <form method="GET" action="{{ url_for('admin_dashboard') }}">
                    <div class="form-control mb-4">
                        <label class="label">
                            <span class="label-text">Status</span>
                        </label>
                        <select name="status" class="select select-bordered">
                            <option value="">Semua Status</option>
                            <option value="Belum Dikerjakan" {% if current_filters.status == 'Belum Dikerjakan' %}selected{% endif %}>Belum Dikerjakan</option>
                            <option value="Dikerjakan" {% if current_filters.status == 'Dikerjakan' %}selected{% endif %}>Dikerjakan</option>
                            <option value="Revisi" {% if current_filters.status == 'Revisi' %}selected{% endif %}>Revisi</option>
                            <option value="Selesai" {% if current_filters.status == 'Selesai' %}selected{% endif %}>Selesai</option>
                        </select>
                    </div>
                    
                    <div class="form-control mb-4">
                        <label class="label">
                            <span class="label-text">Admin</span>
                        </label>
                        <select name="admin" class="select select-bordered">
                            <option value="">Semua Admin</option>
                            {% for admin in admin_names %}
                            <option value="{{ admin }}" {% if current_filters.admin == admin %}selected{% endif %}>{{ admin }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="form-control mb-4">
                        <label class="label">
                            <span class="label-text">Anggota Tim</span>
                        </label>
                        <input type="text" 
                               name="team" 
                               value="{{ current_filters.team }}"
                               placeholder="Nama anggota tim" 
                               class="input input-bordered">
                    </div>
                    
                    <div class="form-control mb-4">
                        <label class="label">
                            <span class="label-text">Tanggal Deadline</span>
                        </label>
                        <input type="date" 
                               name="date" 
                               value="{{ current_filters.date }}"
                               class="input input-bordered">
                    </div>
                    
                    <div class="card-actions justify-end">
                        <button type="submit" class="btn btn-primary btn-sm">Filter</button>
                        <a href="{{ url_for('admin_dashboard') }}" class="btn btn-outline btn-sm">Reset</a>
                    </div>
                </form>
                
                <div class="divider"></div>
                
                <button class="btn btn-success w-full" onclick="document.getElementById('add_project_modal').showModal()">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    Tambah Proyek
                </button>
                
                <!-- Mobile: Hide Filter Button -->
                <div class="lg:hidden mt-4">
                    <button id="hideFilterBtn" class="btn btn-ghost btn-sm w-full" onclick="toggleFilter()">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                        Tutup Filter
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Main Content -->
    <div class="flex-1">
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="card-title">Daftar Proyek</h2>
                    <div class="badge badge-primary">Total: {{ projects|length }}</div>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="table table-zebra w-full">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>No Pesanan</th>
                                <th>Judul/File</th>
                                <th>File Asli</th>
                                <th>Admin</th>
                                <th>Anggota Tim</th>
                                <th>Deadline</th>
                                <th>Status</th>
                                <th>Hasil Kerja</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for project in projects %}
                            <tr>
                                <td>{{ project.orderNumber or '-' }}</td>
                                <td>{{ project.shopeeOrderNumber or '-' }}</td>
                                <td class="max-w-xs truncate">{{ project.fileName or '-' }}</td>
                                <td>
                                    {% if project.originalFileLink %}
                                    <a href="{{ project.originalFileLink }}" target="_blank" class="btn btn-xs btn-outline">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                        </svg>
                                    </a>
                                    {% else %}
                                    -
                                    {% endif %}
                                </td>
                                <td>{{ project.adminName or '-' }}</td>
                                <td>{{ project.teamMember or '-' }}</td>
                                <td class="{{ get_deadline_class(project.deadline) }}">
                                    {% if project.deadline %}
                                        {{ project.deadline[:16].replace('T', ' ') }}
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>
                                    <select class="select select-bordered select-xs" 
                                            onchange="updateStatus({{ project.id }}, this.value)">
                                        <option value="Belum Dikerjakan" {% if project.status == 'Belum Dikerjakan' %}selected{% endif %}>Belum Dikerjakan</option>
                                        <option value="Dikerjakan" {% if project.status == 'Dikerjakan' %}selected{% endif %}>Dikerjakan</option>
                                        <option value="Revisi" {% if project.status == 'Revisi' %}selected{% endif %}>Revisi</option>
                                        <option value="Selesai" {% if project.status == 'Selesai' %}selected{% endif %}>Selesai</option>
                                    </select>
                                </td>
                                <td>
                                    {% if project.fileHasilKerja %}
                                    <a href="{{ project.fileHasilKerja }}" target="_blank" class="btn btn-xs btn-success">
                                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                        </svg>
                                    </a>
                                    {% else %}
                                    -
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="flex gap-1">
                                        <button class="btn btn-xs btn-outline" 
                                                onclick="loadProjectData({{ project.id }}); document.getElementById('edit_project_modal').showModal()">
                                            Edit
                                        </button>
                                        <a href="{{ url_for('delete_project', project_id=project.id) }}" 
                                           class="btn btn-xs btn-error"
                                           onclick="return confirm('Yakin ingin menghapus proyek ini?')">
                                            Hapus
                                        </a>
                                        <button class="btn btn-xs btn-success" 
                                                onclick="sendWhatsAppNotificationToTeam({{ project.id }})">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                                            </svg>
                                            WA
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    
                    {% if not projects %}
                    <div class="text-center py-8">
                        <div class="text-base-content/60">Tidak ada proyek yang ditemukan</div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Add Project Modal -->
<dialog id="add_project_modal" class="modal">
    <div class="modal-box w-11/12 max-w-2xl">
        <form method="dialog">
            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
        </form>
        <h3 class="font-bold text-lg mb-4">Tambah Proyek Baru</h3>
        
        <form method="POST" action="{{ url_for('add_project') }}">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Nomor Urut</span>
                    </label>
                    <input type="text" name="orderNumber" class="input input-bordered" placeholder="Nomor urut">
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">No Pesanan Marketplace</span>
                    </label>
                    <input type="text" name="shopeeOrderNumber" class="input input-bordered" placeholder="No pesanan">
                </div>
                
                <div class="form-control md:col-span-2">
                    <label class="label">
                        <span class="label-text">Judul/File</span>
                    </label>
                    <input type="text" name="fileName" class="input input-bordered" placeholder="Nama file atau judul proyek" required>
                </div>
                
                <div class="form-control md:col-span-2">
                    <label class="label">
                        <span class="label-text">URL File Asli</span>
                    </label>
                    <input type="url" name="originalFileLink" class="input input-bordered" placeholder="https://...">
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Admin</span>
                    </label>
                    <select name="adminName" class="select select-bordered" required>
                        <option disabled selected>Pilih admin</option>
                        <option value="BORNEOPCOM">BORNEOPCOM</option>
                        <option value="QUOTA PHRASE">QUOTA PHRASE</option>
                        <option value="SOBAT SKRIPSI">SOBAT SKRIPSI</option>
                    </select>
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Anggota Tim</span>
                    </label>
                    <select name="teamMember" class="select select-bordered" required>
                        <option disabled selected>Pilih anggota tim</option>
                        {% for user in team_users %}
                        <option value="{{ user.username }}">{{ user.full_name }} ({{ user.username }})</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Deadline</span>
                    </label>
                    <input type="datetime-local" name="deadline" class="input input-bordered" required>
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Status</span>
                    </label>
                    <select name="status" class="select select-bordered">
                        <option value="Belum Dikerjakan">Belum Dikerjakan</option>
                        <option value="Dikerjakan">Dikerjakan</option>
                        <option value="Revisi">Revisi</option>
                        <option value="Selesai">Selesai</option>
                    </select>
                </div>
                
                <div class="form-control md:col-span-2">
                    <label class="label">
                        <span class="label-text">Catatan</span>
                    </label>
                    <textarea name="notes" class="textarea textarea-bordered" placeholder="Catatan tambahan"></textarea>
                </div>
            </div>
            
            <div class="modal-action">
                <button type="submit" class="btn btn-primary">Simpan</button>
                <button type="button" class="btn" onclick="document.getElementById('add_project_modal').close()">Batal</button>
            </div>
        </form>
    </div>
</dialog>

<!-- Edit Project Modal -->
<dialog id="edit_project_modal" class="modal">
    <div class="modal-box w-11/12 max-w-2xl">
        <form method="dialog">
            <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
        </form>
        <h3 class="font-bold text-lg mb-4">Edit Proyek</h3>
        
        <form id="editProjectForm" method="POST">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Nomor Urut</span>
                    </label>
                    <input type="text" id="edit_orderNumber" name="orderNumber" class="input input-bordered" placeholder="Nomor urut">
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">No Pesanan Marketplace</span>
                    </label>
                    <input type="text" id="edit_shopeeOrderNumber" name="shopeeOrderNumber" class="input input-bordered" placeholder="No pesanan">
                </div>
                
                <div class="form-control md:col-span-2">
                    <label class="label">
                        <span class="label-text">Judul/File</span>
                    </label>
                    <input type="text" id="edit_fileName" name="fileName" class="input input-bordered" placeholder="Nama file atau judul proyek" required>
                </div>
                
                <div class="form-control md:col-span-2">
                    <label class="label">
                        <span class="label-text">URL File Asli</span>
                    </label>
                    <input type="url" id="edit_originalFileLink" name="originalFileLink" class="input input-bordered" placeholder="https://...">
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Admin</span>
                    </label>
                    <select id="edit_adminName" name="adminName" class="select select-bordered" required>
                        <option value="BORNEOPCOM">BORNEOPCOM</option>
                        <option value="QUOTA PHRASE">QUOTA PHRASE</option>
                        <option value="SOBAT SKRIPSI">SOBAT SKRIPSI</option>
                    </select>
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Anggota Tim</span>
                    </label>
                    <select id="edit_teamMember" name="teamMember" class="select select-bordered" required>
                        {% for user in team_users %}
                        <option value="{{ user.username }}">{{ user.full_name }} ({{ user.username }})</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Deadline</span>
                    </label>
                    <input type="datetime-local" id="edit_deadline" name="deadline" class="input input-bordered" required>
                </div>
                
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Status</span>
                    </label>
                    <select id="edit_status" name="status" class="select select-bordered">
                        <option value="Belum Dikerjakan">Belum Dikerjakan</option>
                        <option value="Dikerjakan">Dikerjakan</option>
                        <option value="Revisi">Revisi</option>
                        <option value="Selesai">Selesai</option>
                    </select>
                </div>
                
                <div class="form-control md:col-span-2">
                    <label class="label">
                        <span class="label-text">Catatan</span>
                    </label>
                    <textarea id="edit_notes" name="notes" class="textarea textarea-bordered" placeholder="Catatan tambahan"></textarea>
                </div>
            </div>
            
            <div class="modal-action">
                <button type="submit" class="btn btn-primary">Update</button>
                <button type="button" class="btn" onclick="document.getElementById('edit_project_modal').close()">Batal</button>
            </div>
        </form>
    </div>
</dialog>

<script>
// Mobile Filter Toggle Function
function toggleFilter() {
    const filterSidebar = document.getElementById('filterSidebar');
    const filterToggleText = document.getElementById('filterToggleText');
    const filterArrow = document.getElementById('filterArrow');
    
    if (filterSidebar.classList.contains('hidden')) {
        // Show filter
        filterSidebar.classList.remove('hidden');
        filterToggleText.textContent = 'Sembunyikan Filter';
        filterArrow.style.transform = 'rotate(180deg)';
    } else {
        // Hide filter
        filterSidebar.classList.add('hidden');
        filterToggleText.textContent = 'Tampilkan Filter';
        filterArrow.style.transform = 'rotate(0deg)';
    }
}

// WhatsApp Notification Functions
async function sendWhatsAppNotificationToTeam(projectId) {
    try {
        const response = await fetch(`/get_whatsapp_info/${projectId}`);
        const data = await response.json();
        
        if (data.error) {
            showToast(data.error, 'error');
            return;
        }
        
        const project = data.project;
        const teamWA = data.team_whatsapp;
        
        if (!teamWA || !teamWA.whatsapp_number) {
            showToast('Nomor WhatsApp team member tidak ditemukan', 'error');
            return;
        }
        
        // Format deadline
        const deadline = project.deadline ? new Date(project.deadline).toLocaleString('id-ID') : 'Tidak ditentukan';
        
        // Create message
        const message = `🔔 *TUGAS BARU DARI ADMIN*

📝 *Proyek:* ${project.fileName || 'Tidak disebutkan'}
🏷️ *No. Urut:* ${project.orderNumber || '-'}
🛒 *No. Pesanan:* ${project.shopeeOrderNumber || '-'}
👨‍💼 *Admin:* ${project.adminName || '-'}
⏰ *Deadline:* ${deadline}
📊 *Status:* ${project.status}

${project.notes ? `📋 *Catatan:*\n${project.notes}` : ''}

${project.originalFileLink ? `🔗 *File Asli:* ${project.originalFileLink}` : ''}

Segera kerjakan tugas ini dan update status secara berkala. Terima kasih! 🙏`;
        
        const whatsappUrl = `https://wa.me/${teamWA.whatsapp_number}?text=${encodeURIComponent(message)}`;
        window.open(whatsappUrl, '_blank');
        
        showToast(`WhatsApp terbuka untuk ${teamWA.full_name}`, 'success');
        
    } catch (error) {
        showToast('Terjadi kesalahan saat membuka WhatsApp', 'error');
    }
}

// Add event listener for filter toggle button
document.addEventListener('DOMContentLoaded', function() {
    const filterToggleBtn = document.getElementById('filterToggle');
    if (filterToggleBtn) {
        filterToggleBtn.addEventListener('click', toggleFilter);
    }
    
    // Auto-hide filter on mobile when window resizes to desktop
    window.addEventListener('resize', function() {
        const filterSidebar = document.getElementById('filterSidebar');
        if (window.innerWidth >= 1024) { // lg breakpoint
            filterSidebar.classList.remove('hidden');
        } else {
            // On mobile, keep current state unless it's the first load
            if (!filterSidebar.hasAttribute('data-mobile-toggled')) {
                filterSidebar.classList.add('hidden');
            }
        }
    });
    
    // Mark as mobile toggled when user interacts
    const filterToggle = document.getElementById('filterToggle');
    if (filterToggle) {
        filterToggle.addEventListener('click', function() {
            document.getElementById('filterSidebar').setAttribute('data-mobile-toggled', 'true');
        });
    }
});
</script>
{% endblock %}