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

{% block content %}
<div class="container-fluid px-4">
    <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 active">Listas Globais</li>
    </ol>

    <div class="row">
        <div class="col-xl-3 col-md-6">
            <div class="card bg-dark text-white mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="small text-white-50">Países Cadastrados</div>
                            <div class="display-6">{{ countriesCount }}</div>
                        </div>
                        <i class="bi bi-globe fs-1 opacity-50"></i>
                    </div>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <span class="small text-white">Visualização Apenas</span>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-primary text-white mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="small text-white-50">Estados Cadastrados</div>
                            <div class="display-6">{{ statesCount }}</div>
                        </div>
                        <i class="bi bi-map fs-1 opacity-50"></i>
                    </div>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <span class="small text-white">Visualização Apenas</span>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-success text-white mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="small text-white-50">Cidades Cadastradas</div>
                            <div class="display-6">{{ citiesCount }}</div>
                        </div>
                        <i class="bi bi-geo-alt fs-1 opacity-50"></i>
                    </div>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <span class="small text-white">Visualização Apenas</span>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card bg-info text-white mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="small text-white-50">Atividades Cadastradas</div>
                            <div class="display-6">{{ activitiesCount }}</div>
                        </div>
                        <i class="bi bi-briefcase fs-1 opacity-50"></i>
                    </div>
                </div>
                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="small text-white stretched-link" href="{{ url('/admin/globallists/activities') }}">Gerenciar Atividades</a>
                    <div class="small text-white"><i class="bi bi-chevron-right"></i></div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-search me-1"></i>
            Visualizar Listas
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="select-country" class="form-label">Países</label>
                        <select id="select-country" class="form-select">
                            <option value="">Selecione um País</option>
                            {% for country in countries %}
                                <option value="{{ country.countries_id }}">{{ country.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="select-state" class="form-label">Estados</label>
                        <select id="select-state" class="form-select" disabled>
                            <option value="">Selecione um País primeiro</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="select-city" class="form-label">Cidades</label>
                        <select id="select-city" class="form-select" disabled>
                            <option value="">Selecione um Estado primeiro</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label for="select-activity" class="form-label">Atividades</label>
                        <select id="select-activity" class="form-select">
                            <option value="">Selecione uma Atividade</option>
                            {% for activity in activities %}
                                <option value="{{ activity.activities_id }}">{{ activity.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header">
            <i class="bi bi-info-circle me-1"></i>
            Informações sobre o Módulo de Listas
        </div>
        <div class="card-body">
            <p>Este módulo centraliza dados que são utilizados por múltiplos módulos do sistema, como o <strong>Guia Comercial</strong>.</p>
            <ul>
                <li><strong>Estados e Cidades:</strong> Importados automaticamente do IBGE/Correios.</li>
                <li><strong>Atividades:</strong> Lista global de ramos de atuação comercial, industrial e de serviços.</li>
            </ul>
        </div>
    </div>
</div>

<script>
 document.addEventListener('DOMContentLoaded', function() {
    const countrySelect = document.getElementById('select-country');
    const stateSelect = document.getElementById('select-state');
    const citySelect = document.getElementById('select-city');

    countrySelect.addEventListener('change', function() {
        const countryId = this.value;
        stateSelect.innerHTML = '<option value="">Carregando...</option>';
        stateSelect.disabled = true;
        citySelect.innerHTML = '<option value="">Selecione um Estado primeiro</option>';
        citySelect.disabled = true;

        if (!countryId) {
            stateSelect.innerHTML = '<option value="">Selecione um País primeiro</option>';
            return;
        }

        fetch(`{{ url('/api/globallists/states/') }}${countryId}`)
            .then(response => response.json())
            .then(states => {
                stateSelect.innerHTML = '<option value="">Selecione um Estado</option>';
                states.forEach(state => {
                    const option = document.createElement('option');
                    option.value = state.id;
                    option.textContent = state.name;
                    stateSelect.appendChild(option);
                });
                stateSelect.disabled = false;
            })
            .catch(error => {
                console.error('Erro ao carregar estados:', error);
                stateSelect.innerHTML = '<option value="">Erro ao carregar estados</option>';
            });
    });

    stateSelect.addEventListener('change', function() {
        const stateId = this.value;
        citySelect.innerHTML = '<option value="">Carregando...</option>';
        citySelect.disabled = true;

        if (!stateId) {
            citySelect.innerHTML = '<option value="">Selecione um Estado primeiro</option>';
            return;
        }

        fetch(`{{ url('/api/globallists/cities/') }}${stateId}`)
            .then(response => response.json())
            .then(cities => {
                citySelect.innerHTML = '<option value="">Selecione uma Cidade</option>';
                cities.forEach(city => {
                    const option = document.createElement('option');
                    option.value = city.id;
                    option.textContent = city.name;
                    citySelect.appendChild(option);
                });
                citySelect.disabled = false;
            })
            .catch(error => {
                console.error('Erro ao carregar cidades:', error);
                citySelect.innerHTML = '<option value="">Erro ao carregar cidades</option>';
            });
    });
});
</script>
{% endblock %}