@php
    $firstLog = $channelLogs->first();
    $totalCount = $channelLogs->count();
    $successCount = $channelLogs->where('status', 'SUCCESS')->count();
    $failedCount = $channelLogs->where('status', 'FAILED')->count();
@endphp

<!-- 1. 사건(배치) 개요 요약 헤더 바 -->
<div class="p-3 bg-light rounded-3 border mb-3">
    <div class="row g-2 align-items-center">
        <div class="col-12 col-md-7">
            <div class="d-flex align-items-center gap-2 mb-1">
                <span class="badge bg-dark font-monospace" style="font-size: 11px;">BATCH ID</span>
                <span class="font-monospace fw-bold text-dark fs-6">{{ $batchId }}</span>
            </div>
            <div class="text-muted small">
                <i class="fa-solid fa-clock me-1"></i>발생 일시: 
                <span class="font-monospace text-dark">{{ optional($firstLog->created_at)->format('Y-m-d H:i:s') }}</span>
                @if($firstLog && $firstLog->template_code)
                    <span class="ms-2 badge bg-white text-secondary border font-monospace">
                        <i class="fa-solid fa-code me-1"></i>{{ $firstLog->template_code }}
                    </span>
                @endif
            </div>
        </div>
        <div class="col-12 col-md-5 text-md-end">
            <div class="d-inline-flex gap-2 align-items-center bg-white p-2 rounded border">
                <span class="small text-muted me-1">채널 트랜잭션:</span>
                <span class="badge bg-secondary-subtle text-secondary">{{ $totalCount }}건 요청</span>
                <span class="badge bg-success-subtle text-success">{{ $successCount }}건 성공</span>
                @if($failedCount > 0)
                    <span class="badge bg-danger-subtle text-danger">{{ $failedCount }}건 실패</span>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- 2. 채널별 상세 트랜잭션 카드 리스트 -->
