@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">
        <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('shop_admin.settings.basic.update') }}" method="POST" enctype="multipart/form-data" id="shopForm">
        @csrf
        @method('PUT')

        <!-- 1. 기본 매장 프로필 정보 -->
        <div class="app-form-card mb-4">
            <div class="app-card-header">
                <i class="fa-solid fa-id-card 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', $shop->name) }}" placeholder="예: 강남 본점" />
                        @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">대표자 성명 <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="홍길동" />
                        @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" class="form-control bg-light text-muted fw-bold" value="{{ $shop->business_number ?? '미등록' }}" readonly>
                        <input type="hidden" name="business_number" value="{{ $shop->business_number }}">
                        <div class="form-text text-muted" style="font-size: 0.75rem;">
                            <i class="fa-solid fa-lock me-1"></i> 사업자번호 변경은 고객센터 심사를 통해 가능합니다.
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-4">
                        <label class="form-label fw-semibold small">매장 대표 연락처 (TEL) <span class="text-danger">*</span></label>
                        <input type="text" name="tel" class="form-control @error('tel') is-invalid @enderror" value="{{ old('tel', $shop->tel) }}" placeholder="02-000-0000">
                        @error('tel')
                            <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', $shop->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', $shop->ceo_email) }}" placeholder="owner@globeau.kr" />
                        @error('ceo_email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- 카테고리(전문 분야) 선택 UI -->
        @if(View::exists('components.admin.category-picker'))
            <x-admin.category-picker
                :selected-categories="$shop->categories ?? null"
                type="shop"
                max-depth="1"
                title="뷰티샵 전문 분야" />
        @endif

        <!-- 2. 매장 위치 및 주소 -->
        <div class="app-form-card mb-4">
            <div class="app-card-header">
                <i class="fa-solid fa-location-dot me-1 text-danger"></i> 매장 위치 및 주소
            </div>
            <div class="app-card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold small">우편번호 및 기본 주소 <span class="text-danger">*</span></label>
                        <div class="input-group mb-2">
                            <input type="text" class="form-control bg-light" id="zipcode" name="zipcode" value="{{ old('zipcode', $shop->zipcode) }}" placeholder="우편번호" readonly />
                            <button type="button" class="btn btn-secondary px-3" 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;">
                            <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 bg-light @error('address1') is-invalid @enderror" id="address1" name="address1" value="{{ old('address1', $shop->address1) }}" placeholder="기본 주소" readonly />
                        @error('address1')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror

                        <input type="text" class="form-control @error('address2') is-invalid @enderror" id="address2" name="address2" value="{{ old('address2', $shop->address2) }}" placeholder="상세 주소를 입력해주세요">
                        @error('address2')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror

                        <!-- 좌표 및 지역 자동 세팅용 히든 필드 -->
                        <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="col-md-6">
                        <div class="mb-3">
                            <label class="form-label fw-semibold small">네이버 플레이스 URL</label>
                            <input type="url" name="naver_place_url" class="form-control @error('naver_place_url') is-invalid @enderror" value="{{ old('naver_place_url', $shop->naver_place_url) }}" placeholder="https://m.place.naver.com/...">
                            @error('naver_place_url')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <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) }}" placeholder="예: dQw4w9WgXcQ">
                        </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>
        </div>

        <!-- 3. 매장 소개 및 브랜딩 이미지 -->
        <div class="app-form-card mb-4">
            <div class="app-card-header">
                <i class="fa-solid fa-bullhorn me-1 text-success"></i> 매장 소개 및 대표 이미지
            </div>
            <div class="app-card-body">
                <div class="row g-3 mb-3">
                    <div class="col-12">
                        <label class="form-label fw-semibold small">한 줄 소개 (요약)</label>
                        <input type="text" name="introduction" class="form-control @error('introduction') is-invalid @enderror" value="{{ old('introduction', $shop->introduction) }}" placeholder="고객에게 노출될 매장의 핵심 매력을 한 줄로 작성해 주세요.">
                        @error('introduction')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-semibold small">매장 상세 소개글</label>
                        <textarea name="description" id="editor" class="form-control" rows="6">{{ old('description', $shop->description) }}</textarea>
                        @error('description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- 로고 & PC 배너 & 모바일 OG 이미지 업로드 -->
                <div class="row g-3 pt-2 border-top">
                    <!-- 로고 이미지 -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">로고 이미지 (Logo)</label>
                        @if($shop->logo_path)
                            <div class="mb-2 p-2 bg-light rounded border d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-2">
                                    <img src="{{ asset('storage/' . $shop->logo_path) }}" alt="현재 로고" class="rounded border" style="width: 44px; height: 44px; object-fit: cover;">
                                    <span class="text-muted small text-truncate" style="max-width: 110px;">{{ basename($shop->logo_path) }}</span>
                                </div>
                                <div class="form-check text-danger mb-0">
                                    <input class="form-check-input" type="checkbox" name="remove_logo" id="removeLogo" value="1">
                                    <label class="form-check-label text-danger fw-semibold" for="removeLogo" style="font-size: 0.75rem;">삭제</label>
                                </div>
                            </div>
                        @endif
                        <input type="file" name="logo_path" class="form-control form-control-sm" accept="image/*">
                    </div>

                    <!-- PC 배너 이미지 -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">PC 메인 배너 (1200x400 권장)</label>
                        @if($shop->banner_path)
                            <div class="mb-2 p-2 bg-light rounded border d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-2">
                                    <img src="{{ asset('storage/' . $shop->banner_path) }}" alt="현재 배너" class="rounded border" style="width: 80px; height: 44px; object-fit: cover;">
                                    <span class="text-muted small text-truncate" style="max-width: 110px;">{{ basename($shop->banner_path) }}</span>
                                </div>
                                <div class="form-check text-danger mb-0">
                                    <input class="form-check-input" type="checkbox" name="remove_banner" id="removeBanner" value="1">
                                    <label class="form-check-label text-danger fw-semibold" for="removeBanner" style="font-size: 0.75rem;">삭제</label>
                                </div>
                            </div>
                        @endif
                        <input type="file" name="banner_path" class="form-control form-control-sm" accept="image/*">
                    </div>

                    <!-- 모바일/SNS 공유 이미지 -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold small">모바일 / SNS 공유 이미지 (OG)</label>
                        @if($shop->og_image_path)
                            <div class="mb-2 p-2 bg-light rounded border d-flex align-items-center justify-content-between">
                                <div class="d-flex align-items-center gap-2">
                                    <img src="{{ asset('storage/' . $shop->og_image_path) }}" alt="현재 OG 이미지" class="rounded border" style="width: 70px; height: 44px; object-fit: cover;">
                                    <span class="text-muted small text-truncate" style="max-width: 110px;">{{ basename($shop->og_image_path) }}</span>
                                </div>
                                <div class="form-check text-danger mb-0">
                                    <input class="form-check-input" type="checkbox" name="remove_og_image" id="removeOgImage" value="1">
                                    <label class="form-check-label text-danger fw-semibold" for="removeOgImage" style="font-size: 0.75rem;">삭제</label>
                                </div>
                            </div>
                        @endif
                        <input type="file" name="og_image_path" class="form-control form-control-sm" accept="image/*">
                    </div>
                </div>
            </div>
        </div>

        <!-- 하단 액션 버튼 -->
        <div class="d-flex justify-content-end mb-5">
            <button type="submit" class="btn btn-dark btn-app-md fw-bold px-5 shadow-sm">
                <i class="fa-solid fa-check me-2"></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', 350, '');
        }
    });
</script>

<!-- Daum 우편번호 서비스 CDN -->
<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>

<!-- 카카오 지도 Web API (좌표 변환용) -->
<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>

<!-- 뷰티샵관리자 뷰티샵JS -->
<script src="{{ asset('js/shop_admin/shop_admin_shop.js') }}"></script>
@endpush