@php
  $isEdit = $session->exists;
  $action = $isEdit ? route('trainer.sessions.update', $session) : route('trainer.sessions.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';
  $dateVal = old('session_date', optional($session->session_date)->format('Y-m-d'));
  $timeVal = old('start_time', $session->start_time ? \Carbon\Carbon::parse($session->start_time)->format('H:i') : '');
  $formatVal = old('format', $session->format ?? 'online');
@endphp

<form method="POST" action="{{ $action }}" class="max-w-3xl space-y-stack-lg">
  @csrf
  @if($isEdit) @method('PUT') @endif

  <div class="surface-card rounded-xl p-6 space-y-4">
    <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
      <div class="sm:col-span-3">
        <label class="{{ $label }}">Session Title <span class="text-error">*</span></label>
        <input type="text" name="title" value="{{ old('title', $session->title) }}" placeholder="e.g. Manual Handling (Practical)" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Training Code</label>
        <input type="text" name="training_code" value="{{ old('training_code', $session->training_code) }}" placeholder="e.g. MH-01" class="{{ $input }}">
      </div>
    </div>
    <p class="text-label-md font-label-md text-outline -mt-2">
      The training code identifies the topic. Workers who have already completed a training with the same code can't be booked onto it again.
    </p>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <div>
        <label class="{{ $label }}">Date <span class="text-error">*</span></label>
        <input type="date" name="session_date" value="{{ $dateVal }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Start Time <span class="text-error">*</span></label>
        <input type="time" name="start_time" value="{{ $timeVal }}" class="{{ $input }}">
      </div>
      <div>
        <label class="{{ $label }}">Duration (min) <span class="text-error">*</span></label>
        <input type="number" name="duration_minutes" value="{{ old('duration_minutes', $session->duration_minutes ?? 60) }}" min="5" class="{{ $input }}">
      </div>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
      <div>
        <label class="{{ $label }}">Format <span class="text-error">*</span></label>
        <select name="format" id="sessionFormat" class="{{ $input }}">
          <option value="online" @selected($formatVal === 'online')>Online</option>
          <option value="in_person" @selected($formatVal === 'in_person')>In-Person</option>
        </select>
      </div>
      <div>
        <label class="{{ $label }}">Capacity <span class="text-outline">(optional)</span></label>
        <input type="number" name="capacity" value="{{ old('capacity', $session->capacity) }}" min="1" placeholder="No limit" class="{{ $input }}">
      </div>
    </div>

    <div data-format-field="in_person" class="{{ $formatVal === 'in_person' ? '' : 'hidden' }}">
      <label class="{{ $label }}">Location <span class="text-error">*</span></label>
      <input type="text" name="location" value="{{ old('location', $session->location) }}" placeholder="e.g. Training Room B, Head Office" class="{{ $input }}">
    </div>
    <div data-format-field="online" class="{{ $formatVal === 'online' ? '' : 'hidden' }}">
      <label class="{{ $label }}">Teams / Meeting Link <span class="text-error">*</span></label>
      <input type="url" name="teams_link" value="{{ old('teams_link', $session->teams_link) }}" placeholder="https://teams.microsoft.com/…" class="{{ $input }}">
    </div>
  </div>

  @unless($isEdit)
    {{-- Recurrence: run this training repeatedly --}}
    <div class="surface-card rounded-xl p-6 space-y-4">
      <div class="flex items-center gap-2">
        <span class="material-symbols-outlined text-primary">repeat</span>
        <div>
          <h3 class="text-headline-md font-headline-md text-on-surface">Repeat this training</h3>
          <p class="text-label-md font-label-md text-outline">Create a whole series in one go — e.g. every weekday for 6 months.</p>
        </div>
      </div>

      <div>
        <label class="{{ $label }}">Repeats</label>
        <select name="repeat" id="repeatSelect" class="{{ $input }} sm:max-w-xs">
          @foreach(['none' => 'Does not repeat', 'daily' => 'Every day', 'weekly' => 'Weekly (choose days)', 'monthly' => 'Monthly (same date)'] as $v => $l)
            <option value="{{ $v }}" @selected(old('repeat', 'none') === $v)>{{ $l }}</option>
          @endforeach
        </select>
      </div>

      <div id="repeatOptions" class="{{ old('repeat', 'none') === 'none' ? 'hidden' : '' }} space-y-4">
        <div id="repeatDays" class="{{ old('repeat') === 'weekly' ? '' : 'hidden' }}">
          <label class="{{ $label }}">On these days</label>
          <div class="flex flex-wrap gap-2">
            @foreach([1 => 'Mon', 2 => 'Tue', 3 => 'Wed', 4 => 'Thu', 5 => 'Fri', 6 => 'Sat', 7 => 'Sun'] as $iso => $dow)
              <label class="inline-flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-container cursor-pointer hover:bg-surface-container-high">
                <input type="checkbox" name="repeat_days[]" value="{{ $iso }}" @checked(in_array($iso, (array) old('repeat_days', []))) class="w-4 h-4 rounded border-outline-variant text-primary">
                <span class="text-label-md font-label-md text-on-surface-variant">{{ $dow }}</span>
              </label>
            @endforeach
          </div>
          <p class="text-label-md font-label-md text-outline mt-1.5">Leave all unticked to use the start date's weekday.</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
          <div>
            <label class="{{ $label }}">Ends</label>
            <select name="repeat_end" id="repeatEnd" class="{{ $input }}">
              <option value="months" @selected(old('repeat_end', 'months') === 'months')>After a number of months</option>
              <option value="date" @selected(old('repeat_end') === 'date')>On a specific date</option>
            </select>
          </div>
          <div id="repeatMonthsWrap" class="{{ old('repeat_end') === 'date' ? 'hidden' : '' }}">
            <label class="{{ $label }}">Duration</label>
            <select name="repeat_months" class="{{ $input }}">
              @foreach([1 => '1 month', 3 => '3 months', 6 => '6 months', 12 => '12 months'] as $v => $l)
                <option value="{{ $v }}" @selected((int) old('repeat_months', 1) === $v)>{{ $l }}</option>
              @endforeach
            </select>
          </div>
          <div id="repeatUntilWrap" class="{{ old('repeat_end') === 'date' ? '' : 'hidden' }}">
            <label class="{{ $label }}">Until</label>
            <input type="date" name="repeat_until" value="{{ old('repeat_until') }}" class="{{ $input }}">
          </div>
        </div>

        <p class="text-label-md font-label-md text-outline flex items-start gap-1.5">
          <span class="material-symbols-outlined text-[16px]">info</span>
          Each occurrence becomes its own session, so bookings, attendance and notes are tracked separately. Max 500 occurrences.
        </p>
      </div>
    </div>
  @endunless

  <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 Session' }}
    </button>

    <a href="{{ route('trainer.sessions.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>

<script>
  (function () {
    var select = document.getElementById('sessionFormat');
    if (!select) return;
    function sync() {
      document.querySelectorAll('[data-format-field]').forEach(function (el) {
        el.classList.toggle('hidden', el.getAttribute('data-format-field') !== select.value);
      });
    }
    select.addEventListener('change', sync);
    sync();
  })();

  // Recurrence option toggles
  (function () {
    var repeat = document.getElementById('repeatSelect');
    if (!repeat) return;
    var opts = document.getElementById('repeatOptions');
    var days = document.getElementById('repeatDays');
    var end = document.getElementById('repeatEnd');
    var monthsWrap = document.getElementById('repeatMonthsWrap');
    var untilWrap = document.getElementById('repeatUntilWrap');

    function syncRepeat() {
      var on = repeat.value !== 'none';
      opts.classList.toggle('hidden', !on);
      days.classList.toggle('hidden', repeat.value !== 'weekly');
    }
    function syncEnd() {
      var byDate = end.value === 'date';
      monthsWrap.classList.toggle('hidden', byDate);
      untilWrap.classList.toggle('hidden', !byDate);
    }
    repeat.addEventListener('change', syncRepeat);
    end.addEventListener('change', syncEnd);
    syncRepeat(); syncEnd();
  })();
</script>