@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.index') }}" 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.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 기반 대분류 / 소분류 연동 & old 방어) -->
                        @php
                            $notificationCategories = config('notification_categories.categories', []);
                            $oldCategory = old('category');
                            $oldSubcategory = old('subcategory');
                            
                            // old 값이 있는 경우 해당 대분류의 소분류 목록 추출, 없으면 빈 배열
                            $currentSubcategories = ($oldCategory && isset($notificationCategories[$oldCategory]['subcategories']))
                                ? $notificationCategories[$oldCategory]['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 }}" {{ $oldCategory === $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(!$oldCategory) disabled @endif required>
                                    <option value="">소분류 선택</option>
                                    @foreach($currentSubcategories as $sKey => $sLabel)
                                        <option value="{{ $sKey }}" {{ $oldSubcategory === $sKey ? 'selected' : '' }}>
                                            {{ $sLabel }} ({{ $sKey }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('subcategory') <div class="invalid-feedback">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <!-- 수신 대상 & 발송 채널 -->
                        <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 }}
                                        </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>
                                    <option value="ALIMTALK" {{ old('type', 'ALIMTALK') === 'ALIMTALK' ? 'selected' : '' }}>ALIMTALK (카카오 알림톡)</option>
                                    <option value="SMS" {{ old('type') === 'SMS' ? 'selected' : '' }}>SMS (단문문자)</option>
                                    <option value="LMS" {{ old('type') === 'LMS' ? 'selected' : '' }}>LMS (장문문자)</option>
                                    <option value="EMAIL" {{ old('type') === 'EMAIL' ? 'selected' : '' }}>EMAIL (이메일)</option>
                                </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="메시지 제목 / 강조 표기 문구"
                                   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">
                            <label class="form-label fw-bold small">발송 본문 문구 (Content) <span class="text-danger">*</span></label>
                            <textarea name="content" id="inputContent" rows="6"
                                      class="form-control @error('content') is-invalid @enderror"
                                      placeholder="고객님께 전달할 알림 문구를 입력하세요."
                                      required>{{ old('content') }}</textarea>
                            <div class="form-text small">치환 변수는 <code>#{name}</code>, <code>#{code}</code>, <code>#{shop_name}</code> 등의 형태로 작성합니다.</div>
                            @error('content') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </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="예: #{name} - 고객명, #{code} - 인증코드 6자리">{{ old('description') }}</textarea>
                            @error('description') <div class="invalid-feedback">{{ $message }}</div> @enderror
                        </div>

                        <!-- 발송 활성화 여부 -->
                        <div class="form-check form-switch mt-4">
                            <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="d-flex justify-content-end gap-2 mt-4 pt-3 border-top">
                            <a href="{{ route('admin.notifications.index') }}" 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">
                                <span class="badge badge-outline-primary badge-sm" id="previewCategoryBadge">분류</span>
                                <span class="badge bg-white text-secondary border badge-sm" id="previewSubcategoryBadge">소분류</span>
                            </div>
                            <span class="badge bg-primary text-white badge-sm" id="previewTypeBadge">SMS</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 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>
@endsection

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

@push('scripts')
<!-- 백엔드 Config 데이터를 자바스크립트 객체로 전달하여 동적 소분류 연동 지원 -->
<script>
    window.notificationCategoriesConfig = @json(config('notification_categories.categories', []));
</script>
<script src="{{ asset('js/admin/admin_notification.js') }}?v={{ time() }}"></script>
@endpush