<?php
$billingTopbarOrganizationName = isset($billingTopbarOrganizationName) ? (string) $billingTopbarOrganizationName : (string) ($organizationName ?? 'bala');
$billingTopbarUserLabel = isset($billingTopbarUserLabel) ? (string) $billingTopbarUserLabel : (string) ($userLabel ?? 'vigneshwarnvignesh11@gmail.com');
$billingTopbarInitial = strtoupper(substr($billingTopbarOrganizationName !== '' ? $billingTopbarOrganizationName : $billingTopbarUserLabel, 0, 1));
$billingTopbarReceivable = isset($receivable) ? (float) $receivable : 0.0;
$billingTopbarRevenue = isset($revenue) ? (float) $revenue : 0.0;
$billingTopbarInvoices = isset($stats['invoices']) ? (int) $stats['invoices'] : 0;
$billingTopbarCustomers = isset($stats['customers']) ? (int) $stats['customers'] : 0;
$billingTopbarUserId = '60070490608';
$billingTopbarOrganizationId = '60070490261';
$billingTopbarSearchPlaceholder = isset($billingTopbarSearchPlaceholder) ? (string) $billingTopbarSearchPlaceholder : 'Search in Customers ( / )';
$billingTopbarSearchAriaLabel = isset($billingTopbarSearchAriaLabel) ? (string) $billingTopbarSearchAriaLabel : $billingTopbarSearchPlaceholder;
?>
<header class="billing-topbar-shell">
    <div class="billing-verify-strip">
        <span>Verify your Zoho account to start invoicing your customers.</span>
        <button type="button">VERIFY ACCOUNT</button>
    </div>

    <div class="billing-topbar">
        <div class="billing-topbar-search">
            <button class="billing-refresh-btn" type="button" aria-label="Refresh">
                <i class="fa-solid fa-arrow-rotate-right"></i>
            </button>
            <label class="billing-search-shell">
                <span class="billing-search-prelude"><i class="fa-solid fa-magnifying-glass"></i></span>
                <input type="search" placeholder="<?php echo billing_escape($billingTopbarSearchPlaceholder); ?>" aria-label="<?php echo billing_escape($billingTopbarSearchAriaLabel); ?>">
            </label>
        </div>

        <div class="billing-topbar-actions">
            <span class="billing-trial-copy">Trial expires in 14 days.</span>
            <a class="billing-subscribe-link" href="#">Subscribe</a>
            <button class="billing-org-trigger" type="button" data-drawer-target="orgDrawer" aria-controls="orgDrawer" aria-expanded="false">
                <span><?php echo billing_escape($billingTopbarOrganizationName); ?></span>
                <i class="fa-solid fa-angle-down"></i>
            </button>
            <button class="billing-plus-btn" type="button" data-drawer-target="createDrawer" aria-controls="createDrawer" aria-expanded="false">
                <i class="fa-solid fa-plus"></i>
            </button>
            <button class="billing-topbar-plain" type="button" aria-label="Users">
                <i class="fa-solid fa-user-group"></i>
            </button>
            <button class="billing-topbar-plain" type="button" data-drawer-target="notifDrawer" aria-controls="notifDrawer" aria-expanded="false">
                <i class="fa-regular fa-bell"></i>
            </button>
            <a class="billing-topbar-plain" href="settings.php" aria-label="Settings" data-tour="settings">
                <i class="fa-solid fa-gear"></i>
            </a>
            <button class="billing-avatar-trigger" type="button" data-drawer-target="profileDrawer" aria-controls="profileDrawer" aria-expanded="false">
                <span class="billing-avatar-ring"><?php echo billing_escape($billingTopbarInitial); ?></span>
            </button>
            <button class="billing-topbar-plain" type="button" data-drawer-target="appsDrawer" aria-controls="appsDrawer" aria-expanded="false" data-tour="help">
                <i class="fa-solid fa-grip"></i>
            </button>
        </div>
    </div>
</header>

<div class="billing-drawer-overlay" data-drawer-overlay hidden></div>

<aside class="billing-org-drawer" id="orgDrawer" aria-hidden="true">
    <div class="billing-side-panel billing-side-panel--org">
        <div class="billing-side-panel-head">
            <h2>Organizations</h2>
            <div class="billing-side-panel-head-actions">
                <a href="settings.php"><i class="fa-solid fa-gear"></i> Manage</a>
                <button class="billing-close-x" type="button" data-drawer-close aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
            </div>
        </div>
        <div class="billing-side-panel-section-label">My Organizations</div>
        <div class="billing-org-list-card">
            <div class="billing-org-list-icon"><i class="fa-regular fa-building"></i></div>
            <div class="billing-org-list-copy">
                <strong><?php echo billing_escape($billingTopbarOrganizationName); ?></strong>
                <span>Organization ID: <?php echo billing_escape($billingTopbarOrganizationId); ?> • Trial</span>
            </div>
            <div class="billing-org-list-check"><i class="fa-solid fa-circle-check"></i></div>
        </div>
    </div>
