@extends('layouts.admin')

@section('title', '알림 템플릿 등록')

@section('content')
<div class="content-header-box mb-3 px-0 d-flex justify-content-between align-items-center">
    <div class="content-title-wrap">
        <h1 class="content-title">@yield('title')</h1>
    </div>
    <div class="content-btn-wrap d-flex gap-2">
        <a href="{{ route('admin.notifications.templates.list') }}" class="btn btn-outline-secondary btn-app-sm">
            <i class="fa-solid fa-arrow-left me-1"></i> 목록
        </a>
        <button type="submit" form="createForm" 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 />

<div class="container-fluid px-0">
    <!-- 등록 폼 고유 ID: createForm -->
    <form id="createForm" method="POST" action="{{ route('admin.notifications.templates.store') }}">
        @csrf

        <div class="row g-4 mb-4">
            <!-- 1. 좌측 입력 폼 영역 (7칸) -->
            <div class="col-12 col-lg-7">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4">

                        <!-- 식별 코드 -->
                        <div class="mb-3">
                            <label class="form-label fw-bold small">템플릿 식별 코드 (Code) <span class="text-danger">*</span></label>
                            <input type="text" name="code" id="inputCode" 
                                   class="form-control font-monospace text-uppercase @error('code') is-invalid @enderror" 
                                   placeholder="예: USER_WELCOME_ALIM, SHOP_APPLY_ADMIN" 
                                   value="{{ old('code') }}" required>
                            <div class="form-text small">시스템 발송 트리거에서 호출할 영문 대문자, 숫자, 언더바(_) 조합의 고유 키값입니다.</div>
                            @error('code') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <!-- 분류 설정 (Config 기반 대분류 / 소분류 연동) -->
                        @php
                            $notificationCategories = config('notification_categories.categories', []);
                            $currentCategory = old('category');
                            $currentSubcategory = old('subcategory');
                            
                            $currentSubcategories = ($currentCategory && isset($notificationCategories[$currentCategory]['subcategories']))
                                ? $notificationCategories[$currentCategory]['subcategories']
                                : [];
                        @endphp

                        <div class="row g-3 mb-3">
                            <!-- 대분류 -->
                            <div class="col-md-6">
                                <label class="form-label fw-bold small">대분류 <span class="text-danger">*</span></label>
                                <select name="category" id="inputCategory" class="form-select @error('category') is-invalid @enderror" required>
                                    <option value="">대분류 선택</option>
                                    @foreach($notificationCategories as $cKey => $cData)
                                        <option value="{{ $cKey }}" {{ $currentCategory === $cKey ? 'selected' : '' }}>
                                            {{ $cData['name'] }} ({{ $cKey }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('category') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>

                            <!-- 소분류 -->
                            <div class="col-md-6">
                                <label class="form-label fw-bold small">소분류 <span class="text-danger">*</span></label>
                                <select name="subcategory" id="inputSubcategory" class="form-select @error('subcategory') is-invalid @enderror" @if(!$currentCategory) disabled @endif required>
                                    <option value="">소분류 선택</option>
                                    @foreach($currentSubcategories as $sKey => $sLabel)
                                        <option value="{{ $sKey }}" {{ $currentSubcategory === $sKey ? 'selected' : '' }}>
                                            {{ $sLabel }} ({{ $sKey }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('subcategory') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <!-- 수신 대상 & 발송 채널 (모델 및 Config 기반 동적 렌더링) -->
                        <div class="row g-3 mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold small">수신 대상 (Target) <span class="text-danger">*</span></label>
                                <select name="target" id="inputTarget" class="form-select @error('target') is-invalid @enderror" required>
                                    @foreach(\App\Models\NotificationTemplate::getTargets() as $tKey => $tLabel)
                                        <option value="{{ $tKey }}" {{ old('target', 'user') === $tKey ? 'selected' : '' }}>
                                            {{ $tLabel }} ({{ $tKey }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('target') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold small">발송 채널 (Type) <span class="text-danger">*</span></label>
                                <select name="type" id="inputType" class="form-select @error('type') is-invalid @enderror" required>
                                    @foreach(\App\Models\NotificationTemplate::getTypes() as $typeKey => $typeLabel)
                                        <option value="{{ $typeKey }}" {{ old('type', \App\Models\NotificationTemplate::TYPE_ALIMTALK) === $typeKey ? 'selected' : '' }}>
                                            {{ $typeLabel }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('type') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <!-- 발송 제목 -->
                        <div class="mb-3" id="titleWrap">
                            <label class="form-label fw-bold small">발송 제목 (Title)</label>
                            <input type="text" name="title" id="inputTitle"
                                   class="form-control @error('title') is-invalid @enderror"
                                   placeholder="메시지 제목 / 강조 표기 문구 (EMAIL 발송 시 필수)"
                                   value="{{ old('title') }}">
                            <div class="form-text small">SMS의 경우 제목이 생략될 수 있으며 LMS, 알림톡, EMAIL의 메인 제목으로 표시됩니다.</div>
                            @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <!-- 카카오 비즈니스 템플릿 키 -->
                        <div class="mb-3" id="templateKeyWrap">
                            <label class="form-label fw-bold small">카카오 비즈니스 템플릿 키 (Template Key)</label>
                            <input type="text" name="template_key" class="form-control font-monospace @error('template_key') is-invalid @enderror"
                                   placeholder="예: FT_20260901_001"
                                   value="{{ old('template_key') }}">
                            <div class="form-text small">카카오 비즈니스 채널에서 사전 심사 통과된 템플릿 승인 키입니다.</div>
                            @error('template_key') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <!-- 발송 본문 문구 에디터 -->
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <label for="templateContent" class="form-label fw-bold text-dark mb-0" style="font-size: 13px;">
                                    템플릿 발송 본문 <span class="text-danger">*</span>
                                </label>
                                
                                <!-- 치환변수 모달 호출 버튼 -->
                                <button type="button" class="btn btn-outline-primary btn-sm px-2 py-1" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#variableSelectModal" 
                                        style="font-size: 12px;">
                                    <i class="fa-solid fa-code me-1"></i> 치환변수 찾기 / 삽입
                                </button>
                            </div>

                            <textarea class="form-control font-monospace p-3 @error('content') is-invalid @enderror" 
                                      id="templateContent" 
                                      name="content" 
                                      rows="10" 
                                      placeholder="알림 본문 내용을 입력하세요. 변수가 들어갈 자리에 커서를 두고 우측 상단의 '치환변수 찾기 / 삽입' 버튼을 누르면 원하는 변수가 해당 위치에 바로 삽입됩니다." 
                                      style="font-size: 13px; line-height: 22px;">{{ old('content') }}</textarea>
                            @error('content') <div class="invalid-feedback">{{ $message }}</div> @enderror

                            <!-- 글자수 및 바이트 수 안내 바 -->
                            <div class="d-flex justify-content-between align-items-center mt-2 px-1 text-muted" style="font-size: 11px;">
                                <span>* 카카오 알림톡은 변수 치환 후 최대 1,000자, 일반 SMS는 90Byte(한글 45자) 초과 시 LMS로 전환됩니다.</span>
                                <div>
                                    <span class="text-dark fw-bold" id="charCount">0</span>자 / 
                                    <span class="text-dark fw-bold" id="byteCount">0</span> Byte
                                </div>
                            </div>
                        </div>

                        <!-- 관리자 설명 및 변수 가이드 -->
                        <div class="mb-3">
                            <label class="form-label fw-bold small">관리자 설명 / 사용 가능한 변수 가이드</label>
                            <textarea name="description" id="inputDescription" rows="2"
                                      class="form-control @error('description') is-invalid @enderror"
                                      placeholder="예: #{user_name} - 회원명, #{code} - 인증코드 6자리">{{ old('description') }}</textarea>
                            @error('description') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <!-- 1. 웹 알림 사용 스위치 설정 영역 -->
                        <div class="mb-3 pt-2">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="inputIsWebNotify" name="is_web_notify" value="1"
                                       {{ old('is_web_notify', '0') == '1' ? 'checked' : '' }}>
                                <label class="form-check-label fw-bold ms-1" for="inputIsWebNotify">
                                    웹 알림을 사용합니다 (ON)
                                </label>
                            </div>
                            <div class="form-text small text-muted ps-4">
                                체크 시 외부 발송(SMS/알림톡)과 함께 사이트 상단 N 배지 및 마이페이지 알림함에 안내가 등록됩니다. (일회성 인증 문자는 체크 해제)
                            </div>

                            <!-- 웹 알림 사용 시 노출되는 이동 URL 입력 영역 -->
                            <div class="mt-2 ps-4" id="actionUrlContainer">
                                <label class="form-label fw-bold small mb-1" for="inputActionUrl">알림 클릭 시 이동 URL (선택사항)</label>
                                <input type="text" name="action_url" id="inputActionUrl"
                                       class="form-control form-control-sm font-monospace @error('action_url') is-invalid @enderror"
                                       placeholder="예: /mypage/partner 또는 /mypage/reservations"
                                       value="{{ old('action_url') }}">
                                <div class="form-text small text-muted">
                                    사용자가 웹 알림을 클릭했을 때 이동시킬 상대 경로 URL을 입력합니다. (비워둘 경우 단순 텍스트 안내만 제공)
                                </div>
                                @error('action_url') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <!-- 2. 자동 발송 활성화 스위치 영역 (기본 ON) -->
                        <div class="mb-3 pt-2">
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" role="switch" id="isActiveSwitch" name="is_active" value="1"
                                       {{ old('is_active', '1') == '1' ? 'checked' : '' }}>
                                <label class="form-check-label fw-bold ms-1" for="isActiveSwitch">
                                    이 템플릿의 자동 발송을 활성화합니다 (발송 ON)
                                </label>
                            </div>
                            <div class="form-text small text-muted ps-4">
                                비활성화(OFF) 시 시스템에서 해당 템플릿 코드를 호출하더라도 외부 발송 및 웹 알림이 모두 차단됩니다.
                            </div>
                        </div>

                        <!-- 하단 액션 버튼 -->
                        <div class="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                            <a href="{{ route('admin.notifications.templates.list') }}" class="btn btn-secondary btn-app-md fw-semibold px-4">
                                <i class="fa-solid fa-arrow-left me-1"></i> 목록
                            </a>
                            <button type="submit" class="btn btn-primary btn-app-sm">
                                <i class="fa-solid fa-check me-1"></i> 저장
                            </button>
                        </div>

                    </div>
                </div>
            </div>

            <!-- 2. 우측 실시간 모바일 목업 프리뷰 영역 (5칸) -->
            <div class="col-12 col-lg-5">
                <div class="preview-phone-card">
                    <div class="phone-speaker-notch"></div>
                    <div class="phone-status-bar">
                        <span>{{ now()->format('H:i') }}</span>
                        <div class="d-flex gap-1 align-items-center">
                            <i class="fa-solid fa-signal"></i>
                            <i class="fa-solid fa-wifi"></i>
                            <i class="fa-solid fa-battery-full"></i>
                        </div>
                    </div>

                    <div class="phone-screen" id="previewScreen">
                        <!-- 상단 메타 배지 -->
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <div class="d-flex gap-1 align-items-center flex-wrap">
                                <span class="badge badge-outline-primary badge-sm" id="previewCategoryBadge">분류</span>
                                <span class="badge bg-white text-secondary border badge-sm" id="previewSubcategoryBadge">소분류</span>
                                <span class="badge badge-sm" id="previewWebBadge">
                                    <i class="fa-solid fa-bell me-0.5"></i>
                                    <span>웹 사용</span>
                                </span>
                            </div>
                            <span class="badge bg-primary text-white badge-sm" id="previewTypeBadge">ALIMTALK</span>
                        </div>

                        <div class="text-secondary small font-monospace fw-bold mb-1" id="previewCode">
                            <i class="fa-solid fa-code me-1"></i><span>TEMPLATE_CODE</span>
                        </div>

                        <div class="text-muted small mb-2">
                            <span class="text-dark fw-semibold">수신:</span>
                            <span id="previewTargetText" class="text-primary fw-bold">일반회원</span>
                        </div>

                        <div class="chat-bubble flex-grow-1">
                            <div id="previewEmailHeader" class="text-muted small mb-2 pb-1 border-bottom d-none">
                                <i class="fa-solid fa-envelope text-primary me-1"></i>
                                <span class="fw-semibold text-dark">발송자:</span> GLOBEAU 고객센터
                            </div>

                            <div class="chat-bubble-title" id="previewTitle">[메시지 제목]</div>
                            <div class="chat-bubble-body" id="previewContent">발송할 본문 내용을 입력하세요.</div>
                        </div>

                        <!-- 실시간 웹 알림 이동 경로 프리뷰 칩 -->
                        <div class="mt-2 p-1.5 bg-white bg-opacity-90 rounded border border-light d-flex align-items-center gap-1.5 fs-xs text-truncate d-none" id="previewActionUrl">
                            <i class="fa-solid fa-link text-primary flex-shrink-0"></i>
                            <span class="text-muted flex-shrink-0">이동:</span>
                            <span class="font-monospace text-dark text-truncate js-action-url-text">/mypage</span>
                        </div>

                        <div class="mt-2 text-muted small bg-white bg-opacity-75 p-2 rounded border border-light" id="previewDescWrap">
                            <i class="fa-solid fa-circle-info me-1 text-primary"></i>
                            <span id="previewDescription">관리자 메모 및 변수 가이드가 없습니다.</span>
                        </div>
                    </div>

                    <div class="phone-home-indicator"></div>
                </div>
            </div>
        </div>
    </form>
    <!-- 메인 폼 완전 종료 -->
</div>

<!-- ======================================================
    치환변수 선택 모달 (★ FORM 바깥에 배치하여 Submit 충돌 방지)
    ====================================================== -->
<div class="modal fade" id="variableSelectModal" tabindex="-1" aria-labelledby="variableSelectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 shadow">
            
            <!-- 모달 헤더 -->
            <div class="modal-header border-bottom py-2 px-3">
                <h5 class="modal-title fw-bold text-dark" id="variableSelectModalLabel" style="font-size: 14px;">
                    <i class="fa-solid fa-code-branch 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-3">
                <!-- 실시간 검색 입력창 -->
                <div class="input-group mb-3">
                    <span class="input-group-text bg-white border-end-0 text-muted">
                        <i class="fa-solid fa-magnifying-glass"></i>
                    </span>
                    <input type="text" id="modalVariableSearch" class="form-control border-start-0 ps-0" 
                           placeholder="변수명, 설명, 예시 검색 (예: 샵이름, 인증번호, temp_password, 고객명)" style="font-size: 13px;">
                    <button class="btn btn-outline-secondary" type="button" id="btnResetModalSearch" style="font-size: 12px;">초기화</button>
                </div>

                <div class="row g-2">
                    <!-- 좌측: 도메인 그룹 탭 -->
                    <div class="col-12 col-md-3">
                        <div class="list-group list-group-flush rounded border" id="modalGroupTabs" style="font-size: 12px;">
                            <button type="button" class="list-group-item list-group-item-action active py-2 px-3" data-group="all">
                                전체보기
                            </button>
                            @foreach(config('notification_variables.groups', []) as $groupKey => $group)
                                <button type="button" class="list-group-item list-group-item-action py-2 px-3" data-group="{{ $groupKey }}">
                                    {{ $group['name'] }}
                                </button>
                            @endforeach
                        </div>
                    </div>

                    <!-- 우측: 치환변수 테이블 -->
                    <div class="col-12 col-md-9">
                        <div class="table-responsive border rounded bg-white" style="max-height: 350px; overflow-y: auto;">
                            <table class="table table-hover align-middle mb-0" style="font-size: 12px;">
                                <thead class="table-light text-secondary sticky-top">
                                    <tr>
                                        <th style="width: 34%;" class="ps-3 py-2">치환변수 태그</th>
                                        <th style="width: 32%;" class="py-2">변수 설명</th>
                                        <th style="width: 20%;" class="py-2">예시값</th>
                                        <th style="width: 14%;" class="py-2 text-center pe-3">선택</th>
                                    </tr>
                                </thead>
                                <tbody id="variableTableBody">
                                    @foreach(config('notification_variables.groups', []) as $groupKey => $group)
                                        @foreach($group['variables'] as $varKey => $info)
                                            <tr class="variable-row" 
                                                data-group="{{ $groupKey }}" 
                                                data-key="{{ $varKey }}" 
                                                data-label="{{ $info['label'] }}" 
                                                data-example="{{ $info['example'] }}">
                                                <td class="ps-3 py-2">
                                                    <span class="badge bg-primary-subtle text-primary border border-primary-subtle font-monospace fw-bold" style="font-size: 11px;">
                                                        {{ $varKey }}
                                                    </span>
                                                </td>
                                                <td class="py-2 text-dark fw-semibold">
                                                    {{ $info['label'] }}
                                                </td>
                                                <td class="py-2 text-muted font-monospace" style="font-size: 11px;">
                                                    {{ $info['example'] }}
                                                </td>
                                                <td class="py-2 text-center pe-3">
                                                    <button type="button" class="btn btn-sm btn-outline-primary px-2 py-1 js-btn-insert" 
                                                            data-tag="{{ $varKey }}" style="font-size: 11px;">
                                                        삽입
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        <div class="form-text text-muted mt-2 ps-1" style="font-size: 11px;">
                            <i class="fa-solid fa-circle-check text-success me-1"></i>
                            원하는 항목의 <strong>[삽입]</strong>을 클릭하면 메시지 본문 에디터의 커서 위치에 즉시 등록됩니다.
                        </div>
                    </div>
                </div>
            </div>

            <!-- 모달 푸터 -->
            <div class="modal-footer border-top py-2 px-3">
                <button type="button" class="btn btn-secondary btn-sm px-3" data-bs-dismiss="modal" style="font-size: 12px;">닫기</button>
            </div>

        </div>
    </div>
</div>
@endsection

@push('styles')
<link rel="stylesheet" href="{{ asset('css/admin/admin_notification.css') }}?v={{ time() }}">
@endpush

@push('scripts')
<script>
    window.notificationCategoriesConfig = @json(config('notification_categories.categories', []));
    window.notificationTargetsConfig    = @json(config('notification_categories.targets', []));
</script>
<script src="{{ asset('js/admin/admin_notification.js') }}?v={{ time() }}"></script>
@endpush