@extends('frontend.layouts.main')

@section('title', 'Galería - Lash Vanshy')

@section('content')
<!-- Page Header -->
<section class="page-header">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Nuestra Galería</h1>
                <p>Explora nuestros trabajos realizados y transforma tu mirada</p>
            </div>
        </div>
    </div>
</section>

<!-- Gallery Section -->
<section class="gallery-section section-padding">
    <div class="container">
        <!-- Filters -->
        <div class="gallery-filters">
            <button class="filter-btn {{ $tipo === 'todos' ? 'active' : '' }}" 
                    onclick="filterGallery('todos')">
                <i class="fas fa-th-large me-2"></i>Todos ({{ $stats['total'] }})
            </button>
            <button class="filter-btn {{ $tipo === 'imagen' ? 'active' : '' }}" 
                    onclick="filterGallery('imagen')">
                <i class="fas fa-image me-2"></i>Imágenes ({{ $stats['imagenes'] }})
            </button>
            <button class="filter-btn {{ $tipo === 'video' ? 'active' : '' }}" 
                    onclick="filterGallery('video')">
                <i class="fas fa-video me-2"></i>Videos ({{ $stats['videos'] }})
            </button>
        </div>
        
        <!-- Gallery Grid -->
        @if($galeria->isNotEmpty())
        <div class="gallery-grid">
            @foreach($galeria as $item)
            <div class="gallery-item" data-type="{{ $item->tipo }}">
                @if($item->tipo === 'video')
                    @if($item->thumbnail)
                    <img src="{{ asset('storage/' . $item->thumbnail) }}" 
                         alt="{{ $item->titulo }}"
                         loading="lazy">
                    @elseif($item->archivo)
                    <video poster="{{ asset('storage/' . $item->archivo . '/preview.jpg') }}">
                        <source src="{{ asset('storage/' . $item->archivo) }}" type="video/mp4">
                    </video>
                    @else
                    <div class="placeholder-img w-100 h-100">
                        <i class="fas fa-video fa-2x"></i>
                    </div>
                    @endif
                    <div class="play-icon">
                        <i class="fas fa-play"></i>
                    </div>
                @else
                    @if($item->archivo)
                    <a href="{{ asset('storage/' . $item->archivo) }}" 
                       data-lightbox="gallery" 
                       data-title="{{ $item->titulo }}">
                        <img src="{{ asset('storage/' . $item->archivo) }}" 
                             alt="{{ $item->titulo }}"
                             loading="lazy">
                    </a>
                    @else
                    <div class="placeholder-img w-100 h-100">
                        <i class="fas fa-image fa-2x"></i>
                    </div>
                    @endif
                @endif
                
                <div class="overlay">
                    <div class="overlay-content">
                        <h4>{{ $item->titulo }}</h4>
                        @if($item->descripcion)
                        <p>{{ Str::limit($item->descripcion, 60) }}</p>
                        @endif
                        <span class="badge bg-light text-dark mt-2">
                            <i class="fas {{ $item->tipo === 'video' ? 'fa-video' : 'fa-image' }} me-1"></i>
                            {{ $item->tipo === 'video' ? 'Video' : 'Imagen' }}
                        </span>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        
        <!-- Pagination -->
        <div class="pagination-wrapper">
            {{ $galeria->appends(['tipo' => $tipo])->links() }}
        </div>
        @else
        <div class="empty-state">
            <i class="fas fa-images"></i>
            <h4>No hay elementos en la galería</h4>
            <p>Próximamente subiremos más contenido. ¡Vuelve pronto!</p>
        </div>
        @endif
    </div>
</section>

<style>
.page-header {
    background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
    padding: 60px 0;
    text-align: center;
}

.page-header h1 {
    font-size: 2.5rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.page-header p {
    color: var(--text-light);
    font-size: 1.1rem;
}

.pagination-wrapper {
    margin-top: 3rem;
    text-align: center;
}

.pagination .page-link {
    color: var(--text);
    border: 2px solid var(--border);
    margin: 0 0.25rem;
    border-radius: 10px;
    padding: 0.5rem 1rem;
}

.pagination .page-link:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-color: transparent;
    color: white;
}
</style>

@push('scripts')
<script>
function filterGallery(tipo) {
    const url = new URL(window.location.href);
    url.searchParams.set('tipo', tipo);
    window.location.href = url.toString();
}

// Configurar Lightbox
lightbox.option({
    'resizeDuration': 200,
    'wrapAround': true,
    'albumLabel': 'Imagen %1 de %2',
    'fadeDuration': 300,
    'imageFadeDuration': 300
});
</script>
@endpush
@endsection