@extends('layouts.app')

@section('title', 'Download Poster - PilahPintar')

@section('content')
<div class="container">
    <div class="text-center mb-5">
        <span class="badge bg-success bg-opacity-10 text-success font-heading px-3 py-2 rounded-pill mb-2">Materi Poster</span>
        <h2 class="fw-bold font-heading text-success">Unduh Poster Edukasi Lingkungan 📥</h2>
        <p class="text-muted col-lg-8 mx-auto">Poster fisik siap cetak dan sebar untuk sosialisasi kebersihan lingkungan di RT, RW, dan Sekolah.</p>
    </div>

    <div class="row gy-4 mb-5">
        @forelse($posters as $poster)
        <div class="col-md-6 col-lg-4">
            <div class="card card-eco h-100">
                <a href="{{ $poster->preview_image ?? 'https://images.unsplash.com/photo-1530587191325-3db32d826c18?w=600&auto=format&fit=crop&q=60' }}" target="_blank" title="Klik untuk melihat gambar penuh">
                    <img src="{{ $poster->preview_image ?? 'https://images.unsplash.com/photo-1530587191325-3db32d826c18?w=600&auto=format&fit=crop&q=60' }}" class="card-img-top rounded-top-4" alt="{{ $poster->title }}" style="height: 250px; object-fit: cover; cursor: pointer; transition: opacity 0.2s;" onmouseover="this.style.opacity='0.95'" onmouseout="this.style.opacity='1'">
                </a>
                <div class="card-body d-flex flex-column">
                    <h5 class="fw-bold text-dark mb-2">{{ $poster->title }}</h5>
                    <p class="text-muted small mb-3">{{ $poster->description }}</p>
                    <div class="d-flex align-items-center justify-content-between mt-auto pt-2 border-top">
                        <small class="text-muted"><i class="fa-solid fa-download me-1"></i> {{ $poster->download_count }}x diunduh</small>
                        <a href="{{ route('posters.download', $poster->id) }}" target="_blank" class="btn btn-success rounded-pill btn-sm fw-bold px-3 shadow-sm">
                            <i class="fa-solid fa-file-arrow-down me-1"></i> Download Poster
                        </a>
                    </div>
                </div>
            </div>
        </div>
        @empty
        <div class="col-12 text-center py-5">
            <div class="p-4 bg-white rounded-4 shadow-sm">
                <span class="fs-1">📥</span>
                <h5 class="fw-bold mt-2">Belum Ada Poster</h5>
                <p class="text-muted">Poster edukasi akan diunggah oleh Admin.</p>
            </div>
        </div>
        @endforelse
    </div>

    <div class="d-flex justify-content-center">
        {{ $posters->links() }}
    </div>
</div>
@endsection