{% extends "base.html" %}

{% block title %}Team 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-secondary/10 transition-colors duration-300">
            <div class="relative mr-3">
                <div class="absolute inset-0 bg-secondary/20 rounded-lg blur-sm"></div>
                <div class="relative bg-secondary/10 rounded-lg p-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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                    </svg>
                </div>
            </div>
            <span class="bg-gradient-to-r from-secondary to-accent bg-clip-text text-transparent font-bold">
                Dashboard Tim
            </span>
        </a>
    </div>
    <div class="flex-none">
        <div class="dropdown dropdown-end">
            <label tabindex="0" class="btn btn-ghost hover:bg-secondary/10 transition-colors duration-300">
                <div class="indicator">
                    <div class="badge badge-secondary badge-xs indicator-item animate-pulse"></div>
                    <div class="avatar placeholder">
                        <div class="bg-secondary/20 text-secondary 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-secondary badge-sm">{{ session.user_role|title }}</span>
                </li>
                <li><div class="divider my-1"></div></li>
                <li><a href="{{ url_for('team_dashboard') }}" 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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>Dashboard</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 %}
<div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">Tugas Saya</h1>
    <p class="text-base-content/70">Halo {{ session.full_name }}, berikut adalah daftar tugas yang diberikan untukmu.</p>
</div>

