@extends('layouts.app')

@section('title', 'Gestión de Tablas del Sistema')

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-gray-800">
                <i class="fas fa-database text-primary me-2"></i>Gestión de Tablas del Sistema
            </h1>
            <p class="text-muted mb-0">Administre y modifique los datos de las tablas de la base de datos</p>
        </div>
        <div>
            <span class="badge bg-primary fs-6">{{ count($tables) }} tablas disponibles</span>
        </div>
    </div>

    <!-- Buscador -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="input-group">
                <span class="input-group-text bg-white">
                    <i class="fas fa-search text-muted"></i>
                </span>
                <input type="text" class="form-control" id="tableSearch" placeholder="Buscar tabla por nombre...">
            </div>
        </div>
        <div class="col-md-6 text-end">
            <button class="btn btn-outline-secondary" onclick="document.getElementById('tableSearch').value = ''; filterTables();">
                <i class="fas fa-redo"></i> Limpiar
            </button>
        </div>
    </div>

    <!-- Lista de Tablas -->
    <div class="row" id="tablesContainer">
        @foreach($tables as $table)
            <div class="col-xl-3 col-lg-4 col-md-6 mb-4 table-card" data-table-name="{{ strtolower($table['name']) }}">
                <div class="card h-100 shadow-sm border-0 hover-shadow">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div class="flex-grow-1">
                                <h5 class="card-title mb-1">
                                    <i class="fas fa-table text-primary me-2"></i>
                                    <span class="table-name">{{ $table['name'] }}</span>
                                </h5>
                                <small class="text-muted">Tabla del sistema</small>
                            </div>
                            <div class="dropdown">
                                <button class="btn btn-sm btn-link text-muted" type="button" data-bs-toggle="dropdown">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    <li>
                                        <a class="dropdown-item" href="{{ route('admin.config.tablas.show', $table['name']) }}">
                                            <i class="fas fa-eye me-2"></i> Ver registros
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="d-flex align-items-center justify-content-between">
                            <div>
                                <span class="badge bg-info-subtle text-info fs-6">
                                    <i class="fas fa-list me-1"></i>
                                    {{ number_format($table['count']) }} registros
                                </span>
                            </div>
                            <a href="{{ route('admin.config.tablas.show', $table['name']) }}" 
                               class="btn btn-primary btn-sm">
                                <i class="fas fa-arrow-right me-1"></i> Abrir
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    @if(count($tables) === 0)
        <div class="text-center py-5">
            <i class="fas fa-database fa-3x text-muted mb-3"></i>
            <p class="text-muted">No se encontraron tablas disponibles.</p>
        </div>
    @endif

    <!-- Sección de Carga Automática de Países -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-gradient-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-globe-americas me-2"></i>Cargar Datos Automáticos por País
                    </h5>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-4">
                        <i class="fas fa-info-circle me-2"></i>
                        Seleccione un país para cargar automáticamente sus tipos de documento, estados y ciudades en las tablas correspondientes.
                    </p>
                    <div class="row g-3">
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <button type="button" class="btn btn-outline-danger w-100 load-country-btn h-100" 
                                    data-country="VE">
                                <i class="fas fa-flag me-2"></i>Venezuela
                            </button>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <button type="button" class="btn btn-outline-warning w-100 load-country-btn h-100" 
                                    data-country="CO">
                                <i class="fas fa-flag me-2"></i>Colombia
                            </button>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <button type="button" class="btn btn-outline-info w-100 load-country-btn h-100" 
                                    data-country="PA">
                                <i class="fas fa-flag me-2"></i>Panamá
                            </button>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <button type="button" class="btn btn-outline-primary w-100 load-country-btn h-100" 
                                    data-country="CL">
                                <i class="fas fa-flag me-2"></i>Chile
                            </button>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <button type="button" class="btn btn-outline-success w-100 load-country-btn h-100" 
                                    data-country="ES">
                                <i class="fas fa-flag me-2"></i>España
                            </button>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-6">
                            <button type="button" class="btn btn-outline-secondary w-100 load-country-btn h-100" 
                                    data-country="MX">
                                <i class="fas fa-flag me-2"></i>México
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
.hover-shadow {
    transition: all 0.3s ease;
    cursor: pointer;
}

.hover-shadow:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.table-card {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bg-info-subtle {
    background-color: #d1ecf1;
}
</style>
@endpush

@push('scripts')
<script>
// Búsqueda de tablas
document.getElementById('tableSearch').addEventListener('input', filterTables);

function filterTables() {
    const searchTerm = document.getElementById('tableSearch').value.toLowerCase();
    const cards = document.querySelectorAll('.table-card');
    
    cards.forEach(card => {
        const tableName = card.getAttribute('data-table-name');
        if (tableName.includes(searchTerm)) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
}

// Cargar datos automáticos de países
document.querySelectorAll('.load-country-btn').forEach(button => {
    button.addEventListener('click', function() {
        const countryCode = this.dataset.country;
        const buttonText = this.innerHTML;
        
        this.disabled = true;
        this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Cargando...';

        fetch('{{ route("admin.config.tablas.load-country-data") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({
                country_code: countryCode
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert(data.message + '\n\nEstados creados: ' + data.data.estados_creados + 
                      '\nCiudades creadas: ' + data.data.ciudades_creadas);
                location.reload();
            } else {
                alert('Error: ' + data.message);
                this.disabled = false;
                this.innerHTML = buttonText;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al cargar los datos del país');
            this.disabled = false;
            this.innerHTML = buttonText;
        });
    });
});
</script>
@endpush
@endsection