@extends('admin.layouts.app')

@section('title', 'Kanjis')
@section('page-title', 'Kanji Management')
@section('page-title-jp', '漢字管理')

@section('content')
<div style="margin-bottom: 20px;">
    <a href="{{ route('admin.kanjis.create') }}" class="btn" style="background-color: #3b82f6; color: white; padding: 10px 20px; border-radius: 8px; text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; border: none; cursor: pointer;">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" width="16" height="16">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
        Add Kanji
    </a>
</div>

<form method="GET">
    <x-admin.data-table 
        :headers="[
            ['label' => 'Kanji', 'sortable' => true, 'width' => '15%'],
            ['label' => 'Readings', 'sortable' => false, 'width' => '25%'],
            ['label' => 'Meaning', 'sortable' => false, 'width' => '25%'],
            ['label' => 'JLPT', 'sortable' => true, 'width' => '10%'],
            ['label' => 'Created', 'sortable' => true, 'width' => '12%'],
            ['label' => 'Actions', 'sortable' => false, 'align' => 'center', 'width' => '13%'],
        ]"
        :searchable="true"
        searchPlaceholder="Search by character or reading..."
        :hoverable="true"
        :paginator="$kanjis">
        
        @foreach ($kanjis as $kanji)
        <tr>
            <td>
                <strong style="font-size: 1.5rem; font-family: serif;">{{ $kanji->character }}</strong>
            </td>
            <td>
                <div style="font-size: 0.9em; margin-bottom: 2px;">
                    <span style="color: #64748b;">音:</span> {{ $kanji->onyomi }}
                    @if($kanji->onyomi_variation)
                        <span style="color: #94a3b8;">/ {{ $kanji->onyomi_variation }}</span>
                    @endif
                </div>
                <div style="font-size: 0.9em;">
                    <span style="color: #64748b;">訓:</span> {{ $kanji->kunyomi }}
                </div>
            </td>
            <td class="text-truncate">{{ Str::limit($kanji->explanation, 40) }}</td>
            <td>
                @if($kanji->jlpt_level)
                    <span style="background: #e2e8f0; padding: 2px 8px; border-radius: 12px; font-size: 0.85em; font-weight: 600;">
                        {{ $kanji->jlpt_level }}
                    </span>
                @else
                    <span class="text-muted">-</span>
                @endif
            </td>
            <td>{{ $kanji->created_at->format('M d, Y') }}</td>
            <td class="center">
                <div style="display: flex; gap: 8px; justify-content: center;">
                    <a href="{{ route('admin.kanjis.edit', $kanji) }}" style="padding: 6px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; color: #475569; text-decoration: none; font-size: 0.85em; font-weight: 600; transition: all 0.2s;">Edit</a>
                    <form action="{{ route('admin.kanjis.destroy', $kanji) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to delete this kanji?');">
                        @csrf
                        @method('DELETE')
                        <button type="submit" style="padding: 6px 12px; background: #fff1f2; border: 1px solid #ffe4e6; border-radius: 6px; color: #e11d48; text-decoration: none; font-size: 0.85em; font-weight: 600; cursor: pointer; transition: all 0.2s;">Delete</button>
                    </form>
                </div>
            </td>
        </tr>
        @endforeach
    </x-admin.data-table>
</form>
@endsection