@extends('layouts.parent')

@section('title', $lesson->studentDisplayName().' · '.config('brand.name'))

@php
    $subjectName = $lesson->studentDisplayName();
    $openSlots = $bookableSessions->filter(fn ($session) => $session->status?->isOperational() && ($session->status->value === 'live' || $session->ends_at?->greaterThanOrEqualTo(now('Africa/Accra'))));
@endphp

@section('content')
    <div class="content">
        <x-admin.page-header
            kicker="Children's Learning"
            :title="$subjectName"
            :meta="$child->full_name.' · '.$child->classLabel().' · curriculum and class times for this subject.'"
        >
            <x-slot:actions>
                <a href="{{ route('parent.learning.lessons') }}" class="btn mec-btn-secondary btn-md me-2">Back to subjects</a>
                @if ($enrolled)
                    <span class="btn btn-md mec-badge-active" style="pointer-events:none;">Enrolled</span>
                @endif
            </x-slot:actions>
        </x-admin.page-header>

        @if (session('status'))
            <div class="alert alert-success">{{ session('status') }}</div>
        @endif
        @if ($errors->any())
            <div class="alert alert-danger">{{ $errors->first() }}</div>
        @endif

        <div class="row">
            <div class="col-xl-4">
                <div class="card mec-panel">
                    <div class="card-header mec-details-hero d-flex align-items-center">
                        <span class="avatar avatar-xl avatar-rounded flex-shrink-0 border border-white border-3 me-3">
                            <i class="ti ti-book fs-24"></i>
                        </span>
                        <div class="me-auto">
                            <x-lesson-title :lesson="$lesson" light />
                            @if ($enrolled)
                                <span class="badge bg-yellow-transparent text-white mt-2">Enrolled</span>
                            @endif
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="d-inline-flex align-items-center"><i class="ti ti-school me-2"></i>Class</span>
                            <p class="text-dark mb-0">{{ $child->classLabel() }}</p>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="d-inline-flex align-items-center"><i class="ti ti-book me-2"></i>Subject</span>
                            <p class="text-dark mb-0">{{ $subjectName }}</p>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="d-inline-flex align-items-center"><i class="ti ti-list-details me-2"></i>Curriculum</span>
                            <p class="text-dark mb-0">{{ $lesson->curriculumItems->count() }} {{ $lesson->curriculumItems->count() === 1 ? 'unit' : 'units' }}</p>
                        </div>
                        <div class="d-flex align-items-center justify-content-between mb-2">
                            <span class="d-inline-flex align-items-center"><i class="ti ti-currency-cedi me-2"></i>Monthly</span>
                            <p class="text-dark mb-0">{{ $lesson->priceLabel() }}</p>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <span class="d-inline-flex align-items-center"><i class="ti ti-calendar me-2"></i>Yearly</span>
                            <p class="text-dark mb-0">{{ $lesson->yearlyPriceLabel() }}</p>
                        </div>
                    </div>
                    <div class="card-footer bg-white">
                        @if ($enrolled)
                            <p class="fs-13 text-muted mb-0">{{ $child->first_name }} is enrolled. Teachers are assigned by Super Admin. Payment will be added later — parents pay MyEdCamp, not the teacher.</p>
                        @else
                            <form method="POST" action="{{ route('parent.learning.lessons.enrol', $lesson) }}" class="d-grid gap-2">
                                @csrf
                                <button type="submit" class="btn mec-btn-navy">Enrol {{ $child->first_name }}</button>
                                <p class="fs-13 text-muted mb-0">Enrol now without payment. You can pick class times below when Super Admin has set them.</p>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
            <div class="col-xl-8">
                @include('lessons.partials.detail-body', ['audience' => 'parent'])

                <div class="card mec-panel">
                    <div class="card-header">
                        <h6 class="mb-0">Class times</h6>
                    </div>
                    <div class="card-body">
                        <p class="fs-13 text-muted mb-3">
                            @if ($enrolled)
                                Super Admin sets these times. Choose the slots {{ $child->first_name }} will attend for {{ $subjectName }}.
                            @else
                                Enrol {{ $child->first_name }} first (or below with times). Class times are set by Super Admin.
                            @endif
                        </p>

                        @if ($bookableSessions->isEmpty())
                            <p class="mec-empty mb-0">No class times have been set for {{ $subjectName }} yet. You can still enrol — times can be chosen later.</p>
                        @else
                            <form method="POST" action="{{ route('parent.learning.lessons.enrol', $lesson) }}">
                                @csrf
                                <div class="mec-time-slots mb-3">
                                    @foreach ($bookableSessions as $session)
                                        @php
                                            $checked = $selectedSessionIds->contains($session->id);
                                            $ended = $session->status?->value !== 'live' && $session->ends_at?->lessThan(now('Africa/Accra'));
                                        @endphp
                                        <label class="mec-time-slot {{ $checked ? 'is-selected' : '' }} {{ $ended ? 'is-past' : '' }}">
                                            <input
                                                type="checkbox"
                                                name="session_ids[]"
                                                value="{{ $session->id }}"
                                                @checked($checked)
                                                @disabled($ended)
                                            >
                                            <span>
                                                <strong>{{ $session->starts_at->timezone('Africa/Accra')->format('l j M Y, g:i A') }}</strong>
                                                <span class="d-block fs-13 text-muted">
                                                    {{ $session->delivery_method?->label() }}
                                                    · {{ $session->duration_minutes }} minutes
                                                    @if ($session->teacher)
                                                        · {{ $session->teacher->full_name }}
                                                    @endif
                                                </span>
                                            </span>
                                        </label>
                                    @endforeach
                                </div>
                                @if ($openSlots->isEmpty())
                                    <p class="fs-13 text-muted mb-0">There are no upcoming class times left to choose.</p>
                                @else
                                    <button type="submit" class="btn mec-btn-navy">
                                        {{ $enrolled ? 'Update class times' : 'Enrol '.$child->first_name.' with selected times' }}
                                    </button>
                                @endif
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection