@extends('webview.saku.main')

@push('style')
    {{-- Pastikan icon library dimuat, jika di main.blade.php sudah ada, baris ini bisa dihapus --}}
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">

    <style>
        /* Styling khusus untuk Empty State */
        .empty-state-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 60vh;
            /* Agar posisi di tengah layar HP */
            padding: 30px;
            text-align: center;
        }

        .icon-wrapper {
            width: 80px;
            height: 80px;
            background-color: #FFF9E6;
            /* Warna cream background icon */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }

        .icon-wrapper i {
            font-size: 32px;
            color: #004B87;
            /* Warna emas */
        }

        .empty-title {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            font-size: 18px;
            color: #333;
            margin-bottom: 10px;
        }

        .empty-message {
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            color: #999;
            line-height: 1.5;
            max-width: 80%;
            margin-bottom: 30px;
        }

        .btn-back-home {
            padding: 12px 24px;
            background-color: #004B87;
            color: white;
            border-radius: 8px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            transition: background 0.3s;
            border: none;
            display: inline-block;
        }

        .btn-back-home:hover {
            background-color: #b08930;
        }

        /* Animasi halus untuk icon */
        @keyframes pulse {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(199, 157, 61, 0.7);
            }

            70% {
                transform: scale(1);
                box-shadow: 0 0 0 10px rgba(199, 157, 61, 0);
            }

            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(199, 157, 61, 0);
            }
        }
    </style>
@endpush

@section('content')
    {{-- Header Sederhana (Opsional) --}}
    <div style="padding: 15px; border-bottom: 1px solid #f0f0f0;">
        <h5 style="margin:0; font-weight:700; font-size:16px;">Pemberitahuan</h5>
    </div>

    <div class="card" style="border: none; box-shadow: none;">
        <div class="empty-state-container">
            <div class="icon-wrapper">
                <i class="simple-icon-bell"></i>
            </div>

            <h6 class="empty-title">Fitur Segera Hadir</h6>

            <p class="empty-message">
                Saat ini fitur pemberitahuan sedang dalam tahap pengembangan. Nantikan informasi terbaru di update
                selanjutnya.
            </p>

            <a href="{{ route('saku-mobile.page.home') }}" class="btn-back-home">
                Kembali ke Beranda
            </a>
        </div>
    </div>
@endsection

@push('script')
    <script type="text/javascript">
        $(window).on("beforeunload", function() {
            $(window).scrollTop(0);
        });

        $(document).ready(function() {
            $(window).scrollTop(0);
        });
    </script>
@endpush