@extends('layout.layout')

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

    @php
        $teacher = $courseSchedule?->staff;
        $manager = $teacher?->manager;
        $teacherName = $teacher ? trim(($teacher->first_name ?? '') . ' ' . ($teacher->last_name ?? '')) : 'N/A';
        $managerName = $manager ? trim(($manager->first_name ?? '') . ' ' . ($manager->last_name ?? '')) : 'N/A';
        $trackOrProduct = $courseSchedule?->schedule_type === 'track'
            ? ($courseSchedule?->track?->name_en ?? 'N/A')
            : ($courseSchedule?->academyProduct?->name_en ?? 'N/A');
        $levelLabel = $courseSchedule?->trackLevel?->name_en ?? 'N/A';
        $groupLabel = $courseSchedule?->trackType?->name ?? 'N/A';
        $studentCount = $courseSchedule?->courseStudent?->count() ?? 0;
    @endphp

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-4">
                <x-page-title
                    title="Course Session Details"
                    description="Review the sessions linked to this course, inspect feedback, and handle on-spot absence quickly."
                >
                      <a href="{{ route('sessions') }}" class="asset-btn asset-btn--secondary">Back to All Sessions</a>
                        @if ($courseSchedule)
                            <a href="{{ route('courses.show', $courseSchedule->id) }}" class="asset-btn asset-btn--primary">Open Course</a>
                        @endif
                </x-page-title>

                <div class="ui-card">
                    <div class="ui-card__header">
                        <div>
                            <h6 class="mb-0 ui-title">Course Summary</h6>
                            <p class="mb-0 ui-muted">Quick overview of the teacher, program, level, and enrolled students.</p>
                        </div>
                    </div>

                    <div class="p-3">
                        <div class="course-session-summary">
                            <div class="course-session-summary__item">
                                <span class="course-session-summary__label">Teacher</span>
                                <strong class="course-session-summary__value">{{ $teacherName }}</strong>
                            </div>
                            <div class="course-session-summary__item">
                                <span class="course-session-summary__label">Supervisor</span>
                                <strong class="course-session-summary__value">{{ $managerName }}</strong>
                            </div>
                            <div class="course-session-summary__item">
                                <span class="course-session-summary__label">Program / Product</span>
                                <strong class="course-session-summary__value">{{ $trackOrProduct }}</strong>
                            </div>
                            <div class="course-session-summary__item">
                                <span class="course-session-summary__label">Level</span>
                                <strong class="course-session-summary__value">{{ $levelLabel }}</strong>
                            </div>
                            <div class="course-session-summary__item">
                                <span class="course-session-summary__label">Group / Private</span>
                                <strong class="course-session-summary__value">{{ $groupLabel }}</strong>
                            </div>
                            <div class="course-session-summary__item">
                                <span class="course-session-summary__label">Students</span>
                                <strong class="course-session-summary__value">{{ $studentCount }}</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header d-flex align-items-center justify-content-between gap-3 flex-wrap">
                        <div>
                            <h6 class="mb-0 ui-title">Course Sessions</h6>
                            <p class="mb-0 ui-muted">All sessions scheduled for this course in chronological order.</p>
                        </div>

                        <form action="{{ route('SessionsByCourse', request()->route('id') ?? $courseSchedule?->id) }}" method="GET" class="d-flex align-items-center gap-2 flex-wrap">
                            <label for="per_page" class="ui-muted mb-0">Show</label>
                            <select name="per_page" id="per_page" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
                                @foreach ([5, 10, 25, 50, 100, 150] as $count)
                                    <option value="{{ $count }}" {{ (int) request('per_page', 10) === $count ? 'selected' : '' }}>
                                        {{ $count }}
                                    </option>
                                @endforeach
                            </select>
                        </form>
                    </div>

                    <x-table
                        :headers="['ID', 'Session', 'Student', 'Teacher', 'Teacher Media', 'Supervisor', 'Program/Product', 'Level', 'Date', 'Time', 'White Board Upload', 'Group/Private', 'Actions']"
                        :paginator="$sessions"
                        emptyMessage="No sessions found for this course."
                    >
                        @foreach ($sessions as $course)
                            @php
                                $scheduled = $course->staffScheduled;
                                $teacher = sessionTeacher($course, $scheduled);
                                $manager = $teacher->manager ?? null;
                                $feedback = $feedbacksBySession->get($course->id);
                                $teacherName = staffDisplayName($teacher);
                                $managerName = $manager ? trim(($manager->first_name ?? '') . ' ' . ($manager->last_name ?? '')) : 'N/A';
                                $trackOrProduct = $scheduled->schedule_type === 'track'
                                    ? ($scheduled->track->name_en ?? 'N/A')
                                    : ($scheduled->academyProduct->name_en ?? 'N/A');
                                $levelLabel = $scheduled->trackLevel->name_en ?? '-';
                                $groupLabel = $scheduled->trackType->name ?? 'N/A';
                                $groupPill = $scheduled->trackType?->name === 'Group' ? 'success' : 'warn';
                                $joinUrl = $scheduled->hasPaidStudentInvoice()
                                    ? route('courses.sessions.bbb.join', ['course' => $scheduled->id, 'session' => $course->id])
                                    : null;
                            @endphp

                            <tr>
                                <td class="ui-id text-center">{{ method_exists($sessions, 'firstItem') ? $sessions->firstItem() + $loop->index : $loop->iteration }}</td>
                                <td class="text-center">
                                    <span class="ui-pill ui-pill--neutral">Session {{ $course->session_number }}</span>
                                </td>
                                <td class="text-center ui-muted">
                                    <div class="course-session-students">
                                        @foreach ($scheduled->courseStudent as $student)
                                            <a href="{{ route('students.show', $student->student_id) }}" target="_blank" class="course-session-link">
                                                {{ $student->student->first_name ?? '' }} {{ $student->student->last_name ?? '' }}
                                            </a>
                                        @endforeach
                                    </div>
                                </td>
                                <td class="text-center ui-muted"><span class="course-session-link">{{ $teacherName }}</span></td>
                                <td class="text-center">
                                    <x-bbb-teacher-media-status :session="$course" :teacher="$teacher" />
                                </td>
                                <td class="text-center ui-muted"><span class="course-session-link">{{ $managerName }}</span></td>
                                <td class="text-center"><span class="ui-pill ui-pill--info">{{ $trackOrProduct }}</span></td>
                                <td class="text-center ui-muted">{{ $levelLabel }}</td>
                                <td class="text-center"><span class="ui-pill ui-pill--neutral">{{ $course->session_date }}</span></td>
                                <td class="text-center"><span class="ui-pill ui-pill--neutral">{{ \Carbon\Carbon::parse($course->start_time)->format('h:i A') }}</span></td>
                                <td class="text-center">
                                    <x-whiteboard-upload-countdown :session="$course" />
                                </td>
                                <td class="text-center"><span class="ui-pill ui-pill--{{ $groupPill }}">{{ $groupLabel }}</span></td>
                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="course-session-actions">
                                        @if (! $feedback)
                                            <a
                                                href="{{ route('feedback.add', ['session_id' => $course->id, 'staff_id' => $teacher?->id]) }}"
                                                class="btn btn-outline-primary btn-sm radius-8"
                                                title="Add Feedback"
                                            >
                                                <iconify-icon icon="mdi:comment-plus-outline" class="text-lg"></iconify-icon>
                                            </a>
                                        @else
                                            <button
                                                type="button"
                                                class="btn btn-outline-secondary btn-sm radius-8"
                                                title="View Feedback"
                                                data-bs-toggle="modal"
                                                data-bs-target="#feedbackModal{{ $course->id }}"
                                            >
                                                <iconify-icon icon="mdi:comment-text-outline" class="text-lg"></iconify-icon>
                                            </button>

                                            <div class="modal fade" id="feedbackModal{{ $course->id }}" tabindex="-1" aria-labelledby="feedbackModalLabel{{ $course->id }}" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered modal-lg">
                                                    <div class="modal-content feedback-modal">
                                                        <div class="modal-header feedback-modal__header">
                                                            <div>
                                                                <div class="feedback-modal__eyebrow">Session feedback</div>
                                                                <div class="modal-title feedback-modal__title" id="feedbackModalLabel{{ $course->id }}">Submitted Feedback</div>
                                                                <div class="feedback-modal__meta">
                                                                    Session {{ $course->session_number }} - {{ \Carbon\Carbon::parse($feedback->created_at)->format('d M Y - h:i A') }}
                                                                </div>
                                                            </div>
                                                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                                        </div>

                                                        <div class="modal-body feedback-modal__body">
                                                            <div class="feedback-modal__grid">
                                                                <div class="feedback-modal__panel">
                                                                    <div class="feedback-modal__section-title">Session details</div>
                                                                    <div class="feedback-modal__detail-list">
                                                                        <div class="feedback-modal__detail-item">
                                                                            <span class="feedback-modal__detail-label">Teacher</span>
                                                                            <strong class="feedback-modal__detail-value">{{ $teacherName }}</strong>
                                                                        </div>
                                                                        <div class="feedback-modal__detail-item">
                                                                            <span class="feedback-modal__detail-label">Supervisor</span>
                                                                            <strong class="feedback-modal__detail-value">{{ $managerName }}</strong>
                                                                        </div>
                                                                        <div class="feedback-modal__detail-item">
                                                                            <span class="feedback-modal__detail-label">Program / Product</span>
                                                                            <strong class="feedback-modal__detail-value">{{ $trackOrProduct }}</strong>
                                                                        </div>
                                                                        <div class="feedback-modal__detail-item">
                                                                            <span class="feedback-modal__detail-label">Level</span>
                                                                            <strong class="feedback-modal__detail-value">{{ $levelLabel }}</strong>
                                                                        </div>
                                                                    </div>
                                                                </div>

                                                                <div class="feedback-modal__panel feedback-modal__panel--wide">
                                                                    <div class="feedback-modal__section-title">Reported issues</div>
                                                                    <div class="feedback-modal__issues">
                                                                        <span class="feedback-status-pill {{ $feedback->camera_off == 1 ? 'is-active' : '' }}">Camera Off</span>
                                                                        <span class="feedback-status-pill {{ $feedback->internet_not_stable == 1 ? 'is-active' : '' }}">Internet Not Stable</span>
                                                                        <span class="feedback-status-pill {{ $feedback->class_room_not_suitable == 1 ? 'is-active' : '' }}">Class Room Not Suitable</span>
                                                                        <span class="feedback-status-pill {{ $feedback->on_spot_absence == 1 ? 'is-active' : '' }}">On Spot Absence</span>
                                                                        <span class="feedback-status-pill {{ $feedback->delay_in_start == 1 ? 'is-active' : '' }}">Delay in Start</span>
                                                                    </div>

                                                                    <div class="feedback-modal__note">
                                                                        <div class="feedback-modal__section-title">Admin comments</div>
                                                                        <p class="mb-0">{{ $feedback->admin_comments ?: 'No comments added for this feedback.' }}</p>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="modal-footer feedback-modal__footer">
                                                            <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Close</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif

                                        <button
                                            type="button"
                                            class="btn btn-outline-warning btn-sm radius-8 on-spot-absence-btn"
                                            data-bs-toggle="modal"
                                            data-bs-target="#onSpotAbsenceModal"
                                            data-session-id="{{ $course->id }}"
                                            data-session-label="Session {{ $course->session_number }}"
                                            title="On Spot Absence"
                                        >
                                            <iconify-icon icon="mdi:account-alert-outline" class="text-lg"></iconify-icon>
                                        </button>

                                        @if (filled($joinUrl))
                                            <a href="{{ $joinUrl }}" target="_blank" class="btn btn-outline-success btn-sm radius-8" title="Join">
                                                <iconify-icon icon="ri:video-add-line" class="text-lg"></iconify-icon>
                                            </a>
                                        @else
                                            <button type="button" class="btn btn-outline-secondary btn-sm radius-8" title="Join" disabled>
                                                <iconify-icon icon="ri:video-off-line" class="text-lg"></iconify-icon>
                                            </button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="onSpotAbsenceModal" tabindex="-1" aria-labelledby="onSpotAbsenceModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title fw-semibold" id="onSpotAbsenceModalLabel">Confirm On Spot Absence</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-2">Are you sure you want to mark <strong id="onSpotAbsenceSessionLabel">this session</strong> as On Spot Absence?</p>
                    <p class="mb-0 text-muted small">This will save the feedback and send the related HR effect immediately.</p>
                    <input type="hidden" id="onSpotAbsenceSessionId">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-warning text-white" id="confirmOnSpotAbsenceBtn">Confirm</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .course-session-summary {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 1rem;
        }

        .course-session-summary__item {
            padding: 1rem 1.1rem;
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        }

        .course-session-summary__label {
            display: block;
            margin-bottom: 0.35rem;
            color: #64748b;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .course-session-summary__value {
            color: #0f172a;
            font-size: 0.96rem;
            line-height: 1.5;
        }

        .course-session-students {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            gap: 0.35rem;
        }

        .course-session-link {
            color: #0f172a;
            font-weight: 600;
            text-decoration: none;
        }

        .course-session-link:hover {
            color: #2563eb;
        }

        .course-session-actions {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .feedback-modal {
            border: 0;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 24px 80px rgba(15, 23, 42, 0.2);
        }

        .feedback-modal__header {
            padding: 1.5rem 1.5rem 1rem;
            border-bottom: 1px solid #e2e8f0;
            background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
        }

        .feedback-modal__eyebrow {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.35rem;
        }

        .feedback-modal__title {
            color: #0f172a;
            font-size: 1.2rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }

        .feedback-modal__meta {
            color: #64748b;
            font-size: 0.92rem;
        }

        .feedback-modal__body {
            padding: 1.5rem;
            background: #fff;
        }

        .feedback-modal__grid {
            display: grid;
            grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
            gap: 1rem;
        }

        .feedback-modal__panel {
            border: 1px solid #e2e8f0;
            border-radius: 20px;
            background: #f8fafc;
            padding: 1rem;
        }

        .feedback-modal__panel--wide {
            background: #fff;
        }

        .feedback-modal__section-title {
            color: #0f172a;
            font-size: 0.95rem;
            font-weight: 700;
            margin-bottom: 0.85rem;
        }

        .feedback-modal__detail-list {
            display: flex;
            flex-direction: column;
            gap: 0.85rem;
        }

        .feedback-modal__detail-item {
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
        }

        .feedback-modal__detail-label {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .feedback-modal__detail-value {
            color: #0f172a;
            font-size: 0.95rem;
        }

        .feedback-modal__issues {
            display: flex;
            flex-wrap: wrap;
            gap: 0.65rem;
            margin-bottom: 1rem;
        }

        .feedback-status-pill {
            display: inline-flex;
            align-items: center;
            padding: 0.55rem 0.85rem;
            border-radius: 999px;
            background: #f1f5f9;
            color: #64748b;
            font-size: 0.86rem;
            font-weight: 600;
            border: 1px solid #e2e8f0;
        }

        .feedback-status-pill.is-active {
            background: #dbeafe;
            color: #1d4ed8;
            border-color: #bfdbfe;
        }

        .feedback-modal__note {
            border: 1px solid #e2e8f0;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
            color: #334155;
            line-height: 1.65;
        }

        .feedback-modal__footer {
            padding: 0 1.5rem 1.5rem;
            border-top: 0;
            background: #fff;
        }

        @media (max-width: 900px) {
            .course-session-summary {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 640px) {
            .course-session-summary {
                grid-template-columns: 1fr;
            }

            .feedback-modal__grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            var activeOnSpotButton = null;
            var onSpotAbsenceModalElement = document.getElementById('onSpotAbsenceModal');
            var onSpotAbsenceModal = onSpotAbsenceModalElement ? bootstrap.Modal.getOrCreateInstance(onSpotAbsenceModalElement) : null;

            if (onSpotAbsenceModalElement) {
                onSpotAbsenceModalElement.addEventListener('show.bs.modal', function(event) {
                    var triggerButton = event.relatedTarget;

                    if (!triggerButton) {
                        return;
                    }

                    activeOnSpotButton = $(triggerButton);
                    $('#onSpotAbsenceSessionId').val(activeOnSpotButton.data('session-id'));
                    $('#onSpotAbsenceSessionLabel').text(activeOnSpotButton.data('session-label') || 'this session');
                    $('#confirmOnSpotAbsenceBtn').prop('disabled', false).text('Confirm');
                });

                onSpotAbsenceModalElement.addEventListener('hidden.bs.modal', function() {
                    $('#onSpotAbsenceSessionId').val('');
                    $('#onSpotAbsenceSessionLabel').text('this session');
                });
            }

            $('#confirmOnSpotAbsenceBtn').on('click', function() {
                var confirmButton = $(this);
                var sessionId = $('#onSpotAbsenceSessionId').val();

                if (!sessionId || !activeOnSpotButton) {
                    return;
                }

                var originalButtonHtml = activeOnSpotButton.html();

                confirmButton.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');
                activeOnSpotButton.prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>');

                $.ajax({
                    url: "{{ route('sessions.onSpotAbsence') }}",
                    type: 'POST',
                    dataType: 'json',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    data: {
                        _token: "{{ csrf_token() }}",
                        session_id: sessionId
                    },
                    success: function(response) {
                        if (response.success) {
                            if (onSpotAbsenceModal) {
                                onSpotAbsenceModal.hide();
                            }

                            if (window.toastr) {
                                toastr.success(response.message);
                            } else {
                                alert(response.message);
                            }

                            setTimeout(function() {
                                location.reload();
                            }, 1400);
                        } else {
                            activeOnSpotButton.prop('disabled', false).html(originalButtonHtml);
                            confirmButton.prop('disabled', false).text('Confirm');

                            if (window.toastr) {
                                toastr.error(response.message || 'Please try again.');
                            } else {
                                alert(response.message || 'Please try again.');
                            }
                        }
                    },
                    error: function(xhr) {
                        activeOnSpotButton.prop('disabled', false).html(originalButtonHtml);
                        confirmButton.prop('disabled', false).text('Confirm');

                        var errorMessage = xhr.responseJSON && xhr.responseJSON.message
                            ? xhr.responseJSON.message
                            : 'Something went wrong. Please try again.';

                        if (window.toastr) {
                            toastr.error(errorMessage);
                        } else {
                            alert(errorMessage);
                        }
                    }
                });
            });
        });
    </script>
@endpush