@extends('app')

@section('titulo', 'Buscar Jugador')

@section('styles')
<style>
    .search-title {
        font-size: 2.5rem;
        color: var(--accent);
        text-align: center;
        margin-bottom: 10px;
        font-weight: 900;
    }

    .search-subtitle {
        color: var(--text-secondary);
        font-size: 1.1rem;
        text-align: center;
        margin-bottom: 30px;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: var(--text-secondary);
    }

    .empty-state h2 {
        font-size: 3rem;
        margin-bottom: 20px;
        color: var(--primary);
    }

    .empty-state p {
        font-size: 1rem;
        margin: 10px 0;
        color: var(--text-secondary);
    }

    .helper-text {
        background: var(--card-bg);
        padding: 20px;
        border-radius: 8px;
        border-left: 4px solid var(--accent);
        margin-top: 20px;
        text-align: left;
    }
</style>
@endsection

@section('content')

<div style="margin-bottom: 30px;">
    <h1 class="search-title">👤 Buscador de Jugadores</h1>
    <p class="search-subtitle">Busca información de jugadores y sus clanes en Clash Royale</p>
</div>

<div class="search-container">
    <form action="{{ route('player.search') }}" method="get" class="search-form">
        <input type="text" name="playerTag" placeholder="Ejemplo: #ABCD1234" 
               value="{{ $playerTag ?? '' }}" required>
        <button type="submit">🔍 Buscar Jugador</button>
    </form>
</div>

@if($error ?? null)
    <div class="error-message">
        ⚠️ {{ $error }}
    </div>
@endif

@if(!isset($player) || !$player)
    <div class="empty-state">
        <h2>🔍</h2>
        <p>Ingresa la etiqueta de un jugador para comenzar</p>
        
        <div class="helper-text">
            <strong style="color: var(--primary);">💡 Formato de etiqueta:</strong>
            <p style="margin: 10px 0;">Las etiquetas en Clash Royale tienen el formato <strong>#ABCD1234</strong></p>
            <p style="margin: 10px 0;">Ejemplo válido: <strong>#2P8U2LRU8</strong></p>
        </div>
    </div>
@endif

@endsection