@extends('layouts.tropa', ['title' => 'Tropa do FiniN | Cadastro', 'page' => 'register'])

@section('content')
    <main class="screen screen-register">
        <section class="register-shell">
            <aside class="register-side">
                <a href="{{ route('landing') }}" class="ghost-link">Voltar</a>
                <span class="eyebrow">Cadastro do jogador</span>
                <h1>Monte seu perfil da pelada</h1>
                <p>
                    Complete as etapas para registrar sua identidade, ordenar as posicoes favoritas e definir seus
                    atributos tecnicos.
                </p>

                <ol class="step-indicator">
                    <li data-step-indicator="1" class="is-active">
                        <strong>01</strong>
                        <span>Dados basicos</span>
                    </li>
                    <li data-step-indicator="2">
                        <strong>02</strong>
                        <span>Posicoes</span>
                    </li>
                    <li data-step-indicator="3">
                        <strong>03</strong>
                        <span>Atributos</span>
                    </li>
                </ol>
            </aside>

            <section class="register-card">
                <form id="register-form" method="POST" action="{{ route('register.store') }}" novalidate>
                    @csrf
                    <input type="hidden" name="foto" value="{{ old('foto') }}">
                    <input type="hidden" name="posicoes_preferidas" value="{{ old('posicoes_preferidas') }}">
                    <input type="hidden" name="habilidades" value="{{ old('habilidades') }}">

                    <div class="step-panel is-active" data-step-panel="1">
                        <div class="section-heading">
                            <span>Etapa 1</span>
                            <h2>Quem e voce no grupo?</h2>
                        </div>

                        <div class="form-grid">
                            <label class="input-group input-group-full">
                                <span>Nome completo</span>
                                <input type="text" name="nome" value="{{ old('nome') }}" placeholder="Seu nome na resenha" autocomplete="name">
                            </label>

                            <label class="input-group">
                                <span>WhatsApp</span>
                                <input type="tel" name="whatsapp" value="{{ old('whatsapp') }}" placeholder="(11) 99999-9999" autocomplete="tel">
                            </label>

                            <label class="input-group">
                                <span>E-mail</span>
                                <input type="email" name="email" value="{{ old('email') }}" placeholder="voce@domingao.com" autocomplete="email">
                            </label>

                            <label class="input-group">
                                <span>Senha</span>
                                <input type="password" name="senha" placeholder="Minimo de 8 caracteres" autocomplete="new-password">
                            </label>

                            <label class="input-group">
                                <span>Confirmar senha</span>
                                <input type="password" name="senha_confirmation" placeholder="Repita sua senha" autocomplete="new-password">
                            </label>

                            <label class="input-group input-group-full">
                                <span>Foto do jogador</span>
                                <input type="file" name="arquivo_foto" accept="image/*">
                            </label>
                        </div>

                        <div class="photo-preview-card">
                            <div class="avatar-preview" id="photo-preview">TF</div>
                            <div>
                                <strong>Preview do perfil</strong>
                                <p>Vamos reduzir a imagem no navegador antes de salvar no banco da pelada.</p>
                            </div>
                        </div>
                    </div>

                    <div class="step-panel" data-step-panel="2">
                        <div class="section-heading">
                            <span>Etapa 2</span>
                            <h2>Ordene suas posicoes favoritas</h2>
                        </div>

                        <p class="section-copy">
                            Deixe no topo a posicao que voce mais gosta de jogar. Use os controles para subir ou descer
                            cada item.
                        </p>

                        <div class="position-list" id="position-list"></div>
                    </div>

                    <div class="step-panel" data-step-panel="3">
                        <div class="section-heading">
                            <span>Etapa 3</span>
                            <h2>Seu perfil tecnico</h2>
                        </div>

                        <div class="form-grid">
                            <label class="input-group">
                                <span>Idade</span>
                                <input type="number" name="idade" value="{{ old('idade') }}" min="10" max="99" placeholder="31">
                            </label>

                            <label class="input-group">
                                <span>Peso (kg)</span>
                                <input type="number" name="peso" value="{{ old('peso') }}" min="30" max="250" step="0.1" placeholder="82">
                            </label>

                            <label class="input-group">
                                <span>Altura (cm)</span>
                                <input type="number" name="altura" value="{{ old('altura') }}" min="100" max="250" step="1" placeholder="178">
                            </label>
                        </div>

                        <div class="skills-grid" id="skills-grid"></div>
                    </div>

                    @if ($errors->any())
                        <div class="form-feedback server-feedback" aria-live="polite">
                            {{ $errors->first() }}
                        </div>
                    @endif

                    <div class="form-feedback" id="form-feedback" aria-live="polite"></div>

                    <div class="form-actions">
                        <button type="button" class="ghost-button" id="back-step" disabled>Voltar etapa</button>
                        <button type="button" class="primary-button" id="next-step">Proxima etapa</button>
                        <button type="submit" class="primary-button is-hidden" id="submit-register">Finalizar cadastro</button>
                    </div>
                </form>
            </section>
        </section>
    </main>
@endsection