@extends('layouts.parent')

@section('title', $heading.' · '.config('brand.name'))

@section('content')
    <div class="content">
        <x-admin.page-header
            :kicker="$kicker"
            :title="$heading"
            :meta="$meta ?? ($child ? 'Lessons for '.$child->full_name.' · '.$child->classLabel().'.'.((isset($programmes) && count($programmes) > 0) ? ' For SHS, pick a course (General Arts, Business, Science, …) to see its subjects.' : ' Search by subject or lesson name.') : 'Select a child to search lessons for their class.')"
        >
            <x-slot:actions>
                <a href="{{ route('parent.learning.lessons') }}" class="btn mec-btn-secondary btn-md">Subjects & enrolments</a>
            </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

        @include('parent.partials.child-picker')

        @if (! $child)
            <div class="card mec-panel">
                <div class="card-body">
                    <p class="mec-empty mb-0">Select or add a child first. Find Lessons only shows published lessons for that child’s class.</p>
                </div>
            </div>
        @elseif (! $child->studentProfile?->class_id)
            <div class="card mec-panel">
                <div class="card-body">
                    <p class="mec-empty mb-0">{{ $child->first_name }} does not have a class yet. Update their details before searching for lessons.</p>
                </div>
            </div>
        @else
            <div class="card mec-panel mb-4">
                <div class="card-body">
                    <form method="GET" action="{{ route('parent.lessons.find') }}" class="row g-3 align-items-end">
                        @if ($track)
                            <input type="hidden" name="track" value="{{ $track }}">
                        @endif
                        @if ($programme ?? '')
                            <input type="hidden" name="programme" value="{{ $programme }}">
                        @endif
                        @if ($enrolledOnly)
                            <input type="hidden" name="filter" value="enrolled">
                        @endif
                        <div class="col-lg-6">
                            <label class="form-label" for="lesson-search">Search lessons</label>
                            <input
                                id="lesson-search"
                                class="form-control"
                                type="search"
                                name="q"
                                value="{{ $q }}"
                                placeholder="Subject or lesson name for {{ $child->classLabel() }}"
                            >
                        </div>
                        <div class="col-lg-3">
                            <label class="form-label" for="lesson-subject">Subject</label>
                            <select id="lesson-subject" class="form-select" name="subject_id">
                                <option value="">{{ ($programme ?? '') !== '' ? 'All subjects in this course' : 'All subjects' }}</option>
                                @foreach ($subjects as $subject)
                                    <option value="{{ $subject->id }}" @selected((int) $subjectId === (int) $subject->id)>{{ $subject->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3 d-flex flex-wrap gap-2">
                            <button class="btn mec-btn-navy" type="submit">Search</button>
                            <a href="{{ route('parent.lessons.find') }}" class="btn mec-btn-secondary">Clear</a>
                        </div>
                    </form>

                    <div class="d-flex flex-wrap gap-2 mt-3">
                        <a href="{{ route('parent.lessons.find', array_filter(['q' => $q ?: null, 'subject_id' => $subjectId, 'programme' => ($programme ?? '') ?: null])) }}" class="btn btn-sm {{ ! $enrolledOnly && ! $track ? 'mec-btn-navy' : 'mec-btn-secondary' }}">All for {{ $child->classLabel() }}</a>
                        <a href="{{ route('parent.lessons.find', array_filter(['filter' => 'enrolled', 'q' => $q ?: null, 'subject_id' => $subjectId, 'programme' => ($programme ?? '') ?: null])) }}" class="btn btn-sm {{ $enrolledOnly ? 'mec-btn-navy' : 'mec-btn-secondary' }}">Enrolled</a>
                        <a href="{{ route('parent.lessons.find', array_filter(['track' => 'bece', 'q' => $q ?: null])) }}" class="btn btn-sm {{ $track === 'bece' ? 'mec-btn-navy' : 'mec-btn-secondary' }}">BECE</a>
                        <a href="{{ route('parent.lessons.find', array_filter(['track' => 'wassce', 'q' => $q ?: null])) }}" class="btn btn-sm {{ $track === 'wassce' ? 'mec-btn-navy' : 'mec-btn-secondary' }}">WASSCE</a>
                        <a href="{{ route('parent.lessons.find', array_filter(['track' => 'mocks', 'q' => $q ?: null])) }}" class="btn btn-sm {{ $track === 'mocks' ? 'mec-btn-navy' : 'mec-btn-secondary' }}">Mocks</a>
                    </div>

                    @if (! empty($programmes))
                        <div class="mt-3">
                            <p class="fs-13 text-muted mb-2">SHS course</p>
                            <div class="d-flex flex-wrap gap-2">
                                <a href="{{ route('parent.lessons.find', array_filter(['q' => $q ?: null, 'filter' => $enrolledOnly ? 'enrolled' : null, 'track' => $track ?: null])) }}" class="btn btn-sm {{ ($programme ?? '') === '' ? 'mec-btn-navy' : 'mec-btn-secondary' }}">All courses</a>
                                @foreach ($programmes as $option)
                                    <a
                                        href="{{ route('parent.lessons.find', array_filter(['programme' => $option['slug'], 'q' => $q ?: null, 'filter' => $enrolledOnly ? 'enrolled' : null, 'track' => $track ?: null])) }}"
                                        class="btn btn-sm {{ ($programme ?? '') === $option['slug'] ? 'mec-btn-navy' : 'mec-btn-secondary' }}"
                                        title="{{ $option['summary'] }}"
                                    >{{ $option['label'] }}</a>
                                @endforeach
                            </div>
                            @if (($programme ?? '') !== '')
                                <p class="fs-13 text-muted mb-0 mt-2">Showing cores and electives for {{ \App\Support\ShsProgrammes::label($programme) }}.</p>
                            @endif
                        </div>
                    @endif
                </div>
            </div>

            @if ($lessons === null || $lessons->total() === 0)
                <div class="card mec-panel">
                    <div class="card-body">
                        <p class="mec-empty mb-0">
                            @if ($q !== '' || $track !== '')
                                No lessons matched your search for {{ $child->first_name }}’s class.
                            @elseif ($enrolledOnly)
                                {{ $child->first_name }} is not enrolled in a subject yet.
                            @else
                                No published lessons for {{ $child->first_name }}’s class ({{ $child->classLabel() }}) yet.
                            @endif
                        </p>
                    </div>
                </div>
            @else
                @foreach ($lessons as $lesson)
                    @unless ($enrolledIds->contains($lesson->id))
                        <form id="enrol-lesson-{{ $lesson->id }}" method="POST" action="{{ route('parent.learning.lessons.enrol', $lesson) }}" class="d-none">
                            @csrf
                        </form>
                    @endunless
                @endforeach
                <form method="POST" action="{{ route('parent.learning.lessons.enrol-many') }}" id="enrol-many-form">
                    @csrf
                    <p class="fs-13 text-muted mb-3">Tick several lessons, then enrol {{ $child->first_name }} in all of them. Lesson prices are monthly; yearly is 12 months. Payment will be collected later.</p>
                    <div class="mec-enrol-bar is-empty mb-3" id="enrol-many-bar">
                        <div>
                            <div class="mec-billing-toggle mb-2" role="group" aria-label="Payment period">
                                <label class="mec-billing-option">
                                    <input type="radio" name="billing_period" value="monthly" class="js-billing-period" checked>
                                    Monthly
                                </label>
                                <label class="mec-billing-option">
                                    <input type="radio" name="billing_period" value="yearly" class="js-billing-period">
                                    Yearly
                                </label>
                            </div>
                            <strong id="enrol-many-count">0 lessons selected</strong>
                            <span class="text-muted"> · <span id="enrol-many-total">GH₵0.00 / month</span></span>
                            <p class="fs-13 text-muted mb-0 mt-1" id="enrol-many-alt">Yearly equivalent GH₵0.00 / year</p>
                        </div>
                        <button type="submit" class="btn mec-btn-navy" id="enrol-many-submit" disabled>Enrol selected</button>
                    </div>
                    <div class="row g-3 mb-3">
                        @foreach ($lessons as $lesson)
                            @php $isEnrolled = $enrolledIds->contains($lesson->id); @endphp
                            <div class="col-md-6 col-xl-4">
                                <article class="mec-lesson-card h-100">
                                    <div class="mec-lesson-card-body">
                                        <div class="d-flex justify-content-between align-items-start gap-2 mb-2">
                                            <span class="mec-badge mec-badge-navy">{{ $child->classLabel() }}</span>
                                            @if ($isEnrolled)
                                                <span class="mec-badge mec-badge-active">Enrolled</span>
                                            @endif
                                        </div>
                                        <p class="fs-13 text-muted mb-1">{{ $lesson->subject?->name }}</p>
                                        <h3 class="mec-lesson-card-title">{{ $lesson->studentDisplayName() }}</h3>
                                        <p class="mec-lesson-card-price mb-0">{{ $lesson->priceLabel() }}</p>
                                        <p class="mec-lesson-card-price-alt">{{ $lesson->yearlyPriceLabel() }}</p>
                                        <p class="mec-lesson-card-meta mb-0">
                                            {{ $lesson->curriculum_items_count }} curriculum {{ $lesson->curriculum_items_count === 1 ? 'unit' : 'units' }}
                                            · {{ $isEnrolled ? 'Enrolled — open to manage class times' : 'Select to enrol; payment comes later' }}
                                        </p>
                                    </div>
                                    <div class="mec-lesson-card-actions d-flex flex-wrap gap-2 align-items-center">
                                        <a href="{{ route('parent.learning.lessons.show', $lesson) }}" class="btn {{ $isEnrolled ? 'mec-btn-navy' : 'mec-btn-secondary' }} btn-sm">{{ $isEnrolled ? 'View curriculum & times' : 'View' }}</a>
                                        @unless ($isEnrolled)
                                            <label class="mec-lesson-select mb-0">
                                                <input
                                                    type="checkbox"
                                                    class="form-check-input js-enrol-lesson"
                                                    name="lesson_ids[]"
                                                    value="{{ $lesson->id }}"
                                                    data-price="{{ (float) $lesson->price_ghs }}"
                                                >
                                                Select
                                            </label>
                                            <button type="submit" class="btn mec-btn-navy btn-sm" form="enrol-lesson-{{ $lesson->id }}">Enrol {{ $child->first_name }}</button>
                                        @endunless
                                    </div>
                                </article>
                            </div>
                        @endforeach
                    </div>
                </form>
                <div class="card mec-panel mt-3">
                    <x-admin.table-pager :paginator="$lessons" noun="lessons" />
                </div>
            @endif
        @endif
    </div>
@endsection

@section('scripts')
    <script>
        (function () {
            const form = document.getElementById('enrol-many-form');
            if (!form) return;

            const boxes = form.querySelectorAll('.js-enrol-lesson');
            const periods = form.querySelectorAll('.js-billing-period');
            const countEl = document.getElementById('enrol-many-count');
            const totalEl = document.getElementById('enrol-many-total');
            const altEl = document.getElementById('enrol-many-alt');
            const submit = document.getElementById('enrol-many-submit');
            const bar = document.getElementById('enrol-many-bar');

            function formatGhs(amount) {
                return 'GH₵' + Number(amount).toFixed(2);
            }

            function selectedPeriod() {
                const checked = form.querySelector('.js-billing-period:checked');
                return checked ? checked.value : 'monthly';
            }

            function refresh() {
                let count = 0;
                let monthly = 0;
                boxes.forEach(function (box) {
                    if (!box.checked) return;
                    count += 1;
                    monthly += parseFloat(box.dataset.price || '0');
                });
                const yearly = monthly * 12;
                const period = selectedPeriod();
                countEl.textContent = count + (count === 1 ? ' lesson selected' : ' lessons selected');
                if (period === 'yearly') {
                    totalEl.textContent = formatGhs(yearly) + ' / year';
                    altEl.textContent = 'Monthly equivalent ' + formatGhs(monthly) + ' / month';
                } else {
                    totalEl.textContent = formatGhs(monthly) + ' / month';
                    altEl.textContent = 'Yearly equivalent ' + formatGhs(yearly) + ' / year';
                }
                submit.disabled = count === 0;
                bar.classList.toggle('is-empty', count === 0);
            }

            boxes.forEach(function (box) {
                box.addEventListener('change', refresh);
            });
            periods.forEach(function (period) {
                period.addEventListener('change', refresh);
            });
            refresh();
        })();
    </script>
@endsection