@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">
                <div class="header-with-breadcrumb mb-4">
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-2">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item"><a href="{{ route('sessions') }}">Sessions</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Session Feedback</li>
                        </ol>
                    </nav>

                    <x-page-title
                        title="Session Feedback"
                        description="Review session details and record performance feedback for the instructor."
                    >
                        <a href="{{ route('sessions') }}" class="asset-btn asset-btn--secondary">
                            <i class="ri-arrow-left-line me-1"></i> Back to Sessions
                        </a>
                    </x-page-title>
                </div>

                @if ($session)
                    @php
                        $isTrack = $session->staffScheduled->schedule_type === 'track';
                        $sessionTitle = $isTrack
                            ? $session->staffScheduled->track->name_en ?? 'Program'
                            : $session->staffScheduled->academyProduct->name_en ?? 'Product';
                        $teacher = sessionTeacher($session, $session->staffScheduled);

                        $studentNames = collect($session->staffScheduled->courseStudent ?? [])
                            ->map(
                                fn($courseStudent) => trim(
                                    ($courseStudent->student->first_name ?? '') . ' ' . ($courseStudent->student->last_name ?? ''),
                                ),
                            )
                            ->filter()
                            ->implode(', ');
                    @endphp

                    <div class="ui-card animate-fade-in-up">
                        <div class="ui-card__header d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="mb-0 ui-title">Session Overview</h6>
                                <p class="mb-0 ui-muted">Instructor performance review for the selected slot.</p>
                            </div>

                            <span class="badge {{ $isTrack ? 'bg-primary' : 'bg-info' }} rounded-pill px-3 py-2">
                                {{ $isTrack ? 'Program Session' : 'Product Session' }}
                            </span>
                        </div>

                        <div class="p-3">
                            <div class="session-info-grid">
                                <div class="info-item">
                                    <div class="info-item__icon"><i class="ri-book-open-line"></i></div>
                                    <div class="info-item__content">
                                        <span class="info-item__label">Resource Name</span>
                                        <span class="info-item__value">
                                            {{ $sessionTitle }} - #{{ $session->session_number ?? 'N/A' }}
                                        </span>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-item__icon"><i class="ri-user-star-line"></i></div>
                                    <div class="info-item__content">
                                        <span class="info-item__label">Student(s)</span>
                                        <span class="info-item__value">{{ $studentNames ?: 'N/A' }}</span>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-item__icon"><i class="ri-bar-chart-groupped-line"></i></div>
                                    <div class="info-item__content">
                                        <span class="info-item__label">Complexity Level</span>
                                        <span class="info-item__value">
                                            {{ $session->staffScheduled->trackLevel->name_en ?? 'N/A' }}
                                        </span>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-item__icon"><i class="ri-community-line"></i></div>
                                    <div class="info-item__content">
                                        <span class="info-item__label">Instruction Type</span>
                                        <span class="info-item__value">
                                            {{ $session->staffScheduled->trackType->name ?? 'N/A' }}
                                        </span>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-item__icon"><i class="ri-calendar-event-line"></i></div>
                                    <div class="info-item__content">
                                        <span class="info-item__label">Scheduled Date</span>
                                        <span class="info-item__value">
                                            {{ $session->session_date ? \Carbon\Carbon::parse($session->session_date)->format('F d, Y') : 'N/A' }}
                                        </span>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-item__icon"><i class="ri-time-line"></i></div>
                                    <div class="info-item__content">
                                        <span class="info-item__label">Start Time</span>
                                        <span class="info-item__value">
                                            {{ $session->start_time ? \Carbon\Carbon::parse($session->start_time)->format('h:i A') : 'N/A' }}
                                        </span>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-item__icon"><i class="ri-user-settings-line"></i></div>
                                    <div class="info-item__content">
                                        <span class="info-item__label">Assigned Instructor</span>
                                        <span class="info-item__value text-primary fw-semibold">
                                            {{ staffDisplayName($teacher) }}
                                        </span>
                                    </div>
                                </div>

                                <div class="info-item">
                                    <div class="info-item__icon"><i class="ri-route-line"></i></div>
                                    <div class="info-item__content">
                                        <span class="info-item__label">Learning Program</span>
                                        <span class="info-item__value">{{ $sessionTitle }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-card">
                        <div class="ui-card__header">
                            <div>
                                <h6 class="mb-0 ui-title">Penalties on Instructors</h6>
                                <p class="mb-0 ui-muted">
                                    Select all issues that apply to this session, then add any extra notes below.
                                </p>
                            </div>
                        </div>

                        <div class="p-3">
                            <form action="{{ route('feedback.store') }}" method="POST" class="d-flex flex-column gap-4">
                                @csrf

                                <input type="hidden" name="session_id" value="{{ request('session_id') }}" id="session_id">
                                <input type="hidden" name="staff_id" value="{{ $teacher?->id ?: request('staff_id') }}" id="staff_id">

                                @if ($errors->has('admin_comments'))
                                    <div class="alert alert-danger mb-0">
                                        {{ $errors->first('admin_comments') }}
                                    </div>
                                @endif

                                <div class="row g-3">
                                    @php
                                        $penalties = [
                                            'camera_off' => [
                                                'label' => 'Camera Off',
                                                'icon' => 'ri-camera-off-line',
                                                'hint' => 'Instructor camera was disabled',
                                            ],
                                            'virtual_background' => [
                                                'label' => 'Virtual Background',
                                                'icon' => 'ri-image-circle-line',
                                                'hint' => 'No virtual background applied',
                                            ],
                                            'internet_not_stable' => [
                                                'label' => 'Internet Stability',
                                                'icon' => 'ri-wifi-off-line',
                                                'hint' => 'Connection dropped or lagged',
                                            ],
                                            'mic_issues' => [
                                                'label' => 'Mic Issues',
                                                'icon' => 'ri-mic-off-line',
                                                'hint' => 'Audio was muted, unclear, or unstable',
                                            ],
                                            'teacher_language' => [
                                                'label' => "Teacher's Language",
                                                'icon' => 'ri-translate-2',
                                                'hint' => 'Language use did not match expectations',
                                            ],
                                            'materials_issues' => [
                                                'label' => 'Materials Issues',
                                                'icon' => 'ri-file-warning-line',
                                                'hint' => 'Session materials were missing or unsuitable',
                                            ],
                                            'teacher_attitude' => [
                                                'label' => "Teacher's Attitude",
                                                'icon' => 'ri-emotion-unhappy-line',
                                                'hint' => 'Instructor attitude needs review',
                                            ],
                                            'teacher_commitment' => [
                                                'label' => "Teacher's Commitment",
                                                'icon' => 'ri-user-follow-line',
                                                'hint' => 'Commitment or preparation issue',
                                            ],
                                            'class_room_not_suitable' => [
                                                'label' => 'Environment',
                                                'icon' => 'ri-home-4-line',
                                                'hint' => 'Noisy or unprofessional setting',
                                            ],
                                            'on_spot_absence' => [
                                                'label' => 'On-Spot Absence',
                                                'icon' => 'ri-user-unfollow-line',
                                                'hint' => 'Instructor failed to attend',
                                            ],
                                            'delay_in_start' => [
                                                'label' => 'Late Start',
                                                'icon' => 'ri-timer-flash-line',
                                                'hint' => 'Session started after schedule',
                                            ],
                                        ];
                                    @endphp

                                    @foreach ($penalties as $name => $data)
                                        <div class="col-md-6 col-xl-4">
                                            <div class="issue-card {{ $name === 'delay_in_start' ? 'issue-card--has-extra' : '' }}">
                                                <input
                                                    class="issue-card__input"
                                                    type="checkbox"
                                                    name="{{ $name }}"
                                                    value="1"
                                                    id="{{ $name }}"
                                                    {{ old($name) ? 'checked' : '' }}
                                                >

                                                <label class="issue-card__label" for="{{ $name }}">
                                                    <div class="issue-card__icon">
                                                        <i class="{{ $data['icon'] }}"></i>
                                                    </div>

                                                    <div class="issue-card__body">
                                                        <span class="issue-card__title">{{ $data['label'] }}</span>
                                                        <span class="issue-card__hint">{{ $data['hint'] }}</span>
                                                    </div>

                                                    <div class="issue-card__check">
                                                        <i class="ri-checkbox-circle-fill"></i>
                                                    </div>
                                                </label>

                                                @if ($name === 'delay_in_start')
                                                    <div
                                                        id="delay_in_start_minutes_wrapper"
                                                        class="issue-card__extra {{ old('delay_in_start') ? 'issue-card__extra--visible' : '' }}"
                                                    >
                                                        <label for="delay_minutes" class="form-label fw-semibold mb-2">
                                                            Late by how many minutes?
                                                        </label>

                                                        <div class="input-group issue-card__minutes-group">
                                                            <span class="input-group-text">
                                                                <i class="ri-time-line"></i>
                                                            </span>
                                                            <input
                                                                type="number"
                                                                min="1"
                                                                step="1"
                                                                name="delay_minutes"
                                                                id="delay_minutes"
                                                                class="form-control"
                                                                placeholder="Enter minutes"
                                                                value="{{ old('delay_minutes') }}"
                                                            >
                                                            <span class="input-group-text">min</span>
                                                        </div>

                                                        @error('delay_minutes')
                                                            <div class="text-danger small mt-2">{{ $message }}</div>
                                                        @enderror
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                <div>
                                    <label class="form-label fw-semibold" for="admin_comments">Admin Comments</label>
                                    <textarea
                                        name="admin_comments"
                                        id="admin_comments"
                                        class="form-control feedback-textarea"
                                        rows="5"
                                        placeholder="Enter any additional comments..."
                                    >{{ old('admin_comments') }}</textarea>
                                    <small class="text-muted d-block mt-2">
                                        You must select at least one issue or add an admin comment before submitting.
                                    </small>
                                </div>

                                <div class="d-flex justify-content-end">
                                    <button type="submit" class="asset-btn asset-btn--primary">
                                        Submit Feedback
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                @else
                    <div class="ui-card">
                        <div class="px-4 py-5 text-center">
                            <h6 class="mb-2 ui-title">Session Not Found</h6>
                            <p class="mb-0 ui-muted">
                                The selected session could not be loaded, so feedback cannot be submitted right now.
                            </p>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .session-info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.25rem;
        }

        .info-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.25rem;
            border-radius: 1.25rem;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            transition: all 0.3s ease;
        }

        .info-item:hover {
            background: #fff;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
            border-color: #cbd5e1;
        }

        .info-item__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: #fff;
            color: #3b82f6;
            font-size: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            flex-shrink: 0;
        }

        .info-item__content {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .info-item__label {
            font-size: 0.75rem;
            font-weight: 600;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .info-item__value {
            font-size: 0.95rem;
            font-weight: 700;
            color: #0f172a;
        }

        .issue-card {
            height: 100%;
        }

        .issue-card__input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .issue-card__label {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1.25rem;
            border-radius: 1.25rem;
            background: #fff;
            border: 2px solid #e2e8f0;
            cursor: pointer;
            transition: all 0.25s ease;
            margin-bottom: 0;
            min-height: 118px;
        }

        .issue-card__label:hover {
            border-color: #cbd5e1;
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        }

        .issue-card__icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            border-radius: 10px;
            background: #f1f5f9;
            color: #64748b;
            font-size: 1.25rem;
            transition: all 0.25s ease;
            flex-shrink: 0;
        }

        .issue-card__body {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.2rem;
            min-width: 0;
        }

        .issue-card__title {
            font-size: 1rem;
            font-weight: 700;
            color: #0f172a;
            transition: all 0.25s ease;
        }

        .issue-card__hint {
            font-size: 0.85rem;
            color: #64748b;
            line-height: 1.4;
        }

        .issue-card__check {
            font-size: 1.35rem;
            color: #10b981;
            opacity: 0;
            transform: scale(0.7);
            transition: all 0.2s ease;
            flex-shrink: 0;
            margin-top: 0.1rem;
        }

        .issue-card__input:checked + .issue-card__label {
            background: #f8fbff;
            border-color: #3b82f6;
            box-shadow: 0 8px 18px rgba(59, 130, 246, 0.08);
        }

        .issue-card__input:checked + .issue-card__label .issue-card__icon {
            background: #3b82f6;
            color: #fff;
        }

        .issue-card__input:checked + .issue-card__label .issue-card__title {
            color: #1e40af;
        }

        .issue-card__input:checked + .issue-card__label .issue-card__check {
            opacity: 1;
            transform: scale(1);
        }

        .issue-card__extra {
            display: none;
            margin-top: 0.75rem;
            padding: 0.95rem 1rem;
            border: 1px solid #e2e8f0;
            border-radius: 1rem;
            background: #f8fafc;
        }

        .issue-card__extra--visible {
            display: block;
        }

        .issue-card__minutes-group .input-group-text {
            background: #fff;
            border-color: #dbe3ee;
            color: #64748b;
        }

        .issue-card__minutes-group .form-control {
            border-color: #dbe3ee;
            box-shadow: none;
        }

        .issue-card__minutes-group .form-control:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .feedback-textarea {
            min-height: 160px;
            border-radius: 1.25rem;
            padding: 1.25rem;
            border: 2px solid #e2e8f0;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .feedback-textarea:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
        }

        .breadcrumb-item a {
            color: #64748b;
            text-decoration: none;
            font-weight: 500;
        }

        .breadcrumb-item.active {
            color: #0f172a;
            font-weight: 600;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
        }

        .ui-card:nth-child(2) {
            animation-delay: 0.1s;
        }

        .ui-card:nth-child(3) {
            animation-delay: 0.2s;
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const lateStartCheckbox = document.getElementById('delay_in_start');
            const delayMinutesWrapper = document.getElementById('delay_in_start_minutes_wrapper');
            const delayMinutesInput = document.getElementById('delay_minutes');

            if (!lateStartCheckbox || !delayMinutesWrapper || !delayMinutesInput) return;

            function toggleDelayMinutesField() {
                if (lateStartCheckbox.checked) {
                    delayMinutesWrapper.classList.add('issue-card__extra--visible');
                } else {
                    delayMinutesWrapper.classList.remove('issue-card__extra--visible');
                    delayMinutesInput.value = '';
                }
            }

            lateStartCheckbox.addEventListener('change', toggleDelayMinutesField);
            toggleDelayMinutesField();
        });
    </script>
@endpush