@extends('layouts.admin')

@section('title', 'Reports & Analytics')
@section('page-title', 'Reports & Analytics')

@section('content')
<div class="row mb-4">
    <div class="col-md-6">
        <p class="text-muted">Operations / Reports & Analytics</p>
    </div>
</div>

<!-- Tabs Navigation -->
<ul class="nav nav-pills mb-4" id="reportsTab" role="tablist">
    <li class="nav-item">
        <button class="nav-link active rounded-pill px-4" id="notifications-report-tab" data-bs-toggle="pill" data-bs-target="#notifications-report" type="button" role="tab">
            <i class="bi bi-bell-fill me-1"></i> Notifications Report
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link rounded-pill px-4 ms-2" id="surveys-report-tab" data-bs-toggle="pill" data-bs-target="#surveys-report" type="button" role="tab">
            <i class="bi bi-clipboard2-check-fill me-1"></i> Surveys Report
        </button>
    </li>
    <li class="nav-item">
        <button class="nav-link rounded-pill px-4 ms-2" id="students-report-tab" data-bs-toggle="pill" data-bs-target="#students-report" type="button" role="tab">
            <i class="bi bi-people-fill me-1"></i> Student Reports
        </button>
    </li>
</ul>

<div class="tab-content" id="reportsTabContent">
    <!-- Tab 1: Notifications Report -->
    <div class="tab-pane fade show active" id="notifications-report" role="tabpanel">
        <div class="admin-card">
            <h5 class="fw-bold mb-3">Notification Read & Delivery Rates</h5>
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr class="text-muted small">
                            <th>Notification Title</th>
                            <th>Category</th>
                            <th class="text-center">Total Sent</th>
                            <th class="text-center">Delivered</th>
                            <th class="text-center">Read Receipts</th>
                            <th class="text-center">Read Rate</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($notifications as $notif)
                            @php
                                $rate = $notif->sent_count > 0 ? round(($notif->read_count / $notif->sent_count) * 100) : 0;
                            @endphp
                            <tr style="border-bottom: 1px solid var(--border-color);">
                                <td class="fw-semibold text-dark">{{ $notif->title }}</td>
                                <td><span class="kids-badge badge-info-accent">{{ $notif->category }}</span></td>
                                <td class="text-center fw-bold">{{ $notif->sent_count }}</td>
                                <td class="text-center text-secondary">{{ $notif->delivered_count }}</td>
                                <td class="text-center text-secondary">{{ $notif->read_count }}</td>
                                <td class="text-center">
                                    <span class="fw-bold text-success">{{ $rate }}%</span>
                                    <div class="progress mt-1 mx-auto" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-success" role="progressbar" style="width: {{ $rate }}%"></div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="text-center py-4 text-muted">No notification analytics found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tab 2: Surveys Report -->
    <div class="tab-pane fade" id="surveys-report" role="tabpanel">
        <div class="admin-card">
            <h5 class="fw-bold mb-3">Survey Response & Participation rate</h5>
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr class="text-muted small">
                            <th>Survey Title</th>
                            <th>Audience Scope</th>
                            <th class="text-center">Total Responses</th>
                            <th class="text-center">Participation %</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($surveys as $srv)
                            <tr style="border-bottom: 1px solid var(--border-color);">
                                <td class="fw-semibold text-dark">{{ $srv->title }}</td>
                                <td class="text-secondary text-uppercase small fw-bold">{{ $srv->target_type }}</td>
                                <td class="text-center fw-bold">{{ $srv->responses_count }}</td>
                                <td class="text-center">
                                    <span class="fw-bold text-primary">{{ $srv->participation_rate }}%</span>
                                    <div class="progress mt-1 mx-auto" style="height: 6px; width: 80px;">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $srv->participation_rate }}%"></div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="text-center py-4 text-muted">No survey analytics found.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tab 3: Student Reports -->
    <div class="tab-pane fade" id="students-report" role="tabpanel">
        <div class="admin-card">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="fw-bold mb-0">Linked Student & Parent Status</h5>
                <a href="{{ route('admin.reports.export-students') }}" class="btn btn-sm btn-success rounded-3 px-3">
                    <i class="bi bi-file-earmark-excel"></i> Export Student Report (CSV)
                </a>
            </div>
            <div class="table-responsive">
                <table class="table align-middle">
                    <thead>
                        <tr class="text-muted small">
                            <th>Roll Number</th>
                            <th>Student Name</th>
                            <th>Class & Section</th>
                            <th>Linked Parent</th>
                            <th>Link Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($students as $std)
                            <tr style="border-bottom: 1px solid var(--border-color);">
                                <td class="font-monospace fw-bold text-primary">{{ $std->roll_number }}</td>
                                <td class="fw-semibold text-dark">{{ $std->name }}</td>
                                <td class="text-secondary">{{ $std->schoolClass->name }} - {{ $std->section->name }}</td>
                                <td class="text-secondary">
                                    @if($std->parents->count() > 0)
                                        {{ $std->parents->pluck('name')->implode(', ') }}
                                    @else
                                        N/A
                                    @endif
                                </td>
                                <td>
                                    @if($std->parents->count() > 0)
                                        <span class="badge bg-success-accent text-success"><i class="bi bi-check-circle"></i> Linked</span>
                                    @else
                                        <span class="badge bg-danger-accent text-danger"><i class="bi bi-x-circle"></i> Unlinked</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">No students in record database.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection