@extends('admin.layout')

@section('title', ($jugador ? 'Editar' : 'Nuevo') . ' Jugador - Admin OnAPB')

@section('content')
<div class="page-header">
    <h2><i class="bi bi-person-badge-fill"></i> {{ $jugador ? 'Editar Jugador' : 'Nuevo Jugador' }}</h2>
    <a href="{{ route('admin.jugadores.index') }}" class="btn-admin-outline">
        <i class="bi bi-arrow-left"></i> Volver
    </a>
</div>

<div class="admin-card">
    <div class="card-body">
        <form method="POST" action="{{ $jugador ? route('admin.jugadores.update', $jugador->id_jugador) : route('admin.jugadores.store') }}" class="admin-form">
            @csrf
            @if($jugador) @method('PUT') @endif

            <div class="row">
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Documento (DNI) *</label>
                        <input type="text" name="documento" class="form-control" value="{{ old('documento', $jugador->documento ?? '') }}" required>
                        @error('documento')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Nombre *</label>
                        <input type="text" name="nombre" class="form-control" value="{{ old('nombre', $jugador->nombre ?? '') }}" required>
                        @error('nombre')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Apellido *</label>
                        <input type="text" name="apellido" class="form-control" value="{{ old('apellido', $jugador->apellido ?? '') }}" required>
                        @error('apellido')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-3">
                    <div class="mb-3">
                        <label class="form-label">Fecha de Nacimiento *</label>
                        <input type="date" name="fecha_nacimiento" id="fecha_nacimiento_input" class="form-control"
                               value="{{ old('fecha_nacimiento', $jugador && $jugador->fecha_nacimiento ? $jugador->fecha_nacimiento->format('Y-m-d') : '') }}" required>
                        @error('fecha_nacimiento')
                            <div class="text-danger small mt-1">{{ $message }}</div>
                        @enderror
                        {{-- Badge de categoría calculada automáticamente --}}
                        <div id="categoria-sugerida" class="mt-2" style="display:none;">
                            <span class="badge fs-6 px-3 py-2" style="background-color:#212529;color:#fff;">
                                <i class="bi bi-tag-fill me-1"></i>
                                Categoría: <strong id="categoria-nombre">—</strong>
                            </span>
                            <div class="text-muted small mt-1">Calculada automáticamente según la fecha.</div>
                        </div>
                        @if($jugador && $jugador->fecha_nacimiento)
                            <div class="mt-2">
                                <span class="badge fs-6 px-3 py-2" style="background-color:#6c757d;color:#fff;">
                                    <i class="bi bi-tag-fill me-1"></i>
                                    Categoría actual: <strong>{{ $jugador->categoria_calculada }}</strong>
                                </span>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label class="form-label">Club Actual</label>
                        @if(session('admin_role') == 1)
                            <select name="id_club_actual" class="form-select">
                                <option value="">Sin club</option>
                                @foreach($clubes as $club)
                                    <option value="{{ $club->id_club }}" {{ old('id_club_actual', $jugador->id_club_actual ?? '') == $club->id_club ? 'selected' : '' }}>
                                        {{ $club->nombre }}
                                    </option>
                                @endforeach
                            </select>
                        @else
                            <input type="text" class="form-control bg-light" value="{{ session('admin_club_nombre', 'Tu Club') }}" disabled>
                        @endif
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="mb-3">
                        <label class="form-label">Club Origen</label>
                        <select name="id_club_origen" class="form-select">
                            <option value="">Sin club</option>
                            @foreach($clubes as $club)
                                <option value="{{ $club->id_club }}" {{ old('id_club_origen', $jugador->id_club_origen ?? '') == $club->id_club ? 'selected' : '' }}>
                                    {{ $club->nombre }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control" value="{{ old('email', $jugador->email ?? '') }}">
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="mb-3">
                        <label class="form-label">Teléfono</label>
                        <input type="text" name="telefono" class="form-control" value="{{ old('telefono', $jugador->telefono ?? '') }}">
                    </div>
                </div>
            </div>

            <button type="submit" class="btn-admin">
                <i class="bi bi-check-lg"></i> {{ $jugador ? 'Actualizar' : 'Crear Jugador' }}
            </button>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const fechaInput = document.getElementById('fecha_nacimiento_input');
    const categoriaBadge = document.getElementById('categoria-sugerida');
    const categoriaNombre = document.getElementById('categoria-nombre');

    if (!fechaInput) return;

    fechaInput.addEventListener('change', function () {
        const fecha = this.value;
        if (!fecha) { categoriaBadge.style.display = 'none'; return; }

        fetch(`/admin/jugadores/categoria-por-edad?fecha=${fecha}`)
            .then(r => r.json())
            .then(data => {
                categoriaNombre.textContent = data.categoria || 'Sin categoría';
                categoriaBadge.style.display = 'block';
            })
            .catch(() => { categoriaBadge.style.display = 'none'; });
    });
});
</script>
@endsection