{% extends "base.html" %}

{% block content %}

<div class="container-fluid">

    <!-- ========================================================== -->
    <!-- HEADER -->
    <!-- ========================================================== -->

    <div class="d-flex justify-content-between align-items-center mb-4">

        <div>

            <h2 class="fw-bold">
                <i class="bi bi-pencil-square text-warning"></i>
                Edit Task
            </h2>

            <p class="text-muted mb-0">
                Task #{{ task.id }} | {{ task.title }}
            </p>

        </div>

        <div class="d-flex gap-2">

            <a href="/task-board/{{ task.id }}" class="btn btn-secondary">

                <i class="bi bi-arrow-left"></i>

                Back to Task

            </a>

        </div>

    </div>

    <!-- ========================================================== -->
    <!-- EDIT TASK FORM -->
    <!-- ========================================================== -->

    <form method="POST" action="/task-board/{{ task.id }}/edit" id="taskForm">

        <div class="row">

            <div class="col-lg-8">

                <!-- Basic Information -->
                <div class="card shadow-sm mb-4">

                    <div class="card-header bg-primary text-white">

                        <i class="bi bi-info-circle"></i> Basic Information

                    </div>

                    <div class="card-body">

                        <div class="row">

                            <!-- Task Title -->
                            <div class="col-md-12 mb-3">

                                <label class="form-label">Task Title *</label>

                                <input type="text" class="form-control" name="title" value="{{ task.title }}" required>

                            </div>

                            <!-- Task Type -->
                            <div class="col-md-6 mb-3">

                                <label class="form-label">Task Type</label>

                                <select class="form-select" name="task_type">

                                    <option value="Fabrication" {% if task.task_type == 'Fabrication' %}selected{% endif %}>🔧 Fabrication</option>

                                    <option value="Machining" {% if task.task_type == 'Machining' %}selected{% endif %}>⚙️ Machining</option>

                                    <option value="Assembly" {% if task.task_type == 'Assembly' %}selected{% endif %}>🔩 Assembly</option>

                                    <option value="Maintenance" {% if task.task_type == 'Maintenance' %}selected{% endif %}>🛠️ Maintenance</option>

                                    <option value="Design" {% if task.task_type == 'Design' %}selected{% endif %}>📐 Design</option>

                                    <option value="Material Procurement" {% if task.task_type == 'Material Procurement' %}selected{% endif %}>📦 Material Procurement</option>

                                    <option value="QA/Inspection" {% if task.task_type == 'QA/Inspection' %}selected{% endif %}>🔬 QA/Inspection</option>

                                    <option value="Other" {% if task.task_type == 'Other' %}selected{% endif %}>📋 Other</option>

                                </select>

                            </div>

                            <!-- Department -->
                            <div class="col-md-6 mb-3">

                                <label class="form-label">Department</label>

                                <select class="form-select" name="department">

                                    <option value="">Select Department...</option>

                                    <option value="Fabrication" {% if task.department == 'Fabrication' %}selected{% endif %}>🔧 Fabrication</option>

                                    <option value="Machining" {% if task.department == 'Machining' %}selected{% endif %}>⚙️ Machining</option>

                                    <option value="Assembly" {% if task.department == 'Assembly' %}selected{% endif %}>🔩 Assembly</option>

                                    <option value="Maintenance" {% if task.department == 'Maintenance' %}selected{% endif %}>🛠️ Maintenance</option>

                                    <option value="Design" {% if task.department == 'Design' %}selected{% endif %}>📐 Design</option>

                                    <option value="QA/QC" {% if task.department == 'QA/QC' %}selected{% endif %}>🔬 QA/QC</option>

                                    <option value="Procurement" {% if task.department == 'Procurement' %}selected{% endif %}>📦 Procurement</option>

                                </select>

                            </div>

                            <!-- Description -->
                            <div class="col-md-12 mb-3">

                                <label class="form-label">Description</label>

                                <textarea class="form-control" name="description" rows="4">{{ task.description or '' }}</textarea>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- Industry-Specific Details -->
                <div class="card shadow-sm mb-4">

                    <div class="card-header bg-info text-white">

                        <i class="bi bi-building"></i> Job Details

                    </div>

                    <div class="card-body">

                        <div class="row">

                            <!-- ✅ UPDATED: Work Order Number with Autocomplete -->
                            <div class="col-md-6 mb-3">

                                <label class="form-label">Work Order Number</label>

                                <div class="position-relative">

                                    <input type="text" 
                                           class="form-control" 
                                           name="work_order_number" 
                                           id="workOrderSearch"
                                           value="{{ task.work_order_number or '' }}"
                                           placeholder="Type to search work orders..."
                                           autocomplete="off">

                                    <!-- Autocomplete Dropdown -->
                                    <div id="workOrderResults" 
                                         class="dropdown-menu w-100" 
                                         style="display: none; max-height: 200px; overflow-y: auto;">
                                    </div>

                                </div>

                                <small class="text-muted">Type to search existing work orders or enter a new one</small>

                            </div>

                            <!-- Client Name -->
                            <div class="col-md-6 mb-3">

                                <label class="form-label">Client Name</label>

                                <input type="text" class="form-control" name="client_name" value="{{ task.client_name or '' }}" placeholder="Client name">

                            </div>

                            <!-- Machine/Equipment -->
                            <div class="col-md-12 mb-3">

                                <label class="form-label">Machine / Equipment</label>

                                <input type="text" class="form-control" name="machine_equipment" value="{{ task.machine_equipment or '' }}" placeholder="e.g., CNC Lathe, Milling Machine, Welding Station">

                                <small class="text-muted">Specify the machine or equipment being worked on</small>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- Links -->
                <div class="card shadow-sm mb-4">

                    <div class="card-header bg-secondary text-white">

                        <i class="bi bi-link-45deg"></i> Links

                    </div>

                    <div class="card-body">

                        <div class="row">

                            <!-- Linked Enquiry -->
                            <div class="col-md-6 mb-3">

                                <label class="form-label">Linked Enquiry</label>

                                <select class="form-select" name="enquiry_id">

                                    <option value="">None</option>

                                    {% for enquiry in enquiries %}

                                    <option value="{{ enquiry.id }}" {% if task.enquiry_id == enquiry.id %}selected{% endif %}>
                                        {{ enquiry.enquiry_number }} - {{ enquiry.subject }}
                                    </option>

                                    {% endfor %}

                                </select>

                            </div>

                            <!-- Linked Project -->
                            <div class="col-md-6 mb-3">

                                <label class="form-label">Linked Project</label>

                                <select class="form-select" name="project_id">

                                    <option value="">None</option>

                                    {% for project in projects %}

                                    <option value="{{ project.id }}" {% if task.project_id == project.id %}selected{% endif %}>
                                        {{ project.project_code }} - {{ project.project_name }}
                                    </option>

                                    {% endfor %}

                                </select>

                            </div>

                        </div>

                    </div>

                </div>

                <!-- Tags -->
                <div class="card shadow-sm mb-4">

                    <div class="card-header bg-info text-white">

                        <i class="bi bi-tags"></i> Tags

                    </div>

                    <div class="card-body">

                        <div class="row">

                            <div class="col-md-12 mb-3">

                                <label class="form-label">Tags</label>

                                <input type="text" class="form-control" name="tags" value="{{ task.tags|join(', ') if task.tags else '' }}" placeholder="e.g., urgent, welding, cnc, assembly">

                                <small class="text-muted">Separate tags with commas</small>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <!-- ========================================================== -->
            <!-- RIGHT PANEL -->
            <!-- ========================================================== -->

            <div class="col-lg-4">

                <!-- Assignment -->
                <div class="card shadow-sm mb-4">

                    <div class="card-header bg-success text-white">

                        <i class="bi bi-person-plus"></i> Assignment

                    </div>

                    <div class="card-body">

                        <div class="mb-3">

                            <label class="form-label">Assign To</label>

                            <select class="form-select" name="assigned_to">

                                <option value="">Select User...</option>

                                {% for user in users %}

                                <option value="{{ user.username }}" {% if task.assigned_to == user.username %}selected{% endif %}>
                                    {{ user.full_name or user.username }} ({{ user.role }})
                                </option>

                                {% endfor %}

                            </select>

                            <small class="text-muted">Primary assignee for this task</small>

                        </div>

                    </div>

                </div>

                <!-- Dates & Time -->
                <div class="card shadow-sm mb-4">

                    <div class="card-header bg-dark text-white">

                        <i class="bi bi-calendar"></i> Dates & Time

                    </div>

                    <div class="card-body">

                        <div class="mb-3">

                            <label class="form-label">Start Date</label>

                            <input type="date" class="form-control" name="start_date" value="{{ task.start_date.strftime('%Y-%m-%d') if task.start_date else '' }}">

                        </div>

                        <div class="mb-3">

                            <label class="form-label">Due Date</label>

                            <input type="date" class="form-control" name="due_date" value="{{ task.due_date.strftime('%Y-%m-%d') if task.due_date else '' }}">

                        </div>

                        <div class="mb-3">

                            <label class="form-label">Estimated Hours</label>

                            <input type="number" step="0.5" class="form-control" name="estimated_hours" value="{{ task.estimated_hours or 0 }}">

                            <small class="text-muted">Estimated time to complete (hours)</small>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">Actual Hours</label>

                            <input type="number" step="0.5" class="form-control" name="actual_hours" value="{{ task.actual_hours or 0 }}">

                            <small class="text-muted">Actual time spent (hours)</small>

                        </div>

                    </div>

                </div>

                <!-- Status & Priority -->
                <div class="card shadow-sm mb-4">

                    <div class="card-header bg-warning text-dark">

                        <i class="bi bi-flag"></i> Status & Priority

                    </div>

                    <div class="card-body">

                        <div class="mb-3">

                            <label class="form-label">Status</label>

                            <select class="form-select" name="status">

                                <option value="New Request" {% if task.status == 'New Request' %}selected{% endif %}>📋 New Request</option>

                                <option value="Assigned" {% if task.status == 'Assigned' %}selected{% endif %}>🔧 Assigned</option>

                                <option value="Design" {% if task.status == 'Design' %}selected{% endif %}>📐 Design</option>

                                <option value="Material Planning" {% if task.status == 'Material Planning' %}selected{% endif %}>📦 Material Planning</option>

                                <option value="In Progress" {% if task.status == 'In Progress' %}selected{% endif %}>⚙️ In Progress</option>

                                <option value="QA/Review" {% if task.status == 'QA/Review' %}selected{% endif %}>✅ QA/Review</option>

                                <option value="Completed" {% if task.status == 'Completed' %}selected{% endif %}>🚀 Completed</option>

                                <option value="Blocked" {% if task.status == 'Blocked' %}selected{% endif %}>🛑 Blocked</option>

                                <option value="Cancelled" {% if task.status == 'Cancelled' %}selected{% endif %}>❌ Cancelled</option>

                            </select>

                        </div>

                        <div class="mb-3">

                            <label class="form-label">Priority</label>

                            <select class="form-select" name="priority">

                                <option value="Critical" {% if task.priority == 'Critical' %}selected{% endif %}>🔴 Critical</option>

                                <option value="High" {% if task.priority == 'High' %}selected{% endif %}>🟠 High</option>

                                <option value="Medium" {% if task.priority == 'Medium' %}selected{% endif %}>🟡 Medium</option>

                                <option value="Low" {% if task.priority == 'Low' %}selected{% endif %}>🟢 Low</option>

                            </select>

                        </div>

                    </div>

                </div>

                <!-- Save Buttons -->
                <div class="card shadow-sm">

                    <div class="card-body">

                        <div class="d-grid gap-2">

                            <button type="submit" class="btn btn-primary btn-lg">

                                <i class="bi bi-save"></i> Update Task

                            </button>

                            <a href="/task-board/{{ task.id }}" class="btn btn-secondary">

                                <i class="bi bi-x-circle"></i> Cancel

                            </a>

                            <!-- Danger Zone - Delete (Admin Only) -->
                            {% if current_user.role in ["Admin", "Director"] %}

                            <hr>

                            <button type="button" class="btn btn-danger" onclick="confirmDelete('/task-board/{{ task.id }}/delete', 'Task: {{ task.title }}')">

                                <i class="bi bi-trash"></i> Delete Task

                            </button>

                            {% endif %}

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </form>

