@extends('layouts.app-sub')

@section('title', '알림 상세 - 마이페이지')
@section('header-title', '알림 상세')

@section('content')
<div class="container py-3 py-lg-4" style="max-width: 780px;">

    @php
        $data = $notification->data;
        $actionUrl =$data['url'] ?? null;
        $itemTitle =$data['title'] ?? '알림 안내';
    @endphp

    <div class="card border-0 shadow-sm" style="border-radius: var(--radius-fixed);">
        <div class="card-body p-4 p-md-5">

            <div class="border-bottom pb-3 mb-4">
                <div class="d-flex align-items-center justify-content-between mb-2">
                    <span class="badge bg-light text-brand border px-2 py-1" style="font-size: 0.78rem;">
                        <i class="fas fa-bell me-1"></i>시스템 알림
                    </span>
                    <span class="text-muted small font-monospace">
                        {{ $notification->created_at->format('Y-m-d H:i') }}
                    </span>
                </div>
                <h4 class="fw-bold text-dark mb-0" style="font-size: 1.25rem;">
                    {{ $itemTitle }}
                </h4>
            </div>

            <div class="notification-body text-secondary mb-5" style="white-space: pre-line; line-height: 1.8; font-size: 1rem;">
                {{ $data['message'] ?? '내용이 없습니다.' }}
            </div>

            <div class="d-flex align-items-center justify-content-between pt-3 border-top gap-2 flex-wrap">
                <div>
                    <form id="delete-form-{{ $notification->id }}" action="{{ route('mypage.notifications.destroy', $notification->id) }}" method="POST" class="d-inline">
                        @csrf
                        @method('DELETE')
                        <button type="button" 
                                class="btn btn-outline-secondary d-inline-flex align-items-center justify-content-center text-muted noti-action-btn noti-btn-slim" 
                                onclick="confirmDeleteNotification('{{ $notification->id }}', '{{ addslashes($itemTitle) }}')">
                            <i class="far fa-trash-alt me-1"></i> 삭제
                        </button>
                    </form>
                </div>

                <div class="d-flex align-items-center gap-2">
                    <a href="{{ route('mypage.notifications.index') }}" 
                       class="btn btn-outline-secondary d-inline-flex align-items-center justify-content-center fw-medium noti-action-btn px-3">
                        <i class="fas fa-list me-1"></i> 목록으로
                    </a>

                    @if(!empty($actionUrl))
                        <a href="{{ $actionUrl }}" 
                           class="btn btn-premium d-inline-flex align-items-center justify-content-center gap-1.5 fw-bold shadow-sm noti-action-btn noti-btn-wide">
                            <span>관련 페이지 바로가기</span>
                            <i class="fas fa-chevron-right" style="font-size: 0.7rem;"></i>
                        </a>
                    @endif
                </div>
            </div>

        </div>
    </div>

</div>
@endsection

@push('styles')
<style>
    /* 같은 줄 버튼 규격 일치화 (높이, 폰트, 라운드 통일) */
    .noti-action-btn {
        height: 40px;
        font-size: 0.88rem !important;
        border-radius: var(--radius-fixed) !important;
        line-height: 1;
        white-space: nowrap;
    }
    
    /* 삭제 버튼: 눈에 덜 띄도록 좁은 폭 */
    .noti-btn-slim {
        padding-left: 12px;
        padding-right: 12px;
        border-color: #e5e7eb;
    }
    .noti-btn-slim:hover {
        background-color: #fee2e2 !important;
        border-color: #fca5a5 !important;
        color: #dc2626 !important;
    }

    /* 바로가기 버튼: 시선이 가도록 넉넉한 폭 */
    .noti-btn-wide {
        padding-left: 24px;
        padding-right: 24px;
    }
</style>
@endpush

@push('scripts')
<script>
/**
 * 단건 알림 삭제 SweetAlert (부담 없는 심플 컨펌)
 */
async function confirmDeleteNotification(notiId, notiTitle) {
    const form = document.getElementById('delete-form-' + notiId);
    if (!form) return;

    const message = `
        <div class="text-secondary small text-start px-1 py-1">
            <p class="mb-0" style="font-size: 0.95rem; line-height: 1.5;">
                <strong class="text-dark">[${notiTitle}]</strong> 알림을 삭제하시겠습니까?
            </p>
        </div>
    `;

    const confirmed = await showSwalConfirm(
        message, 
        '알림 삭제', 
        '삭제', 
        '취소', 
        'question'
    );

    if (confirmed) {
        form.submit();
    }
}
</script>
@endpush