@extends('layouts.app')

@section('content')
<div class="container py-5">
    <h2 class="mb-4 text-success border-start border-4 ps-3 border-success fw-bold">📄 Reports</h2>

    {{-- Export button --}}
    <div class="mb-4">
        <a href="{{ route('reports.export') }}" class="btn btn-success">
            ⬇️ Export All Reports
        </a>
    </div>

    @if($reports->isEmpty())
        <div class="alert alert-info">
            No reports found for your center or county.
        </div>
    @else
        {{-- Summary badges --}}
        <div class="mb-4 d-flex flex-wrap gap-3">
            <span class="badge bg-success">Approved: {{ $reports->where('status','Approved')->count() }}</span>
            <span class="badge bg-warning text-dark">Pending: {{ $reports->where('status','Pending')->count() }}</span>
            <span class="badge bg-danger">Rejected: {{ $reports->where('status','Rejected')->count() }}</span>
            <span class="badge bg-info text-dark">Total Reports: {{ $reports->count() }}</span>
        </div>

        @php
            // Group reports by center name
            $groupedReports = $reports->groupBy(function($report) {
                return $report->user->center->name ?? 'Unknown Center';
            });
        @endphp

        <div class="accordion" id="reportsAccordion">
            @foreach($groupedReports as $centerName => $centerReports)
            @php
                // Count statuses for this center
                $approvedCount = $centerReports->where('status','Approved')->count();
                $pendingCount = $centerReports->where('status','Pending')->count();
                $rejectedCount = $centerReports->where('status','Rejected')->count();
            @endphp
            <div class="accordion-item mb-3">
                <h2 class="accordion-header" id="heading{{ Str::slug($centerName) }}">
                    <button class="accordion-button collapsed fw-bold text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ Str::slug($centerName) }}" aria-expanded="false" aria-controls="collapse{{ Str::slug($centerName) }}">
                        🏢 {{ $centerName }} ({{ $centerReports->count() }} Reports)
                        <small class="ms-3 text-muted">
                            ✔️ {{ $approvedCount }} | ⏳ {{ $pendingCount }} | ❌ {{ $rejectedCount }}
                        </small>
                    </button>
                </h2>
                <div id="collapse{{ Str::slug($centerName) }}" class="accordion-collapse collapse" aria-labelledby="heading{{ Str::slug($centerName) }}" data-bs-parent="#reportsAccordion">
                    <div class="accordion-body p-0">

                        @php
                            // Group by user role then by user
                            $reportsByRole = $centerReports->groupBy('user.role');
                        @endphp

                        @foreach($reportsByRole as $role => $roleReports)
                        <div class="mb-3">
                            <h5 class="text-secondary fw-semibold ps-3">{{ strtoupper($role ?? 'Trainer') }}</h5>

                            @php
                                // Group by individual user
                                $reportsByUser = $roleReports->groupBy('user.name');
                            @endphp

                            @foreach($reportsByUser as $userName => $userReports)
                            <div class="mb-2 ps-4">
                                <h6 class="text-dark fw-bold">{{ $userName }} ({{ $userReports->count() }})</h6>

                                <div class="table-responsive">
                                    <table class="table table-striped table-hover mb-0" id="table-{{ Str::slug($centerName.'-'.$role.'-'.$userName) }}">
                                        <thead class="table-success">
                                            <tr>
                                                <th>#ID</th>
                                                <th>Title</th>
                                                <th>Type</th>
                                                <th>Status</th>
                                                <th>Date</th>
                                                <th class="text-center">Actions</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($userReports as $report)
                                            <tr>
                                                <td>{{ $report->id }}</td>
                                                <td>{{ $report->title }}</td>
                                                <td>{{ ucfirst($report->type ?? '-') }}</td>
                                                <td>
                                                    @switch($report->status)
                                                        @case('Approved')
                                                            <span class="badge bg-success" data-bs-toggle="tooltip" title="Report Approved">{{ $report->status }}</span>
                                                            @break
                                                        @case('Pending')
                                                            <span class="badge bg-warning text-dark" data-bs-toggle="tooltip" title="Report Pending Approval">{{ $report->status }}</span>
                                                            @break
                                                        @case('Rejected')
                                                            <span class="badge bg-danger" data-bs-toggle="tooltip" title="Report Rejected">{{ $report->status }}</span>
                                                            @break
                                                        @default
                                                            <span class="badge bg-secondary">{{ $report->status ?? '-' }}</span>
                                                    @endswitch
                                                </td>
                                                <td>{{ $report->created_at->format('d M, Y') }}</td>
                                                <td class="text-center">
                                                    <a href="{{ route('report.show', $report->id) }}" class="btn btn-sm btn-success">View</a>
                                                    @if($report->attachment)
                                                        <a href="{{ asset('storage/'.$report->attachment) }}" class="btn btn-sm btn-primary" target="_blank">Download</a>
                                                    @endif
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                            @endforeach
                        </div>
                        @endforeach

                    </div>
                </div>
            </div>
            @endforeach
        </div>
    @endif

    <div class="mt-4">
        <a href="{{ route('coordinator.dashboard') }}" class="btn btn-success">← Back to Dashboard</a>
    </div>
</div>

@section('scripts')
{{-- Bootstrap tooltips --}}
<script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
</script>

{{-- DataTables --}}
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script>
    $(document).ready(function() {
        $('table[id^="table-"]').DataTable({
            "paging": true,
            "ordering": true,
            "info": true,
            "responsive": true,
            "order": [[0, "desc"]],
            "columnDefs": [
                { "orderable": false, "targets": 5 } // actions column not sortable
            ]
        });
    });
</script>
@endsection

@endsection