{% extends "layouts/dashboard.twig" %}

{% block content %}
<div class="container-fluid px-4">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="mt-4">{{ title }}</h1>
            <ol class="breadcrumb mb-4">
                <li class="breadcrumb-item"><a href="{{ url('/admin') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ url('/admin/globallists') }}">Listas Globais</a></li>
                <li class="breadcrumb-item active">Atividades</li>
            </ol>
        </div>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#activityModal" onclick="clearForm()">
            <i class="bi bi-plus-lg me-1"></i> Nova Atividade
        </button>
    </div>

    <div class="card mb-4">
        <div class="card-body">
            <table class="table table-striped table-hover" id="activitiesTable">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nome</th>
                        <th>Tipo</th>
                        <th>Slug</th>
                        <th width="150">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    {% for activity in activities %}
                    <tr>
                        <td>{{ activity.activities_id }}</td>
                        <td>{{ activity.name }}</td>
                        <td>
                            {% if activity.activities_type == 'commercial' %}
                                <span class="badge bg-primary">Comercial</span>
                            {% elseif activity.activities_type == 'service' %}
                                <span class="badge bg-success">Serviço</span>
                            {% elseif activity.activities_type == 'industrial' %}
                                <span class="badge bg-warning text-dark">Industrial</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ activity.activities_type }}</span>
                            {% endif %}
                        </td>
                        <td><code>{{ activity.activities_slug }}</code></td>
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-primary" 
                                    onclick="editActivity({{ activity|json_encode }})">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <a href="{{ url('/admin/globallists/activities/delete/' ~ activity.activities_id) }}" 
                               class="btn btn-sm btn-outline-danger" 
                               onclick="return confirm('Tem certeza que deseja excluir esta atividade?')">
                                <i class="bi bi-trash"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="activityModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ url('/admin/globallists/activities/save') }}" method="POST" class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Nova Atividade</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" name="activities_id" id="activities_id">
                
                <div class="mb-3">
                    <label class="form-label">Nome da Atividade</label>
                    <input type="text" name="activities_name" id="activities_name" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label class="form-label">Tipo</label>
                    <select name="activities_type" id="activities_type" class="form-select" required>
                        <option value="commercial">Comercial</option>
                        <option value="service">Serviço</option>
                        <option value="industrial">Industrial</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-primary">Salvar</button>
            </div>
        </form>
    </div>
</div>

<script>
function clearForm() {
    document.getElementById('activities_id').value = '';
    document.getElementById('activities_name').value = '';
    document.getElementById('activities_type').value = 'commercial';
    document.getElementById('modalTitle').innerText = 'Nova Atividade';
}

function editActivity(activity) {
    document.getElementById('activities_id').value = activity.activities_id;
    
    // Se for um objeto (JSON), tenta pegar o locale atual ou pt_BR
    var name = activity.activities_name;
    if (typeof name === 'object' && name !== null) {
        // Tenta pegar o locale atual (passado do PHP via Twig) ou fallback
        var currentLocale = '{{ current_locale }}'; 
        name = name[currentLocale] || name['pt_BR'] || Object.values(name)[0];
    }
    
    document.getElementById('activities_name').value = name;
    document.getElementById('activities_type').value = activity.activities_type;
    document.getElementById('modalTitle').innerText = 'Editar Atividade';
    
    var modal = new bootstrap.Modal(document.getElementById('activityModal'));
    modal.show();
}
</script>
{% endblock %}