@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 {
        height: 100%;
        min-height: 100svh;
        margin: 0;
        background: #f8efe6;
        overflow-x: hidden;
        overflow-y: hidden;
    }

    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: stretch;
        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(840px, 100%);
        margin: 0 auto;
        min-height: 100svh;
        height: 100svh;
        box-sizing: border-box;
        padding: 0.95rem 1rem 0.45rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 0.35rem;
    }

    .register-layout {
        flex: 1 1 auto;
        display: grid;
        grid-template-columns: 356px 326px;
        align-items: start;
        justify-content: space-between;
        gap: 2.3rem;
        padding-top: 0.65rem;
    }

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

    .register-hero-title {
        margin: 0;
        max-width: 356px;
        font-size: clamp(2.12rem, 3.95vw, 3.18rem);
        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.1rem 0 0;
        text-align: center;
        font-size: 0.8rem;
        color: #444444;
        font-weight: 500;
    }

    .register-card {
        border: 1px solid rgba(233, 215, 198, 0.9);
        border-radius: 20px;
        background: rgba(255, 252, 248, 0.96);
        box-shadow: 0 10px 26px rgba(152, 110, 62, 0.06);
        padding: 1.95rem 1.22rem 1.45rem;
        min-height: 455px;
        margin-top: 0.05rem;
    }

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

    .register-card-title {
        margin: 0;
        font-size: 0.98rem;
        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: 42px;
        height: 42px;
        border-radius: 10px;
        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: #2f2f2f;
        font-size: 0.8rem;
        font-weight: 500;
    }

    .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.1rem 0 0;
        color: #3b3b3b;
        font-size: 0.8rem;
        font-weight: 600;
        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: 9px;
        background: #fff;
        min-height: 38px;
        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: #e6d6c3;
        box-shadow: none;
        background: #fff;
    }

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

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

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

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

    .register-submit {
        margin-top: 0.1rem;
        min-height: 38px;
        border: 0;
        border-radius: 9px;
        background: linear-gradient(180deg, #e7a04c 0%, #dd9240 100%);
        color: #fff;
        font-size: 0.82rem;
        font-weight: 700;
        box-shadow: none;
    }

    .register-submit:hover,
    .register-submit:focus,
    .register-submit:active {
        background: linear-gradient(180deg, #de9640 0%, #cf8432 100%) !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .register-legal {
        margin: 0.62rem 0 0;
        color: #2e2e2e;
        font-size: 0.68rem;
        line-height: 1.66;
        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.74rem;
    }

    .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 {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        padding: 0;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
    }

    .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;
        }

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

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

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

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

        .register-card {
            max-width: 360px;
            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: 360px;
            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.35rem 1rem 1.1rem;
            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',
    ];
    $showDetailsStep = $errors->has('name')
        || $errors->has('password')
        || $errors->has('password_confirmation')
        || 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 32 32" aria-hidden="true">
                                        <path fill="currentColor" d="M16 4c-6.08 0-11 3.82-11 8.54 0 3.06 2.07 5.73 5.19 7.24l-1.3 4.8a.77.77 0 0 0 1.14.83l5.55-3.5c.47.04.94.08 1.42.08 6.08 0 11-3.82 11-8.54S22.08 4 16 4z"/>
                                        <text x="16" y="15.6" text-anchor="middle" font-size="7.2" font-family="Arial, sans-serif" font-weight="700" fill="#fff">Talk</text>
                                    </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>

                        <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('name') is-invalid @enderror"
                                    name="name"
                                    placeholder="Full name"
                                    value="{{ old('name') }}"
                                    @if (! $showDetailsStep) disabled @endif
                                    required
                                    data-register-detail-input
                                >
                            </div>
                            @error('name')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @enderror
                        </div>

                        <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 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>

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

                <p class="register-legal">
                    By continuing, you agree to our <a href="#">Terms &amp; Conditions</a>
                    and confirm that you have read our <a href="#">Privacy Policy</a>.
                </p>

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

        <footer class="register-footer" aria-label="Registration footer">
            <div class="register-footer-links">
                <button type="button" class="register-language" aria-label="Selected language English">
                    <i class="icon-base ti tabler-world"></i>
                    <span>English</span>
                    <i class="icon-base ti tabler-chevron-down"></i>
                </button>
                <span class="register-footer-separator">|</span>
                <a href="#">Terms &amp; Conditions</a>
                <span class="register-footer-separator">|</span>
                <a href="#">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]'));

    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