{% extends "base.html" %}

{% block title %}Team 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="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>
            Dashboard Tim
        </a>
    </div>
    <div class="flex-none">
        <div class="dropdown dropdown-end">
            <label tabindex="0" class="btn btn-ghost">
                <div class="indicator">
                    <div class="badge badge-info 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('logout') }}">Logout</a></li>
            </ul>
        </div>
    </div>
</div>
{% endblock %}

{% block content %}
<div class="flex flex-col lg:flex-row gap-6">
    <!-- Sidebar with Filter -->
    <div class="lg:w-80 w-full">
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title">Filter Tugas</h2>
                
                <form method="GET" action="{{ url_for('team_dashboard') }}">
                    <div class="form-control mb-4">
                        <label class="label">
                            <span class="label-text">Tanggal Deadline</span>
                        </label>
                        <input type="date" 
                               name="date" 
                               value="{{ current_date_filter }}"
                               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('team_dashboard') }}" class="btn btn-outline btn-sm">Reset</a>
                    </div>
                </form>
                
                <div class="divider"></div>
                
                <!-- Quick Status Overview -->
                <div class="grid grid-cols-2 lg:grid-cols-1 gap-3">
                    <div class="stat bg-base-200 rounded-lg p-4">
                        <div class="stat-title text-xs lg:text-sm">Total Tugas</div>
                        <div class="stat-value text-primary text-lg lg:text-2xl">{{ projects|length }}</div>
                    </div>
                    
                    <div class="stat bg-base-200 rounded-lg p-4">
                        <div class="stat-title text-xs lg:text-sm">Belum Dikerjakan</div>
                        <div class="stat-value text-error text-lg lg:text-2xl">{{ projects|selectattr('status', 'equalto', 'Belum Dikerjakan')|list|length }}</div>
                    </div>
                    
                    <div class="stat bg-base-200 rounded-lg p-4">
                        <div class="stat-title text-xs lg:text-sm">Sedang Dikerjakan</div>
                        <div class="stat-value text-warning text-lg lg:text-2xl">{{ projects|selectattr('status', 'equalto', 'Dikerjakan')|list|length }}</div>
                    </div>
                    
                    <div class="stat bg-base-200 rounded-lg p-4">
                        <div class="stat-title text-xs lg:text-sm">Selesai</div>
                        <div class="stat-value text-success text-lg lg:text-2xl">{{ projects|selectattr('status', 'equalto', 'Selesai')|list|length }}</div>
                    </div>
                </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 Tugas Saya</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>Judul/File</th>
                                <th>File Asli</th>
                                <th>Admin</th>
                                <th>Deadline</th>
                                <th>Status</th>
                                <th>Catatan Owner</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for project in projects %}
                            <tr>
                                <td>{{ project.orderNumber or '-' }}</td>
                                <td class="max-w-xs">
                                    <div class="tooltip" data-tip="{{ project.fileName }}">
                                        <span class="truncate block">{{ project.fileName or '-' }}</span>
                                    </div>
                                </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="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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>
                                        Download
                                    </a>
                                    {% else %}
                                    -
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="badge badge-outline">{{ project.adminName or '-' }}</div>
                                </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 class="max-w-xs">
                                    {% if project.notes %}
                                    <div class="tooltip" data-tip="{{ project.notes }}">
                                        <span class="truncate block">{{ project.notes }}</span>
                                    </div>
                                    {% else %}
                                    -
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="flex gap-1">
                                        {% if project.status != 'Selesai' %}
                                        <button class="btn btn-xs btn-success" 
                                                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>
                                        {% else %}
                                        <div class="badge badge-success">Selesai</div>
                                        {% endif %}
                                        
                                        <button class="btn btn-xs btn-info" 
                                                onclick="sendWhatsAppNotificationToAdmin({{ 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>
                                        
                                        {% if project.fileHasilKerja %}
                                        <a href="{{ project.fileHasilKerja }}" 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>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    
                    {% if not projects %}
                    <div class="text-center py-8">
                        <div class="text-base-content/60">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 opacity-50" 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>
                            Tidak ada tugas yang ditemukan
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</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">
            <p class="font-semibold">Proyek: <span id="project_name"></span></p>
        </div>
        
        <form method="POST" action="{{ url_for('submit_work') }}">
            <input type="hidden" id="submit_project_id" name="project_id">
            
            <div class="form-control mb-4">
                <label class="label">
                    <span class="label-text">URL Hasil Kerja <span class="text-error">*</span></span>
                </label>
                <input type="url" 
                       name="fileHasilKerja" 
                       class="input input-bordered" 
                       placeholder="https://drive.google.com/..." 
                       required>
                <label class="label">
                    <span class="label-text-alt">Masukkan link Google Drive, Dropbox, atau platform lainnya</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>Setelah submit, status proyek akan otomatis berubah menjadi "Selesai"</span>
            </div>
            
            <div class="modal-action">
                <button type="submit" class="btn btn-primary">
                    <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>
                    Submit Hasil Kerja
                </button>
                <button type="button" class="btn" onclick="document.getElementById('submit_work_modal').close()">Batal</button>
            </div>
        </form>
    </div>
</dialog>

<script>
function openSubmitModal(projectId, projectName) {
    document.getElementById('submit_project_id').value = projectId;
    document.getElementById('project_name').textContent = projectName;
    document.getElementById('submit_work_modal').showModal();
}

// 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;
        }
        
        // Format deadline
        const deadline = project.deadline ? new Date(project.deadline).toLocaleString('id-ID') : 'Tidak ditentukan';
        
        // Get status emoji
        const statusEmoji = {
            'Belum Dikerjakan': '⏳',
            'Dikerjakan': '🔄',
            'Revisi': '🔁',
            'Selesai': '✅'
        };
        
        // Create message
        const message = `📢 *UPDATE STATUS PROYEK*

${statusEmoji[project.status] || '📊'} *Status:* ${project.status}
📝 *Proyek:* ${project.fileName || 'Tidak disebutkan'}
🏷️ *No. Urut:* ${project.orderNumber || '-'}
🛒 *No. Pesanan:* ${project.shopeeOrderNumber || '-'}
👤 *Team:* {{ session.full_name }} ({{ session.username }})
⏰ *Deadline:* ${deadline}

${project.fileHasilKerja ? `🎯 *File Hasil:* ${project.fileHasilKerja}` : ''}

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

Status proyek telah diperbarui. Silakan cek dashboard untuk detail lebih lanjut. 🙏`;
        
        const whatsappUrl = `https://wa.me/${adminWA.whatsapp_number}?text=${encodeURIComponent(message)}`;
        window.open(whatsappUrl, '_blank');
        
        showToast(`WhatsApp terbuka untuk admin (${adminWA.full_name})`, 'success');
        
    } catch (error) {
        showToast('Terjadi kesalahan saat membuka WhatsApp', 'error');
    }
}
</script>
{% endblock %}