@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">
        <!-- 신규 템플릿 등록 버튼 -->
        <a href="{{ route('admin.notifications.create') }}" class="btn btn-primary btn-app-sm fw-bold">
            <i class="fa-solid fa-plus me-1"></i> 등록
        </a>
    </div>
</div>

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

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

    <!-- 수신 대상(Target) 탭 네비게이션 (가로 스크롤 대응) -->
    @php
    $currentTarget = request('target', '');
    @endphp
    <div class="admin-horizontal-scroll mb-3">
        <a href="{{ route('admin.notifications.index', array_merge(request()->except('page'), ['target' => ''])) }}"
            class="btn btn-app-sm {{ $currentTarget === '' ? 'btn-primary' : 'btn-outline-secondary' }}">
            전체 보기
        </a>
        @foreach(\App\Models\NotificationTemplate::TARGETS as $tKey => $tLabel)
        <a href="{{ route('admin.notifications.index', array_merge(request()->except('page'), ['target' => $tKey])) }}"
            class="btn btn-app-sm {{ $currentTarget === $tKey ? 'btn-primary' : 'btn-outline-secondary' }}">
            {{ $tLabel }}
        </a>
        @endforeach
    </div>

    <!-- 기워드 검색 및 상세 필터 영역 -->
	<x-admin.search-filter :route="route('admin.notifications.index')" :total="$notifications->total()" searchPlaceholder="식별코드, 재목, 설명 검색">
		<!-- 대분류, 소분류, 채널 셀렉트박스 정의 -->
		@slot('filters')
			@if(request('target'))
				<input type="hidden" name="target" value="{{ request('target') }}">
			@endif
            @php
	            $notificationCategories = config('notification_categories.categories', []);
				// 1단 카테고리 배열을 [ '키' => '표시이름' ] 형태로 변환
				$parentOptions = collect($notificationCategories)->mapWithKeys(function ($item, $key) {
					// $item['name']에 들어있는 한글 이름(또는 라벨)을 값으로 매핑
					return [$key => $item['name']];
				})->toArray();
	            $selectedCategory = request('category');
				$currentSubcategories = ($selectedCategory && isset($notificationCategories[$selectedCategory]['subcategories']))
					? $notificationCategories[$selectedCategory]['subcategories']
					: [];
			@endphp
			
			<x-admin.forms.select name="category" label="대분류" allLabel="대분류 전체" :options="$parentOptions" />
			<x-admin.forms.select name="subcategory" label="소분류" allLabel="소분류 전체" :options="$currentSubcategories" />
			<x-admin.forms.select name="type" label="구분" allLabel="채널 전체" :options="['SMS' => 'SMS', 'LMS' => 'LMS', 'ALIMTALK' => '알림톡', 'EMAIL' => '이메일']" />
		@endslot
	</x-admin.search-filter>

    <!-- 4. 스마트폰 모바일 화면 갤러리 그리드 리스트 영역 -->
    <div class="phone-mockup-grid mb-4">
        @forelse($notifications as $item)
        @php
        // 채널별 배경 테마 클래스 및 아이콘 분기 처리
        $screenClass = 'screen-sms';
        $channelIcon = 'fa-solid fa-comment-sms';

        if ($item->type === 'ALIMTALK') {
        $screenClass = 'screen-alimtalk';
        $channelIcon = 'fa-solid fa-comment';
        } elseif ($item->type === 'EMAIL') {
        $screenClass = 'screen-email';
        $channelIcon = 'fa-solid fa-envelope-open-text';
        }
        @endphp

        <div class="phone-mockup-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 {{ $screenClass }}">
                <!-- 템플릿 메타 배지 (대/소분류, 채널) -->
                <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">{{ $item->category_name }}</span>
                        <span class="badge bg-white text-secondary border badge-sm">{{ $item->subcategory_name }}</span>
                    </div>
                    <span class="badge bubble-badge badge-sm">
                        <i class="{{ $channelIcon }} me-1"></i>
                        {{ $item->type }}
                    </span>
                </div>

                <!-- 식별 코드 라벨 -->
                <div class="text-secondary small font-monospace fw-bold mb-1">
                    <i class="fa-solid fa-code me-1"></i>{{ $item->code }}
                </div>

                <!-- 수신 대상 표기 -->
                <div class="text-muted small mb-2">
                    <span class="text-dark fw-semibold">수신:</span>
                    @if($item->target === 'user')
                    <span class="text-primary fw-bold">일반회원</span>
                    @elseif($item->target === 'shop')
                    <span class="text-danger fw-bold" style="color: #b18977 !important;">뷰티샵 대표/직원</span>
                    @else
                    <span class="text-danger fw-bold">시스템 최고관리자</span>
                    @endif
                </div>

                <!-- 실제 스마트폰 수신 메시지 말풍선 (EMAIL일 경우 발송자 라인 추가) -->
                <div class="chat-bubble flex-grow-1">
                    @if($item->type === 'EMAIL')
                    <!-- 이메일 전용 발송자 표기 라인 -->
                    <div class="d-flex align-items-center text-muted small mb-2 pb-1 border-bottom">
                        <i class="fa-solid fa-envelope email-envelope-icon me-1"></i>
                        <span class="fw-semibold text-dark">발송자:</span> GLOBEAU 고객센터
                    </div>
                    @endif

                    @if($item->title)
                    <div class="chat-bubble-title {{ $item->type === 'EMAIL' ? 'text-primary' : '' }}">
                        {{ $item->type === 'EMAIL' ? '제목: ' . $item->title : '[' . $item->title . ']' }}
                    </div>
                    @endif
                    <div class="chat-bubble-body">
                        {{ $item->content }}
                    </div>
                </div>

                <!-- 템플릿 부가 설명 및 변수 가이드 (존재할 경우에만 표시) -->
                @if($item->description)
                <div class="mt-2 text-muted small bg-white bg-opacity-75 p-2 rounded border border-light">
                    <i class="fa-solid fa-circle-info me-1 text-primary"></i>{{ $item->description }}
                </div>
                @endif
            </div>

            <!-- 스마트폰 하단 컨트롤 패널 & 액션 버튼 영역 -->
            <div class="phone-card-footer border-top">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <!-- 원클릭 발송 ON/OFF 토글 스위치 -->
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input js-toggle-switch"
                            type="checkbox"
                            role="switch"
                            id="switch-{{ $item->id }}"
                            data-url="{{ route('admin.notifications.toggle-active', $item) }}"
                            data-code="{{ $item->code }}"
                            {{ $item->is_active ? 'checked' : '' }}>
                        <label class="form-check-label small ms-1 fw-bold {{ $item->is_active ? 'text-success' : 'text-muted' }}"
                            id="label-{{ $item->id }}"
                            for="switch-{{ $item->id }}">
                            {{ $item->is_active ? '발송 ON' : '발송 OFF' }}
                        </label>
                    </div>

                    <!-- 수정 및 삭제 액션 버튼 (표준 gap 규격 적용) -->
                    <div class="btn-group-sm d-flex gap-1">
                        <a href="{{ route('admin.notifications.edit', $item) }}" class="btn btn-outline-primary btn-app-xs" title="템플릿 수정">
                            <i class="fa-solid fa-pen-to-square me-1"></i>수정
                        </a>
                        <button type="button"
                            class="btn btn-outline-danger btn-app-xs js-delete-btn"
                            data-id="{{ $item->id }}"
                            data-code="{{ $item->code }}"
                            title="템플릿 삭제">
                            <i class="fa-solid fa-trash"></i>
                        </button>
                    </div>
                </div>

                <!-- 스마트폰 하단 홈 인디케이터 바 -->
                <div class="phone-home-indicator"></div>
            </div>
        </div>
        @empty
        <!-- 데이터가 없을 때 빈 화면 안내 -->
        <div class="col-12 py-5 text-center text-muted">
            <i class="fa-solid fa-mobile-screen-button fa-3x d-block mb-3 text-secondary opacity-50"></i>
            등록되었거나 검색 조건에 일치하는 알림 템플릿이 없습니다.
        </div>
        @endforelse
    </div>

    <!-- 공용 삭제 처리용 히든 폼 -->
    <form id="globalDeleteForm" method="POST" style="display: none;">
        @csrf
        @method('DELETE')
    </form>

    <!-- 5. 페이지네이션 영역 -->
    @if(isset($notifications) && method_exists($notifications, 'hasPages') && $notifications->hasPages())
    <div class="mt-4 d-flex justify-content-center">
        {{ $notifications->appends(request()->query())->links('vendor.pagination.admin') }}
    </div>
    @endif

</div>
@endsection

@push('styles')
<!-- 알림 전용 스타일시트 -->
<link rel="stylesheet" href="{{ asset('css/admin/admin_notification.css') }}?v={{ time() }}">
@endpush

@push('scripts')
<!-- 알림 전용 공통 자바스크립트 -->
<script src="{{ asset('js/admin/admin_notification.js') }}?v={{ time() }}"></script>
@endpush