{{define "document_remove"}}
<h2>Document Removal</h2>

<div class="upload-container">
    <!-- Step 1: CSV Upload -->
    <div class="content">
        <h3 class="submenu-header">Step 1: Upload CSV file with Job IDs</h3>
        {{template "document_remove_csv" .}}
    </div>

    <!-- Step 2: Document Selection -->
    <div class="content">
        <h3 class="submenu-header">Step 2: Select Documents to Remove</h3>

        <div class="tab-buttons">
            <button id="individual-tab-btn" class="tab-button active">Individual Selection</button>
            <button id="bulk-tab-btn" class="tab-button">Bulk Removal</button>
        </div>

        <div id="individual-selection-tab">
            {{template "document_remove_form" .}}
        </div>

        <div id="bulk-removal-tab" style="display: none;">
            <form id="bulk-removal-form" hx-post="/documents/remove/bulk" hx-target="#removal-results"
                hx-indicator="#bulk-loading-indicator">
                <div class="form-group">
                    <label>Document Types to Remove:</label>
                    <div class="checkbox-group">
                        <div class="checkbox-item">
                            <input type="checkbox" id="type-1" name="documentTypes" value="1">
                            <label for="type-1">Job Paperwork</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="type-2" name="documentTypes" value="2">
                            <label for="type-2">Job Vendor Bill</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="type-7" name="documentTypes" value="7">
                            <label for="type-7">Generic Attachment</label>
                        </div>
                        <div class="checkbox-item">
                            <input type="checkbox" id="type-14" name="documentTypes" value="14">
                            <label for="type-14">Job Invoice</label>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="filename-patterns">Filename Patterns (comma-separated, use * as wildcard):</label>
                    <input type="text" id="filename-patterns" name="filenamePatterns" class="card-input"
                        placeholder="e.g. invoice*.pdf, report*.docx">
                </div>

                <div class="form-group">
                    <label for="age-filter">Remove Files Older Than (days):</label>
                    <input type="number" id="age-filter" name="ageFilter" class="card-input" min="0">
                </div>

                <input type="hidden" id="bulk-job-ids" name="jobIDs">

                <div class="form-actions">
                    <button type="submit" class="warning-button" id="bulk-remove-btn" disabled>
                        Remove All Matching Documents
                    </button>

                    <div id="bulk-loading-indicator" class="htmx-indicator" style="display: none;">
                        <span>Processing Document Removal...</span>
                        <div class="loading-indicator"></div>
                    </div>
                </div>
            </form>
        </div>

        <!-- Job IDs container moved inside the form for better structure -->
        <div id="job-ids-removal-container" style="display: none;">
            <!-- Hidden input placeholder for job IDs -->
        </div>

        <div id="job-results" class="job-selection">
            <!-- Jobs and document selection will appear here -->
        </div>
    </div>

    <!-- Step 3: Results -->
    <div class="content">
        <h3 class="submenu-header">Step 3: Removal Results</h3>
        <div id="removal-results" class="upload-results">
            <!-- Results will appear here after removing documents -->
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Tab switching
        const individualTabBtn = document.getElementById('individual-tab-btn');
        const bulkTabBtn = document.getElementById('bulk-tab-btn');
        const individualTab = document.getElementById('individual-selection-tab');
        const bulkTab = document.getElementById('bulk-removal-tab');

        individualTabBtn.addEventListener('click', function () {
            individualTabBtn.classList.add('active');
            bulkTabBtn.classList.remove('active');
            individualTab.style.display = 'block';
            bulkTab.style.display = 'none';
        });

        bulkTabBtn.addEventListener('click', function () {
            bulkTabBtn.classList.add('active');
            individualTabBtn.classList.remove('active');
            bulkTab.style.display = 'block';
            individualTab.style.display = 'none';
        });

        // Sync job IDs between forms
        htmx.on('#job-ids-removal-container', 'htmx:afterSwap', function () {
            // Get jobIDs from the container
            const hiddenInput = document.querySelector('#job-ids-removal-container input[name="jobIDs"]');
            if (hiddenInput) {
                const jobIds = hiddenInput.value;

                // Update bulk form hidden input
                const bulkJobIds = document.getElementById('bulk-job-ids');
                if (bulkJobIds) {
                    bulkJobIds.value = jobIds;

                    // Enable bulk remove button if we have job IDs
                    const bulkRemoveBtn = document.getElementById('bulk-remove-btn');
                    if (bulkRemoveBtn) {
                        bulkRemoveBtn.disabled = !jobIds;
                    }
                }
            }
        });
    });
</script>
{{end}}