Your IP : 216.73.216.79
<?php
use yii\widgets\ActiveForm;
use yii\helpers\Url;
use Yii;
?>
<!-- script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://unpkg.com/pristinejs@latest/dist/pristine.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.3/dist/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.js"></script>
<!-- filerobot -->
<script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>
<!-- css -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mdbassit/Coloris@latest/dist/coloris.min.css"/>
<!-- Filepond stylesheet -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400"></link>
<style>
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");
@import url("https://fonts.googleapis.com/css?family=Roboto");
* {
box-sizing: border-box;
}
body {
color: #2b2c48;
font-family: "Jost", sans-serif;
background: rgb(166, 34, 195);
background: linear-gradient(135deg, rgba(166, 34, 195, 1) 0%, rgba(253, 45, 45, 1) 100%);
min-height: 100vh;
display: flex;
/* flex-wrap: wrap;*/
padding: 20px;
}
.card {
/* max-width: 1000px;*/
width: 200vh;
margin: auto;
overflow-y: auto;
position: relative;
z-index: 1;
overflow-x: hidden;
background-color: white;
display: flex;
transition: 0.3s;
flex-direction: column;
border-radius: 10px;
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
height: 90vh;
}
.logo {
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
}
.card[data-state="#about"] .card-main {
padding-top: 0;
}
.card.is-active .card-header {
height: 80px;
}
.card.is-active .card-cover {
height: 100px;
top: -50px;
}
.card.is-active .card-avatar {
transform: none;
left: 20px;
width: 50px;
height: 50px;
bottom: 10px;
}
.card.is-active .card-fullname,
.card.is-active .card-jobtitle {
left: 32px;
transform: none;
}
.card.is-active .card-fullname {
bottom: 18px;
font-size: 19px;
}
.card.is-active .card-jobtitle {
bottom: 16px;
letter-spacing: 1px;
font-size: 10px;
}
.card-header {
position: relative;
display: flex;
/* height: 200px;*/
height: 80px;
flex-shrink: 0;
width: 100%;
transition: 0.3s;
position: sticky;
top: 0;
z-index: 99999999;
}
.card-header * {
transition: 0.3s;
}
.card-cover {
background: rgb(255,255,255);
background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 31%, rgba(255,0,61,1) 100%);
width: 100%;
height: 100%;
position: absolute;
/* height: 160px;*/
height: 80px;
top: -20%;
left: 0;
will-change: top;
background-size: cover;
background-position: center;
filter: blur(30px);
transform: scale(1.2);
transition: 0.5s;
}
.card-avatar {
width: 100px;
height: 100px;
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
border-radius: 50%;
-o-object-position: center;
object-position: center;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(-64px);
}
.card-fullname {
position: absolute;
/* bottom: 0;*/
/* font-size: 22px;*/
font-weight: 700;
text-align: center;
white-space: nowrap;
/* transform: translateY(-10px) translateX(-50%);*/
/* left: 50%;*/
left: 32px;
transform: none;
bottom: 18px;
font-size: 19px;
}
.card-jobtitle {
position: absolute;
/* bottom: 0;*/
/* font-size: 11px;*/
white-space: nowrap;
font-weight: 500;
opacity: 0.7;
text-transform: uppercase;
letter-spacing: 1.5px;
margin: 0;
/* left: 50%;*/
/* transform: translateX(-50%) translateY(-7px);*/
left: 32px;
transform: none;
bottom: 16px;
letter-spacing: 1px;
font-size: 10px;
}
.card-main {
position: relative;
flex: 1;
display: flex;
padding-top: 10px;
flex-direction: column;
}
.card-subtitle {
font-weight: 700;
font-size: 13px;
margin-bottom: 8px;
}
.card-content {
padding: 20px;
}
.card-desc {
line-height: 1.6;
color: #636b6f;
font-size: 14px;
margin: 0;
font-weight: 400;
font-family: "DM Sans", sans-serif;
}
.card-social {
display: flex;
align-items: center;
padding: 0 20px;
margin-bottom: 30px;
}
.card-social svg {
fill: #a5b5ce;
width: 16px;
display: block;
transition: 0.3s;
}
.card-social a {
color: #8797a1;
height: 32px;
width: 32px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
transition: 0.3s;
background-color: rgba(93, 133, 193, 0.05);
border-radius: 50%;
margin-right: 10px;
}
.card-social a:hover svg {
fill: #637faa;
}
.card-social a:last-child {
margin-right: 0;
}
.card-buttons {
display: flex;
background-color: #fff;
margin-top: auto;
position: sticky;
/* bottom: 0;*/
top: 80px;
/* left: 0;*/
z-index: 999999999;
}
.card-buttons button {
flex: 1 1 auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background: 0;
font-size: 13px;
border: 0;
padding: 15px 5px;
cursor: pointer;
color: #5c5c6d;
transition: 0.3s;
font-family: "Jost", sans-serif;
font-weight: 500;
outline: 0;
border-bottom: 3px solid transparent;
}
.card-buttons button.is-active,
.card-buttons button:hover {
color: #2b2c48;
/* border-bottom: 3px solid #8a84ff;*/
border-bottom: 3px solid #fe517b;
background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgba(211, 226, 255, 0.4) 100%);
}
.card-section {
display: none;
}
.card-section.is-active {
display: block;
-webkit-animation: fadeIn 0.6s both;
animation: fadeIn 0.6s both;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
transform: translatey(40px);
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translatey(40px);
}
100% {
opacity: 1;
}
}
.card-timeline {
margin-top: 30px;
position: relative;
}
.card-timeline:after {
background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%);
content: "";
left: 42px;
width: 2px;
top: 0;
height: 100%;
position: absolute;
content: "";
}
.card-item {
position: relative;
padding-left: 60px;
padding-right: 20px;
padding-bottom: 30px;
z-index: 1;
}
.card-item:last-child {
padding-bottom: 5px;
}
.card-item:after {
content: attr(data-year);
width: 10px;
position: absolute;
top: 0;
left: 37px;
width: 8px;
height: 8px;
line-height: 0.6;
border: 2px solid #fff;
font-size: 11px;
text-indent: -35px;
border-radius: 50%;
color: rgba(134, 134, 134, 0.7);
background: linear-gradient(to bottom, #a0aee3 0%, #516acc 100%);
}
.card-item-title {
font-weight: 500;
font-size: 14px;
margin-bottom: 5px;
}
.card-item-desc {
font-size: 13px;
color: #6f6f7b;
line-height: 1.5;
font-family: "DM Sans", sans-serif;
}
.card-contact-wrapper {
margin-top: 20px;
}
.card-contact {
display: flex;
align-items: center;
font-size: 13px;
color: #6f6f7b;
font-family: "DM Sans", sans-serif;
line-height: 1.6;
cursor: pointer;
}
.card-contact+.card-contact {
margin-top: 16px;
}
.card-contact svg {
flex-shrink: 0;
width: 30px;
min-height: 34px;
margin-right: 12px;
transition: 0.3s;
padding-right: 12px;
border-right: 1px solid #dfe2ec;
}
.contact-me {
border: 0;
outline: none;
background: linear-gradient(to right, rgba(83, 200, 239, 0.8) 0%, rgba(81, 106, 204, 0.8) 96%);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
color: #fff;
padding: 12px 16px;
width: 100%;
border-radius: 5px;
margin-top: 25px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
font-family: "Jost", sans-serif;
transition: 0.3s;
}
/* PristineJS Bootstrap Fix */
.input-group.is-invalid > input.form-control,
.form-group.is-invalid > input.form-control {
border-color: #dc3545;
padding-right: 2.25rem !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
.input-group.is-valid > input.form-control,
.form-group.is-valid > input.form-control {
border-color: #28a745;
padding-right: 2.25rem !important;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
/* scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 5px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255, 255, 255, 0.3);
}
button:disabled {
cursor:not-allowed;
}
</style>
<!-- html -->
<div class="card" data-state="#about" x-data="firstTimeSetup">
<div class="card-header">
<div class="card-cover"></div>
<!-- <img class="card logo" style="width:260px" src="https://portalv2.dynaweb4.work/uploads/topbarlogo_20220302204803.png" alt="avatar" /> -->
<h1 class="card-fullname">Dynaweb 4 Onboarding</h1>
<h2 class="card-jobtitle">First time setup</h2>
</div>
<div class="card-buttons">
<button data-section="#about" class="is-active">1. General Info</button>
<button data-section="#login" disabled>2. Images</button>
<button data-section="#uistyle" disabled>3. CMS setup.</button>
<button data-section="#summary" disabled>4. User Info</button>
</div>
<div class="card-main">
<div class="card-section is-active" id="about">
<div class="card-content">
<?php $form = ActiveForm::begin(['action' => Url::to(['create']), 'id' => 'form-about', 'class'=>'requires-validation', "options" => ["novalidate" => true]]); ?>
<div class="alert alert-info">
<div class="card-subtitle">Let customize your backend with your basic info</div>
<p class="card-desc">Thanks for using dynaweb, this section will let you provide us with your basic info.</p>
</div>
<p>
<div class="form-group mb-3">
<label class="form-label">Site Title</label>
<input type="text" name="site_title" x-model="form.site_title" class="form-control" required>
<div class="form-text">Give your site title, this will display on browser tab and will be title for general page.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Description</label>
<input type="text" class="form-control" x-model="form.description" required>
<div class="form-text">Put some description for your login form, this will help people login on.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Author</label>
<input type="text" class="form-control" x-model="form.author" required>
<div class="form-text">Site author name.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Keyword tags</label>
<input type="text" class="form-control" required>
<div class="form-text">Keyword and tags.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Version</label>
<input type="text" class="form-control" required>
<div class="form-text">Your site version.</div>
</div>
<div class="text-end">
<button type="button" data-section="#login" @click="next($event)" class="btn btn-primary btn-next">Next</button>
</div>
</p>
<?php ActiveForm::end(); ?>
</div>
</div>
<div class="card-section" id="login">
<div class="card-content">
<?php $form = ActiveForm::begin(['action' => Url::to(['create']), 'id' => 'form-login', 'class'=>'requires-validation', "options" => ["novalidate" => true]]); ?>
<div class="alert alert-info">
<div class="card-subtitle">Images</div>
<p class="card-desc">Upload images and customize your site to your liking.</p>
</div>
<p>
<div class="form-group mb-3">
<label class="form-label">Favicon</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/16" width="100px" height="100px"/>
</div>
<input type="file" x-on:change="selectFile($event, 'favicon')" class="form-control filepond" required>
<div class="form-text">Favicon is icon that will appear alongside with your browser title.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Sidebar Logo</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/170" width="170px" height="170px"/>
</div>
<input type="file" x-on:change="selectFile($event, 'sidebar_logo')" class="form-control" required>
<div class="form-text">Present your site with your own logo, this logo will appear on the left site menu, it will work as a branding for your site.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Dashboard banner</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/950x360" width="300"/>
</div>
<input type="file" x-on:change="selectFile($event, 'dashboard_banner')" class="form-control" required>
<div class="form-text">Make an impression with your banner, for your system, this banner will appear on dashboard all the time.</div>
</div>
<div class="form-group mb-3">
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/1980x1080" width="300"/>
</div>
<label class="form-label">Login background</label>
<input type="file" x-on:change="selectFile($event, 'login_background')" class="form-control" required>
<div class="form-text">Put some beautiful background for your login form.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Login Logo</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/240x60" width="200"/>
</div>
<input type="file" x-on:change="selectFile($event, 'login_logo')" class="form-control" required>
<div class="form-text">Put some beautiful background for your login form.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Login Title</label>
<input type="text" x-model="form.login_title" class="form-control" required>
<div class="form-text">Display Title for your login.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Login Message</label>
<input type="text" x-model="form.login_message" class="form-control" required>
<div class="form-text">Display Message for your login.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Login Copyright</label>
<input type="text" x-model="form.login_copyright" class="form-control" required>
<div class="form-text">Display Copyright for your login.</div>
</div>
<div class="text-end">
<button type="button" data-section="#uistyle" @click="next($event)" class="btn btn-primary btn-next">Next</button>
</div>
</p>
<?php ActiveForm::end(); ?>
</div>
</div>
<div class="card-section" id="uistyle">
<div class="card-content">
<?php $form = ActiveForm::begin(['action' => Url::to(['create']), 'id' => 'form-uistyle', 'class'=>'requires-validation', "options" => ["novalidate" => true]]); ?>
<div class="alert alert-info">
<div class="card-subtitle">Cms Setup</div>
<p class="card-desc">Configure your cms looks and feel.</p>
</div>
<p>
<div class="mb-3">
<label class="form-label">Cms Title</label>
<input type="text" class="form-control" x-model="form.cms_title">
<div class="form-text">Title for your cms.</div>
</div>
<div class="mb-3">
<label class="form-label">Logo</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/160" width="100px" height="100px"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_logo')" class="form-control">
<div class="form-text">Cms logo</div>
</div>
<div class="mb-3">
<label class="form-label">Top Bar Logo</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/240x60" width="200"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_top_logo')" class="form-control">
<div class="form-text">Top bar to represent your cms.</div>
</div>
<div class="mb-3">
<label class="form-label">Preloader Logo</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/100" width="100"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_preloader_logo')" class="form-control">
<div class="form-text">Top bar to represent your cms.</div>
</div>
<div class="mb-3">
<label class="form-label">Preloader Background</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/1980x1080" width="300"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_preloader_background')" class="form-control">
<div class="form-text">Top bar to represent your cms.</div>
</div>
<div class="mb-3">
<label class="form-label">Footer Logo</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/240x60" width="200"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_footer_logo')" class="form-control">
<div class="form-text">Top bar to represent your cms.</div>
</div>
<div class="mb-3">
<label class="form-label">Primary Color</label>
<input type="text" x-model="form.cms_primary_color" data-coloris class="form-control">
<div class="form-text">Primary color swatch.</div>
</div>
<div class="mb-3">
<label class="form-label">Secondary Color</label>
<input type="text" x-model="form.cms_secondary_color" data-coloris class="form-control">
<div class="form-text">Secondary color swatch.</div>
</div>
<div class="mb-3">
<label class="form-label">Copyright info</label>
<input type="text" x-model="form.cms_copyright" class="form-control" >
<div class="form-text">Copyright info for your cms.</div>
</div>
<div class="mb-3">
<label class="form-label">Favicon</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/16" width="100px" height="100px"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_favicon')" class="form-control">
<div class="form-text">Favicon for cms, will appear at browser tab.</div>
</div>
<div class="mb-3">
<label class="form-label">Login title</label>
<input type="text" class="form-control" x-model="form.cms_login_title">
<div class="form-text">Your cms login title.</div>
</div>
<div class="mb-3">
<label class="form-label">Login message</label>
<input type="text" class="form-control" x-model="form.cms_login_message">
<div class="form-text">Your cms login message.</div>
</div>
<div class="mb-3">
<label class="form-label">Login Logo</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/240x60" width="200"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_login_logo')" class="form-control">
<div class="form-text">Loogin logo image.</div>
</div>
<div class="mb-3">
<label class="form-label">Loggedin Logo</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/240x60" width="200"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_loggedin_logo')" class="form-control">
<div class="form-text">Looggedin logo image.</div>
</div>
<div class="mb-3">
<label class="form-label">Login Background</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/1980x1080" width="300"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_login_background')" class="form-control">
<div class="form-text">Login Background Image.</div>
</div>
<div class="mb-3">
<label class="form-label">Register Logo</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/240x60" width="200"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_register_logo')" class="form-control">
<div class="form-text">Register Logo.</div>
</div>
<div class="mb-3">
<label class="form-label">Register Background</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/1980x1080" width="300"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_register_background')" class="form-control">
<div class="form-text">Registration Background.</div>
</div>
<div class="mb-3">
<label class="form-label">Chatbot Logo</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/100" width="100"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_chatbot_logo')" class="form-control">
<div class="form-text">Logo for chatbot.</div>
</div>
<div class="mb-3">
<label class="form-label">Chatbot Main Icon</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/100" width="100"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_chatbot_main_icon')" class="form-control">
<div class="form-text">Icon for chatbot.</div>
</div>
<div class="mb-3">
<label class="form-label">Chatbot Admin Icon</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/100" width="100"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_chatbot_admin_icon')" class="form-control">
<div class="form-text">Icon for chatbot.</div>
</div>
<div class="mb-3">
<label class="form-label">Chatbot User Icon</label>
<div class="mb-3 p-2">
<img class="img-thumbnail output-img" src="https://placehold.co/100" width="100"/>
</div>
<input type="file" x-on:change="selectFile($event, 'cms_chatbot_user_icon')" class="form-control">
<div class="form-text">Icon for chatbot.</div>
</div>
<div class="text-end">
<button type="button" data-section="#summary" @click="next($event)" class="btn btn-primary btn-next">Next</button>
</div>
</p>
<?php ActiveForm::end(); ?>
</div>
</div>
<div class="card-section" id="summary">
<div class="card-content">
<?php $form = ActiveForm::begin(['action' => Url::to(['create']), 'id' => 'form-summary', 'class'=>'requires-validation', "options" => ["novalidate" => true]]); ?>
<div class="alert alert-info">
<div class="card-subtitle">User Information</div>
<p class="card-desc">User, setting and information</p>
</div>
<p>
<div class="form-group mb-3">
<label class="form-label">Username</label>
<input type="text" x-model="form.username" class="form-control" required>
<div class="form-text">Your admin username</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Fullname</label>
<input type="text" x-model="form.fullname" class="form-control" required>
<div class="form-text">Your Admin fullname.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Email</label>
<input type="email" x-model="form.email" class="form-control" required>
<div class="form-text">Your admin email.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Password</label>
<input type="text" x-model="form.password" class="form-control" required>
<div class="form-text">Copyright for your site, this will be display at the bottom of login form.</div>
</div>
<div class="form-group mb-3">
<label class="form-label">Confirm password</label>
<input type="text" x-model="form.confirm_password" class="form-control" required>
<div class="form-text">Copyright for your site, this will be display at the bottom of login form.</div>
</div>
</p>
<button type="button" @click="submit" class="contact-me">Finish</button>
<?php ActiveForm::end(); ?>
</div>
</div>
</div>
</div>
<!-- Modal image editor -->
<div class="modal fade" data-bs-focus="false" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-body">
<div>
</div>
<div id="editor_container"></div>
</div>
</div>
</div>
</div>
<!-- </div> -->
<script>
const buttons = document.querySelectorAll(".card-buttons button");
const sections = document.querySelectorAll(".card-section");
const card = document.querySelector(".card");
const handleButtonClick = e => {
const targetSection = e.target.getAttribute("data-section");
const btnTargetSection = e.target.getAttribute("data-section");
const section = document.querySelector(targetSection);
if (targetSection !== "#about") {
card.scrollTop = 0;
card.classList.add("is-active");
} else {
card.classList.remove("is-active");
}
card.setAttribute("data-state", targetSection);
sections.forEach(s => s.classList.remove("is-active"));
buttons.forEach(b => b.classList.remove("is-active"));
e.target.classList.add("is-active");
section.classList.add("is-active");
if (e.target.innerHTML == 'Next') {
buttons.forEach(b => {
if (b.dataset.section == targetSection) {
b.classList.add("is-active");
b.disabled = false;
}
})
}
};
buttons.forEach(btn => {
btn.addEventListener("click", handleButtonClick);
});
// return a promise that resolves with a File instance
function urltoFile(url, filename, mimeType){
if (url.startsWith('data:')) {
var arr = url.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[arr.length - 1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
var file = new File([u8arr], filename, {type:mime || mimeType});
return Promise.resolve(file);
}
return fetch(url)
.then(res => res.arrayBuffer())
.then(buf => new File([buf], filename,{type:mimeType}));
}
</script>
<!-- alpine -->
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('firstTimeSetup', () => ({
form: {
<?= Yii::$app->request->csrfParam ?>: "<?= Yii::$app->request->csrfToken ?>",
site_title: null,
description: null,
author: null,
keyword_tags: null,
primary_color: null,
secondary_color: null,
favicon: null,
sidebar_logo: null,
dashboard_banner: null,
login_background: null,
login_title: null,
login_message: null,
login_copyright: null,
cms_title: null,
cms_logo: null,
cms_top_logo: null,
cms_preloader_logo: null,
cms_preloader_background: null,
cms_footer_logo: null,
cms_primary_color: null,
cms_secondary_color: null,
cms_copyright:null,
cms_favicon:null,
cms_login_title:null,
cms_login_message:null,
cms_login_logo:null,
cms_loggedin_logo:null,
cms_login_background:null,
cms_register_logo:null,
cms_register_background:null,
cms_chatbot_logo:null,
cms_chatbot_main_icon:null,
cms_chatbot_admin_icon:null,
cms_chatbot_user_icon:null,
username: null,
fullname: null,
email: null,
password: null,
confirm_password: null
},
pristine_form: undefined,
pristine: undefined,
async selectFile($event, name) {
parent = this;
// var output = document.getElementById('output');
var output = $(event.target).parent().find('.output-img')[0]
output.src = URL.createObjectURL(event.target.files[0]);
output.onload = function() {
URL.revokeObjectURL(output.src) // free memory
}
const myModal = new bootstrap.Modal(document.getElementById('exampleModal'))
myModal.show()
const { TABS, TOOLS } = window.FilerobotImageEditor;
const config = {
source: output.src,
onSave: (editedImageObject, designState) => {
// console.log('saved', editedImageObject, designState)
output.src = editedImageObject.imageBase64
urltoFile(editedImageObject.imageBase64, 'image.jpg','image/png')
.then(function(file){
parent.form[name] = file
});
filerobotImageEditor.terminate();
},
closeAfterSave: true,
Rotate: { angle: 90, componentType: 'slider' },
tabsIds: [TABS.ADJUST, TABS.ANNOTATE, TABS.WATERMARK], // or ['Adjust', 'Annotate', 'Watermark']
defaultTabId: TABS.ANNOTATE, // or 'Annotate'
defaultToolId: TOOLS.TEXT, // or 'Text'
};
const filerobotImageEditor = new FilerobotImageEditor(
document.querySelector('#editor_container'),
config,
);
filerobotImageEditor.render({
onClose: (closingReason) => {
myModal.hide()
console.log('Closing reason', closingReason);
filerobotImageEditor.terminate();
},
// onBeforeSave: (imageFileInfo) => {
// filerobotImageEditor.getCurrentImgData();
// return false;
// },
});
},
init() {
this.$nextTick(function(){
// FilePond.parse(document.body);
});
},
async next($event) {
this.pristine_form = $event.target.form;
this.pristine = new Pristine(this.pristine_form, {
classTo: 'form-group',
errorClass: 'is-invalid',
successClass: 'is-valid',
errorTextParent: 'form-group',
errorTextTag: 'div',
errorTextClass: 'invalid-feedback'
});
let valid = this.pristine.validate();
if (valid === false) {
console.log(this.pristine.getErrors());
Swal.fire({
title: "Error!",
text: "Required field must be fill",
icon: "error"
});
return;
}
handleButtonClick($event);
},
async submit() {
try {
this.pristine_form = document.getElementById('form-summary');
this.pristine = new Pristine(this.pristine_form, {
classTo: 'form-group',
errorClass: 'is-invalid',
successClass: 'is-valid',
errorTextParent: 'form-group',
errorTextTag: 'div',
errorTextClass: 'invalid-feedback'
});
let valid = this.pristine.validate();
if (valid === false) {
// console.log(this.pristine.getErrors());
Swal.fire({
title: "Error!",
text: "Required field must be fill",
icon: "error"
});
return;
}
const formData = new FormData();
for(const name in this.form) {
if(this.form[name]) {
formData.append(name, this.form[name]);
}
}
const result = await fetch('<?= Url::to(['create']) ?>', {
method: "POST",
body: formData,
mode: 'no-cors'
});
const response = await result.json();
if(response.success) {
Swal.fire({
title: "Onboarding Process Complete!!",
text: "Onboarding process is complete, you will be redirect to your homepage.",
icon: "success"
});
} else {
Swal.fire({
title: "Something wrong!!",
text: "Error saving.",
icon: "error"
});
}
// console.log(response);
} catch(error) {
console.log(error)
}
}
}));
})
</script>