{% extends "base.html" %}

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

{% block navbar %}
<div class="navbar bg-base-100 shadow-lg border-b border-base-300/50">
    <div class="flex-1">
        <a class="btn btn-ghost normal-case text-xl hover:bg-primary/10 transition-colors duration-300">
            <div class="relative mr-3">
                <div class="absolute inset-0 bg-primary/20 rounded-lg blur-sm"></div>
                <div class="relative bg-primary/10 rounded-lg p-2">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary" 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>
                </div>
            </div>
            <span class="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent font-bold">
                Dashboard Admin
            </span>
        </a>
    </div>
    <div class="flex-none">
        <div class="menu menu-horizontal px-1">
            <li>
                <a href="{{ url_for('user_management') }}" class="btn btn-ghost hover:bg-secondary/10 transition-colors duration-300">
                    <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>
                    <span class="hidden sm:inline">Users</span>
                </a>
            </li>
        </div>
        <div class="dropdown dropdown-end">
            <label tabindex="0" class="btn btn-ghost hover:bg-primary/10 transition-colors duration-300">
                <div class="indicator">
                    <div class="badge badge-primary badge-xs indicator-item animate-pulse"></div>
                    <div class="avatar placeholder">
                        <div class="bg-primary/20 text-primary rounded-full w-8 h-8">
                            <span class="text-sm font-bold">{{ session.full_name[0].upper() }}</span>
                        </div>
                    </div>
                </div>
            </label>
            <ul tabindex="0" class="mt-3 z-[1] p-2 shadow-lg menu menu-sm dropdown-content bg-base-100 rounded-box w-64 border border-base-300/50">
                <li class="menu-title">
                    <span class="text-sm font-semibold">{{ session.full_name }}</span>
                    <span class="text-xs opacity-50 badge badge-primary badge-sm">{{ session.user_role|title }}</span>
                </li>
                <li><div class="divider my-1"></div></li>
                <li><a href="{{ url_for('admin_dashboard') }}" class="hover:bg-primary/10"><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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z" /></svg>Dashboard</a></li>
                <li><a href="{{ url_for('user_management') }}" class="hover:bg-secondary/10"><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="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>User Management</a></li>
                <li><div class="divider my-1"></div></li>
                <li><a href="{{ url_for('logout') }}" class="hover:bg-error/10 text-error"><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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" /></svg>Logout</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<!-- Dashboard Statistics Header -->
<div class="mb-8">
    <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center mb-6">
        <div>
            <h1 class="text-3xl font-bold mb-2">Dashboard Overview</h1>
            <p class="text-base-content/70">Kelola dan pantau semua proyek Anda</p>
        </div>
        <div class="flex items-center space-x-4 mt-4 lg:mt-0">
            <div class="badge badge-outline">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                Live Update
            </div>
            <div class="text-sm text-base-content/60" id="current-time">
                <!-- Current time will be populated by JavaScript -->
            </div>
        </div>
    </div>
    
    <!-- Statistics Cards -->
    <div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-4 gap-3 md:gap-6 mb-8">
        <div class="stat-card bg-gradient-to-br from-primary/10 to-primary/5 border-l-4 border-primary">
            <div class="stat">
                <div class="stat-figure text-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8" 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>
                </div>
                <div class="stat-title text-primary/80 text-xs md:text-sm">Total Proyek</div>
                <div class="stat-value text-primary text-xl md:text-2xl">{{ projects|length }}</div>
                <div class="stat-desc text-primary/60 text-xs">Semua proyek aktif</div>
            </div>
        </div>
        
        <div class="stat-card bg-gradient-to-br from-warning/10 to-warning/5 border-l-4 border-warning">
            <div class="stat">
                <div class="stat-figure text-warning">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div class="stat-title text-warning/80 text-xs md:text-sm">Dalam Progress</div>
                <div class="stat-value text-warning text-xl md:text-2xl">{{ projects|selectattr('status', 'in', ['Dikerjakan', 'Revisi'])|list|length }}</div>
                <div class="stat-desc text-warning/60 text-xs">Sedang dikerjakan</div>
            </div>
        </div>
        
        <div class="stat-card bg-gradient-to-br from-error/10 to-error/5 border-l-4 border-error">
            <div class="stat">
                <div class="stat-figure text-error">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                </div>
                <div class="stat-title text-error/80 text-xs md:text-sm">Belum Dikerjakan</div>
                <div class="stat-value text-error text-xl md:text-2xl">{{ projects|selectattr('status', 'equalto', 'Belum Dikerjakan')|list|length }}</div>
                <div class="stat-desc text-error/60 text-xs">Menunggu penanganan</div>
            </div>
        </div>
        
        <div class="stat-card bg-gradient-to-br from-success/10 to-success/5 border-l-4 border-success">
            <div class="stat">
                <div class="stat-figure text-success">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 md:w-8 md:h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                </div>
                <div class="stat-title text-success/80 text-xs md:text-sm">Selesai</div>
                <div class="stat-value text-success text-xl md:text-2xl">{{ projects|selectattr('status', 'equalto', 'Selesai')|list|length }}</div>
                <div class="stat-desc text-success/60 text-xs">Berhasil diselesaikan</div>
            </div>
        </div>
    </div>
