@php
    /** @var \App\Models\CorelifeProgramme|null $programme */
    $programme = $programme ?? null;
@endphp

<div class="grid gap-4 md:grid-cols-2">
    <div class="md:col-span-2">
        <label for="name" class="block text-sm font-medium text-slate-800">Programme name</label>
        <input
            id="name"
            name="name"
            type="text"
            required
            value="{{ old('name', $programme->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"
        >
    </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', $programme->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"
        >
    </div>

    <div>
        <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', $programme->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 programme name.</p>
    </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', $programme->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 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 programme.
        </p>
        @if (!empty($programme?->poster_image))
            <p class="mt-2 text-xs text-slate-500">
                Current poster: <code>{{ $programme->poster_image }}</code>
            </p>
        @endif
    </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', $programme->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="default_delivery_mode" class="block text-sm font-medium text-slate-800">Default delivery mode</label>
        <input
            id="default_delivery_mode"
            name="default_delivery_mode"
            type="text"
            value="{{ old('default_delivery_mode', $programme->default_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>
        <label for="default_location" class="block text-sm font-medium text-slate-800">Default venue</label>
        <input
            id="default_location"
            name="default_location"
            type="text"
            value="{{ old('default_location', $programme->default_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>
        <label for="default_price" class="block text-sm font-medium text-slate-800">Default price per pax (RM)</label>
        <input
            id="default_price"
            name="default_price"
            type="number"
            min="0"
            step="0.01"
            value="{{ old('default_price', $programme->default_price ?? '') }}"
            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="cpd_points" class="block text-sm font-medium text-slate-800">CPD points (per run)</label>
        <input
            id="cpd_points"
            name="cpd_points"
            type="number"
            min="0"
            step="1"
            value="{{ old('cpd_points', $programme->cpd_points ?? '') }}"
            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 CPD points awarded per participant for this programme. All runs inherit this value.
        </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', $programme->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>