@extends('admin.layouts.app')

@php
    use App\Support\AdminOptions;

    $editing = $hero->exists;
    $json = fn (?array $value) => $value ? json_encode($value, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) : '';
    $selectedRoles = old('roles', $hero->roles ?? []);
@endphp

@section('title', $editing ? "Ubah {$hero->name}" : 'Buat Hero')

@section('breadcrumb')
  <li class="breadcrumb-item"><a href="{{ route('admin.heroes.index') }}">Hero</a></li>
  <li class="breadcrumb-item active" aria-current="page">{{ $editing ? 'Ubah' : 'Buat' }}</li>
@endsection

@section('actions')
  @if ($editing)
    <a href="{{ url('/hero/'.$hero->slug) }}" target="_blank" rel="noopener" class="btn btn-outline-secondary"><i class="bi bi-box-arrow-up-right"></i> Lihat di situs</a>
    <form method="POST" action="{{ route('admin.heroes.destroy', $hero) }}" data-confirm="Hapus hero {{ $hero->name }} beserta datanya?">
      @csrf
      @method('DELETE')
      <button type="submit" class="btn btn-outline-danger"><i class="bi bi-trash"></i> Hapus</button>
    </form>
  @endif
  <button type="submit" form="hero-form" class="btn btn-primary"><i class="bi bi-check2-circle"></i> Simpan</button>
@endsection

