@extends('layouts.app')
@section('title', 'Course Images')
@section('content')

  @include('partials.flash')

  <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">Images · {{ $course->title }}</h3>
      <p class="text-label-md font-label-md text-outline">
        {{ $total }} image {{ \Illuminate\Support\Str::plural('slot', $total) }} ·
        <span class="text-gold font-bold">{{ $needing }}</span> still need a real image
      </p>
    </div>
  </div>

  <form method="POST" action="{{ route('admin.courses.images.update', $course) }}" enctype="multipart/form-data" id="img-form" class="space-y-stack-lg">
    @csrf

    {{-- Bulk uploader --}}
    <div class="surface-card rounded-xl p-6">
      <div class="flex items-start gap-3">
        <span class="material-symbols-outlined text-primary">upload</span>
        <div class="flex-1 min-w-0">
          <h4 class="text-body-lg font-body-lg text-on-surface font-bold">Bulk upload</h4>
          <p class="text-body-md font-body-md text-on-surface-variant mt-1">
            Pick several images at once. They fill the placeholder slots below <span class="font-bold">in course order</span> (top to bottom).
            Review the mapping in the cards, adjust any you like, then <span class="font-bold">Save all</span>.
          </p>
          <div class="flex flex-wrap items-center gap-3 mt-3">
            <input type="file" id="bulk-input" accept="image/*" multiple
                   class="text-body-md text-on-surface-variant file:mr-3 file:py-2 file:px-4 file:rounded-lg file:border-0 file:bg-primary file:text-on-primary file:text-label-md file:font-bold file:cursor-pointer">
            <span id="bulk-summary" class="text-label-md font-label-md text-outline"></span>
          </div>
        </div>
      </div>
    </div>

    @foreach($groups as $group)
      @if(count($group['slots']))
        <div class="surface-card rounded-xl p-6">
          <h4 class="text-body-lg font-body-lg text-on-surface font-bold mb-4">{{ $group['label'] }}</h4>
          <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
            @foreach($group['slots'] as $slot)
              @php $needs = $slot['status'] !== 'custom'; @endphp
              <div class="rounded-xl border border-outline-variant overflow-hidden flex flex-col">
                <div class="relative bg-surface-container-high {{ $slot['shape'] === 'square' ? 'aspect-square' : 'aspect-video' }} flex items-center justify-center">
                  <img data-preview
                       src="{{ $slot['preview'] }}"
                       alt=""
                       class="w-full h-full object-contain {{ $slot['preview'] ? '' : 'hidden' }}">
                  <span data-empty class="material-symbols-outlined text-outline {{ $slot['preview'] ? 'hidden' : '' }}">image</span>
                  {{-- status badge --}}
                  @if($slot['status'] === 'placeholder')
                    <span data-badge class="absolute top-2 left-2 px-2 py-0.5 rounded-full text-[10px] font-bold bg-gold/20 text-[#8a6d3b]">Placeholder</span>
                  @elseif($slot['status'] === 'empty')
                    <span data-badge class="absolute top-2 left-2 px-2 py-0.5 rounded-full text-[10px] font-bold bg-error-container text-error">Empty</span>
                  @else
                    <span data-badge class="absolute top-2 left-2 px-2 py-0.5 rounded-full text-[10px] font-bold bg-primary/10 text-primary">Custom</span>
                  @endif
                </div>
                <div class="p-3 flex flex-col gap-2 flex-1">
                  <p class="text-label-md font-label-md text-on-surface leading-snug">{{ $slot['label'] }}</p>
                  <label class="mt-auto inline-flex items-center gap-1.5 text-label-md font-label-md text-primary font-bold cursor-pointer hover:underline">
                    <span class="material-symbols-outlined text-[16px]">edit</span>
                    <span data-replace-label>Replace</span>
                    <input type="file" name="img[{{ $slot['id'] }}]" accept="image/*"
                           data-slot data-needs="{{ $needs ? 1 : 0 }}" class="hidden">
                  </label>
                </div>
              </div>
            @endforeach
          </div>
        </div>
      @endif
    @endforeach

    <div class="sticky bottom-0 -mx-4 sm:mx-0 px-4 sm:px-0 py-3 bg-surface/80 backdrop-blur 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 inline-flex items-center gap-2">
        <span class="material-symbols-outlined text-[18px]">save</span> Save all images
      </button>
      <span id="changed-count" class="text-label-md font-label-md text-outline"></span>
    </div>
  </form>

  <script>
    (function () {
      var slots = Array.prototype.slice.call(document.querySelectorAll('[data-slot]'));

      function assign(input, file) {
        var dt = new DataTransfer();
        dt.items.add(file);
        input.files = dt.files;
        input.dispatchEvent(new Event('change', { bubbles: true }));
      }

      // Per-slot: preview the chosen file and mark the card as changed.
      slots.forEach(function (input) {
        input.addEventListener('change', function () {
          var card = input.closest('.rounded-xl');
          var img = card.querySelector('[data-preview]');
          var empty = card.querySelector('[data-empty]');
          var badge = card.querySelector('[data-badge]');
          var label = card.querySelector('[data-replace-label]');
          if (input.files && input.files[0]) {
            var url = URL.createObjectURL(input.files[0]);
            img.src = url; img.classList.remove('hidden');
            if (empty) empty.classList.add('hidden');
            if (badge) { badge.textContent = 'New'; badge.className = badge.className.replace(/bg-\S+|text-\S+|text-\[#\w+\]/g, '') + ' bg-primary text-on-primary'; }
            if (label) label.textContent = 'Change';
            input.dataset.changed = '1';
          }
          updateCount();
        });
      });

      function updateCount() {
        var n = slots.filter(function (s) { return s.dataset.changed === '1'; }).length;
        document.getElementById('changed-count').textContent = n ? (n + ' image' + (n === 1 ? '' : 's') + ' ready to save') : '';
      }

      // Bulk: distribute files into placeholder/empty slots in course order.
      var bulk = document.getElementById('bulk-input');
      var summary = document.getElementById('bulk-summary');
      bulk.addEventListener('change', function () {
        var files = Array.prototype.slice.call(bulk.files || []);
        if (!files.length) return;
        var targets = slots.filter(function (s) { return s.dataset.needs === '1'; });
        var placed = 0;
        files.forEach(function (file) {
          if (placed < targets.length) { assign(targets[placed], file); placed++; }
        });
        var extra = files.length - placed;
        summary.textContent = placed + ' file' + (placed === 1 ? '' : 's') + ' mapped to placeholder slots'
          + (extra > 0 ? ' · ' + extra + ' extra (assign manually below)' : '');
        summary.className = 'text-label-md font-label-md ' + (extra > 0 ? 'text-gold font-bold' : 'text-primary font-bold');
        bulk.value = '';
      });
    })();
  </script>
@endsection