@php
  $isEdit = $course->exists;
  $action = $isEdit ? route('admin.courses.update', $course) : route('admin.courses.store');
  $input = 'w-full px-4 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none';
  $label = 'block text-label-md font-label-md text-on-surface-variant mb-1.5';
@endphp

<form method="POST" action="{{ $action }}" enctype="multipart/form-data" class="space-y-stack-lg">
  @csrf
  @if($isEdit) @method('PUT') @endif

  <div class="grid grid-cols-1 lg:grid-cols-3 gap-stack-lg">
    {{-- Main column --}}
    <div class="lg:col-span-2 space-y-stack-lg">
      <div class="surface-card rounded-xl p-6 space-y-4">
        <h3 class="text-headline-md font-headline-md text-on-surface mb-2">Course Details</h3>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label class="{{ $label }}">Course Code <span class="text-error">*</span></label>
            <input type="text" name="course_id" value="{{ old('course_id', $course->course_id) }}" placeholder="e.g. RUK-C033" class="{{ $input }}">
          </div>
          <div>
            <label class="{{ $label }}">Sort Order</label>
            <input type="number" name="sort_order" value="{{ old('sort_order', $course->sort_order) }}" min="0" class="{{ $input }}">
          </div>
        </div>

        <div>
          <label class="{{ $label }}">Title <span class="text-error">*</span></label>
          <input type="text" name="title" value="{{ old('title', $course->title) }}" class="{{ $input }}">
        </div>

        <div>
          <label class="{{ $label }}">Slug <span class="text-outline">(auto from title if blank)</span></label>
          <input type="text" name="slug" value="{{ old('slug', $course->slug) }}" placeholder="course-url-slug" class="{{ $input }}">
        </div>

        <div>
          <label class="{{ $label }}">Summary</label>
          <textarea name="summary" rows="2" class="{{ $input }}">{{ old('summary', $course->summary) }}</textarea>
        </div>

        <div>
          <label class="{{ $label }}">About This Course</label>
          <textarea name="about_course" rows="5" class="{{ $input }}">{{ old('about_course', $course->about_course) }}</textarea>
        </div>

        <div>
          <label class="{{ $label }}">What You'll Learn</label>
          <textarea name="what_youll_learn" rows="4" class="{{ $input }}" placeholder="One learning point per line, e.g.&#10;Refresh your knowledge of important Health and Safety legislation&#10;Learn about hazards you may encounter in your workplace">{{ old('what_youll_learn', $course->what_youll_learn) }}</textarea>
          <p class="text-label-md font-label-md text-outline mt-1.5">One point per line — shown as a bulleted list on the course page.</p>
        </div>
      </div>

      <div class="surface-card rounded-xl p-6 space-y-4">
        <h3 class="text-headline-md font-headline-md text-on-surface mb-2">Source & Notes</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label class="{{ $label }}">Source Provider</label>
            <input type="text" name="source_provider" value="{{ old('source_provider', $course->source_provider) }}" class="{{ $input }}">
          </div>
          <div>
            <label class="{{ $label }}">Source URL</label>
            <input type="url" name="source_url" value="{{ old('source_url', $course->source_url) }}" placeholder="https://…" class="{{ $input }}">
          </div>
        </div>
        <div>
          <label class="{{ $label }}">Developer Notes</label>
          <textarea name="developer_notes" rows="3" class="{{ $input }}">{{ old('developer_notes', $course->developer_notes) }}</textarea>
        </div>
      </div>
    </div>

    {{-- Sidebar column --}}
    <div class="space-y-stack-lg">
      <div class="surface-card rounded-xl p-6 space-y-4">
        <h3 class="text-headline-md font-headline-md text-on-surface mb-2">Classification</h3>

        <div>
          <label class="{{ $label }}">Category <span class="text-error">*</span></label>
          <select name="category" class="{{ $input }}">
            @foreach(['mandatory' => 'Mandatory', 'externally_provided' => 'Externally Provided', 'service_specific' => 'Service Specific'] as $val => $text)
              <option value="{{ $val }}" @selected(old('category', $course->category) === $val)>{{ $text }}</option>
            @endforeach
          </select>
        </div>

        <div>
          <label class="{{ $label }}">Status <span class="text-error">*</span></label>
          <select name="status" class="{{ $input }}">
            @foreach(['draft' => 'Draft', 'published' => 'Published', 'archived' => 'Archived'] as $val => $text)
              <option value="{{ $val }}" @selected(old('status', $course->status ?? 'draft') === $val)>{{ $text }}</option>
            @endforeach
          </select>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="{{ $label }}">Cost <span class="text-error">*</span></label>
            <select name="cost_type" class="{{ $input }}">
              @foreach(['free' => 'Free', 'paid' => 'Paid'] as $val => $text)
                <option value="{{ $val }}" @selected(old('cost_type', $course->cost_type ?? 'free') === $val)>{{ $text }}</option>
              @endforeach
            </select>
          </div>
          <div>
            <label class="{{ $label }}">Duration (min) <span class="text-error">*</span></label>
            <input type="number" name="duration_minutes" value="{{ old('duration_minutes', $course->duration_minutes ?? 30) }}" min="0" class="{{ $input }}">
          </div>
        </div>

        <div class="grid grid-cols-2 gap-4">
          <div>
            <label class="{{ $label }}">Refresh Cycle</label>
            <input type="text" name="refresh_cycle" value="{{ old('refresh_cycle', $course->refresh_cycle) }}" placeholder="e.g. 3 years" class="{{ $input }}">
          </div>
          <div>
            <label class="{{ $label }}">Accent Colour</label>
            <input type="text" name="accent_color" value="{{ old('accent_color', $course->accent_color) }}" placeholder="#0E7C7B" class="{{ $input }}">
          </div>
        </div>
      </div>

      <div class="surface-card rounded-xl p-6 space-y-4">
        <h3 class="text-headline-md font-headline-md text-on-surface mb-2">Imagery</h3>

        <div>
          <label class="{{ $label }}">Thumbnail</label>
          @if($course->thumbnail)
            <img src="{{ asset('storage/' . $course->thumbnail) }}" alt="" class="w-full h-28 object-cover rounded-lg mb-2">
          @endif
          <input type="file" name="thumbnail" accept="image/*" class="w-full text-body-md text-on-surface-variant file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-surface-container-high file:text-on-surface-variant file:text-label-md">
        </div>

        <div>
          <label class="{{ $label }}">Header Image</label>
          @if($course->header_image)
            <img src="{{ asset('storage/' . $course->header_image) }}" alt="" class="w-full h-28 object-cover rounded-lg mb-2">
          @endif
          <input type="file" name="header_image" accept="image/*" class="w-full text-body-md text-on-surface-variant file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-surface-container-high file:text-on-surface-variant file:text-label-md">
        </div>
      </div>
    </div>
  </div>

  <div class="flex items-center gap-3">
    <button type="submit" class="bg-primary text-on-primary px-6 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90 transition-opacity">
      {{ $isEdit ? 'Save Changes' : 'Create Course' }}
    </button>
    <a href="{{ route('admin.courses.index') }}" class="px-6 py-2.5 rounded-lg text-label-md font-label-md text-on-surface-variant hover:bg-surface-container-high transition-colors">Cancel</a>
  </div>
</form>