@extends('layouts.master')

<!--------------- navigation --------------->

@section('content')
    <main>
        <style>
            .year-list-item-wrapper a,
            .item-titel {
                border-bottom: 1px solid #000;
            }

            .worksheet-cource-block .worksheet {
                width: 23%;
            }

            @media(max-width:767px) {
                .worksheet-cource-block .worksheet {
                    width: 100%;
                }
            }
        </style>



        @foreach ($grouped as $grade => $data)
            @php
                $gradeID = $data['grade_id'];
                $shortName = $data['short_name'];
                $subjects = $data['subjects'];
                
            @endphp

            <div class="worksheet-wrapper max-w-screen-xl mt-16 mx-auto p-10 bg-blue-200 rounded-xl">
                <div class="wroksheet-content-block">
                    <div class="bg-[#0875F7] py-3 text-center rounded-t-lg">
                        <h1 class="text-[28px] sm:text-[36px] font-[600] mb-2 text-center text-white">
                           {{ str_replace('/ P1', '', $grade) }} ({{ $shortName  ?? ''}}) Free Exam Papers
                        </h1>
                    </div>
                    <p class="text-center pt-4">{!! $descriptions[$grade] !!}</p>
                </div>

                <div class="worksheet-cource-block flex flex-wrap sm:gap-0 gap-4 pt-16">
                    @foreach ($subjects as $subject => $subjectData)
                        <div class="worksheet flex flex-col gap-4 bg-white rounded-xl py-10 px-8 w-[23%]">
                            <h1 class="text-center text-[24px] font-semibold">{{ $subject ?? '' }}</h1>

                            @if (count($subjectData['download_all']))
                                <a class="item-titel text-center"
                                href="{{ route('worksheets.downloadAll', ['grade' => $gradeID, 'subject' => $subject]) }}">
                                    Download All {{ $shortName ?? ''}} {{ $subject ?? '' }}
                                </a>
                            @endif

                            <div class="year-list-item-wrapper flex flex-col gap-2 items-center">
                                @forelse($subjectData['papers'] as $paper)
                                    <a href="{{ $paper['url'] }}" target="_blank">{{ $paper['name'] }}</a>
                                @empty
                                    <span class="text-gray-500">No papers available.</span>
                                @endforelse
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach



    </main>
@endsection