</aside>

<aside class="billing-side-drawer" id="createDrawer" aria-hidden="true">
    <div class="billing-side-panel billing-side-panel--popover">
        <div class="billing-create-grid">
            <div class="billing-create-col">
                <div class="billing-create-heading"><i class="fa-regular fa-object-group"></i><span>General</span></div>
                <a href="#"><i class="fa-solid fa-circle-plus"></i>Add User</a>
                <a href="#"><i class="fa-solid fa-circle-plus"></i>Log Time</a>
                <a href="#"><i class="fa-solid fa-circle-plus"></i>Weekly Log</a>
            </div>
            <div class="billing-create-col">
                <div class="billing-create-heading"><i class="fa-solid fa-box-open"></i><span>Product Catalog</span></div>
                <a href="item_new.php"><i class="fa-solid fa-circle-plus"></i>Product</a>
                <a href="plan_new.php"><i class="fa-solid fa-circle-plus"></i>Plans</a>
                <a href="addon_new.php"><i class="fa-solid fa-circle-plus"></i>Addons</a>
                <a href="coupons.php"><i class="fa-solid fa-circle-plus"></i>Coupons</a>
                <a href="item_new.php"><i class="fa-solid fa-circle-plus"></i>Item</a>
            </div>
            <div class="billing-create-col">
                <div class="billing-create-heading"><i class="fa-solid fa-cart-shopping"></i><span>Sales</span></div>
                <a href="customer_new.php"><i class="fa-solid fa-circle-plus"></i>Customer</a>
                <a href="quote_new.php"><i class="fa-solid fa-circle-plus"></i>Quote</a>
                <a href="delivery_challan_new.php"><i class="fa-solid fa-circle-plus"></i>Delivery Challan</a>
                <a href="subscription_new.php"><i class="fa-solid fa-circle-plus"></i>Subscription</a>
                <a href="invoice_new.php"><i class="fa-solid fa-circle-plus"></i>Invoice</a>
                <a href="payments_received_import.php"><i class="fa-solid fa-circle-plus"></i>Customer Payment</a>
                <a href="credit_note_new.php"><i class="fa-solid fa-circle-plus"></i>Credit Note</a>
            </div>
            <div class="billing-create-col">
                <div class="billing-create-heading"><i class="fa-regular fa-file-lines"></i><span>Expenses</span></div>
                <a href="expense_new.php"><i class="fa-solid fa-circle-plus"></i>Expenses</a>
                <a href="recurring_expenses.php"><i class="fa-solid fa-circle-plus"></i>Recurring Expense</a>
            </div>
        </div>
    </div>
</aside>

<aside class="billing-side-drawer" id="notifDrawer" aria-hidden="true">
    <div class="billing-side-panel">
        <div class="billing-side-panel-head billing-side-panel-head--notif">
            <h2>Notifications</h2>
            <div class="billing-side-panel-head-actions">
                <button class="billing-icon-ghost" type="button" title="Enable Desktop Notifications"><i class="fa-regular fa-computer"></i></button>
                <button class="billing-icon-ghost" type="button" title="Notification Settings"><i class="fa-solid fa-gear"></i></button>
                <button class="billing-close-x" type="button" data-drawer-close aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
            </div>
        </div>
        <div class="billing-notif-tabs">
            <button class="is-active" type="button">All</button>
            <button type="button">Mentions</button>
            <button class="billing-notif-filter" type="button"><span>All</span><i class="fa-solid fa-angle-down"></i></button>
        </div>
        <div class="billing-notif-body">
            <div class="billing-notif-illustration"><i class="fa-solid fa-inbox"></i></div>
            <p>Uhh... There are no notifications at the moment.</p>
        </div>
    </div>
</aside>

