@extends('layouts.marketing')

@php
    $registerFieldSteps = [
        'first_name' => 1,
        'last_name' => 1,
        'email' => 1,
        'phone' => 1,
        'gender' => 2,
        'date_of_birth' => 2,
        'address' => 2,
        'city' => 2,
        'registration_message' => 2,
        'fitness_level' => 3,
        'goals' => 3,
        'screening_heart_chest' => 4,
        'screening_surgery' => 4,
        'screening_pregnancy' => 4,
        'screening_back_neck' => 4,
        'screening_spine_deformity' => 4,
        'screening_joints' => 4,
        'screening_other_difficulties' => 4,
        'screening_doctor_permission' => 4,
        'screening_pregnancy_detail' => 4,
        'medications' => 5,
        'emergency_contact_name' => 5,
        'emergency_contact_phone' => 5,
        'instructor_note' => 5,
        'medical_conditions' => 5,
        'health_declaration' => 6,
        'password' => 6,
        'password_confirmation' => 6,
    ];
    $errorRecoveryStep = 1;
    if ($errors->any()) {
        foreach ($errors->keys() as $key) {
            $errorRecoveryStep = max($errorRecoveryStep, $registerFieldSteps[$key] ?? 1);
        }
    }
@endphp

@section('title', __('app.create_your_profile') . ' — ' . __('app.marketing_brand_name'))

