@extends('layouts.app')

@section('title', Auth::user()->isAdmin() ? 'Galería de Imágenes de Citas' : 'Mi Galería')

@section('content')
@include('layouts.title-header', [
    'title' => Auth::user()->isAdmin() ? 'Galería de Imágenes de Citas' : 'Mi Galería', 
    'breadcrumbs' => [
        ['text' => Auth::user()->isAdmin() ? 'App' : 'Cuenta', 'url' => Auth::user()->isAdmin() ? route('feed.index') : null],
        ['text' => Auth::user()->isAdmin() ? 'Galería de Imágenes de Citas' : 'Mi Galería']
    ]
])

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle me-2"></i>
        {{ session('success') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-triangle me-2"></i>
        {{ session('error') }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

@if($imagenes->count() > 0)

<style>


.gallery-image .image-link {
    height: 100%;
    width: 100%;
    text-decoration: none;
    position: relative;
}
</style>

<!--GALERIA-->
<section id="galeria" class="wide-100 gallery-section division">
	<div class="container">
		<div class="row justify-content-center">
			<div class="col-lg-10 col-xl-8">
				<div class="section-title title-01 mb-60">
		 			<span class="section-id">Galería</span>
					<h2 class="h2-lg">{{ Auth::user()->isAdmin() ? 'Galería de Imágenes de Citas' : 'Mi Galería' }}</h2>
                    <div class="text-center mt-4">
                        <a href="{{ route('cita-imagenes.create') }}" class="btn violet-red--btn">
                            <i class="fas fa-plus me-2"></i>Subir Imagen
                        </a>
                    </div>
				</div>	
			</div>
		</div>
		<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4">
            @foreach($imagenes as $imagen)
            @php
                $imagen->loadMissing('cita');
                $capGal = trim((string) ($imagen->cita?->publicacion_descripcion ?? ''));
                $capGalShort = $capGal !== '' ? \Illuminate\Support\Str::limit($capGal, 48) : 'Imagen de la cita';
            @endphp
		  	<div class="col">
		  		<div id="img-{{ $imagen->id }}" class="gallery-image">
		  			<a class="image-link" href="{{ asset('storage/' . $imagen->ruta_imagen) }}" title="{{ $capGalShort }}">
				  		<div class="hover-overlay">
							<img class="img-fluid" src="{{ asset('storage/' . $imagen->ruta_imagen) }}" alt="{{ $capGalShort }}" />
							<div class="item-overlay"></div>
							<div class="image-description white--color">
								<div class="image-caption">
                                    <p class="txt-upcase">
                                    {{ "@".$imagen->user->username }}
                                    </p>
                                    @if($imagen->cita)
                                        <h5 class="h5-lg">{{ \Carbon\Carbon::parse($imagen->cita->fecha_hora)->format('d M, Y') }}</h5>
                                    @endif
								</div>
							</div>
				  		</div>
			  		</a>
                    @if($imagen->es_destacada)
                        <div class="position-absolute top-0 end-0 m-2">
                            <span class="badge bg-warning">
                                <i class="fas fa-star"></i> Destacada
                            </span>
                        </div>
                    @endif
				</div>
                <div class="mt-3 d-flex gap-2 flex-wrap justify-content-center">
                                                    <a href="{{ route('cita-imagenes.edit', $imagen) }}" class="btn btn-sm violet-red--btn">Editar</a>
                    
                    @if(Auth::user()->isAdmin())
                        @if($imagen->es_destacada)
                            <form method="POST" action="{{ route('cita-imagenes.quitar-destacada', $imagen) }}" style="display: inline;">
                                @csrf
                                <button type="submit" class="btn btn-sm violet-red--btn">Quitar Destacada</button>
                            </form>
                        @else
                            <form method="POST" action="{{ route('cita-imagenes.destacar', $imagen) }}" style="display: inline;">
                                @csrf
                                <button type="submit" class="btn btn-sm violet-red--btn">Destacar</button>
                            </form>
                        @endif
                    @endif
                    
                    <button type="button" onclick="eliminarImagen({{ $imagen->id }})" class="btn btn-sm violet-red--btn">Eliminar</button>
                </div>
			</div>
            @endforeach
		</div>
	</div>
</section>

<div class="d-flex justify-content-center mt-4">
    {{ $imagenes->links() }}
</div>
@else
<div class="text-center py-5">
    <i class="fas fa-images fa-3x text-muted mb-3"></i>
    <h4 class="text-muted">{{ Auth::user()->isAdmin() ? 'No hay imágenes registradas' : 'Tu galería está vacía' }}</h4>
    <p class="text-muted">{{ Auth::user()->isAdmin() ? 'Los usuarios podrán subir imágenes desde su panel.' : 'Sube imágenes de tus uñas para crear tu galería personal' }}</p>
                            <a href="{{ route('cita-imagenes.create') }}" class="btn violet-red--btn">
        <i class="fas fa-upload me-2"></i>{{ Auth::user()->isAdmin() ? 'Subir Imagen' : 'Subir Primera Imagen' }}
    </a>
</div>
@endif

<!-- Modal para confirmar eliminación -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Eliminación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                ¿Estás seguro de que quieres eliminar esta imagen? Esta acción no se puede deshacer.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn violet-red--btn tra-black--hover" data-bs-dismiss="modal">Cancelar</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn violet-red--btn tra-black--hover">Eliminar</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
function eliminarImagen(imagenId) {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    const form = document.getElementById('deleteForm');
                form.action = `/cita-imagenes/${imagenId}`;
    modal.show();
}
</script>
@endsection

@section('scripts')
<script>
// Inicializar magnific-popup cuando todos los recursos estén cargados
window.onload = function() {
    console.log('Window loaded');
    
    // Verificar si jQuery está disponible
    if (typeof jQuery !== 'undefined') {
        console.log('jQuery está disponible');
        
        // Verificar si magnific-popup está disponible
        if (typeof jQuery.fn.magnificPopup !== 'undefined') {
            console.log('Magnific-popup está disponible');
            
            // Inicializar magnific-popup
            jQuery('.image-link').magnificPopup({
                type: 'image',
                gallery: {
                    enabled: true
                }
            });
            
            console.log('Magnific-popup inicializado');
        } else {
            console.error('Magnific-popup no está disponible');
        }
    } else {
        console.error('jQuery no está disponible');
    }
};
</script>
@endsection