@extends('layouts.app')

@section('title', __('inventory.page_title', ['name' => $character->CharName16]))

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900">
 <div class="container mx-auto px-4 py-8">
 <!-- Character Header -->
 <div class="text-center mb-8">
 <h1 class="text-4xl font-bold text-white mb-2">
 {{ __('inventory.equipment_title', ['name' => $character->CharName16]) }}
 </h1>
 <p class="text-slate-300">{{ __('inventory.character_id') }} {{ $character->CharID }}</p>
 <p class="text-slate-400">{{ __('inventory.level') }} {{ $character->CurLevel ?? 1 }} - {{ __('inventory.job') }} {{ $character->JobType ?? 0 }}</p>
 </div>

 <!-- Inventory Component -->
 <div class="flex justify-center">
 <x-silkroad-inventory
 :char-id="$character->CharID"
 :items="$equipment"
 />
 </div>

 <!-- Additional Character Info -->
 <div class="mt-8 bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-lg p-6 max-w-2xl mx-auto">
 <h3 class="text-xl font-semibold text-white mb-4">{{ __('inventory.character_info') }}</h3>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
 <div>
 <span class="text-slate-400">{{ __('inventory.name') }}</span>
 <span class="text-white ml-2">{{ $character->CharName16 }}</span>
 </div>
 <div>
 <span class="text-slate-400">{{ __('inventory.level') }}</span>
 <span class="text-white ml-2">{{ $character->CurLevel ?? 1 }}</span>
 </div>
 <div>
 <span class="text-slate-400">{{ __('inventory.experience') }}</span>
 <span class="text-white ml-2">{{ number_format($character->ExpOffset ?? 0) }}</span>
 </div>
 <div>
 <span class="text-slate-400">{{ __('inventory.gold') }}</span>
 <span class="text-yellow-400 ml-2">{{ number_format($character->RemainGold ?? 0) }}</span>
 </div>
 <div>
 <span class="text-slate-400">{{ __('inventory.hp') }}</span>
 <span class="text-red-400 ml-2">{{ $character->HP ?? 0 }}</span>
 </div>
 <div>
 <span class="text-slate-400">{{ __('inventory.mp') }}</span>
 <span class="text-blue-400 ml-2">{{ $character->MP ?? 0 }}</span>
 </div>
 </div>
 </div>

 <!-- Back Button -->
 <div class="text-center mt-8">
 <a href="{{ url()->previous() }}"
 class="inline-flex items-center px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white font-medium rounded-lg transition-colors duration-200">
 <i class="fas fa-arrow-left mr-2"></i>
 {{ __('common.back_to_characters') }}
 </a>
 </div>
 </div>
</div>

@push('scripts')
<script>
// Optional: Add any custom JavaScript for inventory interactions
document.addEventListener('DOMContentLoaded', function() {
 // Add hover effects or click handlers for inventory items
 const inventorySlots = document.querySelectorAll('.inventory-slot');

 inventorySlots.forEach(slot => {
 slot.addEventListener('mouseenter', function() {
 const slotName = this.dataset.slotName;
 if (slotName) {
 console.log('Hovering over slot:', slotName);
 }
 });
 });
});
</script>
@endpush
@endsection