{{define "title"}}{{if .Enquiry.ID}}Edit{{else}}New{{end}} Enquiry - CMC Sales{{end}}

{{define "content"}}
<div class="columns">
    <div class="column is-8 is-offset-2">
        <div class="card">
            <header class="card-header">
                <p class="card-header-title">
                    {{if .Enquiry.ID}}
                        Edit Enquiry: {{.Enquiry.Title}}
                    {{else}}
                        New Enquiry
                    {{end}}
                </p>
            </header>
            <div class="card-content">
                <form 
                    {{if .Enquiry.ID}}
                        hx-put="/api/v1/enquiries/{{.Enquiry.ID}}"
                    {{else}}
                        hx-post="/api/v1/enquiries"
                    {{end}}
                    hx-headers='{"Content-Type": "application/json"}'
                    hx-target="#form-response">
                    
                    <!-- Basic Information -->
                    <div class="field">
                        <label class="label">Title/Enquiry Number</label>
                        <div class="control">
                            <input 
                                class="input" 
                                type="text" 
                                name="title" 
                                value="{{.Enquiry.Title}}"
                                placeholder="Auto-generated if left blank">
                        </div>
                    </div>

                    <div class="columns">
                        <div class="column">
                            <div class="field">
                                <label class="label">User (Sales Rep)</label>
                                <div class="control">
                                    <div class="select is-fullwidth">
                                        <select name="user_id" required>
                                            <option value="">Select User</option>
                                            {{range .Users}}
                                                <option value="{{.ID}}" {{if eq .ID $.Enquiry.UserID}}selected{{end}}>
                                                    {{.FirstName}} {{.LastName}}
                                                </option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="field">
                                <label class="label">Status</label>
                                <div class="control">
                                    <div class="select is-fullwidth">
                                        <select name="status_id" required>
                                            {{range .Statuses}}
                                                <option value="{{.ID}}" {{if eq .ID $.Enquiry.StatusID}}selected{{end}}>
                                                    {{.Name}}
                                                </option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Customer and Contact -->
                    <div class="columns">
                        <div class="column">
                            <div class="field">
                                <label class="label">Customer</label>
                                <div class="control">
                                    <div class="select is-fullwidth">
                                        <select name="customer_id" required>
                                            <option value="">Select Customer</option>
                                            {{range .Customers}}
                                                <option value="{{.ID}}" {{if eq .ID $.Enquiry.CustomerID}}selected{{end}}>
                                                    {{.Name}}
                                                </option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="field">
                                <label class="label">Contact</label>
                                <div class="control">
                                    <div class="select is-fullwidth">
                                        <select name="contact_user_id" required>
                                            <option value="">Select Contact</option>
                                            {{range .Contacts}}
                                                <option value="{{.ID}}" {{if eq .ID $.Enquiry.ContactUserID}}selected{{end}}>
                                                    {{.FirstName}} {{.LastName}}
                                                </option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Location -->
                    <div class="columns">
                        <div class="column">
                            <div class="field">
                                <label class="label">State</label>
                                <div class="control">
                                    <div class="select is-fullwidth">
                                        <select name="state_id" required>
                                            {{range .States}}
                                                <option value="{{.ID}}" {{if eq .ID $.Enquiry.StateID}}selected{{end}}>
                                                    {{.Name}}
                                                </option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="column">
                            <div class="field">
                                <label class="label">Country</label>
                                <div class="control">
                                    <div class="select is-fullwidth">
                                        <select name="country_id" required>
                                            {{range .Countries}}
                                                <option value="{{.ID}}" {{if eq .ID $.Enquiry.CountryID}}selected{{end}}>
                                                    {{.Name}}
                                                </option>
                                            {{end}}
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Principle -->
                    <div class="field">
                        <label class="label">Principle (Supplier)</label>
                        <div class="control">
                            <div class="select is-fullwidth">
                                <select name="principle_id" required>
                                    <option value="">Select Principle</option>
                                    {{range .Principles}}
                                        <option value="{{.ID}}" {{if eq .ID $.Enquiry.PrincipleID}}selected{{end}}>
                                            {{if .ShortName}}
                                                {{.ShortName}} - {{.Name}}
                                            {{else}}
                                                {{.Name}}
                                            {{end}}
                                        </option>
                                    {{end}}
                                </select>
                            </div>
                        </div>
                    </div>

                    <!-- Comments -->
                    <div class="field">
                        <label class="label">Comments</label>
                        <div class="control">
                            <textarea 
                                class="textarea" 
                                name="comments" 
                                rows="4"
                                placeholder="Enter enquiry details and comments...">{{.Enquiry.Comments}}</textarea>
                        </div>
                    </div>

                    <!-- Options -->
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input type="checkbox" name="gst" {{if .Enquiry.Gst}}checked{{end}}>
                                GST Applicable
                            </label>
                        </div>
                    </div>

                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input type="checkbox" name="posted" {{if .Enquiry.Posted}}checked{{end}}>
                                Posted
                            </label>
                        </div>
                    </div>

                    {{if not .Enquiry.ID}}
                    <div class="field">
                        <div class="control">
                            <label class="checkbox">
                                <input type="checkbox" name="send_enquiry_email" checked>
                                Send enquiry email to contact
                            </label>
                        </div>
                    </div>
                    {{end}}

                    <!-- Submit Buttons -->
                    <div class="field is-grouped">
                        <div class="control">
                            <button type="submit" class="button is-primary">
                                {{if .Enquiry.ID}}Update{{else}}Create{{end}} Enquiry
                            </button>
                        </div>
                        <div class="control">
                            <a href="/enquiries" class="button is-light">Cancel</a>
                        </div>
                    </div>

                    <!-- Response area -->
                    <div id="form-response"></div>
                </form>
            </div>
        </div>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
    // Handle form submission success
    document.addEventListener('htmx:afterSwap', function(evt) {
        if (evt.detail.target.id === 'form-response') {
            // Redirect to enquiry view on successful creation/update
            const response = evt.detail.xhr.response;
            if (evt.detail.xhr.status === 200 || evt.detail.xhr.status === 201) {
                try {
                    const enquiry = JSON.parse(response);
                    window.location.href = '/enquiries/' + enquiry.id;
                } catch (e) {
                    // If parsing fails, redirect to index
                    window.location.href = '/enquiries';
                }
            }
        }
    });

    // Customer selection triggers contact loading
    document.querySelector('select[name="customer_id"]').addEventListener('change', function(e) {
        const customerId = e.target.value;
        if (customerId) {
            // Load contacts for selected customer
            fetch(`/api/v1/customers/${customerId}/contacts`)
                .then(response => response.json())
                .then(contacts => {
                    const contactSelect = document.querySelector('select[name="contact_user_id"]');
                    contactSelect.innerHTML = '<option value="">Select Contact</option>';
                    contacts.forEach(contact => {
                        contactSelect.innerHTML += `<option value="${contact.id}">${contact.first_name} ${contact.last_name}</option>`;
                    });
                })
                .catch(err => console.error('Failed to load contacts:', err));
        }
    });
</script>
{{end}}