{% extends "base.html" %}
{% load static %}
{% block title %}Hồ sơ{% endblock %}
{% block content %}
    <main class="content">
<div class="location-toggle-container">
    <button id="toggleLocationBtn" class="btn btn-success">📍 Bật Vị Trí</button>
    <span id="locationStatus" style="margin-left: 10px;"></span>
</div>
        <div class="task-board">
            <h2>Công Việc Được Gán</h2>
            <ul id="task-list">
                {% for task in assigned_tasks %} {% if task.status != 'completed' %}
                <li id="task-{{ task.id }}" data-task-id="{{ task.id }}">
                    <div class="task-item">
                        <button 
                        class="task-btn {% if task.status == 'in_progress' %}in-progress{% else %}not-completed{% endif %}"
                        data-task-id="{{ task.id }}"
                        data-task-status="{{ task.status }}">
                        {{ task.customer.name }} |
                        {{ task.title }} |
                        {{ task.address }}
                    </button>
                    
                    </div>
                </li>
                {% endif %} {% empty %}
                <li class="no-task">Bửa nay Rảnh!!!!!!!!!!!.</li>
                {% endfor %}
            </ul>

            <!-- 🔹 Nút "Lịch sử công việc" -->
            <div class="task-history-container">
                <a href="{% url 'completed_tasks' %}" class="history-btn">📜 Lịch Sử Công Việc</a>
            </div>
        </div>
    </main>

 
<!-- Modal cập nhật công việc -->
<div id="taskDetailsModalProfile" class="modal" style="display: none;">
    <div class="modal-content">
        <span class="close" id="closeTaskModalBtn">&times;</span>
        <h2>Cập nhật trạng thái công việc</h2>
        <!-- Ẩn ID công việc -->
        <input type="hidden" id="taskId">
        <!-- Hình ảnh chỉ chụp từ camera -->
        <!-- Chụp ảnh xác nhận -->
        <div class="mb-3">
            <label for="taskImage">Chụp ảnh xác nhận:</label>
            <!-- Camera Preview -->
            <video id="cameraPreview" autoplay style="width: 100%; max-height: 300px; display: none;"></video>
            <canvas id="canvas" style="display: none;"></canvas>
            <!-- Input ẩn để xử lý chụp ảnh trên iPhone / Android -->
            <input type="file" id="taskImage" accept="image/*" capture="environment" style="display:none">
            <!-- Nút chụp ảnh -->
            <button class="btn btn-secondary" id="captureBtn">📸 Chụp ảnh</button>
            <button class="btn btn-danger" id="retryBtn" style="display:none;">🔄 Chụp lại</button>
        
            <!-- Chọn chế độ chụp ảnh nhẹ -->
            <div class="form-check form-switch mt-2">
                <input class="form-check-input" type="checkbox" id="lowQualityToggle">
                <label class="form-check-label" for="lowQualityToggle">Chế độ chụp ảnh nhẹ (máy yếu)</label>
            </div>
        
            <!-- Hiển thị ảnh đã chụp -->
            <div id="previewImages" class="mt-2"></div>
        </div>
        

        <input type="hidden" name="latitude" id="latitude">
<input type="hidden" name="longitude" id="longitude">
        <!-- Chọn trạng thái -->
        <div class="mb-3">
            <label for="taskStatus">Trạng thái:</label>
            <select id="taskStatus" class="form-select">
                <option value="not_started">Chưa Bắt Đầu</option>
                <option value="in_progress">Đang Làm</option>
                <option value="completed">Hoàn Thành</option>
            </select>
        </div>

        <!-- Ghi chú kèm chuyển giọng nói thành văn bản -->
        <div class="mb-3">
            <label for="taskNotes">Ghi chú:</label>
            <textarea id="taskNotes" class="form-control" rows="3" placeholder="Nhập ghi chú hoặc sử dụng giọng nói..."></textarea>
            <button id="voiceBtn" class="btn btn-secondary mt-2">🎤 Nhập bằng giọng nói</button>

        </div>

        <!-- Nút cập nhật -->
        <button id="submitButton" class="btn btn-primary mt-3">Xác Nhận</button>

    </div>
</div>
   <script>
let isLocationOn = false;
let watchId = null;
const toggleBtn = document.getElementById("toggleLocationBtn");
const statusSpan = document.getElementById("locationStatus");

toggleBtn.addEventListener("click", async () => {
    if (!isLocationOn) {
        try {
            const result = await navigator.permissions.query({ name: "geolocation" });

            if (result.state === "granted" || result.state === "prompt") {
                watchId = navigator.geolocation.watchPosition(pos => {
                    const lat = pos.coords.latitude;
                    const lon = pos.coords.longitude;
                    statusSpan.innerText = `✅ Vị trí: (${lat}, ${lon})`;
                    isLocationOn = true;
                    toggleBtn.innerText = "📍 Tắt Vị Trí";
                }, err => {
                    statusSpan.innerText = "❌ Không thể lấy vị trí";
                }, {
                    enableHighAccuracy: true, // lấy vị trí chính xác hơn
                    maximumAge: 10000,        // không lấy dữ liệu cũ hơn 10s
                    timeout: 10000            // timeout nếu không phản hồi trong 10s
                });
            } else {
                statusSpan.innerText = "⚠️ Bạn đã chặn quyền vị trí";
            }
        } catch (err) {
            statusSpan.innerText = "⚠️ Lỗi khi lấy quyền vị trí";
        }
    } else {
        // Tắt theo dõi vị trí
        if (watchId !== null) {
            navigator.geolocation.clearWatch(watchId);
            watchId = null;
        }
        isLocationOn = false;
        statusSpan.innerText = "";
        toggleBtn.innerText = "📍 Bật Vị Trí";
    }
});
</script>

    {% endblock %}