1101 lines
73 KiB
PHP
1101 lines
73 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title='Wizard';
|
|
$subTitle = 'Wizard';
|
|
$script = ' <script>
|
|
// =============================== Wizard Step Js Start ================================
|
|
$(document).ready(function() {
|
|
// click on next button
|
|
$(".form-wizard-next-btn").on("click", function() {
|
|
var parentFieldset = $(this).parents(".wizard-fieldset");
|
|
var currentActiveStep = $(this).parents(".form-wizard").find(".form-wizard-list .active");
|
|
var next = $(this);
|
|
var nextWizardStep = true;
|
|
parentFieldset.find(".wizard-required").each(function(){
|
|
var thisValue = $(this).val();
|
|
|
|
if( thisValue == "") {
|
|
$(this).siblings(".wizard-form-error").show();
|
|
nextWizardStep = false;
|
|
}
|
|
else {
|
|
$(this).siblings(".wizard-form-error").hide();
|
|
}
|
|
});
|
|
if( nextWizardStep) {
|
|
next.parents(".wizard-fieldset").removeClass("show","400");
|
|
currentActiveStep.removeClass("active").addClass("activated").next().addClass("active","400");
|
|
next.parents(".wizard-fieldset").next(".wizard-fieldset").addClass("show","400");
|
|
$(document).find(".wizard-fieldset").each(function(){
|
|
if($(this).hasClass("show")){
|
|
var formAtrr = $(this).attr("data-tab-content");
|
|
$(document).find(".form-wizard-list .form-wizard-step-item").each(function(){
|
|
if($(this).attr("data-attr") == formAtrr){
|
|
$(this).addClass("active");
|
|
var innerWidth = $(this).innerWidth();
|
|
var position = $(this).position();
|
|
$(document).find(".form-wizard-step-move").css({"left": position.left, "width": innerWidth});
|
|
}else{
|
|
$(this).removeClass("active");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
//click on previous button
|
|
$(".form-wizard-previous-btn").on("click",function() {
|
|
var counter = parseInt($(".wizard-counter").text());;
|
|
var prev =$(this);
|
|
var currentActiveStep = $(this).parents(".form-wizard").find(".form-wizard-list .active");
|
|
prev.parents(".wizard-fieldset").removeClass("show","400");
|
|
prev.parents(".wizard-fieldset").prev(".wizard-fieldset").addClass("show","400");
|
|
currentActiveStep.removeClass("active").prev().removeClass("activated").addClass("active","400");
|
|
$(document).find(".wizard-fieldset").each(function(){
|
|
if($(this).hasClass("show")){
|
|
var formAtrr = $(this).attr("data-tab-content");
|
|
$(document).find(".form-wizard-list .form-wizard-step-item").each(function(){
|
|
if($(this).attr("data-attr") == formAtrr){
|
|
$(this).addClass("active");
|
|
var innerWidth = $(this).innerWidth();
|
|
var position = $(this).position();
|
|
$(document).find(".form-wizard-step-move").css({"left": position.left, "width": innerWidth});
|
|
}else{
|
|
$(this).removeClass("active");
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
//click on form submit button
|
|
$(document).on("click",".form-wizard .form-wizard-submit" , function(){
|
|
var parentFieldset = $(this).parents(".wizard-fieldset");
|
|
var currentActiveStep = $(this).parents(".form-wizard").find(".form-wizard-list .active");
|
|
parentFieldset.find(".wizard-required").each(function() {
|
|
var thisValue = $(this).val();
|
|
if( thisValue == "" ) {
|
|
$(this).siblings(".wizard-form-error").show();
|
|
}
|
|
else {
|
|
$(this).siblings(".wizard-form-error").hide();
|
|
}
|
|
});
|
|
});
|
|
// focus on input field check empty or not
|
|
$(".form-control").on("focus", function(){
|
|
var tmpThis = $(this).val();
|
|
if(tmpThis == "" ) {
|
|
$(this).parent().addClass("focus-input");
|
|
}
|
|
else if(tmpThis !="" ){
|
|
$(this).parent().addClass("focus-input");
|
|
}
|
|
}).on("blur", function(){
|
|
var tmpThis = $(this).val();
|
|
if(tmpThis == "" ) {
|
|
$(this).parent().removeClass("focus-input");
|
|
$(this).siblings(".wizard-form-error").show();
|
|
}
|
|
else if(tmpThis !="" ){
|
|
$(this).parent().addClass("focus-input");
|
|
$(this).siblings(".wizard-form-error").hide();
|
|
}
|
|
});
|
|
});
|
|
// =============================== Wizard Step Js End ================================
|
|
</script>';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="card border-0">
|
|
<div class="card-body">
|
|
<h6 class="mb-1.5 text-xl">Numbering wizard</h6>
|
|
<p class="text-neutral-400">Fill up your details and proceed next steps.</p>
|
|
|
|
<!-- Form Wizard Start -->
|
|
<div class="form-wizard">
|
|
<form action="#" method="post">
|
|
<div class="form-wizard-header overflow-x-auto scroll-sm pb-2 mt-8 mb-8">
|
|
<ul class="list-unstyled form-wizard-list">
|
|
<li class="form-wizard-list__item active">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">1</span>
|
|
</div>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">2</span>
|
|
</div>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">3</span>
|
|
</div>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">4</span>
|
|
</div>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">5</span>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<fieldset class="wizard-fieldset show">
|
|
<h6 class="text-base text-neutral-400 mb-3">Personal Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">First Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter First Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Last Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Last Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Email*</label>
|
|
<div class="relative">
|
|
<input type="email" class="form-control wizard-required" placeholder="Enter Email" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Confirm Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Confirm Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group text-end">
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<h6 class="text-base text-neutral-400 mb-3">Account Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">User Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter User Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">Card Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Card Number " required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">Card Expiration(MM/YY)*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Card Expiration" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">CVV Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="CVV Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<h6 class="text-base text-neutral-400 mb-3">Bank Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Bank Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Bank Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Branch Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Branch Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Account Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Account Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Account Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Account Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<h6 class="text-base text-neutral-400 mb-3">Payment Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Holder Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Holder Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Card Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Card Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">CVC Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="CVC Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Expiry Date*</label>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-6">
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<div class="relative">
|
|
<select class="form-control form-select">
|
|
<option value="">Date</option>
|
|
<option value="">1</option>
|
|
<option value="">2</option>
|
|
<option value="">3</option>
|
|
<option value="">4</option>
|
|
<option value="">5</option>
|
|
<option value="">6</option>
|
|
<option value="">7</option>
|
|
<option value="">8</option>
|
|
<option value="">9</option>
|
|
<option value="">10</option>
|
|
<option value="">11</option>
|
|
<option value="">12</option>
|
|
<option value="">13</option>
|
|
<option value="">14</option>
|
|
<option value="">15</option>
|
|
<option value="">16</option>
|
|
<option value="">17</option>
|
|
<option value="">18</option>
|
|
<option value="">19</option>
|
|
<option value="">20</option>
|
|
<option value="">21</option>
|
|
<option value="">22</option>
|
|
<option value="">23</option>
|
|
<option value="">24</option>
|
|
<option value="">25</option>
|
|
<option value="">26</option>
|
|
<option value="">27</option>
|
|
<option value="">28</option>
|
|
<option value="">29</option>
|
|
<option value="">30</option>
|
|
<option value="">31</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<div class="relative">
|
|
<select class="form-control form-select">
|
|
<option value="">Month</option>
|
|
<option value="">jan</option>
|
|
<option value="">Feb</option>
|
|
<option value="">March</option>
|
|
<option value="">April</option>
|
|
<option value="">May</option>
|
|
<option value="">June</option>
|
|
<option value="">Jully</option>
|
|
<option value="">August</option>
|
|
<option value="">Sept</option>
|
|
<option value="">Oct</option>
|
|
<option value="">Nov</option>
|
|
<option value="">Dec</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<div class="relative">
|
|
<select class="form-control form-select">
|
|
<option value="">Years</option>
|
|
<option value="">2019</option>
|
|
<option value="">2020</option>
|
|
<option value="">2021</option>
|
|
<option value="">2022</option>
|
|
<option value="">2023</option>
|
|
<option value="">2025</option>
|
|
<option value="">2025</option>
|
|
<option value="">2026</option>
|
|
<option value="">2027</option>
|
|
<option value="">2028</option>
|
|
<option value="">2029</option>
|
|
<option value="">2030</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-12">
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<div class="text-center mb-2.5">
|
|
<img src="{{ asset('assets/images/gif/success-img3.gif') }}" alt="" class="gif-image mb-6 mx-auto">
|
|
<h6 class="text-base text-neutral-600">Congratulations </h6>
|
|
<p class="text-neutral-400 text-sm mb-0">Well done! You have successfully completed.</p>
|
|
</div>
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-submit btn btn-primary-600 px-8">Publish</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<!-- Form Wizard End -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card border-0">
|
|
<div class="card-body">
|
|
<h6 class="mb-1.5 text-xl">Numbering wizard with label</h6>
|
|
<p class="text-neutral-400">Fill up your details and proceed next steps.</p>
|
|
|
|
<!-- Form Wizard Start -->
|
|
<div class="form-wizard">
|
|
<form action="#" method="post">
|
|
<div class="form-wizard-header overflow-x-auto scroll-sm pb-2 mt-8 mb-8">
|
|
<ul class="list-unstyled form-wizard-list">
|
|
<li class="form-wizard-list__item active">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">1</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Create Account </span>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">2</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Import Data</span>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">3</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Setup Privacy</span>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">4</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Add Location</span>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">5</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Completed</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<fieldset class="wizard-fieldset show">
|
|
<h6 class="text-base text-neutral-400 mb-3">Personal Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">First Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter First Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Last Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Last Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Email*</label>
|
|
<div class="relative">
|
|
<input type="email" class="form-control wizard-required" placeholder="Enter Email" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Confirm Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Confirm Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group text-end">
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<h6 class="text-base text-neutral-400 mb-3">Account Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">User Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter User Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">Card Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Card Number " required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">Card Expiration(MM/YY)*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Card Expiration" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">CVV Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="CVV Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<h6 class="text-base text-neutral-400 mb-3">Bank Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Bank Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Bank Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Branch Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Branch Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Account Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Account Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Account Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Account Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<h6 class="text-base text-neutral-400 mb-3">Payment Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Holder Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Holder Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Card Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Card Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">CVC Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="CVC Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Expiry Date*</label>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-6">
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<div class="relative">
|
|
<select class="form-control form-select">
|
|
<option value="">Date</option>
|
|
<option value="">1</option>
|
|
<option value="">2</option>
|
|
<option value="">3</option>
|
|
<option value="">4</option>
|
|
<option value="">5</option>
|
|
<option value="">6</option>
|
|
<option value="">7</option>
|
|
<option value="">8</option>
|
|
<option value="">9</option>
|
|
<option value="">10</option>
|
|
<option value="">11</option>
|
|
<option value="">12</option>
|
|
<option value="">13</option>
|
|
<option value="">14</option>
|
|
<option value="">15</option>
|
|
<option value="">16</option>
|
|
<option value="">17</option>
|
|
<option value="">18</option>
|
|
<option value="">19</option>
|
|
<option value="">20</option>
|
|
<option value="">21</option>
|
|
<option value="">22</option>
|
|
<option value="">23</option>
|
|
<option value="">24</option>
|
|
<option value="">25</option>
|
|
<option value="">26</option>
|
|
<option value="">27</option>
|
|
<option value="">28</option>
|
|
<option value="">29</option>
|
|
<option value="">30</option>
|
|
<option value="">31</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<div class="relative">
|
|
<select class="form-control form-select">
|
|
<option value="">Month</option>
|
|
<option value="">jan</option>
|
|
<option value="">Feb</option>
|
|
<option value="">March</option>
|
|
<option value="">April</option>
|
|
<option value="">May</option>
|
|
<option value="">June</option>
|
|
<option value="">Jully</option>
|
|
<option value="">August</option>
|
|
<option value="">Sept</option>
|
|
<option value="">Oct</option>
|
|
<option value="">Nov</option>
|
|
<option value="">Dec</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<div class="relative">
|
|
<select class="form-control form-select">
|
|
<option value="">Years</option>
|
|
<option value="">2019</option>
|
|
<option value="">2020</option>
|
|
<option value="">2021</option>
|
|
<option value="">2022</option>
|
|
<option value="">2023</option>
|
|
<option value="">2025</option>
|
|
<option value="">2025</option>
|
|
<option value="">2026</option>
|
|
<option value="">2027</option>
|
|
<option value="">2028</option>
|
|
<option value="">2029</option>
|
|
<option value="">2030</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-span-12">
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<div class="text-center mb-2.5">
|
|
<img src="{{ asset('assets/images/gif/success-img3.gif') }}" alt="" class="gif-image mb-6 mx-auto">
|
|
<h6 class="text-base text-neutral-600">Congratulations </h6>
|
|
<p class="text-neutral-400 text-sm mb-0">Well done! You have successfully completed.</p>
|
|
</div>
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-submit btn btn-primary-600 px-8">Publish</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<!-- Form Wizard End -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card border-0">
|
|
<div class="card-body">
|
|
<h6 class="mb-1.5 text-xl">Order By Following Step</h6>
|
|
<p class="text-neutral-400">Fill up your details and proceed next steps.</p>
|
|
|
|
<!-- Form Wizard Start -->
|
|
<div class="form-wizard">
|
|
<form action="#" method="post">
|
|
<div class="form-wizard-header overflow-x-auto scroll-sm pb-2 mt-8 mb-8">
|
|
<ul class="list-unstyled form-wizard-list style-two">
|
|
<li class="form-wizard-list__item active">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">1</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Order Details </span>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">2</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Manufactures</span>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">3</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Order Plan</span>
|
|
</li>
|
|
<li class="form-wizard-list__item">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">4</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Completed</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<fieldset class="wizard-fieldset show">
|
|
<h6 class="text-base text-neutral-400 mb-3">Personal Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">First Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter First Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Last Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Last Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Email*</label>
|
|
<div class="relative">
|
|
<input type="email" class="form-control wizard-required" placeholder="Enter Email" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Confirm Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Confirm Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group text-end">
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<h6 class="text-base text-neutral-400 mb-3">Account Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">User Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter User Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">Card Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Card Number " required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">Card Expiration(MM/YY)*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Card Expiration" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">CVV Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="CVV Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<h6 class="text-base text-neutral-400 mb-3">Bank Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Bank Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Bank Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Branch Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Branch Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Account Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Account Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Account Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Account Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<div class="text-center mb-2.5">
|
|
<img src="{{ asset('assets/images/gif/success-img3.gif') }}" alt="" class="gif-image mb-6 mx-auto">
|
|
<h6 class="text-base text-neutral-600">Congratulations </h6>
|
|
<p class="text-neutral-400 text-sm mb-0">Well done! You have successfully completed.</p>
|
|
</div>
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-submit btn btn-primary-600 px-8">Publish</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<!-- Form Wizard End -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card border-0">
|
|
<div class="card-body">
|
|
<h6 class="mb-1.5 text-xl">Wizard with beside label</h6>
|
|
<p class="text-neutral-400">Fill up your details and proceed next steps.</p>
|
|
|
|
<!-- Form Wizard Start -->
|
|
<div class="form-wizard">
|
|
<form action="#" method="post">
|
|
<div class="form-wizard-header overflow-x-auto scroll-sm pb-2 mt-8 mb-8">
|
|
<ul class="list-unstyled form-wizard-list style-three">
|
|
<li class="form-wizard-list__item flex items-center gap-2 active">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">1</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Order Details </span>
|
|
</li>
|
|
<li class="form-wizard-list__item flex items-center gap-2">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">2</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Manufactures</span>
|
|
</li>
|
|
<li class="form-wizard-list__item flex items-center gap-2">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">3</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Order Plan</span>
|
|
</li>
|
|
<li class="form-wizard-list__item flex items-center gap-2">
|
|
<div class="form-wizard-list__line">
|
|
<span class="count">4</span>
|
|
</div>
|
|
<span class="text text-xs font-semibold">Completed</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<fieldset class="wizard-fieldset show">
|
|
<h6 class="text-base text-neutral-400 mb-3">Personal Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">First Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter First Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Last Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Last Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Email*</label>
|
|
<div class="relative">
|
|
<input type="email" class="form-control wizard-required" placeholder="Enter Email" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Confirm Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Confirm Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group text-end">
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<h6 class="text-base text-neutral-400 mb-3">Account Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">User Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter User Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">Card Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Card Number " required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">Card Expiration(MM/YY)*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Card Expiration" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-4">
|
|
<label class="inline-block mb-2">CVV Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="CVV Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<label class="inline-block mb-2">Password*</label>
|
|
<div class="relative">
|
|
<input type="password" class="form-control wizard-required" placeholder="Enter Password" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<h6 class="text-base text-neutral-400 mb-3">Bank Information</h6>
|
|
<div class="grid grid-cols-1 sm:grid-cols-12 gap-4">
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Bank Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Bank Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Branch Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Branch Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Account Name*</label>
|
|
<div class="relative">
|
|
<input type="text" class="form-control wizard-required" placeholder="Enter Account Name" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12 sm:col-span-6">
|
|
<label class="inline-block mb-2">Account Number*</label>
|
|
<div class="relative">
|
|
<input type="number" class="form-control wizard-required" placeholder="Enter Account Number" required>
|
|
<div class="wizard-form-error"></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-span-12">
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-next-btn btn btn-primary-600 px-8">Next</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset class="wizard-fieldset">
|
|
<div class="text-center mb-2.5">
|
|
<img src="{{ asset('assets/images/gif/success-img3.gif') }}" alt="" class="gif-image mb-6 mx-auto">
|
|
<h6 class="text-base text-neutral-600">Congratulations </h6>
|
|
<p class="text-neutral-400 text-sm mb-0">Well done! You have successfully completed.</p>
|
|
</div>
|
|
<div class="form-group flex items-center justify-end gap-2">
|
|
<button type="button" class="form-wizard-previous-btn btn bg-neutral-400 border-neutral-400 hover:bg-neutral-500 hover:border-neutral-500 text-white px-8">Back</button>
|
|
<button type="button" class="form-wizard-submit btn btn-primary-600 px-8">Publish</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<!-- Form Wizard End -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
|
|
|