@extends('layouts.guest')

@section('title', 'MyAnsuran')

@section('content')
    <section class="hero-surface py-5">
        <div class="container py-lg-4">
            <div class="row align-items-center g-5">
                <div class="col-lg-7">
                    <div class="brand-pill mb-4">
                        <i class="bi bi-bank2 fs-4"></i>
                        <span>Demo KIK MBIP | Portal Bayaran Ansuran Cukai Harta</span>
                    </div>
                    <h1 class="display-5 fw-bold mb-3">MyAnsuran memudahkan permohonan bayaran cukai harta secara ansuran.</h1>
                    <p class="lead text-white-50 mb-4">Pengguna awam boleh semak akaun tunggakan, memohon tempoh ansuran 2 hingga 6 bulan, dan membuat bayaran dummy JomPAY selepas jadual ansuran manual disahkan oleh staff.</p>
                    <div class="d-flex flex-wrap gap-3">
                        <a href="{{ route('register') }}" class="btn btn-light btn-lg px-4">Daftar Pengguna Awam</a>
                        <a href="{{ route('login') }}" class="btn btn-outline-light btn-lg px-4">Log Masuk</a>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="card feature-card p-4">
                        <div class="row g-3">
                            <div class="col-12">
                                <div class="stat-card p-3">
                                    <div class="mini-label">Jumlah Permohonan Demo</div>
                                    <div class="display-6 fw-bold">{{ $stats['applications'] }}</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="stat-card p-3">
                                    <div class="mini-label">Data Harta</div>
                                    <div class="h2 fw-bold mb-0">{{ $stats['property_accounts'] }}</div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="stat-card p-3">
                                    <div class="mini-label">Akaun Aktif</div>
                                    <div class="h2 fw-bold mb-0">{{ $stats['active_cases'] }}</div>
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="alert alert-primary mb-0">
                                    <strong>Biller Code JomPAY:</strong> 37317
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="container py-5">
        <div class="row g-4">
            <div class="col-lg-4">
                <div class="card feature-card h-100 p-4">
                    <div class="stat-icon mb-3"><i class="bi bi-signpost-split-fill"></i></div>
                    <h3 class="h5 fw-bold">Langkah Proses Ringkas</h3>
                    <ol class="mb-0 ps-3">
                        <li>Daftar dan lengkapkan profil.</li>
                        <li>Masukkan No_Akaun_Tunggakan.</li>
                        <li>Pilih tempoh ansuran 2 hingga 6 bulan.</li>
                        <li>Staff semak dan masukkan amaun ansuran manual.</li>
                        <li>Buat bayaran dummy JomPAY.</li>
                    </ol>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card feature-card h-100 p-4">
                    <div class="stat-icon mb-3"><i class="bi bi-cash-stack"></i></div>
                    <h3 class="h5 fw-bold">Panduan Bayaran Pertama</h3>
                    <table class="table mb-0">
                        <tbody>
                            <tr><th>Kediaman</th><td>Minimum 30%</td></tr>
                            <tr><th>Industri</th><td>Minimum 50%</td></tr>
                            <tr><th>Perdagangan</th><td>Minimum 50%</td></tr>
                        </tbody>
                    </table>
                    <p class="text-muted small mt-3 mb-0">Panduan ini hanya untuk rujukan. Amaun ansuran sebenar dimasukkan secara manual oleh staff.</p>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="card feature-card h-100 p-4">
                    <div class="stat-icon mb-3"><i class="bi bi-shield-check"></i></div>
                    <h3 class="h5 fw-bold">Kelebihan Sistem</h3>
                    <ul class="mb-0 ps-3">
                        <li>Dashboard berasingan untuk Admin, Staff dan Pengguna Awam.</li>
                        <li>Modul import Excel data akaun tunggakan.</li>
                        <li>Rekod notifikasi, email dummy, laporan dan audit trail.</li>
                        <li>Print borang rasmi termasuk ulasan staff.</li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
@endsection