{% 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-plus-circle text-success"></i>
                Create New Task
            </h2>

            <p class="text-muted mb-0">
                Create a new fabrication, machining, or engineering task
            </p>

        </div>

        <a href="/task-board" class="btn btn-secondary">

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

            Back to Board

        </a>

    </div>

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

    <form method="POST" action="/task-board/new" 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" required placeholder="Enter task title">

                            </div>

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

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

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

                                    <option value="Fabrication">🔧 Fabrication</option>

                                    <option value="Machining">⚙️ Machining</option>

                                    <option value="Assembly">🔩 Assembly</option>

                                    <option value="Maintenance">🛠️ Maintenance</option>

                                    <option value="Design">📐 Design</option>

                                    <option value="Material Procurement">📦 Material Procurement</option>

                                    <option value="QA/Inspection">🔬 QA/Inspection</option>

                                    <option value="Other">📋 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">🔧 Fabrication</option>

                                    <option value="Machining">⚙️ Machining</option>

                                    <option value="Assembly">🔩 Assembly</option>

                                    <option value="Maintenance">🛠️ Maintenance</option>

                                    <option value="Design">📐 Design</option>

                                    <option value="QA/QC">🔬 QA/QC</option>

                                    <option value="Procurement">📦 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" placeholder="Detailed description of the task..."></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">

                            <!-- 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"
                                           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" 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" 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 }}">{{ 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 }}">{{ 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" 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" required>

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

                                {% for user in users %}

                                <option value="{{ user.username }}">

                                    {{ 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">

                        </div>

                        <div class="mb-3">

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

                            <input type="date" class="form-control" name="due_date" required>

                        </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="0">

                            <small class="text-muted">Estimated time to complete (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">📋 New Request</option>

                                <option value="Assigned">🔧 Assigned</option>

                                <option value="Design">📐 Design</option>

                                <option value="Material Planning">📦 Material Planning</option>

                                <option value="In Progress">⚙️ In Progress</option>

                                <option value="QA/Review">✅ QA/Review</option>

                                <option value="Completed">🚀 Completed</option>

                                <option value="Blocked">🛑 Blocked</option>

                                <option value="Cancelled">❌ Cancelled</option>

                            </select>

                        </div>

                        <div class="mb-3">

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

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

                                <option value="Critical">🔴 Critical</option>

                                <option value="High">🟠 High</option>

                                <option value="Medium" selected>🟡 Medium</option>

                                <option value="Low">🟢 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-success btn-lg">

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

                            </button>

                            <a href="/task-board" class="btn btn-secondary">

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

                            </a>

                        </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();

        if (searchTimeout) {
            clearTimeout(searchTimeout);
        }

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

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

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

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

    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();
        const assignedTo = document.querySelector('[name="assigned_to"]').value;
        const dueDate = document.querySelector('[name="due_date"]').value;

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

        if (!assignedTo) {
            e.preventDefault();
            alert('Please assign this task to a user.');
            document.querySelector('[name="assigned_to"]').focus();
            return;
        }

        if (!dueDate) {
            e.preventDefault();
            alert('Please set a due date.');
            document.querySelector('[name="due_date"]').focus();
            return;
        }
    });
</script>

<!-- ========================================================== -->
<!-- STYLES -->
<!-- ========================================================== -->

<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-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 %}