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

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

    $penerimaCollection = collect($penerima);

    $totalPenerimaValid = $penerimaCollection->filter(function ($user) {
        return !empty($user['id'] ?? null);
    })->count();

    $totalDibaca = $penerimaCollection->filter(function ($user) {
        return ($user['status_baca'] ?? '') === 'Dibaca';
    })->count();

    if ($totalPenerimaValid === 0) {
        $statusAdmin = 'Terkirim';
    } elseif ($totalDibaca === 0) {
        $statusAdmin = 'Belum Dibaca';
    } elseif ($totalDibaca < $totalPenerimaValid) {
        $statusAdmin = 'Sebagian Dibaca';
    } else {
        $statusAdmin = 'Semua Dibaca';
    }
@endphp

<div class="min-h-screen bg-slate-50 p-3">

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

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

        .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-primary {
            color: #ffffff;
            background: #3b82f6;
        }

        .btn-primary:hover {
            background: #2563eb;
            box-shadow: 0 8px 18px rgba(37, 99, 235, .22);
        }

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

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

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

        {{-- 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 dan status baca auditor.
                        </p>
                    </div>
                </div>

                @if($statusAdmin === 'Semua Dibaca')
                    <span class="inline-flex h-7 w-fit items-center gap-2 rounded-full bg-green-50 px-3 text-xs font-semibold text-green-600 ring-1 ring-green-100">
                        <i class="fas fa-check text-[10px]"></i>
                        Semua Dibaca
                    </span>
                @elseif($statusAdmin === 'Sebagian Dibaca')
                    <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">
                        <i class="fas fa-eye text-[10px]"></i>
                        Sebagian Dibaca
                    </span>
                @elseif($statusAdmin === 'Belum Dibaca')
                    <span class="inline-flex h-7 w-fit items-center gap-2 rounded-full bg-amber-50 px-3 text-xs font-semibold text-amber-600 ring-1 ring-amber-100">
                        <i class="fas fa-clock text-[10px]"></i>
                        Belum Dibaca
                    </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-paper-plane text-[10px]"></i>
                        Terkirim
                    </span>
                @endif

            </div>
        </div>

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

            {{-- Pesan Header --}}
            <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-envelope-open-text 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 kepada penerima.
                        </p>
                    </div>
                </div>
            </div>

            {{-- Pesan --}}
            <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>

        {{-- Daftar Penerima --}}
        @if(!empty($penerima))
            <section x-data="{ open:false }" class="mb-4 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm">
                <div class="border-b border-slate-100 px-4 py-3">
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">

                        <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:#ecfdf5; border: 1px solid #bbf7d0;"
                            >
                                <i
                                    class="fas fa-users text-[18px]"
                                    style="color:#16a34a;"
                                ></i>
                            </div>

                            <div>
                                <h2 class="text-sm font-semibold text-slate-800">
                                    Daftar Penerima
                                </h2>
                                <p class="mt-0.5 text-[11px] text-slate-500">
                                    Status dibaca hanya berubah jika auditor membuka notifikasi.
                                </p>
                            </div>
                        </div>

                        <button
                            type="button"
                            @click="open = !open"
                            class="btn-modern btn-primary"
                        >
                            <i class="fas" :class="open ? 'fa-eye-slash' : 'fa-eye'"></i>
                            <span x-show="!open">Lihat</span>
                            <span x-show="open">Tutup</span>
                        </button>

                    </div>
                </div>

                <div x-show="open" x-transition x-cloak class="px-4 py-4">
                    <div class="overflow-hidden rounded-xl border border-slate-200">
                        <div class="max-h-80 overflow-auto">
                            <table class="w-full min-w-[760px] text-left text-xs">
                                <thead class="sticky top-0 z-10 bg-slate-100 text-slate-600">
                                    <tr>
                                        <th class="px-3 py-2 font-semibold">Nama</th>
                                        <th class="px-3 py-2 font-semibold">Divisi / Bagian</th>
                                        <th class="px-3 py-2 font-semibold">Email</th>
                                        <th class="px-3 py-2 font-semibold">Status</th>
                                    </tr>
                                </thead>

                                <tbody class="divide-y divide-slate-100 bg-white">
                                    @foreach($penerima as $user)
                                        <tr class="transition hover:bg-slate-50">
                                            <td class="px-3 py-2">
                                                <div class="flex items-center gap-2">
                                                    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-blue-50 text-xs font-bold text-blue-600 ring-1 ring-blue-100">
                                                        {{ strtoupper(substr($user['name'] ?? '-', 0, 1)) }}
                                                    </span>

                                                    <span class="font-semibold text-slate-700">
                                                        {{ $user['name'] ?? '-' }}
                                                    </span>
                                                </div>
                                            </td>

                                            <td class="px-3 py-2 text-slate-600">
                                                {{ $user['division'] ?? '-' }}
                                            </td>

                                            <td class="px-3 py-2 text-slate-500">
                                                {{ $user['email'] ?? '-' }}
                                            </td>

                                            <td class="px-3 py-2">
                                                @if(($user['status_baca'] ?? 'Belum Dibaca') === 'Dibaca')
                                                    <span class="inline-flex items-center gap-1 rounded-full bg-green-50 px-2.5 py-1 text-[11px] font-semibold text-green-600 ring-1 ring-green-100">
                                                        <i class="fas fa-check text-[10px]"></i>
                                                        Dibaca
                                                    </span>
                                                @elseif(($user['status_baca'] ?? '') === 'Terkirim Email')
                                                    <span class="inline-flex items-center gap-1 rounded-full bg-blue-50 px-2.5 py-1 text-[11px] font-semibold text-blue-600 ring-1 ring-blue-100">
                                                        <i class="fas fa-paper-plane text-[10px]"></i>
                                                        Terkirim Email
                                                    </span>
                                                @else
                                                    <span class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-semibold text-amber-600 ring-1 ring-amber-100">
                                                        <i class="fas fa-clock text-[10px]"></i>
                                                        Belum Dibaca
                                                    </span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
        @endif

        {{-- 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('admin.notifikasi.index') }}"
                class="btn-modern btn-gray"
            >
                <i class="fas fa-arrow-left text-[12px]"></i>
                Kembali
            </a>
        </div>

    </div>
</div>
@endsection