@section('content')
<div class="ajr-content-holder">
    <div class="register-page-mockup py-12 lg:py-16 xl:py-20">
        <div class="register-form-mockup register-form-mockup-panel mx-auto max-w-3xl">
            <div class="text-center mb-8 lg:mb-10 register-form-mockup-heading">
                <p class="ajr-kicker mb-4">{{ __('app.register_kicker') }}</p>
                <h1 class="font-display font-semibold text-ajr-fg mb-4">{{ __('app.register_form_title') }}</h1>
                <p class="text-sm sm:text-base text-ajr-fg opacity-80 leading-relaxed max-w-xl mx-auto">
                    {{ __('app.register_profile_subtitle') }}
                </p>
            </div>

            @if ($errors->any())
                <div class="rounded-lg border px-4 py-3 mb-8 text-sm marketing-alert-error">
                    <ul class="space-y-1">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <div class="register-wizard-root mb-2" x-data="registerWizard({{ (int) $errorRecoveryStep }})">
                <div class="register-wizard-progress mb-8">
                    <div class="register-wizard-steps" aria-hidden="true">
                        @foreach ([1, 2, 3, 4, 5, 6] as $n)
                            <div class="register-wizard-dot"
                                 :class="{ 'is-active': step === {{ $n }}, 'is-done': step > {{ $n }} }">
                                <span class="register-wizard-dot-num">{{ $n }}</span>
                                <span class="register-wizard-dot-label">{{ __('app.register_wizard_step_short_'.$n) }}</span>
                            </div>
                            @if ($n < 6)
                                <span class="register-wizard-connector" :class="{ 'is-done': step > {{ $n }} }"></span>
                            @endif
                        @endforeach
                    </div>
                    <p class="register-wizard-current-label mt-3 text-center text-sm font-medium text-ajr-fg opacity-90">
                        <span class="text-foreground/60">{{ __('app.register_wizard_step_indicator') }}</span>
                        <span x-text="step"></span>/6 —
                        <span x-show="step === 1">{{ __('app.register_wizard_step_long_1') }}</span>
                        <span x-show="step === 2">{{ __('app.register_wizard_step_long_2') }}</span>
                        <span x-show="step === 3">{{ __('app.register_wizard_step_long_3') }}</span>
                        <span x-show="step === 4">{{ __('app.register_wizard_step_long_4') }}</span>
                        <span x-show="step === 5">{{ __('app.register_wizard_step_long_5') }}</span>
                        <span x-show="step === 6">{{ __('app.register_wizard_step_long_6') }}</span>
                    </p>
                </div>

            <form method="POST" action="{{ route('register') }}" class="register-form-fields" id="registerForm"
                  x-ref="formEl" novalidate @submit.prevent="submitWizard">
                @csrf

                <div data-register-step="1" x-show="step === 1" x-cloak class="register-wizard-panel">
                    <p class="ajr-kicker text-sm mb-3">{{ __('app.register_wizard_step_long_1') }}</p>
                    <div class="register-grid-2">
                        <div class="register-field">
                            <label for="first_name" class="ajr-form-label">{{ __('app.first_name') }} <span class="ajr-required">*</span></label>
                            <input type="text" id="first_name" name="first_name" required autocomplete="given-name"
                                   class="ajr-input register-input" value="{{ old('first_name') }}">
                        </div>
                        <div class="register-field">
                            <label for="last_name" class="ajr-form-label">{{ __('app.last_name') }} <span class="ajr-required">*</span></label>
                            <input type="text" id="last_name" name="last_name" required autocomplete="family-name"
                                   class="ajr-input register-input" value="{{ old('last_name') }}">
                        </div>
                    </div>
                    <div class="register-field">
                        <label for="email" class="ajr-form-label">{{ __('app.email_address') }} <span class="ajr-required">*</span></label>
                        <input type="email" id="email" name="email" required autocomplete="email"
                               class="ajr-input register-input" placeholder="{{ __('app.enter_your_email') }}" value="{{ old('email') }}">
                    </div>
                    <div class="register-field">
                        <label for="phone" class="ajr-form-label">{{ __('app.phone_number') }} <span class="ajr-required">*</span></label>
                        <input type="tel" id="phone" name="phone" required
                               class="ajr-input register-input" placeholder="{{ __('app.register_phone_placeholder') }}" value="{{ old('phone') }}">
                    </div>
                </div>

                <div data-register-step="2" x-show="step === 2" x-cloak class="register-wizard-panel">
                    @include('auth.partials.register-step-2-address')
                </div>

                <div data-register-step="3" x-show="step === 3" x-cloak class="register-wizard-panel">
                    @include('auth.partials.register-step-3-goals')
                </div>

                <div data-register-step="4" x-show="step === 4" x-cloak class="register-wizard-panel">
                    @include('auth.partials.register-step-4-screening')
                </div>

                <div data-register-step="5" x-show="step === 5" x-cloak class="register-wizard-panel">
                    @include('auth.partials.register-step-5-health-contact')
                </div>

                <div data-register-step="6" x-show="step === 6" x-cloak class="register-wizard-panel">
                    @include('auth.partials.register-step-6-declaration')
                </div>

                <div class="register-wizard-actions mt-10 flex flex-col items-center gap-3 sm:flex-row sm:items-center sm:justify-center">
                    <button type="button" class="register-wizard-btn register-wizard-btn-secondary w-full sm:w-auto"
                            x-show="step > 1" x-cloak @click="prevStep()">
                        {{ __('app.register_btn_back') }}
                    </button>
                    <div class="flex flex-col gap-3 sm:flex-row sm:gap-3 w-full sm:w-auto justify-center">
                        <button type="button" class="register-wizard-btn register-wizard-btn-primary w-full sm:w-auto"
                                x-show="step < totalSteps" x-cloak @click="nextStep()">
                            {{ __('app.register_btn_next') }}
                        </button>
                        <button type="submit" class="register-submit-btn w-full sm:w-auto shrink-0 !mt-0"
                                x-show="step === totalSteps" x-cloak>
                            {{ __('app.begin_my_journey') }}
                        </button>
                    </div>
                </div>
            </form>
            </div>

            <p class="text-center mt-10 text-sm text-ajr-fg opacity-75">
                {{ __('app.already_have_account') }}
                <a href="{{ route('login') }}" class="text-primary font-semibold hover:opacity-90 underline">{{ __('app.sign_in_here') }}</a>
            </p>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('registerWizard', (startStep) => ({
        step: Math.min(6, Math.max(1, parseInt(startStep, 10) || 1)),
        totalSteps: 6,
        nextStep() {
            const form = this.$refs.formEl;
            const panel = form.querySelector('[data-register-step="' + this.step + '"]');
            if (!panel) return;
            const controls = panel.querySelectorAll('input:not([type=hidden]), select, textarea');
            for (const el of controls) {
                if (!el.checkValidity()) {
                    el.focus({ preventScroll: false });
                    el.reportValidity();
                    return;
                }
            }
            if (this.step < this.totalSteps) this.step++;
        },
        prevStep() {
            if (this.step > 1) this.step--;
        },
        submitWizard(e) {
            const form = this.$refs.formEl;
            for (let s = 1; s <= this.totalSteps; s++) {
                const panel = form.querySelector('[data-register-step="' + s + '"]');
                if (!panel) continue;
                const controls = panel.querySelectorAll('input:not([type=hidden]), select, textarea');
                for (const el of controls) {
                    if (!el.checkValidity()) {
                        this.step = s;
                        setTimeout(() => {
                            el.focus({ preventScroll: false });
                            el.reportValidity();
                        }, 50);
                        return;
                    }
                }
            }
            HTMLFormElement.prototype.submit.call(form);
        },
    }));
});
</script>
@endpush