140 lines
7.1 KiB
PHP
140 lines
7.1 KiB
PHP
@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 |