@extends('layouts.admin')

@section('title', '뷰티샵 수정')

@section('content')
<!-- 상단 타이틀 및 컴팩트 목록 버튼 영역 -->
<div class="content-header-box mb-4 px-0">
    <div class="content-title-wrap">
        <h1 class="content-title">@yield('title')</h1>
    </div>
    <div class="content-btn-wrap">
        <a href="{{ route('admin.shops.index') }}" class="btn btn-outline-secondary btn-app-sm fw-bold">
            <i class="fa-solid fa-arrow-left me-1"></i> 목록
        </a>
    </div>
</div>

<div class="container-fluid px-0">
    <!-- 🌟 수정용 액션 경로 및 PUT 메서드 적용 -->
    <form action="{{ route('admin.shops.update', $shop->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')

        <!-- 1. 기본 정보 및 계정 연동 -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header fw-bold py-3 card-header-theme-light">
                <i class="fa-solid fa-store me-1 text-primary"></i> 기본 정보 및 계정 연동
            </div>
            <div class="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', $shop->name) }}" placeholder="예: 강남 1호점" required>
                        @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', $shop->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', $shop->center_id) == $center->id ? 'selected' : '' }}>
                                {{ $center->name }}
                            </option>
                            @endforeach
                        </select>
                        @error('center_id')
                        <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="business_number" class="form-control @error('business_number') is-invalid @enderror" value="{{ old('business_number', $shop->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', $shop->ceo_name) }}" placeholder="홍길동" required>
                        @error('ceo_name')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- 2. 영업점 정보 -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header fw-bold py-3 card-header-theme-light">
                <i class="fa-solid fa-location-dot me-1 text-primary"></i> 영업점 정보
            </div>
            <div class="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" style="border: 1px solid #ced4da; border-radius: 8px; overflow: hidden;">
                            <input type="text" class="form-control border-0 shadow-none" id="zipcode" name="zipcode" value="{{ old('zipcode', $shop->zipcode) }}" placeholder="우편번호" readonly style="background-color: #f8f9fa;">
                            <button type="button" class="btn btn-secondary px-4 border-0" id="btn-address">우편번호 찾기</button>
                        </div>

                        <!-- Daum 우편번호 레이어 박스 -->
                        <div id="wrap" style="display:none; border:1px solid #ced4da; width:100%; height:350px; margin:5px 0; position:relative; border-radius: 8px; background:#fff; overflow:hidden;">
                            <button type="button" id="btnFoldWrap" class="btn btn-sm btn-dark position-absolute top-0 end-0 m-1 rounded-1 shadow-sm" style="z-index: 10; width: 20px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center;" title="닫기">
                                <i class="fa-solid fa-xmark text-white"></i>
                            </button>
                        </div>

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

						<input type="hdden" name="region_sido" id="region_sido" value="{{ old('address2', $shop->region_sido) }}">
                        <input type="hdden" name="region_sigungu" id="region_sigungu" value="{{ old('address2', $shop->region_sigungu) }}">
                        <input type="hdden" name="region_category" id="region_category" value="{{ old('address2', $shop->region_category) }}">
                    </div>
                    <div class="col-md-6">
                        <div class="g-3 mb-3">
                            <label class="form-label fw-semibold small">대표 전화 (TEL)</label>
                            <input type="text" name="tel" class="form-control" value="{{ old('tel', $shop->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', $shop->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', $shop->introduction) }}" placeholder="샵 목록이나 상단에 노출될 짧은 소개 문구">
                    </div>
					<div class="col-md-12">
						<label class="form-label fw-semibold small">상세 소개 (Description)</label>
						<!-- 🌟 id="editor" 부여 -->
						<textarea name="description" id="editor" class="form-control" rows="6">{{ old('description', $shop->description ?? '') }}</textarea>
					</div>
                </div>
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold small">로고 이미지 (Logo)</label>
                        @if($shop->logo_path)
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $shop->logo_path) }}" alt="현재 로고" class="rounded border" style="width: 50px; height: 50px; object-fit: cover;">
                            <span class="text-muted small ms-2">현재 등록된 로고 (새로 업로드 시 교체됩니다)</span>
                        </div>
                        @endif
                        <input type="file" name="logo_path" class="form-control" accept="image/*">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold small">배너 이미지 (Banner)</label>
                        @if($shop->banner_path)
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $shop->banner_path) }}" alt="현재 배너" class="rounded border" style="width: 150px; height: 50px; object-fit: cover;">
                            <span class="text-muted small ms-2">현재 등록된 배너 (새로 업로드 시 교체됩니다)</span>
                        </div>
                        @endif
                        <input type="file" name="banner_path" class="form-control" accept="image/*">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold small">모바일 배너 이미지 (Og_image)</label>
                        @if($shop->og_image_path)
                        <div class="mb-2">
                            <img src="{{ asset('storage/' . $shop->og_image_path) }}" alt="현재 배너" class="rounded border" style="width: 100px; height: 50px; object-fit: cover;">
                            <span class="text-muted small ms-2">현재 등록된 배너 (새로 업로드 시 교체됩니다)</span>
                        </div>
                        @endif
                        <input type="file" name="og_image_path" class="form-control" accept="image/*">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold small">네이버 플레이스 URL</label>
                        <input type="url" name="naver_place_url" class="form-control" value="{{ old('naver_place_url', $shop->naver_place_url) }}" placeholder="https://map.naver.com/...">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold small">유튜브 ID (또는 영상 코드)</label>
                        <input type="text" name="youtube_id" class="form-control" value="{{ old('youtube_id', $shop->youtube_id) }}">
                    </div>
                </div>
            </div>
        </div>

		<!-- 다중 마케팅 이미지(갤러리) 관리 섹션 -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header fw-bold py-3 card-header-theme-light d-flex justify-content-between align-items-center">
                <span><i class="fa-solid fa-images me-1 text-primary"></i> 마케팅 갤러리 이미지 관리</span>
                <span class="badge bg-secondary">무제한 업로드 가능</span>
            </div>
            <div class="card-body">
                <!-- 1. 기존 등록된 마케팅 이미지 목록 및 삭제/순서 수정 영역 -->
                @if($shop->images && $shop->images->count() > 0)
                <div class="mb-4">
                    <label class="form-label fw-semibold small text-muted mb-2">현재 등록된 갤러리 이미지</label>
                    <div class="row g-3" id="marketingImagesContainer">
                        @foreach($shop->images as $img)
                        <div class="col-6 col-md-3 col-xxl-2 text-center position-relative marketing-image-item" data-image-id="{{ $img->id }}">
                            <div class="card border shadow-sm h-100">
                                <div class="card-img-wrapper square position-relative" style="padding-top: 100%;">
                                    <img src="{{ asset('storage/' . $img->path) }}" alt="마케팅 이미지" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-top">
                                </div>
                                <div class="card-body p-2 bg-light d-flex flex-column gap-2">
                                    <!-- 순서 변경 입력 필드 -->
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text bg-white small px-1">순서</span>
                                        <input type="number" name="image_sorts[{{ $img->id }}]" value="{{ $img->pivot->sort_order ?? 0 }}" class="form-control text-center text-dark fw-bold" min="0">
                                    </div>
                                    <!-- 개별 삭제 체크박스 또는 삭제 버튼 -->
                                    <div class="form-check text-danger start-0 small text-start ps-4">
                                        <input class="form-check-input" type="checkbox" name="delete_image_ids[]" value="{{ $img->id }}" id="delImg_{{ $img->id }}">
                                        <label class="form-check-label text-danger fw-semibold" for="delImg_{{ $img->id }}" style="font-size: 0.75rem;">삭제</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                    <div class="form-text text-danger mt-2" style="font-size: 0.75rem;">
                        <i class="fa-solid fa-triangle-exclamation me-1"></i> 삭제할 이미지에 체크 후 [뷰티샵 수정 완료] 버튼을 누르면 즉시 삭제됩니다.
                    </div>
                </div>
                <hr class="my-4">
                @endif

                <!-- 2. 새로운 마케팅 이미지 추가 업로드 영역 -->
                <div class="mb-2">
                    <label class="form-label fw-semibold small">새로운 마케팅 이미지 추가 업로드 (다중 선택 가능)</label>
                    <input type="file" name="marketing_images[]" class="form-control" accept="image/*" multiple id="marketingImageInput">
                    <div class="form-text text-muted" style="font-size: 0.75rem;">
                        여러 장의 이미지를 동시에 선택하여 업로드할 수 있습니다. (JPG, PNG, WEBP 등)
                    </div>
                </div>

                <!-- 실시간 선택된 새 이미지 미리보기 영역 -->
                <div id="newImagesPreview" class="row g-2 mt-2"></div>
            </div>
        </div>

        <!-- 3. 실무 담당자 및 정산 계좌 -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header fw-bold py-3 card-header-theme-light">
                <i class="fa-solid fa-calculator me-1 text-primary"></i> 실무 담당자 및 정산 계좌
            </div>
            <div class="card-body">
                <div class="row g-3 mb-3">
                    <div class="col-md-3">
                        <label class="form-label fw-semibold small">담당자명</label>
                        <input type="text" name="manager_name" class="form-control" value="{{ old('manager_name', $shop->manager_name) }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold small">직급</label>
                        <input type="text" name="manager_position" class="form-control" value="{{ old('manager_position', $shop->manager_position) }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold small">연락처</label>
                        <input type="text" name="manager_phone" class="form-control" value="{{ old('manager_phone', $shop->manager_phone) }}">
                    </div>
                    <div class="col-md-3">
                        <label class="form-label fw-semibold small">이메일</label>
                        <input type="email" name="manager_email" class="form-control" value="{{ old('manager_email', $shop->manager_email) }}">
                    </div>
                </div>
                <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', $shop->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', $shop->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', $shop->bank_holder) }}">
                    </div>
                </div>
            </div>
        </div>

        <!-- 4. 인증 및 상태 -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header fw-bold py-3 card-header-theme-light">
                <i class="fa-solid fa-sliders me-1 text-primary"></i> 인증 및 상태
            </div>
            <div class="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" {{ old('operating_status', $shop->operating_status) == 'active' ? 'selected' : '' }}>영업중 (active)</option>
                            <option value="temp_closed" {{ old('operating_status', $shop->operating_status) == 'temp_closed' ? 'selected' : '' }}>일시중지 (temp_closed)</option>
                            <option value="suspended" {{ old('operating_status', $shop->operating_status) == 'suspended' ? 'selected' : '' }}>운영정지 (suspended)</option>
                            <option value="closed" {{ old('operating_status', $shop->operating_status) == 'closed' ? 'selected' : '' }}>폐점 (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="{{ old('sort_order', $shop->sort_order) }}" 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-2 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" {{ old('is_verified', $shop->is_verified) ? 'checked' : '' }}>
                            <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" {{ old('is_phone_verified', $shop->is_phone_verified) ? 'checked' : '' }}>
                            <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" {{ old('is_pinned', $shop->is_pinned) ? 'checked' : '' }}>
                            <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', $shop->admin_memo) }}</textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- 하단 액션 버튼 -->
        <div class="d-flex justify-content-end gap-2 mb-5">
            <a href="{{ route('admin.shops.index') }}" class="btn btn-light px-4 fw-semibold">취소</a>
            <button type="submit" class="btn btn-primary px-5 fw-bold shadow-sm">뷰티샵 수정 완료</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() {
        initTinymce('#editor', 600, '{{ route("admin.shops.upload-image") }}');
    });
