{{--
    Drip & unlock rules for a lesson.
      $uid      unique suffix for element ids
      $lesson   existing lesson, or null when adding
      $lessons  lessons available as an "unlock after" target
      $quizzes  quizzes available as an "unlock after" target
--}}
@php($l = $lesson ?? null)
<div class="col-12">
    <details class="border rounded p-2 bg-body" @if($l && ($l->drip_type ?? 'none') !== 'none') open @endif>
        <summary class="small fw-semibold text-body-secondary">{{ __('Access rules (drip & unlock)') }}</summary>
        <div class="row g-2 mt-1">
            <div class="col-md-4">
                <label class="form-label small mb-1">{{ __('Release') }}</label>
                <select name="drip_type" class="form-select form-select-sm lf-drip-type" data-uid="{{ $uid }}">
                    <option value="none" @selected(($l->drip_type ?? 'none') === 'none')>{{ __('Immediately') }}</option>
                    <option value="days_after_enroll" @selected(($l->drip_type ?? '') === 'days_after_enroll')>{{ __('N days after enrolment') }}</option>
                    <option value="fixed_date" @selected(($l->drip_type ?? '') === 'fixed_date')>{{ __('On a fixed date') }}</option>
                </select>
            </div>
            <div class="col-md-4 lf-drip-days-{{ $uid }}">
                <label class="form-label small mb-1">{{ __('Days after enrolment') }}</label>
                <input type="number" name="drip_days" min="0" max="3650" value="{{ $l->drip_days ?? '' }}" class="form-control form-control-sm">
            </div>
            <div class="col-md-4 lf-drip-date-{{ $uid }}">
                <label class="form-label small mb-1">{{ __('Release date') }}</label>
                <input type="datetime-local" name="drip_date" value="{{ optional($l->drip_date ?? null)->format('Y-m-d\TH:i') }}" class="form-control form-control-sm">
            </div>

            <div class="col-md-4">
                <label class="form-label small mb-1">{{ __('Unlock after lesson') }}</label>
                <select name="unlock_after_lesson_id" class="form-select form-select-sm">
                    <option value="">{{ __('— none —') }}</option>
                    @foreach($lessons as $opt)
                        @continue($l && $opt->id === $l->id)
                        <option value="{{ $opt->id }}" @selected(($l->unlock_after_lesson_id ?? null) == $opt->id)>{{ \Illuminate\Support\Str::limit($opt->title, 40) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label small mb-1">{{ __('Unlock after passing quiz') }}</label>
                <select name="unlock_after_quiz_id" class="form-select form-select-sm">
                    <option value="">{{ __('— none —') }}</option>
                    @foreach($quizzes as $q)
                        <option value="{{ $q->id }}" @selected(($l->unlock_after_quiz_id ?? null) == $q->id)>{{ \Illuminate\Support\Str::limit($q->title, 40) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label small mb-1">{{ __('Min. watched to complete (%)') }}</label>
                <input type="number" name="min_watch_percent" min="0" max="100" value="{{ $l->min_watch_percent ?? 0 }}" class="form-control form-control-sm">
            </div>
        </div>
    </details>
</div>

@once
    @push('scripts')
        <script>
            // Show only the field that matches the chosen release mode.
            function lfDripSync(sel) {
                var uid = sel.dataset.uid, v = sel.value;
                var days = document.querySelector('.lf-drip-days-' + uid),
                    date = document.querySelector('.lf-drip-date-' + uid);
                if (days) days.style.display = v === 'days_after_enroll' ? '' : 'none';
                if (date) date.style.display = v === 'fixed_date' ? '' : 'none';
            }
            document.querySelectorAll('.lf-drip-type').forEach(function (sel) {
                lfDripSync(sel);
                sel.addEventListener('change', function () { lfDripSync(sel); });
            });
        </script>
    @endpush
@endonce