@extends('admin.layouts.app')

@php
    use App\Support\AdminOptions;

    $editing = $skin->exists;
    $cancel = $fromHero && $skin->hero_id ? route('admin.heroes.edit', $skin->hero_id).'#skins' : route('admin.hero-skins.index');
@endphp

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

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

@section('actions')
  <button type="submit" form="skin-form" class="btn btn-primary"><i class="bi bi-check2-circle"></i> Simpan</button>
@endsection

@section('content')
  <form id="skin-form" method="POST" novalidate
        action="{{ $editing ? route('admin.hero-skins.update', $skin) : route('admin.hero-skins.store') }}">
    @csrf
    @if ($editing) @method('PUT') @endif
    @if ($fromHero) <input type="hidden" name="from_hero" value="1"> @endif

    <div class="row g-4">
      <div class="col-lg-8">
        <x-admin.card title="Informasi skin hero">
          <div class="row g-3">
            <div class="col-md-6"><x-admin.select name="hero_id" label="Hero" :options="$heroes" :value="$skin->hero_id" placeholder="Pilih hero…" required /></div>
            <div class="col-md-6"><x-admin.input name="skin_id" label="Game skin ID" :value="$skin->skin_id" placeholder="contoh: 1271" /></div>
            <div class="col-md-6"><x-admin.input name="name" label="Nama skin" :value="$skin->name" required data-slug-source="#f-slug" /></div>
            <div class="col-md-6"><x-admin.input name="slug" label="Slug" :value="$skin->slug" help="Otomatis dari nama." /></div>
            <div class="col-md-6"><x-admin.input name="tag" label="Tag / rarity" :value="$skin->tag" placeholder="Basic, Elite, Special, Epic, Collector, Legend…" required /></div>
            <div class="col-md-6"><x-admin.input name="tier" label="Tier internal" :value="$skin->tier" placeholder="Common, Deluxe, Exquisite, Grand…" /></div>
            <div class="col-12"><x-admin.input name="image" label="URL gambar / splash art" :value="$skin->image" placeholder="https://… atau images/skins/…" /></div>
            <div class="col-12"><x-admin.textarea name="features" label="Fitur & efek khusus" :value="$skin->features" rows="3" placeholder="Skill Sound, Display Scene, New Effect, Voiceover…" /></div>
          </div>
        </x-admin.card>
      </div>
      <div class="col-lg-4">
        <x-admin.card title="Ketersediaan & harga">
          <div class="row g-3">
            <div class="col-12"><x-admin.select name="availability" label="Ketersediaan" :options="AdminOptions::SKIN_AVAILABILITY" :value="$skin->availability" placeholder="—" /></div>
            <div class="col-6 col-lg-12"><x-admin.input name="price_diamonds" label="Harga diamond" type="number" min="0" :value="$skin->price_diamonds" suffix="💎" /></div>
            <div class="col-6 col-lg-12"><x-admin.input name="price_bp" label="Harga battle point" type="number" min="0" :value="$skin->price_bp" suffix="BP" /></div>
            <div class="col-6 col-lg-12"><x-admin.input name="release_date" label="Tanggal rilis" :value="$skin->release_date" placeholder="YYYY-MM-DD" /></div>
            <div class="col-6 col-lg-12"><x-admin.input name="order" label="Nomor urut" type="number" min="0" :value="$skin->order" /></div>
            @if ($skin->image_url)
              <div class="col-12"><img src="{{ $skin->image_url }}" alt="{{ $skin->name }}" class="img-fluid rounded border"></div>
            @endif
          </div>
        </x-admin.card>
      </div>
    </div>

    <x-admin.form-actions :cancel="$cancel" />
  </form>
@endsection