@extends('layouts.shop_admin')

@section('title', '기본 정보 관리')

@section('content')

<!-- 상단 타이틀 및 액션 헤더 (PC / 모바일 듀얼 최적화) -->
<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="d-inline-block d-md-none me-2 rounded-pill" style="width: 4px; height: 16px; background-color: var(--primary-color, #b18977);"></span>
        <h1 class="content-title">@yield('title')</h1>
    </div>

    <!-- 우측 저장 버튼 (PC: 일반 버튼 / 모바일: 슬림 모카 알약 버튼) -->
    <div class="content-btn-wrap d-flex align-items-center gap-2">
        <!-- PC 전용 저장 버튼 -->
        <button type="submit" form="shopForm" class="btn btn-dark btn-app-sm fw-bold d-none d-md-inline-flex align-items-center shadow-sm">
            <i class="fa-solid fa-check me-1"></i> 저장
        </button>

        <!-- 🌟 모바일 전용 프리미엄 저장 버튼 -->
        <button type="submit" form="shopForm" class="btn btn-dark btn-app-sm d-md-none d-inline-block align-items-center shadow-sm">
            <i class="fa-solid fa-check me-1"></i>
            <span>저장</span>
        </button>
    </div>
</div>

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

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

        <!-- ===================================================================
             아코디언 래퍼 컨테이너 (PC: 상시 펼침 카드 / 모바일: 접이식 아코디언)
             ================================================================== -->
        <div class="accordion custom-shop-accordion" id="shopSettingsAccordion">

            <!-- ===================================================================
                 1. 기본 매장 프로필 정보 (공용 폼 컴포넌트 적용)
                 - 필수 (Required): 모바일에서 기본 열림(show) 상태
                 ================================================================== -->
            <div class="accordion-item app-form-card mb-4 border-0 shadow-sm" style="border-radius: var(--radius-fixed, 6px); overflow: hidden;">
                <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 d-md-none" style="font-size: 0.68rem;">필수</span>
                            <span class="fs-6 fw-bold text-dark">
                                <i class="fa-solid fa-id-card me-1 text-primary" style="color: var(--primary-color, #b18977) !important;"></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 p-3 p-md-4 pt-1 border-top" style="border-color: #f1f5f9 !important;">
                        <div class="row g-3">
                            <!-- 뷰티샵 명칭 -->
                            <div class="col-md-6 col-lg-4">
                                <x-admin.forms.input
                                    name="name"
                                    label="뷰티샵 명칭"
                                    :value="old('name', $shop->name)"
                                    placeholder="예: GLOBEAU 강남본점"
                                    required />
                            </div>

                            <!-- 대표자 성명 -->
                            <div class="col-md-6 col-lg-4">
                                <x-admin.forms.input
                                    name="ceo_name"
                                    label="대표자 성명"
                                    :value="old('ceo_name', $shop->ceo_name)"
                                    placeholder="홍길동"
                                    required />
                            </div>

                            <!-- 사업자 등록번호 (읽기 전용 고정) -->
                            <div class="col-md-6 col-lg-4">
                                <x-admin.forms.input
                                    name="business_number_display"
                                    label="사업자 등록번호"
                                    :value="$shop->business_number ?? '미등록'"
                                    readonly
                                    prepend='<i class="fa-solid fa-building"></i>'
                                    helpText="사업자번호 변경은 본사 고객센터 심사를 통해 가능합니다." />
                                <input type="hidden" name="business_number" value="{{ $shop->business_number }}">
                            </div>

                            <!-- 매장 대표 연락처 (TEL) -->
                            <div class="col-md-6 col-lg-4">
                                <x-admin.forms.input
                                    name="tel"
                                    label="매장 대표 연락처 (TEL)"
                                    :value="old('tel', $shop->tel)"
                                    placeholder="02-000-0000"
                                    prepend='<i class="fa-solid fa-phone"></i>'
                                    required />
                            </div>

                            <!-- 대표자 휴대폰 번호 (.input-phone 하이픈 자동 변환 클래스) -->
                            <div class="col-md-6 col-lg-4">
                                <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="input-phone" />
                            </div>

                            <!-- 대표자 이메일 -->
                            <div class="col-md-6 col-lg-4">
                                <x-admin.forms.input
                                    type="email"
                                    name="ceo_email"
                                    label="대표자 이메일"
                                    :value="old('ceo_email', $shop->ceo_email)"
                                    placeholder="owner@globeau.kr"
                                    prepend='<i class="fa-solid fa-envelope"></i>' />
                            </div>

                            <!-- 대표자 이메일 바로 다음 컬럼으로 배치 (col-12) -->
                            <!-- 🌟 뷰티샵 전문 분야 (독립 카드 제거 -> 인라인 필드형 배치) -->
                            @if(View::exists('components.admin.category-picker'))
                            <div class="col-12">
                                <x-admin.category-picker
                                    :selected-categories="$shop->categories ?? null"
                                    type="shop"
                                    max-depth="1"
                                    variant="secondary"
                                    title="뷰티샵 전문 분야" />
                            </div>
                            @endif
                        </div>

                        <!-- 섹션 1 모바일 전용 저장 버튼 -->
                        <div class="section-save-btn-wrap justify-content-end mt-4 pt-3 border-top">
                            <button type="submit" form="shopForm" class="btn text-white px-4 py-2 fw-semibold btn-app-sm shadow-xs"
                                style="background-color: var(--primary-color, #b18977); border-radius: var(--radius-fixed, 6px);">
                                <i class="fa-solid fa-check me-1"></i> 프로필 정보 저장
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===================================================================
                 2. 매장 위치 및 주소 (Daum 우편번호 & Kakao LBS 6대 히든 필드)
                 - 필수 (Required): 모바일에서 기본 접힘(collapsed) 상태
                 ================================================================== -->
            <div class="accordion-item app-form-card mb-4 border-0 shadow-sm" style="border-radius: var(--radius-fixed, 6px); overflow: hidden;">
                <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 d-md-none" style="font-size: 0.68rem;">필수</span>
                            <span class="fs-6 fw-bold text-dark">
                                <i class="fa-solid fa-location-dot me-1 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 p-3 p-md-4 pt-1 border-top" style="border-color: #f1f5f9 !important;">
                        <div class="row g-3">
                            <!-- 좌측: 주소 검색 레이어 및 상세 주소 -->
                            <div class="col-md-6">
                                <label class="form-label small fw-bold text-secondary">우편번호 및 기본 주소 <span class="text-danger">*</span></label>
                                <div class="d-flex align-items-center gap-2 mb-2">
                                    <!-- 1. 우편번호 컴포넌트 (공용 폼 컴포넌트 규격 적용) -->
                                    <div style="flex: 1; max-width: 140px;" class="zip-input-wrap">
                                        <x-admin.forms.input
                                            name="zipcode"
                                            id="zipcode"
                                            :value="old('zipcode', $shop->zipcode)"
                                            placeholder="우편번호"
                                            readonly
                                            class="text-center fw-semibold zip-input-field"
                                            data-required="true"
                                            data-label="우편번호" />
                                    </div>

                                    <!-- 2. 우편번호 찾기 버튼 (모바일 슬림 알약형 핏) -->
                                    <button type="button"
                                        class="btn btn-sceon fw-bold btn-zipcode-search shadow-xs"
                                        id="btn-address">
                                        <i class="fa-solid fa-magnifying-glass me-1"></i> 우편번호 찾기
                                    </button>
                                </div>

                                <!-- Daum 우편번호 레이어 임베드 컨테이너 -->
                                <div id="wrap" class="my-2" style="display:none; border:1px solid #ced4da; width:100%; height:350px; position:relative; border-radius: var(--radius-fixed, 6px); background:#fff; overflow:hidden;">
                                    <button type="button" id="btnFoldWrap" class="btn btn-sm btn-dark position-absolute shadow-sm" style="z-index: 101; top:10px; right:10px; opacity: 0.8;" title="닫기">
                                        <i class="fas fa-times"></i>
                                    </button>
                                </div>

                                <!-- 기본 주소 (읽기 전용) -->
                                <div class="mb-2">
                                    <input type="text" class="form-control 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>

                                <!-- 상세 주소 (직접 입력) -->
                                <x-admin.forms.input
                                    name="address2"
                                    id="address2"
                                    :value="old('address2', $shop->address2)"
                                    placeholder="상세 주소를 입력해주세요 (층수, 호수 등)" />

                                <!-- 카카오 Geocoder LBS 6대 히든 필드 -->
                                <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">
                                    <x-admin.forms.input
                                        name="fax"
                                        label="팩스 번호 (FAX)"
                                        :value="old('fax', $shop->fax)"
                                        placeholder="02-000-0001"
                                        prepend='<i class="fa-solid fa-fax"></i>' />
                                </div>
                            </div>
                        </div>

                        <!-- 섹션 2 모바일 전용 저장 버튼 -->
                        <div class="section-save-btn-wrap justify-content-end mt-4 pt-3 border-top">
                            <button type="submit" form="shopForm" class="btn text-white px-4 py-2 fw-semibold btn-app-sm shadow-xs"
                                style="background-color: var(--primary-color, #b18977); border-radius: var(--radius-fixed, 6px);">
                                <i class="fa-solid fa-check me-1"></i> 위치 정보 저장
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===================================================================
                 3. 매장 소개 및 홍보 채널 (소개글, 네이버 플레이스, 유튜브, 태그)
                 - 선택 (Optional): 모바일에서 기본 접힘(collapsed) 상태
                 ================================================================== -->
            <div class="accordion-item app-form-card mb-4 border-0 shadow-sm" style="border-radius: var(--radius-fixed, 6px); overflow: hidden;">
                <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 d-md-none" style="font-size: 0.68rem;">선택</span>
                            <span class="fs-6 fw-bold text-dark">
                                <i class="fa-solid fa-bullhorn me-1 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 p-3 p-md-4 pt-1 border-top" style="border-color: #f1f5f9 !important;">
                        <div class="row g-3">
                            <!-- 한 줄 소개 (요약) -->
                            <div class="col-12">
                                <x-admin.forms.input
                                    name="introduction"
                                    label="한 줄 소개 (요약)"
                                    :value="old('introduction', $shop->introduction)"
                                    placeholder="고객에게 노출될 매장의 핵심 매력을 한 줄로 작성해 주세요." />
                            </div>

                            <!-- 상세 소개글 (TinyMCE 웹에디터 바인딩용 textarea) -->
                            <div class="col-12">
                                <label for="editor" class="form-label small fw-bold text-secondary">매장 상세 소개글</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>

                            <!-- 네이버 플레이스 URL -->
                            <div class="col-md-6 col-lg-4">
                                <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/..."
                                    prepend='<i class="fa-solid fa-map-pin"></i>' />
                            </div>

                            <!-- 유튜브 영상 ID -->
                            <div class="col-md-6 col-lg-4">
                                <x-admin.forms.input
                                    name="youtube_id"
                                    label="유튜브 영상 ID (홍보 영상 코드)"
                                    :value="old('youtube_id', $shop->youtube_id)"
                                    placeholder="예: dQw4w9WgXcQ"
                                    prepend='<i class="fa-brands fa-youtube text-danger"></i>' />
                            </div>

                            <!-- 검색 태그 -->
                            <div class="col-md-12 col-lg-4">
                                <x-admin.forms.input
                                    name="tags"
                                    label="검색 태그"
                                    :value="old('tags', is_array($shop->tags) ? implode(', ', $shop->tags) : $shop->tags)"
                                    placeholder="예: 두피케어, 에너지테라피"
                                    class="tag-input-field"
                                    helpText="쉼표(,)로 구분하여 입력하세요."
                                    prepend='<i class="fa-solid fa-tags"></i>' />
                            </div>
                        </div>

                        <!-- 섹션 3 모바일 전용 저장 버튼 -->
                        <div class="section-save-btn-wrap justify-content-end mt-4 pt-3 border-top">
                            <button type="submit" form="shopForm" class="btn text-white px-4 py-2 fw-semibold btn-app-sm shadow-xs" 
                                    style="background-color: var(--primary-color, #b18977); border-radius: var(--radius-fixed, 6px);">
                                <i class="fa-solid fa-check me-1"></i> 소개 정보 저장
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===================================================================
                 4. 매장 브랜딩 및 갤러리 이미지 (독립 아코디언 섹션)
                 - 단일 브랜딩 슬롯(로고, 배너, 모바일 배너) + 다중 갤러리(Swiper)
                 ================================================================== -->
            <div class="accordion-item app-form-card mb-4 border-0 shadow-sm" style="border-radius: var(--radius-fixed, 6px); overflow: hidden;">
                <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 d-md-none" style="font-size: 0.68rem;">선택</span>
                            <span class="fs-6 fw-bold text-dark">
                                <i class="fa-solid fa-photo-film me-1 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 p-3 p-md-4 pt-1 border-top" style="border-color: #f1f5f9 !important;">
                        
                        <!-- 4-1. 대표 브랜딩 이미지 (로고, PC 배너, 모바일 배너) -->
                        <div class="mb-4">
                            <!-- 🌟 모바일에서는 타이틀과 설명을 숨김 (PC에서만 노출) -->
                            <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-1 text-primary" style="color: var(--primary-color, #b18977) !important;"></i>
                                        매장 대표 브랜딩 이미지
                                    </h6>
                                    <span class="text-muted small">홈페이지, 모바일 웹, SNS 공유 시 노출되는 대표 비주얼을 등록하세요.</span>
                                </div>
                            </div>

                            <!-- 단일 이미지 슬롯 3종 그리드 -->
                            <div class="row g-3 align-items-stretch">
                                <!-- 1. 매장 대표 로고 (1:1) -->
                                <div class="col-md-4">
                                    <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>

                                <!-- 2. PC 메인 와이드 배너 (3:1) -->
                                <div class="col-md-4">
                                    <x-shop_admin.image-single-slot
                                        name="banner"
                                        label="배너 이미지 (Banner - 3:1)"
                                        :model="$shop ?? null"
                                        width="180"
                                        height="60"
                                        ratioText="권장 규격: 3:1 와이드 (1200×400)" />
                                </div>

                                <!-- 3. 모바일 / SNS 공유 OG 이미지 (2:1) -->
                                <div class="col-md-4">
                                    <x-shop_admin.image-single-slot
                                        name="og_image"
                                        label="모바일 배너 (Og Image - 2:1)"
                                        :model="$shop ?? null"
                                        width="120"
                                        height="60"
                                        ratioText="권장 규격: 2:1 와이드 (1200×630)" />
                                </div>
                            </div>
                        </div>

                        <!-- 4-2. 🌟 매장 마케팅 갤러리 이미지 (헤더/버튼 재배치 & 2열 모바일 슬라이더) -->
                        <div class="pt-4 border-top" data-max-count="{{ $maxMarketingImages ?? 30 }}">
                            
                            <!-- 상단 헤더: [타이틀 + 버튼] 1열 배치 / [설명] 아래 배치 -->
                            <div class="mb-3">
                                <div class="d-flex justify-content-between align-items-center mb-1">
                                    <h6 class="fw-bold mb-0 text-dark d-flex align-items-center">
                                        <i class="fa-solid fa-images me-1 text-info"></i>
                                        <span>마케팅 갤러리 이미지</span>
                                        <span class="badge bg-light text-secondary border ms-2 fw-semibold" id="marketingCountBadge">
                                            {{ $currentMarketingCount }} / {{ $maxMarketingImages ?? 30 }}
                                        </span>
                                    </h6>
                                    
                                    <!-- 사진 추가 버튼 (모바일에서도 우측 상단 고정 핏) -->
                                    <button type="button" class="btn btn-outline-primary btn-app-xs fw-semibold btn-open-media-modal shadow-xs flex-shrink-0"
                                        id="btnOpenMarketingMedia"
                                        data-type="marketing"
                                        data-mode="multiple"
                                        data-max-count="{{ $maxMarketingImages ?? 30 }}"
                                        style="border-radius: var(--radius-fixed, 6px);"
                                        @if($currentMarketingCount >= ($maxMarketingImages ?? 30)) disabled @endif>
                                        <i class="fa-solid fa-plus me-1"></i> 사진 추가
                                    </button>
                                </div>
                                <!-- 버튼 아래로 배치된 설명 문구 -->
                                <div class="text-muted small" style="font-size: 0.76rem;">
                                    매장 상세 화면에 노출될 인테리어 및 시술 사진을 등록하세요. (길게 눌러 순서 재배치 가능)
                                </div>
                            </div>

                            <!-- Swiper 컨테이너 래퍼 -->
                            <div class="position-relative app-form-card px-2 px-md-3">
                                <!-- 좌측 이동 버튼 (모바일에서는 간섭 방지를 위해 히든 처리 권장) -->
                                <div class="marketing-swiper-btn marketing-prev position-absolute start-0 d-none d-md-flex">
                                    <i class="fa-solid fa-chevron-left" style="font-size: 0.75rem;"></i>
                                </div>
                                <!-- 우측 이동 버튼 -->
                                <div class="marketing-swiper-btn marketing-next position-absolute end-0 d-none d-md-flex">
                                    <i class="fa-solid fa-chevron-right" style="font-size: 0.75rem;"></i>
                                </div>

                                <!-- Swiper 본체 -->
                                <div class="swiper marketing-swiper mx-0 mx-md-4 py-3">
                                    <div class="swiper-wrapper" id="marketingImagesWrapper">
                                        @if(isset($marketingImages) && $marketingImages->isNotEmpty())
                                        @foreach($marketingImages as $index => $img)
                                        <div class="swiper-slide marketing-slide-item"
                                            data-image-id="{{ $img->id }}"
                                            role="group"
                                            aria-label="{{ $index + 1 }} / {{ $marketingImages->count() }}">
                                            <div class="h-100 bg-white border rounded d-flex flex-column justify-content-between position-relative shadow-xs p-1" style="border-radius: var(--radius-fixed, 6px) !important;">
                                                <!-- 삭제 버튼 -->
                                                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-1.5 p-0 rounded-circle d-flex align-items-center justify-content-center btn-remove-marketing shadow-sm"
                                                    style="width: 22px; height: 22px; z-index: 5;" title="삭제" data-image-id="{{ $img->id }}">
                                                    <i class="fa-solid fa-times" style="font-size: 0.65rem;"></i>
                                                </button>

                                                <!-- 1:1 미리보기 핏 -->
                                                <div class="preview-wrap position-relative mb-1" style="aspect-ratio: 1 / 1; width: 100%;">
                                                    <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-light rounded overflow-hidden">
                                                        <img src="{{ $img->preview_url ?? ($img->thumb_url ?? asset('storage/' . $img->path)) }}"
                                                            alt="{{ $img->original_name ?? ($img->client_name ?? $img->name) }}"
                                                            style="max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: cover; display: block;">
                                                    </div>
                                                </div>

                                                <!-- 파일명 (1줄 말줄임) -->
                                                <div class="marketing-filename-clamp text-center text-muted fw-semibold px-1 py-0.5 text-truncate" style="font-size: 0.72rem;" title="{{ $img->original_name ?? ($img->client_name ?? basename($img->path)) }}">
                                                    {{ $img->original_name ?? ($img->client_name ?? basename($img->path)) }}
                                                </div>

                                                <!-- 히든 인풋 -->
                                                <input type="hidden" name="marketing_image_ids[]" value="{{ $img->id }}">
                                                <input type="hidden" name="image_sorts[{{ $img->id }}]" value="{{ $img->pivot->sort_order ?? ($index + 1) }}" class="input-sort-order">
                                            </div>
                                        </div>
                                        @endforeach
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <div id="deleteImageIdsContainer"></div>
                        </div>

                        <!-- 섹션 4 모바일 전용 저장 버튼 -->
                        <div class="section-save-btn-wrap justify-content-end mt-4 pt-3 border-top">
                            <button type="submit" form="shopForm" class="btn text-white px-4 py-2 fw-semibold btn-app-sm shadow-xs" 
                                    style="background-color: var(--primary-color, #b18977); border-radius: var(--radius-fixed, 6px);">
                                <i class="fa-solid fa-check me-1"></i> 이미지 정보 저장
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- ===================================================================
                 정산 입금 계좌 정보 (shops 테이블 컬럼: bank_name, bank_account, bank_holder)
                 - 선택 (Optional): 모바일에서 기본 접힘(collapsed) 상태
                 ================================================================== -->
            <div class="accordion-item app-form-card mb-4 border-0 shadow-sm" style="border-radius: var(--radius-fixed, 6px); overflow: hidden;">
                <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 d-md-none" style="font-size: 0.68rem;">선택</span>
                            <span class="fs-6 fw-bold text-dark">
                                <i class="fa-solid fa-calculator me-1 text-primary" style="color: var(--primary-color, #b18977) !important;"></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 p-3 p-md-4 pt-1 border-top" style="border-color: #f1f5f9 !important;">
                        <div class="row g-3">
                            <!-- 은행명 (Select 컴포넌트) -->
                            <div class="col-md-4">
                                @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)"
                                    placeholder="은행을 선택해 주세요" />
                                @else
                                <label for="bank_name" class="form-label small fw-bold text-secondary">은행명</label>
                                <select name="bank_name" id="bank_name" class="form-select form-select-sm">
                                    <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>

                            <!-- 계좌번호 (Input 컴포넌트) -->
                            <div class="col-md-4">
                                <x-admin.forms.input
                                    name="bank_account"
                                    id="bank_account"
                                    label="계좌번호"
                                    :value="old('bank_account', $shop->bank_account)"
                                    placeholder="예: 110123456789"
                                    helpText="(- 없이 숫자만 입력)"
                                    prepend='<i class="fa-solid fa-credit-card"></i>'
                                    maxlength="35"
                                    oninput="this.value = this.value.replace(/[^0-9]/g, '');" />
                            </div>

                            <!-- 예금주 (Input 컴포넌트) -->
                            <div class="col-md-4">
                                <x-admin.forms.input
                                    name="bank_holder"
                                    id="bank_holder"
                                    label="예금주"
                                    :value="old('bank_holder', $shop->bank_holder)"
                                    placeholder="예금주 성명 또는 상호명"
                                    prepend='<i class="fa-solid fa-user-check"></i>'
                                    maxlength="50" />
                            </div>

                            <!-- 정산 안내 팁 -->
                            <div class="col-12 mt-2">
                                <div class="p-2 bg-light border rounded small text-muted d-flex align-items-center">
                                    <i class="fa-solid fa-circle-info text-primary me-2" style="color: var(--primary-color, #b18977) !important;"></i>
                                    <span>정산 입금 계좌는 세무 증빙 및 원활한 대금 입금을 위해 등록된 사업자등록증 상의 <strong>상호명 또는 대표자명과 일치</strong>해야 합니다.</span>
                                </div>
                            </div>
                        </div>

                        <!-- 섹션 4 모바일 전용 저장 버튼 -->
                        <div class="section-save-btn-wrap justify-content-end mt-4 pt-3 border-top">
                            <button type="submit" form="shopForm" class="btn text-white px-4 py-2 fw-semibold btn-app-sm shadow-xs"
                                style="background-color: var(--primary-color, #b18977); border-radius: var(--radius-fixed, 6px);">
                                <i class="fa-solid fa-check me-1"></i> 계좌 정보 저장
                            </button>
                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- /accordion -->

        <!-- 하단 액션 버튼 (PC 전용 노출) -->
        <div class="d-none d-md-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('styles')
<!-- Swiper 11 CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<!-- 뷰티샵 관리자 뷰티샵 전용 스타일 -->
<link rel="stylesheet" href="{{ asset('css/shop_admin/shop_admin_shop.css') }}?v={{ time() }}">
@endpush

@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>

<!-- Swiper 11 JS CDN -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- Daum 우편번호 서비스 CDN & 카카오 지도 Web API -->
<script src="//t1.daumcdn.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>

<!-- 1. 공통 주소 검색 및 카카오 Geocoder LBS 자동 연동 스크립트 (우편번호 전담) -->
<script src="{{ asset('js/address_search.js') }}"></script>

<!-- 2. 카테고리 선택 전용 스크립트 -->
<script src="{{ asset('js/admin/category_picker.js') }}"></script>

<!-- 3. 뷰티샵관리자 매장 전용 스크립트 (미디어 슬롯 바인딩 및 필수 검증 전담) -->
<script src="{{ asset('js/shop_admin/shop_admin_shop.js') }}?v={{ time() }}"></script>
@endpush