@extends('admin.layout')

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

@section('content')
<div class="page-header">
    <h2><i class="bi bi-person-fill-lock"></i> {{ $usuario ? 'Editar Administrador' : 'Nuevo Administrador' }}</h2>
    <a href="{{ route('admin.usuarios.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="{{ $usuario ? route('admin.usuarios.update', $usuario->id) : route('admin.usuarios.store') }}" class="admin-form">
            @csrf
            @if($usuario) @method('PUT') @endif

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Nombre de Usuario *</label>
                        <input type="text" name="username" class="form-control" value="{{ old('username', $usuario->username ?? '') }}" placeholder="Ej: admin_paracao" required>
                        @error('username') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Contraseña {{ $usuario ? '(Dejar en blanco para no cambiarla)' : '*' }}</label>
                        <input type="password" name="password" class="form-control" placeholder="******" {{ $usuario ? '' : 'required' }}>
                        @error('password') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                        <label class="form-label">Rol del Administrador *</label>
                        <select name="role" id="roleSelect" class="form-select" required>
                            <option value="1" {{ old('role', $usuario->role ?? '') == 1 ? 'selected' : '' }}>Super Administrador (Acceso total)</option>
                            <option value="2" {{ old('role', $usuario->role ?? '') == 2 || (!old('role') && !$usuario) ? 'selected' : '' }}>Administrador de Club</option>
                        </select>
                        @error('role') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                    </div>
                </div>

                <div class="col-md-6" id="clubSelectContainer">
                    <div class="mb-3">
                        <label class="form-label">Club Asociado (Solo para Admin de Club)</label>
                        <select name="id_club" class="form-select">
                            <option value="">Seleccione el Club...</option>
                            @foreach($clubes as $club)
                                <option value="{{ $club->id_club }}" {{ old('id_club', $usuario->id_club ?? '') == $club->id_club ? 'selected' : '' }}>
                                    {{ $club->nombre }}
                                </option>
                            @endforeach
                        </select>
                        @error('id_club') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
                    </div>
                </div>
            </div>

            <button type="submit" class="btn-admin mt-3">
                <i class="bi bi-save"></i> {{ $usuario ? 'Guardar Cambios' : 'Crear Administrador' }}
            </button>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const roleSelect = document.getElementById('roleSelect');
        const clubContainer = document.getElementById('clubSelectContainer');
        const clubSelect = clubContainer.querySelector('select');

        function toggleClubSelect() {
            if (roleSelect.value == '2') {
                clubContainer.style.display = 'block';
                clubSelect.setAttribute('required', 'required');
            } else {
                clubContainer.style.display = 'none';
                clubSelect.removeAttribute('required');
                clubSelect.value = ''; 
            }
        }

        roleSelect.addEventListener('change', toggleClubSelect);
        toggleClubSelect(); // Ejecutar al cargar la página
    });
</script>
@endsection