@extends('admin.layouts.app')

@section('title', 'Hero')

@section('actions')
  @include('admin.partials.scraper-button', [
      'task' => 'live', 'label' => 'Scrape Live MLBBHub', 'icon' => 'cloud-download',
      'confirm' => 'Unduh statistik terbaru (Win Rate, Tier, Role) dari MLBBHub untuk seluruh hero?',
  ])
  @include('admin.partials.scraper-button', [
      'task' => 'sync', 'label' => 'Sync Master Dataset', 'icon' => 'arrow-repeat', 'variant' => 'outline-primary',
      'confirm' => 'Perbarui seluruh hero (builds, matchups, weaknesses, counters), item, spell, dan emblem dari master dataset?',
  ])
  <a href="{{ route('admin.heroes.create') }}" class="btn btn-primary"><i class="bi bi-plus-lg"></i> Buat Hero</a>
@endsection

@section('content')
  <div class="card admin-card">
    <div class="card-header">
      <x-admin.toolbar :action="route('admin.heroes.index')" placeholder="Cari nama hero…" :filters="['tier', 'lane']">
        <x-admin.filter-select name="tier" :options="['S' => 'S Tier', 'A' => 'A Tier', 'B' => 'B Tier', 'C' => 'C Tier', 'D' => 'D Tier']" placeholder="Semua tier" />
        <x-admin.filter-select name="lane" :options="\App\Support\AdminOptions::LANES" placeholder="Semua lane" />
      </x-admin.toolbar>
      <x-admin.bulk-delete :action="route('admin.heroes.bulk-destroy')" label="hero" />
    </div>

    <div class="table-responsive">
      <table class="table table-hover align-middle mb-0 admin-table">
        <thead>
          <tr>
            <th class="admin-table__check"><x-admin.check-all /></th>
            <th><x-admin.sort-link column="name" label="Hero" :default="true" /></th>
            <th class="d-none d-md-table-cell">Role</th>
            <th class="d-none d-lg-table-cell"><x-admin.sort-link column="lane" label="Lane" /></th>
            <th class="d-none d-xl-table-cell"><x-admin.sort-link column="skins_count" label="Skin" /></th>
            <th><x-admin.sort-link column="tier" label="Tier" /></th>
            <th><x-admin.sort-link column="win_rate" label="Win" /></th>
            <th class="d-none d-md-table-cell"><x-admin.sort-link column="pick_rate" label="Pick" /></th>
            <th class="d-none d-md-table-cell"><x-admin.sort-link column="ban_rate" label="Ban" /></th>
            <th class="text-end"><span class="visually-hidden">Aksi</span></th>
          </tr>
        </thead>
        <tbody>
          @forelse ($heroes as $hero)
            <tr>
              <td class="admin-table__check"><x-admin.row-check :value="$hero->id" /></td>
              <td>
                <a href="{{ route('admin.heroes.edit', $hero) }}" class="admin-table__name">
                  <x-admin.thumb :src="$hero->avatar_url" :alt="$hero->name" />
                  <span>{{ $hero->name }}</span>
                </a>
              </td>
              <td class="d-none d-md-table-cell">
                @foreach ($hero->roles ?? [] as $role)
                  <span class="badge text-bg-dark border">{{ $role }}</span>
                @endforeach
              </td>
              <td class="d-none d-lg-table-cell"><span class="badge text-bg-info-subtle text-info-emphasis">{{ $hero->lane ?? '—' }}</span></td>
              <td class="d-none d-xl-table-cell">{{ $hero->skins_count }}</td>
              <td><span class="badge text-bg-{{ \App\Support\AdminOptions::tierColor($hero->tier) }}">{{ $hero->tier }}</span></td>
              <td @class(['fw-semibold', 'text-success' => $hero->win_rate >= 52, 'text-danger' => $hero->win_rate < 48])>{{ number_format($hero->win_rate, 2) }}%</td>
              <td class="d-none d-md-table-cell">{{ number_format($hero->pick_rate, 2) }}%</td>
              <td class="d-none d-md-table-cell">{{ number_format($hero->ban_rate, 2) }}%</td>
              <td class="text-end">
                <x-admin.row-actions :edit="route('admin.heroes.edit', $hero)" :delete="route('admin.heroes.destroy', $hero)" :name="$hero->name" />
              </td>
            </tr>
          @empty
            <tr><td colspan="10" class="text-center text-body-secondary py-5">Tidak ada hero yang cocok.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div class="card-footer">
      <x-admin.pagination :paginator="$heroes" />
    </div>
  </div>
@endsection