@extends('layouts.app')
@section('title', 'Edit Content')
@section('content')

  @include('partials.flash')

  @php $types = \App\Models\CourseContentBlock::TYPES; @endphp

  <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-stack-lg">
    <div>
      <a href="{{ route('admin.courses.builder', $course) }}" class="inline-flex items-center gap-1 text-label-md font-label-md text-outline hover:text-primary mb-1">
        <span class="material-symbols-outlined text-[18px]">arrow_back</span> Builder
      </a>
      <h3 class="text-headline-md font-headline-md text-on-surface">{{ $module->title }}</h3>
      <p class="text-label-md font-label-md text-outline">{{ $course->title }} · {{ $module->blocks->count() }} content blocks</p>
    </div>
  </div>

  <div class="grid grid-cols-1 lg:grid-cols-2 gap-gutter">
    {{-- Add block --}}
    <div>
      <div class="surface-card rounded-xl p-6">
        <h4 class="text-headline-md font-headline-md text-on-surface mb-4 flex items-center gap-2"><span class="material-symbols-outlined text-primary">add_circle</span> Add block</h4>
        <form method="POST" action="{{ route('admin.courses.blocks.store', [$course, $module]) }}" enctype="multipart/form-data" id="addBlockForm">
          @csrf
          <label class="block text-label-md font-label-md text-outline uppercase tracking-wide mb-1.5">Block type</label>
          <select name="type" id="blockType" onchange="bfShow(this.value)" class="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 mb-4">
            @foreach($types as $val => $label)<option value="{{ $val }}">{{ $label }}</option>@endforeach
          </select>

          @foreach($types as $val => $label)
            <div data-bf="{{ $val }}" class="bf-group {{ $loop->first ? '' : 'hidden' }}">
              @include('admin.courses._block-field-group', ['type' => $val])
            </div>
          @endforeach

          <div class="flex justify-end mt-4">
            <button type="submit" class="bg-primary text-on-primary px-5 py-2.5 rounded-lg text-label-md font-label-md hover:opacity-90">Add block</button>
          </div>
        </form>
      </div>
    </div>

    {{-- Live block list + preview --}}
    <div>
      <form method="POST" action="{{ route('admin.courses.blocks.reorder', [$course, $module]) }}" id="blockReorder">
        @csrf
        <div class="flex items-center justify-between mb-3">
          <h4 class="text-headline-md font-headline-md text-on-surface">Screen content</h4>
          @if($module->blocks->isNotEmpty())
            <button type="submit" class="inline-flex items-center gap-1.5 text-label-md font-label-md text-primary font-bold hover:underline"><span class="material-symbols-outlined text-[18px]">save</span> Save order</button>
          @endif
        </div>

        <div id="blockList" class="space-y-3">
          @forelse($module->blocks as $block)
            <div class="surface-card rounded-xl overflow-hidden block-item" data-id="{{ $block->id }}">
              <input type="hidden" name="order[]" value="{{ $block->id }}">
              <div class="flex items-center gap-2 px-4 py-2 bg-surface-container-low border-b border-outline-variant/60">
                <div class="flex flex-col">
                  <button type="button" class="text-outline hover:text-primary leading-none" onclick="moveBlock(this,-1)"><span class="material-symbols-outlined text-[16px]">expand_less</span></button>
                  <button type="button" class="text-outline hover:text-primary leading-none" onclick="moveBlock(this,1)"><span class="material-symbols-outlined text-[16px]">expand_more</span></button>
                </div>
                <span class="text-label-md font-label-md text-outline uppercase tracking-wide flex-1">{{ $types[$block->type] ?? $block->type }}</span>
                <button type="submit" form="del-block-{{ $block->id }}" onclick="return confirm('Delete this block?')" class="text-error hover:bg-error-container rounded w-7 h-7 flex items-center justify-center"><span class="material-symbols-outlined text-[18px]">delete</span></button>
              </div>
              <div class="p-4">
                @include('partials._content-block', ['block' => $block])
              </div>
            </div>
          @empty
            <div class="surface-card rounded-xl px-6 py-12 text-center">
              <span class="material-symbols-outlined text-[42px] text-outline mb-2">view_agenda</span>
              <p class="text-body-md font-body-md text-on-surface font-semibold">No content yet</p>
              <p class="text-label-md font-label-md text-outline">Add blocks on the left to build this screen.</p>
            </div>
          @endforelse
        </div>
      </form>
    </div>
  </div>

  @foreach($module->blocks as $block)
    <form id="del-block-{{ $block->id }}" method="POST" action="{{ route('admin.courses.blocks.destroy', [$course, $module, $block]) }}" class="hidden">@csrf @method('DELETE')</form>
  @endforeach

  <script>
    // Show only the active block-type fields; disable the rest so they don't submit.
    function bfShow(type){
      document.querySelectorAll('#addBlockForm .bf-group').forEach(function(g){
        var on = g.dataset.bf === type;
        g.classList.toggle('hidden', !on);
        g.querySelectorAll('input,textarea,select').forEach(function(el){ el.disabled = !on; });
      });
    }
    function moveBlock(btn, dir){
      var item = btn.closest('.block-item'); var list = document.getElementById('blockList');
      if(dir<0 && item.previousElementSibling) list.insertBefore(item, item.previousElementSibling);
      if(dir>0 && item.nextElementSibling) list.insertBefore(item.nextElementSibling, item);
    }
    function addAccRow(btn){ addImgRow(btn, 'acc'); }
    function addImgRow(btn){
      var rows = btn.previousElementSibling; var r = rows.firstElementChild.cloneNode(true);
      r.querySelectorAll('input,textarea').forEach(function(el){ el.value=''; });
      r.querySelectorAll('img').forEach(function(el){ el.remove(); });   // drop the existing-image preview
      rows.appendChild(r);
    }
    function vidSource(sel){
      var g = sel.closest('[data-bf], form');
      var yt = g.querySelector('.vid-youtube'), up = g.querySelector('.vid-upload');
      if(yt) yt.classList.toggle('hidden', sel.value !== 'youtube');
      if(up) up.classList.toggle('hidden', sel.value !== 'upload');
    }
    function addKcRow(btn){
      var rows = btn.previousElementSibling; var idx = rows.querySelectorAll('.kc-row').length;
      var r = rows.firstElementChild.cloneNode(true);
      r.querySelector('input[type=radio]').value = idx; r.querySelector('input[type=radio]').checked = false;
      r.querySelector('input[type=text]').value = ''; rows.appendChild(r);
    }
    bfShow(document.getElementById('blockType').value);
  </script>

@endsection