<div class="flex flex-col lg:flex-row gap-6">
    <!-- Sidebar with Stats and Filter -->
    <aside class="lg:w-80 w-full lg:sticky lg:top-6 self-start">
        <div class="card bg-base-100 shadow-xl border border-base-300/50 card-hover">
            <div class="card-body">
                <h2 class="card-title mb-4">Ringkasan Kinerja</h2>
                
                <!-- Quick Status Overview -->
                <div class="grid grid-cols-2 gap-3 mb-6">
                    <div class="stat-card bg-gradient-to-br from-primary/10 to-primary/5 border-l-4 border-primary p-4 rounded-lg">
                        <div class="text-sm font-semibold text-primary/80">Total Tugas</div>
                        <div class="text-2xl font-bold text-primary">{{ projects|length }}</div>
                    </div>
                    <div class="stat-card bg-gradient-to-br from-error/10 to-error/5 border-l-4 border-error p-4 rounded-lg">
                        <div class="text-sm font-semibold text-error/80">Pending</div>
                        <div class="text-2xl font-bold text-error">{{ projects|selectattr('status', 'equalto', 'Belum Dikerjakan')|list|length }}</div>
                    </div>
                    <div class="stat-card bg-gradient-to-br from-warning/10 to-warning/5 border-l-4 border-warning p-4 rounded-lg">
                        <div class="text-sm font-semibold text-warning/80">Dikerjakan</div>
                        <div class="text-2xl font-bold text-warning">{{ projects|selectattr('status', 'in', ['Dikerjakan', 'Revisi'])|list|length }}</div>
                    </div>
                    <div class="stat-card bg-gradient-to-br from-success/10 to-success/5 border-l-4 border-success p-4 rounded-lg">
                        <div class="text-sm font-semibold text-success/80">Selesai</div>
                        <div class="text-2xl font-bold text-success">{{ projects|selectattr('status', 'equalto', 'Selesai')|list|length }}</div>
                    </div>
                </div>
                
                <div class="divider"></div>

                <h2 class="card-title mb-4">Filter Tugas</h2>
                <form method="GET" action="{{ url_for('team_dashboard') }}" class="space-y-4">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Tanggal Deadline</span>
                        </label>
                        <input type="date" name="date" value="{{ current_date_filter }}" class="input input-bordered focus:input-secondary transition-all">
                    </div>
                    
                    <div class="card-actions justify-end space-x-2">
                        <button type="submit" class="btn btn-secondary btn-sm">Filter</button>
                        <a href="{{ url_for('team_dashboard') }}" class="btn btn-ghost btn-sm">Reset</a>
                    </div>
                </form>
            </div>
        </div>
    </aside>
    
    <!-- Main Content: Task List -->
    <main class="flex-1">
        {% if not projects %}
        <div class="text-center py-16 card bg-base-100 shadow-xl border border-base-300/50 p-8">
            <div class="text-base-content/50">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20 mx-auto mb-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />
                </svg>
                <h3 class="text-2xl font-bold mb-2">Hore, tidak ada tugas!</h3>
                <p class="text-lg">Semua pekerjaanmu sudah selesai. Saatnya bersantai sejenak! ☕</p>
            </div>
        </div>
        {% else %}
        <div class="grid grid-cols-1 gap-6">
            {% for project in projects %}
            <div class="card bg-base-100 shadow-xl border border-base-300/50 card-hover animate-slide-up" style="animation-delay: {{ loop.index * 50 }}ms;">
                <div class="card-body">
                    <!-- Card Header -->
                    <div class="flex flex-col sm:flex-row justify-between items-start gap-2 mb-4">
                        <h3 class="card-title text-lg flex-1">
                            {{ project.fileName or 'Tanpa Judul' }}
                        </h3>
                        <div class="flex items-center gap-2">
                             <div class="badge {{ 'badge-success' if project.status == 'Selesai' else 'badge-warning' if project.status == 'Dikerjakan' else 'badge-error' if project.status == 'Belum Dikerjakan' else 'badge-info' }} badge-outline font-semibold">
                                {{ project.status }}
                            </div>
                           {% if project.orderNumber %}
                           <div class="badge badge-ghost font-mono text-xs">#{{ project.orderNumber }}</div>
                           {% endif %}
                        </div>
                    </div>
                    
                    <!-- Card Details -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm mb-4">
                        <div class="flex items-center gap-3 p-2 bg-base-200/50 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>
                            <div>
                                <div class="font-semibold {{ get_deadline_class(project.deadline) }}">
                                    Deadline: {{ project.deadline[:16].replace('T', ' ') if project.deadline else 'N/A' }}
                                </div>
                            </div>
                        </div>
                        <div class="flex items-center gap-3 p-2 bg-base-200/50 rounded-lg">
                           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary" 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>Admin: <span class="badge badge-outline">{{ project.adminName or '-' }}</span></div>
                        </div>
                        {% if project.jumlahHalaman %}
                        <div class="flex items-center gap-3 p-2 bg-base-200/50 rounded-lg">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" /></svg>
                           <div>Jml Halaman: <span class="font-bold">{{ project.jumlahHalaman }}</span></div>
                        </div>
                        {% endif %}
                        {% if project.notes %}
                        <div class="flex items-start gap-3 p-2 bg-base-200/50 rounded-lg md:col-span-2">
                             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-secondary flex-shrink-0 mt-1" 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>Catatan: <span class="text-base-content/80">{{ project.notes }}</span></div>
                        </div>
                        {% endif %}
                    </div>
                    
                    <div class="divider my-0"></div>

                    <!-- Card Actions -->
                    <div class="card-actions justify-between items-center mt-4">
                        <div class="flex items-center gap-2">
                             {% if project.originalFileLink %}
                                <a href="{{ url_for('serve_upload', filename=project.originalFileLink) }}" target="_blank" class="btn btn-sm btn-outline btn-info">
                                    <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>
                                    File Asli
                                </a>
                            {% endif %}
                             {% if project.status == 'Selesai' and project.fileHasilKerja %}
                                <a href="{{ url_for('serve_upload', filename=project.fileHasilKerja) }}" target="_blank" class="btn btn-sm btn-outline 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="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" /></svg>
                                    Lihat Hasil
                                </a>
                            {% endif %}
                        </div>

                        <div class="flex items-center gap-2">
                             <select class="select select-bordered select-xs status-select" 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>
                            
                            <button class="btn btn-sm btn-ghost btn-circle" onclick="sendWhatsAppNotificationToAdmin({{ project.id }})">
                               <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-success" 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>

                            <button class="btn btn-sm btn-secondary" onclick="openSubmitModal({{ project.id }}, '{{ project.fileName }}')">
                                <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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
                                Submit
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </main>
</div>

