@extends('layouts.app')

@section('title', 'Gestión de Imágenes')

@section('content')
    <h2 class="mb-4 text-primary">Imágenes subidas</h2>

    @if(session('success')) <div class="alert alert-success">{{ session('success') }}</div> @endif
    @if(session('error')) <div class="alert alert-danger">{{ session('error') }}</div> @endif

    <div class="row g-4">
        @forelse($files as $file)
            <div class="col-md-3">
                <div class="card h-100">
                    <img src="{{ $file['url'] }}" class="card-img-top" style="height: 200px; object-fit: cover;">
                    <div class="card-body text-center">
                        <p class="small text-muted mb-1">
                            {{ number_format($file['size'] / 1024, 1) }} KB
                        </p>
                        <p class="small text-muted mb-3">
                            {{ \Carbon\Carbon::createFromTimestamp($file['last_modified'])->format('d M Y H:i') }}
                        </p>

                        <!-- Botón de eliminación con modal -->
                        <button class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteModal{{ md5($file['path']) }}">
                            Eliminar
                        </button>

                        <!-- Modal -->
                        <div class="modal fade" id="deleteModal{{ md5($file['path']) }}" tabindex="-1" aria-labelledby="modalLabel{{ md5($file['path']) }}" aria-hidden="true">
                            <div class="modal-dialog modal-dialog-centered">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="modalLabel{{ md5($file['path']) }}">Eliminar imagen</h5>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
                                    <div class="modal-body">
                                        ¿Estás seguro de que deseas eliminar esta imagen?
                                    </div>
                                    <div class="modal-footer">
                                        <form method="POST" action="{{ route('admin.imagenes.destroy') }}">
                                            @csrf @method('DELETE')
                                            <input type="hidden" name="file" value="{{ $file['path'] }}">
                                            <button type="submit" class="btn btn-danger">Eliminar</button>
                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Fin Modal -->
                    </div>
                </div>
            </div>
        @empty
            <p>No hay imágenes subidas.</p>
        @endforelse
    </div>

    <div class="mt-4">
        {{ $files->links() }}
    </div>
@endsection