{{define "title"}}Enquiries - CMC Sales{{end}}

{{define "head"}}
<style>
    /* Status-based row coloring matching CakePHP template */
    .jobwon { background-color: #ffff99 !important; }
    .joblost { background-color: #ff9999 !important; }
    .information { background-color: #99ccff !important; }
    .informationsent { background-color: #99ffcc !important; }
    .quoted { background-color: #ccccff !important; }
    .requestforquote { background-color: #ffcccc !important; }
    .posted { font-weight: bold; }
    .notposted { font-style: italic; color: #666; }
    
    .enquiry-table {
        font-size: 0.875rem;
    }
    
    .enquiry-table td {
        padding: 0.5rem 0.25rem;
        vertical-align: middle;
    }
    
    .archived-row {
        opacity: 0.6;
    }
    
    .status-dropdown {
        min-width: 120px;
    }
</style>
{{end}}

{{define "content"}}
<div class="level">
    <div class="level-left">
        <div class="level-item">
            <h1 class="title">Enquiries</h1>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <a href="/enquiries/new" class="button is-primary">
                <span class="icon">
                    <i class="fas fa-plus"></i>
                </span>
                <span>New Enquiry</span>
            </a>
        </div>
    </div>
</div>

<!-- Search Box -->
<div class="box">
    <div class="field has-addons">
        <div class="control is-expanded">
            <input 
                class="input" 
                type="text" 
                placeholder="Search enquiries, customers, or contacts..."
                hx-get="/enquiries/search"
                hx-trigger="keyup changed delay:300ms"
                hx-target="#enquiry-table"
                hx-include="[name='page']"
                name="search">
        </div>
        <div class="control">
            <button class="button is-info" type="button">Search</button>
        </div>
    </div>
</div>

<!-- Deleted Enquiries Toggle -->
<div class="box">
    <div class="field is-grouped">
        <div class="control">
            <label class="label">Archived Enquiries:</label>
        </div>
        <div class="control">
            <button 
                id="show-archived" 
                class="button is-small"
                hx-get="/enquiries?archived=true"
                hx-target="#enquiry-table">
                Show
            </button>
        </div>
        <div class="control">
            <button 
                id="hide-archived" 
                class="button is-small"
                hx-get="/enquiries"
                hx-target="#enquiry-table">
                Hide
            </button>
        </div>
    </div>
</div>

<!-- Pagination Info -->
<div class="content">
    <p>
        Page {{.Page}} of pages, showing {{len .Enquiries}} Enquiries
    </p>
</div>

<!-- Pagination Top -->
<nav class="pagination is-centered" role="navigation">
    {{if gt .Page 1}}
        <a class="pagination-previous" 
           hx-get="/enquiries?page={{.PrevPage}}"
           hx-target="#enquiry-table">Previous</a>
    {{else}}
        <a class="pagination-previous" disabled>Previous</a>
    {{end}}
    
    {{if .HasMore}}
        <a class="pagination-next"
           hx-get="/enquiries?page={{.NextPage}}"
           hx-target="#enquiry-table">Next page</a>
    {{else}}
        <a class="pagination-next" disabled>Next page</a>
    {{end}}
</nav>

<!-- Enquiry Table -->
<div id="enquiry-table">
    {{template "enquiry-table" .}}
</div>

<!-- Pagination Bottom -->
<nav class="pagination is-centered" role="navigation">
    {{if gt .Page 1}}
        <a class="pagination-previous" 
           hx-get="/enquiries?page={{.PrevPage}}"
           hx-target="#enquiry-table">Previous</a>
    {{else}}
        <a class="pagination-previous" disabled>Previous</a>
    {{end}}
    
    {{if .HasMore}}
        <a class="pagination-next"
           hx-get="/enquiries?page={{.NextPage}}"
           hx-target="#enquiry-table">Next page</a>
    {{else}}
        <a class="pagination-next" disabled>Next page</a>
    {{end}}
</nav>
{{end}}

{{define "scripts"}}
<script>
    // Handle status updates via HTMX
    document.addEventListener('htmx:afterSwap', function(evt) {
        // Re-initialize any JavaScript needed after HTMX updates
        console.log('HTMX content updated');
    });
</script>
{{end}}