<admin-page-header [title]="'Payment gateways'"></admin-page-header>

<!-- Start::row-1 -->
<div class="row">
    <div class="col-xl-12">
        <div class="row">
            <div class="col-xl-6">
                <div class="card custom-card">
                    <form #stripeFormData="ngForm" (ngSubmit)="stripeStore(stripeFormData.value, 'stripe')">
                        <div class="card-header border-0 d-md-flex d-block">
                            <div class="card-title flex-grow-1">
                                {{ 'Stripe Settings' | translate }}
                            </div>
                            <div class="custom-switch form-switch">
                                <label class="form-check-label" for="Stripe-login">
                                    <input class="custom-switch-input tswitch" type="checkbox" role="switch"
                                        id="Stripe-login" name="enableStripe"
                                        [checked]="setting?.enableStripe == 'on' ? true : false"
                                        [ngModel]="setting?.enableStripe == 'on' ? true : false">
                                    <span class="custom-switch-indicator"></span>{{ ' Enable Strip' |
                                    translate}}</label>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row gy-3">
                                <div class="col-xl-12">
                                    <label for="stripe-id"
                                        class="form-label @error('stripeKey') is-invalid @enderror">{{ 'Stripe Key' |
                                        translate }} <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="stripeKey" id="stripe-id"
                                        placeholder="{{ 'Enter Here' | translate  }}" [ngModel]="setting?.stripeKey">
                                </div>
                                <div class="col-xl-12">
                                    <label for="stripe-secret"
                                        class="form-label @error('stripeSecret') is-invalid @enderror">{{ 'Stripe Secret' | translate }} <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="stripeSecret" id="stripe-secret" placeholder="{{ 'Enter Here' | translate  }}" [ngModel]="setting?.stripeSecret">
                                </div>
                                <div class="col-xl-12">
                                    <label class="form-check-label form-label" for="stripeDefault">{{ ' Set As Default '
                                        | translate }}
                                        <input class="custom-switch-input tswitch " type="checkbox" role="switch" #stripeDefault (change)="updateDefaultPay($event, 'stripeDefault')"
                                            [checked]="setting?.stripeDefault == 'on' ? true : false"
                                            [ngModel]="setting?.stripeDefault == 'on' ? true : false"
                                            id="stripeDefault" name="stripeDefault">
                                        <span class="custom-switch-indicator"></span></label>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="float-end mb-3">
                                <button type="submit" class="btn btn-primary">{{'Submit' | translate }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-xl-6">
                <div class="card custom-card">
                    <form #paypalFormData="ngForm" (ngSubmit)="paypalStore(paypalFormData.value, 'paypal')">
                        <div class="card-header border-0 d-md-flex d-block">
                            <div class="card-title flex-grow-1">
                                {{ 'Paypal Settings' | translate }}
                            </div>
                            <div class="custom-switch form-switch">
                                <label class="form-check-label" for="paypal">
                                    <input class="custom-switch-input tswitch" type="checkbox" role="switch" id="paypal"
                                        [checked]="setting?.enablePaypal == 'on' ? true : false"
                                        [ngModel]="setting?.enablePaypal == 'on' ? true : false"
                                        name="enablePaypal">
                                    <span class="custom-switch-indicator"></span>{{ ' Enable Paypal ' | translate
                                    }}</label>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row gy-3">
                                <div class="col-xl-12">
                                    <label for="paypal-id" class="form-label">{{ 'Paypal Key' | translate }}<span
                                            class="text-danger">*</span></label>
                                    <input name="paypalKey" type="text"
                                        class="form-control" id="paypal-id"
                                        [placeholder]="'Paypal Settings' | translate"
                                        [ngModel]="setting?.paypalKey">
                                </div>
                                <div class="col-xl-12">
                                    <label for="paypal-secret" class="form-label">{{ 'Paypal Secret' | translate }}<span
                                            class="text-danger">*</span></label>
                                    <input name="paypalSecret" type="text" class="form-control" id="paypal-secret"
                                        [placeholder]="'Paypal Settings' | translate"
                                        [ngModel]="setting?.paypalSecret">
                                </div>
                                <div class="col-xl-12">
                                    <label class="form-check-label form-label" for="paypalDefault">{{ ' Set As Default '
                                        | translate }}
                                        <input class="custom-switch-input tswitch " type="checkbox" role="switch" #paypalDefault (change)="updateDefaultPay($event, 'paypalDefault')"
                                            [checked]="setting?.paypalDefault == 'on' ? true : false"
                                            [ngModel]="setting?.paypalDefault == 'on' ? true : false"
                                            id="paypalDefault" name="paypalDefault">
                                        <span class="custom-switch-indicator"></span></label>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <div class="float-end mb-3">
                                <button class="btn btn-primary">{{ 'Submit' | translate }}</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header border-0 d-md-flex d-block">
                        <div class="card-title flex-grow-1">
                            {{ 'Refund Settings' | translate }}
                        </div>
                    </div>
                    <form #refundsFormData="ngForm" id="refundSettingForm"
                        (ngSubmit)="refundsSetting(refundsFormData.value, 'refundsSetting')">
                        <div class="card-body">
                            <div class="d-sm-flex align-items-center mb-3">
                                <div class="me-3">
                                    <div class="custom-switch form-switch mb-0"><label for="enableRefund">
                                            <input id="enableRefund" name="enableRefund"
                                                class="custom-switch-input tswitch" type="checkbox"
                                                [checked]="setting?.enableRefund == 'on' ? true : false"
                                                [ngModel]="setting?.enableRefund == 'on' ? true : false">
                                            <span class="custom-switch-indicator"></span></label>
                                    </div>
                                </div>
                                <label class="form-label fw-semibold mb-sm-0">{{"Enable Refund Option To Customers" | translate }}
                                    <small class=""><i>({{"If you enable this setting, customers will be allowed to request a refund for the amount paid within the specified number of days" | translate}}.)</i>
                                    </small>
                                </label>
                            </div>
                            <div class="ms-sm-5">
                                <div class="d-flex">
                                    <input type="number" min="1" class="w-10 form-control " name="refundDays"
                                        id="refundDays" [ngModel]="setting?.refundDays" autocomplete="off">
                                    <span class="mt-2 px-0 ms-2 fw-semibold">{{"Days" | translate }}</span>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="card-footer">
                        <div class="float-end mb-3">
                            <button class="btn btn-primary" type="submit" form="refundSettingForm">{{ 'Submit' |
                                translate }}</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header border-0 d-md-flex d-block">
                        <div class="card-title flex-grow-1">
                            {{ 'Automatic Invoice Cancellation' | translate }}
                        </div>
                    </div>
                    <form #invoiceCancellationFormData="ngForm"
                        (ngSubmit)="invoiceCancellationSetting(invoiceCancellationFormData.value, 'invoiceCancellation')"
                        id="invoicecancelsettingForm">
                        <div class="card-body">
                            <div class="d-sm-flex align-items-center mb-3">
                                <div class="me-3">
                                    <div class="custom-switch form-switch mb-0"><label for="autoInvoiceCancelEnable">
                                            <input id="autoInvoiceCancelEnable" name="autoInvoiceCancelEnable"
                                                class="custom-switch-input tswitch" type="checkbox"
                                                [checked]="setting?.autoInvoiceCancelEnable == 'on' ? true : false"
                                                [ngModel]="setting?.autoInvoiceCancelEnable == 'on' ? true : false">
                                            <span class="custom-switch-indicator"></span></label>
                                    </div>
                                </div>
                                <label class="form-label fw-semibold mb-sm-0">{{"Enable Invoice Cancellation Automatically" | translate }}
                                    <small class=""><i>({{"If payment is not completed, the generated invoice will be automatically cancelled after the specified number of days" | translate }}.)</i>
                                    </small>
                                </label>
                            </div>
                            <div class="ms-sm-5">
                                <div class="d-flex">
                                    <input type="number" min="1" class="w-10 form-control " name="invoiceCancelDays"
                                        id="invoiceCancelDays" [ngModel]="setting?.invoiceCancelDays"
                                        autocomplete="off">
                                    <span class="mt-2 px-0 ms-2 fw-semibold">Days</span>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="card-footer">
                        <div class="float-end mb-3">
                            <button class="btn btn-primary" type="submit" form="invoicecancelsettingForm">{{'Submit' |
                                translate }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-xl-12">
                <div class="card custom-card">
                    <div class="card-header border-0 d-md-flex d-block">
                        <div class="card-title flex-grow-1">
                            {{ 'Auto Delete Cancelled Invoice' | translate }}
                        </div>
                    </div>
                    <form #autodeleteinvoiceFormData="ngForm" id="autodeleteinvoicesettingForm"
                        (ngSubmit)="autodeleteinvoiceSetting(autodeleteinvoiceFormData.value, 'autodeleteinvoice')">
                        <div class="card-body">
                            <div class="d-sm-flex align-items-center mb-3">
                                <div class="me-3">
                                    <div class="custom-switch form-switch mb-0"><label for="autoinvoicedelete">
                                            <input id="autoinvoicedelete" name="autoinvoicedelete"
                                                class="custom-switch-input tswitch" type="checkbox"
                                                [checked]="setting?.autoinvoicedelete == 'on' ? true : false"
                                                [ngModel]="setting?.autoinvoicedelete == 'on' ? true : false">
                                            <span class="custom-switch-indicator"></span></label>
                                    </div>
                                </div>
                                <label class="form-label fw-semibold mb-sm-0">Enable auto delete invoices
                                    <small class=""><i>(If this is enabled, the cancelled invoices will be automatically
                                            get deleted after the number of days mentioned below.)</i>
                                    </small>
                                </label>
                            </div>
                            <div class="ms-sm-5">
                                <div class="d-flex">
                                    <input type="number" min="1" class="w-10 form-control " name="autodeleteinvoiceDays"
                                        id="autodeleteinvoiceDays" [ngModel]="setting?.autodeleteinvoiceDays"
                                        autocomplete="off">
                                    <span class="mt-2 px-0 ms-2 fw-semibold">Days</span>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="card-footer">
                        <div class="float-end mb-3">
                            <button class="btn btn-primary" type="submit" form="autodeleteinvoicesettingForm">{{'Submit'
                                | translate }}</button>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!--End::row-1 -->