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

<!-- 성공/에러 메시지 알림 (세션) -->
@if(session('success'))
<div class="alert alert-success alert-dismissible fade show border-0 shadow-sm" role="alert">
    <i class="fa-solid fa-circle-check me-2"></i> {{ session('success') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

@if(session('error'))
<div class="alert alert-danger alert-dismissible fade show border-0 shadow-sm" role="alert">
    <i class="fa-solid fa-circle-exclamation me-2"></i> {{ session('error') }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif

<div class="container-fluid px-0">

    <!-- 1. 검색 및 필터 박스 -->
    <div class="search-filter-section mb-3">
        <form id="searchForm" method="GET" action="{{ route('admin.shops.pending') }}">

            <!-- [PC 전용 상세 필터] -->
            <div class="pc-only-section">
                <div class="row g-2 align-items-center">
                    <div class="col-md-9">
                        <div class="input-group input-group-sm">
                            <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
                            <input type="text" name="keyword" class="form-control border-start-0 ps-0" placeholder="샵 이름, 대표자명 검색" value="{{ request('keyword') }}">
                        </div>
                    </div>
                    <div class="col-md-3 text-end">
                        <button type="submit" class="btn btn-dark btn-sm w-100">검색 적용</button>
                    </div>
                </div>
            </div>

            <!-- [모바일 전용 단어 검색] -->
            <div class="mobile-only-section">
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="fa-solid fa-magnifying-glass text-muted"></i></span>
                    <input type="text" name="keyword" class="form-control border-start-0 ps-0" placeholder="샵 이름, 대표자명 검색" value="{{ request('keyword') }}">
                    <button type="submit" class="btn btn-sm btn-dark px-3">검색</button>
                </div>
            </div>

            <!-- 건수 표시 및 보기 개수 조절 -->
            <div class="d-flex justify-content-between align-items-center mt-3 pt-2 border-top border-light">
                <span class="text-muted small">
                    신청 및 심사 관리 건수: <strong class="text-danger">{{ isset($shops) ? $shops->total() : 0 }}</strong>건
                </span>

                <div class="d-flex align-items-center gap-1">
                    <select name="per_page" id="perPageSelect" class="form-select form-select-sm" style="width: 110px; font-size: 0.8rem;">
                        <option value="15" {{ request('per_page', 15) == 15 ? 'selected' : '' }}>15개씩</option>
                        <option value="30" {{ request('per_page') == 30 ? 'selected' : '' }}>30개씩</option>
                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50개씩</option>
                    </select>
                </div>
            </div>

        </form>
    </div>

    <!-- ======================================================
        [PC 전용 영역] 심사 및 반려 리스트 테이블
        ====================================================== -->
    <div class="pc-only-section">
        <div class="card border-0 shadow-sm">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" style="min-width: 1200px;">
                    <thead class="text-secondary small text-uppercase shop-table-header">
                        <tr>
                            <th style="width: 10%;" class="py-3 ps-4 text-center">대표 이미지</th>
                            <th class="py-3">뷰티샵 신청정보</th>
                            <th style="width: 18%;" class="py-3 text-center">신청자 정보</th>
                            <th style="width: 15%;" class="py-3 text-center">신청 일시</th>
                            <th style="width: 250px;" class="py-3 text-end pe-4">관리</th>
                        </tr>
                    </thead>

                    <tbody>
                        @php
                        $pcShops = isset($shops) && method_exists($shops, 'items') ? $shops->items() : [];
                        @endphp

                        @forelse($pcShops as $shop)
                        @php
                        $id = $shop->id;
                        $name = $shop->name;
                        $ceoName = $shop->ceo_name;
                        $introduction = $shop->introduction;
                        $address = trim(($shop->address1 ?? '') . ' ' . ($shop->address2 ?? ''));
                        $status = $shop->status;

                        $applicantName = $shop->user->name ?? '정보 없음';
                        $applicantEmail = $shop->user->email ?? '-';
                        $applicantPhone = $shop->user->phone ?? '-';

                        $thumbPath = $shop->logo_path ?? null;
                        @endphp
                        <tr>
                            <!-- 1. 썸네일 이미지 -->
                            <td class="text-center py-3">
                                <div class="position-relative d-inline-block">
                                    <img src="{{ $thumbPath ? asset('storage/' . $thumbPath) : 'https://placehold.co/120x120?text=No+Image' }}"
                                        alt="{{ $name }}"
                                        class="rounded border shadow-sm"
                                        style="width: 120px; height: 120px; object-fit: cover;"
                                        onerror="this.src='https://placehold.co/120x120?text=No+Image'">

                                    @if($status === 'rejected')
                                    <span class="position-absolute top-0 start-0 translate-middle badge bg-danger text-white border border-white rounded-pill" style="font-size: 0.6rem;">반려됨</span>
                                    @else
                                    <span class="position-absolute top-0 start-0 translate-middle badge bg-warning text-dark border border-white rounded-pill" style="font-size: 0.6rem;">심사대기</span>
                                    @endif
                                </div>
                            </td>

                            <!-- 2. 뷰티샵 신청정보 -->
                            <td class="py-3">
                                <div class="d-flex flex-column gap-1">
                                    <div class="d-flex align-items-center gap-2">
                                        <button type="button" class="btn btn-link p-0 fw-bold text-dark text-decoration-none fs-6 text-start" onclick="openDetailModal({{ $shop }})">
                                            {{ $name }}
                                        </button>
                                        <span class="badge bg-light text-secondary border" style="font-size: 0.7rem;">샵 대표: {{ $ceoName }}</span>
                                    </div>
                                    @if($status === 'rejected' && $shop->rejection_reason)
                                    <div class="text-danger small fw-medium text-truncate" style="max-width: 400px;">
                                        <i class="fa-solid fa-triangle-exclamation me-1"></i>반려사유: {{ $shop->rejection_reason }}
                                    </div>
                                    @elseif($introduction)
                                    <div class="text-muted small" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; max-height: 2.8em;">
                                        {{ $introduction }}
                                    </div>
                                    @endif
                                    @if($address)
                                    <div class="text-secondary" style="font-size: 0.75rem;">
                                        <i class="fa-solid fa-location-dot me-1 text-muted"></i>{{ $address }}
                                    </div>
                                    @endif
                                </div>
                            </td>

                            <!-- 3. 신청자 정보 -->
                            <td class="text-center">
                                <div class="small fw-bold text-dark">{{ $applicantName }}</div>
                                <div class="text-muted" style="font-size: 0.75rem;">{{ $applicantEmail }}</div>
                                <div class="text-muted" style="font-size: 0.75rem;">{{ $applicantPhone }}</div>
                            </td>

                            <!-- 4. 신청 일시 -->
                            <td class="text-center">
                                <div class="small text-dark fw-medium">{{ $shop->created_at->format('Y-m-d') }}</div>
                                <div class="text-muted" style="font-size: 0.75rem;">{{ $shop->created_at->format('H:i:s') }}</div>
                            </td>

                            <!-- 5. 관리 버튼 -->
                            <td class="text-end py-3 pe-4">
                                <div class="d-flex justify-content-end align-items-center gap-1">
                                    @if($status === 'pending')
                                    <!-- 승인 버튼 -->
                                    <form action="{{ route('admin.shops.approve', $shop->id) }}" method="POST" class="d-inline" onsubmit="return confirm('해당 뷰티샵의 입점을 승인하시겠습니까?');">
                                        @csrf
                                        @method('PATCH')
                                        <button type="submit" class="btn btn-sm btn-primary fw-bold px-2 py-1" style="font-size: 0.75rem;">
                                            <i class="fa-solid fa-check me-1"></i> 승인
                                        </button>
                                    </form>

                                    <!-- 반려 버튼 -->
                                    <button type="button" class="btn btn-sm btn-outline-danger fw-bold px-2 py-1" onclick="openRejectModal({{ $shop->id }})" style="font-size: 0.75rem;">
                                        <i class="fa-solid fa-xmark me-1"></i> 반려
                                    </button>
                                    @endif

                                    <!-- 내용보기 버튼 -->
                                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1" onclick="openDetailModal({{ $shop }})" title="내용보기" style="font-size: 0.75rem;">
                                        <i class="fa-solid fa-eye me-1"></i> 내용보기
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <i class="fa-regular fa-folder-open fs-3 mb-2 d-block text-secondary"></i>
                                현재 신청 및 심사 대기 중인 뷰티샵이 없습니다.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- ======================================================
        [모바일 전용 영역]
        ====================================================== -->
    <div class="mobile-only-section">
        <div class="d-flex flex-column gap-3">
            @forelse($pcShops as $shop)
            @php $status = $shop->status; @endphp
            <div class="card border shadow-sm p-3">
                <div class="d-flex align-items-center gap-3 mb-3">
                    <img src="{{ $shop->logo_path ? asset('storage/' . $shop->logo_path) : 'https://placehold.co/80x80?text=No+Image' }}"
                        alt="{{ $shop->name }}"
                        class="rounded border" style="width: 70px; height: 70px; object-fit: cover;">
                    <div class="flex-grow-1 min-width-0">
                        <div class="d-flex justify-content-between align-items-center mb-1">
                            <h6 class="fw-bold text-dark mb-0 text-truncate">{{ $shop->name }}</h6>
                            @if($status === 'rejected')
                            <span class="badge bg-danger text-white" style="font-size: 0.65rem;">반려됨</span>
                            @else
                            <span class="badge bg-warning text-dark" style="font-size: 0.65rem;">대기중</span>
                            @endif
                        </div>
                        <div class="text-muted small">대표: {{ $shop->ceo_name }} | {{ $shop->tel ?? '연락처 없음' }}</div>
                        @if($status === 'rejected' && $shop->rejection_reason)
                        <div class="text-danger small text-truncate mt-1" style="font-size: 0.7rem;">
                            사유: {{ $shop->rejection_reason }}
                        </div>
                        @endif
                    </div>
                </div>

                <!-- 모바일 하단 액션 버튼 -->
                <div class="d-flex gap-2 pt-2 border-top">
                    @if($status === 'pending')
                    <form action="{{ route('admin.shops.approve', $shop->id) }}" method="POST" class="flex-grow-1" onsubmit="return confirm('입점을 승인하시겠습니까?');">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="btn btn-primary btn-sm w-100 fw-bold" style="font-size: 0.8rem;">
                            <i class="fa-solid fa-check me-1"></i> 승인
                        </button>
                    </form>

                    <button type="button" class="btn btn-outline-danger btn-sm flex-grow-1 fw-bold" onclick="openRejectModal({{ $shop->id }})" style="font-size: 0.8rem;">
                        <i class="fa-solid fa-xmark me-1"></i> 반려
                    </button>
                    @endif

                    <button type="button" class="btn btn-outline-secondary btn-sm px-3 flex-grow-1" onclick="openDetailModal({{ $shop }})" style="font-size: 0.8rem;">
                        <i class="fa-solid fa-eye me-1"></i> 내용보기
                    </button>
                </div>
            </div>
            @empty
            <div class="text-center py-5 text-muted bg-white border rounded shadow-sm">
                신청 및 심사 대기 중인 뷰티샵이 없습니다.
            </div>
            @endforelse
        </div>
    </div>

</div>

<!-- 반려 사유 입력 모달 -->
<div class="modal fade" id="rejectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form id="rejectForm" method="POST">
            @csrf
            @method('PATCH')
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold">입점 반려 사유 입력</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="rejection_reason" class="form-label small fw-semibold text-muted">반려 사유를 상세히 입력해 주세요. (원장님에게 안내됩니다)</label>
                        <textarea class="form-control" name="rejection_reason" id="rejection_reason" rows="4" required placeholder="예: 사업자등록번호가 식별되지 않습니다. 재등록 부탁드립니다."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">취소</button>
                    <button type="submit" class="btn btn-danger btn-sm fw-bold">반려 처리 확정</button>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- 뷰티샵 입점 신청 내용보기 모달 -->
<div class="modal fade" id="shopDetailModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content border-0 shadow" style="border-radius: 12px;">
            <div class="modal-header bg-light" style="border-top-left-radius: 12px; border-top-right-radius: 12px;">
                <h5 class="modal-title fw-bold text-dark">
                    <i class="fa-solid fa-store me-2 text-primary"></i>뷰티샵 입점 신청 상세 정보
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4" style="background-color: #fcfbfa;">

                <!-- 반려된 샵일 경우 상단에 반려 사유 안내 배너 노출 -->
                <div id="modal_rejection_alert" class="alert alert-danger d-none mb-3 py-2 small" role="alert">
                    <i class="fa-solid fa-circle-exclamation me-1"></i> <strong>반려된 건입니다.</strong> 사유: <span id="modal_rejection_text"></span>
                </div>

                <!-- 1. 신청인 정보 섹션 -->
                <div class="card border-0 shadow-sm mb-3" style="border-radius: 8px;">
                    <div class="card-body p-3">
                        <h6 class="fw-bold text-secondary mb-3 pb-2 border-bottom">
                            <i class="fa-solid fa-user-check me-1"></i> 신청인 및 인증 정보
                        </h6>
                        <div class="row g-3 small">
                            <div class="col-md-6">
                                <span class="text-muted d-block">신청자명 (계정)</span>
                                <strong id="modal_applicant_name" class="text-dark fs-6">-</strong>
                            </div>
                            <div class="col-md-6">
                                <span class="text-muted d-block">신청인 연락처</span>
                                <strong id="modal_applicant_phone" class="text-dark fs-6">-</strong>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 2. 뷰티샵 및 사업자 정보 섹션 -->
                <div class="card border-0 shadow-sm mb-3" style="border-radius: 8px;">
                    <div class="card-body p-3">
                        <h6 class="fw-bold text-secondary mb-3 pb-2 border-bottom">
                            <i class="fa-solid fa-shop me-1"></i> 뷰티샵 및 사업자 정보
                        </h6>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label text-muted small mb-1">사업자등록번호</label>
                                <input type="text" id="modal_business_number" class="form-control form-control-sm bg-white" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted small mb-1">뷰티샵명 (상호명)</label>
                                <input type="text" id="modal_name" class="form-control form-control-sm bg-white" readonly>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label text-muted small mb-1">대표자명</label>
                                <input type="text" id="modal_ceo_name" class="form-control form-control-sm bg-white" readonly>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label text-muted small mb-1">샵 위치 주소</label>
                                <div class="input-group input-group-sm mb-1">
                                    <input type="text" id="modal_zipcode" class="form-control bg-white" readonly style="max-width: 100px;">
                                    <input type="text" id="modal_address1" class="form-control bg-white" readonly>
                                </div>
                                <input type="text" id="modal_address2" class="form-control form-control-sm bg-white" readonly>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label text-muted small mb-1">한 줄 소개</label>
                                <input type="text" id="modal_introduction" class="form-control form-control-sm bg-white" readonly>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label text-muted small mb-1">샵 상세 설명</label>
                                <textarea id="modal_description" class="form-control form-control-sm bg-white" rows="3" readonly></textarea>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer bg-light justify-content-between" style="border-bottom-left-radius: 12px; border-bottom-right-radius: 12px;">
                <div>
                    <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal">닫기</button>
                </div>
                <!-- 🌟 대기 건에만 노출되는 모달 하단 승인/반려 버튼 영역 -->
                <div class="d-flex gap-2" id="modal_action_buttons">
                    <form id="modalApproveForm" method="POST" class="d-inline" onsubmit="return confirm('해당 뷰티샵의 입점을 승인하시겠습니까?');">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="btn btn-sm btn-primary fw-bold px-3">
                            <i class="fa-solid fa-check me-1"></i> 승인
                        </button>
                    </form>

                    <button type="button" id="modalRejectBtn" class="btn btn-sm btn-outline-danger fw-bold px-3">
                        <i class="fa-solid fa-xmark me-1"></i> 반려
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    let currentDetailShopId = null;

    document.addEventListener('DOMContentLoaded', () => {
        const perPageSelect = document.getElementById('perPageSelect');
        if (perPageSelect) {
            perPageSelect.addEventListener('change', () => {
                document.getElementById('searchForm').submit();
            });
        }

        // 내용보기 모달 안의 [반려] 버튼 클릭 시 모달 스무스 전환 처리
        const modalRejectBtn = document.getElementById('modalRejectBtn');
        if (modalRejectBtn) {
            modalRejectBtn.addEventListener('click', function() {
                if (!currentDetailShopId) return;

                // 1. 내용보기 모달 닫기
                const detailModalEl = document.getElementById('shopDetailModal');
                const detailModal = bootstrap.Modal.getInstance(detailModalEl);
                if (detailModal) {
                    detailModal.hide();
                }

                // 2. 아주 짧은 딜레이 후 반려 사유 입력 모달 띄우기
                setTimeout(() => {
                    openRejectModal(currentDetailShopId);
                }, 250);
            });
        }
    });

    // 반려 모달 오픈 및 액션 URL 동적 매핑
    function openRejectModal(shopId) {
        const form = document.getElementById('rejectForm');
        form.action = `/admin/shops/${shopId}/reject`;
        const modal = new bootstrap.Modal(document.getElementById('rejectModal'));
        modal.show();
    }

    // 내용보기 모달 오픈 및 데이터 매핑
    function openDetailModal(shop) {
        currentDetailShopId = shop.id; // 현재 샵 ID 저장
        let applicantPhone = '-';
        if (shop.user && shop.user.phone) {
            applicantPhone = shop.user.phone;
        }

        // 1. 신청인 정보 매핑
        document.getElementById('modal_applicant_name').textContent = shop.user ? shop.user.name : '정보 없음';
        document.getElementById('modal_applicant_phone').textContent = applicantPhone;

        // 2. 뷰티샵 및 사업자 정보 매핑
        document.getElementById('modal_business_number').value = shop.business_number || '-';
        document.getElementById('modal_name').value = shop.name || '';
        document.getElementById('modal_ceo_name').value = shop.ceo_name || '';
        document.getElementById('modal_zipcode').value = shop.zipcode || '';
        document.getElementById('modal_address1').value = shop.address1 || '';
        document.getElementById('modal_address2').value = shop.address2 || '';
        document.getElementById('modal_introduction').value = shop.introduction || '';
        document.getElementById('modal_description').value = shop.description || '';

        // 3. 반려 상태인 경우 내용보기 모달 상단에 사유 배너 노출 및 하단 승인/반려 버튼 숨김 처리
        const alertBox = document.getElementById('modal_rejection_alert');
        const alertText = document.getElementById('modal_rejection_text');
        const actionButtons = document.getElementById('modal_action_buttons');

        if (shop.status === 'rejected') {
            alertText.textContent = shop.rejection_reason || '사유 없음';
            alertBox.classList.remove('d-none');
            actionButtons.classList.add('d-none'); // 반려 건일 경우 승인/반려 버튼 숨김
        } else {
            alertBox.classList.add('d-none');
            actionButtons.classList.remove('d-none'); // 대기 건일 경우 승인/반려 버튼 노출

            // 승인 폼 액션 URL 동적 세팅
            const approveForm = document.getElementById('modalApproveForm');
            approveForm.action = `/admin/shops/${shop.id}/approve`;
        }

        // 4. 내용보기 모달 실행
        const detailModal = new bootstrap.Modal(document.getElementById('shopDetailModal'));
        detailModal.show();
    }
</script>
@endpush