{{-- Inputs for ONE block type. $type required; $block optional (prefill on edit). --}}
@php $d = isset($block) ? ($block->data ?? []) : []; $inp = 'w-full px-3 py-2.5 bg-surface-container rounded-lg border-none focus:ring-2 focus:ring-primary/20 text-body-md outline-none'; $lbl = 'block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5'; @endphp
@switch($type)
  @case('paragraph')
    <label class="{{ $lbl }}">Text</label>
    <textarea name="text" rows="4" class="{{ $inp }}" placeholder="Write the paragraph… line breaks are preserved.">{{ data_get($d, 'text') }}</textarea>
    @break

  @case('heading')
    <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
      <div class="sm:col-span-3">
        <label class="{{ $lbl }}">Heading text</label>
        <input type="text" name="text" value="{{ data_get($d, 'text') }}" class="{{ $inp }}">
      </div>
      <div>
        <label class="{{ $lbl }}">Level</label>
        <select name="level" class="{{ $inp }}">
          <option value="2" @selected((int) data_get($d, 'level', 2) === 2)>Large (H2)</option>
          <option value="3" @selected((int) data_get($d, 'level', 2) === 3)>Small (H3)</option>
        </select>
      </div>
    </div>
    @break

  @case('image')
    @if(data_get($d, 'path'))
      <img src="{{ asset('storage/'.data_get($d, 'path')) }}" class="h-24 rounded-lg mb-2 object-cover">
    @endif
    <label class="{{ $lbl }}">Image {{ isset($block) ? '(leave empty to keep current)' : '' }}</label>
    <input type="file" name="image" accept="image/*" class="{{ $inp }} mb-3">
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <div><label class="{{ $lbl }}">Caption</label><input type="text" name="caption" value="{{ data_get($d, 'caption') }}" class="{{ $inp }}"></div>
      <div><label class="{{ $lbl }}">Alt text</label><input type="text" name="alt" value="{{ data_get($d, 'alt') }}" class="{{ $inp }}"></div>
    </div>
    @break

  @case('text_image')
    <label class="{{ $lbl }}">Text</label>
    <textarea name="text" rows="4" class="{{ $inp }} mb-3">{{ data_get($d, 'text') }}</textarea>
    @if(data_get($d, 'path'))<img src="{{ \App\Models\CourseContentBlock::imageUrl(data_get($d, 'path')) }}" class="h-24 rounded-lg mb-2 object-cover">@endif
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <div><label class="{{ $lbl }}">Image {{ isset($block) ? '(leave empty to keep)' : '' }}</label><input type="file" name="image" accept="image/*" class="{{ $inp }}"></div>
      <div><label class="{{ $lbl }}">Image side</label>
        <select name="image_side" class="{{ $inp }}">
          <option value="right" @selected(data_get($d, 'image_side', 'right') === 'right')>Right of text</option>
          <option value="left" @selected(data_get($d, 'image_side') === 'left')>Left of text</option>
        </select>
      </div>
      <div><label class="{{ $lbl }}">Caption</label><input type="text" name="caption" value="{{ data_get($d, 'caption') }}" class="{{ $inp }}"></div>
      <div><label class="{{ $lbl }}">Alt text</label><input type="text" name="alt" value="{{ data_get($d, 'alt') }}" class="{{ $inp }}"></div>
    </div>
    @break

  @case('video')
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-3">
      <div>
        <label class="{{ $lbl }}">Source</label>
        <select name="source" class="{{ $inp }} vid-source" onchange="vidSource(this)">
          <option value="youtube" @selected(data_get($d, 'source', 'youtube') === 'youtube')>YouTube link</option>
          <option value="upload" @selected(data_get($d, 'source') === 'upload')>Upload video</option>
        </select>
      </div>
      <div><label class="{{ $lbl }}">Title (optional)</label><input type="text" name="title" value="{{ data_get($d, 'title') }}" class="{{ $inp }}"></div>
    </div>
    <div class="vid-youtube {{ data_get($d, 'source', 'youtube') === 'upload' ? 'hidden' : '' }}">
      <label class="{{ $lbl }}">YouTube URL</label>
      <input type="url" name="youtube_url" value="{{ data_get($d, 'youtube_url') }}" placeholder="https://www.youtube.com/watch?v=…" class="{{ $inp }} mb-3">
    </div>
    <div class="vid-upload {{ data_get($d, 'source') === 'upload' ? '' : 'hidden' }}">
      @if(data_get($d, 'path'))<p class="text-label-md text-outline mb-1">Current video uploaded.</p>@endif
      <label class="{{ $lbl }}">Video file (mp4/webm/ogg, max 100MB){{ isset($block) ? ' — leave empty to keep' : '' }}</label>
      <input type="file" name="video" accept="video/mp4,video/webm,video/ogg" class="{{ $inp }} mb-3">
    </div>
    <label class="{{ $lbl }}">Transcript (optional)</label>
    <textarea name="transcript" rows="3" class="{{ $inp }}" placeholder="Paste the video transcript for accessibility…">{{ data_get($d, 'transcript') }}</textarea>
    @break

  @case('callout')
    <div class="grid grid-cols-1 sm:grid-cols-4 gap-3">
      <div>
        <label class="{{ $lbl }}">Style</label>
        <select name="variant" class="{{ $inp }}">
          @foreach(['info' => 'Info', 'success' => 'Success', 'warning' => 'Warning', 'danger' => 'Danger'] as $v => $l)
            <option value="{{ $v }}" @selected(data_get($d, 'variant', 'info') === $v)>{{ $l }}</option>
          @endforeach
        </select>
      </div>
      <div class="sm:col-span-3">
        <label class="{{ $lbl }}">Text</label>
        <textarea name="text" rows="2" class="{{ $inp }}">{{ data_get($d, 'text') }}</textarea>
      </div>
    </div>
    @break

  @case('divider')
    <p class="text-body-md font-body-md text-outline">A horizontal divider line. No settings needed.</p>
    @break

  @case('accordion')
    <label class="{{ $lbl }}">Sections (title + body + optional image)</label>
    <div class="acc-rows space-y-3">
      @php $items = data_get($d, 'items', [['title' => '', 'body' => '', 'image' => null]]); @endphp
      @foreach($items as $item)
        <div class="acc-row rounded-lg border border-outline-variant/60 p-2 space-y-2">
          <input type="text" name="acc_title[]" value="{{ data_get($item, 'title') }}" placeholder="Section title" class="{{ $inp }}">
          <textarea name="acc_body[]" rows="2" placeholder="Section body" class="{{ $inp }}">{{ data_get($item, 'body') }}</textarea>
          @if(data_get($item, 'image'))<img src="{{ \App\Models\CourseContentBlock::imageUrl(data_get($item, 'image')) }}" class="h-16 rounded object-cover">@endif
          <input type="hidden" name="acc_existing[]" value="{{ data_get($item, 'image') }}">
          <input type="file" name="acc_image[]" accept="image/*" class="{{ $inp }} text-label-md">
        </div>
      @endforeach
    </div>
    <button type="button" onclick="addImgRow(this, 'acc')" class="mt-2 inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold hover:underline"><span class="material-symbols-outlined text-[16px]">add</span> Add section</button>
    @break

  @case('carousel')
    <label class="{{ $lbl }}">Slides (image + title + caption) — learners click through with arrows</label>
    <div class="acc-rows space-y-3">
      @php $slides = data_get($d, 'slides', [['image' => null, 'title' => '', 'caption' => '']]); @endphp
      @foreach($slides as $slide)
        <div class="acc-row rounded-lg border border-outline-variant/60 p-2 space-y-2">
          @if(data_get($slide, 'image'))<img src="{{ \App\Models\CourseContentBlock::imageUrl(data_get($slide, 'image')) }}" class="h-16 rounded-full object-cover">@endif
          <input type="hidden" name="slide_existing[]" value="{{ data_get($slide, 'image') }}">
          <input type="file" name="slide_image[]" accept="image/*" class="{{ $inp }} text-label-md">
          <input type="text" name="slide_title[]" value="{{ data_get($slide, 'title') }}" placeholder="Slide title" class="{{ $inp }}">
          <input type="text" name="slide_caption[]" value="{{ data_get($slide, 'caption') }}" placeholder="Slide caption" class="{{ $inp }}">
        </div>
      @endforeach
    </div>
    <button type="button" onclick="addImgRow(this, 'slide')" class="mt-2 inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold hover:underline"><span class="material-symbols-outlined text-[16px]">add</span> Add slide</button>
    @break

  @case('flip_card')
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
      <div><label class="{{ $lbl }}">Front</label><input type="text" name="front" value="{{ data_get($d, 'front') }}" class="{{ $inp }}"></div>
      <div><label class="{{ $lbl }}">Back</label><textarea name="back" rows="1" class="{{ $inp }}">{{ data_get($d, 'back') }}</textarea></div>
    </div>
    @break

  @case('knowledge_check')
    <label class="{{ $lbl }}">Question</label>
    <textarea name="question" rows="2" class="{{ $inp }} mb-3">{{ data_get($d, 'question') }}</textarea>
    <label class="{{ $lbl }}">Options — tick the correct one</label>
    <div class="kc-rows space-y-2">
      @php $opts = data_get($d, 'options', [['text' => '', 'correct' => true], ['text' => '', 'correct' => false]]); @endphp
      @foreach($opts as $i => $opt)
        <div class="kc-row flex items-center gap-2">
          <input type="radio" name="kc_correct" value="{{ $i }}" @checked(data_get($opt, 'correct')) class="w-5 h-5 border-outline-variant text-primary shrink-0">
          <input type="text" name="kc_options[]" value="{{ data_get($opt, 'text') }}" placeholder="Option {{ $i + 1 }}" class="{{ $inp }}">
        </div>
      @endforeach
    </div>
    <button type="button" onclick="addKcRow(this)" class="mt-2 inline-flex items-center gap-1 text-label-md font-label-md text-primary font-bold hover:underline"><span class="material-symbols-outlined text-[16px]">add</span> Add option</button>
    <div class="mt-3"><label class="{{ $lbl }}">Explanation (optional)</label><input type="text" name="explanation" value="{{ data_get($d, 'explanation') }}" class="{{ $inp }}"></div>
    @break
@endswitch