</div>

<!-- ========================================================== -->
<!-- WORK ORDER AUTOCOMPLETE SCRIPT -->
<!-- ========================================================== -->

<script>
    // ==========================================================
    // Work Order Autocomplete
    // ==========================================================

    const workOrderInput = document.getElementById('workOrderSearch');
    const workOrderResults = document.getElementById('workOrderResults');

    let searchTimeout = null;

    workOrderInput.addEventListener('input', function() {
        const query = this.value.trim();

        // Clear previous timeout
        if (searchTimeout) {
            clearTimeout(searchTimeout);
        }

        if (query.length < 2) {
            workOrderResults.style.display = 'none';
            workOrderResults.innerHTML = '';
            return;
        }

        // Debounce search
        searchTimeout = setTimeout(() => {
            searchWorkOrders(query);
        }, 300);
    });

    function searchWorkOrders(query) {
        fetch(`/task-board/search-work-orders?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                if (data.results.length === 0) {
                    workOrderResults.innerHTML = `
                        <div class="dropdown-item text-muted">
                            <i class="bi bi-info-circle"></i> No work orders found
                        </div>
                        <div class="dropdown-item text-muted small">
                            <i class="bi bi-plus-circle"></i> You can enter a new work order number
                        </div>
                    `;
                    workOrderResults.style.display = 'block';
                    return;
                }

                let html = '';
                data.results.forEach(item => {
                    const extraInfo = item.task_id ? `Task: ${item.title}` : `Project: ${item.project_name}`;
                    html += `
                        <div class="dropdown-item work-order-result" 
                             data-value="${item.value}"
                             onclick="selectWorkOrder('${item.value}')"
                             style="cursor: pointer;">
                            <div>
                                <strong><code>${item.value}</code></strong>
                            </div>
                            <div class="small text-muted">${extraInfo}</div>
                        </div>
                    `;
                });

                // Add option to create new
                html += `
                    <div class="dropdown-divider"></div>
                    <div class="dropdown-item text-muted small">
                        <i class="bi bi-plus-circle"></i> Type to create a new work order number
                    </div>
                `;

                workOrderResults.innerHTML = html;
                workOrderResults.style.display = 'block';
            })
            .catch(error => {
                console.error('Error searching work orders:', error);
                workOrderResults.style.display = 'none';
            });
    }

    function selectWorkOrder(value) {
        workOrderInput.value = value;
        workOrderResults.style.display = 'none';
        workOrderInput.focus();
    }

    // Hide results when clicking outside
    document.addEventListener('click', function(e) {
        if (e.target !== workOrderInput && !workOrderResults.contains(e.target)) {
            workOrderResults.style.display = 'none';
        }
    });

    // Keyboard navigation
    workOrderInput.addEventListener('keydown', function(e) {
        const items = workOrderResults.querySelectorAll('.work-order-result');
        
        if (e.key === 'ArrowDown') {
            e.preventDefault();
            if (items.length > 0) {
                const currentIndex = Array.from(items).findIndex(el => el.classList.contains('active'));
                const nextIndex = Math.min(currentIndex + 1, items.length - 1);
                items.forEach(el => el.classList.remove('active'));
                items[nextIndex].classList.add('active');
                items[nextIndex].scrollIntoView({ block: 'nearest' });
            }
        } else if (e.key === 'ArrowUp') {
            e.preventDefault();
            if (items.length > 0) {
                const currentIndex = Array.from(items).findIndex(el => el.classList.contains('active'));
                const prevIndex = Math.max(currentIndex - 1, 0);
                items.forEach(el => el.classList.remove('active'));
                items[prevIndex].classList.add('active');
                items[prevIndex].scrollIntoView({ block: 'nearest' });
            }
        } else if (e.key === 'Enter') {
            const activeItem = workOrderResults.querySelector('.work-order-result.active');
            if (activeItem) {
                e.preventDefault();
                const value = activeItem.getAttribute('data-value');
                if (value) {
                    selectWorkOrder(value);
                }
            }
        } else if (e.key === 'Escape') {
            workOrderResults.style.display = 'none';
        }
    });
</script>

<!-- ========================================================== -->
<!-- FORM VALIDATION -->
<!-- ========================================================== -->

<script>
    document.getElementById('taskForm').addEventListener('submit', function(e) {
        const title = document.querySelector('[name="title"]').value.trim();

        if (!title) {
            e.preventDefault();
            alert('Please enter a task title.');
            document.querySelector('[name="title"]').focus();
            return;
        }
    });

    // Confirm delete function
    function confirmDelete(url, itemName) {
        document.getElementById('deleteForm').action = url;
        document.getElementById('deleteItemInfo').textContent = '🗑️ ' + itemName;
        var modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    }
</script>

<!-- ========================================================== -->
<!-- FORM VALIDATION -->
<!-- ========================================================== -->

<script>
    document.getElementById('taskForm').addEventListener('submit', function(e) {
        const title = document.querySelector('[name="title"]').value.trim();

        if (!title) {
            e.preventDefault();
            alert('Please enter a task title.');
            document.querySelector('[name="title"]').focus();
            return;
        }
    });

    // Confirm delete function
    function confirmDelete(url, itemName) {
        document.getElementById('deleteForm').action = url;
        document.getElementById('deleteItemInfo').textContent = '🗑️ ' + itemName;
        var modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    }
</script>

<!-- ✅ ADD THIS STYLE SECTION HERE -->
<style>
    .work-order-result.active {
        background-color: #0d6efd;
        color: white;
    }
    .work-order-result.active .text-muted {
        color: rgba(255,255,255,0.7) !important;
    }
    
    /* Work Order Validation Styles */
    .work-order-valid {
        border-color: #198754 !important;
        background-color: #f8fff8 !important;
    }
    .work-order-invalid {
        border-color: #ffc107 !important;
        background-color: #fffbf0 !important;
    }
    .work-order-unknown {
        border-color: #6c757d !important;
    }
</style>

{% endblock %}

<style>
    .work-order-result.active {
        background-color: #0d6efd;
        color: white;
    }
    .work-order-result.active .text-muted {
        color: rgba(255,255,255,0.7) !important;
    }
</style>
<!-- ✅ ADD THIS STYLE SECTION HERE -->
<style>
    .work-order-result.active {
        background-color: #0d6efd;
        color: white;
    }
    .work-order-result.active .text-muted {
        color: rgba(255,255,255,0.7) !important;
    }
    
    /* Work Order Validation Styles */
    .work-order-valid {
        border-color: #198754 !important;
        background-color: #f8fff8 !important;
    }
    .work-order-invalid {
        border-color: #ffc107 !important;
        background-color: #fffbf0 !important;
    }
    .work-order-unknown {
        border-color: #6c757d !important;
    }
</style>

{% endblock %}