<aside class="billing-side-drawer" id="appsDrawer" aria-hidden="true">
    <div class="billing-side-panel">
        <div class="billing-side-panel-head">
            <h2>All Zoho Apps</h2>
            <div class="billing-side-panel-head-actions">
                <button class="billing-icon-ghost" type="button" aria-label="Search apps"><i class="fa-solid fa-magnifying-glass"></i></button>
                <button class="billing-close-x" type="button" data-drawer-close aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
            </div>
        </div>

        <div class="billing-app-drawer-section">
            <div class="billing-app-drawer-title">Finance Apps</div>
            <div class="billing-app-list">
                <a href="#" class="billing-app-list-item"><span class="billing-app-logo is-blue">B</span><span><strong>Zoho Books</strong><small>Online Accounting Software</small></span></a>
                <a href="#" class="billing-app-list-item"><span class="billing-app-logo is-red">E</span><span><strong>Zoho Expense</strong><small>Expense Reporting Software</small></span></a>
                <a href="#" class="billing-app-list-item"><span class="billing-app-logo is-red">I</span><span><strong>Zoho Inventory</strong><small>Order &amp; Inventory Management Software</small></span></a>
                <a href="#" class="billing-app-list-item"><span class="billing-app-logo is-blue">C</span><span><strong>Zoho Checkout</strong><small>One-time and recurring payments software.</small></span></a>
                <a href="#" class="billing-app-list-item"><span class="billing-app-logo is-green">Co</span><span><strong>Zoho Commerce</strong><small>Ecommerce software.</small></span></a>
                <a href="#" class="billing-app-list-item"><span class="billing-app-logo is-amber">P</span><span><strong>Zoho Payroll</strong><small>Simplified payroll management.</small></span></a>
            </div>
        </div>

        <div class="billing-app-drawer-section">
            <div class="billing-app-drawer-title">Other Apps <i class="fa-solid fa-angle-down"></i></div>

            <div class="billing-app-category">
                <h3>Email and Collaboration</h3>
                <div class="billing-app-icon-grid">
                    <span>Notebook</span><span>Meeting</span><span>Projects</span><span>Sign</span>
                    <span>Sprints</span><span>TeamInbox</span><span>Mail</span><span>Cliq</span>
                    <span>Sheet</span><span>Show</span><span>Writer</span><span>Connect</span>
                    <span>Vault</span><span>WorkDrive</span><span>Learn</span>
                </div>
            </div>

            <div class="billing-app-category">
                <h3>Marketing</h3>
                <div class="billing-app-icon-grid">
                    <span>Sites</span><span>Campaigns</span><span>Survey</span><span>Backstage</span>
                    <span>Forms</span><span>MarketingHub</span><span>PageSense</span><span>Social</span>
                </div>
            </div>

            <div class="billing-app-category">
                <h3>Help Desk and Customer Support</h3>
                <div class="billing-app-icon-grid">
                    <span>Desk</span><span>Lens</span><span>Assist</span>
                </div>
            </div>

            <div class="billing-app-category">
                <h3>Human Resources</h3>
                <div class="billing-app-icon-grid">
                    <span>People</span><span>Recruit</span>
                </div>
            </div>

            <div class="billing-app-category">
                <h3>Business Process</h3>
                <div class="billing-app-icon-grid">
                    <span>Analytics</span><span>Creator</span><span>Flow</span><span>Qntrl</span>
                    <span>DataPrep</span><span>RPA</span>
                </div>
            </div>
        </div>
    </div>
</aside>

<aside class="billing-side-drawer" id="profileDrawer" aria-hidden="true">
    <div class="billing-side-panel">
        <div class="billing-profile-head">
            <div class="billing-profile-head-main">
                <div class="billing-profile-photo"><?php echo billing_escape($billingTopbarInitial); ?></div>
                <div>
                    <div class="billing-profile-person-name"><?php echo billing_escape(str_replace('@gmail.com', '', $billingTopbarUserLabel)); ?></div>
                    <div class="billing-profile-person-mail"><?php echo billing_escape($billingTopbarUserLabel); ?></div>
                </div>
            </div>
            <button class="billing-close-x" type="button" data-drawer-close aria-label="Close"><i class="fa-solid fa-xmark"></i></button>
        </div>

        <div class="billing-profile-ids">User ID: <?php echo billing_escape($billingTopbarUserId); ?> • Organization ID: <?php echo billing_escape($billingTopbarOrganizationId); ?></div>

        <div class="billing-profile-links-row">
            <a href="#">My Account</a>
            <a href="logout.php" class="is-danger"><i class="fa-solid fa-arrow-right-from-bracket"></i> Sign Out</a>
        </div>

        <div class="billing-profile-trial">Trial expires in 14 days. <a href="#">Subscribe</a></div>

        <div class="billing-profile-cards-grid">
            <a href="#" class="billing-mini-card"><strong>Help Documents</strong></a>
            <a href="#" class="billing-mini-card"><strong>FAQs</strong></a>
            <a href="#" class="billing-mini-card"><strong>Forum</strong></a>
            <a href="#" class="billing-mini-card"><strong>Video Tutorials</strong></a>
            <a href="#" class="billing-mini-card"><strong>Explore Features</strong></a>
            <a href="#" class="billing-mini-card"><strong>API Documents</strong></a>
        </div>

        <a href="#" class="billing-accessibility-row">Accessibility Preferences <i class="fa-solid fa-angle-right"></i></a>

        <div class="billing-profile-help-block">
            <h3>Need Assistance?</h3>
            <div class="billing-profile-help-grid">
                <a href="#" class="billing-tip-card">Essential guides for your business</a>
                <a href="#" class="billing-tip-card">Navigate faster with keyboard shortcuts</a>
                <a href="#" class="billing-tip-card">Tips And Tricks</a>
            </div>
        </div>

        <div class="billing-mobile-app-card">
            <div class="billing-qr-box">QR</div>
            <div>
                <strong>Download the mobile app</strong>
                <p>Manage your business operations on the go</p>
            </div>
        </div>
    </div>
</aside>
