@extends('layouts.app')

@section('content')
    <div class="container">
        <h1 class="title">2024 AL Chemistry Paper I Sinhala Medium</h1>
        
        <div class="columns">
            <!-- Main content column (3/4 width) -->
            <div class="column is-three-quarters">
                @for($i = 1; $i <= 8; $i++)
                    <div class="document-page mb-5" id="page-{{ $i }}">
                        <img 
                            src="{{ asset('images/chemistry/'.$i.'.png') }}" 
                            alt="Page {{ $i }}"
                            class="document-image"
                        >
                        <div class="page-number has-text-centered mt-2">Page {{ $i }}</div>
                    </div>
                @endfor
            </div>
            
            <!-- Thumbnail sidebar (1/4 width) -->
            <div class="column is-one-quarter">
                <div class="box">
                    <h2 class="subtitle">You might also like</h2>
                    
                    <!-- Current paper thumbnails -->
                    <div class="current-thumbnails mb-5">
                        <h3 class="is-size-6 has-text-weight-semibold mb-3">This Paper</h3>
                        <div class="thumbnails-container">
                            @for($i = 1; $i <= 8; $i++)
                                <a href="#page-{{ $i }}" class="thumbnail-link">
                                    <img 
                                        src="{{ asset('images/chemistry/'.$i.'.png') }}" 
                                        alt="Thumbnail {{ $i }}"
                                        class="thumbnail-image"
                                    >
                                </a>
                            @endfor
                        </div>
                    </div>
                    
                    <!-- Other papers thumbnails -->
                    <div class="other-papers">
                        <h3 class="is-size-6 has-text-weight-semibold mb-3">Other Papers</h3>
                        
                        <!-- Example of another paper - replace with your actual data -->
                        <div class="other-paper mb-4">
                            <h4 class="is-size-7 has-text-weight-medium mb-2">2023 AL Chemistry</h4>
                            <div class="thumbnails-container">
                                @for($i = 1; $i <= 3; $i++)
                                    <a href="#" class="thumbnail-link">
                                        <img 
                                            src="{{ asset('images/chemistry/other/2023_'.$i.'.png') }}" 
                                            alt="2023 Page {{ $i }}"
                                            class="thumbnail-image"
                                        >
                                    </a>
                                @endfor
                            </div>
                        </div>
                        
                        <!-- Add more papers as needed -->
                        <div class="other-paper mb-4">
                            <h4 class="is-size-7 has-text-weight-medium mb-2">2022 AL Chemistry</h4>
                            <div class="thumbnails-container">
                                @for($i = 1; $i <= 3; $i++)
                                    <a href="#" class="thumbnail-link">
                                        <img 
                                            src="{{ asset('images/chemistry/other/2022_'.$i.'.png') }}" 
                                            alt="2022 Page {{ $i }}"
                                            class="thumbnail-image"
                                        >
                                    </a>
                                @endfor
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <style>
        .document-image {
            width: 100%;
            height: auto;
            border: 1px solid #eee;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .page-number {
            color: #666;
            font-size: 0.9rem;
        }
        
        .thumbnails-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
        }
        
        .thumbnail-image {
            width: 100%;
            height: auto;
            border: 1px solid #ddd;
            transition: transform 0.2s, border-color 0.2s;
        }
        
        .thumbnail-link:hover .thumbnail-image {
            transform: scale(1.05);
            border-color: #3273dc;
        }
        
        .other-paper {
            border-top: 1px solid #eee;
            padding-top: 1rem;
        }
    </style>
@endsection