{% extends "base.html" %}

{% block content %}

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2><i class="bi bi-folder-plus text-primary"></i> New Project</h2>
        <p class="text-muted">Create a new engineering project linked to a quotation</p>
    </div>
    <a href="/projects" class="btn btn-secondary"><i class="bi bi-arrow-left"></i> Back</a>
</div>

<form method="POST" action="/projects/new" id="projectForm">

<div class="row">

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

        <!-- Project Details -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <i class="bi bi-info-circle"></i> Project Details
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- Project Name -->
                    <div class="col-md-12 mb-3">
                        <label class="form-label">Project Name *</label>
                        <input type="text" class="form-control" name="project_name" required placeholder="Enter project name">
                    </div>

                    <!-- Client -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Client *</label>
                        <select class="form-select" name="customer_id" id="customerSelect" required>
                            <option value="">Select Customer...</option>
                            {% for customer in customers %}
                            <option value="{{ customer.id }}">{{ customer.company_name }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <!-- Priority -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Priority</label>
                        <select class="form-select" name="priority">
                            <option value="Low">Low</option>
                            <option value="Medium" selected>Medium</option>
                            <option value="High">High</option>
                            <option value="Critical">Critical</option>
                        </select>
                    </div>

                    <!-- ✅ Client LPO Number (replaces Client Order Number) -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Client LPO Number *</label>
                        <input type="text" class="form-control" name="client_lpo_number" placeholder="Enter client LPO number" required>
                        <small class="text-muted">Client's Local Purchase Order number</small>
                    </div>

                    <!-- ✅ Your Initials -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Your Initials *</label>
                        <input type="text" class="form-control" id="userInitials" placeholder="e.g., YK" maxlength="5" required>
                        <small class="text-muted">Used to generate the work order reference</small>
                    </div>

                    <!-- ✅ MEGCL Work Order Reference - Auto-generated -->
                    <div class="col-md-12 mb-3">
                        <label class="form-label">MEGCL Work Order Reference</label>
                        <div class="input-group">
                            <input type="text" class="form-control" name="work_order_ref" id="workOrderRef" 
                                   placeholder="Auto-generates when you enter initials" readonly style="background-color: #f8f9fa;">
                            <button class="btn btn-outline-secondary" type="button" onclick="generateWorkOrder()">
                                <i class="bi bi-arrow-clockwise"></i> Generate
                            </button>
                        </div>
                        <small class="text-muted">Format: MEGCL/DD/MM/INITIALS/XXX (Auto-generated based on your initials)</small>
                    </div>

                    <!-- Date Received -->
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Date Received</label>
                        <input type="date" class="form-control" name="date_received">
                    </div>
                </div>
            </div>
        </div>

        <!-- Link to Quotation -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-success text-white">
                <i class="bi bi-link-45deg"></i> Link to Quotation & Enquiry
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i>
                    <strong>Tip:</strong> Select a SUBMITTED or APPROVED quotation. The enquiry, customer, and job description will auto-fill.
                </div>
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label class="form-label">Linked Quotation (BOQ)</label>
                        <select class="form-select" name="boq_id" id="boqSelect">
                            <option value="">Select a Quotation...</option>
                            {% for boq in boqs %}
                            <option value="{{ boq.id }}" 
                                    data-enquiry="{{ boq.enquiry_id }}" 
                                    data-customer="{{ boq.enquiry.customer_id }}"
                                    data-enquiry-number="{{ boq.enquiry.enquiry_number }}"
                                    data-customer-name="{{ boq.enquiry.customer.company_name }}"
                                    data-job-description="{{ boq.enquiry.subject }}">
                                {{ boq.quotation_number }} - {{ boq.enquiry.enquiry_number }} 
                                ({{ boq.enquiry.customer.company_name }}) - {{ boq.status }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Linked Enquiry (Auto-filled)</label>
                        <select class="form-select" name="enquiry_id" id="enquirySelect">
                            <option value="">None</option>
                            {% for enquiry in enquiries %}
                            <option value="{{ enquiry.id }}">{{ enquiry.enquiry_number }} - {{ enquiry.subject }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Job Description (Auto-filled)</label>
                        <input type="text" class="form-control" name="job_description" id="jobDescription" placeholder="Auto-filled from quotation">
                    </div>
                </div>
            </div>
        </div>

        <!-- Assignment -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-secondary text-white">
                <i class="bi bi-person-badge"></i> Assignment
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Assign To (System User)</label>
                        <select class="form-select" name="assigned_to">
                            <option value="">Select User...</option>
                            {% for user in users %}
                            <option value="{{ user.username }}">
                                {{ user.full_name or user.username }} ({{ user.department or user.role }})
                            </option>
                            {% endfor %}
                        </select>
                        <small class="text-muted">Select a system user to assign this project</small>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" name="status">
                            <option value="Pipeline">Pipeline</option>
                            <option value="Design">Design</option>
                            <option value="Construction">Construction</option>
                            <option value="On Hold">On Hold</option>
                            <option value="Completed">Completed</option>
                            <option value="Cancelled">Cancelled</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <!-- Remarks -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-warning text-dark">
                <i class="bi bi-chat-dots"></i> Remarks / Comments
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Initial Remarks</label>
                    <textarea class="form-control" name="remarks" rows="3" placeholder="Add any initial comments or instructions..."></textarea>
                    <small class="text-muted">This serves as the start of the project chat/comment history</small>
                </div>
            </div>
        </div>

        <!-- Dates -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-dark text-white">
                <i class="bi bi-calendar"></i> Timeline
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Start Date</label>
                        <input type="date" class="form-control" name="start_date">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Expected End Date</label>
                        <input type="date" class="form-control" name="expected_end_date">
                    </div>
                </div>
            </div>
        </div>

        <!-- Descriptions -->
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-info text-white">
                <i class="bi bi-file-text"></i> Description & Scope
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Full Description</label>
                    <textarea class="form-control" name="description" rows="3" placeholder="Brief project description..."></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">Scope of Work</label>
                    <textarea class="form-control" name="scope_of_work" rows="4" placeholder="Detailed scope of work..."></textarea>
                </div>
                <div class="mb-3">
                    <label class="form-label">Milestones</label>
                    <textarea class="form-control" name="milestones" rows="3" placeholder="Key project milestones..."></textarea>
                </div>
            </div>
        </div>

    </div>

    <!-- Right Panel -->
    <div class="col-lg-4">
        <div class="card shadow-sm mb-4">
            <div class="card-header bg-success text-white">
                <i class="bi bi-check-circle"></i> Summary
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-2">
                    <span>Status:</span>
                    <span class="badge bg-secondary">Pipeline</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Priority:</span>
                    <span class="badge bg-warning">Medium</span>
                </div>
                <hr>
                <div class="d-flex justify-content-between mb-2">
                    <span>Client:</span>
                    <span id="summaryCustomer" class="text-muted">Not selected</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Quotation:</span>
                    <span id="summaryQuotation" class="text-muted">Not selected</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Enquiry:</span>
                    <span id="summaryEnquiry" class="text-muted">Not selected</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Assigned To:</span>
                    <span id="summaryAssigned" class="text-muted">Not assigned</span>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>Work Order:</span>
                    <span id="summaryWorkOrder" class="text-muted">Auto-generated</span>
                </div>
            </div>
        </div>

        <!-- Save Button -->
        <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 Project
                    </button>
                    <a href="/projects" class="btn btn-secondary">
                        <i class="bi bi-x-circle"></i> Cancel
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>

</form>

<script>
// ==========================================================
// Generate Work Order Reference
// ==========================================================

function generateWorkOrder() {
    const initials = document.getElementById('userInitials').value;
    
    // Validate initials
    if (!initials || initials.trim().length < 2) {
        document.getElementById('workOrderRef').value = 'Please enter at least 2 characters';
        document.getElementById('summaryWorkOrder').textContent = 'Pending...';
        return;
    }
    
    const cleanInitials = initials.trim().toUpperCase();
    
    // Show loading state
    document.getElementById('workOrderRef').value = 'Generating...';
    
    // Get the next number from server
    fetch(`/projects/generate-work-order?initials=${encodeURIComponent(cleanInitials)}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            if (data && data.work_order_ref) {
                document.getElementById('workOrderRef').value = data.work_order_ref;
                document.getElementById('summaryWorkOrder').textContent = data.work_order_ref;
            } else {
                throw new Error('No work order reference returned');
            }
        })
        .catch(error => {
            console.error('Error generating work order:', error);
            // Fallback: generate locally
            const today = new Date();
            const day = String(today.getDate()).padStart(2, '0');
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const randomNum = String(Math.floor(Math.random() * 1000)).padStart(3, '0');
            const ref = `MEGCL/${day}/${month}/${cleanInitials}/${randomNum}`;
            document.getElementById('workOrderRef').value = ref;
            document.getElementById('summaryWorkOrder').textContent = ref;
        });
}

// Auto-generate when initials are entered
document.getElementById('userInitials').addEventListener('input', function() {
    const val = this.value.trim();
    if (val.length >= 2) {
        generateWorkOrder();
    } else {
        document.getElementById('workOrderRef').value = 'Waiting for initials...';
        document.getElementById('summaryWorkOrder').textContent = 'Pending...';
    }
});
    // ==========================================================
    // Auto-fill from BOQ selection
    // ==========================================================

    document.getElementById('boqSelect').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        
        const enquiryId = selectedOption.getAttribute('data-enquiry');
        const customerId = selectedOption.getAttribute('data-customer');
        const enquiryNumber = selectedOption.getAttribute('data-enquiry-number');
        const customerName = selectedOption.getAttribute('data-customer-name');
        const jobDescription = selectedOption.getAttribute('data-job-description');

        // Update Enquiry dropdown
        const enquirySelect = document.getElementById('enquirySelect');
        if (enquiryId) {
            for (let option of enquirySelect.options) {
                if (option.value == enquiryId) {
                    option.selected = true;
                    break;
                }
            }
        }

        // Update Customer dropdown
        const customerSelect = document.getElementById('customerSelect');
        if (customerId) {
            for (let option of customerSelect.options) {
                if (option.value == customerId) {
                    option.selected = true;
                    break;
                }
            }
        }

        // Update Job Description
        if (jobDescription) {
            document.getElementById('jobDescription').value = jobDescription;
        }

        // Update Summary
        document.getElementById('summaryCustomer').textContent = customerName || 'Not selected';
        document.getElementById('summaryQuotation').textContent = this.value ? this.text : 'Not selected';
        document.getElementById('summaryEnquiry').textContent = enquiryNumber || 'Not selected';
    });

    // Update assignment summary
    document.querySelector('[name="assigned_to"]').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        document.getElementById('summaryAssigned').textContent = selectedOption.text || 'Not assigned';
    });

    // Update customer summary on manual change
    document.getElementById('customerSelect').addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        document.getElementById('summaryCustomer').textContent = selectedOption.text || 'Not selected';
    });

    // Validate form before submit
    document.getElementById('projectForm').addEventListener('submit', function(e) {
        const customerSelect = document.getElementById('customerSelect');
        if (!customerSelect.value) {
            e.preventDefault();
            alert('Please select a customer.');
            customerSelect.focus();
        }
    });
</script>

{% endblock %}