@php
    /** @var \App\Models\CorelifeCourse|null $course */
    $course = $course ?? null;
    /** @var \Illuminate\Support\Collection<int,\App\Models\CorelifeProgramme>|null $programmes */
    $programmes = $programmes ?? collect();
    $selectedProgrammeId = $selectedProgrammeId ?? null;
    $currentProgrammeId = old('programme_id', $course->programme_id ?? $selectedProgrammeId);
    $selectedProgramme = $currentProgrammeId
        ? $programmes->firstWhere('id', (int) $currentProgrammeId)
        : null;
@endphp

<div class="grid gap-4 md:grid-cols-2">
    <div class="md:col-span-2">
        <label for="programme_id" class="block text-sm font-medium text-slate-800">Programme (series)</label>
        <select
            id="programme_id"
            name="programme_id"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
        >
            <option value="">— Select programme —</option>
            @foreach ($programmes as $programme)
                <option value="{{ $programme->id }}"
                        data-programme-name="{{ $programme->name }}"
                        data-programme-category="{{ $programme->category }}"
                        @selected((string) $currentProgrammeId === (string) $programme->id)>
                    {{ $programme->name }}
                    @if ($programme->category)
                        ({{ $programme->category }})
                    @endif
                </option>
            @endforeach
        </select>
        <p class="mt-1 text-xs text-slate-500">
            Link this run to a programme. Use the <strong>Programmes</strong> admin page to create shared templates (poster, summary).
        </p>
    </div>

    <div class="md:col-span-2">
        <label for="name" class="block text-sm font-medium text-slate-800">Run title</label>
        <input
            id="name"
            name="name"
            type="text"
            required
            value="{{ old('name', $course->name ?? ($selectedProgramme->name ?? '')) }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
        >
        <p class="mt-1 text-xs text-slate-500">
            Defaults to the programme name. Optionally add session-specific context such as dates or batch (e.g. “CI Workshop – Feb 2026 run”).
        </p>
    </div>

    <div>
        <label for="category" class="block text-sm font-medium text-slate-800">Category</label>
        <input
            id="category"
            name="category"
            type="text"
            value="{{ old('category', $course->category ?? ($selectedProgramme->category ?? '')) }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
            placeholder="Workshop / Webinar / Course"
        >
        <p class="mt-1 text-xs text-slate-500">
            Defaults to the selected programme’s category. Change it only if this run needs a different label.
        </p>
    </div>

    <div>
        <label for="delivery_mode" class="block text-sm font-medium text-slate-800">Delivery mode</label>
        <input
            id="delivery_mode"
            name="delivery_mode"
            type="text"
            value="{{ old('delivery_mode', $course->delivery_mode ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
            placeholder="On-site / Online / Hybrid"
        >
    </div>

    <div class="md:col-span-2">
        <label for="summary" class="block text-sm font-medium text-slate-800">Short summary</label>
        <input
            id="summary"
            name="summary"
            type="text"
            value="{{ old('summary', $course->summary ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
            placeholder="One-line description shown on the public page"
        >
    </div>

    <div>
        <label for="start_date" class="block text-sm font-medium text-slate-800">Start date</label>
        <input
            id="start_date"
            name="start_date"
            type="date"
            value="{{ old('start_date', isset($course?->start_date) ? $course->start_date->format('Y-m-d') : '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
        >
    </div>

    <div>
        <label for="end_date" class="block text-sm font-medium text-slate-800">End date</label>
        <input
            id="end_date"
            name="end_date"
            type="date"
            value="{{ old('end_date', isset($course?->end_date) ? $course->end_date->format('Y-m-d') : '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
        >
        <p class="mt-1 text-xs text-slate-500">Leave blank for a single-day programme.</p>
    </div>

    <div>
        <label for="start_time" class="block text-sm font-medium text-slate-800">Start time (optional)</label>
        <input
            id="start_time"
            name="start_time"
            type="time"
            value="{{ old('start_time', $course->start_time ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
        >
    </div>

    <div>
        <label for="end_time" class="block text-sm font-medium text-slate-800">End time (optional)</label>
        <input
            id="end_time"
            name="end_time"
            type="time"
            value="{{ old('end_time', $course->end_time ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
        >
        <p class="mt-1 text-xs text-slate-500">
            Used for admin reference and future scheduling; public pages can still rely on poster text.
        </p>
    </div>
    <div class="md:col-span-2">
        <label for="location" class="block text-sm font-medium text-slate-800">Venue</label>
        <input
            id="location"
            name="location"
            type="text"
            value="{{ old('location', $course->location ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
            placeholder="e.g. N Space Ventures, Damansara Intan"
        >
    </div>

    <div class="md:col-span-2">
        <label for="poster_image_file" class="block text-sm font-medium text-slate-800">Upload poster image</label>
        <input
            id="poster_image_file"
            name="poster_image_file"
            type="file"
            accept="image/*"
            class="mt-1 block w-full text-sm text-slate-700 file:mr-4 file:rounded-full file:border-0 file:bg-slate-800 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-white hover:file:bg-slate-900"
        >
        <p class="mt-1 text-xs text-slate-500">
            Upload a JPEG/PNG/WebP poster. The file will be stored under <code>public/ctcimg</code> and the relative path saved to this course.
        </p>
    </div>

    <div class="md:col-span-2">
        <label for="poster_image" class="block text-sm font-medium text-slate-800">Poster image path (optional)</label>
        <input
            id="poster_image"
            name="poster_image"
            type="text"
            value="{{ old('poster_image', $course->poster_image ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
            placeholder="e.g. ctcimg/ci-workshop-poster.jpg"
        >
        <p class="mt-1 text-xs text-slate-500">
            Use a path relative to the <code>public</code> folder. Example: <code>ctcimg/CI-Workshop-Poster.jpg</code>.
        </p>
    </div>

    <div>
        <label for="price" class="block text-sm font-medium text-slate-800">Price (self-pay)</label>
        <div class="mt-1 flex rounded-xl border border-slate-200 bg-slate-50">
            <span class="inline-flex items-center px-3 text-sm text-slate-500">RM</span>
            <input
                id="price"
                name="price"
                type="number"
                min="0"
                step="0.01"
                value="{{ old('price', $course->price ?? '') }}"
                class="w-full rounded-r-xl border-0 bg-transparent px-3 py-3 text-sm text-slate-900 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-200"
            >
        </div>
        <p class="mt-1 text-xs text-slate-500">
            Self-pay price per participant in Malaysian Ringgit (RM). This should match the SenangPay product price.
        </p>
    </div>

    <div>
        <label for="hrd_price" class="block text-sm font-medium text-slate-800">HRD Corp claimable price (optional)</label>
        <div class="mt-1 flex rounded-xl border border-slate-200 bg-slate-50">
            <span class="inline-flex items-center px-3 text-sm text-slate-500">RM</span>
            <input
                id="hrd_price"
                name="hrd_price"
                type="number"
                step="0.01"
                min="0"
                value="{{ old('hrd_price', $course->hrd_price ?? '') }}"
                class="w-full rounded-r-xl border-0 bg-transparent px-3 py-3 text-sm text-slate-900 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-200"
            >
        </div>
        <p class="mt-1 text-xs text-slate-500">
            HRD Corp claimable fee per participant. Useful for HRD reporting and future automation.
        </p>
    </div>

    <div>
        <label for="seat_capacity" class="block text-sm font-medium text-slate-800">Seat capacity (optional)</label>
        <input
            id="seat_capacity"
            name="seat_capacity"
            type="number"
            min="0"
            step="1"
            value="{{ old('seat_capacity', $course->seat_capacity ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
        >
        <p class="mt-1 text-xs text-slate-500">
            Total number of participants you plan to accept for this programme. Used to show “X of Y seats filled” in the admin view.
        </p>
    </div>

    <div>
        <label for="display_order" class="block text-sm font-medium text-slate-800">Display order</label>
        <input
            id="display_order"
            name="display_order"
            type="number"
            min="0"
            step="1"
            value="{{ old('display_order', $course->display_order ?? 0) }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
        >
        <p class="mt-1 text-xs text-slate-500">Lower numbers appear first in the list.</p>
    </div>

    <div class="md:col-span-2">
        <label for="senangpay_form_url" class="block text-sm font-medium text-slate-800">
            Legacy senangPay product form URL (optional)
        </label>
        <input
            id="senangpay_form_url"
            name="senangpay_form_url"
            type="url"
            value="{{ old('senangpay_form_url', $course->senangpay_form_url ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
            placeholder="https://app.senangpay.my/payment/..."
        >
        <p class="mt-1 text-xs text-slate-500">
            Optional. Retained for historical reference only. The current payment flow uses the SenangPay Open API and no longer depends on this URL.
        </p>
    </div>

    <div class="md:col-span-2">
        <label for="senangpay_product_code" class="block text-sm font-medium text-slate-800">senangPay product code (optional)</label>
        <input
            id="senangpay_product_code"
            name="senangpay_product_code"
            type="text"
            value="{{ old('senangpay_product_code', $course->senangpay_product_code ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
            placeholder="e.g. WORKSHOP, WEBINARDEC25"
        >
    </div>

    <div class="md:col-span-2">
        <label for="webinar_link" class="block text-sm font-medium text-slate-800">Webinar link (optional)</label>
        <input
            id="webinar_link"
            name="webinar_link"
            type="url"
            value="{{ old('webinar_link', $course->webinar_link ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
            placeholder="https://zoom.us/j/..."
        >
        <p class="mt-1 text-xs text-slate-500">
            Paste the Zoom/Teams/Webex link that participants should use to join the live session. Leave blank for on-site programmes.
        </p>
    </div>

    <div class="md:col-span-2">
        <label for="webinar_join_instructions" class="block text-sm font-medium text-slate-800">Webinar join instructions (optional)</label>
        <textarea
            id="webinar_join_instructions"
            name="webinar_join_instructions"
            rows="3"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
            placeholder="Example: Please log in 10 minutes early, ensure your display name shows your full name and hospital, etc."
        >{{ old('webinar_join_instructions', $course->webinar_join_instructions ?? '') }}</textarea>
        <p class="mt-1 text-xs text-slate-500">
            These instructions will be included in the confirmation email for paid registrations.
        </p>
    </div>

    <div class="md:col-span-2">
        <label for="slug" class="block text-sm font-medium text-slate-800">Slug (optional)</label>
        <input
            id="slug"
            name="slug"
            type="text"
            value="{{ old('slug', $course->slug ?? '') }}"
            class="mt-1 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-blue-400 focus:ring-2 focus:ring-blue-200"
            placeholder="ci-workshop"
        >
        <p class="mt-1 text-xs text-slate-500">If left blank, it will be generated from the course name.</p>
    </div>
</div>