@extends('layouts.app-sub')

@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; border-radius: var(--radius-fixed, 6px);">
                GLOBEAU PARTNERSHIP
            </span>

            <!-- 메인 타이틀 -->
            <h2 class="fw-bold mb-3 text-dark" style="font-size: 2rem; letter-spacing: -0.03em;">
                뷰티샵 입점 재심사 신청
            </h2>

            <!-- 서브 타이틀 -->
            <p class="text-secondary mx-auto lh-lg" style="font-size: 0.93rem; max-width: 580px;">
                심사 과정에서 보완이 필요한 사항을 확인하신 후 내용을 수정해 주세요.<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, #e5deda);"></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, #e5deda);"></span>
            </div>
        </div>
    </div>

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

            <!-- 유효성검사 에러, 성공 알림 블레이드 컴포넌트 -->
            <x-user-alerts-display />

            <!-- ========================================== -->
            <!-- [카드 1] 본사 심사 검토 의견 & 보완 안내 (슬림 컴팩트형) -->
            <!-- ========================================== -->
            <div class="card mb-4 p-3 p-md-3" style="border-left: 4px solid var(--primary-color, #b18977) !important; border-radius: var(--radius-fixed, 6px);">
                <div class="card-body p-0">
                    <div class="d-flex justify-content-between align-items-center pb-2 mb-2 border-bottom flex-wrap gap-2">
                        <div class="fw-bold text-dark small">
                            <i class="fas fa-clipboard-check me-2 text-brand"></i>본사 심사 검토 의견
                        </div>
                        @if($shop->rejected_at)
                            <span class="text-muted" style="font-size: 0.78rem;">
                                <i class="far fa-clock me-1"></i> 검토일시: {{ $shop->rejected_at->format('Y-m-d H:i') }}
                            </span>
                        @endif
                    </div>

                    <!-- 피드백 내용 박스 (슬림 패딩, 최대 높이 110px 제한 및 스크롤) -->
                    <div class="p-2 px-3 rounded bg-light border text-dark mb-2" style="font-size: 0.88rem; line-height: 1.55; border-color: var(--primary-border, #e5deda) !important; max-height: 110px; overflow-y: auto; border-radius: var(--radius-fixed, 6px);">
                        {{ trim($shop->rejection_reason) ?: '기재된 상세 보완 내용이 없습니다. 확인이 필요하신 경우 고객센터로 문의해 주세요.' }}
                    </div>

                    <div class="text-secondary d-flex align-items-center gap-1" style="font-size: 0.8rem;">
                        <i class="fas fa-info-circle text-brand"></i>
                        <span>지적된 사항을 아래 양식에서 수정하신 후 <strong>[입점 재심사 신청 제출]</strong>을 눌러주세요.</span>
                    </div>
                </div>
            </div>

            <!-- ========================================== -->
            <!-- [카드 2] 뷰티샵 정보 수정 폼 -->
            <!-- ========================================== -->
            <form action="{{ route('shops.reapply.submit', $shop->code) }}" id="reapplyForm" method="POST">
                @csrf
                @method('PUT')

                <div class="card card-premium mb-4 p-4 p-md-4" style="border-radius: var(--radius-fixed, 6px);">
                    <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="row">
                            <div class="col-md-6 mb-3">
                                <label for="business_number" class="form-label fw-semibold text-secondary small">
                                    사업자등록번호 <span class="text-brand">*</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 @error('business_number') is-invalid @enderror" 
                                           id="business_number" 
                                           name="business_number" 
                                           value="{{ old('business_number', $shop->business_number) }}" 
                                           placeholder="000-00-00000" 
                                           maxlength="15" 
                                           required>
                                </div>
                                @error('business_number')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                                <div class="form-text small" style="font-size: 0.78rem;">기존 등록된 사업자번호가 맞다면 그대로 유지해 주세요.</div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold text-secondary small">매장 고유 식별코드</label>
                                <div class="input-group">
                                    <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                                    <input type="text" class="form-control bg-light text-muted" value="{{ $shop->code }}" readonly>
                                </div>
                                <div class="form-text small" style="font-size: 0.78rem;">발급된 매장 식별코드는 유지됩니다.</div>
                            </div>
                        </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-brand">*</span>
                                </label>
                                <input type="text" 
                                       class="form-control @error('name') is-invalid @enderror" 
                                       id="name" 
                                       name="name" 
                                       value="{{ old('name', $shop->name) }}" 
                                       placeholder="예: 글로뷰 뷰티 강남점" 
                                       maxlength="255" 
                                       required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="ceo_name" class="form-label fw-semibold text-secondary small">
                                    대표자명 <span class="text-brand">*</span>
                                </label>
                                <input type="text" 
                                       class="form-control @error('ceo_name') is-invalid @enderror" 
                                       id="ceo_name" 
                                       name="ceo_name" 
                                       value="{{ old('ceo_name', $shop->ceo_name) }}" 
                                       placeholder="사업자등록증상 대표자 성명" 
                                       maxlength="30" 
                                       required>
                                @error('ceo_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>

                        <!-- 매장 위치 정보 (우편번호 & 주소) -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold text-secondary small">
                                샵 위치 주소 <span class="text-brand">*</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 @error('zipcode') is-invalid @enderror" 
                                       id="zipcode" 
                                       name="zipcode" 
                                       value="{{ old('zipcode', $shop->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(--primary-border, #e5deda); width:100%; height:300px; margin:5px 0; position:relative; border-radius: var(--radius-fixed, 6px);">
                                <button type="button" id="btnFoldWrap" class="btn bg-white position-absolute shadow-sm" style="z-index: 10; top:3px; right: -18px; border-radius: 50%;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>

                            <input type="text" 
                                   class="form-control mb-2 bg-light @error('address1') is-invalid @enderror" 
                                   id="address1" 
                                   name="address1" 
                                   value="{{ old('address1', $shop->address1) }}" 
                                   placeholder="기본 주소" 
                                   readonly 
                                   required>
                            <input type="text" 
                                   class="form-control @error('address2') is-invalid @enderror" 
                                   id="address2" 
                                   name="address2" 
                                   value="{{ old('address2', $shop->address2) }}" 
                                   placeholder="상세 주소를 입력해주세요" 
                                   maxlength="255">

                            <!-- LBS 위치 및 행정구역 히든 필드 -->
                            <input type="hidden" name="region_sido" id="region_sido" value="{{ old('region_sido', $shop->region_sido) }}">
                            <input type="hidden" name="region_sigungu" id="region_sigungu" value="{{ old('region_sigungu', $shop->region_sigungu) }}">
                            <input type="hidden" name="region_category" id="region_category" value="{{ old('region_category', $shop->region_category) }}">
                            <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude', $shop->latitude) }}">
                            <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude', $shop->longitude) }}">
                            <input type="hidden" name="location_coords" id="location_coords" value="{{ old('location_coords', $shop->location_coords) }}">
                        </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 @error('introduction') is-invalid @enderror" 
                                   id="introduction" 
                                   name="introduction" 
                                   value="{{ old('introduction', $shop->introduction) }}" 
                                   placeholder="예: 강남 최고의 프라이빗 뷰티 케어 전문점" 
                                   maxlength="500">

                            <label for="description" class="form-label fw-semibold text-secondary small">샵 상세 설명</label>
                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                      id="description" 
                                      name="description" 
                                      rows="4" 
                                      placeholder="고객님들에게 안내할 샵의 특징, 시술 전문 분야 등을 자유롭게 작성해주세요.">{{ old('description', $shop->description) }}</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, #b18977) !important; font-size: 0.88rem; border-radius: var(--radius-fixed, 6px);">
                    <i class="fas fa-shield-alt me-1 text-brand"></i>
                    <strong>재심사 처리 안내:</strong> 입점 재신청서가 접수되면 영업일 기준 1~2일 이내에 본사 심사팀에서 수정된 서류와 정보를 재검토합니다.
                </div>

                <!-- 액션 버튼 -->
                <div class="d-flex align-items-center justify-content-between gap-3 mt-4">
                    <a href="{{ route('shops.status', $shop->code) }}" class="btn btn-outline-premium py-3 px-4 fw-semibold" style="min-width: 130px; border-radius: var(--radius-fixed, 6px);">
                        <i class="fas fa-arrow-left me-1"></i> 접수 현황
                    </a>
                    <button type="submit" class="btn btn-premium flex-grow-1 py-3 fw-bold fs-6" style="border-radius: var(--radius-fixed, 6px);">
                        입점 재심사 신청 제출
                    </button>
                </div>
            </form>

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

@push('scripts')
<!-- Daum 우편번호 서비스 CDN -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<!-- 카카오 지도 Web API (Geocoder 라이브러리 포함) -->
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey={{ env('KAKAO_MAP_API_KEY') }}&libraries=services"></script>
<!-- 주소 검색 전용 스크립트 -->
<script src="{{ asset('js/address_search.js') }}"></script>

<!-- 입점 재신청 폼 유효성 검사 및 전송 제어 -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const reapplyForm = document.getElementById('reapplyForm');

        if (reapplyForm) {
            reapplyForm.addEventListener('submit', function(e) {
                const alertIcon = "warning";

                // 1. 사업자등록번호 입력 확인
                const bizNum = document.getElementById('business_number');
                if (!bizNum.value.trim()) {
                    e.preventDefault();
                    showSwalAlert('사업자등록번호를 입력해 주세요.', bizNum, null, alertIcon, '사업자등록번호 확인');
                    return false;
                }

                // 2. 뷰티샵명 입력 확인
                const name = document.getElementById('name');
                if (!name.value.trim()) {
                    e.preventDefault();
                    showSwalAlert('뷰티샵 상호명을 입력해 주세요.', name, null, alertIcon, '뷰티샵명 확인');
                    return false;
                }

                // 3. 대표자명 입력 확인
                const ceoName = document.getElementById('ceo_name');
                if (!ceoName.value.trim()) {
                    e.preventDefault();
                    showSwalAlert('대표자명을 입력해 주세요.', ceoName, null, alertIcon, '대표자명 확인');
                    return false;
                }

                // 4. 주소 검색 완료 여부 검증
                const zipcode = document.getElementById('zipcode')?.value.trim();
                const address1 = document.getElementById('address1')?.value.trim();
                const btnAddress = document.getElementById('btn-address');
                if (!zipcode || !address1) {
                    e.preventDefault();
                    showSwalAlert('우편번호 찾기를 통해 매장 기본 주소를 입력해 주세요.', null, btnAddress, alertIcon, '주소 입력 필요');
                    return false;
                }

                // 5. 상세 주소 입력 확인
                const address2 = document.getElementById('address2');
                if (!address2.value.trim()) {
                    e.preventDefault();
                    showSwalAlert('상세 주소를 입력해 주세요.', address2, null, alertIcon, '상세주소 확인');
                    return false;
                }

                // 중복 클릭 방지 처리
                const submitBtn = reapplyForm.querySelector('button[type="submit"]');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>재심사 신청 접수 중...';
                }
            });
        }
    });
</script>
@endpush