@extends('layouts.admin')

@section('title', '전체 회원 목록')

@section('content')

<!-- 🌟 상단 헤더 박스: 타이틀 + 물음표 안내 아이콘 (좌측), 부운영자 등록 버튼 (우측) -->
<div class="content-header-box mb-4 px-0">
    <div class="content-title-wrap d-flex align-items-center gap-2">
        <h1 class="content-title mb-0">@yield('title')</h1>
        <span class="text-secondary d-inline-flex align-items-center" style="cursor: pointer;" data-bs-toggle="tooltip" data-bs-placement="right" title="본 페이지는 플랫폼 운영을 위한 부운영자(직원/파트너사) 계정 수동 등록 전용 공간입니다. 일반 회원은 사용자 회원가입을 이용해야 합니다.">
            <i class="fa-solid fa-circle-question fs-6"></i>
        </span>
    </div>
    <div class="content-btn-wrap">
        <a href="{{ route('admin.users.create') }}" class="btn btn-primary btn-sm fw-bold px-3">
            <i class="fa-solid fa-user-plus me-1"></i> 부운영자 등록
        </a>
    </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.users.index') }}">

            <!-- [PC 전용 상세 필터] -->
            <div class="pc-only-section">
                <div class="row g-2 align-items-center">
                    <div class="col-md-3">
                        <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">계정 상태 전체</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>정상 (Active)</option>
                            <option value="suspended" {{ request('status') == 'suspended' ? 'selected' : '' }}>일시중지 (Suspended)</option>
                            <option value="withdrawn" {{ request('status') == 'withdrawn' ? 'selected' : '' }}>탈퇴 (Withdrawn)</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <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="row g-2">
                    <div class="col-6">
                        <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                            <option value="">계정 상태 전체</option>
                            <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>정상</option>
                            <option value="suspended" {{ request('status') == 'suspended' ? 'selected' : '' }}>일시중지</option>
                            <option value="withdrawn" {{ request('status') == 'withdrawn' ? 'selected' : '' }}>탈퇴</option>
                        </select>
                    </div>
                    <div class="col-6">
                        <button type="submit" class="btn btn-sm btn-dark w-100">검색</button>
                    </div>
                    <div class="col-12">
                        <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>
            </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($users) ? $users->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: 1100px;">
                    <thead class="text-secondary small text-uppercase bg-light">
                        <tr>
                            <th style="width: 7%;" class="py-3 ps-4 text-center">번호</th>
                            <th style="width: 20%;" class="py-3">회원 정보 (이름 / 이메일)</th>
                            <th style="width: 14%;" class="py-3 text-center">휴대폰 번호</th>
                            <th style="width: 15%;" class="py-3 text-center">회원 권한 (등급)</th>
                            <th style="width: 15%;" class="py-3 text-center">본인인증 / 상태</th>
                            <th style="width: 14%;" class="py-3 text-center">가입 일시</th>
                            <th style="width: 15%;" class="py-3 text-end pe-4">관리</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse($users as $user)
                        @php
                            // 역할(Role) 정의
                            $roleNames = [
                                'admin' => ['name' => '최고관리자', 'class' => 'bg-danger-subtle text-danger border-danger-subtle'],
                                'shop' => ['name' => '뷰티샵 대표', 'class' => 'bg-primary-subtle text-primary border-primary-subtle'],
                                'center' => ['name' => '센터 운영자', 'class' => 'bg-warning-subtle text-warning-emphasis border-warning-subtle'],
                                'manufacturer' => ['name' => '제조사', 'class' => 'bg-info-subtle text-info-emphasis border-info-subtle'],
                                'user' => ['name' => '일반 회원', 'class' => 'bg-secondary-subtle text-secondary border-secondary-subtle'],
                            ];
                            $userRole = $user->getRoleNames()->first() ?? 'user';
                            $roleInfo = $roleNames[$userRole] ?? ['name' => $userRole, 'class' => 'bg-light text-dark border'];

                            // 보안 판별: 파트너 권한 + 휴대폰 미인증 + 일시중지 상태인 경우 관리자 등록 부운영자로 간주
                            $isPartnerRole = $user->hasAnyRole(['shop', 'center', 'manufacturer']);
                            $isNotVerified = empty($user->is_phone_verified);
                            $isSuspended = ($user->status === 'suspended');
                            $isAdminPendingUser = ($user->is_admin_registered ?? false) || ($isPartnerRole && $isNotVerified && $isSuspended);
                        @endphp
                        <tr>
                            <!-- 1. 번호 -->
                            <td class="text-center py-3 ps-4 text-muted small">
                                {{ $users->total() - (($users->currentPage() - 1) * $users->perPage()) - $loop->index }}
                            </td>

                            <!-- 2. 회원 정보 -->
                            <td class="py-3">
                                <div class="d-flex flex-column gap-1">
                                    <div class="fw-bold text-dark d-flex align-items-center gap-1">
                                        {{ $user->name }}
                                        @if($isAdminPendingUser)
                                            <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle" style="font-size: 0.55rem;" title="관리자가 수동 발급한 부운영자 계정 (인증 대기 중)">관리자등록</span>
                                        @endif
                                    </div>
                                    <div class="text-muted small">
                                        {{ $user->email ?? '이메일 없음' }}
                                    </div>
                                </div>
                            </td>

                            <!-- 3. 휴대폰 번호 -->
                            <td class="text-center">
                                <span class="small text-secondary">{{ format_phone($user->phone) ?? '-' }}</span>
                            </td>

                            <!-- 4. 회원 권한 (등급) -->
                            <td class="text-center">
                                <span class="badge {{ $roleInfo['class'] }} border px-2 py-1" style="font-size: 0.7rem;">
                                    {{ $roleInfo['name'] }}
                                </span>
                            </td>

                            <!-- 5. 인증 여부 및 상태 -->
                            <td class="text-center">
                                <div class="d-flex flex-column align-items-center gap-1">
                                    @if($user->is_phone_verified)
                                        <span class="badge bg-success-subtle text-success border border-success-subtle" style="font-size: 0.65rem;">휴대폰인증완료</span>
                                    @else
                                        <span class="badge bg-secondary-subtle text-secondary border" style="font-size: 0.65rem;">미인증</span>
                                    @endif

                                    @if($user->status === 'active')
                                        <span class="badge bg-primary text-white" style="font-size: 0.65rem;">정상</span>
                                    @elseif($user->status === 'suspended')
                                        <span class="badge bg-danger text-white" style="font-size: 0.65rem;">일시중지</span>
                                    @else
                                        <span class="badge bg-secondary text-white" style="font-size: 0.65rem;">탈퇴</span>
                                    @endif
                                </div>
                            </td>

                            <!-- 6. 가입 일시 -->
                            <td class="text-center">
                                <div class="small text-dark">{{ $user->created_at->format('Y-m-d') }}</div>
                                <div class="text-muted" style="font-size: 0.75rem;">{{ $user->created_at->format('H:i:s') }}</div>
                            </td>

                            <!-- 7. 관리 버튼 (최고관리자: 관리 진입 허용 / 상태 버튼만 보호) -->
                            <td class="text-end py-3 pe-4">
                                <div class="d-flex justify-content-end align-items-center gap-1">
                                    <!-- 관리 버튼은 항상 열림 -->
                                    <a href="{{ route('admin.users.edit', $user->id) }}" class="btn btn-sm btn-outline-secondary px-2 py-1" style="font-size: 0.75rem;" title="상세 관리">
                                        <i class="fa-solid fa-gear me-1"></i> 관리
                                    </a>

                                    @if($userRole === 'admin')
                                        <!-- 최고관리자 계정 상태 변경 방어 배지 -->
                                        <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1" style="font-size: 0.65rem;" title="시스템 보호 계정 (상태 변경 불가)">
                                            <i class="fa-solid fa-shield-halved"></i> 보호
                                        </span>
                                    @else
                                        @if($user->status === 'active')
                                            <form action="{{ route('admin.users.status', $user->id) }}" method="POST" class="d-inline" onsubmit="return confirm('회원 \'{{ $user->name }}\'님의 계정을 일시중지하시겠습니까?');">
                                                @csrf
                                                @method('PATCH')
                                                <input type="hidden" name="status" value="suspended">
                                                <button type="submit" class="btn btn-sm btn-outline-danger px-2 py-1" style="font-size: 0.75rem;" title="일시중지">
                                                    <i class="fa-solid fa-ban"></i>
                                                </button>
                                            </form>
                                        @else
                                            @if($isAdminPendingUser)
                                                <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="관리자 등록 부운영자는 본인인증 전까지 관리자가 임의로 활성화할 수 없습니다.">
                                                    <button type="button" class="btn btn-sm btn-outline-secondary px-2 py-1" style="font-size: 0.75rem; opacity: 0.6; cursor: not-allowed;" disabled>
                                                        <i class="fa-solid fa-lock"></i>
                                                    </button>
                                                </span>
                                            @else
                                                <form action="{{ route('admin.users.status', $user->id) }}" method="POST" class="d-inline" onsubmit="return confirm('회원 \'{{ $user->name }}\'님의 계정을 정상 활성화하시겠습니까?');">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="hidden" name="status" value="active">
                                                    <button type="submit" class="btn btn-sm btn-outline-primary px-2 py-1" style="font-size: 0.75rem;" title="정상 활성화">
                                                        <i class="fa-solid fa-check"></i>
                                                    </button>
                                                </form>
                                            @endif
                                        @endif
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="7" 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>
        
        <!-- 페이지네이션 링크 -->
        @if($users->hasPages())
        <div class="d-flex justify-content-center mt-4">
            {{ $users->links() }}
        </div>
        @endif
    </div>

    <!-- ======================================================
        [모바일 전용 영역] 카드 리스트 형태
        ====================================================== -->
    <div class="mobile-only-section">
        <div class="d-flex flex-column gap-3">
            @forelse($users as $user)
            @php
                $roleNames = [
                    'admin' => ['name' => '최고관리자', 'class' => 'bg-danger-subtle text-danger border-danger-subtle'],
                    'shop' => ['name' => '뷰티샵 대표', 'class' => 'bg-primary-subtle text-primary border-primary-subtle'],
                    'center' => ['name' => '센터 운영자', 'class' => 'bg-warning-subtle text-warning-emphasis border-warning-subtle'],
                    'manufacturer' => ['name' => '제조사', 'class' => 'bg-info-subtle text-info-emphasis border-info-subtle'],
                    'user' => ['name' => '일반 회원', 'class' => 'bg-secondary-subtle text-secondary border-secondary-subtle'],
                ];
                $userRole = $user->getRoleNames()->first() ?? 'user';
                $roleInfo = $roleNames[$userRole] ?? ['name' => $userRole, 'class' => 'bg-light text-dark border'];

                $isPartnerRole = $user->hasAnyRole(['shop', 'center', 'manufacturer']);
                $isNotVerified = empty($user->is_phone_verified);
                $isSuspended = ($user->status === 'suspended');
                $isAdminPendingUser = ($user->is_admin_registered ?? false) || ($isPartnerRole && $isNotVerified && $isSuspended);
            @endphp
            <div class="card border shadow-sm p-3">
                <div class="d-flex justify-content-between align-items-start mb-2">
                    <div>
                        <div class="d-flex align-items-center gap-1 mb-1">
                            <h6 class="fw-bold text-dark mb-0">{{ $user->name }}</h6>
                            @if($isAdminPendingUser)
                                <span class="badge bg-warning-subtle text-warning-emphasis border" style="font-size: 0.55rem;">관리자등록</span>
                            @endif
                            <span class="badge {{ $roleInfo['class'] }} border" style="font-size: 0.6rem;">
                                {{ $roleInfo['name'] }}
                            </span>
                        </div>
                        <span class="text-muted small">{{ $user->email ?? '이메일 없음' }}</span>
                    </div>
                    <div>
                        @if($user->status === 'active')
                            <span class="badge bg-primary" style="font-size: 0.65rem;">정상</span>
                        @elseif($user->status === 'suspended')
                            <span class="badge bg-danger" style="font-size: 0.65rem;">일시중지</span>
                        @else
                            <span class="badge bg-secondary" style="font-size: 0.65rem;">탈퇴</span>
                        @endif
                    </div>
                </div>

                <div class="small text-secondary mb-3 pb-2 border-bottom">
                    <div>연락처: {{ $user->phone ?? '-' }}</div>
                    <div>가입일: {{ $user->created_at->format('Y-m-d H:i') }}</div>
                </div>

                <!-- 모바일 하단 액션 버튼 (줄 깨짐 방지 및 보호 로직 적용) -->
                <div class="d-flex gap-2">
                    <a href="{{ route('admin.users.edit', $user->id) }}" class="btn btn-outline-secondary btn-sm flex-fill fw-bold text-decoration-none text-center py-1.5 text-nowrap" style="font-size: 0.75rem;">
                        <i class="fa-solid fa-gear me-1"></i> 관리 및 수정
                    </a>
                    
                    @if($userRole === 'admin')
                        <button type="button" class="btn btn-outline-danger btn-sm flex-fill fw-bold py-1.5 text-nowrap" style="font-size: 0.75rem; opacity: 0.7; cursor: not-allowed;" disabled title="최고관리자 계정 상태는 변경할 수 없습니다.">
                            <i class="fa-solid fa-shield-halved me-1"></i> 상태변경불가
                        </button>
                    @else
                        @if($user->status === 'active')
                            <form action="{{ route('admin.users.status', $user->id) }}" method="POST" class="flex-fill" onsubmit="return confirm('일시중지하시겠습니까?');">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="status" value="suspended">
                                <button type="submit" class="btn btn-outline-danger btn-sm w-100 fw-bold py-1.5 text-nowrap" style="font-size: 0.75rem;">
                                    <i class="fa-solid fa-ban me-1"></i> 일시중지
                                </button>
                            </form>
                        @else
                            @if($isAdminPendingUser)
                                <button type="button" class="btn btn-outline-secondary btn-sm flex-fill fw-bold py-1.5 text-nowrap" style="font-size: 0.75rem; opacity: 0.7; cursor: not-allowed;" disabled title="본인인증 전 활성화 불가">
                                    <i class="fa-solid fa-lock me-1"></i> 인증대기중
                                </button>
                            @else
                                <form action="{{ route('admin.users.status', $user->id) }}" method="POST" class="flex-fill" onsubmit="return confirm('활성화하시겠습니까?');">
                                    @csrf
                                    @method('PATCH')
                                    <input type="hidden" name="status" value="active">
                                    <button type="submit" class="btn btn-outline-primary btn-sm w-100 fw-bold py-1.5 text-nowrap" style="font-size: 0.75rem;">
                                        <i class="fa-solid fa-check me-1"></i> 활성화
                                    </button>
                                </form>
                            @endif
                        @endif
                    @endif
                </div>
            </div>
            @empty
            <div class="text-center py-5 text-muted bg-white border rounded shadow-sm">
                등록된 회원이 없습니다.
            </div>
            @endforelse
        </div>

        <!-- 모바일 페이지네이션 -->
        @if($users->hasPages())
        <div class="mt-4">
            {{ $users->links() }}
        </div>
        @endif
    </div>

</div>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', () => {
        // 보기 개수 변경 시 자동 서브밋
        const perPageSelect = document.getElementById('perPageSelect');
        if (perPageSelect) {
            perPageSelect.addEventListener('change', () => {
                document.getElementById('searchForm').submit();
            });
        }

        // 부트스트랩 툴팁 초기화
        const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        tooltipTriggerList.map(function(tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    });
</script>
@endpush