@extends('layouts.main')

@section('title', 'Financial Reports - UFG')

@push('styles')
<style>
    /* Reports Page Specific Styles */
    .reports-hero {
        background-image: linear-gradient(rgba(3, 139, 185, 0.3), rgba(17, 107, 181, 0.3)), url('{{ asset("assets/2025/08/2d798430fc0e6ab7087749eab6eaa37312a3da9e-scaled.png") }}');
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    /* Text Size Classes */
    .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
    .text-5xl { font-size: 3rem !important; line-height: 1 !important; }
    .text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
    
    @media (min-width: 768px) {
        .md\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
    }
    
    @media (min-width: 1024px) {
        .lg\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
    }

    /* Tab Styles */
    .reports-tabs {
        border-bottom: 1px solid #eee;
        margin-bottom: 2rem;
    }

    .reports-tabs .tab-list {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        gap: 2rem;
    }

    .reports-tabs .tab-button {
        background: none;
        border: none;
        padding: 1rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #7A7A7A;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        font-family: 'Poppins', sans-serif;
    }

    .reports-tabs .tab-button:hover {
        color: #038BB9;
    }

    .reports-tabs .tab-button.active {
        color: #038BB9;
    }

    .reports-tabs .tab-button.active::after {
        content: '';
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(135deg, #038BB9 0%, #1169B5 100%);
        border-radius: 3px 3px 0 0;
    }

    .reports-content .tab-panel {
        display: none;
    }

    .reports-content .tab-panel.active {
        display: block;
        animation: fadeInUp 0.6s ease-out;
    }

    .report-item {
        background: white;
        border: 1px solid #eee;
        border-radius: 1rem;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    .report-item:hover {
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        transform: translateY(-2px);
    }

    .report-item h3 {
        color: #0C4F7C;
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        font-family: 'Poppins', sans-serif;
    }

    .report-item p {
        color: #7A7A7A;
        margin-bottom: 1rem;
        line-height: 1.6;
    }

    .report-item .report-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #f0f0f0;
    }

    .report-item .report-date {
        color: #7A7A7A;
        font-size: 0.9rem;
    }

    .report-item .report-size {
        color: #7A7A7A;
        font-size: 0.9rem;
    }

    .download-btn {
        background: linear-gradient(135deg, #038BB9 0%, #1169B5 100%);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 0.5rem;
        text-decoration: none;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        font-family: 'Poppins', sans-serif;
    }

    .download-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(3, 139, 185, 0.3);
        text-decoration: none;
        color: white;
    }

    /* Missing Tailwind Classes */
    .bg-aufg-primary { background-color: #038BB9 !important; }
    .bg-aufg-primary-dark { background-color: #1169B5 !important; }
    .bg-aufg-primary-darker { background-color: #0C4F7C !important; }
    .bg-aufg-primary\/30 { background-color: rgba(3, 139, 185, 0.3) !important; }
    .bg-aufg-primary-dark\/20 { background-color: rgba(17, 107, 181, 0.2) !important; }
    .bg-aufg-primary-darker\/30 { background-color: rgba(12, 79, 124, 0.3) !important; }
    .text-aufg-primary { color: #038BB9 !important; }
    .text-aufg-primary-dark { color: #1169B5 !important; }
    .text-aufg-primary-darker { color: #0C4F7C !important; }
    .text-aufg-text-primary { color: #112a3b !important; }
    .text-aufg-text-secondary { color: #7A7A7A !important; }
    .bg-aufg-bg-light { background-color: #F8F9FA !important; }
    .text-white { color: white !important; }
    .font-poppins { font-family: 'Poppins', sans-serif !important; }
    .font-bold { font-weight: 700 !important; }
    .leading-tight { line-height: 1.25 !important; }
    .leading-relaxed { line-height: 1.625 !important; }
    
    /* Animation Classes */
    .animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
    .animate-bounce { animation: bounce 2s infinite; }
    
    @keyframes fadeInUp {
        0% { opacity: 0; transform: translateY(20px); }
        100% { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes bounce {
        0%, 20%, 53%, 80%, 100% { transform: translate3d(0,0,0); }
        40%, 43% { transform: translate3d(0,-30px,0); }
        70% { transform: translate3d(0,-15px,0); }
        90% { transform: translate3d(0,-4px,0); }
    }

    /* Border Radius Classes */
    .rounded-3xl { border-radius: 1.5rem !important; }
    .rounded-2xl { border-radius: 1rem !important; }
    .rounded-xl { border-radius: 0.75rem !important; }
    .rounded-lg { border-radius: 0.5rem !important; }
    .rounded-full { border-radius: 9999px !important; }
    
    /* Negative Margin Classes */
    .-mt-\[123px\] { margin-top: -123px !important; }
    .pt-\[200px\] { padding-top: 200px !important; }
    .pb-\[100px\] { padding-bottom: 100px !important; }

    /* Display Classes */
    .grid { display: grid !important; }
    .flex { display: flex !important; }
    .inline-flex { display: inline-flex !important; }
    .relative { position: relative !important; }
    .absolute { position: absolute !important; }
    .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
    .z-10 { z-index: 10 !important; }
    .text-center { text-align: center !important; }
    .items-center { align-items: center !important; }
    .justify-center { justify-content: center !important; }
    .gap-6 { gap: 1.5rem !important; }
    .overflow-hidden { overflow: hidden !important; }
    .min-h-screen { min-height: 100vh !important; }
    .w-6 { width: 1.5rem !important; }
    .h-6 { height: 1.5rem !important; }
    .w-4 { width: 1rem !important; }
    .h-4 { height: 1rem !important; }
    .transform { transform: var(--tw-transform) !important; }
    .-translate-x-1\/2 { transform: translateX(-50%) !important; }
    .bg-cover { background-size: cover !important; }
    .bg-center { background-position: center !important; }
    .bg-fixed { background-attachment: fixed !important; }
    .backdrop-blur-\[1px\] { backdrop-filter: blur(1px) !important; }
    .bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important; }
    .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important; }
    .from-blue-200 { --tw-gradient-from: #dbeafe; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(219, 234, 254, 0)) !important; }
    .to-blue-100 { --tw-gradient-to: #dbeafe !important; }
    .bg-clip-text { background-clip: text !important; }
    .text-transparent { color: transparent !important; }
    .bottom-8 { bottom: 2rem !important; }
    .left-1\/2 { left: 50% !important; }
    .text-white\/70 { color: rgba(255, 255, 255, 0.7) !important; }
    .py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
    .bg-white { background-color: white !important; }
    .max-w-7xl { max-width: 80rem !important; }
    .max-w-4xl { max-width: 56rem !important; }
    .max-w-6xl { max-width: 72rem !important; }
    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .mb-16 { margin-bottom: 4rem !important; }
    .mb-6 { margin-bottom: 1.5rem !important; }
    .uppercase { text-transform: uppercase !important; }

    /* Responsive Classes */
    @media (min-width: 640px) {
        .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    }

    @media (min-width: 1024px) {
        .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    }
</style>
@endpush

@section('content')
<!-- Hero Section -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden reports-hero bg-cover bg-center bg-fixed -mt-[123px] pt-[200px] pb-[100px]">
    <div class="absolute inset-0 bg-gradient-to-br from-aufg-primary/30 via-aufg-primary-dark/20 to-aufg-primary-darker/30 backdrop-blur-[1px]"></div>
    <div class="relative z-10 text-center px-4 max-w-6xl mx-auto">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white font-poppins leading-tight animate-fade-in-up">
            Financial <span class="bg-gradient-to-r from-blue-200 to-blue-100 bg-clip-text text-transparent">Reports</span>
        </h1>
    </div>
    
    <!-- Scroll Indicator -->
    <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
        <svg class="w-6 h-6 text-white/70" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
        </svg>
    </div>
</section>

<!-- Reports Content -->
<section id="reports" class="py-20 bg-white">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Reports Introduction -->
        <div class="text-center mb-16">
            <h2 class="font-bold text-aufg-primary-darker mb-6 font-poppins animate-fade-in-up uppercase" style="font-size: 40px; font-weight: 700;">
                Financial <span class="bg-gradient-to-r from-aufg-primary to-aufg-primary-dark bg-clip-text text-transparent">Reports</span>
            </h2>
            <p class="text-aufg-text-secondary max-w-4xl mx-auto leading-relaxed animate-fade-in-up" style="font-size: 1rem; line-height: 1.5em; animation-delay: 0.2s;">
                Access our comprehensive <strong class="text-aufg-primary">financial reports</strong>, board documents, and annual reports for complete transparency and governance
            </p>
        </div>

        <!-- Tabbed Reports Interface -->
        <div class="reports-tabs">
            <ul class="tab-list" role="tablist">
                <li role="presentation">
                    <button class="tab-button active" id="financial-tab" data-tab="financial" role="tab" aria-controls="financial-panel" aria-selected="true">
                        Financial Reports
                    </button>
                </li>
                <li role="presentation">
                    <button class="tab-button" id="board-tab" data-tab="board" role="tab" aria-controls="board-panel" aria-selected="false">
                        Board Reports
                    </button>
                </li>
                <li role="presentation">
                    <button class="tab-button" id="annual-tab" data-tab="annual" role="tab" aria-controls="annual-panel" aria-selected="false">
                        Annual Reports
                    </button>
                </li>
            </ul>
        </div>

        <div class="reports-content">
            <!-- Financial Reports Tab -->
            <div class="tab-panel active" id="financial-panel" role="tabpanel" aria-labelledby="financial-tab">
                <div class="grid gap-6">
                    @forelse($financialReports as $report)
                    <div class="report-item">
                        <h3>{{ $report->title }}</h3>
                        <p>{{ $report->description }}</p>
                        <div class="report-meta">
                            <span class="report-date">Published: {{ $report->published_at->format('F j, Y') }}</span>
                            <span class="report-size">{{ $report->file_type }} • {{ $report->formatted_file_size }}</span>
                        </div>
                        <a href="{{ route('reports.download', $report) }}" class="download-btn">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            Download
                        </a>
                    </div>
                    @empty
                    <div class="report-item text-center">
                        <h3 class="text-muted">No Financial Reports Available</h3>
                        <p class="text-muted">Financial reports will be available here once published.</p>
                    </div>
                    @endforelse
                </div>
            </div>

            <!-- Board Reports Tab -->
            <div class="tab-panel" id="board-panel" role="tabpanel" aria-labelledby="board-tab">
                <div class="grid gap-6">
                    @forelse($boardReports as $report)
                    <div class="report-item">
                        <h3>{{ $report->title }}</h3>
                        <p>{{ $report->description }}</p>
                        <div class="report-meta">
                            <span class="report-date">Published: {{ $report->published_at->format('F j, Y') }}</span>
                            <span class="report-size">{{ $report->file_type }} • {{ $report->formatted_file_size }}</span>
                        </div>
                        <a href="{{ route('reports.download', $report) }}" class="download-btn">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            Download
                        </a>
                    </div>
                    @empty
                    <div class="report-item text-center">
                        <h3 class="text-muted">No Board Reports Available</h3>
                        <p class="text-muted">Board reports will be available here once published.</p>
                    </div>
                    @endforelse
                </div>
            </div>

            <!-- Annual Reports Tab -->
            <div class="tab-panel" id="annual-panel" role="tabpanel" aria-labelledby="annual-tab">
                <div class="grid gap-6">
                    @forelse($annualReports as $report)
                    <div class="report-item">
                        <h3>{{ $report->title }}</h3>
                        <p>{{ $report->description }}</p>
                        <div class="report-meta">
                            <span class="report-date">Published: {{ $report->published_at->format('F j, Y') }}</span>
                            <span class="report-size">{{ $report->file_type }} • {{ $report->formatted_file_size }}</span>
                        </div>
                        <a href="{{ route('reports.download', $report) }}" class="download-btn">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            Download
                        </a>
                    </div>
                    @empty
                    <div class="report-item text-center">
                        <h3 class="text-muted">No Annual Reports Available</h3>
                        <p class="text-muted">Annual reports will be available here once published.</p>
                    </div>
                    @endforelse
                </div>
            </div>
        </div>

    </div>
</section>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const tabButtons = document.querySelectorAll('.tab-button');
        const tabPanels = document.querySelectorAll('.tab-panel');
        
        tabButtons.forEach(button => {
            button.addEventListener('click', function() {
                const targetTab = this.getAttribute('data-tab');
                
                // Remove active class from all buttons and panels
                tabButtons.forEach(btn => {
                    btn.classList.remove('active');
                    btn.setAttribute('aria-selected', 'false');
                });
                tabPanels.forEach(panel => {
                    panel.classList.remove('active');
                });
                
                // Add active class to clicked button and corresponding panel
                this.classList.add('active');
                this.setAttribute('aria-selected', 'true');
                document.getElementById(targetTab + '-panel').classList.add('active');
            });
        });
    });
</script>
@endpush