@extends('layouts.shop_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 d-flex align-items-center">
        <span class="content-title-indicator"></span>
        <h1 class="content-title mb-0">@yield('title')</h1>
    </div>

    <div class="content-btn-wrap d-flex align-items-center gap-2">
        <a href="{{ route('shop_admin.index') }}" 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-admin-primary btn-app-sm fw-bold shadow-sm">
            <i class="fa-solid fa-check me-1"></i> 저장
        </button>
    </div>
</div>

<!-- 공통 알림 컴포넌트 -->
<x-admin.alerts-display />

<div class="w-100">
    <form action="{{ route('shop_admin.settings.basic.update') }}" method="POST" id="shopForm">
        @csrf
        @method('PUT')

        <div class="accordion custom-accordion" id="shopSettingsAccordion">

            <!-- 1. 기본 매장 프로필 -->
            <div class="accordion-item app-form-card mb-3 mb-md-4">
                <h2 class="accordion-header" id="headingProfile">
                    <button class="accordion-button py-3 px-3 px-md-4 fw-bold bg-white text-dark d-flex justify-content-between align-items-center shadow-none"
                            type="button" data-bs-toggle="collapse" data-bs-target="#collapseProfile" aria-expanded="true" aria-controls="collapseProfile">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge px-2 py-1 bg-danger text-white rounded-pill small badge-required">필수</span>
                            <span class="custom-accordion-title fw-bold text-dark">
                                <i class="fa-solid fa-id-card me-2 text-primary icon-theme"></i> 기본 매장 프로필
                            </span>
                        </div>
                    </button>
                </h2>
                <div id="collapseProfile" class="accordion-collapse collapse show" aria-labelledby="headingProfile" data-bs-parent="#shopSettingsAccordion">
                    <div class="accordion-body app-card-body px-3 px-md-4 py-3 border-top">
                        <div class="row g-2">
                            <div class="col-12 col-md-6 mb-3">
                                <x-admin.forms.input name="name" label="뷰티샵 명칭" :value="old('name', $shop->name)" placeholder="예: GLOBEAU 강남본점" class="app-form-input" required />
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <x-admin.forms.input name="ceo_name" label="대표자 성명" :value="old('ceo_name', $shop->ceo_name)" placeholder="홍길동" class="app-form-input" required />
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <x-admin.forms.input name="business_number_display" label="사업자 등록번호" :value="$shop->business_number ?? '미등록'" readonly class="app-form-input bg-light" prepend='<i class="fa-solid fa-building"></i>' helpText="사업자번호 변경은 본사 고객센터 심사를 통해 가능합니다." />
                                <input type="hidden" name="business_number" value="{{ $shop->business_number }}">
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <x-admin.forms.input name="tel" label="매장 대표 연락처 (TEL)" :value="old('tel', $shop->tel)" placeholder="02-000-0000" class="app-form-input" prepend='<i class="fa-solid fa-phone"></i>' required />
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <x-admin.forms.input name="ceo_phone" label="대표자 휴대폰 번호" :value="old('ceo_phone', $shop->ceo_phone)" placeholder="010-0000-0000" prepend='<i class="fa-solid fa-mobile-screen"></i>' class="app-form-input input-phone" />
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <x-admin.forms.input type="email" name="ceo_email" label="대표자 이메일" :value="old('ceo_email', $shop->ceo_email)" placeholder="owner@globeau.kr" class="app-form-input" prepend='<i class="fa-solid fa-envelope"></i>' />
                            </div>
                            @if(View::exists('components.admin.category-picker'))
                            <div class="col-12 mt-1 mb-3">
                                <x-admin.category-picker :selected-categories="$shop->categories ?? null" type="shop" max-depth="1" variant="secondary" title="뷰티샵 전문 분야" />
                            </div>
                            @endif
                        </div>
                        <div class="section-save-btn-wrap d-flex justify-content-end mt-3 pt-3 border-top">
                            <button type="submit" form="shopForm" class="btn btn-admin-primary btn-app-section shadow-sm">
                                <i class="fa-solid fa-check me-1"></i> 프로필 정보 저장
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2. 매장 위치 및 주소 -->
            <div class="accordion-item app-form-card mb-3 mb-md-4">
                <h2 class="accordion-header" id="headingLocation">
                    <button class="accordion-button collapsed py-3 px-3 px-md-4 fw-bold bg-white text-dark d-flex justify-content-between align-items-center shadow-none"
                            type="button" data-bs-toggle="collapse" data-bs-target="#collapseLocation" aria-expanded="false" aria-controls="collapseLocation">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge px-2 py-1 bg-danger text-white rounded-pill small badge-required">필수</span>
                            <span class="custom-accordion-title fw-bold text-dark">
                                <i class="fa-solid fa-location-dot me-2 text-danger"></i> 매장 위치 및 주소
                            </span>
                        </div>
                    </button>
                </h2>
                <div id="collapseLocation" class="accordion-collapse collapse" aria-labelledby="headingLocation" data-bs-parent="#shopSettingsAccordion">
                    <div class="accordion-body app-card-body px-3 px-md-4 py-3 border-top">
                        <div class="row g-2">
                            <div class="col-12 mb-3">
                                <label class="form-label fw-bold mb-2 custom-form-label">우편번호 및 기본 주소 <span class="text-danger">*</span></label>
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <div class="zip-input-wrap">
                                        <input type="text" class="form-control zip-input-field" id="zipcode" name="zipcode" value="{{ old('zipcode', $shop->zipcode ?? '') }}" placeholder="우편번호" readonly required>
                                    </div>
                                    <button type="button" class="btn btn-admin-find-addr" id="btn-address">
                                        <i class="fa-solid fa-magnifying-glass me-1"></i> 우편번호 찾기
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary btn-admin-close-addr d-none" id="btnCloseAddressWrap" style="display: none !important;" title="주소 검색창 닫기" aria-label="닫기">
                                        <i class="fa-solid fa-xmark"></i>
                                    </button>
                                </div>
                                <div id="wrap" class="zipcode-embed-box"></div>
                                <div class="mb-2">
                                    <input type="text" class="form-control app-form-input bg-light @error('address1') is-invalid @enderror" id="address1" name="address1" value="{{ old('address1', $shop->address1) }}" placeholder="기본 주소" readonly data-required="true" data-label="기본 주소" />
                                    @error('address1')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="mb-2">
                                    <x-admin.forms.input name="address2" id="address2" :value="old('address2', $shop->address2)" class="app-form-input" placeholder="상세 주소를 입력해주세요 (층수, 호수 등)" />
                                </div>
                                <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-12 col-md-6 mb-3">
                                <x-admin.forms.input name="fax" label="팩스 번호 (FAX)" :value="old('fax', $shop->fax)" placeholder="02-000-0001" class="app-form-input" prepend='<i class="fa-solid fa-fax"></i>' />
                            </div>
                        </div>
                        <div class="section-save-btn-wrap d-flex justify-content-end mt-3 pt-3 border-top">
                            <button type="submit" form="shopForm" class="btn btn-admin-primary btn-app-section shadow-sm">
                                <i class="fa-solid fa-check me-1"></i> 위치 정보 저장
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3. 매장 소개 및 홍보 채널 -->
            <div class="accordion-item app-form-card mb-3 mb-md-4">
                <h2 class="accordion-header" id="headingIntro">
                    <button class="accordion-button collapsed py-3 px-3 px-md-4 fw-bold bg-white text-dark d-flex justify-content-between align-items-center shadow-none" 
                            type="button" data-bs-toggle="collapse" data-bs-target="#collapseIntro" aria-expanded="false" aria-controls="collapseIntro">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge px-2 py-1 bg-secondary text-white rounded-pill small badge-required">선택</span>
                            <span class="custom-accordion-title fw-bold text-dark">
                                <i class="fa-solid fa-bullhorn me-2 text-success"></i> 매장 소개 및 홍보 채널
                            </span>
                        </div>
                    </button>
                </h2>
                <div id="collapseIntro" class="accordion-collapse collapse" aria-labelledby="headingIntro" data-bs-parent="#shopSettingsAccordion">
                    <div class="accordion-body app-card-body px-3 px-md-4 py-3 border-top">
                        <div class="row g-2">
                            <div class="col-12 mb-3">
                                <x-admin.forms.input name="introduction" label="한 줄 소개 (요약)" :value="old('introduction', $shop->introduction)" class="app-form-input" placeholder="고객에게 노출될 매장의 핵심 매력을 한 줄로 작성해 주세요." />
                            </div>
                            <div class="col-12 mb-3">
                                <label for="editor" class="form-label fw-bold mb-2 custom-form-label">매장 상세 소개글</label>
                                <textarea name="description" id="editor" class="form-control" rows="6" placeholder="매장의 상세한 프로그램과 시설을 안내해 주세요.">{{ old('description', $shop->description) }}</textarea>
                                @error('description')
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <x-admin.forms.input type="url" name="naver_place_url" label="네이버 플레이스 URL" :value="old('naver_place_url', $shop->naver_place_url)" placeholder="https://m.place.naver.com/..." class="app-form-input" prepend='<i class="fa-solid fa-map-pin"></i>' />
                            </div>
                            <div class="col-12 col-md-6 mb-3">
                                <x-admin.forms.input name="youtube_id" label="유튜브 영상 ID (홍보 영상 코드)" :value="old('youtube_id', $shop->youtube_id)" placeholder="예: dQw4w9WgXcQ" class="app-form-input" prepend='<i class="fa-brands fa-youtube text-danger"></i>' />
                            </div>
                            <div class="col-12 mb-3">
                                <x-admin.forms.input name="tags" label="검색 태그" :value="old('tags', is_array($shop->tags) ? implode(', ', $shop->tags) : $shop->tags)" placeholder="예: 두피케어, 에너지테라피" class="tag-input-field app-form-input" helpText="쉼표(,)로 구분하여 입력하세요." prepend='<i class="fa-solid fa-tags"></i>' />
                            </div>
                        </div>
                        <div class="section-save-btn-wrap d-flex justify-content-end mt-3 pt-3 border-top">
                            <button type="submit" form="shopForm" class="btn btn-admin-primary btn-app-section shadow-sm">
                                <i class="fa-solid fa-check me-1"></i> 소개 정보 저장
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 4. 매장 브랜딩 및 갤러리 이미지 -->
            <div class="accordion-item app-form-card mb-3 mb-md-4">
                <h2 class="accordion-header" id="headingVisualMedia">
                    <button class="accordion-button collapsed py-3 px-3 px-md-4 fw-bold bg-white text-dark d-flex justify-content-between align-items-center shadow-none" 
                            type="button" data-bs-toggle="collapse" data-bs-target="#collapseVisualMedia" aria-expanded="false" aria-controls="collapseVisualMedia">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge px-2 py-1 bg-secondary text-white rounded-pill small badge-required">선택</span>
                            <span class="custom-accordion-title fw-bold text-dark">
                                <i class="fa-solid fa-photo-film me-2 text-info"></i> 매장 브랜딩 및 갤러리 이미지
                            </span>
                        </div>
                    </button>
                </h2>
                <div id="collapseVisualMedia" class="accordion-collapse collapse" aria-labelledby="headingVisualMedia" data-bs-parent="#shopSettingsAccordion">
                    <div class="accordion-body app-card-body px-3 px-md-4 py-3 border-top">
                        <!-- 4-1. 대표 브랜딩 이미지 (단일 슬롯 3종) -->
                        <div class="mb-4">
                            <div class="d-none d-md-flex justify-content-between align-items-center mb-3">
                                <div>
                                    <h6 class="fw-bold mb-1 text-dark">
                                        <i class="fa-solid fa-id-badge me-2 text-primary icon-theme"></i> 매장 대표 브랜딩 이미지
                                    </h6>
                                    <span class="text-muted small">홈페이지, 모바일 웹, SNS 공유 시 노출되는 대표 비주얼을 등록하세요.</span>
                                </div>
                            </div>
                            <div class="row g-2 align-items-stretch">
                                <div class="col-12 col-sm-6 mb-2">
                                    <x-shop_admin.image-single-slot name="logo" label="로고 이미지 (Logo - 1:1)" :model="$shop ?? null" width="60" height="60" ratioText="권장 규격: 1:1 정방형 (1200×1200)" />
                                </div>
                                <div class="col-12 col-sm-6 mb-2">
                                    <x-shop_admin.image-single-slot name="banner" label="배너 이미지 (Banner - 3:1)" :model="$shop ?? null" width="120" height="40" ratioText="권장 규격: 3:1 와이드 (1200×400)" />
                                </div>
                                <div class="col-12 col-sm-6 mb-2">
                                    <x-shop_admin.image-single-slot name="og_image" label="모바일 배너 (Og Image - 2:1)" :model="$shop ?? null" width="100" height="50" ratioText="권장 규격: 2:1 와이드 (1200×630)" />
                                </div>
                            </div>
                        </div>

                        <!-- 4-2. 갤러리 멀티 슬롯 컴포넌트 호출 -->
                        <div class="multi-slot-wrapper">
                            <x-shop_admin.image-multi-slot 
                                name="marketing" 
                                label="마케팅 갤러리 이미지" 
                                :model="$shop ?? null" 
                                :maxCount="$maxMarketingImages ?? 30" 
                                buttonText="사진 추가" />
                        </div>

                        <div class="section-save-btn-wrap d-flex justify-content-end mt-3 pt-3 border-top">
                            <button type="submit" form="shopForm" class="btn btn-admin-primary btn-app-section shadow-sm">
                                <i class="fa-solid fa-check me-1"></i> 이미지 정보 저장
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 5. 정산 입금 계좌 정보 -->
            <div class="accordion-item app-form-card mb-4">
                <h2 class="accordion-header" id="headingBank">
                    <button class="accordion-button collapsed py-3 px-3 px-md-4 fw-bold bg-white text-dark d-flex justify-content-between align-items-center shadow-none"
                            type="button" data-bs-toggle="collapse" data-bs-target="#collapseBank" aria-expanded="false" aria-controls="collapseBank">
                        <div class="d-flex align-items-center gap-2">
                            <span class="badge px-2 py-1 bg-secondary text-white rounded-pill small badge-required">선택</span>
                            <span class="custom-accordion-title fw-bold text-dark">
                                <i class="fa-solid fa-calculator me-2 text-primary icon-theme"></i> 정산 입금 계좌
                            </span>
                        </div>
                        <span class="badge bg-light text-muted small fw-normal border d-none d-md-inline-block">시술 대금 정산 계좌</span>
                    </button>
                </h2>
                <div id="collapseBank" class="accordion-collapse collapse" aria-labelledby="headingBank" data-bs-parent="#shopSettingsAccordion">
                    <div class="accordion-body app-card-body px-3 px-md-4 py-3 border-top">
                        <div class="row g-2">
                            <div class="col-12 col-md-4 mb-3">
                                @php
                                $bankOptions = [
                                    'KB국민은행' => 'KB국민은행', '신한은행' => '신한은행', '우리은행' => '우리은행', '하나은행' => '하나은행',
                                    'NH농협은행' => 'NH농협은행', 'IBK기업은행' => 'IBK기업은행', '카카오뱅크' => '카카오뱅크', '토스뱅크' => '토스뱅크',
                                    '케이뱅크' => '케이뱅크', 'SC제일은행' => 'SC제일은행', '우체국' => '우체국', '새마을금고' => '새마을금고',
                                    '신협' => '신협', '수협은행' => '수협은행', '부산은행' => '부산은행', '대구은행' => '대구은행',
                                    '광주은행' => '광주은행', '경남은행' => '경남은행', '전북은행' => '전북은행', '제주은행' => '제주은행',
                                ];
                                @endphp
                                @if(View::exists('components.admin.forms.select'))
                                <x-admin.forms.select name="bank_name" label="은행명" :options="$bankOptions" :selected="old('bank_name', $shop->bank_name)" class="app-form-input" placeholder="은행을 선택해 주세요" />
                                @else
                                <label for="bank_name" class="form-label fw-bold mb-2 custom-form-label">은행명</label>
                                <select name="bank_name" id="bank_name" class="form-select app-form-input">
                                    <option value="">은행을 선택해 주세요</option>
                                    @foreach($bankOptions as $val => $txt)
                                    <option value="{{ $val }}" @selected(old('bank_name', $shop->bank_name) === $val)>{{ $txt }}</option>
                                    @endforeach
                                </select>
                                @endif
                            </div>
                            <div class="col-12 col-md-4 mb-3">
                                <x-admin.forms.input name="bank_account" id="bank_account" label="계좌번호" :value="old('bank_account', $shop->bank_account)" placeholder="예: 110123456789" helpText="(- 없이 숫자만 입력)" class="app-form-input" prepend='<i class="fa-solid fa-credit-card"></i>' maxlength="35" oninput="this.value = this.value.replace(/[^0-9]/g, '');" />
                            </div>
                            <div class="col-12 col-md-4 mb-3">
                                <x-admin.forms.input name="bank_holder" id="bank_holder" label="예금주" :value="old('bank_holder', $shop->bank_holder)" placeholder="예금주 성명 또는 상호명" class="app-form-input" prepend='<i class="fa-solid fa-user-check"></i>' maxlength="50" />
                            </div>
                            <div class="col-12 mt-2">
                                <div class="p-3 bg-light border rounded small text-dark d-flex align-items-center">
                                    <i class="fa-solid fa-circle-info text-primary me-2 icon-theme"></i>
                                    <span class="account-notice-text">정산 입금 계좌는 세무 증빙 및 원활한 대금 입금을 위해 등록된 사업자등록증 상의 <strong>상호명 또는 대표자명과 일치</strong>해야 합니다.</span>
                                </div>
                            </div>
                        </div>
                        <div class="section-save-btn-wrap d-flex justify-content-end mt-3 pt-3 border-top">
                            <button type="submit" form="shopForm" class="btn btn-admin-primary btn-app-section shadow-sm">
                                <i class="fa-solid fa-check me-1"></i> 계좌 정보 저장
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 하단 PC 전용 42px 최종 저장 버튼 -->
        <div class="d-none d-md-flex justify-content-end mb-4">
            <button type="submit" class="btn btn-admin-primary btn-app-md 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') }}?v={{ time() }}"></script>
<script src="{{ asset('js/tinymce-init.js') }}?v={{ time() }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (typeof initTinymce === 'function') {
            initTinymce('#editor', 400, '');
        }
    });
</script>

<!-- Kakao 우편번호 서비스 CDN & 카카오 지도 Web API -->
<script src="//t1.kakaocdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey={{ env('KAKAO_MAP_API_KEY') }}&libraries=services&autoload=false"></script>

<!-- 공통 주소 검색 및 카카오 Geocoder LBS 자동 연동 스크립트 -->
<script src="{{ asset('js/address_search.js') }}?v={{ time() }}"></script>
<!-- 카테고리 선택 전용 스크립트 -->
<script src="{{ asset('js/admin/category_picker.js') }}"></script>
<!-- 뷰티샵관리자 매장 전용 비즈니스 스크립트 -->
<script src="{{ asset('js/shop_admin/shop_admin_shop.js') }}?v={{ time() }}"></script>
@endpush