Untitled
unknown
php
a year ago
66 kB
10
Indexable
<x-default-layout>
<div class="d-flex flex-column flex-column-fluid">
<!--begin::Toolbar-->
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
<!--begin::Toolbar container-->
<div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
<!--begin::Page title-->
<div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
<!--begin::Title-->
<h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">
Vertical</h1>
<!--end::Title-->
<!--begin::Breadcrumb-->
<ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
<!--begin::Item-->
<li class="breadcrumb-item text-muted">
<a href="index.html" class="text-muted text-hover-primary">Dashboard</a>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item">
<span class="bullet bg-gray-500 w-5px h-2px"></span>
</li>
<!--end::Item-->
<!--begin::Item-->
<li class="breadcrumb-item text-muted">Subscription</li>
<!--end::Item-->
</ul>
<!--end::Breadcrumb-->
</div>
<!--end::Page title-->
<!--begin::Actions-->
<div class="d-flex align-items-center gap-2 gap-lg-3">
<!--begin::Filter menu-->
<div class="m-0">
<!--begin::Menu toggle-->
<a href="#" class="btn btn-sm btn-flex btn-secondary fw-bold" data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end">
<i class="ki-duotone ki-filter fs-6 text-muted me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>Filter</a>
<!--end::Menu toggle-->
<!--begin::Menu 1-->
<div class="menu menu-sub menu-sub-dropdown w-250px w-md-300px" data-kt-menu="true"
id="kt_menu_6543cc735c092">
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-gray-900 fw-bold">Filter Options</div>
</div>
<!--end::Header-->
<!--begin::Menu separator-->
<div class="separator border-gray-200"></div>
<!--end::Menu separator-->
<!--begin::Form-->
<div class="px-7 py-5">
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Status:</label>
<!--end::Label-->
<!--begin::Input-->
<div>
<select class="form-select form-select-solid" multiple="multiple"
data-kt-select2="true" data-close-on-select="false"
data-placeholder="Select option"
data-dropdown-parent="#kt_menu_6543cc735c092" data-allow-clear="true">
<option></option>
<option value="1">Approved</option>
<option value="2">Pending</option>
<option value="2">In Process</option>
<option value="2">Rejected</option>
</select>
</div>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Member Type:</label>
<!--end::Label-->
<!--begin::Options-->
<div class="d-flex">
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid me-5">
<input class="form-check-input" type="checkbox" value="1"/>
<span class="form-check-label">Author</span>
</label>
<!--end::Options-->
<!--begin::Options-->
<label class="form-check form-check-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="2"
checked="checked"/>
<span class="form-check-label">Customer</span>
</label>
<!--end::Options-->
</div>
<!--end::Options-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10">
<!--begin::Label-->
<label class="form-label fw-semibold">Notifications:</label>
<!--end::Label-->
<!--begin::Switch-->
<div
class="form-check form-switch form-switch-sm form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="" name="notifications"
checked="checked"/>
<label class="form-check-label">Enabled</label>
</div>
<!--end::Switch-->
</div>
<!--end::Input group-->
<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button type="reset" class="btn btn-sm btn-light btn-active-light-primary me-2"
data-kt-menu-dismiss="true">Reset
</button>
<button type="submit" class="btn btn-sm btn-primary" data-kt-menu-dismiss="true">
Apply
</button>
</div>
<!--end::Actions-->
</div>
<!--end::Form-->
</div>
<!--end::Menu 1-->
</div>
<!--end::Filter menu-->
<!--begin::Secondary button-->
<!--end::Secondary button-->
<!--begin::Primary button-->
<a href="#" class="btn btn-sm fw-bold btn-primary" data-bs-toggle="modal"
data-bs-target="#kt_modal_create_app">Create</a>
<!--end::Primary button-->
</div>
<!--end::Actions-->
</div>
<!--end::Toolbar container-->
</div>
<!--end::Toolbar-->
<!--begin::Content-->
<div id="kt_app_content" class="app-content flex-column-fluid">
<!--begin::Content container-->
<div id="kt_app_content_container" class="app-container container-xxl">
<!--begin::Stepper-->
<div class="stepper stepper-pills stepper-column d-flex flex-column flex-xl-row flex-row-fluid gap-10"
id="kt_create_account_stepper">
<!--begin::Aside-->
<div
class="card d-flex justify-content-center justify-content-xl-start flex-row-auto w-100 w-xl-300px w-xxl-400px">
<!--begin::Wrapper-->
<div class="card-body px-6 px-lg-10 px-xxl-15 py-20">
<!--begin::Nav-->
<div class="stepper-nav">
<!--begin::Step 1-->
<div class="stepper-item current" data-kt-stepper-element="nav">
<!--begin::Wrapper-->
<div class="stepper-wrapper">
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="ki-duotone ki-check fs-2 stepper-check"></i>
<span class="stepper-number">1</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Account Type</h3>
<div class="stepper-desc fw-semibold">Setup Your Account Details</div>
</div>
<!--end::Label-->
</div>
<!--end::Wrapper-->
<!--begin::Line-->
<div class="stepper-line h-40px"></div>
<!--end::Line-->
</div>
<!--end::Step 1-->
<!--begin::Step 2-->
<div class="stepper-item" data-kt-stepper-element="nav">
<!--begin::Wrapper-->
<div class="stepper-wrapper">
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="ki-duotone ki-check fs-2 stepper-check"></i>
<span class="stepper-number">2</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Account Settings</h3>
<div class="stepper-desc fw-semibold">Setup Your Account Settings</div>
</div>
<!--end::Label-->
</div>
<!--end::Wrapper-->
<!--begin::Line-->
<div class="stepper-line h-40px"></div>
<!--end::Line-->
</div>
<!--end::Step 2-->
<!--begin::Step 3-->
<div class="stepper-item" data-kt-stepper-element="nav">
<!--begin::Wrapper-->
<div class="stepper-wrapper">
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="ki-duotone ki-check fs-2 stepper-check"></i>
<span class="stepper-number">3</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Business Info</h3>
<div class="stepper-desc fw-semibold">Your Business Related Info</div>
</div>
<!--end::Label-->
</div>
<!--end::Wrapper-->
<!--begin::Line-->
<div class="stepper-line h-40px"></div>
<!--end::Line-->
</div>
<!--end::Step 3-->
<!--begin::Step 4-->
<div class="stepper-item" data-kt-stepper-element="nav">
<!--begin::Wrapper-->
<div class="stepper-wrapper">
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="ki-duotone ki-check fs-2 stepper-check"></i>
<span class="stepper-number">4</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Billing Details</h3>
<div class="stepper-desc fw-semibold">Set Your Payment Methods</div>
</div>
<!--end::Label-->
</div>
<!--end::Wrapper-->
<!--begin::Line-->
<div class="stepper-line h-40px"></div>
<!--end::Line-->
</div>
<!--end::Step 4-->
<!--begin::Step 5-->
<div class="stepper-item mark-completed" data-kt-stepper-element="nav">
<!--begin::Wrapper-->
<div class="stepper-wrapper">
<!--begin::Icon-->
<div class="stepper-icon w-40px h-40px">
<i class="ki-duotone ki-check fs-2 stepper-check"></i>
<span class="stepper-number">5</span>
</div>
<!--end::Icon-->
<!--begin::Label-->
<div class="stepper-label">
<h3 class="stepper-title">Completed</h3>
<div class="stepper-desc fw-semibold">Woah, we are here</div>
</div>
<!--end::Label-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 5-->
</div>
<!--end::Nav-->
</div>
<!--end::Wrapper-->
</div>
<!--begin::Aside-->
<!--begin::Content-->
<div class="card d-flex flex-row-fluid flex-center">
<!--begin::Form-->
<form class="card-body py-20 w-100 mw-xl-700px px-9" novalidate="novalidate"
id="kt_create_account_form">
<!--begin::Step 1-->
<div class="current" data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-10 pb-lg-15">
<!--begin::Title-->
<h2 class="fw-bold d-flex align-items-center text-gray-900">
Choose Account Type
<span class="ms-1" data-bs-toggle="tooltip"
title="Billing is issued based on your selected account typ">
<i class="ki-duotone ki-information-5 text-gray-500 fs-6">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</span>
</h2>
<!--end::Title-->
<!--begin::Notice-->
<div class="text-muted fw-semibold fs-6">If you need more info, please check out
<a href="#" class="link-primary fw-bold">Help Page</a>.
</div>
<!--end::Notice-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row">
<!--begin::Row-->
<div class="row">
<!--begin::Col-->
<div class="col-lg-6">
<!--begin::Option-->
<input type="radio" class="btn-check" name="account_type"
value="personal" checked="checked"
id="kt_create_account_form_account_type_personal"/>
<label
class="btn btn-outline btn-outline-dashed btn-active-light-primary p-7 d-flex align-items-center mb-10"
for="kt_create_account_form_account_type_personal">
<i class="ki-duotone ki-badge fs-3x me-5">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
<span class="path4"></span>
<span class="path5"></span>
</i>
<!--begin::Info-->
<span class="d-block fw-semibold text-start">
<span
class="text-gray-900 fw-bold d-block fs-4 mb-2">Personal Account</span>
<span class="text-muted fw-semibold fs-6">If you need more info, please check it out</span>
</span>
<!--end::Info-->
</label>
<!--end::Option-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-lg-6">
<!--begin::Option-->
<input type="radio" class="btn-check" name="account_type"
value="corporate"
id="kt_create_account_form_account_type_corporate"/>
<label
class="btn btn-outline btn-outline-dashed btn-active-light-primary p-7 d-flex align-items-center"
for="kt_create_account_form_account_type_corporate">
<i class="ki-duotone ki-briefcase fs-3x me-5">
<span class="path1"></span>
<span class="path2"></span>
</i>
<!--begin::Info-->
<span class="d-block fw-semibold text-start">
<span
class="text-gray-900 fw-bold d-block fs-4 mb-2">Corporate Account</span>
<span class="text-muted fw-semibold fs-6">Create corporate account to mane users</span>
</span>
<!--end::Info-->
</label>
<!--end::Option-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Input group-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 1-->
<!--begin::Step 2-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-10 pb-lg-15">
<!--begin::Title-->
<h2 class="fw-bold text-gray-900">Account Info</h2>
<!--end::Title-->
<!--begin::Notice-->
<div class="text-muted fw-semibold fs-6">If you need more info, please check out
<a href="#" class="link-primary fw-bold">Help Page</a>.
</div>
<!--end::Notice-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="mb-10 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center form-label mb-3">Specify Team Size
<span class="ms-1" data-bs-toggle="tooltip"
title="Provide your team size to help us setup your billing">
<i class="ki-duotone ki-information-5 text-gray-500 fs-6">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</span></label>
<!--end::Label-->
<!--begin::Row-->
<div class="row mb-2" data-kt-buttons="true">
<!--begin::Col-->
<div class="col">
<!--begin::Option-->
<label
class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4">
<input type="radio" class="btn-check" name="account_team_size"
value="1-1"/>
<span class="fw-bold fs-3">1-1</span>
</label>
<!--end::Option-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col">
<!--begin::Option-->
<label
class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4 active">
<input type="radio" class="btn-check" name="account_team_size"
checked="checked" value="2-10"/>
<span class="fw-bold fs-3">2-10</span>
</label>
<!--end::Option-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col">
<!--begin::Option-->
<label
class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4">
<input type="radio" class="btn-check" name="account_team_size"
value="10-50"/>
<span class="fw-bold fs-3">10-50</span>
</label>
<!--end::Option-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col">
<!--begin::Option-->
<label
class="btn btn-outline btn-outline-dashed btn-active-light-primary w-100 p-4">
<input type="radio" class="btn-check" name="account_team_size"
value="50+"/>
<span class="fw-bold fs-3">50+</span>
</label>
<!--end::Option-->
</div>
<!--end::Col-->
</div>
<!--end::Row-->
<!--begin::Hint-->
<div class="form-text">Customers will see this shortened version of your
statement descriptor
</div>
<!--end::Hint-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-10 fv-row">
<!--begin::Label-->
<label class="form-label mb-3">Team Account Name</label>
<!--end::Label-->
<!--begin::Input-->
<input type="text" class="form-control form-control-lg form-control-solid"
name="account_name" placeholder="" value=""/>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="mb-0 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center form-label mb-5">Select Account Plan
<span class="ms-1" data-bs-toggle="tooltip"
title="Monthly billing will be based on your account plan">
<i class="ki-duotone ki-information-5 text-gray-500 fs-6">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</span></label>
<!--end::Label-->
<!--begin::Options-->
<div class="mb-0">
<!--begin:Option-->
<label class="d-flex flex-stack mb-5 cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin::Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label">
<i class="ki-duotone ki-bank fs-1 text-gray-600">
<span class="path1"></span>
<span class="path2"></span>
</i>
</span>
</span>
<!--end::Icon-->
<!--begin::Description-->
<span class="d-flex flex-column">
<span
class="fw-bold text-gray-800 text-hover-primary fs-5">Company Account</span>
<span class="fs-6 fw-semibold text-muted">Use images to enhance your post flow</span>
</span>
<!--end:Description-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio"
name="account_plan" value="1"/>
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack mb-5 cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin::Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label">
<i class="ki-duotone ki-chart fs-1 text-gray-600">
<span class="path1"></span>
<span class="path2"></span>
</i>
</span>
</span>
<!--end::Icon-->
<!--begin::Description-->
<span class="d-flex flex-column">
<span
class="fw-bold text-gray-800 text-hover-primary fs-5">Developer Account</span>
<span class="fs-6 fw-semibold text-muted">Use images to your post time</span>
</span>
<!--end:Description-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio"
checked="checked" name="account_plan"
value="2"/>
</span>
<!--end:Input-->
</label>
<!--end::Option-->
<!--begin:Option-->
<label class="d-flex flex-stack mb-0 cursor-pointer">
<!--begin:Label-->
<span class="d-flex align-items-center me-2">
<!--begin::Icon-->
<span class="symbol symbol-50px me-6">
<span class="symbol-label">
<i class="ki-duotone ki-chart-pie-4 fs-1 text-gray-600">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</span>
</span>
<!--end::Icon-->
<!--begin::Description-->
<span class="d-flex flex-column">
<span
class="fw-bold text-gray-800 text-hover-primary fs-5">Testing Account</span>
<span class="fs-6 fw-semibold text-muted">Use images to enhance time travel rivers</span>
</span>
<!--end:Description-->
</span>
<!--end:Label-->
<!--begin:Input-->
<span class="form-check form-check-custom form-check-solid">
<input class="form-check-input" type="radio"
name="account_plan" value="3"/>
</span>
<!--end:Input-->
</label>
<!--end::Option-->
</div>
<!--end::Options-->
</div>
<!--end::Input group-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 2-->
<!--begin::Step 3-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-10 pb-lg-12">
<!--begin::Title-->
<h2 class="fw-bold text-gray-900">Business Details</h2>
<!--end::Title-->
<!--begin::Notice-->
<div class="text-muted fw-semibold fs-6">If you need more info, please check out
<a href="#" class="link-primary fw-bold">Help Page</a>.
</div>
<!--end::Notice-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="form-label required">Business Name</label>
<!--end::Label-->
<!--begin::Input-->
<input name="business_name"
class="form-control form-control-lg form-control-solid"
value="Keenthemes Inc."/>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="d-flex align-items-center form-label">
<span class="required">Shortened Descriptor</span>
<span class="lh-1 ms-1" data-bs-toggle="popover" data-bs-trigger="hover"
data-bs-html="true"
data-bs-content="<div class='p-4 rounded bg-light'> <div class='d-flex flex-stack text-muted mb-4'> <i class="ki-duotone ki-bank fs-3 me-3"><span class="path1"></span><span class="path2"></span></i> <div class='fw-bold'>INCBANK **** 1245 STATEMENT</div> </div> <div class='d-flex flex-stack fw-semibold text-gray-600'> <div>Amount</div> <div>Transaction</div> </div> <div class='separator separator-dashed my-2'></div> <div class='d-flex flex-stack text-gray-900 fw-bold mb-2'> <div>USD345.00</div> <div>KEENTHEMES*</div> </div> <div class='d-flex flex-stack text-muted mb-2'> <div>USD75.00</div> <div>Hosting fee</div> </div> <div class='d-flex flex-stack text-muted'> <div>USD3,950.00</div> <div>Payrol</div> </div> </div>">
<i class="ki-duotone ki-information-5 text-gray-500 fs-6">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</span>
</label>
<!--end::Label-->
<!--begin::Input-->
<input name="business_descriptor"
class="form-control form-control-lg form-control-solid"
value="KEENTHEMES"/>
<!--end::Input-->
<!--begin::Hint-->
<div class="form-text">Customers will see this shortened version of your
statement descriptor
</div>
<!--end::Hint-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--begin::Label-->
<label class="form-label required">Corporation Type</label>
<!--end::Label-->
<!--begin::Input-->
<select name="business_type"
class="form-select form-select-lg form-select-solid"
data-control="select2" data-placeholder="Select..."
data-allow-clear="true" data-hide-search="true">
<option></option>
<option value="1">S Corporation</option>
<option value="1">C Corporation</option>
<option value="2">Sole Proprietorship</option>
<option value="3">Non-profit</option>
<option value="4">Limited Liability</option>
<option value="5">General Partnership</option>
</select>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-10">
<!--end::Label-->
<label class="form-label">Business Description</label>
<!--end::Label-->
<!--begin::Input-->
<textarea name="business_description"
class="form-control form-control-lg form-control-solid"
rows="3"></textarea>
<!--end::Input-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="fv-row mb-0">
<!--begin::Label-->
<label class="fs-6 fw-semibold form-label required">Contact Email</label>
<!--end::Label-->
<!--begin::Input-->
<input name="business_email"
class="form-control form-control-lg form-control-solid"
value="corp@support.com"/>
<!--end::Input-->
</div>
<!--end::Input group-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 3-->
<!--begin::Step 4-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-10 pb-lg-15">
<!--begin::Title-->
<h2 class="fw-bold text-gray-900">Billing Details</h2>
<!--end::Title-->
<!--begin::Notice-->
<div class="text-muted fw-semibold fs-6">If you need more info, please check out
<a href="#" class="text-primary fw-bold">Help Page</a>.
</div>
<!--end::Notice-->
</div>
<!--end::Heading-->
<!--begin::Input group-->
<div class="d-flex flex-column mb-7 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-6 fw-semibold form-label mb-2">
<span class="required">Name On Card</span>
<span class="ms-1" data-bs-toggle="tooltip"
title="Specify a card holder's name">
<i class="ki-duotone ki-information-5 text-gray-500 fs-6">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</span>
</label>
<!--end::Label-->
<input type="text" class="form-control form-control-solid" placeholder=""
name="card_name" value="Max Doe"/>
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-column mb-7 fv-row">
<!--begin::Label-->
<label class="required fs-6 fw-semibold form-label mb-2">Card Number</label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative">
<!--begin::Input-->
<input type="text" class="form-control form-control-solid"
placeholder="Enter card number" name="card_number"
value="4111 1111 1111 1111"/>
<!--end::Input-->
<!--begin::Card logos-->
<div class="position-absolute translate-middle-y top-50 end-0 me-5">
<img src="assets/media/svg/card-logos/visa.svg" alt="" class="h-25px"/>
<img src="assets/media/svg/card-logos/mastercard.svg" alt=""
class="h-25px"/>
<img src="assets/media/svg/card-logos/american-express.svg" alt=""
class="h-25px"/>
</div>
<!--end::Card logos-->
</div>
<!--end::Input wrapper-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="row mb-10">
<!--begin::Col-->
<div class="col-md-8 fv-row">
<!--begin::Label-->
<label class="required fs-6 fw-semibold form-label mb-2">Expiration
Date</label>
<!--end::Label-->
<!--begin::Row-->
<div class="row fv-row">
<!--begin::Col-->
<div class="col-6">
<select name="card_expiry_month"
class="form-select form-select-solid" data-control="select2"
data-hide-search="true" data-placeholder="Month">
<option></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-6">
<select name="card_expiry_year"
class="form-select form-select-solid" data-control="select2"
data-hide-search="true" data-placeholder="Year">
<option></option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
<option value="2027">2027</option>
<option value="2028">2028</option>
<option value="2029">2029</option>
<option value="2030">2030</option>
<option value="2031">2031</option>
<option value="2032">2032</option>
<option value="2033">2033</option>
</select>
</div>
<!--end::Col-->
</div>
<!--end::Row-->
</div>
<!--end::Col-->
<!--begin::Col-->
<div class="col-md-4 fv-row">
<!--begin::Label-->
<label class="d-flex align-items-center fs-6 fw-semibold form-label mb-2">
<span class="required">CVV</span>
<span class="ms-1" data-bs-toggle="tooltip"
title="Enter a card CVV code">
<i class="ki-duotone ki-information-5 text-gray-500 fs-6">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
</span>
</label>
<!--end::Label-->
<!--begin::Input wrapper-->
<div class="position-relative">
<!--begin::Input-->
<input type="text" class="form-control form-control-solid" minlength="3"
maxlength="4" placeholder="CVV" name="card_cvv"/>
<!--end::Input-->
<!--begin::CVV icon-->
<div class="position-absolute translate-middle-y top-50 end-0 me-3">
<i class="ki-duotone ki-credit-cart fs-2hx">
<span class="path1"></span>
<span class="path2"></span>
</i>
</div>
<!--end::CVV icon-->
</div>
<!--end::Input wrapper-->
</div>
<!--end::Col-->
</div>
<!--end::Input group-->
<!--begin::Input group-->
<div class="d-flex flex-stack">
<!--begin::Label-->
<div class="me-5">
<label class="fs-6 fw-semibold form-label">Save Card for further
billing?</label>
<div class="fs-7 fw-semibold text-muted">If you need more info, please check
budget planning
</div>
</div>
<!--end::Label-->
<!--begin::Switch-->
<label class="form-check form-switch form-check-custom form-check-solid">
<input class="form-check-input" type="checkbox" value="1"
checked="checked"/>
<span class="form-check-label fw-semibold text-muted">Save Card</span>
</label>
<!--end::Switch-->
</div>
<!--end::Input group-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 4-->
<!--begin::Step 5-->
<div data-kt-stepper-element="content">
<!--begin::Wrapper-->
<div class="w-100">
<!--begin::Heading-->
<div class="pb-8 pb-lg-10">
<!--begin::Title-->
<h2 class="fw-bold text-gray-900">Your Are Done!</h2>
<!--end::Title-->
<!--begin::Notice-->
<div class="text-muted fw-semibold fs-6">If you need more info, please
<a href="authentication/layouts/corporate/sign-in.html"
class="link-primary fw-bold">Sign In</a>.
</div>
<!--end::Notice-->
</div>
<!--end::Heading-->
<!--begin::Body-->
<div class="mb-0">
<!--begin::Text-->
<div class="fs-6 text-gray-600 mb-5">Writing headlines for blog posts is as much
an art as it is a science and probably warrants its own post, but for all
advise is with what works for your great & amazing audience.
</div>
<!--end::Text-->
<!--begin::Alert-->
<!--begin::Notice-->
<div
class="notice d-flex bg-light-warning rounded border-warning border border-dashed p-6">
<!--begin::Icon-->
<i class="ki-duotone ki-information fs-2tx text-warning me-4">
<span class="path1"></span>
<span class="path2"></span>
<span class="path3"></span>
</i>
<!--end::Icon-->
<!--begin::Wrapper-->
<div class="d-flex flex-stack flex-grow-1">
<!--begin::Content-->
<div class="fw-semibold">
<h4 class="text-gray-900 fw-bold">We need your attention!</h4>
<div class="fs-6 text-gray-700">To start using great tools, please,
<a href="utilities/wizards/vertical.html" class="fw-bold">Create
Team Platform</a></div>
</div>
<!--end::Content-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Notice-->
<!--end::Alert-->
</div>
<!--end::Body-->
</div>
<!--end::Wrapper-->
</div>
<!--end::Step 5-->
<!--begin::Actions-->
<div class="d-flex flex-stack pt-10">
<!--begin::Wrapper-->
<div class="mr-2">
<button type="button" class="btn btn-lg btn-light-primary me-3"
data-kt-stepper-action="previous">
<i class="ki-duotone ki-arrow-left fs-4 me-1">
<span class="path1"></span>
<span class="path2"></span>
</i>Back
</button>
</div>
<!--end::Wrapper-->
<!--begin::Wrapper-->
<div>
<button type="button" class="btn btn-lg btn-primary me-3"
data-kt-stepper-action="submit">
<span class="indicator-label">Submit
<i class="ki-duotone ki-arrow-right fs-3 ms-2 me-0">
<span class="path1"></span>
<span class="path2"></span>
</i></span>
<span class="indicator-progress">Please wait...
<span
class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
</button>
<button type="button" class="btn btn-lg btn-primary" data-kt-stepper-action="next">
Continue
<i class="ki-duotone ki-arrow-right fs-4 ms-1 me-0">
<span class="path1"></span>
<span class="path2"></span>
</i></button>
</div>
<!--end::Wrapper-->
</div>
<!--end::Actions-->
</form>
<!--end::Form-->
</div>
<!--end::Content-->
</div>
<!--end::Stepper-->
</div>
<!--end::Content container-->
</div>
<!--end::Content-->
</div>
@section('custom_js')
<script !src="">
</script>
@endsection
@push('script')
<script src="{{ asset('assets/js/custom/utilities/modals/create-account.js') }}"></script>
<script src="{{ asset('assets/js/widgets.bundle.js') }}"></script>
<script src="{{ asset('assets/js/custom/widgets.js') }}"></script>
<script src="{{ asset('assets/js/custom/apps/chat/chat.js') }}"></script>
<script src="{{ asset('assets/js/custom/utilities/modals/upgrade-plan.js') }}"></script>
<script src="{{ asset('assets/js/custom/utilities/modals/create-app.js') }}"></script>
<script src="{{ asset('assets/js/custom/utilities/modals/users-search.js') }}"></script>
@endpush
</x-default-layout>
Editor is loading...
Leave a Comment