@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>

    <!-- 검색 및 상세 필터 영역 (대분류, 소분류, 채널, 키워드 검색 및 하단 건수 제어) -->
    <div class="search-filter-section mb-4">
        <form id="searchForm" method="GET" action="{{ route('admin.notifications.index') }}">
            @if(request('target'))
            <input type="hidden" name="target" value="{{ request('target') }}">
            @endif

            @php
            $notificationCategories = config('notification_categories.categories', []);
            $selectedCategory = request('category');
            $selectedSubcategory = request('subcategory');
            $selectedType = request('type');

            // 현재 선택된 대분류에 속한 소분류 목록 추출
            $currentSubcategories = ($selectedCategory && isset($notificationCategories[$selectedCategory]['subcategories']))
            ? $notificationCategories[$selectedCategory]['subcategories']
            : [];
            @endphp

            <!-- 상단 필터 및 검색 유닛 그룹 (오른쪽 정렬: justify-content-end) -->
            <div class="d-flex flex-wrap align-items-center justify-content-end gap-2 mb-3">
                <!-- 대분류 셀렉트 필터 -->
                <div style="width: 130px;">
                    <select name="category" class="form-select form-select-sm" id="categorySelect">
                        <option value="">대분류 전체</option>
                        @foreach($notificationCategories as $cKey => $cData)
                        <option value="{{ $cKey }}" {{ $selectedCategory === $cKey ? 'selected' : '' }}>
                            {{ $cData['name'] }}
                        </option>
                        @endforeach
                    </select>
                </div>

                <!-- 소분류 셀렉트 필터 -->
                <div style="width: 140px;">
                    <select name="subcategory" class="form-select form-select-sm" id="subcategorySelect" @if(!$selectedCategory) disabled @endif>
                        <option value="">소분류 전체</option>
                        @foreach($currentSubcategories as $sKey => $sLabel)
                        <option value="{{ $sKey }}" {{ $selectedSubcategory === $sKey ? 'selected' : '' }}>
                            {{ $sLabel }}
                        </option>
                        @endforeach
                    </select>
                </div>

                <!-- 발송 채널 셀렉트 필터 -->
                <div style="width: 120px;">
                    <select name="type" class="form-select form-select-sm" id="typeSelect">
                        <option value="">채널 전체</option>
                        <option value="SMS" {{ $selectedType === 'SMS' ? 'selected' : '' }}>SMS</option>
                        <option value="LMS" {{ $selectedType === 'LMS' ? 'selected' : '' }}>LMS</option>
                        <option value="ALIMTALK" {{ $selectedType === 'ALIMTALK' ? 'selected' : '' }}>알림톡</option>
                        <option value="EMAIL" {{ $selectedType === 'EMAIL' ? 'selected' : '' }}>EMAIL</option>
                    </select>
                </div>

                <!-- 키워드 검색 입력창 및 검색 버튼 -->
                <div style="width: 240px;">
                    <div class="input-group input-group-sm">
                        <input type="text" name="keyword" class="form-control" id="keywordInput"
                            placeholder="식별 코드, 제목, 설명 검색"
                            value="{{ request('keyword') }}">
                        <button class="btn btn-secondary" type="submit" id="searchSubmitBtn">
                            <i class="fa-solid fa-magnifying-glass"></i>
                        </button>
                    </div>
                </div>

                <!-- 독립된 초기화 아이콘 버튼 -->
                <div>
                    <a href="{{ route('admin.notifications.index') }}" class="btn btn-outline-light text-secondary border btn-app-sm" title="검색 초기화">
                        <i class="fa-solid fa-rotate-left"></i>
                    </a>
                </div>
            </div>

            <!-- 하단: 총 건수 표시 및 건수별 보기 (기존 동일 유지) -->
            <div class="d-flex justify-content-between align-items-center pt-2 border-top border-light">
                <span class="text-muted small">
                    총 <strong class="text-dark">{{ isset($notifications) && method_exists($notifications, 'total') ? $notifications->total() : count($notifications) }}</strong>개의 알림 템플릿
                </span>

                <!-- [PC 전용 건수별 보기] -->
                <div class="pc-only-section">
                    <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>
                            <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100개씩</option>
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- 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