@extends('admin.layouts.app')

@php use App\Support\AdminOptions; @endphp

@section('title', 'Skin Hero')

@section('actions')
  @include('admin.partials.scraper-button', [
      'task' => 'skins', 'label' => 'Scrape Skin Hero', 'icon' => 'images', 'variant' => 'outline-warning',
      'confirm' => 'Kumpulkan seluruh skin hero (nama, tier, rarity, harga, splash art) dari Fandom Wiki ke database?',
  ])
  <a href="{{ route('admin.hero-skins.create') }}" class="btn btn-primary"><i class="bi bi-plus-lg"></i> Buat Skin</a>
@endsection

@section('content')
  <div class="card admin-card">
    <div class="card-header">
      <x-admin.toolbar :action="route('admin.hero-skins.index')" placeholder="Cari skin atau hero…" :filters="['hero_id', 'tag', 'availability']">
        <x-admin.filter-select name="hero_id" :options="$heroes" placeholder="Semua hero" />
        <x-admin.filter-select name="tag" :options="$tags->combine($tags)" placeholder="Semua rarity" />
        <x-admin.filter-select name="availability" :options="AdminOptions::SKIN_AVAILABILITY" placeholder="Semua status" />
      </x-admin.toolbar>
      <x-admin.bulk-delete :action="route('admin.hero-skins.bulk-destroy')" label="skin" />
    </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="Skin" /></th>
            <th class="d-none d-md-table-cell">Hero</th>
            <th><x-admin.sort-link column="tag" label="Rarity" /></th>
            <th class="d-none d-lg-table-cell">Status</th>
            <th class="d-none d-md-table-cell"><x-admin.sort-link column="price_diamonds" label="Diamond" /></th>
            <th class="d-none d-xl-table-cell"><x-admin.sort-link column="release_date" label="Rilis" /></th>
            <th class="text-end"><span class="visually-hidden">Aksi</span></th>
          </tr>
        </thead>
        <tbody>
          @forelse ($skins as $skin)
            <tr>
              <td class="admin-table__check"><x-admin.row-check :value="$skin->id" /></td>
              <td>
                <a href="{{ route('admin.hero-skins.edit', $skin) }}" class="admin-table__name">
                  <x-admin.thumb :src="$skin->image_url" :alt="$skin->name" />
                  <span>
                    {{ $skin->name }}
                    <small class="d-block d-md-none text-body-secondary">{{ $skin->hero?->name }}</small>
                  </span>
                </a>
              </td>
              <td class="d-none d-md-table-cell">{{ $skin->hero?->name ?? '—' }}</td>
              <td><span class="badge text-bg-{{ AdminOptions::skinTagColor($skin->tag) }}">{{ $skin->tag ?: '—' }}</span></td>
              <td class="d-none d-lg-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-xl-table-cell">{{ $skin->release_date ?: '—' }}</td>
              <td class="text-end">
                <x-admin.row-actions :edit="route('admin.hero-skins.edit', $skin)" :delete="route('admin.hero-skins.destroy', $skin)" :name="$skin->name" />
              </td>
            </tr>
          @empty
            <tr><td colspan="8" class="text-center text-body-secondary py-5">Belum ada skin. Jalankan "Scrape Skin Hero" atau buat manual.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>

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