@extends('layouts.app')

@section('title', 'Proyectos')
@section('header', 'Proyectos')

@section('content')

<div class="card">
    <div class="card-body">

        {{-- Header con buscador y botones --}}
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="mb-0 fw-semibold">Explorar Proyectos</h5>
            
            <div class="d-flex gap-2">
                {{-- Botón para ir a vista tabla - usando btn-outline-dark como en users --}}
                <a href="{{ route('projects.index') }}" class="btn btn-outline-dark btn-sm" title="Vista tabla">
                    <i class="fas fa-table me-1"></i>
                    Vista Tabla
                </a>
                
                {{-- Botón para refrescar datos - usando btn-outline-carza (color institucional) --}}
                <button type="button" class="btn btn-outline-carza btn-sm" onclick="refreshData()" title="Actualizar datos">
                    <i class="fas fa-sync-alt me-1"></i>
                    Actualizar
                </button>
            </div>
        </div>

        {{-- Buscador --}}
        <div class="row mb-4">
            <div class="col-md-6">
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0">
                        <i class="fas fa-search text-muted"></i>
                    </span>
                    <input type="text" 
                           id="searchInput" 
                           class="form-control border-start-0" 
                           placeholder="Buscar por nombre de proyecto..."
                           autocomplete="off">
                </div>
            </div>
            <div class="col-md-6 text-end">
                <span class="text-muted" id="resultsCount"></span>
            </div>
        </div>

        {{-- Loader --}}
        <div id="loader" class="text-center py-5">
            <div class="spinner-border carza-spinner"></div>
            <p class="mt-3 text-muted">Cargando proyectos...</p>
        </div>

        {{-- Contenedor de mensajes --}}
        <div id="errorContainer"></div>

        {{-- Grid de cards --}}
        <div class="row g-4" id="projectsGrid">
            {{-- Las cards se cargarán aquí vía JavaScript --}}
        </div>

    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    let projectsData = [];
    
    // Cargar datos
    loadProjects();
    
    // Buscador en tiempo real
    $('#searchInput').on('keyup', function() {
        const searchTerm = $(this).val().toLowerCase();
        filterProjects(searchTerm);
    });

    function loadProjects() {
        $('#loader').show();
        $('#projectsGrid').empty();
        $('#errorContainer').empty();

        $.ajax({
            url: '{{ route("projects.cards-data") }}',
            type: 'GET',
            success: function(response) {
                $('#loader').hide();
                
                if (!response.success) {
                    showError(response.message || 'Error al cargar proyectos');
                    return;
                }

                if (!response.data || !response.data.length) {
                    showWarning('No hay proyectos disponibles');
                    return;
                }

                projectsData = response.data;
                renderProjects(projectsData);
                
                // Mostrar metadatos de caché
                if (response.metadata?.cached) {
                    console.log('Datos cargados desde caché');
                }
            },
            error: function(xhr) {
                $('#loader').hide();
                let message = 'Error al cargar proyectos';
                if (xhr.responseJSON?.message) {
                    message = xhr.responseJSON.message;
                }
                showError(message, true);
            }
        });
    }

    function renderProjects(projects) {
        let html = '';
        
        projects.forEach(project => {
            // Formatear precio más bajo
            let priceHtml = '';
            if (project.precio_mas_bajo) {
                priceHtml = `
                    <div class="price-tag">
                        <i class="fas fa-tag"></i>
                        Desde ${formatCurrency(project.precio_mas_bajo)}
                    </div>
                `;
            } else {
                priceHtml = `
                    <div class="price-tag" style="background: #f8f9fa; color: #6c757d;">
                        <i class="fas fa-minus-circle"></i>
                        Sin precio disponible
                    </div>
                `;
            }

            // Tipos de unidades con contadores completos
            let unitTypesHtml = '';
            project.unit_types.forEach(type => {
                // Calcular porcentaje de disponibilidad
                const disponibilidad = type.total > 0 ? Math.round((type.disponibles / type.total) * 100) : 0;
                
                unitTypesHtml += `
                    <span class="unit-type-badge" 
                        onclick="window.location.href='/inventories/units-by-project?unit_id=${type.id}&project_id=${project.id}&project_name=${encodeURIComponent(project.name)}&unit_description=${encodeURIComponent(type.description)}'"
                        title="${type.disponibles} disponibles, ${type.vendidos} vendidos de ${type.total} totales">
                        ${type.description}
                        <span class="count ${type.disponibles > 0 ? 'has-available' : ''}">
                            ${type.disponibles}/${type.total}
                        </span>
                    </span>
                `;
            });

            html += `
                <div class="col-md-6 col-xl-3">
                    <div class="project-card">
                        <div class="project-image">
                            <img src="${project.image}" alt="${project.name}">
                            <div class="overlay"></div>
                        </div>
                        <div class="project-content">
                            <h3 class="project-title">${project.name}</h3>
                            
                            ${priceHtml}
                            
                            <div class="stats-grid">
                                <div class="stat-item">
                                    <div class="stat-value">${project.total_unidades}</div>
                                    <div class="stat-label">Total</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value" style="color: #28a745;">${project.disponibles}</div>
                                    <div class="stat-label">Disponibles</div>
                                </div>
                                <div class="stat-item">
                                    <div class="stat-value" style="color: #dc3545;">${project.vendidos}</div>
                                    <div class="stat-label">Vendidos</div>
                                </div>
                            </div>
                            
                            <div class="unit-types">
                                ${unitTypesHtml}
                            </div>
                            
                            <a href="/projects/${project.id}/manage" class="view-details-btn">
                                <i class="fas fa-cog"></i>
                                Ver detalles
                            </a>
                        </div>
                    </div>
                </div>
            `;
        });

        $('#projectsGrid').html(html);
        updateResultsCount(projects.length);
    }

    function updateResultsCount(count) {
        $('#resultsCount').text(`Mostrando ${count} proyecto${count !== 1 ? 's' : ''}`);
    }

    function formatCurrency(value) {
        return new Intl.NumberFormat('es-MX', {
            style: 'currency',
            currency: 'MXN',
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }).format(value);
    }

    function filterProjects(searchTerm) {
        if (!searchTerm) {
            renderProjects(projectsData);
            return;
        }

        const filtered = projectsData.filter(project => 
            project.name.toLowerCase().includes(searchTerm)
        );

        if (filtered.length === 0) {
            $('#projectsGrid').html(`
                <div class="col-12">
                    <div class="text-center py-5">
                        <i class="fas fa-search fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No se encontraron proyectos</h5>
                        <p class="text-muted">Intenta con otros términos de búsqueda</p>
                    </div>
                </div>
            `);
        } else {
            renderProjects(filtered);
        }
        
        updateResultsCount(filtered.length);
    }

    function updateResultsCount(count) {
        $('#resultsCount').text(`Mostrando ${count} proyecto${count !== 1 ? 's' : ''}`);
    }

    function formatCurrency(value) {
        return new Intl.NumberFormat('es-MX', {
            style: 'currency',
            currency: 'MXN',
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }).format(value);
    }

    function showError(message, showRetry = false) {
        let retryButton = showRetry ? 
            `<button class="btn btn-outline-carza btn-sm ms-3" onclick="location.reload()">
                <i class="fas fa-redo"></i> Reintentar
            </button>` : '';
        
        $('#errorContainer').html(`
            <div class="alert alert-carza-danger alert-dismissible fade show" role="alert">
                <strong><i class="fas fa-exclamation-triangle"></i> Error:</strong> ${message}
                ${retryButton}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
    }

    function showWarning(message) {
        $('#errorContainer').html(`
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                <strong><i class="fas fa-info-circle"></i> Información:</strong> ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
    }

    // Funciones globales
    window.refreshData = function() {
        $('#loader').show();
        $('#projectsGrid').empty();
        
        $.ajax({
            url: '{{ route("projects.cards-data") }}',
            type: 'GET',
            data: { refresh: true }, // Enviamos refresh=true
            success: function(response) {
                if (response.success) {
                    projectsData = response.data;
                    renderProjects(projectsData);
                    $('#loader').hide();
                    
                    // Mostrar mensaje de éxito
                    showSuccess('Datos actualizados correctamente');
                } else {
                    $('#loader').hide();
                    showError(response.message || 'Error al actualizar');
                }
            },
            error: function() {
                $('#loader').hide();
                showError('Error al actualizar los datos', true);
            }
        });
    };

    function showSuccess(message) {
        $('#errorContainer').html(`
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                <strong><i class="fas fa-check-circle"></i> Éxito:</strong> ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `);
        
        // Auto-cerrar después de 3 segundos
        setTimeout(() => {
            $('.alert-success').alert('close');
        }, 3000);
    }

    window.showProjectDetails = function(projectId) {
        // Aquí puedes redirigir a la vista de detalle del proyecto
        console.log('Ver detalles del proyecto:', projectId);
        // window.location.href = `/projects/${projectId}`;
    };
});
</script>
@endpush