@extends('layout.layout')
@php
    $title = 'WhatsApp Blast';
    $subTitle = 'Riwayat Notifikasi';
@endphp

@section('content')
<div class="grid grid-cols-1 2xl:grid-cols-12 gap-6 flex-wrap-reverse items-start">
    
    {{-- SIDEBAR KIRI - RIWAYAT --}}
    <div class="col-span-1 lg:col-span-4 2xl:col-span-3">
        <div class="card p-0 border-0 shadow-sm">
            <div class="card-body p-0">
                <div class="p-6">
                    <a href="{{ route('notifikasi.index') }}" class="btn btn-primary text-sm btn-sm px-3 py-3 w-full rounded-lg flex items-center justify-center gap-2">
                        <i class="ri-messenger-line"></i> New Blast
                    </a>
                </div>

                <div class="px-6 pb-6 overflow-y-auto" style="max-height: 70vh;">
                    <ul class="ai-chat-list scroll-sm">
                        @php
                            $grouped = $histories->groupBy(function($item) {
                                if($item->created_at->isToday()) return 'Today';
                                if($item->created_at->isYesterday()) return 'Yesterday';
                                return $item->created_at->format('d/m/Y');
                            });
                        @endphp

                        @forelse($grouped as $date => $items)
                            <li class="mb-4 mt-4">
                                <span class="text-primary-600 text-sm font-semibold">{{ $date }}</span>
                            </li>
                            @foreach($items as $h)
                            <li class="mb-4">
                                <a href="{{ route('notifikasi.index', ['id' => $h->id]) }}" 
                                   class="line-clamp-1 text-neutral-600 hover:text-primary-600 {{ request('id') == $h->id ? 'text-primary-600 font-bold' : '' }}">
                                     {{ $h->title }}
                                </a>
                            </li>
                            @endforeach
                        @empty
                            <li class="text-center text-neutral-400 text-sm py-4">Belum ada riwayat chat</li>
                        @endforelse
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {{-- KOLOM KANAN - PREVIEW & FORM --}}
    <div class="col-span-1 lg:col-span-8 2xl:col-span-9 sticky top-24">
        <div class="chat-600 card overflow-hidden border-0 shadow-sm flex flex-col h-full">
            
            <div class="chat-sidebar-single gap-2 flex items-center px-6 py-5 justify-between border-b bg-white">
                <div class="flex items-center gap-4">
                    @if($selectedChat)
                        <a href="{{ route('notifikasi.index') }}" class="text-neutral-600 text-2xl"><i class="ri-arrow-left-line"></i></a>
                        <h6 class="text-lg mb-0 text-line-1">{{ strtoupper($selectedChat->type) }} - Terkirim ke {{ $selectedChat->total_sent }} Orang</h6>
                    @else
                        <h6 class="text-lg mb-0">New Broadcast Message</h6>
                    @endif
                </div>
            </div>

            {{-- PREVIEW PESAN --}}
            <div class="chat-message-list px-6 py-5 min-h-[300px] max-h-[400px] overflow-y-auto bg-neutral-50 flex-grow">
                @if($selectedChat)
                    <div class="flex items-start gap-4 mb-4">
                        <div class="img shrink-0">
                            <img src="{{ asset('assets/images/wow-dash-favicon.png') }}" class="w-[44px] h-[44px] rounded-full border shadow-sm">
                        </div>
                        <div class="info grow">
                            <h6 class="text-lg mb-2">Admin PAMSIMAS</h6>
                            <div class="p-4 bg-white rounded-lg border shadow-sm text-sm text-neutral-600">
                                {!! nl2br(e($selectedChat->message_content)) !!}
                            </div>
                            <div class="mt-4 flex items-center gap-3">
                                <span class="text-xs text-neutral-400">{{ $selectedChat->created_at->format('H:i A') }}</span>
                                <span class="text-xs font-bold text-green-600"><i class="ri-check-double-line"></i> Berhasil di-blast</span>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="flex flex-col items-center justify-center h-[300px] text-neutral-400">
                        <iconify-icon icon="line-md:email-opened-twotone" class="text-6xl mb-3"></iconify-icon>
                        <p class="text-sm">Pilih tipe pesan dan klik Kirim Blast.</p>
                    </div>
                @endif
            </div>

            {{-- FORM BLAST SIMPLE --}}
            <form action="{{ route('notifikasi.send') }}" method="POST" class="chat-message-box border-t p-6 bg-white">
                @csrf
                <div class="flex flex-col gap-4">
                    <div class="flex flex-wrap gap-4 items-center">
                        <select name="type" id="tipe_pesan" class="border-0 bg-neutral-100 rounded-lg text-sm px-4 py-2 focus:ring-2 focus:ring-primary-500">
                            <option value="tagihan">💰 Tagihan</option>
                            <option value="meteran">📸 Upload Meteran</option>
                            <option value="pengurasan">🚧 Pengurasan</option>
                            <option value="selesai">✅ Selesai</option>
                        </select>

                        {{-- Input Jam (Hanya muncul jika tipe 'pengurasan') --}}
                        <div id="jam_group" class="flex gap-2 items-center hidden">
                            <input type="time" name="jam_mulai" class="border rounded px-2 py-1 text-sm bg-neutral-50">
                            <span class="text-xs">s/d</span>
                            <input type="time" name="jam_selesai" class="border rounded px-2 py-1 text-sm bg-neutral-50">
                        </div>
                    </div>

                    <div class="flex items-center gap-4">
                        <button type="submit" 
                                onclick="return confirm('Apakah Anda yakin ingin mengirim pesan BLAST ke seluruh warga?')" 
                                class="px-4 h-[44px] shrink-0 flex justify-center items-center gap-2 rounded-lg bg-primary-600 text-white hover:bg-primary-700 transition-all shadow-md">
                            <iconify-icon icon="f7:paperplane"></iconify-icon>
                            <span class="text-sm font-semibold">Kirim Blast</span> 
                        </button>
                    </div>
                </div>
            </form>

        </div>
    </div>

</div>

{{-- SCRIPT SEDERHANA --}}
<script>
    document.getElementById('tipe_pesan').addEventListener('change', function() {
        var jamGroup = document.getElementById('jam_group');
        if (this.value === 'pengurasan') {
            jamGroup.classList.remove('hidden');
        } else {
            jamGroup.classList.add('hidden');
        }
    });
</script>

@endsection