{% extends "base.html" %}

{% block content %}

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

    <div>

        <h2>
            <i class="bi bi-envelope-plus-fill text-primary"></i>
            New Enquiry
        </h2>

        <p class="text-muted">
            Register a customer enquiry with attachments
        </p>

    </div>

    <a href="/enquiries" class="btn btn-secondary">

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

        Back

    </a>

</div>

<!-- ✅ Add enctype="multipart/form-data" for file upload -->
<form method="POST" action="/enquiries/new" enctype="multipart/form-data">

<div class="card shadow-sm">

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

<h5>General Information</h5>

</div>

<div class="card-body">

<div class="row">

<!-- ✅ UPDATED: Customer with Quick Create -->
<div class="col-md-6 mb-3">

    <label class="form-label">Customer *</label>

    <div class="input-group">

        <select class="form-select" id="customerSelect" name="customer_id" required>

            <option value="">Select existing customer...</option>

            {% for customer in customers %}

            <option value="{{ customer.id }}">{{ customer.company_name }}</option>

            {% endfor %}

            <option value="new">➕ Create New Customer</option>

        </select>

    </div>

    <small class="text-muted">
        Select existing customer or choose "Create New Customer"
    </small>

</div>

<!-- ✅ NEW: Quick Customer Creation Fields (hidden initially) -->
<div id="newCustomerFields" style="display:none;">

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

        <label class="form-label">New Company Name *</label>

        <input type="text" class="form-control" id="newCompanyName" name="new_company_name" placeholder="Enter company name">

    </div>

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

        <label class="form-label">Contact Person</label>

        <input type="text" class="form-control" id="newContactName" name="new_contact_name" placeholder="Contact person name">

    </div>

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

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

        <input type="email" class="form-control" id="newEmail" name="new_email" placeholder="Email address">

    </div>

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

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

        <input type="text" class="form-control" id="newTelephone" name="new_telephone" placeholder="Phone number">

    </div>

</div>

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

<label>Subject *</label>

<input type="text" class="form-control" name="subject" required>

</div>

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

<label>Enquiry Type</label>

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

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

    <option value="Electrical">Electrical</option>

    <option value="Mechanical">Mechanical</option>

    <option value="Civil">Civil</option>

    <option value="Solar">Solar</option>

    <option value="HVAC">HVAC</option>

    <option value="Water Reticulation">Water Reticulation</option>

    <option value="Borehole">Borehole</option>

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

    <option value="Supply Only">Supply Only</option>

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

</select>

</div>

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

<label>Source</label>

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

    <option value="Email">Email</option>

    <option value="Walk-in">Walk-in</option>

    <option value="Telephone">Telephone</option>

    <option value="WhatsApp">WhatsApp</option>

    <option value="Tender Portal">Tender Portal</option>

    <option value="Referral">Referral</option>

</select>

</div>

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

<label>Priority</label>

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

    <option value="Low">Low</option>

    <option value="Normal" selected>Normal</option>

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

    <option value="Urgent">Urgent</option>

</select>

</div>

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

<label>Date Received</label>

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

</div>

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

<label>Due Date</label>

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

</div>

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

<label>Received By</label>

<input type="text" class="form-control" name="received_by">

</div>

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

<label>Assigned To</label>

<input type="text" class="form-control" name="assigned_to">

</div>

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

<label>Description</label>

<textarea class="form-control" name="description" rows="4"></textarea>

</div>

</div>

</div>

</div>

<br>

<!-- Attachments Section -->
<div class="card shadow-sm">

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

        <h5><i class="bi bi-paperclip"></i> Attachments</h5>

    </div>

    <div class="card-body">

        <p class="text-muted">
            Upload customer emails, BOQs, drawings, specifications, photographs, spreadsheets, PDFs, Word documents or any supporting files.
        </p>

        <div class="mb-3">

            <input 
                type="file" 
                class="form-control" 
                id="documents" 
                name="documents" 
                multiple
                accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.jpeg,.png,.gif,.txt,.csv,.zip,.rar"
            >

            <small class="text-muted">
                Supported formats: PDF, Word, Excel, Images, Text, ZIP, RAR
            </small>

        </div>

        <div id="fileList" class="mt-3"></div>

    </div>

</div>

<br>

<button class="btn btn-success btn-lg">

<i class="bi bi-check-circle"></i>

Save Enquiry

</button>

</form>

<script>

// ==========================================================
// Toggle New Customer Fields
// ==========================================================

document.getElementById('customerSelect').addEventListener('change', function() {

    const newFields = document.getElementById('newCustomerFields');

    if (this.value === 'new') {

        newFields.style.display = 'block';

        // Make fields required when visible
        document.getElementById('newCompanyName').required = true;

    } else {

        newFields.style.display = 'none';

        document.getElementById('newCompanyName').required = false;

        // Clear values
        document.getElementById('newCompanyName').value = '';

        document.getElementById('newContactName').value = '';

        document.getElementById('newEmail').value = '';

        document.getElementById('newTelephone').value = '';

    }

});

// ==========================================================
// File List Preview
// ==========================================================

document.getElementById("documents").addEventListener("change", function () {

    let output = "";

    const fileList = document.getElementById("fileList");

    if (this.files.length === 0) {

        fileList.innerHTML = "";

        return;

    }

    output = `<div class="alert alert-info"><strong>${this.files.length} file(s) selected:</strong><ul class="mb-0 mt-2">`;

    for (let i = 0; i < this.files.length; i++) {

        const file = this.files[i];

        const sizeKB = (file.size / 1024).toFixed(1);

        output += `
            <li>
                <i class="bi bi-file-earmark-text"></i>
                ${file.name}
                <span class="text-muted">(${sizeKB} KB)</span>
            </li>
        `;

    }

    output += `</ul></div>`;

    fileList.innerHTML = output;

});

</script>

{% endblock %}