@extends('layouts.admin')

@section('title', '통합 발송 내역')

@section('content')

<!-- 1. 헤더 영역 -->
<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.notifications.logs.list') }}" class="btn btn-outline-secondary btn-app-sm">
            <i class="fa-solid fa-rotate-right me-1"></i> 새로고침
        </a>
        <a href="{{ route('admin.notifications.send') }}" class="btn btn-primary btn-app-sm fw-bold">
            <i class="fa-solid fa-paper-plane me-1"></i> 메시지 발송
        </a>
    </div>
</div>

<!-- 공통 알림 메시지 컴포넌트 -->
<x-admin.alerts-display />

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

    <!-- 2. 검색 및 상세 필터 영역 -->
    <x-admin.search-filter :route="route('admin.notifications.logs.list')" :total="$batches->total()" searchPlaceholder="배치 ID, 템플릿 코드, 수신처, 제목 검색">
        @slot('filters')
            <x-admin.forms.select name="dispatch_type" label="발송유형" allLabel="유형 전체" 
                :options="['AUTO' => '시스템 자동발송', 'MANUAL' => '수동/직접발송']" />

            <x-admin.forms.select name="status" label="최종상태" allLabel="상태 전체" 
                :options="['SUCCESS' => '발송성공', 'FAIL' => '발송실패', 'PENDING' => '발송대기']" />

            <x-admin.forms.select name="channel" label="채널" allLabel="채널 전체" 
                :options="['ALIMTALK' => '알림톡', 'SMS' => 'SMS', 'LMS' => 'LMS', 'EMAIL' => '이메일', 'WEB' => '웹 알림']" />
        @endslot
    </x-admin.search-filter>

    <!-- ======================================================
        [PC 전용 영역 (pc-only-section)]
        ====================================================== -->
    <div class="pc-only-section">
        <div class="card border-0 shadow-sm">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" style="min-width: 1100px;">
                    <thead class="text-secondary small text-uppercase app-table-header">
                        <tr>
                            <th style="width: 18%;" class="py-3 ps-4">배치 ID / 발송일시</th>
                            <th style="width: 32%;" class="py-3">발송 구분 및 업무</th>
                            <th style="width: 15%;" class="py-3 text-center">수신자 정보</th>
                            <th style="width: 20%;" class="py-3 text-center">최종 결과</th>
                            <th style="width: 15%;" class="py-3 text-center pe-4">상세리스트</th>
                        </tr>
                    </thead>

                    <tbody>
                        @forelse ($batches as $batch)
                            @php
                                $batchId =$batch->batch_id;
                                $subLogs = $batch->sub_logs ?? collect([$batch]);
                                $collapseId = 'collapse_batch_' .$batchId;
                            @endphp
                            
                            <!-- [1] 마스터 리스트 (1사건 1줄 표시) -->
                            <tr class="align-middle batch-master-row" style="cursor: pointer;" data-bs-toggle="collapse" data-bs-target="#{{ $collapseId }}">
                                
                                <!-- 1. 배치 ID (M포함 12자리) / 발송일시 -->
                                <td class="py-3 ps-4">
                                    <div class="d-flex align-items-center gap-2">
                                        <i class="fa-solid fa-chevron-right text-muted transition-icon" id="arrow_{{ $collapseId }}" style="font-size: 11px;"></i>
                                        <div>
                                            <div class="font-monospace fw-bold text-dark" style="font-size: 13px;">{{ $batchId }}</div>
                                            <div class="text-muted" style="font-size: 11px;">{{ optional($batch->created_at)->format('Y-m-d H:i:s') }}</div>
                                        </div>
                                    </div>
                                </td>

                                <!-- 2. 발송 구분 및 대표 업무 타이틀 + 원천 매장명 -->
                                <td class="py-3">
                                    <div class="d-flex flex-column gap-1">
                                        <div class="d-flex align-items-center gap-2">
                                            <span class="badge {{ $batch->dispatch_type === 'AUTO' ? 'bg-primary-subtle text-primary border border-primary-subtle' : 'bg-warning-subtle text-dark border border-warning-subtle' }} px-2 py-1" style="font-size: 11px;">
                                                {{ $batch->dispatch_type === 'AUTO' ? '시스템자동' : '수동발송' }}
                                            </span>
                                            <span class="fw-bold text-dark" style="font-size: 13px;">
                                                {{ $batch->business_title }}
                                            </span>
                                        </div>
                                        <div class="text-muted" style="font-size: 11px;">
                                            <i class="fa-solid fa-store me-1 text-secondary"></i>
                                            <span class="text-dark fw-semibold">{{ $batch->source_display_text }}</span>
                                        </div>
                                    </div>
                                </td>

                                <!-- 3. 수신자 정보 (총 00건 표기) -->
                                <td class="text-center py-3">
                                    <span class="badge bg-light text-dark border px-2 py-1 fw-bold" style="font-size: 12px;">
                                        총 {{ $batch->total_recipients ?? $subLogs->count() }}건
                                    </span>
                                </td>

                                <!-- 4. 최종 결과 (성공 0건 / 실패 0건) -->
                                <td class="text-center py-3">
                                    <div class="d-inline-flex gap-1 align-items-center">
                                        <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1" style="font-size: 11px;">
                                            성공 {{ $batch->success_count ?? 0 }}건
                                        </span>
                                        @if(($batch->failed_count ?? 0) > 0)
                                            <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1" style="font-size: 11px;">
                                                실패 {{ $batch->failed_count }}건
                                            </span>
                                        @endif
                                    </div>
                                </td>

                                <!-- 5. 상세리스트 아코디언 토글 버튼 -->
                                <td class="text-center py-3 pe-4">
                                    <button type="button" class="btn btn-sm btn-outline-secondary px-2" style="font-size: 11px;">
                                        내역확인 ({{ $subLogs->count() }}) <i class="fa-solid fa-angle-down ms-1"></i>
                                    </button>
                                </td>
                            </tr>

                            <!-- [2] 상세리스트 (보더 제거, 들여쓰기 없이 심플한 플랫 카드 스타일) -->
                            <tr class="collapse batch-sub-row" id="{{ $collapseId }}">
                                <td colspan="5" class="p-3 bg-light bg-opacity-75 border-bottom">
                                    <div class="px-2 py-1">
                                        <div class="d-flex align-items-center justify-content-between mb-2">
                                            <div class="d-flex align-items-center gap-2">
                                                <i class="fa-solid fa-layer-group text-primary" style="font-size: 12px;"></i>
                                                <span class="fw-bold text-dark" style="font-size: 12px;">
                                                    상세 발송 리스트 ({{ $subLogs->count() }}건)
                                                </span>
                                            </div>
                                            <span class="font-monospace text-muted" style="font-size: 11px;">Batch: {{ $batchId }}</span>
                                        </div>
                                        
                                        <div class="table-responsive">
                                            <table class="table table-sm align-middle mb-0 bg-transparent" style="font-size: 12px;">
                                                <thead class="text-secondary small">
                                                    <tr class="border-bottom">
                                                        <th style="width: 12%;" class="ps-2 py-2">채널</th>
                                                        <th style="width: 26%;" class="py-2">수신처 / 회원정보</th>
                                                        <th style="width: 36%;" class="py-2">메시지 타이틀 (제목)</th>
                                                        <th style="width: 12%;" class="py-2 text-center">상태</th>
                                                        <th style="width: 14%;" class="py-2 text-center pe-2">단건 상세</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($subLogs as $item)
                                                        @php
                                                            $memberName =$item->receiver?->name;
                                                        @endphp
                                                        <tr class="border-bottom border-light-subtle">
                                                            <!-- 채널 -->
                                                            <td class="ps-2 py-2">
                                                                <span class="badge bg-secondary-subtle text-secondary font-monospace" style="font-size: 11px;">
                                                                    {{ strtoupper($item->channel) }}
                                                                </span>
                                                            </td>

                                                            <!-- 수신처 / 회원정보 (receiver_id가 있을 경우 회원명 표기) -->
                                                            <td class="py-2">
                                                                <!-- 상단: 연락처 (굵게) -->
                                                                <div class="font-monospace fw-bold text-dark">
                                                                    {{ $item->receiver_contact ?: '-' }}
                                                                </div>
                                                                <!-- 하단: 회원명/회원번호 또는 수신대상 구분 -->
                                                                <div class="text-muted" style="font-size: 11px;">
                                                                    @if($item->receiver_id &&$memberName)
                                                                        <span class="text-secondary fw-semibold">{{ $memberName }}</span>
                                                                        <span class="text-muted">(회원 #{{ $item->receiver_id }})</span>
                                                                    @else
                                                                        <span>{{ $item->receiver_type === 'SHOP_OWNER' ? '뷰티샵 원장' : ($item->receiver_type === 'ADMIN' ? '본사 관리자' : '비회원/기타') }}</span>
                                                                    @endif
                                                                </div>
                                                            </td>

                                                            <!-- 개별 발송건 실제 타이틀 -->
                                                            <td class="py-2">
                                                                <div class="text-truncate text-dark fw-medium" style="max-width: 360px;" title="{{ $item->title }}">
                                                                    {{ $item->title ?: '(제목 없음 / 본문 직접 전송)' }}
                                                                </div>
                                                            </td>

                                                            <!-- 단건 발송 결과 -->
                                                            <td class="py-2 text-center">
                                                                @if ($item->status === 'SUCCESS')
                                                                    <span class="badge bg-success-subtle text-success border border-success-subtle px-2 py-1" style="font-size: 11px;">성공</span>
                                                                @elseif ($item->status === 'FAIL')
                                                                    <span class="badge bg-danger-subtle text-danger border border-danger-subtle px-2 py-1" style="font-size: 11px;">실패</span>
                                                                @else
                                                                    <span class="badge bg-secondary-subtle text-secondary px-2 py-1" style="font-size: 11px;">대기</span>
                                                                @endif
                                                            </td>

                                                            <!-- 단 1건 집중 확인 버튼 -->
                                                            <td class="py-2 text-center pe-2" onclick="event.stopPropagation();">
                                                                <button type="button" class="btn btn-sm btn-outline-primary px-2 js-open-single-modal"
                                                                        data-log-id="{{ $item->id }}"
                                                                        data-bs-toggle="modal" 
                                                                        data-bs-target="#singleDetailModal"
                                                                        style="font-size: 11px;">
                                                                    <i class="fa-solid fa-file-lines me-1"></i> 상세보기
                                                                </button>
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="5" class="text-center py-5 text-muted">
                                    <i class="fa-solid fa-inbox fa-3x d-block mb-3 text-secondary opacity-50"></i>
                                    발송된 알림 관제 데이터가 없습니다.
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

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

    <!-- ======================================================
        [모바일 전용 영역 (mobile-only-section)]
        ====================================================== -->
    <div class="mobile-only-section">
        <div class="d-flex flex-column gap-3">
            @forelse ($batches as $batch)
                @php
                    $mBatchId =$batch->batch_id;
                    $mSubLogs = $batch->sub_logs ?? collect([$batch]);
                    $mCollapseId = 'm_collapse_batch_' .$mBatchId;
                @endphp
                <div class="card border-0 shadow-sm p-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="badge bg-light text-dark border font-monospace" style="font-size: 11px;">{{ $mBatchId }}</span>
                        <span class="text-muted" style="font-size: 11px;">{{ optional($batch->created_at)->format('m-d H:i') }}</span>
                    </div>

                    <div class="fw-bold text-dark mb-1" style="font-size: 14px;">
                        {{ $batch->business_title }}
                    </div>
                    <div class="text-muted mb-2" style="font-size: 11px;">
                        <i class="fa-solid fa-store me-1 text-secondary"></i>{{ $batch->source_display_text }}
                    </div>

                    <div class="d-flex justify-content-between align-items-center pt-2 border-top">
                        <div class="d-flex align-items-center gap-1">
                            <span class="badge bg-light text-dark border" style="font-size: 11px;">총 {{ $mSubLogs->count() }}건</span>
                            <span class="badge bg-success-subtle text-success border border-success-subtle" style="font-size: 11px;">성공 {{ $batch->success_count ?? 0 }}</span>
                            @if(($batch->failed_count ?? 0) > 0)
                                <span class="badge bg-danger-subtle text-danger border border-danger-subtle" style="font-size: 11px;">실패 {{ $batch->failed_count }}</span>
                            @endif
                        </div>
                        <button type="button" class="btn btn-outline-secondary btn-sm px-2" 
                                data-bs-toggle="collapse" 
                                data-bs-target="#{{ $mCollapseId }}" 
                                style="font-size: 11px;">
                            내역보기 <i class="fa-solid fa-angle-down ms-1"></i>
                        </button>
                    </div>

                    <!-- 모바일 아코디언 하위 목록 -->
                    <div class="collapse mt-2 pt-2 border-top" id="{{ $mCollapseId }}">
                        <div class="d-flex flex-column gap-2">
                            @foreach ($mSubLogs as $mItem)
                                @php
                                    $mMemberName =$mItem->receiver?->name;
                                @endphp
                                <div class="p-2 bg-light rounded d-flex justify-content-between align-items-center">
                                    <div>
                                        <div class="d-flex align-items-center gap-1 mb-1">
                                            <span class="badge bg-secondary-subtle text-secondary font-monospace" style="font-size: 11px;">
                                                {{ strtoupper($mItem->channel) }}
                                            </span>
                                            @if($mItem->receiver_id &&$mMemberName)
                                                <span class="fw-bold text-dark" style="font-size: 12px;">{{ $mMemberName }}</span>
                                            @else
                                                <span class="fw-bold text-dark font-monospace" style="font-size: 12px;">
                                                    {{ $mItem->receiver_contact ?: ('#' . ($mItem->receiver_id ?? '-')) }}
                                                </span>
                                            @endif
                                        </div>
                                        <div class="text-muted text-truncate" style="max-width: 200px; font-size: 11px;">
                                            {{ $mItem->title ?: '(제목 없음)' }}
                                        </div>
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-primary px-2 js-open-single-modal"
                                            data-log-id="{{ $mItem->id }}"
                                            data-bs-toggle="modal" 
                                            data-bs-target="#singleDetailModal"
                                            style="font-size: 11px;">
                                        상세
                                    </button>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center py-5 text-muted">
                    발송 내역이 없습니다.
                </div>
            @endforelse
        </div>

        @if (isset($batches) && method_exists($batches, 'hasPages') &&$batches->hasPages())
            <div class="mt-4 d-flex justify-content-center">
                {{ $batches->appends(request()->query())->links('vendor.pagination.admin') }}
            </div>
        @endif
    </div>

</div>

<!-- 3. 단 1건 집중 확인 모달 -->
<div class="modal fade" id="singleDetailModal" tabindex="-1" aria-labelledby="singleDetailModalLabel" 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="singleDetailModalLabel" style="font-size: 14px;">
                    <i class="fa-solid fa-circle-info 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-4" id="modalSingleBody">
                <div class="text-center py-4 text-muted">
                    <div class="spinner-border spinner-border-sm text-primary mb-2" role="status"></div>
                    <div style="font-size: 12px;">발송 상세 데이터를 불러오는 중입니다...</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() }}">