<!-- Submit Work Modal -->
<dialog id="submit_work_modal" class="modal">
    <div class="modal-box">
        <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">Serahkan Hasil Kerja</h3>
        
        <div id="project_info" class="mb-4 p-4 bg-base-200 rounded-lg text-sm">
            <p>Proyek: <span id="project_name" class="font-semibold"></span></p>
        </div>
        
        <form method="POST" action="{{ url_for('submit_work') }}" enctype="multipart/form-data">
            <input type="hidden" id="submit_project_id" name="project_id">
            
            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">Upload Hasil Kerja <span class="text-error">*</span></span>
                </label>
                <input type="file" name="fileHasilKerja" class="file-input file-input-bordered file-input-secondary w-full" required>
                <label class="label">
                    <span class="label-text-alt">Jenis file yang diizinkan: png, jpg, pdf, doc, dll.</span>
                </label>
            </div>
            
            <div class="alert alert-info mb-4">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                <span>Status proyek akan otomatis diubah menjadi "Selesai" setelah file diserahkan.</span>
            </div>
            
            <div class="modal-action">
                <button type="submit" class="btn btn-secondary">
                    <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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" /></svg>
                    Kirim Hasil Kerja
                </button>
            </div>
        </form>
    </div>
</dialog>

<script>
// Function to populate and open the submit modal
function openSubmitModal(projectId, projectName) {
    document.getElementById('submit_project_id').value = projectId;
    document.getElementById('project_name').textContent = projectName;
    document.getElementById('submit_work_modal').showModal();
}

// Function to handle status updates (copy from base.html logic but adapted)
async function updateStatus(projectId, newStatus) {
    const selectElement = document.querySelector(`select[data-status][onchange*="${projectId}"]`);
    selectElement.disabled = true;

    try {
        const response = await fetch("{{ url_for('update_status') }}", {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ project_id: projectId, status: newStatus })
        });
        const result = await response.json();
        if (result.success) {
            showToast(result.message, 'success');
            // Optionally, reload or just update the UI visually
            setTimeout(() => location.reload(), 1000); 
        } else {
            showToast(result.message, 'error');
            // Revert on failure
            selectElement.value = selectElement.getAttribute('data-status');
        }
    } catch (error) {
        showToast('Gagal terhubung ke server.', 'error');
        selectElement.value = selectElement.getAttribute('data-status');
    } finally {
        selectElement.disabled = false;
    }
}

// WhatsApp Notification to Admin
async function sendWhatsAppNotificationToAdmin(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 adminWA = data.admin_whatsapp;
        
        if (!adminWA || !adminWA.whatsapp_number) {
            showToast('Nomor WhatsApp admin tidak ditemukan.', 'error');
            return;
        }
        
        const deadline = project.deadline ? new Date(project.deadline).toLocaleString('id-ID', { dateStyle: 'medium', timeStyle: 'short' }) : 'N/A';
        
        const statusEmoji = {
            'Belum Dikerjakan': '⏳', 'Dikerjakan': '🔄', 'Revisi': '🔁', 'Selesai': '✅'
        };
        
        let message = `📢 *UPDATE STATUS PROYEK DARI TIM*\n\n` +
                      `*Proyek:* ${project.fileName || '-'}\n` +
                      `*Status Saat Ini:* ${statusEmoji[project.status] || '📊'} ${project.status}\n` +
                      `*Dikerjakan oleh:* {{ session.full_name }}\n` +
                      `*Deadline:* ${deadline}\n`;

        if (project.fileHasilKerja) {
            const fileUrl = `${window.location.origin}${"{{ url_for('serve_upload', filename='FNAME') }}".replace('FNAME', project.fileHasilKerja)}`;
            message += `\n*File Hasil:* ${fileUrl}\n`;
        }

        message += `\nMohon untuk diperiksa di dashboard. Terima kasih! 🙏`;
        
        const whatsappUrl = `https://wa.me/${adminWA.whatsapp_number}?text=${encodeURIComponent(message)}`;
        window.open(whatsappUrl, '_blank');
        
        showToast(`Membuka WhatsApp untuk ${adminWA.full_name}...`, 'success');
        
    } catch (error) {
        showToast('Gagal mempersiapkan notifikasi WhatsApp.', 'error');
        console.error('WhatsApp Error:', error);
    }
}

// Toast function placeholder (assuming it exists in base.html)
function showToast(message, type = 'info') {
    // This is a placeholder. The actual function should be in base.html
    console.log(`Toast: [${type}] ${message}`);
    const toastContainer = document.body; // Simplified for this example
    const toast = document.createElement('div');
    toast.className = `alert ${type === 'success' ? 'alert-success' : 'alert-error'} shadow-lg fixed top-5 right-5 z-50 animate-fade-in`;
    toast.innerHTML = `<div><span>${message}</span></div>`;
    toastContainer.appendChild(toast);
    setTimeout(() => {
        toast.remove();
    }, 3000);
}
</script>
{% endblock %}