{include file="sections/header.tpl"}

<form method="post" role="form" action="{Text::url('settings/notifications-post')}">
    <input type="hidden" name="csrf_token" value="{$csrf_token}">
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm rounded-3">
                <div class="card-header bg-primary bg-gradient text-white py-3 px-4">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                        <div class="d-flex align-items-center">
                            <div class="rounded-circle bg-white bg-opacity-25 d-flex align-items-center justify-content-center me-3" style="width: 45px; height: 45px;">
                                <i class="isax isax-notification-bing fs-4"></i>
                            </div>
                            <div>
                                <h5 class="mb-0 fw-semibold">{Lang::T('User Notification')}</h5>
                                <small class="opacity-75">Configure notification templates</small>
                            </div>
                        </div>
                        <button class="btn btn-light btn-sm px-4" title="save" type="submit">
                            <i class="isax isax-document-upload me-2"></i>
                            Save Changes
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="accordion accordion-flush" id="notificationAccordion">
                    <div class="accordion accordion-flush" id="notificationAccordion">
                        
                        <!-- Expired Notification -->
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExpired">
                                    <div class="d-flex align-items-center w-100">
                                        <div class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                            <i class="isax isax-danger text-danger"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{Lang::T('Expired Notification Message')}</div>
                                            <small class="text-muted">Message sent when subscription expires</small>
                                        </div>
                                    </div>
                                </button>
                            </h2>
                            <div id="collapseExpired" class="accordion-collapse collapse" data-bs-parent="#notificationAccordion">
                                <div class="accordion-body p-4 bg-light">
                                    <div class="row g-4">
                                        <div class="col-lg-8">
                                            <label class="form-label fw-semibold mb-2">Message Template</label>
                                            <textarea class="form-control" id="expired" name="expired"
                                                placeholder="{Lang::T('Hello')} [[name]], {Lang::T('your internet package')} [[package]] {Lang::T('has been expired')}"
                                                rows="15">{if $_json['expired']!=''}{Lang::htmlspecialchars($_json['expired'])}{else}{Lang::T('Hello')} [[name]], {Lang::T('your internet package')} [[package]] {Lang::T('has been expired')}.{/if}</textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold mb-3">
                                                <i class="isax isax-code-circle me-1"></i>
                                                Available Variables
                                            </label>
                                            <div class="d-flex flex-column gap-2">
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[name]]</code>
                                                    <small class="text-muted ms-2">Customer Name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[username]]</code>
                                                    <small class="text-muted ms-2">Username</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[package]]</code>
                                                    <small class="text-muted ms-2">Package name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[price]]</code>
                                                    <small class="text-muted ms-2">Package price</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[bills]]</code>
                                                    <small class="text-muted ms-2">Additional bills</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[payment_link]]</code>
                                                    <small class="text-muted ms-2">Payment link</small>
                                                </div>
                                            </div>
                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reminder 7 Days -->
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseReminder7">
                                    <div class="d-flex align-items-center w-100">
                                        <div class="rounded-circle bg-warning bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                            <i class="isax isax-timer-start text-warning"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{Lang::T('Reminder 7 days')}</div>
                                            <small class="text-muted">Sent 7 days before expiration</small>
                                        </div>
                                    </div>
                                </button>
                            </h2>
                            <div id="collapseReminder7" class="accordion-collapse collapse" data-bs-parent="#notificationAccordion">
                                <div class="accordion-body p-4 bg-light">
                                    <div class="row g-4">
                                        <div class="col-lg-8">
                                            <label class="form-label fw-semibold mb-2">Message Template</label>
                                            <textarea class="form-control" id="reminder_7_day" name="reminder_7_day" rows="15">{Lang::htmlspecialchars($_json['reminder_7_day'])}</textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold mb-3">
                                                <i class="isax isax-code-circle me-1"></i>
                                                Available Variables
                                            </label>
                                            <div class="d-flex flex-column gap-2">
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[name]]</code>
                                                    <small class="text-muted ms-2">Customer Name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[username]]</code>
                                                    <small class="text-muted ms-2">Username</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[package]]</code>
                                                    <small class="text-muted ms-2">Package name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[price]]</code>
                                                    <small class="text-muted ms-2">Package price</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[expired_date]]</code>
                                                    <small class="text-muted ms-2">Expiration date</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[bills]]</code>
                                                    <small class="text-muted ms-2">Additional bills</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[payment_link]]</code>
                                                    <small class="text-muted ms-2">Payment link</small>
                                                </div>
                                            </div>
                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reminder 3 Days -->
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseReminder3">
                                    <div class="d-flex align-items-center w-100">
                                        <div class="rounded-circle bg-warning bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                            <i class="isax isax-timer text-warning"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{Lang::T('Reminder 3 days')}</div>
                                            <small class="text-muted">Sent 3 days before expiration</small>
                                        </div>
                                    </div>
                                </button>
                            </h2>
                            <div id="collapseReminder3" class="accordion-collapse collapse" data-bs-parent="#notificationAccordion">
                                <div class="accordion-body p-4 bg-light">
                                    <div class="row g-4">
                                        <div class="col-lg-8">
                                            <label class="form-label fw-semibold mb-2">Message Template</label>
                                            <textarea class="form-control" id="reminder_3_day" name="reminder_3_day" rows="15">{Lang::htmlspecialchars($_json['reminder_3_day'])}</textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold mb-3">
                                                <i class="isax isax-code-circle me-1"></i>
                                                Available Variables
                                            </label>
                                            <div class="d-flex flex-column gap-2">
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[name]]</code>
                                                    <small class="text-muted ms-2">Customer Name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[username]]</code>
                                                    <small class="text-muted ms-2">Username</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[package]]</code>
                                                    <small class="text-muted ms-2">Package name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[price]]</code>
                                                    <small class="text-muted ms-2">Package price</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[expired_date]]</code>
                                                    <small class="text-muted ms-2">Expiration date</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[bills]]</code>
                                                    <small class="text-muted ms-2">Additional bills</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[payment_link]]</code>
                                                    <small class="text-muted ms-2">Payment link</small>
                                                </div>
                                            </div>
                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Reminder 1 Day -->
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseReminder1">
                                    <div class="d-flex align-items-center w-100">
                                        <div class="rounded-circle bg-danger bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                            <i class="isax isax-clock text-danger"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{Lang::T('Reminder 1 day')}</div>
                                            <small class="text-muted">Sent 1 day before expiration</small>
                                        </div>
                                    </div>
                                </button>
                            </h2>
                            <div id="collapseReminder1" class="accordion-collapse collapse" data-bs-parent="#notificationAccordion">
                                <div class="accordion-body p-4 bg-light">
                                    <div class="row g-4">
                                        <div class="col-lg-8">
                                            <label class="form-label fw-semibold mb-2">Message Template</label>
                                            <textarea class="form-control" id="reminder_1_day" name="reminder_1_day" rows="15">{Lang::htmlspecialchars($_json['reminder_1_day'])}</textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold mb-3">
                                                <i class="isax isax-code-circle me-1"></i>
                                                Available Variables
                                            </label>
                                            <div class="d-flex flex-column gap-2">
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[name]]</code>
                                                    <small class="text-muted ms-2">Customer Name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[username]]</code>
                                                    <small class="text-muted ms-2">Username</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[package]]</code>
                                                    <small class="text-muted ms-2">Package name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[price]]</code>
                                                    <small class="text-muted ms-2">Package price</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[expired_date]]</code>
                                                    <small class="text-muted ms-2">Expiration date</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[bills]]</code>
                                                    <small class="text-muted ms-2">Additional bills</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[payment_link]]</code>
                                                    <small class="text-muted ms-2">Payment link</small>
                                                </div>
                                            </div>
                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Invoice Notification -->
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseInvoice">
                                    <div class="d-flex align-items-center w-100">
                                        <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                            <i class="isax isax-receipt-text text-success"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{Lang::T('Invoice Notification Payment')}</div>
                                            <small class="text-muted">Sent when payment is received</small>
                                        </div>
                                    </div>
                                </button>
                            </h2>
                            <div id="collapseInvoice" class="accordion-collapse collapse" data-bs-parent="#notificationAccordion">
                                <div class="accordion-body p-4 bg-light">
                                    <div class="row g-4">
                                        <div class="col-lg-8">
                                            <label class="form-label fw-semibold mb-2">Message Template</label>
                                            <textarea class="form-control" id="invoice_paid" name="invoice_paid"
                                                placeholder="{Lang::T('Hello')} [[name]], {Lang::T('your internet package')} [[package]] {Lang::T('has been expired')}"
                                                rows="20">{Lang::htmlspecialchars($_json['invoice_paid'])}</textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold mb-3">
                                                <i class="isax isax-code-circle me-1"></i>
                                                Available Variables
                                            </label>
                                            <div class="d-flex flex-column gap-2" style="max-height: 400px; overflow-y: auto;">
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[company_name]]</code>
                                                    <small class="text-muted ms-2">Company Name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[address]]</code>
                                                    <small class="text-muted ms-2">Company Address</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[phone]]</code>
                                                    <small class="text-muted ms-2">Company Phone</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[invoice]]</code>
                                                    <small class="text-muted ms-2">Invoice number</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[date]]</code>
                                                    <small class="text-muted ms-2">Date created</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[payment_gateway]]</code>
                                                    <small class="text-muted ms-2">Payment gateway</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[payment_channel]]</code>
                                                    <small class="text-muted ms-2">Payment channel</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[type]]</code>
                                                    <small class="text-muted ms-2">Hotspot/PPPOE</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[plan_name]]</code>
                                                    <small class="text-muted ms-2">Package name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[plan_price]]</code>
                                                    <small class="text-muted ms-2">Package price</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[name]]</code>
                                                    <small class="text-muted ms-2">Receiver name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[user_name]]</code>
                                                    <small class="text-muted ms-2">Username</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[user_password]]</code>
                                                    <small class="text-muted ms-2">Password</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[expired_date]]</code>
                                                    <small class="text-muted ms-2">Expiration date</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[footer]]</code>
                                                    <small class="text-muted ms-2">Invoice Footer</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[note]]</code>
                                                    <small class="text-muted ms-2">Admin notes</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[invoice_link]]</code>
                                                    <small class="text-muted ms-2">Invoice link</small>
                                                </div>
                                            </div>
                                           
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Balance Notification -->
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBalance">
                                    <div class="d-flex align-items-center w-100">
                                        <div class="rounded-circle bg-info bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                            <i class="isax isax-wallet-money text-info"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{Lang::T('Balance Notification Payment')}</div>
                                            <small class="text-muted">Sent when balance payment is processed</small>
                                        </div>
                                    </div>
                                </button>
                            </h2>
                            <div id="collapseBalance" class="accordion-collapse collapse" data-bs-parent="#notificationAccordion">
                                <div class="accordion-body p-4 bg-light">
                                    <div class="row g-4">
                                        <div class="col-lg-8">
                                            <label class="form-label fw-semibold mb-2">Message Template</label>
                                            <textarea class="form-control" id="invoice_balance" name="invoice_balance"
                                                placeholder="{Lang::T('Hello')} [[name]], {Lang::T('your internet package')} [[package]] {Lang::T('has been expired')}"
                                                rows="20">{Lang::htmlspecialchars($_json['invoice_balance'])}</textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold mb-3">
                                                <i class="isax isax-code-circle me-1"></i>
                                                Available Variables
                                            </label>
                                            <div class="d-flex flex-column gap-2" style="max-height: 400px; overflow-y: auto;">
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[company_name]]</code>
                                                    <small class="text-muted ms-2">Company Name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[address]]</code>
                                                    <small class="text-muted ms-2">Company Address</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[phone]]</code>
                                                    <small class="text-muted ms-2">Company Phone</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[invoice]]</code>
                                                    <small class="text-muted ms-2">Invoice number</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[date]]</code>
                                                    <small class="text-muted ms-2">Date created</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[payment_gateway]]</code>
                                                    <small class="text-muted ms-2">Payment gateway</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[payment_channel]]</code>
                                                    <small class="text-muted ms-2">Payment channel</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[type]]</code>
                                                    <small class="text-muted ms-2">Hotspot/PPPOE</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[plan_name]]</code>
                                                    <small class="text-muted ms-2">Package name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[plan_price]]</code>
                                                    <small class="text-muted ms-2">Package price</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[name]]</code>
                                                    <small class="text-muted ms-2">Receiver name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[user_name]]</code>
                                                    <small class="text-muted ms-2">Username</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[user_password]]</code>
                                                    <small class="text-muted ms-2">Password</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[trx_date]]</code>
                                                    <small class="text-muted ms-2">Transaction date</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[balance_before]]</code>
                                                    <small class="text-muted ms-2">Balance Before</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[balance]]</code>
                                                    <small class="text-muted ms-2">Balance After</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[footer]]</code>
                                                    <small class="text-muted ms-2">Invoice Footer</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Welcome Message -->
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWelcome">
                                    <div class="d-flex align-items-center w-100">
                                        <div class="rounded-circle bg-primary bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                            <i class="isax isax-message-text text-primary"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{Lang::T('Welcome Message')}</div>
                                            <small class="text-muted">Sent to new customers</small>
                                        </div>
                                    </div>
                                </button>
                            </h2>
                            <div id="collapseWelcome" class="accordion-collapse collapse" data-bs-parent="#notificationAccordion">
                                <div class="accordion-body p-4 bg-light">
                                    <div class="row g-4">
                                        <div class="col-lg-8">
                                            <label class="form-label fw-semibold mb-2">Message Template</label>
                                            <textarea class="form-control" id="welcome_message" name="welcome_message" rows="15">{Lang::htmlspecialchars($_json['welcome_message'])}</textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold mb-3">
                                                <i class="isax isax-code-circle me-1"></i>
                                                Available Variables
                                            </label>
                                            <div class="d-flex flex-column gap-2">
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[name]]</code>
                                                    <small class="text-muted ms-2">Customer Name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[username]]</code>
                                                    <small class="text-muted ms-2">Username</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[password]]</code>
                                                    <small class="text-muted ms-2">Password</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[url]]</code>
                                                    <small class="text-muted ms-2">Portal URL</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[company]]</code>
                                                    <small class="text-muted ms-2">Company Name</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {if $_c['enable_balance'] == 'yes'}
                        <!-- Send Balance -->
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSendBalance">
                                    <div class="d-flex align-items-center w-100">
                                        <div class="rounded-circle bg-success bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                            <i class="isax isax-send-2 text-success"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{Lang::T('Send Balance')}</div>
                                            <small class="text-muted">Sent when balance is transferred</small>
                                        </div>
                                    </div>
                                </button>
                            </h2>
                            <div id="collapseSendBalance" class="accordion-collapse collapse" data-bs-parent="#notificationAccordion">
                                <div class="accordion-body p-4 bg-light">
                                    <div class="row g-4">
                                        <div class="col-lg-8">
                                            <label class="form-label fw-semibold mb-2">Message Template</label>
                                            <textarea class="form-control" id="balance_send" name="balance_send" rows="15">{if $_json['balance_send']}{Lang::htmlspecialchars($_json['balance_send'])}{else}{Lang::htmlspecialchars($_default['balance_send'])}{/if}</textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold mb-3">
                                                <i class="isax isax-code-circle me-1"></i>
                                                Available Variables
                                            </label>
                                            <div class="d-flex flex-column gap-2">
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[name]]</code>
                                                    <small class="text-muted ms-2">Receiver name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[balance]]</code>
                                                    <small class="text-muted ms-2">Amount sent</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[current_balance]]</code>
                                                    <small class="text-muted ms-2">Current Balance</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Received Balance -->
                        <div class="accordion-item border-0 border-bottom">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed py-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapseReceiveBalance">
                                    <div class="d-flex align-items-center w-100">
                                        <div class="rounded-circle bg-info bg-opacity-10 d-flex align-items-center justify-content-center me-3" style="width: 40px; height: 40px;">
                                            <i class="isax isax-receive-square text-info"></i>
                                        </div>
                                        <div>
                                            <div class="fw-semibold">{Lang::T('Received Balance')}</div>
                                            <small class="text-muted">Sent when balance is received</small>
                                        </div>
                                    </div>
                                </button>
                            </h2>
                            <div id="collapseReceiveBalance" class="accordion-collapse collapse" data-bs-parent="#notificationAccordion">
                                <div class="accordion-body p-4 bg-light">
                                    <div class="row g-4">
                                        <div class="col-lg-8">
                                            <label class="form-label fw-semibold mb-2">Message Template</label>
                                            <textarea class="form-control" id="balance_received" name="balance_received" rows="15">{if $_json['balance_received']}{Lang::htmlspecialchars($_json['balance_received'])}{else}{Lang::htmlspecialchars($_default['balance_received'])}{/if}</textarea>
                                        </div>
                                        <div class="col-lg-4">
                                            <label class="form-label fw-semibold mb-3">
                                                <i class="isax isax-code-circle me-1"></i>
                                                Available Variables
                                            </label>
                                            <div class="d-flex flex-column gap-2">
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[name]]</code>
                                                    <small class="text-muted ms-2">Sender name</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary">[[balance]]</code>
                                                    <small class="text-muted ms-2">Amount received</small>
                                                </div>
                                                <div class="badge bg-white text-dark border d-flex justify-content-between align-items-center py-2">
                                                    <code class="text-primary text-nowrap">[[current_balance]]</code>
                                                    <small class="text-muted ms-2">Current Balance</small>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {/if}

                    </div>
               {* <div class="panel-body">
                    <div class="form-group">
                        <label class="col-md-2 control-label">{Lang::T('PDF Invoice Template')}</label>
                        <div class="col-md-6">
                            <textarea class="form-control" id="email_invoice" name="email_invoice"
                                placeholder="{Lang::T('Template for sending pdf invoice')}" rows="20">
                            {if !empty($_json['email_invoice'])}
                            {Lang::htmlspecialchars($_json['email_invoice'])}
                            {else}
                            {Lang::htmlspecialchars($_default['email_invoice'])}
                            {/if}
                        </textarea>
                        </div>
                        <p class="col-md-4 help-block">
                            <b>[[company_name]]</b> {Lang::T('Your Company Name at Settings')}.<br>
                            <b>[[company_address]]</b> {Lang::T('Your Company Address at Settings')}.<br>
                            <b>[[company_phone]]</b> - {Lang::T('Your Company Phone at Settings')}.<br>
                            <b>[[invoice]]</b> - {Lang::T('Invoice number')}.<br>
                            <b>[[created_at]]</b> - {Lang::T('Date invoice created')}.<br>
                            <b>[[payment_gateway]]</b> - {Lang::T('Payment gateway user paid from')}.<br>
                            <b>[[payment_channel]]</b> - {Lang::T('Payment channel user paid from')}.<br>
                            <b>[[bill_rows]]</b> - {Lang::T('Bills table, where bills are listed')}.<br>
                            <b>[[currency]]</b> - {Lang::T('Your currency code at localisation Settings')}.<br>
                            <b>[[status]]</b> - {Lang::T('Invoice status')}.<br>
                            <b>[[fullname]]</b> - {Lang::T('Receiver name')}.<br>
                            <b>[[user_name]]</b> - {Lang::T('Username internet')}.<br>
                            <b>[[email]]</b> - {Lang::T('Customer email')} .<br>
                            <b>[[phone]]</b> - {Lang::T('Customer phone')}. <br>
                            <b>[[address]]</b> - {Lang::T('Customer phone')}. <br>
                            <b>[[expired_date]]</b> - {Lang::T('Expired datetime')}.<br>
                            <b>[[logo]]</b> - {Lang::T('Your company logo at Settings')}.<br>
                            <b>[[due_date]]</b> - {Lang::T('Invoice Due date, 7 Days after invoice created')}.<br>
                            <b>[[payment_link]]</b> - <a href="{$app_url}/docs/#Reminder%20with%20payment%20link"
                                target="_blank">{Lang::T("read documentation")}</a>.
                        </p>
                    </div>
                </div> *}
                </div>
                <div class="card-footer bg-white py-4 px-4 border-top">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3">
                        <div class="text-muted">
                            <i class="isax isax-info-circle me-2"></i>
                            <small>Click on each section to expand and edit notification templates</small>
                        </div>
                        <button class="btn btn-success btn-lg px-5" type="submit">
                            <i class="isax isax-tick-circle me-2"></i>
                            {Lang::T('Save Changes')}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
{include file="sections/footer.tpl"}