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

<div class="upload-container">
    <!-- Loading Overlay -->
    <div class="removal-overlay htmx-indicator">
        <div class="upload-overlay-content">
            <div class="overlay-spinner"></div>
            <h3>Removing Documents</h3>
            <p>Please wait while your documents are being removed...</p>
        </div>
    </div>

    <!-- Step 1: CSV Upload -->
    <div id="step1-removal" 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 id="step2-removal" class="content" style="display: none;">
        <h3 class="submenu-header">Step 2: Select Documents to Remove</h3>

        <div id="bulk-removal-section">
            <form id="bulk-remove-form" hx-post="/documents/remove/bulk" hx-target="#removal-results"
                hx-indicator=".removal-overlay">
                <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>
                    <select class="card-input" id="age-filter" name="age-filter">
                        <option value="0" selected>Any</option>
                        <option value="1">1 Day</option>
                        <option value="7">7 Days</option>
                        <option value="30">30 Days</option>
                        <option value="90">90 Days</option>
                        <option value="120">120 Days</option>
                        <option value="180">180 Days</option>
                        <option value="365">365 Days</option>
                    </select>
                </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>
            </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>

    <!-- Step 3: Results -->
    <div id="step3-removal" class="content" style="display: none;">
        <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>

    <!-- Restart Button (initially hidden) -->
    <div id="restart-section-removal" class="content" style="display: none;">
        <h3 class="submenu-header">Removal Complete</h3>
        <button type="button" class="btn-primary" hx-on:click="restartRemoval()">Start New Removal</button>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // 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;
                    }
                }

                // Show step 2 when job IDs are loaded
                document.getElementById('step2-removal').style.display = 'block';
            }
        });

        // Add event listeners for the removal overlay
        document.querySelectorAll('form').forEach(form => {
            form.addEventListener('htmx:beforeRequest', function (evt) {
                if (evt.detail.pathInfo.requestPath.includes('/documents/remove')) {
                    document.querySelector('.removal-overlay').style.display = 'flex';
                }
            });

            form.addEventListener('htmx:afterRequest', function (evt) {
                if (evt.detail.pathInfo.requestPath.includes('/documents/remove')) {
                    document.querySelector('.removal-overlay').style.display = 'none';

                    // If it's a removal action and successful, show step 3 and restart section
                    if (evt.detail.successful &&
                        (evt.detail.pathInfo.requestPath.includes('/documents/remove/bulk'))) {
                        document.getElementById('step3-removal').style.display = 'block';
                        document.getElementById('restart-section-removal').style.display = 'block';
                    }
                }
            });

            form.addEventListener('htmx:error', function (evt) {
                document.querySelector('.removal-overlay').style.display = 'none';
            });
        });
    });

    // Function to restart the removal process
    function restartRemoval() {
        // Hide all sections except step 1
        document.getElementById('step2-removal').style.display = 'none';
        document.getElementById('step3-removal').style.display = 'none';
        document.getElementById('restart-section-removal').style.display = 'none';

        // Clear results
        document.getElementById('removal-results').innerHTML = '';

        // Reset CSV preview if it exists
        const csvPreview = document.getElementById('csv-preview-removal');
        if (csvPreview) {
            csvPreview.style.display = 'none';
        }

        const csvPreviewContent = document.getElementById('csv-preview-content-removal');
        if (csvPreviewContent) {
            csvPreviewContent.innerHTML = '<p>No jobs loaded yet</p>';
        }

        // Reset job IDs container
        document.getElementById('job-ids-removal-container').innerHTML = '';

        // Show step 1
        document.getElementById('step1-removal').style.display = 'block';

        // Reset any file inputs
        const fileInput = document.getElementById('csv-file-removal');
        if (fileInput) {
            fileInput.value = '';
        }

        // Reset form
        document.getElementById('bulk-remove-form').reset();
    }
</script>
{{end}}