@extends('layouts.app')

@push('style')
<link rel="stylesheet" href="/assets/vendor/libs/formvalidation/dist/css/formValidation.min.css" />
<link rel="stylesheet" href="/assets/vendor/css/pages/page-auth.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&display=swap" rel="stylesheet">

<style>
    html,
    body {
        min-height: 100svh;
        margin: 0;
        background: #f8efe6;
        overflow-x: hidden;
        overflow-y: auto;
    }

    body.user-theme .layout-wrapper,
    body.user-theme .layout-container {
        min-height: 100svh;
        height: 100%;
        width: 100%;
        background: #f8efe6 !important;
    }

    body.user-theme .floating-chat-btn {
        display: none !important;
    }

    .authentication-wrapper {
        min-height: 100svh;
        width: 100%;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Manrope', 'Public Sans', sans-serif;
        background:
            radial-gradient(circle at top left, rgba(255, 255, 255, 0.7) 0, rgba(255, 255, 255, 0) 30%),
            linear-gradient(180deg, #f9f1e8 0%, #f7ede4 100%);
    }

    .register-stage {
        width: min(1180px, 95%);
        max-width: 1180px;
        margin: 0 auto;
        min-height: 100svh;
        box-sizing: border-box;
        padding: 1.5rem 1.2rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.8rem;
    }

    .register-layout {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: 360px minmax(460px, 520px);
        align-items: center;
        justify-content: space-between;
        gap: 3.5rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .register-hero {
        max-width: 360px;
        color: #111111;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .register-hero-title {
        margin: 0;
        max-width: 360px;
        font-size: clamp(2.2rem, 4vw, 3.2rem);
        line-height: 0.94;
        letter-spacing: -0.055em;
        font-weight: 800;
        color: #111111;
    }

    .register-hero-title-line {
        display: block;
    }

    .register-hero-title-line.is-wide {
        white-space: nowrap;
        font-size: 0.86em;
        letter-spacing: -0.05em;
    }

    .register-hero-visual {
        width: min(100%, 320px);
        margin-left: 0;
    }

    .register-hero-image-wrap {
        border-radius: 18px;
        background: transparent;
        padding: 0;
    }

    .register-hero-image {
        display: block;
        width: 100%;
        height: auto;
        border-radius: 18px;
        object-fit: contain;
    }

    .register-hero-caption {
        margin: 0.3rem 0 0;
        text-align: center;
        font-size: 0.82rem;
        color: #444444;
        font-weight: 500;
    }

    .register-card {
        border: 1px solid rgba(233, 215, 198, 0.9);
        border-radius: 24px;
        background: rgba(255, 252, 248, 0.97);
        box-shadow: 0 16px 38px rgba(152, 110, 62, 0.08);
        padding: 2.2rem 1.85rem 1.7rem;
        min-height: 460px;
        margin-top: 0.05rem;
        width: 100%;
        max-width: 520px;
        box-sizing: border-box;
    }

    .register-card-header {
        margin-bottom: 0.95rem;
        text-align: center;
    }

    .register-card-title {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 800;
        letter-spacing: -0.025em;
        color: #111111;
    }

    .register-social-row {
        display: flex;
        justify-content: center;
        gap: 0.78rem;
        margin-bottom: 0.9rem;
    }

    .register-social-button {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        border: 1px solid #eadfce;
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        color: #111827;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
        transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }

    .register-social-button:hover,
    .register-social-button:focus-visible {
        transform: translateY(-1px);
        border-color: #d8c4ae;
        box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
        color: #111827;
        outline: none;
    }

    .register-social-button svg {
        width: 19px;
        height: 19px;
        display: block;
    }

    .register-social-button--kakao svg {
        width: 21px;
        height: 21px;
    }

    .register-divider {
        margin: 0 0 0.82rem;
        text-align: center;
        color: #555;
        font-size: 0.8rem;
        font-weight: 600;
    }

    .register-feedback .alert {
        margin-bottom: 1rem;
        border-radius: 12px;
    }

    .register-form {
        display: flex;
        flex-direction: column;
        gap: 0.68rem;
    }

    .register-primary-step,
    .register-detail-step {
        display: flex;
        flex-direction: column;
        gap: 0.68rem;
    }

    .register-detail-step[hidden] {
        display: none !important;
    }

    body.register-details-open {
        overflow-y: auto;
    }

    body.register-details-open .register-stage {
        height: auto;
        min-height: 100svh;
    }

    .register-step-heading {
        margin: 0.2rem 0 0.1rem;
        color: #2b2b2b;
        font-size: 0.84rem;
        font-weight: 700;
        text-align: left;
    }

    .register-field {
        text-align: left;
    }

    .register-field .invalid-feedback {
        margin-top: 0.35rem;
        font-size: 0.72rem;
    }

    .register-input-group {
        border: 1px solid #e7d9c8;
        border-radius: 10px;
        background: #fff;
        min-height: 40px;
        display: flex;
        align-items: center;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .register-input-group:hover,
    .register-input-group:focus-within {
        border-color: #dd9240;
        box-shadow: 0 0 0 2px rgba(221, 146, 64, 0.15);
        background: #fff;
    }

    .register-input-icon,
    .register-input-toggle {
        flex: 0 0 auto;
        width: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #d59a55;
        font-size: 0.85rem;
    }

    .register-input {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        min-height: 38px;
        padding: 0.45rem 0.68rem 0.45rem 0;
        color: #161616;
        font-size: 0.82rem;
        font-weight: 500;
    }

    .register-input::placeholder {
        color: #b7a594;
    }

    .register-input-toggle {
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
    }

    .register-select {
        cursor: pointer;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 0.82rem;
        font-weight: 500;
        color: #161616;
        padding: 0.45rem 1.8rem 0.45rem 0;
    }

    .register-select optgroup {
        font-weight: 700;
        color: #795548;
        background: #fff;
    }

    .register-select option {
        font-weight: 500;
        color: #222;
        background: #fff;
    }

    .register-submit {
        margin-top: 0.2rem;
        min-height: 40px;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(180deg, #e7a04c 0%, #dd9240 100%);
        color: #fff;
        font-size: 0.86rem;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(221, 146, 64, 0.25);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .register-submit:hover,
    .register-submit:focus,
    .register-submit:active {
        background: linear-gradient(180deg, #de9640 0%, #cf8432 100%) !important;
        color: #fff !important;
        box-shadow: 0 6px 16px rgba(221, 146, 64, 0.35) !important;
        transform: translateY(-1px);
    }

    .register-legal {
        margin: 0.65rem 0 0;
        color: #444;
        font-size: 0.7rem;
        line-height: 1.6;
        text-align: left;
    }

    .register-legal a {
        color: #1a1a1a;
        font-weight: 700;
        text-decoration: none;
    }

    .register-legal a:hover {
        color: #c98e4a;
    }

    .register-card-footer {
        margin-top: 0.72rem;
        padding-top: 0.82rem;
        border-top: 1px solid rgba(214, 199, 181, 0.52);
        text-align: center;
        color: #222;
        font-size: 0.76rem;
    }

    .register-card-footer a {
        color: #db903c;
        font-weight: 800;
        text-decoration: none;
    }

    .register-footer {
        width: min(620px, 100%);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.42rem;
        padding: 0.22rem 0 0.05rem;
        color: #2a2a2a;
    }

    .register-footer-links {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.72rem;
        font-size: 0.78rem;
    }

    .register-language-form {
        display: inline-flex;
        align-items: center;
        position: relative;
    }

    .register-language-icon {
        position: absolute;
        left: 0;
        display: inline-flex;
        align-items: center;
        pointer-events: none;
        color: inherit;
    }

    .register-language {
        min-width: 120px;
        padding: 0 1.35rem 0 1.55rem;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        appearance: none;
        cursor: pointer;
    }

    .register-language:focus {
        outline: none;
    }

    .register-language-form::after {
        content: "";
        position: absolute;
        right: 0.18rem;
        width: 0.5rem;
        height: 0.5rem;
        border-right: 1.6px solid currentColor;
        border-bottom: 1.6px solid currentColor;
        transform: rotate(45deg) translateY(-30%);
        pointer-events: none;
    }

    .register-footer-separator {
        color: #c9b39a;
    }

    .register-footer-links a {
        color: inherit;
        text-decoration: none;
    }

    .register-footer-links a:hover {
        color: #c98e4a;
    }

    .register-copyright {
        margin: 0;
        text-align: center;
        font-size: 0.74rem;
    }

    @media (max-width: 991.98px) {
        html,
        body {
            height: auto;
            overflow-y: auto;
        }

        .authentication-wrapper {
            min-height: 100svh;
            padding: 1rem 0;
        }

        .register-stage {
            min-height: auto;
            height: auto;
            padding: 1.35rem 1rem 1rem;
        }

        .register-layout {
            grid-template-columns: 1fr;
            gap: 1.5rem;
            justify-content: center;
            padding-top: 0;
        }

        .register-hero {
            max-width: 100%;
            text-align: center;
            align-items: center;
        }

        .register-hero-visual {
            margin: 0 auto;
        }

        .register-card {
            max-width: 520px;
            width: 100%;
            margin: 0 auto;
            min-height: auto;
        }
    }

    @media (max-width: 575.98px) {
        .register-stage {
            padding: 0.8rem 0.75rem 1rem;
            gap: 0.9rem;
        }

        .register-layout {
            max-width: 480px;
            margin: 0 auto;
            gap: 0;
            border: 1px solid rgba(233, 215, 198, 0.92);
            border-radius: 24px;
            background: rgba(255, 252, 248, 0.96);
            box-shadow: 0 14px 34px rgba(156, 119, 76, 0.08);
            overflow: hidden;
        }

        .register-hero {
            padding: 1rem 1rem 0.35rem;
            gap: 0.55rem;
        }

        .register-hero-title {
            max-width: none;
            font-size: 1.75rem;
            line-height: 1;
            letter-spacing: -0.04em;
        }

        .register-hero-title-line.is-wide {
            white-space: normal;
            font-size: 1em;
        }

        .register-hero-visual {
            width: min(100%, 220px);
        }

        .register-hero-caption {
            display: none;
        }

        .register-card {
            max-width: none;
            margin: 0;
            padding: 0.5rem 1.1rem 1.2rem;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
        }

        .register-card-title {
            font-size: 1.2rem;
        }

        .register-social-row {
            gap: 0.7rem;
        }

        .register-social-button {
            width: 44px;
        }

        .register-footer-links {
            gap: 0.7rem;
            font-size: 0.94rem;
        }

        .register-footer {
            max-width: 360px;
            padding-top: 0;
        }

        .register-footer-separator {
            display: none;
        }
    }
</style>
@endpush

@section('content')
@php
    $socialProviders = [
        'google' => 'Google',
        'facebook' => 'Facebook',
        'kakao' => 'KakaoTalk',
    ];
    $countrySections = $countrySections ?? (function_exists('marketplaceCountrySections') ? marketplaceCountrySections() : []);
    $selectedCountry = old('country', session('subscriptions.country', 'United Kingdom'));

    $showDetailsStep = $errors->has('name')
        || $errors->has('first_name')
        || $errors->has('last_name')
        || $errors->has('country')
        || $errors->has('password')
        || $errors->has('password_confirmation')
        || filled(old('first_name'))
        || filled(old('last_name'))
        || filled(old('name'));
@endphp

<div class="authentication-wrapper">
    <div class="register-stage">
        <div class="register-layout">
            <section class="register-hero" aria-label="Registration introduction">
                <h1 class="register-hero-title">
                    <span class="register-hero-title-line">Hello!</span>
                    <span class="register-hero-title-line">Start Your</span>
                    <span class="register-hero-title-line is-wide">Subscription Journey</span>
                </h1>

                <div class="register-hero-visual">
                    <div class="register-hero-image-wrap">
                        <img
                            src="{{ asset('assets/img/login_1.jpeg') }}"
                            alt="Subscription registration illustration"
                            class="register-hero-image"
                        >
                    </div>
                    <p class="register-hero-caption">Easy Subscriptions Here</p>
                </div>
            </section>

            <section class="register-card" aria-label="Sign up form">
                <div class="register-card-header">
                    <h2 class="register-card-title">Log in / Sign up</h2>
                </div>

                <div class="register-social-row">
                    @foreach ($socialProviders as $provider => $label)
                        <a
                            href="{{ route('social.redirect', ['provider' => $provider, 'context' => 'register']) }}"
                            class="register-social-button {{ $provider === 'kakao' ? 'register-social-button--kakao' : '' }}"
                            aria-label="Sign up with {{ $label }}"
                            title="Sign up with {{ $label }}"
                        >
                            @switch($provider)
                                @case('google')
                                    <svg viewBox="0 0 24 24" aria-hidden="true">
                                        <path fill="#EA4335" d="M12 10.2v3.98h5.64c-.25 1.28-.98 2.36-2.05 3.08l3.32 2.58c1.94-1.79 3.05-4.42 3.05-7.54 0-.72-.06-1.41-.19-2.1H12z"/>
                                        <path fill="#34A853" d="M12 22c2.76 0 5.08-.92 6.78-2.49l-3.32-2.58c-.92.62-2.1.99-3.46.99-2.66 0-4.92-1.8-5.72-4.22l-3.42 2.64A10 10 0 0 0 12 22z"/>
                                        <path fill="#4A90E2" d="M6.28 13.7A6 6 0 0 1 6 12c0-.59.1-1.17.28-1.7L2.86 7.66A10 10 0 0 0 2 12c0 1.61.39 3.13 1.08 4.46l3.2-2.76z"/>
                                        <path fill="#FBBC05" d="M12 6.08c1.5 0 2.84.52 3.9 1.54l2.92-2.92C17.07 3.06 14.76 2 12 2A10 10 0 0 0 3.08 7.54l3.2 2.76C7.08 7.88 9.34 6.08 12 6.08z"/>
                                    </svg>
                                    @break

                                @case('facebook')
                                    <svg viewBox="0 0 24 24" aria-hidden="true">
                                        <path fill="#1877F2" d="M13.37 21v-8.06h2.71l.41-3.14h-3.12V7.8c0-.91.26-1.53 1.56-1.53h1.67V3.45c-.29-.04-1.28-.12-2.43-.12-2.4 0-4.04 1.46-4.04 4.15V9.8H7.4v3.14h2.73V21h3.24z"/>
                                    </svg>
                                    @break

                                @case('kakao')
                                    <svg viewBox="0 0 24 24" aria-hidden="true">
                                        <path fill="currentColor" d="M16.37 12.61c-.03-2.54 2.08-3.76 2.17-3.81-1.18-1.72-3.01-1.95-3.66-1.98-1.56-.16-3.04.92-3.83.92-.8 0-2.03-.89-3.34-.87-1.72.03-3.31 1-4.2 2.56-1.8 3.11-.46 7.72 1.29 10.24.86 1.23 1.88 2.61 3.22 2.56 1.29-.05 1.77-.82 3.33-.82 1.56 0 2 .82 3.35.79 1.39-.02 2.27-1.26 3.12-2.5.98-1.43 1.38-2.82 1.4-2.89-.03-.01-2.68-1.03-2.85-4.2Z"/>
                                        <path fill="currentColor" d="M13.92 5.22c.71-.86 1.19-2.05 1.06-3.24-1.02.04-2.25.68-2.98 1.54-.65.76-1.21 1.97-1.06 3.12 1.14.09 2.27-.58 2.98-1.42Z"/>
                                    </svg>
                                    @break
                            @endswitch
                        </a>
                    @endforeach
                </div>

                <p class="register-divider">Or with your email</p>

                <div class="register-feedback">
                    @include('auth.partials.auth-feedback')
                </div>

                <form action="{{ route('register') }}" method="POST" class="register-form" data-register-form>
                    @csrf

                    <div class="register-primary-step">
                        <div class="register-field">
                            <div class="register-input-group">
                                <span class="register-input-icon">
                                    <i class="icon-base ti tabler-mail"></i>
                                </span>
                                <input
                                    type="email"
                                    class="form-control register-input @error('email') is-invalid @enderror"
                                    name="email"
                                    required
                                    placeholder="Email address"
                                    value="{{ old('email') }}"
                                    autofocus
                                    data-register-email
                                >
                            </div>
                            @error('email')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <button class="btn register-submit" type="button" data-register-continue>Continue</button>
                    </div>

                    <div class="register-detail-step" data-register-details @if (! $showDetailsStep) hidden @endif>
                        <p class="register-step-heading">Complete your account</p>

                        {{-- First Name & Last Name (Side by Side in 1 row) --}}
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="register-field">
                                    <div class="register-input-group">
                                        <span class="register-input-icon">
                                            <i class="icon-base ti tabler-user"></i>
                                        </span>
                                        <input
                                            type="text"
                                            class="form-control register-input @error('first_name') is-invalid @enderror"
                                            name="first_name"
                                            placeholder="First name"
                                            value="{{ old('first_name') }}"
                                            @if (! $showDetailsStep) disabled @endif
                                            required
                                            data-register-detail-input
                                        >
                                    </div>
                                    @error('first_name')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="register-field">
                                    <div class="register-input-group">
                                        <span class="register-input-icon">
                                            <i class="icon-base ti tabler-user"></i>
                                        </span>
                                        <input
                                            type="text"
                                            class="form-control register-input @error('last_name') is-invalid @enderror"
                                            name="last_name"
                                            placeholder="Last name"
                                            value="{{ old('last_name') }}"
                                            @if (! $showDetailsStep) disabled @endif
                                            required
                                            data-register-detail-input
                                        >
                                    </div>
                                    @error('last_name')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Password & Confirm Password (Side by Side in 1 row) --}}
                        <div class="row g-2">
                            <div class="col-6">
                                <div class="register-field form-password-toggle">
                                    <div class="register-input-group">
                                        <span class="register-input-icon">
                                            <span class="icon-base ti tabler-lock"></span>
                                        </span>
                                        <input
                                            type="password"
                                            class="form-control register-input @error('password') is-invalid @enderror"
                                            name="password"
                                            placeholder="Password"
                                            @if (! $showDetailsStep) disabled @endif
                                            required
                                            data-register-detail-input
                                        >
                                        <button type="button" class="register-input-toggle" aria-label="Toggle password visibility">
                                            <i class="icon-base ti tabler-eye-off"></i>
                                        </button>
                                    </div>
                                    @error('password')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="register-field form-password-toggle">
                                    <div class="register-input-group">
                                        <span class="register-input-icon">
                                            <span class="icon-base ti tabler-lock-check"></span>
                                        </span>
                                        <input
                                            type="password"
                                            class="form-control register-input @error('password_confirmation') is-invalid @enderror"
                                            name="password_confirmation"
                                            placeholder="Confirm password"
                                            @if (! $showDetailsStep) disabled @endif
                                            required
                                            data-register-detail-input
                                        >
                                        <button type="button" class="register-input-toggle" aria-label="Toggle password visibility">
                                            <i class="icon-base ti tabler-eye-off"></i>
                                        </button>
                                    </div>
                                    @error('password_confirmation')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        {{-- Country Selector (Below Password) --}}
                        <div class="register-field">
                            <div class="register-input-group register-country-group">
                                <span class="register-input-icon">
                                    <i class="icon-base ti tabler-world"></i>
                                </span>
                                <select
                                    class="form-select register-input register-select @error('country') is-invalid @enderror"
                                    name="country"
                                    @if (! $showDetailsStep) disabled @endif
                                    required
                                    data-register-detail-input
                                >
                                    @foreach($countrySections as $sectionName => $countries)
                                        <optgroup label="{{ $sectionName }}">
                                            @foreach($countries as $c)
                                                <option value="{{ $c['name'] }}" @selected($selectedCountry === $c['name'])>
                                                    {{ $c['name'] }}
                                                </option>
                                            @endforeach
                                        </optgroup>
                                    @endforeach
                                </select>
                            </div>
                            @error('country')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <button class="btn register-submit" type="submit">Create Account</button>
                    </div>
                </form>

                <p class="register-legal">
                    By continuing, you agree to our <a href="{{ route('legal.terms') }}">Terms &amp; Conditions</a>
                    and confirm that you have read our <a href="{{ route('legal.privacy') }}">Privacy Policy</a>.
                </p>

                <div class="register-card-footer">
                    Already have an account? <a href="{{ route('login') }}">Log In</a>
                </div>
            </section>
        </div>

        @php
            $supportedLocales = config('app.supported_locales', []);
            $currentLocale = app()->getLocale();
        @endphp

        <footer class="register-footer" aria-label="Registration footer">
            <div class="register-footer-links">
                <form action="{{ route('locale.switch') }}" method="POST" class="register-language-form notranslate" translate="no">
                    @csrf
                    <label class="sr-only notranslate" for="register-locale" translate="no">Language</label>
                    <span class="register-language-icon" aria-hidden="true">
                        <i class="icon-base ti tabler-world"></i>
                    </span>
                    <select id="register-locale" name="locale" class="register-language notranslate" translate="no" data-language-select onchange="window.applySiteLanguage(this)" aria-label="Select language">
                        @foreach ($supportedLocales as $localeCode => $localeName)
                            <option value="{{ $localeCode }}" data-native-label="{{ $localeName }}" translate="no" @selected($currentLocale === $localeCode)>{{ $localeName }}</option>
                        @endforeach
                    </select>
                </form>
                <span class="register-footer-separator">|</span>
                <a href="{{ route('legal.terms') }}">Terms &amp; Conditions</a>
                <span class="register-footer-separator">|</span>
                <a href="{{ route('legal.privacy') }}">Privacy Policy</a>
            </div>

            <p class="register-copyright">
                Copyright &copy; {{ now()->year }} {{ config('app.name', 'BlackSplit') }}. All Rights Reserved.
            </p>
        </footer>
    </div>
</div>
@endsection

@push('script')
<script src="/assets/vendor/libs/formvalidation/dist/js/plugins/AutoFocus.min.js"></script>
<script src="/assets/js/pages-auth.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const registerForm = document.querySelector('[data-register-form]');

    if (!registerForm) {
        return;
    }

    const continueButton = registerForm.querySelector('[data-register-continue]');
    const emailField = registerForm.querySelector('[data-register-email]');
    const detailSection = registerForm.querySelector('[data-register-details]');
    const detailInputs = Array.from(registerForm.querySelectorAll('[data-register-detail-input]'));

    // Password visibility toggles
    registerForm.querySelectorAll('.register-input-toggle').forEach(function (btn) {
        btn.addEventListener('click', function () {
            const input = btn.closest('.register-input-group').querySelector('input');
            if (!input) return;
            const icon = btn.querySelector('i');
            if (input.type === 'password') {
                input.type = 'text';
                if (icon) {
                    icon.classList.remove('tabler-eye-off');
                    icon.classList.add('tabler-eye');
                }
            } else {
                input.type = 'password';
                if (icon) {
                    icon.classList.remove('tabler-eye');
                    icon.classList.add('tabler-eye-off');
                }
            }
        });
    });

    if (!continueButton || !emailField || !detailSection) {
        return;
    }

    const revealDetails = function () {
        detailSection.hidden = false;
        document.body.classList.add('register-details-open');

        detailInputs.forEach(function (input) {
            input.disabled = false;
        });

        if (detailInputs.length) {
            detailInputs[0].focus();
        }

        setTimeout(function () {
            detailSection.scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        }, 80);
    };

    if (!detailSection.hidden) {
        document.body.classList.add('register-details-open');
    }

    continueButton.addEventListener('click', function () {
        if (!emailField.checkValidity()) {
            emailField.reportValidity();
            return;
        }

        revealDetails();
    });

    registerForm.addEventListener('submit', function (event) {
        if (!detailSection.hidden) {
            return;
        }

        event.preventDefault();

        if (!emailField.checkValidity()) {
            emailField.reportValidity();
            return;
        }

        revealDetails();
    });
});
</script>
@endpush