@extends('layouts.app')

@section('content')
<div class="container">
    <h1 class="title">School Papers</h1>
    
    <ul class="grade-sections" style="margin-bottom: 20px; list-style: none; padding: 0;">
        <li style="display: inline-block; margin-right: 20px; text-align: center;">
            <a href="{{route('schoolpapers.grade',['id' => 9])}}" class="button is-info" style="width: 100px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0; font-size: 14px;">Grade 9</a>
        </li>
        <li style="display: inline-block; margin-right: 20px; text-align: center;">
            <a href="{{route('schoolpapers.grade',['id' =>10])}}" class="button is-info" style="width: 100px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0; font-size: 14px;">Grade 10</a>
        </li>
        <li style="display: inline-block; margin-right: 20px; text-align: center;">
            <a href="{{route('schoolpapers.grade',['id' => 11])}}" class="button is-info" style="width: 100px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0; font-size: 14px;">Grade 11 </a>
        </li>
        <li style="display: inline-block; margin-right: 20px; text-align: center;">
            <a href="{{route('schoolpapers.grade',['id' => 12])}}" class="button is-info" style="width: 100px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0; font-size: 14px;">Grade 12</a>
        </li>
        <li style="display: inline-block; text-align: center;">
            <a href="{{route('schoolpapers.grade',['id' => 13])}}" class="button is-info" style="width: 100px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 0; font-size: 14px;">Grade 13</a>
        </li>
    </ul>

    <a href="{{ route('schoolpapers.add') }}" class="button is-small is-primary" style="border-radius: 0;">Add New Paper</a>
    <table class="table is-fullwidth">
        <thead>
            <tr>
                <th>School Name</th>
                <th>Year</th>
                <th>Grade</th>
                <th>Term</th>
                <th>Subject</th>
                <th>Status</th>
               
                <th>URL</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($groupedPapers as $schoolName => $papers)
                <!-- Display the school name as a row spanning multiple papers -->
                <tr>
                    <td rowspan="{{ $papers->count() }}">{{ $schoolName }}</td>
                    
                    <!-- Loop through the papers for this school -->
                    @foreach ($papers as $index => $paper)
                        @if ($index > 0) <tr> @endif
                        <td>{{ $paper->year }}</td>
                        <td>{{ $paper->grade }}</td>
                       
                        <td>{{ $paper->term }}</td>
                        <td>{{ $paper->subject }} ({{ $paper->lan }})</td>
                        <td>{{ $paper->status }}</td>
                      
                        <td><a href="{{ $paper->url }}" target="_blank">View Paper</a></td>
                        <td>
                            <a href="{{ route('schoolpapers.edit', $paper->id) }}" class="button is-small is-info" style="border-radius: 0;">Edit</a>
                            <form action="{{ route('schoolpapers.delete', $paper->id) }}" method="POST" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="button is-small is-danger" style="border-radius: 0;" onclick="return confirm('Are you sure?')">Delete</button>
                            </form>
                        </td>
                        </tr>
                    @endforeach
                @empty
                    <tr>
                        <td colspan="6">No school papers available.</td>
                    </tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection