@extends('web.layouts.auth')

@section('title', '회원가입 | PIN FOR YOU')
@section('meta_description', 'PIN FOR YOU 회원가입 페이지입니다.')
@section('canonical', url('/auth/register'))

@section('h1', '회원가입')
@section('desc', '휴대폰 번호로 가입 여부를 먼저 확인한 뒤, PASS 본인인증을 진행합니다.')
@section('card_aria', '회원가입 Step0 - 휴대폰 확인')
@section('show_cs_links', true)

@section('auth_content')

    {{--  Step0 Hero Image + 안내문구 --}}
    <div class="terms-wrap">
        <div class="terms-steps" aria-label="진행 단계">
            <div class="terms-step is-active">가입정보확인</div>
            <div class="terms-step">약관/인증 확인</div>
            <div class="terms-step">가입정보입력</div>
        </div>
    </div>


    <form class="auth-form" id="regStep0Form" onsubmit="return false;">
        @csrf

        {{-- ✅ hidden input만 생성(토큰은 JS에서 발급 후 payload에 포함) --}}
        <x-recaptcha-v3 />

        <div class="auth-field">
            <label class="auth-label" for="reg_carrier">
                통신사 <small>선택</small>
            </label>

            {{-- 서버 전송용 hidden --}}
            <input type="hidden" id="reg_carrier" name="carrier" value="">

            <div id="reg_carrier_group" style="display:flex; gap:8px; flex-wrap:wrap;">
                <button type="button" class="auth-btn auth-btn--ghost" data-carrier="01">SKT</button>
                <button type="button" class="auth-btn auth-btn--ghost" data-carrier="02">KT</button>
                <button type="button" class="auth-btn auth-btn--ghost" data-carrier="03">LG U+</button>
{{--                <button type="button" class="auth-btn auth-btn--ghost" data-carrier="04">SKT(알뜰폰)</button>--}}
{{--                <button type="button" class="auth-btn auth-btn--ghost" data-carrier="05">KT(알뜰폰)</button>--}}
{{--                <button type="button" class="auth-btn auth-btn--ghost" data-carrier="06">LGU+(알뜰폰)</button>--}}
            </div>

            <div class="auth-help" id="reg_carrier_help" style="display:none;"></div>
        </div>
        <div class="auth-field">
            <label class="auth-label" for="reg_phone">
                휴대폰 번호 <small>가입 여부 확인</small>
            </label>
            <input class="auth-input" id="reg_phone" name="phone" type="tel"
                   placeholder="010-0000-0000"
                   autocomplete="tel"
                   inputmode="numeric"
                   maxlength="13">
            <div class="auth-help" id="reg_phone_help" style="display:none;"></div>
        </div>

        <div class="auth-actions">
            <button class="auth-btn auth-btn--primary" id="reg_next_btn" type="submit">다음</button>
            <a class="auth-btn auth-btn--ghost" href="{{ route('web.auth.login') }}">
                이미 계정이 있어요 (로그인)
            </a>
        </div>
    </form>

    <style>
        .terms-steps{
            display:flex;
            gap:10px;
            align-items:center;
            justify-content:space-between;
        }

        .terms-step{
            flex:1;
            text-align:center;
            padding:10px 12px;
            border-radius:999px;                 /* ✅ badge */
            font-size:12.5px;
            font-weight:800;
            letter-spacing:-0.2px;
            margin-top: 30px;
            margin-bottom: 50px;

            /* 기본(비활성) */
            color: rgba(136, 105, 105, 0.78);
            border:1px solid rgba(255,255,255,.14);
            background:rgba(255,255,255,.06);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.10),
                0 10px 22px rgba(0,0,0,.14);

            opacity:.78;
            position:relative;
            overflow:hidden;
        }

        /* ✅ 비활성도 살짝 그라데이션 느낌(은은하게) */
        .terms-step::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(135deg,
            rgba(47,107,255,.18),
            rgba(74,163,255,.14),
            rgba(47,210,255,.12)
            );
            opacity:.55;
            pointer-events:none;
        }

        /* ✅ 활성: 선명한 그라데이션 */
        .terms-step.is-active{
            opacity:1;
            color:#fff;
            border-color:rgba(120,180,255,.50);
            background:linear-gradient(135deg, #2f6bff 0%, #4aa3ff 55%, #2fd2ff 100%);
            box-shadow:
                0 18px 38px rgba(47,107,255,.28),
                0 10px 20px rgba(47,210,255,.14);
        }

        /* shine 효과 (활성만) */
        .terms-step.is-active::after{
            content:"";
            position:absolute;
            top:-40%;
            left:-45%;
            width:55%;
            height:180%;
            transform:rotate(18deg);
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
            opacity:.55;
            animation: termsStepShine 2.8s ease-in-out infinite;
            pointer-events:none;
        }

        @keyframes termsStepShine{
            0%   { transform: translateX(-30%) rotate(18deg); opacity:.20; }
            45%  { opacity:.70; }
            100% { transform: translateX(240%) rotate(18deg); opacity:.20; }
        }

        /* 모바일에서 글자 길어서 깨질 때 대비 */
        @media (max-width: 420px){
            .terms-step{
                font-size:12px;
                padding:10px 10px;
            }
        }

    </style>
    {{-- ✅ reCAPTCHA 스크립트/공통함수는 이 페이지에서만 로드 --}}
    @push('recaptcha')
        <script>window.__recaptchaSiteKey = @json(config('services.recaptcha.site_key'));</script>
        <script src="https://www.google.com/recaptcha/api.js?render={{ config('services.recaptcha.site_key') }}"></script>
        <script src="{{ asset('assets/js/recaptcha-v3.js') }}"></script>
    @endpush

    <script>
        (function () {
            const form  = document.getElementById('regStep0Form');
            const input = document.getElementById('reg_phone');
            const help  = document.getElementById('reg_phone_help');
            const btn   = document.getElementById('reg_next_btn');

            // ✅ 통신사
            const carrierHidden = document.getElementById('reg_carrier');
            const carrierGroup  = document.getElementById('reg_carrier_group');

            let selectedCarrier = '';

            // 숫자만 남기고 010-0000-0000 형태로 포맷
            function formatPhone(value) {
                const digits = (value || '').replace(/\D/g, '').slice(0, 11);
                if (digits.length <= 3) return digits;
                if (digits.length <= 7) return digits.slice(0, 3) + '-' + digits.slice(3);
                return digits.slice(0, 3) + '-' + digits.slice(3, 7) + '-' + digits.slice(7);
            }

            // 서버 전송용(숫자만)
            function toDigits(value) {
                return (value || '').replace(/\D/g, '');
            }

            // ✅ 통신사 버튼 레이아웃/동일 크기(기존 CSS 크게 안 건드리고 JS로 스타일만 주입)
            function applyCarrierButtonLayout() {
                if (!carrierGroup) return;

                carrierGroup.style.display = 'grid';
                carrierGroup.style.gridTemplateColumns = 'repeat(3, 1fr)';
                carrierGroup.style.gap = '8px';
                carrierGroup.style.width = '100%';
                carrierGroup.style.justifyItems = 'stretch';
                carrierGroup.style.alignItems = 'stretch';

                carrierGroup.querySelectorAll('button[data-carrier]').forEach(b => {
                    b.style.width = '100%';
                    b.style.height = '44px';          // 동일 세로
                    b.style.padding = '0';            // 높이 고정에 방해되는 padding 제거
                    b.style.display = 'inline-flex';
                    b.style.alignItems = 'center';
                    b.style.justifyContent = 'center';
                    b.style.borderRadius = '12px';    // 기존 톤에 맞게(원하면 삭제)
                });
            }

            // ✅ 통신사 선택 UI
            function bindCarrierButtons() {
                if (!carrierGroup || !carrierHidden) return;

                carrierGroup.addEventListener('click', function (e) {
                    const btnEl = e.target.closest('button[data-carrier]');
                    if (!btnEl) return;

                    selectedCarrier = btnEl.getAttribute('data-carrier') || '';
                    carrierHidden.value = selectedCarrier;

                    // 선택=primary, 나머지=ghost
                    carrierGroup.querySelectorAll('button[data-carrier]').forEach(b => {
                        b.classList.remove('auth-btn--primary');
                        b.classList.add('auth-btn--ghost');
                    });
                    btnEl.classList.remove('auth-btn--ghost');
                    btnEl.classList.add('auth-btn--primary');
                });
            }

            // ✅ 휴대폰 입력 UX
            input.addEventListener('input', function () {
                const formatted = formatPhone(input.value);
                if (input.value !== formatted) input.value = formatted;
            });

            input.addEventListener('keydown', function (e) {
                const allowKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End'];
                if (allowKeys.includes(e.key)) return;
                if (e.ctrlKey || e.metaKey) return;
                if (!/^\d$/.test(e.key)) e.preventDefault();
            });

            input.addEventListener('paste', function (e) {
                e.preventDefault();
                const text = (e.clipboardData || window.clipboardData).getData('text') || '';
                const digits = text.replace(/\D/g, '');
                input.value = formatPhone(digits);
            });

            // 초기 적용
            applyCarrierButtonLayout();
            bindCarrierButtons();

            // ✅ submit
            form.addEventListener('submit', async function () {
                // clearMsg()가 기존에 전역으로 있다면 유지
                if (typeof clearMsg === 'function') clearMsg();

                // 통신사 선택 체크
                if (!selectedCarrier) {
                    await showMsg('통신사를 선택하세요.', { type: 'alert', title: '입력오류' });
                    return;
                }

                const phoneDigits = toDigits(input.value);

                if (!phoneDigits) {
                    await showMsg('휴대폰 번호를 입력해 주세요.', { type:'alert', title:'입력오류' });
                    input.focus();
                    return;
                }
                if (phoneDigits.length < 10) {
                    await showMsg('휴대폰 번호를 끝까지 입력해 주세요.', { type:'alert', title:'입력오류' });
                    input.focus();
                    return;
                }

                btn.disabled = true;

                try {
                    // ✅ 공통 함수로 토큰 발급 (한 줄)
                    const token = await window.recaptchaV3Token('register_phone_check', form);

                    const res = await fetch("{{ route('web.auth.register.phone_check') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}",
                            "Accept": "application/json"
                        },
                        body: JSON.stringify({
                            phone: phoneDigits,
                            carrier: selectedCarrier,
                            "g-recaptcha-response": token
                        })
                    });

                    const raw = await res.text();
                    let data = {};
                    try { data = JSON.parse(raw || "{}"); } catch (e) { data = {}; }

                    const msg = data.message || '처리에 실패했습니다.';

                    if (data.reason === 'already_member') {
                        await showMsg(msg, {
                            type: 'confirm',
                            title: '안내',
                            okText: '이동',
                            cancelText: '취소',
                            redirect: data.redirect,
                        });
                        return;
                    }

                    if (data.ok === true) {

                        await showMsg(msg || '회원가입 가능한 전화번호 입니다.\n\n인증페이지로 이동합니다.', {
                            type: 'confirm',
                            title: '안내',
                            okText: '이동',
                            cancelText: '취소',
                            redirect: data.redirect,
                        });
                        return;
                    }

                    await showMsg(msg, { type: 'alert', title: '안내' });



                } catch (e) {
                    await showMsg("네트워크 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.", {
                        type:'alert',
                        title:'네트워크오류'
                    });
                } finally {
                    btn.disabled = false;
                }
            });
        })();
    </script>

@endsection

@section('auth_bottom')
@endsection