</div>

<!-- Mobile Filter Toggle Button -->
<div class="lg:hidden mb-4">
    <button id="filterToggle" class="btn btn-outline w-full relative hover:bg-primary/10 transition-all duration-300">
        <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 animate-pulse">!</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">
    <!-- Enhanced 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 border border-base-300/50 hover:shadow-2xl transition-shadow duration-300">
            <div class="card-body">
                <h2 class="card-title mb-6">
                    <div class="bg-primary/10 rounded-lg p-2 mr-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-primary" 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>
                    </div>
                    Filter Proyek
                </h2>
                
                <form method="GET" action="{{ url_for('admin_dashboard') }}" class="space-y-4">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Status Proyek</span>
                        </label>
                        <select name="status" class="select select-bordered focus:select-primary transition-all duration-300">
                            <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">
                        <label class="label">
                            <span class="label-text font-medium">Admin Pengelola</span>
                        </label>
                        <select name="admin" class="select select-bordered focus:select-primary transition-all duration-300">
                            <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">
                        <label class="label">
                            <span class="label-text font-medium">Anggota Tim</span>
                        </label>
                        <input type="text" 
                               name="team" 
                               value="{{ current_filters.team }}"
                               placeholder="🔍 Cari nama anggota tim" 
                               class="input input-bordered focus:input-primary transition-all duration-300">
                    </div>
                    
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Tanggal Deadline</span>
                        </label>
                        <input type="date" 
                               name="date" 
                               value="{{ current_filters.date }}"
                               class="input input-bordered focus:input-primary transition-all duration-300">
                    </div>
                    
                    <div class="card-actions justify-end space-x-2 pt-4">
                        <button type="submit" class="btn btn-primary btn-sm hover:scale-105 transition-transform duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                            Filter
                        </button>
                        <a href="{{ url_for('admin_dashboard') }}" class="btn btn-outline btn-sm hover:scale-105 transition-transform duration-200">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                            Reset
                        </a>
                    </div>
                </form>
                
                <div class="divider"></div>
                
                <button class="btn btn-success w-full hover:scale-105 transition-all duration-300 shadow-lg" onclick="document.getElementById('add_project_modal').showModal()">
                    <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="M12 4v16m8-8H4" />
                    </svg>
                    Tambah Proyek Baru
                </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>
    
    <!-- Enhanced Main Content -->
    <div class="flex-1">
        <div class="card bg-base-100 shadow-xl border border-base-300/50 hover:shadow-2xl transition-shadow duration-300">
            <div class="card-body">
                <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center mb-6">
                    <h2 class="card-title text-2xl">
                        <div class="bg-secondary/10 rounded-lg p-2 mr-2">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                            </svg>
                        </div>
                        Daftar Proyek
                    </h2>
                    <div class="flex items-center space-x-3 mt-4 lg:mt-0">
                        <div class="badge badge-primary badge-lg">
                            Total: {{ projects|length }}
                        </div>
                        {% if active_filters %}
                        <div class="badge badge-warning badge-lg animate-pulse">
                            Filtered
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="table table-zebra w-full hover:table-zebra-hover">
                        <thead>
                            <tr class="bg-base-200">
                                <th class="font-bold">No</th>
                                <th class="font-bold">No Pesanan</th>
                                <th class="font-bold">Judul/File</th>
                                <th class="font-bold">Jml Hal</th>
                                <th class="font-bold">File Asli</th>
                                <th class="font-bold">Admin</th>
                                <th class="font-bold">Anggota Tim</th>
                                <th class="font-bold">Deadline</th>
                                <th class="font-bold">Status</th>
                                <th class="font-bold">Hasil Kerja</th>
                                <th class="font-bold">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for project in projects %}
                            <tr class="hover:bg-base-50 transition-colors duration-200">
                                <td class="font-medium">{{ project.orderNumber or '-' }}</td>
                                <td class="font-mono text-sm">{{ project.shopeeOrderNumber or '-' }}</td>
                                <td class="max-w-xs">
                                    <div class="tooltip" data-tip="{{ project.fileName }}">
                                        <span class="truncate block font-medium">{{ project.fileName or '-' }}</span>
                                    </div>
                                </td>
                                <td class="text-center">
                                    {% if project.jumlahHalaman %}
                                    <div class="badge badge-outline">{{ project.jumlahHalaman }}</div>
                                    {% else %}
                                    -
                                    {% endif %}
                                </td>
                                <td>
                                    {% if project.originalFileLink %}
                                    <a href="{{ url_for('serve_upload', filename=project.originalFileLink) }}" target="_blank" class="btn btn-xs btn-outline btn-info hover:scale-110 transition-transform duration-200">
                                        <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>
                                    <div class="badge badge-primary badge-sm">{{ project.adminName or '-' }}</div>
                                </td>
                                <td>
                                    <div class="badge badge-secondary badge-sm">{{ project.teamMember or '-' }}</div>
                                </td>
                                <td class="{{ get_deadline_class(project.deadline) }}">
                                    {% if project.deadline %}
                                        <div class="text-sm font-medium">
                                            {{ project.deadline[:16].replace('T', ' ') }}
                                        </div>
                                    {% else %}
                                        -
                                    {% endif %}
                                </td>
                                <td>
                                    <select class="select select-bordered select-xs status-select hover:scale-105 transition-transform duration-200" 
                                            onchange="updateStatus({{ project.id }}, this.value)"
                                            data-status="{{ project.status }}">
                                        <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="{{ url_for('serve_upload', filename=project.fileHasilKerja) }}" target="_blank" class="btn btn-xs btn-success hover:scale-110 transition-transform duration-200">
                                        <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 hover:btn-primary hover:scale-110 transition-all duration-200" 
                                                onclick="loadProjectData({{ project.id }}); document.getElementById('edit_project_modal').showModal()">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                                            </svg>
                                        </button>
                                        <a href="{{ url_for('delete_project', project_id=project.id) }}" 
                                           class="btn btn-xs btn-error hover:scale-110 transition-all duration-200"
                                           onclick="return confirm('Yakin ingin menghapus proyek ini?')">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                            </svg>
                                        </a>
                                        <button class="btn btn-xs btn-success hover:scale-110 transition-all duration-200" 
                                                onclick="sendWhatsAppNotificationToTeam({{ project.id }})">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" 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>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    
                    {% if not projects %}
                    <div class="text-center py-16">
                        <div class="text-base-content/40">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 mx-auto mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" 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>
                            <p class="text-lg font-medium mb-2">Tidak ada proyek yang ditemukan</p>
                            <p class="text-sm">Tambahkan proyek baru atau ubah filter pencarian</p>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Original modals content would go here -->