@section('content')
  <form id="hero-form" method="POST" enctype="multipart/form-data" novalidate
        action="{{ $editing ? route('admin.heroes.update', $hero) : route('admin.heroes.store') }}">
    @csrf
    @if ($editing) @method('PUT') @endif

    <div class="row g-4">
      <div class="col-lg-8">
        <x-admin.card title="Informasi utama hero">
          <div class="row g-3">
            <div class="col-md-6"><x-admin.input name="name" label="Nama hero" :value="$hero->name" required data-slug-source="#f-slug" /></div>
            <div class="col-md-6"><x-admin.input name="slug" label="Slug" :value="$hero->slug" help="Dipakai di URL /hero/slug. Otomatis dari nama." /></div>

            <div class="col-12">
              <div class="admin-field">
                <span class="form-label d-block">Role <span class="text-danger">*</span></span>
                <div class="admin-chip-group">
                  @foreach (AdminOptions::ROLES as $value => $label)
                    <input type="checkbox" class="btn-check" name="roles[]" id="role-{{ $value }}" value="{{ $value }}" @checked(in_array($value, $selectedRoles))>
                    <label class="btn btn-outline-primary btn-sm" for="role-{{ $value }}">{{ $label }}</label>
                  @endforeach
                </div>
                @error('roles')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
              </div>
            </div>

            <div class="col-md-6"><x-admin.select name="tier" label="Tier list" :options="AdminOptions::HERO_TIERS" :value="$hero->tier" required /></div>
            <div class="col-md-6"><x-admin.select name="difficulty" label="Tingkat kesulitan" :options="AdminOptions::DIFFICULTIES" :value="$hero->difficulty" placeholder="—" /></div>
            <div class="col-md-6"><x-admin.select name="lane" label="Lane rekomendasi" :options="AdminOptions::LANES" :value="$hero->lane" placeholder="—" /></div>
            <div class="col-md-6"><x-admin.select name="lane_main" label="Lane utama" :options="AdminOptions::LANES" :value="$hero->lane_main" placeholder="—" /></div>
            <div class="col-md-8"><x-admin.input name="specialty" label="Spesialisasi" :value="$hero->specialty" placeholder="Contoh: Burst / Reap, Chase / Damage" /></div>
            <div class="col-md-4"><x-admin.input name="release_year" label="Tahun rilis" :value="$hero->release_year" inputmode="numeric" placeholder="2020" /></div>
          </div>
        </x-admin.card>
      </div>

      <div class="col-lg-4">
        <x-admin.card title="Statistik & media">
          <div class="row g-3">
            <div class="col-sm-4 col-lg-12"><x-admin.input name="win_rate" label="Win rate" type="number" step="0.01" min="0" max="100" :value="$hero->win_rate" suffix="%" required /></div>
            <div class="col-sm-4 col-lg-12"><x-admin.input name="pick_rate" label="Pick rate" type="number" step="0.01" min="0" max="100" :value="$hero->pick_rate" suffix="%" required /></div>
            <div class="col-sm-4 col-lg-12"><x-admin.input name="ban_rate" label="Ban rate" type="number" step="0.01" min="0" max="100" :value="$hero->ban_rate" suffix="%" required /></div>
            <div class="col-sm-6 col-lg-12"><x-admin.image name="avatar" label="Avatar hero" :current="$hero->avatar_url" help="WEBP, PNG, atau JPG, maks 5 MB." /></div>
            <div class="col-sm-6 col-lg-12"><x-admin.image name="splash" label="Splash art / banner" :current="$hero->splash_url" help="Maks 10 MB." /></div>
          </div>
        </x-admin.card>
      </div>

      <div class="col-12">
        <x-admin.card title="Counter emblem & spell" subtitle="Pisahkan dengan koma, atau klik saran di bawah kolom.">
          <div class="row g-3">
            <div class="col-md-6">
              <x-admin.input name="counter_emblems" label="Counter emblem / talent" :value="implode(', ', $hero->counter_emblems ?? [])" />
              <div class="admin-suggest" aria-label="Saran talent emblem">
                @foreach ($emblemNames as $name)
                  <button type="button" class="btn btn-sm btn-outline-secondary" data-append-to="#f-counter_emblems" data-value="{{ $name }}">{{ $name }}</button>
                @endforeach
              </div>
            </div>
            <div class="col-md-6">
              <x-admin.input name="counter_spells" label="Counter battle spell" :value="implode(', ', $hero->counter_spells ?? [])" />
              <div class="admin-suggest" aria-label="Saran battle spell">
                @foreach ($spellNames as $name)
                  <button type="button" class="btn btn-sm btn-outline-secondary" data-append-to="#f-counter_spells" data-value="{{ $name }}">{{ $name }}</button>
                @endforeach
              </div>
            </div>
          </div>
        </x-admin.card>
      </div>

      <div class="col-12">
        <details class="card admin-card admin-details" @if ($errors->hasAny(\App\Http\Requests\Admin\HeroRequest::JSON_FIELDS)) open @endif>
          <summary class="card-header">
            <span class="admin-card__title">Data lanjutan: builds, matchups, items (JSON)</span>
            <span class="admin-card__subtitle">Format data terstruktur untuk build, counter item, dan matchup hero.</span>
          </summary>
          <div class="card-body">
            <div class="row g-3">
              <div class="col-12"><x-admin.textarea name="builds" label="Pro builds" :value="$json($hero->builds)" rows="8" mono /></div>
              <div class="col-12"><x-admin.textarea name="matchups" label="Matchups" :value="$json($hero->matchups)" rows="8" mono /></div>
              <div class="col-md-6"><x-admin.textarea name="weaknesses" label="Weak against / dikonter oleh" :value="$json($hero->weaknesses)" rows="6" mono /></div>
              <div class="col-md-6"><x-admin.textarea name="strengths" label="Strong against / unggul melawan" :value="$json($hero->strengths)" rows="6" mono /></div>
              <div class="col-12"><x-admin.textarea name="counter_items" label="Counter item rekomendasi" :value="$json($hero->counter_items)" rows="6" mono /></div>
            </div>
          </div>
        </details>
      </div>
    </div>

    <x-admin.form-actions :cancel="route('admin.heroes.index')" />
  </form>

  @if ($editing)
    <x-admin.card title="Skin {{ $hero->name }}" id="skins" class="mt-4">
      <x-slot:actions>
        <a href="{{ route('admin.hero-skins.create', ['hero_id' => $hero->id, 'from_hero' => 1]) }}" class="btn btn-sm btn-primary"><i class="bi bi-plus-lg"></i> Tambah skin</a>
      </x-slot:actions>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0 admin-table">
          <thead>
            <tr>
              <th>Skin</th>
              <th>Rarity</th>
              <th class="d-none d-md-table-cell">Status</th>
              <th class="d-none d-md-table-cell">Diamond</th>
              <th class="d-none d-lg-table-cell">Rilis</th>
              <th class="text-end"><span class="visually-hidden">Aksi</span></th>
            </tr>
          </thead>
          <tbody>
            @forelse ($hero->skins as $skin)
              <tr>
                <td>
                  <span class="admin-table__name">
                    <x-admin.thumb :src="$skin->image_url" :alt="$skin->name" />
                    <span>{{ $skin->name }}</span>
                  </span>
                </td>
                <td><span class="badge text-bg-{{ AdminOptions::skinTagColor($skin->tag) }}">{{ $skin->tag ?: '—' }}</span></td>
                <td class="d-none d-md-table-cell"><span class="badge text-bg-{{ AdminOptions::availabilityColor($skin->availability) }}">{{ $skin->availability ?: '—' }}</span></td>
                <td class="d-none d-md-table-cell">{{ $skin->price_diamonds ? number_format($skin->price_diamonds).' 💎' : '—' }}</td>
                <td class="d-none d-lg-table-cell">{{ $skin->release_date ?: '—' }}</td>
                <td class="text-end">
                  <x-admin.row-actions :edit="route('admin.hero-skins.edit', ['hero_skin' => $skin, 'from_hero' => 1])" :delete="route('admin.hero-skins.destroy', $skin)" :name="$skin->name" />
                </td>
              </tr>
            @empty
              <tr><td colspan="6" class="text-center text-body-secondary py-4">Belum ada skin untuk hero ini.</td></tr>
            @endforelse
          </tbody>
        </table>
      </div>
    </x-admin.card>
  @endif
@endsection