@extends('web_user.layouts.app')
@section('title', 'Detail Notifikasi')

@section('content')
@php
    $hasFoto = !empty($notif->data['foto'] ?? null);
@endphp

<div
    x-data="{ showSuccess: {{ session('success') ? 'true' : 'false' }} }"
    x-init="if(showSuccess){ setTimeout(() => showSuccess = false, 3000) }"
    class="min-h-screen bg-slate-50 p-3"
>

    <style>
        [x-cloak] {
            display: none !important;
        }

        .btn-modern {
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            border-radius: 12px;
            padding: 0 16px;
            font-size: 12px;
            font-weight: 600;
            line-height: 1;
            border: none !important;
            outline: none;
            white-space: nowrap;
            transition: all .2s ease;
            box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
        }

        .btn-modern i {
            width: 14px;
            height: 14px;
            font-size: 12px;
        }

        .btn-modern:hover {
            transform: translateY(-1px);
        }

        .btn-modern:active {
            transform: translateY(0);
        }

        .btn-gray {
            color: #475569;
            background: #e5e7eb;
        }

        .btn-gray:hover {
            color: #334155;
            background: #d1d5db;
            box-shadow: 0 8px 16px rgba(15, 23, 42, .10);
        }

        .notif-label {
            display: block;
            margin-bottom: 6px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
            color: #64748b;
        }
    </style>

    <div class="mx-auto max-w-4xl">

        {{-- Pop up sukses --}}
        <template x-if="showSuccess">
            <div x-show="showSuccess"
                x-transition.opacity
                class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/20 px-4">
                <div class="w-full max-w-xs rounded-xl bg-white px-4 py-4 text-center shadow-2xl">
                    <div class="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-green-100 text-green-600">
                        <i class="fas fa-check text-sm"></i>
                    </div>

                    <p class="text-sm font-bold text-slate-800">
                        Notifikasi berhasil dibuka!
                    </p>

                    <p class="mt-1 text-xs text-slate-500">
                        Detail notifikasi telah ditampilkan.
                    </p>
                </div>
            </div>
        </template>

        {{-- Header --}}
        <div class="mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
            <div class="flex flex-col gap-3 px-4 py-3 sm:flex-row sm:items-center sm:justify-between">

                <div class="flex items-start gap-3">
                    <div
                        class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl shadow-sm"
                        style="background-color: rgba(47, 67, 91, 0.10); border: 1px solid rgba(47, 67, 91, 0.12);"
                    >
                        <i
                            class="fas fa-bell text-[18px]"
                            style="color:#2f435b;"
                        ></i>
                    </div>

                    <div>
                        <h1 class="text-base font-semibold tracking-tight text-slate-800">
                            {{ $notif->data['judul'] ?? 'Notifikasi' }}
                        </h1>
                        <p class="mt-0.5 text-xs text-slate-500">
                            Detail pesan notifikasi yang diterima auditor.
                        </p>
                    </div>
                </div>

                @if(is_null($notif->read_at))
                    <span class="inline-flex h-7 w-fit items-center gap-2 rounded-full bg-blue-50 px-3 text-xs font-semibold text-blue-600 ring-1 ring-blue-100">
                        <span class="h-2 w-2 rounded-full bg-blue-500"></span>
                        Baru
                    </span>
                @else
                    <span class="inline-flex h-7 w-fit items-center gap-2 rounded-full bg-slate-100 px-3 text-xs font-semibold text-slate-500">
                        <i class="fas fa-check text-[10px]"></i>
                        Dibaca
                    </span>
                @endif

            </div>
        </div>

        {{-- Konten Notifikasi --}}
        <section class="mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">

            {{-- Pesan --}}
            <div class="border-b border-slate-100 px-4 py-3">
                <div class="flex items-center gap-3">
                    <div
                        class="flex h-10 w-10 items-center justify-center rounded-xl shadow-sm"
                        style="background-color:#eef4fa; border: 1px solid rgba(47, 67, 91, 0.10);"
                    >
                        <i
                            class="fas fa-message text-[18px]"
                            style="color:#2f435b;"
                        ></i>
                    </div>

                    <div>
                        <h2 class="text-sm font-semibold text-slate-800">
                            Pesan Notifikasi
                        </h2>
                        <p class="mt-0.5 text-[11px] text-slate-500">
                            Isi pesan yang dikirim melalui sistem.
                        </p>
                    </div>
                </div>
            </div>

            <div class="px-4 py-4">
                <label class="notif-label">Pesan</label>

                <div class="max-h-56 overflow-auto rounded-xl border border-slate-200 bg-slate-50 p-2">
                    <pre class="rounded-lg bg-white px-3 py-3 text-[11px] leading-relaxed text-slate-700 font-mono whitespace-pre-wrap break-words shadow-inner">{{ $notif->data['isi_pesan'] ?? '-' }}</pre>
                </div>
            </div>

            {{-- Lampiran --}}
            @if($hasFoto)
                <div class="border-t border-slate-100 px-4 py-4">
                    <label class="notif-label">Lampiran</label>

                    <div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
                        <a
                            href="{{ asset('storage/' . $notif->data['foto']) }}"
                            target="_blank"
                            rel="noopener"
                            class="group block overflow-hidden rounded-xl bg-white"
                        >
                            <img
                                src="{{ asset('storage/' . $notif->data['foto']) }}"
                                alt="Lampiran notifikasi"
                                class="mx-auto h-40 w-full object-contain transition duration-200 group-hover:scale-[1.01]">
                        </a>

                        <p class="mt-2 text-center text-[11px] text-slate-500">
                            Klik gambar untuk memperbesar lampiran.
                        </p>
                    </div>
                </div>
            @endif

            {{-- Footer --}}
            <div class="border-t border-slate-100 bg-slate-50 px-4 py-3">
                <div class="flex flex-col gap-1 text-xs text-slate-500 sm:flex-row sm:items-center sm:justify-between">
                    <span class="inline-flex items-center gap-2">
                        <i class="fas fa-calendar-day text-[12px] text-slate-400"></i>
                        Dikirim
                    </span>

                    <span class="font-semibold text-slate-600">
                        {{ \Carbon\Carbon::parse($notif->created_at)->format('d M Y H:i') }}
                    </span>
                </div>
            </div>

        </section>

        {{-- Tombol kembali --}}
        <div class="mt-4 flex justify-start rounded-xl border border-slate-200 bg-white px-4 py-3 shadow-sm">
            <a
                href="{{ route('notifikasi.index') }}"
                class="btn-modern btn-gray"
            >
                <i class="fas fa-arrow-left text-[12px]"></i>
                Kembali
            </a>
        </div>

    </div>
</div>
@endsection