{% extends "base.html" %}

{% block title %}Fields - {{ process.process_name }} - ScanLook{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="mode-selector">
        <a href="{{ url_for('cons_sheets.process_detail', process_id=process.id) }}" class="btn btn-secondary btn-sm">
            <i class="fa-solid fa-arrow-left"></i> Back to {{ process.process_name }}
        </a>
    </div>

    <div class="dashboard-header">
        <div class="header-left">
            <h1 class="page-title">Database Fields</h1>
            <p class="page-subtitle">{{ process.process_name }}</p>
        </div>
    </div>

    <!-- Header Fields Section -->
    <div class="fields-section">
        <div class="section-header">
            <h2 class="section-title">Header Fields</h2>
            <a href="{{ url_for('cons_sheets.add_field', process_id=process.id, table_type='header') }}" class="btn btn-primary btn-sm">
                <span class="btn-icon">+</span> Add Field
            </a>
        </div>
        
        {% if header_fields %}
        <div class="fields-table-wrapper">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Field Name</th>
                        <th>Label</th>
                        <th>Type</th>
                        <th>Required</th>
                        <th>Excel Cell</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for field in header_fields %}
                    <tr>
                        <td><code>{{ field.field_name }}</code></td>
                        <td>{{ field.field_label }}</td>
                        <td>{{ field.field_type }}</td>
                        <td>{{ '✓' if field.is_required else '—' }}</td>
                        <td>{{ field.excel_cell or '—' }}</td>
                        <td>
                            <a href="{{ url_for('cons_sheets.edit_field', process_id=process.id, field_id=field.id) }}" class="btn btn-secondary btn-sm">Edit</a>
                            <button onclick="confirmDelete(this)" 
                                data-id="{{ field.id }}" 
                                data-label="{{ field.field_label }}" 
                                class="btn btn-sm" 
                                style="background: var(--color-danger); color: white;">
                            Delete
                        </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state-small">
            <p>No header fields defined yet.</p>
        </div>
        {% endif %}
    </div>

    <!-- Detail Fields Section -->
    <div class="fields-section">
        <div class="section-header">
            <h2 class="section-title">Detail Fields</h2>
            <a href="{{ url_for('cons_sheets.add_field', process_id=process.id, table_type='detail') }}" class="btn btn-primary btn-sm">
                <span class="btn-icon">+</span> Add Field
            </a>
        </div>
        
        {% if detail_fields %}
        <div class="fields-table-wrapper">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>Field Name</th>
                        <th>Label</th>
                        <th>Type</th>
                        <th>Required</th>
                        <th>Excel Column</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for field in detail_fields %}
                    <tr>
                        <td><code>{{ field.field_name }}</code></td>
                        <td>{{ field.field_label }}</td>
                        <td>{{ field.field_type }}</td>
                        <td>{{ '✓' if field.is_required else '—' }}</td>
                        <td>{{ field.excel_cell or '—' }}</td>
                        <td>
                            <a href="{{ url_for('cons_sheets.edit_field', process_id=process.id, field_id=field.id) }}" class="btn btn-secondary btn-sm">Edit</a>
                            <button onclick="confirmDelete(this)" 
                                    data-id="{{ field.id }}" 
                                    data-label="{{ field.field_label }}" 
                                    class="btn btn-sm" 
                                    style="background: var(--color-danger); color: white;">
                                Delete
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="empty-state-small">
            <p>No detail fields defined yet.</p>
        </div>
        {% endif %}
    </div>
</div>

<style>
.fields-section {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.fields-table-wrapper {
    overflow-x: auto;
}

.empty-state-small {
    text-align: center;
    padding: var(--space-xl);
    color: var(--color-text-muted);
}
</style>

<script>
function confirmDelete(btn) {
    // Read values from data attributes
    const fieldId = btn.dataset.id;
    const fieldLabel = btn.dataset.label;

    if (confirm('Delete field "' + fieldLabel + '"?\n\nThis will soft-delete the field (data preserved but hidden).')) {
        fetch('{{ url_for("cons_sheets.delete_field", process_id=process.id, field_id=0) }}'.replace('0', fieldId), {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        });
    }
}
</script>
{% endblock %}