@extends('layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Feedback Details"
                    description="Detailed retention feedback for {{ optional($staff)->first_name ?? '' }} {{ optional($staff)->last_name ?? '' }}."
                >
                    <a href="{{ route('retentions_feedbacks') }}" class="asset-btn asset-btn--secondary">
                        Back to Feedbacks
                    </a>
                </x-page-title>

                @if($feedbacksByCourse->isEmpty())
                    <div class="ui-card">
                        <div class="px-6 py-12 text-center">
                            <p class="text-slate-500 mb-0">No feedbacks found for this staff.</p>
                        </div>
                    </div>
                @else
                    <div class="ui-card">
                        <div class="ui-card__header">
                            <h6 class="mb-0 ui-title">Courses Feedback History</h6>
                        </div>

                        <div class="accordion" id="coursesAccordion">
                            @foreach ($feedbacksByCourse as $courseName => $courseFeedbacks)
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="heading{{ Str::slug($courseName) }}">
                                        <button class="mb-1 accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                            data-bs-target="#collapse{{ Str::slug($courseName) }}" aria-expanded="false"
                                            aria-controls="collapse{{ Str::slug($courseName) }}">
                                            <span class="fw-semibold">{{ $courseName }}</span>
                                            <span class="ms-1 ui-pill ui-pill--info">{{ $courseFeedbacks->count() }} Feedbacks</span>
                                        </button>
                                    </h2>
                                    <div id="collapse{{ Str::slug($courseName) }}" class="accordion-collapse collapse"
                                        aria-labelledby="heading{{ Str::slug($courseName) }}">
                                        <div class="accordion-body p-0">
                                            <x-table
                                                :headers="['Session #', 'Recorded At', 'Camera Off', 'Internet Not Stable', 'Mic Issues', 'Teacher Language', 'Materials Issues', 'Teacher Attitude', 'Teacher Commitment', 'Class Room Not Suitable', 'On Spot Absence', 'Delay In Start', 'Admin Comments']"
                                                :paginator="$courseFeedbacks"
                                                emptyMessage="No feedbacks found in this course."
                                            >
                                                @foreach ($courseFeedbacks as $feedback)
                                                    <tr>
                                                        <td class="ui-id text-center">{{ $feedback->session->session_number ?? 'N/A' }}</td>
                                                        <td class="ui-muted text-center">{{ $feedback->created_at->format('d-m-Y h:i A') }}</td>
                                                        <td class="text-center">
                                                            <span class="ui-pill ui-pill--{{ $feedback->camera_off ? 'warn' : 'neutral' }}">
                                                                {{ $feedback->camera_off ? 'Yes' : 'No' }}
                                                            </span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="ui-pill ui-pill--{{ $feedback->internet_not_stable ? 'warn' : 'neutral' }}">
                                                                {{ $feedback->internet_not_stable ? 'Yes' : 'No' }}
                                                            </span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="ui-pill ui-pill--{{ $feedback->mic_issues ? 'warn' : 'neutral' }}">
                                                                {{ $feedback->mic_issues ? 'Yes' : 'No' }}
                                                            </span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="ui-pill ui-pill--{{ $feedback->teacher_language ? 'warn' : 'neutral' }}">
                                                                {{ $feedback->teacher_language ? 'Yes' : 'No' }}
                                                            </span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="ui-pill ui-pill--{{ $feedback->materials_issues ? 'warn' : 'neutral' }}">
                                                                {{ $feedback->materials_issues ? 'Yes' : 'No' }}
                                                            </span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="ui-pill ui-pill--{{ $feedback->teacher_attitude ? 'warn' : 'neutral' }}">
                                                                {{ $feedback->teacher_attitude ? 'Yes' : 'No' }}
                                                            </span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="ui-pill ui-pill--{{ $feedback->teacher_commitment ? 'warn' : 'neutral' }}">
                                                                {{ $feedback->teacher_commitment ? 'Yes' : 'No' }}
                                                            </span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="ui-pill ui-pill--{{ $feedback->class_room_not_suitable ? 'warn' : 'neutral' }}">
                                                                {{ $feedback->class_room_not_suitable ? 'Yes' : 'No' }}
                                                            </span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="ui-pill ui-pill--{{ $feedback->on_spot_absence ? 'warn' : 'neutral' }}">
                                                                {{ $feedback->on_spot_absence ? 'Yes' : 'No' }}
                                                            </span>
                                                        </td>
                                                        <td class="text-center">
                                                            <span class="ui-pill ui-pill--{{ $feedback->delay_in_start ? 'warn' : 'neutral' }}">
                                                                {{ $feedback->delay_in_start ? 'Yes' : 'No' }}
                                                            </span>
                                                        </td>
                                                        <td class="ui-muted text-center">{{ $feedback->admin_comments ?? 'No comments' }}</td>
                                                    </tr>
                                                @endforeach
                                            </x-table>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection