@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\Person $mePerson */
    /** @var \Illuminate\Support\Collection<int, \App\Models\Person> $people */
  @endphp

  <div class="min-h-screen safe-bottom bg-background animate-sheet-up">
    <div class="app-page-wrap pt-6 md:pt-6 lg:pt-8 pb-10 md:pb-10 space-y-7">
      <x-sheet-handle />

      <x-page-header title="{{ __('Create group') }}" back>
        <x-slot:right>
          <x-sheet-save-button form="create-group-form" disabled />
        </x-slot:right>
      </x-page-header>

      <x-error-alert />

      <form id="create-group-form" method="POST" action="{{ route('app.create-group.store') }}" class="space-y-7">
        @csrf

        <div class="text-center py-4">
          <div id="typeEmoji" class="w-20 h-20 rounded-[22px] bg-primary-muted flex items-center justify-center text-[40px] mx-auto mb-5">
            🏠
          </div>
          <input
            type="text"
            name="name"
            placeholder="{{ __('Group name') }}"
            class="text-[24px] font-bold text-foreground bg-transparent outline-none text-center w-full placeholder:text-muted-foreground/25 tracking-tight"
            required
            autofocus
            data-name
          />
        </div>

        <div>
          <p class="section-header mb-3 px-1">{{ __('Context') }}</p>
          <div class="grid grid-cols-3 gap-2.5">
            @foreach ([
              ['type' => 'home', 'emoji' => '🏠', 'label' => __('Home'), 'desc' => __('Roommates, family')],
              ['type' => 'trip', 'emoji' => '✈️', 'label' => __('Trip'), 'desc' => __('Travel together')],
              ['type' => 'event', 'emoji' => '🎉', 'label' => __('Event'), 'desc' => __('Parties, plans')],
            ] as $opt)
              <label class="flex flex-col items-center gap-1.5 py-5 rounded-2xl text-[13px] font-medium transition-all duration-200 cursor-pointer {{ $opt['type'] === 'home' ? 'bg-primary text-primary-foreground shadow-sm' : 'apple-card text-foreground' }}">
                <input type="radio" name="type" value="{{ $opt['type'] }}" class="hidden" {{ $opt['type'] === 'home' ? 'checked' : '' }} data-emoji="{{ $opt['emoji'] }}" />
                <span class="text-2xl mb-0.5">{{ $opt['emoji'] }}</span>
                <span class="font-semibold">{{ $opt['label'] }}</span>
                <span class="text-[11px] {{ $opt['type'] === 'home' ? 'text-primary-foreground/70' : 'text-muted-foreground' }}">{{ $opt['desc'] }}</span>
              </label>
            @endforeach
          </div>
        </div>

        <x-member-selector
          :me-person="$mePerson"
          :people="$people"
          title="{{ __('Members') }}"
          description="{{ __('Choose who should start in this group.') }}"
        />

        <x-invite-email-panel />

        <button
          type="submit"
          class="w-full py-4 rounded-2xl bg-primary text-primary-foreground text-[17px] font-semibold disabled:opacity-30 transition-opacity active:scale-[0.98]"
        >
          {{ __('Create') }}
        </button>
      </form>
    </div>
  </div>

  <script>
    (function () {
      const emoji = document.getElementById('typeEmoji');
      if (!emoji) return;
      const radios = document.querySelectorAll('input[name="type"]');
      const saveBtn = document.querySelector('[data-save-btn]');
      const nameInput = document.querySelector('[data-name]');

      function setActive() {
        radios.forEach((r) => {
          const label = r.closest('label');
          if (!label) return;
          label.classList.remove('bg-primary','text-primary-foreground','shadow-sm');
          label.classList.remove('apple-card','text-foreground');
          if (r.checked) {
            label.classList.add('bg-primary','text-primary-foreground','shadow-sm');
          } else {
            label.classList.add('apple-card','text-foreground');
          }
        });
      }
      function syncSaveEnabled() {
        if (!saveBtn || !nameInput) return;
        saveBtn.disabled = String(nameInput.value || '').trim() === '';
      }
      radios.forEach((r) => r.addEventListener('change', () => {
        emoji.textContent = r.dataset.emoji || '📁';
        setActive();
      }));
      nameInput?.addEventListener('input', syncSaveEnabled);
      setActive();
      syncSaveEnabled();
    })();
  </script>
@endsection