<!-- 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') }}" enctype="multipart/form-data">
            <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">Upload File Asli</span>
                    </label>
                    <input type="file" name="originalFile" class="file-input file-input-bordered w-full">
                    <label class="label">
                        <span class="label-text-alt">Jenis file: jpg, png, pdf, doc, dll.</span>
                    </label>
                </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">Jumlah Halaman</span>
                    </label>
                    <input type="number" name="jumlahHalaman" class="input input-bordered" placeholder="e.g., 10">
                </div>
                
                <div class="form-control md:col-span-2">
                    <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" enctype="multipart/form-data">
            <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">Upload File Asli Baru (opsional)</span>
                    </label>
                    <input type="file" name="originalFile" class="file-input file-input-bordered w-full">
                    <div id="current_original_file" class="text-sm mt-2 text-base-content/70"></div>
                </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">Jumlah Halaman</span>
                    </label>
                    <input type="number" id="edit_jumlahHalaman" name="jumlahHalaman" class="input input-bordered" placeholder="e.g., 10">
                </div>

                <div class="form-control md:col-span-2">
                    <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>

<style>
.stat-card {
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}

.status-select {
    border-radius: 0.5rem;
    font-size: 0.75rem;
    min-width: 140px;
}

.table th {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    position: sticky;
    top: 0;
    z-index: 10;
}

