@extends('layouts.app')

@section('title', 'Globeau - 뷰티샵 입점 파트너 신청')

@section('content')
<div class="container py-5">
    <!-- 상단 타이틀 섹션 -->
    <div class="row justify-content-center mb-5">
        <div class="col-lg-8 text-center">
            <!-- 브랜드 뱃지 -->
            <span class="badge bg-light text-brand border border-brand px-3 py-2 mb-3 fw-medium" style="letter-spacing: 0.05em; font-size: 0.75rem;">
                GLOBEAU PARTNERSHIP
            </span>

            <!-- 메인 타이틀 (font-family 인라인 스타일 제거) -->
            <h2 class="fw-bold mb-3 text-dark" style="font-size: 2rem; letter-spacing: -0.03em;">
                뷰티샵 입점 파트너 신청
            </h2>

            <!-- 서브 타이틀 (font-family 인라인 스타일 제거) -->
            <p class="text-secondary mx-auto lh-lg" style="font-size: 0.93rem; max-width: 580px;">
                대한민국 프리미엄 뷰티 플랫폼 Globeau와 함께 더 많은 고객을 만나보세요.<br>
                사업자 및 본인 인증을 완료하시면 안전한 입점 심사가 진행됩니다.
            </p>

            <!-- 감성적인 포인트 라인 -->
            <div class="d-flex justify-content-center align-items-center mt-4 gap-2">
                <span style="display: inline-block; width: 25px; height: 1px; background-color: var(--primary-border);"></span>
                <i class="fas fa-gem text-brand" style="font-size: 0.75rem; opacity: 0.8;"></i>
                <span style="display: inline-block; width: 25px; height: 1px; background-color: var(--primary-border);"></span>
            </div>
        </div>
    </div>

    <!-- 메인 폼 영역 -->
    <div class="row justify-content-center">
        <div class="col-lg-8">

            <!-- 유효성 검사 에러 피드백 -->
            @if ($errors->any())
            <div class="alert alert-danger-custom alert-dismissible fade show mb-4" role="alert">
                <ul class="mb-0 ps-3">
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            @endif

            <form action="{{ route('shops.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <!-- ========================================== -->
                <!-- [카드 1] 신청자 본인 및 연락처 인증 섹션 -->
                <!-- ========================================== -->
                <div class="card card-premium mb-4 p-4 p-md-4">
                    <div class="card-body p-0">
                        <h5 class="fw-bold pb-2 mb-4 text-dark border-bottom">
                            <i class="fas fa-phone me-2 text-brand"></i>신청인 본인 인증
                        </h5>

                        <!-- 1단계: 전화번호 입력 및 전송 영역 -->
                        <div class="mb-3" id="sms-send-section">
                            <label for="tel" class="form-label fw-semibold text-secondary small">신청인 연락처 (휴대폰) <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                <input type="text" class="form-control input-phone" id="tel" name="tel" placeholder="01012345678" maxlength="13" required>
                                <button type="button" class="btn btn-premium px-4" id="btn-send-sms">
                                    <span class="btn-text">인증번호 전송</span>
                                    <span class="spinner-border spinner-border-sm d-none ms-1" role="status" aria-hidden="true"></span>
                                </button>
                            </div>
                            <div id="sms-message" class="form-text mt-2 d-none fw-medium small"></div>
                            <div class="form-text text-muted mt-1 small">'-' 없이 숫자만 입력하시면 자동으로 포맷팅됩니다.</div>
                        </div>

                        <!-- 2단계: 인증번호 확인 영역 (처음엔 숨김) -->
                        <div class="mb-3 d-none p-3 bg-light rounded-3 border border-brand" id="sms-verify-area">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label for="sms_code" class="form-label fw-semibold text-secondary small mb-0">인증번호 6자리 입력 <span class="text-danger">*</span></label>
                                <span id="auth-timer" class="text-danger small fw-bold">3:00</span>
                            </div>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-key"></i></span>
                                <input type="text" class="form-control fs-5 fw-bold text-center" id="sms_code" name="sms_code" placeholder="000000" maxlength="6">
                                <button type="button" class="btn btn-premium px-4" id="btn-verify-sms">
                                    <span class="btn-text">인증 확인</span>
                                    <span class="spinner-border spinner-border-sm d-none ms-1" role="status" aria-hidden="true"></span>
                                </button>
                            </div>
                            <div id="sms-verify-message" class="form-text mt-2 d-none fw-medium small"></div>

                            <div class="d-flex justify-content-between align-items-center mt-2">
                                <div class="form-text text-muted small mb-0">문자가 발송되었습니다. 3분 이내에 입력해주세요.</div>
                                <button type="button" id="btn-resend" class="btn btn-link btn-sm text-decoration-none text-secondary p-0 small">번호 재입력</button>
                            </div>
                        </div>

                        <!-- 본인인증 완료 상태 플래그 -->
                        <input type="hidden" id="is_phone_verified" name="is_phone_verified" value="false">
                    </div>
                </div>

                <!-- ========================================== -->
                <!-- [카드 2] 뷰티샵 정보 및 사업자 인증 섹션 -->
                <!-- ========================================== -->
                <div class="card card-premium mb-4 p-4 p-md-4">
                    <div class="card-body p-0">
                        <h5 class="fw-bold pb-2 mb-4 text-dark border-bottom">
                            <i class="fas fa-store me-2 text-brand"></i>뷰티샵 및 사업자 정보
                        </h5>

                        <!-- 사업자등록번호 입력 & 인증하기 버튼 -->
                        <div class="mb-3">
                            <label for="business_number" class="form-label fw-semibold text-secondary small">사업자등록번호 <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-file-invoice"></i></span>
                                <input type="text" class="form-control" id="business_number" name="business_number" placeholder="000-00-00000" maxlength="12" required>
                                <button type="button" class="btn btn-premium px-4" id="btn-verify">인증하기</button>
                            </div>
                            <div id="verify-message" class="form-text mt-2 d-none fw-medium small"></div>
                            <input type="hidden" id="is_verified" name="is_verified" value="false">
                        </div>

                        <div class="row">
                            <!-- 뷰티샵명 (상호명) -->
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label fw-semibold text-secondary small">뷰티샵명 (상호명) <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="name" name="name" placeholder="예: 글로뷰 뷰티 강남점" required>
                            </div>

                            <!-- 대표/원장명 -->
                            <div class="col-md-6 mb-3">
                                <label for="ceo_name" class="form-label fw-semibold text-secondary small">대표자명 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="ceo_name" name="ceo_name" placeholder="대표자 성명 입력" required>
                            </div>
                        </div>

                        <!-- 샵 위치 정보 (주소) -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">샵 위치 주소 <span class="text-danger">*</span></label>
                            <div class="input-group mb-2">
                                <span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
                                <input type="text" class="form-control bg-light" id="zipcode" name="zipcode" placeholder="우편번호" readonly required>
                                <button type="button" class="btn btn-outline-premium px-4" id="btn-address">우편번호 찾기</button>
                            </div>

                            <!-- Daum 우편번호 레이어 박스 -->
                            <div id="wrap" style="display:none; border:1px solid var(--border-default); width:100%; height:300px; margin:5px 0; position:relative; border-radius: 6px; overflow: hidden;">
                                <!-- 닫기 버튼 (FontAwesome 아이콘 활용) -->
                                <button type="button" id="btnFoldWrap" class="btn btn-sm btn-dark position-absolute top-0 end-0 shadow-sm" style="z-index: 10; border-radius: 4px;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <input type="text" class="form-control mb-2 bg-light" id="address1" name="address1" placeholder="기본 주소" readonly required>
                            <input type="text" class="form-control" id="address2" name="address2" placeholder="상세 주소를 입력해주세요" required>

                            <input type="hdden" name="region_sido" id="region_sido" value="">
                            <input type="hdden" name="region_sigungu" id="region_sigungu" value="">
                            <input type="hdden" name="region_category" id="region_category" value="">
                        </div>

                        <!-- 샵 소개 및 상세 설명 -->
                        <div class="mb-2">
                            <label for="introduction" class="form-label fw-semibold text-secondary small">한 줄 소개</label>
                            <input type="text" class="form-control mb-3" id="introduction" name="introduction" placeholder="예: 강남 최고의 프라이빗 뷰티 케어 전문점">

                            <label for="description" class="form-label fw-semibold text-secondary small">샵 상세 설명</label>
                            <textarea class="form-control" id="description" name="description" rows="4" placeholder="고객님들에게 안내할 샵의 특징, 시술 전문 분야 등을 자유롭게 작성해주세요."></textarea>
                        </div>
                    </div>
                </div>

                <!-- 입점 심사 안내 공지 박스 -->
                <div class="p-3 mb-4 text-secondary rounded-2 shadow-sm bg-light border-start border-4" style="border-color: var(--primary-color) !important; font-size: 0.88rem;">
                    <i class="fas fa-info-circle me-1 text-dark"></i>
                    <strong>안내 사항:</strong> 입점 심사 진행 시 정확한 검증을 위해 본사 관리자가 <strong>사업자등록증 사본 또는 추가 서류를 별도로 요청</strong>할 수 있습니다.
                </div>

                <!-- 제출 버튼 -->
                <div class="d-grid mt-4">
                    <button type="submit" class="btn btn-premium py-3 fw-bold fs-6">
                        입점 신청 및 승인 요청
                    </button>
                </div>
            </form>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<!-- Daum 우편번호 서비스 CDN -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<!-- 주소 검색 및 지역 히든 필드 자동 생성 전용 스크립트 -->
<script src="{{ asset('js/address_search.js') }}"></script>

<!-- 공용 인증 및 커스텀 스크립트 -->
<script src="{{ asset('js/sms_auth.js') }}"></script>
<script src="{{ asset('js/biz_auth.js') }}"></script>
@endpush