{% extends "admin_layout.html" %}

{% block title %}{{ t('settings.general_settings') }} - {{ app_settings.title if app_settings else t('app.name','Survey Manager') }}{% endblock %}

{% block admin_content %}
<!-- Header -->
<div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-2">
                <i class="fas fa-cog me-2"></i>{{ t('settings.general_settings') }}
            </h1>
            <p class="text-muted mb-0">{{ t('settings.general_settings_desc') }}</p>
        </div>
    </div>

    <!-- Settings Form -->
    <div class="row">
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>{{ t('settings.system_information') }}
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST" id="settingsForm" enctype="multipart/form-data">
                        <!-- Title -->
                        <div class="mb-3">
                            <label for="title" class="form-label">
                                {{ t('settings.title') }} <span class="text-danger">*</span>
                            </label>
                            <input type="text"
                                   class="form-control"
                                   id="title"
                                   name="title"
                                   value="{{ settings.title if settings else 'Survey Manager' }}"
                                   required
                                   placeholder="{{ t('settings.title_placeholder') }}">
                            <div class="form-text">{{ t('settings.title_help') }}</div>
                        </div>

                        <!-- Logo Upload -->
                        <div class="mb-3">
                            <label for="logo" class="form-label">
                                {{ t('settings.logo') }}
                            </label>
                            <input type="file"
                                   class="form-control"
                                   id="logo"
                                   name="logo"
                                   accept="image/png, image/jpeg, image/jpg">
                            <div class="form-text">{{ t('settings.logo_help') }}</div>

                            {% if settings and settings.logo %}
                            <div class="mt-3">
                                <p class="mb-2 small text-muted">{{ t('settings.current_logo') }}:</p>
                                <img src="{{ url_for('static', filename=settings.logo) }}" alt="Logo" class="img-thumbnail" style="max-height: 100px;">
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" id="remove_logo" name="remove_logo" value="1">
                                    <label class="form-check-label text-danger" for="remove_logo">
                                        {{ t('settings.remove_logo') }}
                                    </label>
                                </div>
                            </div>
                            {% endif %}
                        </div>

                        <!-- Description -->
                        <div class="mb-3">
                            <label for="description" class="form-label">
                                {{ t('settings.description') }}
                            </label>
                            <textarea class="form-control"
                                      id="description"
                                      name="description"
                                      rows="4"
                                      placeholder="{{ t('settings.description_placeholder') }}">{{ settings.description if settings and settings.description else '' }}</textarea>
                            <div class="form-text">{{ t('settings.description_help') }}</div>
                        </div>

                        <!-- Tags -->
                        <div class="mb-3">
                            <label for="tags" class="form-label">
                                {{ t('settings.tags') }}
                            </label>
                            <input type="text"
                                   class="form-control"
                                   id="tags"
                                   name="tags"
                                   value="{{ settings.tags if settings and settings.tags else '' }}"
                                   placeholder="{{ t('settings.tags_placeholder') }}">
                            <div class="form-text">{{ t('settings.tags_help') }}</div>
                        </div>

                        <!-- Time Zone -->
                        <div class="mb-4">
                            <label for="time_zone" class="form-label">
                                {{ t('settings.time_zone') }} <span class="text-danger">*</span>
                            </label>
                            <select class="form-select" id="time_zone" name="time_zone" required>
                                {% set current_tz = settings.time_zone if settings else 'America/New_York' %}
                                {% for tz in timezones %}
                                <option value="{{ tz }}" {{ 'selected' if tz == current_tz else '' }}>
                                    {{ tz }}
                                </option>
                                {% endfor %}
                            </select>
                            <div class="form-text">{{ t('settings.time_zone_help') }}</div>
                        </div>

                        <!-- Buttons -->
                        <div class="d-flex justify-content-end gap-2">
                            <button type="button" class="btn btn-secondary" onclick="window.location.reload()">
                                <i class="fas fa-undo me-2"></i>{{ t('common.reset_form') }}
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>{{ t('settings.save_settings') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Info Panel -->
        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-question-circle me-2"></i>{{ t('settings.help') }}
                    </h5>
                </div>
                <div class="card-body">
                    <h6 class="fw-bold">{{ t('settings.what_are_settings') }}</h6>
                    <p class="small">{{ t('settings.settings_explanation') }}</p>

                    <hr>

                    <h6 class="fw-bold">{{ t('settings.tips_title') }}</h6>
                    <ul class="small">
                        <li>{{ t('settings.tip_title') }}</li>
                        <li>{{ t('settings.tip_logo') }}</li>
                        <li>{{ t('settings.tip_tags') }}</li>
                        <li>{{ t('settings.tip_timezone') }}</li>
                    </ul>

                    {% if settings and settings.updated_at %}
                    <hr>
                    <p class="small text-muted mb-0">
                        <i class="fas fa-clock me-1"></i>
                        {{ t('settings.last_updated') }}:
                        <br><strong>{{ settings.updated_at.strftime('%Y-%m-%d %H:%M:%S') }}</strong>
                    </p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

<script>
// Form validation
document.getElementById('settingsForm').addEventListener('submit', function(e) {
    const title = document.getElementById('title').value.trim();
    const timeZone = document.getElementById('time_zone').value;

    if (!title) {
        e.preventDefault();
        Swal.fire({
            title: '{{ t("messages.error") }}',
            text: '{{ t("settings.title_required") }}',
            icon: 'error'
        });
        return false;
    }

    if (!timeZone) {
        e.preventDefault();
        Swal.fire({
            title: '{{ t("messages.error") }}',
            text: '{{ t("settings.timezone_required") }}',
            icon: 'error'
        });
        return false;
    }
});
</script>
{% endblock %}