.hover\:table-zebra-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Responsive table improvements */
@media (max-width: 768px) {
    .table {
        font-size: 0.875rem;
    }
    
    .btn-xs {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    /* Mobile stat cards optimization */
    .stat-card {
        padding: 0.5rem;
    }
    
    .stat {
        padding: 0.75rem;
    }
    
    .stat-figure {
        margin-right: 0.5rem;
    }
    
    .stat-title {
        font-size: 0.75rem;
        line-height: 1;
        margin-bottom: 0.25rem;
    }
    
    .stat-value {
        font-size: 1.25rem !important;
        line-height: 1.2;
        margin-bottom: 0.25rem;
    }
    
    .stat-desc {
        font-size: 0.625rem;
        line-height: 1;
    }
    
    /* Mobile grid adjustments */
    .grid-cols-2 {
        gap: 0.75rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .stat-card {
        min-height: 90px;
    }
    
    .stat-title {
        font-size: 0.7rem;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .stat-value {
        font-size: 1.125rem !important;
    }
    
    .stat-desc {
        font-size: 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .stat-figure svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}
}

/* Loading animation for status changes */
.status-select.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Enhanced filter section */
.form-control:focus-within label {
    color: hsl(var(--p));
}
</style>

<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)';
    }
}

// Enhanced Status Update Function
async function updateStatus(projectId, newStatus) {
    const selectElement = document.querySelector(`select[onchange*="${projectId}"]`);
    const originalStatus = selectElement.getAttribute('data-status');
    
    // Add loading state
    selectElement.classList.add('loading');
    
    try {
        const response = await fetch(`/update_status/${projectId}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ status: newStatus })
        });
        
        if (response.ok) {
            selectElement.setAttribute('data-status', newStatus);
            showToast(`Status berhasil diubah menjadi "${newStatus}"`, 'success');
            
            // Update UI to reflect new status
            updateProjectRowStatus(projectId, newStatus);
        } else {
            throw new Error('Gagal mengupdate status');
        }
    } catch (error) {
        console.error('Error updating status:', error);
        selectElement.value = originalStatus; // Revert selection
        showToast('Gagal mengupdate status proyek', 'error');
    } finally {
        selectElement.classList.remove('loading');
    }
}

// Function to update project row visual status
function updateProjectRowStatus(projectId, status) {
    const row = document.querySelector(`select[onchange*="${projectId}"]`).closest('tr');
    
    // Add a subtle animation to indicate change
    row.style.backgroundColor = 'rgba(34, 197, 94, 0.1)';
    setTimeout(() => {
        row.style.backgroundColor = '';
    }, 1000);
}

// 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
        let message = `🔔 *TUGAS BARU DARI ADMIN*\n\n📝 *Proyek:* ${project.fileName || 'Tidak disebutkan'}\n🏷️ *No. Urut:* ${project.orderNumber || '-'}\n🛒 *No. Pesanan:* ${project.shopeeOrderNumber || '-'}\n👨‍💼 *Admin:* ${project.adminName || '-'}\n⏰ *Deadline:* ${deadline}\n📊 *Status:* ${project.status}`;

        if(project.jumlahHalaman) {
            message += `\n📄 *Jumlah Halaman:* ${project.jumlahHalaman}`;
        }

        if(project.notes) {
            message += `\n\n📋 *Catatan:*\n${project.notes}`;
        }
        
        if (project.originalFileLink) {
             const fileUrl = `${window.location.origin}${ "{{ url_for('serve_upload', filename='FNAME') }}".replace('FNAME', project.originalFileLink) }`;
             message += `\n\n🔗 *File Asli:*\n${fileUrl}`;
        }

        message += `\n\nSegera 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');
    }
}

// Enhanced Project Data Loading
async function loadProjectData(projectId) {
    try {
        const response = await fetch(`/get_project/${projectId}`);
        const project = await response.json();
        
        if (project.error) {
            showToast(project.error, 'error');
            return;
        }
        
        // Fill form fields
        document.getElementById('edit_orderNumber').value = project.orderNumber || '';
        document.getElementById('edit_shopeeOrderNumber').value = project.shopeeOrderNumber || '';
        document.getElementById('edit_fileName').value = project.fileName || '';
        document.getElementById('edit_adminName').value = project.adminName || '';
        document.getElementById('edit_teamMember').value = project.teamMember || '';
        document.getElementById('edit_deadline').value = project.deadline || '';
        document.getElementById('edit_jumlahHalaman').value = project.jumlahHalaman || '';
        document.getElementById('edit_status').value = project.status || '';
        document.getElementById('edit_notes').value = project.notes || '';
        
        // Show current file info
        const currentFileDiv = document.getElementById('current_original_file');
        if (project.originalFileLink) {
            currentFileDiv.innerHTML = `<span class="text-info">File saat ini: ${project.originalFileLink}</span>`;
        } else {
            currentFileDiv.innerHTML = '<span class="text-base-content/50">Tidak ada file</span>';
        }
        
        // Set form action
        document.getElementById('editProjectForm').action = `/edit_project/${projectId}`;
        
    } catch (error) {
        showToast('Terjadi kesalahan saat memuat data proyek', 'error');
    }
}

// Add event listeners for enhanced UX
document.addEventListener('DOMContentLoaded', function() {
    // Update current time
    function updateCurrentTime() {
        const now = new Date();
        const options = {
            year: 'numeric',
            month: 'long',
            day: 'numeric',
            hour: '2-digit',
            minute: '2-digit',
            timeZone: 'Asia/Jakarta'
        };
        document.getElementById('current-time').textContent = now.toLocaleDateString('id-ID', options);
    }
    
    updateCurrentTime();
    // Update time every minute
    setInterval(updateCurrentTime, 60000);
    
    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');
        });
    }
    
    // Add smooth animations to status select changes
    document.querySelectorAll('.status-select').forEach(select => {
        select.addEventListener('change', function() {
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 150);
        });
    });
});

