@extends('layouts.app')

@section('title', 'Downloads & Resources - Lumbini Province Taekwondo Association')

@section('content')

<!-- Page Hero -->
<section style="background: linear-gradient(135deg, var(--blue) 0%, #0d1f45 100%); padding: 120px 0 60px; text-align: center; color: var(--white); position: relative; overflow: hidden;">
    <div style="position: absolute; inset: 0; opacity: 0.05; background-image: repeating-linear-gradient(45deg, #fff 0, #fff 1px, transparent 0, transparent 50%); background-size: 20px 20px;"></div>
    <div class="container" style="position: relative; z-index: 2;">
        <span class="section-label" style="color: var(--gold-light); font-size: 0.8rem; font-weight: 700; letter-spacing: 2px;">RESOURCES</span>
        <h1 style="font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; margin-top: 10px;">Documents & <span style="color: var(--gold-light);">Downloads</span></h1>
        <div class="divider" style="margin: 15px auto 0;"></div>
    </div>
</section>

<!-- Content list -->
<section class="section-pad" style="background: var(--white);">
    <div class="container">
        @if($documents->count() > 0)
        <div style="display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto;">
            @foreach($documents as $doc)
            <div style="display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; padding: 24px 30px; background: var(--white); border-radius: var(--radius); border: 1px solid var(--gray-200); box-shadow: var(--shadow-sm); transition: var(--transition);" onmouseenter="this.style.transform='translateX(6px)'; this.style.borderColor='var(--blue)'" onmouseleave="this.style.transform='none'; this.style.borderColor='var(--gray-200)'">
                <div style="width: 54px; height: 54px; border-radius: 8px; background: rgba(192,57,43,0.1); display: flex; align-items: center; justify-content: center; color: var(--red); font-size: 1.5rem; font-weight: 700;">
                    @if(strtolower($doc->file_type) === 'pdf')
                        <i class="fas fa-file-pdf"></i>
                    @else
                        <i class="fas fa-file-word"></i>
                    @endif
                </div>
                <div>
                    <h3 style="font-family: 'Oswald', sans-serif; font-size: 1.15rem; font-weight: 600; color: var(--blue); margin-bottom: 6px;">{{ $doc->title }}</h3>
                    @if($doc->description)
                    <p style="font-size: 0.85rem; color: var(--gray-500); line-height: 1.5; margin-bottom: 8px;">{{ $doc->description }}</p>
                    @endif
                    <div style="display: flex; gap: 12px; font-size: 0.75rem; color: var(--gray-500);">
                        <span><i class="fas fa-calendar-alt" style="margin-right: 4px;"></i> {{ $doc->created_at->format('M d, Y') }}</span>
                        <span><i class="fas fa-tags" style="margin-right: 4px;"></i> {{ strtoupper($doc->file_type) }}</span>
                    </div>
                </div>
                <div>
                    <a href="{{ asset($doc->file_path) }}" download class="btn btn-blue" style="padding: 10px 18px; font-size: 0.82rem;">
                        <i class="fas fa-download"></i> Download
                    </a>
                </div>
            </div>
            @endforeach
        </div>
        @else
        <div style="text-align: center; padding: 80px 40px; color: var(--gray-500);">
            <i class="fas fa-folder-open" style="font-size: 3.5rem; opacity: 0.3; margin-bottom: 16px;"></i>
            <p>No downloadable documents published yet.</p>
        </div>
        @endif
    </div>
</section>

@endsection