@extends('layouts.app')

@section('title', 'User Manual')

@section('guest')
<div class="manual-site">
    @include('partials.public-site-nav', ['navClass' => 'site-nav manual-nav', 'menuId' => 'userManualPublicMenu'])

    <header class="manual-hero">
        <div class="container">
            <div class="row g-4 align-items-center">
                <div class="col-lg-7">
                    <span class="site-eyebrow">Software user manual</span>
                    <h1>How to set up, operate, and grow with NewKipp Microfinance Solution.</h1>
                    <p>This guide explains tenant setup, daily operations, member self-service, mobile app/PWA, data import, offline-online sync, merchant commissions, billing, reports, and support workflows.</p>
                    <div class="d-flex flex-wrap gap-2">
                        <a href="#quick-start" class="btn btn-primary btn-lg"><i class="bi bi-play-circle me-2"></i>Start guide</a>
                        <a href="{{ route('landing') }}" class="btn btn-outline-light btn-lg"><i class="bi bi-house me-2"></i>Back to website</a>
                    </div>
                </div>
                <div class="col-lg-5">
                    <div class="manual-summary-card">
                        <div><span>Users</span><strong>Tenants, staff, members, merchants</strong></div>
                        <div><span>Core modules</span><strong>Savings, loans, investments, accounting, billing</strong></div>
                        <div><span>Setup tools</span><strong>CSV import, role profiles, sync center, settings</strong></div>
                        <div><span>Mobile</span><strong>Installable PWA, later Play Store wrapper</strong></div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <main class="manual-main">
        <div class="container">
            <div class="row g-4">
                <aside class="col-lg-3">
                    <div class="manual-toc">
                        <strong>Manual sections</strong>
                        <a href="#quick-start">1. Quick start</a>
                        <a href="#portals">2. User portals</a>
                        <a href="#tenant-guide">3. Tenant operations</a>
                        <a href="#members">4. Members and KYC</a>
                        <a href="#products">5. Products</a>
                        <a href="#reports">6. Reports and accounting</a>
                        <a href="#data-import">7. Data import</a>
                        <a href="#sync-center">8. Sync center</a>
                        <a href="#mobile-app">9. Mobile app</a>
                        <a href="#merchants">10. Merchants</a>
                        <a href="#billing">11. Billing</a>
                        <a href="#troubleshooting">12. Help</a>
                    </div>
                </aside>

                <div class="col-lg-9">
                    <section id="quick-start" class="manual-card">
                        <span class="site-eyebrow dark">Quick start</span>
                        <h2>Recommended setup order</h2>
                        <div class="manual-steps">
                            <div><strong>1. Register or create tenant</strong><p>A company can register from the public website and starts with automatic approval and a 14-day trial.</p></div>
                            <div><strong>2. Set company profile</strong><p>Upload logo, choose currency, configure branding, branches, account number preferences, and notification settings.</p></div>
                            <div><strong>3. Add staff and role profiles</strong><p>Create custom role profiles before adding staff so every staff member has the correct access.</p></div>
                            <div><strong>4. Configure products</strong><p>Create savings, loan, and investment products before opening accounts or approving applications.</p></div>
                            <div><strong>5. Import existing records</strong><p>Use Data Import if the company already has members, savings, loans, or repayment history.</p></div>
                            <div><strong>6. Start daily operations</strong><p>Register members, verify KYC, open savings, create loans, record repayments, and review reports.</p></div>
                        </div>
                    </section>

                    <section id="portals" class="manual-card">
                        <span class="site-eyebrow dark">User portals</span>
                        <h2>Who uses what</h2>
                        <div class="manual-grid">
                            <div><i class="bi bi-building"></i><strong>Tenant Admin</strong><p>Runs one microfinance company, manages staff, members, products, transactions, gateways, and reports.</p></div>
                            <div><i class="bi bi-person-badge"></i><strong>Staff</strong><p>Managers, loan officers, accountants, and other custom profiles access only assigned permissions.</p></div>
                            <div><i class="bi bi-person"></i><strong>Member</strong><p>Members can view their profile, savings, investments, loans, schedules, repayments, and transactions.</p></div>
                            <div><i class="bi bi-megaphone"></i><strong>Merchant</strong><p>Merchants onboard or refer tenants and earn tracked subscription commission.</p></div>
                            <div><i class="bi bi-phone"></i><strong>Mobile App User</strong><p>Any portal can be opened from the installable mobile PWA after the site is hosted with HTTPS.</p></div>
                        </div>
                    </section>

                    <section id="tenant-guide" class="manual-card">
                        <span class="site-eyebrow dark">Tenant operations</span>
                        <h2>Company setup and daily work</h2>
                        <div class="manual-two-col">
                            <div>
                                <h3>Setup</h3>
                                <ul>
                                    <li>Go to Settings > Company Settings.</li>
                                    <li>Set company name, logo, color, phone, address, currency, and portal slug.</li>
                                    <li>Configure email, SMS, WhatsApp, and payment gateways per tenant.</li>
                                    <li>Add branches and staff.</li>
                                    <li>Create role profiles before assigning staff access.</li>
                                </ul>
                            </div>
                            <div>
                                <h3>Daily work</h3>
                                <ul>
                                    <li>Register members and assign account officers.</li>
                                    <li>Verify KYC and lock verified identity fields when approved.</li>
                                    <li>Open savings, target savings, thrift/Isusu, cooperative savings, or investment accounts.</li>
                                    <li>Create, approve, disburse, reschedule, and repay loans.</li>
                                    <li>Use reports to monitor due loans, overdue loans, savings, investments, and performance.</li>
                                </ul>
                            </div>
                        </div>
                    </section>

                    <section id="members" class="manual-card">
                        <span class="site-eyebrow dark">Members and KYC</span>
                        <h2>Managing members</h2>
                        <ul class="manual-list">
                            <li><strong>Member records:</strong> first name, middle name, last name, gender, date of birth, age, phone, address, branch, group, and account officer.</li>
                            <li><strong>Account number:</strong> every member receives a 10-digit account number unique within the tenant.</li>
                            <li><strong>KYC:</strong> BVN, NIN, ID upload, photo, address, guarantor details, and verification status are managed from the member profile.</li>
                            <li><strong>Access control:</strong> if a member is assigned to an account officer, that officer only accesses assigned members while admins can access all.</li>
                            <li><strong>Bulk assign:</strong> use bulk action tools to assign account officers, branches, groups, statuses, or remove assignments for many members at once.</li>
                            <li><strong>Member overview:</strong> open a member to view account overview, loans, savings, investments, transactions, and audit trail.</li>
                        </ul>
                    </section>

                    <section id="products" class="manual-card">
                        <span class="site-eyebrow dark">Products</span>
                        <h2>Savings, loans, and investments</h2>
                        <div class="manual-grid">
                            <div><i class="bi bi-wallet2"></i><strong>Savings products</strong><p>Configure regular, target, thrift/Isusu, and cooperative savings. Processing fee can be fixed, percentage, or contribution amount.</p></div>
                            <div><i class="bi bi-calendar-check"></i><strong>Savings schedules</strong><p>Opening a savings account can create planned contribution schedules, target amount, maturity date, saved amount, balance, and progress display.</p></div>
                            <div><i class="bi bi-cash-coin"></i><strong>Loan products</strong><p>Set prefix, min/max amount, period, interest type, custom interest option, penalty type, processing fee type, guarantor and collateral rules.</p></div>
                            <div><i class="bi bi-table"></i><strong>Repayment schedules</strong><p>Loans generate schedule rows with due date, principal, interest, fee, penalty, total due, paid amount, balance, and status.</p></div>
                            <div><i class="bi bi-piggy-bank"></i><strong>Investments</strong><p>Create investment products, open investment accounts, track expected returns, balances, maturity, and transactions.</p></div>
                            <div><i class="bi bi-lightning-charge"></i><strong>Bill payments</strong><p>Account Center supports bill payment workflows such as airtime, data, electricity, cable TV, and related transaction history.</p></div>
                        </div>
                    </section>

                    <section id="reports" class="manual-card">
                        <span class="site-eyebrow dark">Reports and accounting</span>
                        <h2>Reports you should check regularly</h2>
                        <ul class="manual-list">
                            <li><strong>Dashboard:</strong> due loans, overdue schedules, total members, savings, active loans, and repayment performance.</li>
                            <li><strong>Savings reports:</strong> deposits, withdrawals, balances, target savings, thrift/Isusu collections, and statements.</li>
                            <li><strong>Loan reports:</strong> applications, active loans, outstanding balances, due/overdue loans, defaulters, and non-performing loans.</li>
                            <li><strong>Investment reports:</strong> open investments, expected returns, maturity, returns paid, and balances.</li>
                            <li><strong>Repayment reports:</strong> partial payments, next payment amounts, overdue payments, and receipts.</li>
                            <li><strong>Accounting tabs:</strong> ledger, cashbook, trial balance, profit and loss, balance sheet, cashflow, journals, and expense report.</li>
                            <li><strong>Exports:</strong> use PDF exports where available for management, regulators, or board reporting.</li>
                        </ul>
                    </section>

                    <section id="data-import" class="manual-card">
                        <span class="site-eyebrow dark">Data import</span>
                        <h2>Importing an existing microfinance company</h2>
                        <p>Use Tenant Settings > Data Import when a company already has records in Excel, another system, or paper records that have been prepared as CSV.</p>
                        <div class="manual-steps compact">
                            <div><strong>1. Download templates</strong><p>Download the CSV template for each data type from Data Import.</p></div>
                            <div><strong>2. Import in order</strong><p>Recommended order: branches, members, savings accounts, loans, savings transactions, then loan payments.</p></div>
                            <div><strong>3. Use stable references</strong><p>Keep account numbers, loan numbers, transaction references, branch codes, and product names consistent to avoid duplicates.</p></div>
                            <div><strong>4. Review history</strong><p>After upload, check the import history table for successful rows and failed rows. Fix failed rows and upload again.</p></div>
                        </div>
                    </section>

                    <section id="sync-center" class="manual-card">
                        <span class="site-eyebrow dark">Sync center</span>
                        <h2>Offline to online syncing</h2>
                        <p>Use Tenant Settings > Sync Center when a branch or office runs the software offline on XAMPP but also needs to push data to the hosted online copy.</p>
                        <div class="manual-two-col">
                            <div>
                                <h3>Automatic push</h3>
                                <ul>
                                    <li>On the online copy, create an online receiver token.</li>
                                    <li>On the offline copy, save the online URL and token.</li>
                                    <li>Click Push to online now when internet is available.</li>
                                    <li>The online copy receives the package at `/sync/receive`.</li>
                                </ul>
                            </div>
                            <div>
                                <h3>Manual package</h3>
                                <ul>
                                    <li>On the offline copy, click Download sync package.</li>
                                    <li>On the online copy, upload the package in Sync Center.</li>
                                    <li>Review sync history for records imported and errors.</li>
                                    <li>Avoid editing the same records offline and online at the same time.</li>
                                </ul>
                            </div>
                        </div>
                    </section>

                    <section id="mobile-app" class="manual-card">
                        <span class="site-eyebrow dark">Mobile app</span>
                        <h2>Installing the PWA mobile version</h2>
                        <p>The install button is now visible in all major browsers. Supported browsers open the native prompt; Safari, Firefox, and limited browsers show manual instructions.</p>
                        <a href="{{ route('mobile-app') }}" class="btn btn-primary mb-3"><i class="bi bi-phone me-2"></i>Open mobile app guide</a>
                        <ul class="manual-list">
                            <li><strong>Requirement:</strong> the hosted domain should use HTTPS for proper app installation.</li>
                            <li><strong>Chrome, Edge, Brave, Opera:</strong> click Install app to open the native browser prompt.</li>
                            <li><strong>Android:</strong> open the website and choose Install app or Add to Home screen.</li>
                            <li><strong>iPhone/iPad Safari:</strong> tap Share, choose Add to Home Screen, then tap Add.</li>
                            <li><strong>Firefox:</strong> install support is limited, so use the browser menu when Add to Home Screen is available.</li>
                            <li><strong>Members:</strong> members can use the mobile app for profile, savings, investments, loans, repayment schedules, and transactions.</li>
                            <li><strong>Tenant staff:</strong> staff can open dashboards, members, loans, savings, reports, billing, notifications, and settings from mobile navigation.</li>
                            <li><strong>Offline screen:</strong> if internet drops, the app shows a friendly offline page. Live transactions still require reconnection.</li>
                            <li><strong>Future native app:</strong> the PWA can later be wrapped with Capacitor for Google Play Store distribution.</li>
                        </ul>
                    </section>

                    <section id="merchants" class="manual-card">
                        <span class="site-eyebrow dark">Merchants</span>
                        <h2>Onboarding and referral commission</h2>
                        <ul class="manual-list">
                            <li><strong>Merchant self signup:</strong> merchants can register themselves from the merchant landing page.</li>
                            <li><strong>Merchant types:</strong> onboarding, referral, or hybrid merchants can be created.</li>
                            <li><strong>Personal links:</strong> active merchants get a landing page, onboarding link, and referral link depending on merchant type.</li>
                            <li><strong>Tenant assignment:</strong> the NewKipp team can assign existing tenants to a merchant as assigned onboarding or referral work.</li>
                            <li><strong>Commission:</strong> self-recruited tenants start at 30% and grow by level: Builder 31%, Growth 32%, Leader 33% at 35+ companies, and Elite 35%. Assigned onboarding earns 15%, while referrals earn 10%.</li>
                        </ul>
                        <a href="{{ route('merchants.landing') }}" class="btn btn-outline-primary">Open merchant program</a>
                    </section>

                    <section id="billing" class="manual-card">
                        <span class="site-eyebrow dark">Billing and subscriptions</span>
                        <h2>SaaS billing workflow</h2>
                        <ul class="manual-list">
                            <li>New tenants start with a 14-day free trial and visible countdown.</li>
                            <li>Tenants can pay monthly or yearly from their billing page.</li>
                            <li>Manual payments appear after payment review and approval.</li>
                            <li>Plans control staff, member, branch, and storage limits.</li>
                            <li>Expired tenants receive reminders according to notification settings.</li>
                            <li>Automatic renewal depends on configured gateway/mandate support.</li>
                        </ul>
                    </section>

                    <section id="troubleshooting" class="manual-card">
                        <span class="site-eyebrow dark">Help and troubleshooting</span>
                        <h2>Common issues</h2>
                        <div class="accordion manual-faq" id="manualFaq">
                            @foreach([
                                ['A staff member cannot see a menu', 'Check the staff role profile and make sure the required permission is enabled. Also confirm the staff role is allowed for that route.'],
                                ['A CSV import has failed rows', 'Open the import history, read the row errors, fix required fields or references, then upload the corrected CSV again.'],
                                ['Offline push is not working', 'Confirm the online URL is correct, the token was copied from the online receiver, the hosted site has HTTPS, and the offline machine has internet access. If not, use manual package export/import.'],
                                ['A member cannot edit KYC fields', 'After verification and approval, protected KYC fields are locked to preserve audit integrity. Admin review is required for changes.'],
                                ['The mobile app install button does not show', 'Use a supported browser, host with HTTPS, and make sure the manifest and service worker are accessible. Browser menus may still show Add to Home screen.'],
                                ['Loan schedule is wrong', 'Check loan product period, first repayment date, interest type, processing fee, penalty settings, and whether the loan was rescheduled.'],
                            ] as [$question, $answer])
                                <div class="accordion-item">
                                    <h3 class="accordion-header">
                                        <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#manualFaq{{ $loop->iteration }}">
                                            {{ $question }}
                                        </button>
                                    </h3>
                                    <div id="manualFaq{{ $loop->iteration }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}" data-bs-parent="#manualFaq">
                                        <div class="accordion-body">{{ $answer }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </section>
                </div>
            </div>
        </div>
    </main>

    <footer class="site-footer">
        <div class="container d-flex flex-column flex-md-row justify-content-between gap-3 py-4">
            <div class="site-brand"><span>NK</span><strong>NewKipp Microfinance Solution Manual</strong></div>
            <div class="d-flex flex-wrap gap-3 small">
                <a href="{{ route('landing') }}">Website</a>
                <a href="{{ route('tenant.register') }}">Start trial</a>
                <a href="{{ route('merchants.landing') }}">Merchants</a>
                <a href="{{ route('login') }}">Sign in</a>
            </div>
        </div>
    </footer>
</div>
@endsection