// Enhanced toast function (make sure this exists in your base template)
function showToast(message, type = 'info') {
    // Create toast if it doesn't exist
    let toast = document.getElementById('toast-notification');
    if (!toast) {
        toast = document.createElement('div');
        toast.id = 'toast-notification';
        toast.className = 'toast toast-top toast-end z-50';
        document.body.appendChild(toast);
    }
    
    const alertClass = type === 'success' ? 'alert-success' : 
                     type === 'error' ? 'alert-error' : 
                     type === 'warning' ? 'alert-warning' : 'alert-info';
    
    const icon = type === 'success' ? '✓' : 
                type === 'error' ? '✕' : 
                type === 'warning' ? '⚠' : 'ℹ';
    
    toast.innerHTML = `
        <div class="alert ${alertClass} shadow-lg animate-[slideInRight_0.3s_ease-out]">
            <div>
                <span class="text-lg">${icon}</span>
                <span>${message}</span>
            </div>
        </div>
    `;
    
    // Auto remove after 3 seconds
    setTimeout(() => {
        if (toast.firstElementChild) {
            toast.firstElementChild.classList.add('animate-[slideOutRight_0.3s_ease-in]');
            setTimeout(() => {
                toast.innerHTML = '';
            }, 300);
        }
    }, 3000);
}
</script>
{% endblock %}