@extends('layouts.admin')

@section('title', '뷰티샵 등록')

@section('content')

<div class="content-header-box mb-3 px-0 d-flex justify-content-between align-items-center">
    <div class="content-title-wrap">
        <h1 class="content-title">@yield('title')</h1>
    </div>
    <div class="content-btn-wrap d-flex gap-2">
        <a href="{{ route('admin.shops.list') }}" class="btn btn-outline-secondary btn-app-sm fw-bold">
            <i class="fa-solid fa-arrow-left me-1"></i> 목록
        </a>
        <button type="submit" form="shopForm" class="btn btn-dark btn-app-sm fw-bold d-none d-sm-inline-block">
            <i class="fa-solid fa-check me-1"></i> 저장
        </button>
    </div>
</div>

<!-- 공통 에러, 성공 알림 블래이드 컴포넌트 -->
<x-admin.alerts-display />

<div class="container-fluid px-0">
    <form action="{{ route('admin.shops.store') }}" method="POST" enctype="multipart/form-data" id="shopForm">
        @csrf

        <!-- 1. 기본 정보 및 계정 연동 -->
        <div class="app-form-card">
            <div class="app-card-header">
                <i class="fa-solid fa-store me-1 text-primary"></i> 기본 정보 및 계정 연동
            </div>
            <div class="app-card-body">
                <div class="row g-3">
                    <div class="col-md-6 col-lg-4">
                        <label class="form-label fw-semibold small">뷰티샵 명칭 <span class="text-danger">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="예: 강남 1호점">
                        @error('name')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <label class="form-label fw-semibold small">대표 계정 (선택 사항)</label>
                        <select name="user_id" class="form-select @error('user_id') is-invalid @enderror">
                            <option value="">추후 연동 (빈값 허용)</option>
                            @foreach($users as $user)
                            <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                {{ $user->name }} ({{ $user->email }})
                            </option>
                            @endforeach
                        </select>
                        @error('user_id')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                        <div class="form-text text-muted" style="font-size: 0.75rem;">등록 후 중복 매칭은 허용되지 않습니다.</div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <label class="form-label fw-semibold small">소속 센터</label>
                        <select name="center_id" class="form-select @error('center_id') is-invalid @enderror">
                            <option value="">본사 직접 관리 (선택사항)</option>
                            @foreach($centers as $center)
                            <option value="{{ $center->id }}" {{ old('center_id') == $center->id ? 'selected' : '' }}>
                                {{ $center->name }}
                            </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <label class="form-label fw-semibold small">사업자 등록번호</label>
                        <input type="text" name="business_number" class="form-control @error('business_number') is-invalid @enderror" value="{{ old('business_number') }}" placeholder="000-00-00000 (중복 불가)">
                        @error('business_number')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <label class="form-label fw-semibold small">대표 원장명 <span class="text-danger">*</span></label>
                        <input type="text" name="ceo_name" class="form-control @error('ceo_name') is-invalid @enderror" value="{{ old('ceo_name') }}" placeholder="홍길동">
                        @error('ceo_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <label class="form-label fw-semibold small">대표자 휴대폰 번호</label>
                        <input type="text" name="ceo_phone" class="form-control input-phone @error('ceo_phone') is-invalid @enderror" value="{{ old('ceo_phone') }}" placeholder="010-0000-0000">
                        @error('ceo_phone')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <label class="form-label fw-semibold small">대표자 이메일</label>
                        <input type="email" name="ceo_email" class="form-control @error('ceo_email') is-invalid @enderror" value="{{ old('ceo_email') }}" placeholder="owner@globeau.kr">
                        @error('ceo_email')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- 카테고리 다중 선택 UI 영역 -->
        <x-admin.category-picker
            :selected-categories="$shop->categories ?? null"
            type="shop"
            max-depth="1"
            title="뷰티샵 전문 분야" />

        <!-- 2. 영업점 정보 -->
        <div class="app-form-card">
            <div class="app-card-header">
                <i class="fa-solid fa-location-dot me-1 text-primary"></i> 영업점 정보
            </div>
            <div class="app-card-body">
                <div class="row g-3 mb-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold small">주소 (Address)</label>
                        <div class="input-group mb-2">
                            <input type="text" class="form-control" id="zipcode" name="zipcode" placeholder="우편번호" readonly style="background-color: #f8f9fa;">
                            <button type="button" class="btn btn-secondary px-3" id="btn-address">우편번호 찾기</button>
                        </div>

                        <!-- Daum 우편번호 레이어 박스 -->
                        <div id="wrap" style="display:none; border:1px solid var(--border-color); width:100%; height:350px; margin:5px 0; position:relative; border-radius: var(--app-radius); background:#fff;">
                            <button type="button" id="btnFoldWrap" class="btn bg-white position-absolute shadow-sm" style="z-index: 10; top:3px; right: -18px;">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>

                        <input type="text" class="form-control mb-2" id="address1" name="address1" value="{{ old('address1') }}" placeholder="기본 주소" readonly style="background-color: #f8f9fa;">
                        <input type="text" class="form-control" id="address2" name="address2" value="{{ old('address2') }}" placeholder="상세 주소를 입력해주세요">

                        <input type="hidden" name="region_sido" id="region_sido" value="{{ old('region_sido') }}">
                        <input type="hidden" name="region_sigungu" id="region_sigungu" value="{{ old('region_sigungu') }}">
                        <input type="hidden" name="region_category" id="region_category" value="{{ old('region_category') }}">
                        <input type="hidden" name="latitude" id="latitude" value="{{ old('latitude') }}">
                        <input type="hidden" name="longitude" id="longitude" value="{{ old('longitude') }}">
                        <input type="hidden" name="location_coords" id="location_coords" value="{{ old('location_coords') }}">
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label class="form-label fw-semibold small">대표 전화 (TEL)</label>
                            <input type="text" name="tel" class="form-control" value="{{ old('tel') }}" placeholder="02-000-0000">
                        </div>
                        <div>
                            <label class="form-label fw-semibold small">팩스 (FAX)</label>
                            <input type="text" name="fax" class="form-control" value="{{ old('fax') }}" placeholder="02-000-0001">
                        </div>
                    </div>
                </div>
                <div class="row g-3 mb-3">
                    <div class="col-md-12">
                        <label class="form-label fw-semibold small">한 줄 소개 (Introduction)</label>
                        <input type="text" name="introduction" class="form-control" value="{{ old('introduction') }}" placeholder="샵 목록이나 상단에 노출될 짧은 소개 문구">
                    </div>
                    <div class="col-md-12">
                        <label class="form-label fw-semibold small">상세 소개 (Description)</label>
                        <!-- id="editor" 부여 (TinyMCE 에디터 적용) -->
                        <textarea name="description" id="editor" class="form-control" rows="6" placeholder="샵 상세 페이지에 노출될 내용">{{ old('description') }}</textarea>
                    </div>
                </div>
                <div class="row g-3">
                    <!-- 1. 로고 이미지 (1:1 정사각형 비율) -->
                    <div class="col-md-4">
                        <!-- 로고 슬롯 -->
						<x-admin.image-single-slot 
							name="logo" 
							label="로고 이미지 (Logo - 1:1)" 
							:model="$shop ?? null" 
							width="60" 
							height="60" 
							ratioText="권장 비율: 1:1 정사각형" />
                    </div>

                    <!-- 2. 배너 이미지 (3:1 가로형 비율) -->
                    <div class="col-md-4">
                        <!-- 배너 슬롯 -->
						<x-admin.image-single-slot 
							name="banner" 
							label="배너 이미지 (Banner - 3:1)" 
							:model="$shop ?? null" 
							width="180" 
							height="60" 
							ratioText="권장 비율: 3:1 가로형" />
                    </div>

                    <!-- 3. 모바일 배너 / Og 이미지 (2:1 비율) -->
                    <div class="col-md-4">
                        <!-- 모바일 배너 슬롯 -->
						<x-admin.image-single-slot 
							name="og_image" 
							label="모바일 배너 (Og Image - 2:1)" 
							:model="$shop ?? null" 
							width="120" 
							height="60" 
							ratioText="권장 비율: 2:1 가로형" />
                    </div>
					
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">네이버 플레이스 URL</label>
                        <input type="url" name="naver_place_url" class="form-control" value="{{ old('naver_place_url') }}" placeholder="https://map.naver.com/...">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">유튜브 ID (또는 영상 코드)</label>
                        <input type="text" name="youtube_id" class="form-control" value="{{ old('youtube_id') }}">
                    </div>
					<div class="col-md-4">
						<label class="form-label fw-semibold small">검색 태그</label>
                        <input type="text" name="tags" class="form-control tag-input-field" placeholder="예: 두피케어, 에너지테라피" value="{{ old('tags') }}">
                        <div class="form-text">쉼표(,)로 구분하여 입력하세요.</div>
                    </div>

                </div>
            </div>
        </div>

        <!-- 다중 마케팅 이미지(갤러리) 관리 섹션 -->
        <x-admin.image-multi-slot 
			name="marketing" 
			label="마케팅 갤러리 이미지 관리" 
			:model="$shop ?? null" 
			:maxCount="30" 
			badgeText="최대 30장 등록 가능" />


        <!-- 3. 정산 계좌 -->
        <div class="app-form-card">
            <div class="app-card-header">
                <i class="fa-solid fa-calculator me-1 text-primary"></i> 정산 계좌
            </div>
            <div class="app-card-body">
                <div class="row g-3">
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">은행명</label>
                        <input type="text" name="bank_name" class="form-control" value="{{ old('bank_name') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">계좌번호</label>
                        <input type="text" name="bank_account" class="form-control" value="{{ old('bank_account') }}">
                    </div>
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">예금주</label>
                        <input type="text" name="bank_holder" class="form-control" value="{{ old('bank_holder') }}">
                    </div>
                </div>
            </div>
        </div>

        <!-- 4. 인증 및 상태 -->
        <div class="app-form-card">
            <div class="app-card-header">
                <i class="fa-solid fa-sliders me-1 text-primary"></i> 인증 및 상태
            </div>
            <div class="app-card-body">
                <div class="row g-3 mb-3">
                    <div class="col-md-3">
                        <label class="form-label fw-semibold small">영업 상태 (Status)</label>
                        <select name="operating_status" class="form-select">
                            <option value="active" selected>영업중 (active)</option>
                            <option value="temp_closed">일시중지 (temp_closed)</option>
                            <option value="suspended">운영정지 (suspended)</option>
                            <option value="closed">폐점 (closed)</option>
                        </select>
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold small">정렬 순서 (Sort Order)</label>
                        <input type="number" name="sort_order" class="form-control" value="0" min="0" oninput="this.value = Math.max(0, this.value)">
                    </div>
                    <div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center justify-content-md-start gap-3 pt-1 pt-md-4">
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" name="is_verified" id="isVerified" value="1">
                            <label class="form-check-label fw-semibold small" for="isVerified">사업자 인증 완료</label>
                        </div>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" name="is_phone_verified" id="isPhoneVerified" value="1">
                            <label class="form-check-label fw-semibold small" for="isPhoneVerified">휴대폰 본인인증</label>
                        </div>
                        <div class="form-check form-switch mb-0">
                            <input class="form-check-input" type="checkbox" name="is_pinned" id="isPinned" value="1">
                            <label class="form-check-label fw-semibold small text-primary" for="isPinned">상단 고정</label>
                        </div>
                    </div>
                </div>
                <div class="row g-3">
                    <div class="col-md-12">
                        <label class="form-label fw-semibold small">관리자 내부 메모 (Admin Memo)</label>
                        <textarea name="admin_memo" class="form-control" rows="2" placeholder="일반 사용자는 볼 수 없는 관리자 전용 메모">{{ old('admin_memo') }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- 하단 액션 버튼 -->
        <div class="d-flex justify-content-end gap-2 mb-5">
            <a href="{{ route('admin.shops.list') }}" class="btn btn-secondary btn-app-md fw-semibold px-4">
                <i class="fa-solid fa-arrow-left me-1"></i> 목록
            </a>
            <button type="submit" class="btn btn-dark btn-app-md fw-bold px-4 shadow-sm">
                <i class="fa-solid fa-check me-1"></i> 뷰티샵 등록
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<!-- TinyMCE CDN -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js" referrerpolicy="origin"></script>

<!-- 공통으로 관리하는 한글 번역 파일 로드 -->
<script src="{{ asset('js/tinymce-ko.js') }}"></script>

<!-- 에디터 초기화 (업로드 라우트 주입 불필요) -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof initTinymce === 'function') {
            initTinymce('#editor', 400); // 셀렉터와 높이값만 전달합니다.
        }
    });
</script>

<!-- 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 src="{{ asset('js/admin/category_picker.js') }}"></script>

<!-- 뷰티샵 공통 스크립트 -->
<script src="{{ asset('js/admin/admin_shop.js') }}"></script>

@endpush