@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 class="content-btn-wrap d-flex gap-2">
        <a href="{{ route('admin.users.list') }}" 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="userForm" class="btn btn-dark btn-app-sm fw-bold d-none d-sm-inline-block">
            <i class="fa-solid fa-check me-1"></i> 저장
        </button>
    </div>
</div>

<!-- 공통 에러, 성공 알림 블래이드 컴포넌트 -->
<x-admin.alerts-display />

<!-- 등록 폼 카드 컨테이너 -->
<form action="{{ route('admin.users.store') }}" method="POST" id="userForm" novalidate>
    @csrf

    <div class="card border-0 shadow-sm" style="max-width: 850px; margin: 0 auto; border-radius: 12px;">
        <div class="card-header bg-white border-bottom py-3 px-4" style="border-top-left-radius: 12px; border-top-right-radius: 12px;">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="fw-bold text-dark mb-0 fs-6">
                    <i class="fa-solid fa-user-shield text-primary me-2"></i>부운영자 및 파트너 직원 등록 정보
                </h5>
                <div>
                    <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle px-2 py-1">인증 대기 생성</span>
                </div>
            </div>
        </div>

        <div class="card-body p-4 p-lg-5">
            <!-- 안내 박스 -->
            <div class="alert alert-info border-0 bg-info-subtle text-info-emphasis small mb-4 p-3 rounded-3" role="alert">
                <div class="d-flex gap-2">
                    <i class="fa-solid fa-circle-info fs-5 mt-1"></i>
                    <div>
                        <strong>안내 사항:</strong> 본 페이지는 플랫폼 운영을 지원하는 <strong>본사 부운영자, 뷰티샵 매니저, 센터 및 제조사 담당자</strong> 계정을 최고관리자가 직접 발급하는 공간입니다. (최초 등록 시 일시중지 상태로 생성되며, 로그인 후 휴대폰 본인인증을 완료하면 정상 활성화됩니다.)
                    </div>
                </div>
            </div>

            <div class="row g-4">
                <!-- 1. 성명 (공용 input 컴포넌트) -->
                <div class="col-md-6">
                    <x-admin.forms.input 
                        name="name" 
                        label="담당자 성명" 
                        :value="old('name')" 
                        placeholder="실명 입력 (예: 홍길동)" 
                        required 
                    />
                </div>

                <!-- 2. 이메일 (공용 input 컴포넌트) -->
                <div class="col-md-6">
                    <x-admin.forms.input 
                        type="email" 
                        name="email" 
                        label="이메일 주소 (로그인 아이디)" 
                        :value="old('email')" 
                        placeholder="example@globeau.com" 
                        required 
                    />
                </div>

                <!-- 3. 휴대폰 번호 (자동 하이픈 input-phone 클래스 적용) -->
                <div class="col-md-6">
                    <x-admin.forms.input 
                        name="phone" 
                        label="휴대폰 번호" 
                        :value="old('phone')" 
                        placeholder="010-0000-0000" 
                        class="input-phone" 
                        required 
                    />
                </div>

                <!-- 4. 초기 임시 비밀번호 -->
                <div class="col-md-6">
                    <x-admin.forms.input 
                        type="password" 
                        name="password" 
                        label="초기 임시 비밀번호" 
                        placeholder="8자 이상 영문/숫자 조합" 
                        required 
                    />
                </div>

                <!-- 구분선 -->
                <div class="col-12">
                    <hr class="text-muted my-1">
                </div>

                <!-- 5. 시스템 권한 (다중 선택 체크박스 컴포넌트) -->
                <div class="col-12">
                    <label class="form-label small fw-bold text-secondary">
                        시스템 권한 (다중 선택 가능) <span class="text-danger">*</span>
                    </label>
                    <div class="p-3 border rounded bg-light d-flex flex-wrap gap-4 @error('roles') is-invalid @enderror">
                        <!-- 1. 본사 부운영자 (Operator) : JS 토글 연동용 id="roleOperator" 명시 -->
                        <x-admin.forms.checkbox 
                            name="roles[]" 
                            id="roleOperator" 
                            value="operator" 
                            label="본사 부운영자 (Operator)" 
                            labelClass="fw-bold text-dark" 
                            :checked="is_array(old('roles')) && in_array('operator', old('roles'))" 
                        />

                        <!-- 2. 뷰티샵 운영자 (Shop) -->
                        <x-admin.forms.checkbox 
                            name="roles[]" 
                            id="roleShop" 
                            value="shop" 
                            label="뷰티샵 운영자 (Shop)" 
                            :checked="is_array(old('roles')) && in_array('shop', old('roles'))" 
                        />

                        <!-- 3. 센터 운영자 (Center) -->
                        <x-admin.forms.checkbox 
                            name="roles[]" 
                            id="roleCenter" 
                            value="center" 
                            label="센터 운영자 (Center)" 
                            :checked="is_array(old('roles')) && in_array('center', old('roles'))" 
                        />

                        <!-- 4. 제조사 운영자 (Manufacturer) -->
                        <x-admin.forms.checkbox 
                            name="roles[]" 
                            id="roleManufacturer" 
                            value="manufacturer" 
                            label="제조사 운영자 (Manufacturer)" 
                            :checked="is_array(old('roles')) && in_array('manufacturer', old('roles'))" 
                        />
                    </div>
                    @error('roles')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <!-- [operator 권한 전용] 메뉴 접속 권한 설정 박스 (Operator 체크 시에만 JS로 표시) -->
                <div class="col-12" id="operatorPermissionSection" style="display: none;">
                    <div class="card border border-primary-subtle bg-primary-subtle bg-opacity-10 p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <h6 class="fw-bold mb-1 text-primary">
                                    <i class="fa-solid fa-shield-keyhole me-2"></i>본사 서브관리자 메뉴 접속 권한 설정
                                </h6>
                                <p class="text-muted small mb-0">부운영자가 관리자 페이지(/admin)에서 접근할 수 있는 메뉴별 세부 권한을 지정합니다.</p>
                            </div>
                            <button type="button" class="btn btn-primary btn-sm fw-bold px-3 shadow-sm" data-bs-toggle="modal" data-bs-target="#permissionModal">
                                <i class="fa-solid fa-list-check me-1"></i> 메뉴 권한 상세 설정
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 6. 관리자 메모 (표준 textarea) -->
                <div class="col-12">
                    <label for="admin_memo" class="form-label small fw-bold text-secondary">관리자 내부 메모</label>
                    <textarea name="admin_memo" id="admin_memo" rows="4" 
                              class="form-control @error('admin_memo') is-invalid @enderror" 
                              placeholder="소속 부서, 발급 사유 또는 파트너사 정보를 기록하세요. (일반 사용자에게는 노출되지 않습니다)">{{ old('admin_memo') }}</textarea>
                    @error('admin_memo')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>

            <!-- 하단 액션 버튼 -->
            <div class="d-flex justify-content-end gap-2 mt-5 pt-3 border-top">
                <a href="{{ route('admin.users.list') }}" class="btn btn-secondary px-4">취소</a>
                <button type="submit" class="btn btn-primary fw-bold px-5">부운영자 등록 완료</button>
            </div>

        </div>
    </div>

    <!-- ====================================================== -->
    <!-- [모달 창] 부운영자 메뉴별 접근 권한 상세 지정 모달         -->
    <!-- ====================================================== -->
    <div class="modal fade" id="permissionModal" tabindex="-1" aria-labelledby="permissionModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-bold fs-6" id="permissionModalLabel">
                        <i class="fa-solid fa-sliders text-primary me-2"></i>관리자 메뉴별 접근 권한 상세 지정
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small mb-3">해당 부운영자에게 허용할 메뉴와 기능을 체크하세요. (체크되지 않은 메뉴는 사이드바에서 숨겨지며 라우트 접속이 차단됩니다.)</p>

                    <div class="row g-3">
                        @php
                        // 대단위 메뉴 권한 키 목록
                        $menuPermissions = [
                            ['group' => '회원 관리', 'name' => '회원 관리 메뉴 전체', 'permission' => 'users.menu'],
                            ['group' => '뷰티샵 관리', 'name' => '뷰티샵 관리 메뉴 전체', 'permission' => 'shops.menu'],
                            ['group' => '프로그램 관리', 'name' => '프로그램 관리 메뉴 전체', 'permission' => 'programs.menu'],
                            ['group' => '알림 관리', 'name' => '알림 템플릿 관리 메뉴 전체', 'permission' => 'notifications.menu'],
                        ];
                        $oldPermissions = old('permissions', []);
                        @endphp

                        @foreach($menuPermissions as $item)
                        <div class="col-md-6">
                            <div class="p-3 border rounded bg-white shadow-sm h-100">
                                <x-admin.forms.checkbox 
                                    name="permissions[]" 
                                    id="perm_{{ $loop->index }}" 
                                    :value="$item['permission']" 
                                    :label="$item['name']" 
                                    labelClass="fw-bold text-dark" 
                                    :checked="is_array($oldPermissions) && in_array($item['permission'], $oldPermissions)" 
                                />

                                <div class="text-muted small ps-4 mt-1" style="font-size: 0.75rem;">
                                    그룹: {{ $item['group'] }} / 키: <code>{{ $item['permission'] }}</code>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-dark btn-sm px-4" data-bs-dismiss="modal">확인 및 적용</button>
                </div>
            </div>
        </div>
    </div>
</form>

@endsection

@push('scripts')
<!-- 회원 공통 스크립트 (SweetAlert2 검증 및 roleOperator 체크 시 operatorPermissionSection 토글 포함) -->
<script src="{{ asset('js/admin/admin_user.js') }}"></script>
@endpush