{# admin/setting/index.html.twig #}
{% import "_modules/bsmacros.html.twig" as bs %}
{% extends "baseadmin.html.twig" %}

{% block title %}{{ parent() }} - Settings Management{% endblock %}

{% block breadcrumb %}
  {{ parent() }}
  <li class="breadcrumb-item active" aria-current="page">Settings</li>
{% endblock %}

{% block content %}
    {% for label, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ label }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endfor %}

    <div class="card shadow-sm">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div class="fs-4">
              Application Settings
            </div>
            <div>
              <a href="{{ path('admin.settings.new') }}" class="btn btn-primary">
                <i class="fas fa-plus-circle me-1"></i> Add New Setting
              </a>
            </div>
        </div>
        <div class="card-body">
            {% if settings|length > 0 %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>Key</th>
                                <th>Value</th>
                                <th>Type</th>
                                <th>Description</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for setting in settings %}
                                <tr>
                                    <td><code class="text-reset">{{ setting.key }}</code></td>
                                    <td>
                                        <code class="text-reset">
                                        {% if setting.type == 'boolean' %}
                                            <span class="badge bg-{{ setting.value ? 'success' : 'danger' }}">
                                                {{ setting.value ? 'True' : 'False' }}
                                            </span>
                                        {% elseif setting.type == 'json' %}
                                            <span class="badge bg-info">JSON</span>
                                        {% else %}
                                            {{ setting.value|length > 25 ? setting.value|slice(0, 25) ~ '...' : setting.value }}
                                        {% endif %}
                                        </code>
                                    </td>
                                    <td><span class="badge bg-secondary">{{ setting.type }}</span></td>
                                    <td><small>{{ setting.description }}<small></td>
                                    <td class="text-end">
                                        <a href="{{ path('admin.settings.edit', {'id': setting.id}) }}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-edit"></i> Edit
                                        </a>
                                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteModal{{ setting.id }}">
                                            <i class="fas fa-trash"></i> Delete
                                        </button>
                                        
                                        <!-- Delete Modal -->
                                        <div class="modal fade" id="deleteModal{{ setting.id }}" tabindex="-1" aria-labelledby="deleteModalLabel{{ setting.id }}" aria-hidden="true">
                                            <div class="modal-dialog">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h5 class="modal-title" id="deleteModalLabel{{ setting.id }}">Confirm Deletion</h5>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body text-start">
                                                        Are you sure you want to delete the setting <strong>{{ setting.key }}</strong>?
                                                    </div>
                                                    <div class="modal-footer">
                                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                                                        <form method="post" action="{{ path('admin.settings.delete', {'id': setting.id}) }}" style="display: inline-block;">
                                                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ setting.id) }}">
                                                            <button type="submit" class="btn btn-danger">Delete</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="alert alert-info mb-0">
                    <i class="fas fa-info-circle me-2"></i> No settings found. Click "Add New Setting" to create one.
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Any additional JavaScript for the settings page
    });
</script>
{% endblock %}