<div class="d-flex flex-column gap-3">
    @foreach ($channelLogs as $index => $log)
        @php
            $type = strtoupper($log->type ?? $log->channel ?? 'SMS');
            $status = $log->status ?? 'SUCCESS';
            
            $typeIcon = match($type) {
                'ALIMTALK' => 'fa-solid fa-comment text-warning',
                'EMAIL'    => 'fa-solid fa-envelope text-info',
                'WEB'      => 'fa-solid fa-bell text-primary',
                default    => 'fa-solid fa-comment-sms text-success',
            };
            
            $statusBadge = match($status) {
                'SUCCESS' => 'bg-success-subtle text-success border-success-subtle',
                'FAILED'  => 'bg-danger-subtle text-danger border-danger-subtle',
                default   => 'bg-secondary-subtle text-secondary border-secondary-subtle',
            };
        @endphp

        <div class="card border border-light-subtle shadow-sm rounded-3 overflow-hidden">
            <!-- 채널 카드 헤더 -->
            <div class="card-header bg-white py-2 px-3 border-bottom d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-2">
                    <span class="fs-6"><i class="{{ $typeIcon }}"></i></span>
                    <span class="fw-bold text-dark font-monospace small">#{{ $index + 1 }} {{ $type }}</span>
                    <span class="badge border {{ $statusBadge }} px-2 py-1" style="font-size: 11px;">
                        {{ $status === 'SUCCESS' ? '발송 완료' : ($status === 'FAILED' ? '발송 실패' : '대기/진행중') }}
                    </span>
                </div>
                <div class="text-muted font-monospace" style="font-size: 12px;">
                    전송: {{ optional($log->created_at)->format('H:i:s') }}
                </div>
            </div>

            <!-- 채널 카드 본문 -->
            <div class="card-body p-3">
                <div class="row g-3">
                    <!-- 수신 정보 -->
                    <div class="col-12 col-md-5 border-end-md">
                        <div class="small fw-bold text-secondary mb-2">
                            <i class="fa-solid fa-user me-1 text-primary"></i>수신자 및 발송처
                        </div>
                        <table class="table table-sm table-borderless mb-0" style="font-size: 12px;">
                            <tr>
                                <th class="text-muted py-1 ps-0" style="width: 70px;">수신인</th>
                                <td class="text-dark fw-semibold py-1">{{ $log->receiver_name ?? '고객' }}</td>
                            </tr>
                            <tr>
                                <th class="text-muted py-1 ps-0">연락처/계정</th>
                                <td class="font-monospace text-dark py-1">
                                    {{ $log->receiver_phone ?? $log->receiver_email ?? ('회원 ID: ' . ($log->user_id ?? '-')) }}
                                </td>
                            </tr>
                            <tr>
                                <th class="text-muted py-1 ps-0">수신 대상</th>
                                <td class="py-1">
                                    <span class="badge bg-light text-dark border" style="font-size: 11px;">
                                        {{ $log->target === 'user' ? '일반회원' : ($log->target === 'shop' ? '뷰티샵' : '최고관리자') }}
                                    </span>
                                </td>
                            </tr>
                            @if(!empty($log->response_code))
                                <tr>
                                    <th class="text-muted py-1 ps-0">응답코드</th>
                                    <td class="font-monospace text-secondary py-1">{{ $log->response_code }}</td>
                                </tr>
                            @endif
                        </table>
                    </div>

                    <!-- 발송 메시지 본문 내용 -->
                    <div class="col-12 col-md-7">
                        <div class="small fw-bold text-secondary mb-2">
                            <i class="fa-solid fa-message me-1 text-primary"></i>전송 메시지 내용
                        </div>
                        @if(!empty($log->title))
                            <div class="fw-bold text-dark small mb-1 p-2 bg-light rounded border-start border-3 border-primary">
                                {{ $log->title }}
                            </div>
                        @endif
                        <div class="p-2 bg-light rounded text-dark font-monospace" style="font-size: 12px; white-space: pre-wrap; line-height: 1.5; max-height: 120px; overflow-y: auto;">
                            {{ $log->content ?: '(전송 본문 없음)' }}
                        </div>
                    </div>
                </div>

                <!-- 중계사 응답 메시지 또는 에러 내역 -->
                <div class="mt-3 pt-2 border-top">
                    <div class="d-flex align-items-center justify-content-between mb-1">
                        <span class="small fw-bold text-secondary" style="font-size: 12px;">
                            <i class="fa-solid fa-server me-1 text-muted"></i>통신사 / 중계사 응답 결과
                        </span>
                    </div>
                    @if($status === 'FAILED' || !empty($log->error_message))
                        <div class="alert alert-danger mb-0 py-2 px-3 font-monospace" style="font-size: 12px;">
                            <i class="fa-solid fa-circle-exclamation me-1"></i>
                            <strong>[에러 응답]</strong> {{ $log->error_message ?? $log->response_message ?? '통신 실패' }}
                        </div>
                    @else
                        <div class="p-2 bg-light rounded text-success font-monospace" style="font-size: 12px;">
                            <i class="fa-solid fa-check-circle me-1"></i>
                            {{ $log->response_message ?: '정상 접수 및 수신 단말기 전달 완료 (HTTP 200)' }}
                        </div>
                    @endif

                    <!-- 상세 Raw Payload -->
                    @if(!empty($log->payload))
                        <div class="mt-2">
                            <a class="text-muted text-decoration-none" style="font-size: 11px;" data-bs-toggle="collapse" href="#payload_{{ $log->id }}" role="button">
                                <i class="fa-solid fa-code me-1"></i>Raw Payload 보기 <i class="fa-solid fa-angle-down"></i>
                            </a>
                            <div class="collapse mt-1" id="payload_{{ $log->id }}">
                                <pre class="p-2 bg-dark text-light rounded mb-0" style="font-size: 11px; max-height: 150px; overflow-y: auto;"><code>{{ is_array($log->payload) ? json_encode($log->payload, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) : $log->payload }}</code></pre>
                            </div>
                        </div>
                    @endif
                </div>

            </div>
        </div>
    @endforeach
</div>