<style>
    .transition-icon {
        transition: transform 0.2s ease-in-out;
    }
    .batch-master-row[aria-expanded="true"] .transition-icon {
        transform: rotate(90deg);
    }
    tr.collapse.show {
        display: table-row !important;
    }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
    // 1) 아코디언 행 열림/닫힘 시 화살표 아이콘 회전 연동
    document.querySelectorAll('.batch-master-row').forEach(row => {
        const targetId = row.getAttribute('data-bs-target');
        const collapseEl = document.querySelector(targetId);
        if (!collapseEl) return;

        collapseEl.addEventListener('show.bs.collapse', () => {
            row.setAttribute('aria-expanded', 'true');
        });
        collapseEl.addEventListener('hide.bs.collapse', () => {
            row.setAttribute('aria-expanded', 'false');
        });
    });

    // 2) 단 1건 상세 모달 AJAX 데이터 로드 (admin.notifications.logs.detail)
    document.querySelectorAll('.js-open-single-modal').forEach(btn => {
        btn.addEventListener('click', function() {
            const logId = this.getAttribute('data-log-id');
            const modalBody = document.getElementById('modalSingleBody');
            
            modalBody.innerHTML = `
                <div class="text-center py-4 text-muted">
                    <div class="spinner-border spinner-border-sm text-primary mb-2" role="status"></div>
                    <div style="font-size: 12px;">로그 [#${logId}] 상세 기록 로딩 중...</div>
                </div>
            `;

            fetch(`/admin/notifications/logs/detail/${logId}`, {
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(res => res.text())
            .then(html => {
                modalBody.innerHTML = html;
            })
            .catch(err => {
                modalBody.innerHTML = `
                    <div class="alert alert-danger mb-0" style="font-size: 12px;">
                        상세 데이터를 불러오지 못했습니다. (${err.message})
                    </div>
                `;
            });
        });
    });
});
</script>
@endpush