</script>
<!-- Daum 우편번호 서비스 CDN -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<!-- 주소 검색 및 지역 히든 필드 자동 생성 전용 스크립트 -->
<script src="{{ asset('js/address_search.js') }}"></script>

<script>
	document.addEventListener('DOMContentLoaded', function() {
		const imageInput = document.getElementById('marketingImageInput');
		const previewContainer = document.getElementById('newImagesPreview');

		if (imageInput && previewContainer) {
			imageInput.addEventListener('change', function(event) {
				previewContainer.innerHTML = ''; // 초기화
				const files = event.target.files;

				if (files.length > 0) {
					const titleLabel = document.createElement('div');
					titleLabel.className = 'col-12 small fw-semibold text-primary mb-1';
					titleLabel.textContent = `새로 선택된 이미지 미리보기 (${files.length}장)`;
					previewContainer.appendChild(titleLabel);

					Array.from(files).forEach((file, index) => {
						const reader = new FileReader();
						reader.onload = function(e) {
							const col = document.createElement('div');
							col.className = 'col-6 col-md-3 col-xxl-2';
							col.innerHTML = `
								<div class="card border shadow-sm">
									<div class="position-relative" style="padding-top: 100%;">
										<img src="${e.target.result}" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover rounded-top" alt="미리보기">
									</div>
									<div class="card-body p-1 text-center bg-white text-muted small" style="font-size: 0.7rem;">
										신규 파일 #${index + 1}
									</div>
								</div>
							`;
							previewContainer.appendChild(col);
						}
						reader.readAsDataURL(file);
					});
				}
			});
		}
	});
</script>

@endpush