202 lines
7.2 KiB
PHP
202 lines
7.2 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('content')
|
|
<main class="main-content">
|
|
<header class="header">
|
|
<div class="user-greeting">
|
|
<h3>Selamat datang {{ $nama_user }}</h3>
|
|
</div>
|
|
<div class="header-icons">
|
|
{{-- ICON LONCENG --}}
|
|
<div class="notification-wrapper" onclick="toggleNotifModal()" style="position: relative; cursor: pointer;">
|
|
<i class="fas fa-bell"></i>
|
|
{{-- PAKAI VARIABEL DARI CONTROLLER KAMU --}}
|
|
@if($unreadCount > 0)
|
|
<span class="red-dot"></span>
|
|
@endif
|
|
</div>
|
|
<div class="user-initials">{{ $initial_user }}</div>
|
|
</div>
|
|
</header>
|
|
|
|
{{-- MODAL NOTIFIKASI (STYLE VISTA) --}}
|
|
<div id="notification-modal" class="notif-modal">
|
|
<div class="notif-header">
|
|
<button onclick="toggleNotifModal()" class="back-btn"><i class="fas fa-arrow-left"></i></button>
|
|
<h4>Notifications</h4>
|
|
<i class="fas fa-cog"></i>
|
|
</div>
|
|
|
|
<div class="notif-content">
|
|
<p class="section-label">Previously</p>
|
|
|
|
{{-- PAKAI VARIABEL DARI CONTROLLER KAMU --}}
|
|
@forelse($notifications as $notif)
|
|
<div class="notif-card">
|
|
<div class="notif-avatar">V.</div>
|
|
<div class="notif-body">
|
|
<div class="notif-title-row">
|
|
<h5>{{ $notif->data['title'] ?? 'Update Foto Meteran' }}</h5>
|
|
<span class="notif-date">{{ $notif->created_at->diffForHumans() }}</span>
|
|
|
|
{{-- TITIK BIRU JIKA BELUM DIBACA --}}
|
|
@if(is_null($notif->read_at))
|
|
<span class="blue-unread-dot"></span>
|
|
@endif
|
|
</div>
|
|
<p>{{ $notif->data['message'] ?? 'Status foto meteran Anda telah diperbarui.' }}</p>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div style="text-align: center; margin-top: 50px; color: #999;">
|
|
<p>Tidak ada notifikasi baru.</p>
|
|
</div>
|
|
@endforelse
|
|
|
|
<div class="notif-footer">
|
|
<p>Missing notifications?</p>
|
|
<a href="#">Go to historical notifications.</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- KODE TAGIHAN --}}
|
|
@if($tagihan)
|
|
<section class="bill-card">
|
|
<div class="bill-header">
|
|
<i class="fas fa-file-alt"></i>
|
|
<h4>Tagihan Bulan Ini</h4>
|
|
</div>
|
|
<div class="bill-amount">
|
|
<h2>Rp {{ $tagihan['total'] }}</h2>
|
|
<p>Jatuh Tempo: {{ $tagihan['jatuh_tempo'] }}</p>
|
|
</div>
|
|
<button class="bill-card-btn" onclick="window.location.href='{{ route('invoices.show', $tagihan['id']) }}'">
|
|
Bayar Sekarang
|
|
</button>
|
|
</section>
|
|
@else
|
|
<div class="empty-state-card">
|
|
<div class="empty-state-icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
|
|
</svg>
|
|
</div>
|
|
<h4>Semua Tagihan Lunas!</h4>
|
|
<p>Anda tidak memiliki tagihan aktif untuk bulan ini.</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- KODE BERITA --}}
|
|
<section class="info-section">
|
|
<h4>Berita & Pengumuman</h4>
|
|
<div class="news-scroll">
|
|
@forelse($news as $item)
|
|
<div class="announcement-card" onclick="window.location.href='{{ route('news.show', $item->id) }}'" style="cursor: pointer;">
|
|
@if($item->image)
|
|
<img src="{{ rtrim(config('app.admin_url'), '/') . '/storage/' . $item->image }}" alt="{{ $item->title }}">
|
|
@else
|
|
<img src="https://via.placeholder.com/400x200?text=No+Image" alt="No Image">
|
|
@endif
|
|
<h5>{{ Str::limit($item->title, 35, '...') }}</h5>
|
|
<p>{{ Str::limit($item->content, 40, '...') }}</p>
|
|
</div>
|
|
@empty
|
|
<p>Belum ada berita terbaru.</p>
|
|
@endforelse
|
|
</div>
|
|
</section>
|
|
|
|
{{-- AKSES CEPAT --}}
|
|
<section class="info-section">
|
|
<h4>Akses Cepat</h4>
|
|
<div class="scroll-container">
|
|
<a href="{{ route('invoices.index') }}" class="access-card" style="text-decoration: none; color: inherit;">
|
|
<i class="fas fa-receipt"></i><span>Cek Tagihan</span></a>
|
|
<a href="{{ route('meter.create') }}" class="access-card" style="text-decoration: none; color: inherit;">
|
|
<i class="fas fa-camera"></i><span>Foto Meteran</span></a>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<style>
|
|
/* CSS UNTUK TITIK MERAH DI ICON */
|
|
.red-dot {
|
|
position: absolute;
|
|
top: -2px;
|
|
right: -2px;
|
|
height: 10px;
|
|
width: 10px;
|
|
background-color: #ff3b30;
|
|
border-radius: 50%;
|
|
border: 2px solid white;
|
|
}
|
|
|
|
/* CSS UNTUK MODAL NOTIFIKASI */
|
|
.notif-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
background: white;
|
|
z-index: 9999;
|
|
overflow-y: auto;
|
|
}
|
|
.notif-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.notif-header h4 { margin: 0; font-size: 18px; font-weight: bold; }
|
|
.back-btn { background: none; border: none; font-size: 20px; cursor: pointer; }
|
|
|
|
.notif-content { padding: 20px; }
|
|
.section-label { color: #888; font-size: 14px; margin-bottom: 15px; }
|
|
|
|
.notif-card {
|
|
display: flex;
|
|
gap: 15px;
|
|
padding: 15px;
|
|
background: #f9f9f9;
|
|
border-radius: 15px;
|
|
margin-bottom: 15px;
|
|
position: relative;
|
|
}
|
|
.notif-avatar {
|
|
width: 45px; height: 45px;
|
|
background: #fbcfe8; /* Pink */
|
|
color: #db2777;
|
|
border-radius: 50%;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-weight: bold; font-size: 18px;
|
|
}
|
|
.notif-body { flex: 1; }
|
|
.notif-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
|
|
.notif-title-row h5 { margin: 0; font-size: 14px; font-weight: bold; color: #333; }
|
|
.notif-date { font-size: 11px; color: #999; }
|
|
.notif-body p { margin: 0; font-size: 12px; color: #666; line-height: 1.4; }
|
|
|
|
.blue-unread-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: #007aff;
|
|
border-radius: 50%;
|
|
margin-left: 8px;
|
|
}
|
|
|
|
.notif-footer { text-align: center; margin-top: 30px; font-size: 13px; color: #666; }
|
|
.notif-footer a { color: #007aff; text-decoration: none; font-weight: bold; }
|
|
</style>
|
|
|
|
<script>
|
|
function toggleNotifModal() {
|
|
const modal = document.getElementById('notification-modal');
|
|
if (modal.style.display === 'block') {
|
|
modal.style.display = 'none';
|
|
} else {
|
|
modal.style.display = 'block';
|
|
}
|
|
}
|
|
</script>
|
|
@endsection |