{{-- @extends('layouts.header')

@section('content')
<div class="container">
    <h1>Student Report Cards</h1>
     <ol class="breadcrumb mb-4">
    <li class="breadcrumb-item"><a href="{{ route('dash') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Student Report Cards</li>
    
</ol>
    @php
        $count = 0; // Counter to keep track of boxes in a row
    @endphp
    @foreach ($reportCards as $reportCard)
        @if ($count % 3 == 0)
            <div class="row gutters-5">
        @endif
        <div class="col-auto w-140px" style="width: 30%;">
            <a href="{{ route('report_cards.show', $reportCard->id) }}" class="report-card-link">
                <div class="aiz-file-box">
                    <div class="card card-file aiz-uploader-select c-default">
                        <div class="card-body" style="height: 200px; overflow: hidden;">
                            @if ($reportCard->report_card_image)
                                <img src="{{ asset($reportCard->report_card_image) }}" alt="Report Card" class="img-fluid" style="height: 100%; width: auto;">
                            @endif
                        </div>
                        <div class="card-body" style="background: #464444;">
                            <p class="text-center" style="font-size: 12px;color: white;">
                                <span class="title">Student ID: {{ $reportCard->student_id }}</span><br>
                                <span class="title">Student Name: {{ $reportCard->Studentdetails->student_name }}</span><br>
                              <span class="title">Date of Birth: {{ \Carbon\Carbon::parse($reportCard->Studentdetails->date_of_birth)->format('d/m/Y') }}</span><br>

                                <span class="title">School: {{ $reportCard->Studentdetails->school_details }}</span>
                                <span class="title">Grade: {{ $reportCard->grade }}</span>
                            </p>
                            <hr style="margin: 3px">
                            <div class="row" style="color:white">
                                <div class="col-md-6">
                                    <a href="{{ route('report_cards.edit', $reportCard->id) }}" class="btn btn-primary btn-block">Edit</a>
                                </div>
                                <div class="col-md-6">
                                    <form action="{{ route('report_cards.destroy', $reportCard->id) }}" method="POST">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-danger btn-block" onclick="return confirm('Are you sure you want to delete this report card?')">Delete</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
        @php
            $count++;
        @endphp
        @if ($count % 3 == 0 || $loop->last)
            </div> <!-- Close row if it's the third box or the last box -->
        @endif
    @endforeach
</div>
@if(session('success'))
    <div id="successMessage" class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
@endsection
@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const successMessage = document.getElementById('successMessage');
        if (successMessage) {
            // Display the success message as a centered popup
            successMessage.style.position = 'fixed';
            successMessage.style.top = '50%';
            successMessage.style.left = '50%';
            successMessage.style.transform = 'translate(-50%, -50%)';
            successMessage.style.zIndex = '1000';

            // Hide the success message after 5 seconds
            setTimeout(function() {
                successMessage.style.display = 'none';
            }, 5000);
        }
    });
</script>
@endpush --}}

@extends('layouts.header')

@section('content')
    <div class="container">
        <h1>Student Report Cards</h1>
        <ol class="breadcrumb mb-4">
            <li class="breadcrumb-item"><a href="{{ route('dash') }}">Dashboard</a></li>
            <li class="breadcrumb-item active">Student Report Cards</li>
        </ol>

       <!-- School Filter Form -->
<form method="GET" action="{{ route('report_cards.index') }}">
    <div class="mb-4">
        <label for="school_id" class="form-label">Filter by School:</label>
        <select id="school_id" name="school_id" class="form-control" onchange="this.form.submit()">
            <option value="">All Schools</option> <!-- Allow unfiltered view -->
            @foreach ($schools as $school)
                <option value="{{ $school->Id }}" {{ request('school_id') == $school->Id ? 'selected' : '' }}>
                    {{ $school->school_name }}
                </option>
            @endforeach
        </select>
    </div>
</form>


        @php
            $count = 0;
        @endphp

        @foreach ($reportCardsData as $data)
            @if ($count % 3 == 0)
                <div class="row gutters-5">
            @endif
            <div class="col-auto w-140px" style="width: 30%;">
                <a href="{{ route('report_cards.show', $data['report_card']->id) }}" class="report-card-link">
                    <div class="aiz-file-box">
                        <div class="card card-file aiz-uploader-select c-default">
                            <div class="card-body" style="height: 200px; overflow: hidden;">
                                @if ($data['report_card']->report_card_image)
                                    <i class="fas fa-file-pdf" style="font-size: 50px; color: #d9534f;"></i>
                                @endif
                            </div>
                            <div class="card-body" style="background: #464444;">
                                <p class="text-center" style="font-size: 12px; color: white;">
                                    <span class="title">Student Name: {{ $data['student_name'] }}</span><br>
                                    <span class="title">School: {{ $data['school_name'] }}</span><br>
                                    <span class="title">Grade: {{ $data['report_card']->grade }}</span>
                                </p>
                                <hr style="margin: 3px">
                                <div class="row" style="color:white">
                                    <div class="col-md-4">
                                        <a href="{{ asset($data['report_card']->report_card_image) }}"
                                            class="btn btn-success btn-block gap-2" style="width:7rem" download>Download</a>
                                    </div>
                                    <div class="col-md-4">
                                        <a href="{{ route('report_cards.edit', $data['report_card']->id) }}"
                                            class="btn btn-primary btn-block">Edit</a>
                                    </div>
                                    <div class="col-md-4">
                                        <form action="{{ route('report_cards.destroy', $data['report_card']->id) }}" method="POST">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-danger btn-block"
                                                onclick="return confirm('Are you sure you want to delete this report card?')">Delete</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            @php
                $count++;
            @endphp
            @if ($count % 3 == 0 || $loop->last)
                </div> <!-- Close row if it's the third box or the last box -->
            @endif
        @endforeach
    </div>

    @if (session('success'))
        <div id="successMessage" class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
@endsection

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const successMessage = document.getElementById('successMessage');
            if (successMessage) {
                successMessage.style.position = 'fixed';
                successMessage.style.top = '50%';
                successMessage.style.left = '50%';
                successMessage.style.transform = 'translate(-50%, -50%)';
                successMessage.style.zIndex = '1000';

                setTimeout(function() {
                    successMessage.style.display = 'none';
                }, 5000);
            }
        });
    </script>
@endpush