@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