Viewing file:  write_document.blade.php (23.47 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.customer')
@section('title')
{{trans('customer.create_documents')}}
@endsection
@section('extra-css')
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<style>
.use-case-side-color {
background-color: #f7f9ff;
padding: 25px 10px;
border-radius: 5px;
}
#text-area{
min-height: 380px;
}
.note-editable {
height: 390px;
}
.content-opacity {
opacity: 0.5;
}
.spinner {
width: 56px;
height: 56px;
display: grid;
border: 4.5px solid #0000;
border-radius: 50%;
border-color: #dbdcef #0000;
animation: spinner-e04l1k 1s infinite linear;
}
.spinner::before,
.spinner::after {
content: "";
grid-area: 1/1;
margin: 2.2px;
border: inherit;
border-radius: 50%;
}
.spinner::before {
border-color: #474bff #0000;
animation: inherit;
animation-duration: 0.5s;
animation-direction: reverse;
}
.spinner::after {
margin: 8.9px;
}
@keyframes spinner-e04l1k {
100% {
transform: rotate(1turn);
}
}
.generate_document_text{
margin-top: 200px;
text-align: center;
}
.generate_document_icon i{
margin-bottom: 10px;
color: blue;
font-size: 1.5rem;
}
.loader {
margin:0 auto;
position: absolute;
z-index: 999;
top: 270px;
width: 0%;
left: 56%;
}
@media(max-width: 700px){
.loader {
margin:0 auto;
position: absolute;
z-index: 999;
top: 270px;
width: 0%;
left: 40% !important;
}
}
</style>
@endsection
@section('content')
<!-- Content Header (Page header) -->
<div class="content-header custom-content-header">
<h5>{{trans('customer.generate_document')}}</h5>
<p class="m-0 section-heading-text">
<i class="fa fa-file mr-1 op-07"></i>
<span class="panel-name op-07">
{{trans('customer.customer_panel')}}
</span>
<i class="fa fa-angle-double-right ml-1 mr-1" aria-hidden="true"></i>
<span class="header-active">{{trans('customer.write_document')}}</span>
</p>
</div>
<!-- /.content-header -->
<!-- Main content -->
<div class="loader d-none" id="loader">
<div class="spinner"></div>
</div>
<section class="content" id="content-opacity">
<div class="row">
<div class="col-12 col-sm-12 mx-auto">
<div class="card">
<div class="card-header">
<h2 class="card-title">@lang('customer.write_document')</h2>
<a class="btn btn-info float-right" href="{{route('customer.write.document.index')}}">@lang('admin.form.button.back')</a>
</div>
<form method="post" role="form">
@csrf
<div class="card-body">
<div class="row">
<div class="col-lg-4">
<div class="row use-case-side-color">
<div class="col-lg-12">
<div class="form-group">
<label for="use_case">{{trans('customer.available_word')}} :
@if(auth()->user()->current_plan->is_word_limit == 'yes')
<span class="text-primary">{{trans('customer.unlimited_word_limit')}}</span>
@else
<span class="text-primary">{{auth()->user()->current_plan->available_word}}</span>
@endif
</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="name">{{trans('customer.document_name')}} <small class="font-italic">({{trans('customer.optional')}})</small></label>
<input type="text" class="form-control" name="name" id="name" placeholder="{{trans('customer.enter_your_document_name')}}">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="use_case">{{trans('customer.choose_use_case')}}</label>
<select name="use_case" id="use_case" class="form-control select2 select2-hidden-accessible" style="width: 100% !important;">
<option selected disabled>{{trans('customer.select_a_option')}}</option>
<option value="blog_idea_and_outline">{{trans('customer.blog_idea_and_outline')}}</option>
<option value="blog_section_writing_business_ideas">{{trans('customer.blog_section_writing_business_ideas')}}</option>
<option value="cover_letter">{{trans('customer.cover_letter')}}</option>
<option value="summarize">{{trans('customer.summarize')}}</option>
<option value="text_spinner_rewriter">{{trans('customer.text_spinner_rewriter')}}</option>
<option value="grammar_fixer">{{trans('customer.grammar_fixer')}}</option>
<option value="seo_title">{{trans('customer.seo_title')}}</option>
<option value="seo_keywords">{{trans('customer.seo_keywords')}}</option>
<option value="blog_article_section">{{trans('customer.blog_article_section')}}</option>
<option value="video_title">{{trans('customer.video_title')}}</option>
<option value="ad_title">{{trans('customer.ad_title')}}</option>
<option value="text_to_emoji">{{trans('customer.text_to_emoji')}}</option>
<option value="explain_like_i_am_5">{{trans('customer.explain_like_i_am_5')}}</option>
<option value="keywords_generator">{{trans('customer.keywords_generator')}}</option>
<option value="social_media_bio">{{trans('customer.social_media_bio')}}</option>
<option value="seo_description">{{trans('customer.seo_description')}}</option>
<option value="blog_article_idea_and_outline">{{trans('customer.blog_article_idea_and_outline')}}</option>
<option value="video_idea">{{trans('customer.video_idea')}}</option>
<option value="video_description">{{trans('customer.video_description')}}</option>
<option value="ad_description">{{trans('customer.ad_description')}}</option>
<option value="twitter_caption">{{trans('customer.twitter_caption')}}</option>
<option value="instagram_caption">{{trans('customer.instagram_caption')}}</option>
<option value="name_generator">{{trans('customer.name_generator')}}</option>
<option value="viral_ideas">{{trans('customer.viral_ideas')}}</option>
<option value="startup_ideas">{{trans('customer.startup_ideas')}}</option>
<option value="custom_prompt">{{trans('customer.custom_prompt')}}</option>
<option value="meta_description">{{trans('customer.meta_description')}}</option>
<option value="welcome_email">{{trans('customer.welcome_email')}}</option>
</select>
<small class="text-danger d-none" id="use_case_text">{{trans('customer.use_case_text')}}</small>
</div>
</div>
<div class="col-lg-12 d-none" id="topic_col">
<div class="form-group">
<label id="topic_label" for="topic"></label>
<input type="text" class="form-control" name="topic" id="topic" placeholder="">
<small class="text-danger d-none" id="topic_text">{{trans('customer.keyword_field_is_required')}}</small>
</div>
</div>
<div class="col-lg-12 d-none" id="keyword_col">
<div class="form-group">
<label id="keyword_label" for="keyword"></label>
<input type="text" class="form-control" name="keyword" id="keyword" placeholder="">
<small class="text-danger d-none" id="keyword_text">{{trans('customer.keyword_field_is_required')}}</small>
</div>
</div>
<div class="col-lg-12 d-none" id="description_col">
<div class="form-group">
<label id="description_label" for="keyword"></label>
<input type="text" class="form-control" name="description" id="description" placeholder="">
<small class="text-danger d-none" id="description_text">{{trans('customer.keyword_field_is_required')}}</small>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="variants">{{trans('customer.number_of_variants')}}</label>
<select name="variants" id="variants" class="form-control">
<option selected disabled>{{trans('customer.select_a_option')}}</option>
<option value="one">{{trans('customer.one')}}</option>
<option value="two">{{trans('customer.two')}}</option>
<option value="three">{{trans('customer.three')}}</option>
</select>
<small class="text-danger d-none" id="variants_text">{{trans('customer.variants_text')}}</small>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="creativity_level">{{trans('customer.creativity_level')}}</label>
<select name="creativity_level" id="creativity_level" class="form-control">
<option selected disabled>{{trans('customer.select_a_option')}}</option>
<option value="low">{{trans('customer.low')}}</option>
<option value="medium">{{trans('customer.medium')}}</option>
<option value="hard">{{trans('customer.hard')}}</option>
</select>
<small class="text-danger d-none" id="creativity_level_text">{{trans('customer.creativity_level_text')}}</small>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="language">{{trans('customer.select_language')}}</label>
<select name="language" id="language" class="form-control select2 select2-hidden-accessible" style="width: 100% !important;">
@if($languages->isNotEmpty())
<option selected disabled>{{trans('customer.select_a_option')}}</option>
@foreach($languages as $language)
<option value="{{$language->name}}">{{ucfirst($language->name)}}</option>
@endforeach
@else
<option selected disabled>{{trans('customer.no_data_available')}}</option>
@endif
</select>
<small class="text-danger d-none" id="language_text">{{trans('customer.language_text')}}</small>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<button type="button" id="write_for_me" class="btn btn-primary w-100"><i class="fas fa-pencil-alt mr-2"></i>@lang('customer.write_for_me')</button>
</div>
</div>
</div>
</div>
<div class="col-lg-8">
<div class="generate_document_text" id="generate_document_text">
<div class="generate_document_icon">
<i class="fa fa-pencil-alt"></i>
</div>
<div>Generate Document Using OpenAI</div>
</div>
<div class="form-group d-none" id="text-area-group">
<textarea class="form-control" id="text-area" name="editordata"></textarea>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</form>
</div>
</div>
<!-- /.card -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<!-- /.content -->
@endsection
@section('extra-scripts')
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
<script>
function delay(callback, ms) {
let timer = 0;
return function () {
let context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
callback.apply(context, args);
}, ms || 0);
};
}
const useCaseList = {
'blog_idea_and_outline':['Section Topic','Section Keyword'],
'blog_section_writing_business_ideas':['Interest','Skills'],
'cover_letter':['Job Role','Job Skills'],
'ad_description':['Product Name','Product Description'],
'ad_title':['Product Name','Product Description'],
'twitter_caption':['Post Topic'],
'instagram_caption':['Post Topic'],
'seo_title':['Meta title'],
'seo_keywords':['Meta Keywords'],
'seo_description':['Meta Description'],
'video_title':['Video Title'],
'meta_description':['Website Name','Website Description','Key Words'],
'welcome_email':['Company Name','Description about your company','Audience'],
'summarize':['Keyword'],
'text_spinner_rewriter':['Keyword'],
'grammar_fixer':['Keyword'],
'blog_article_section':['Keyword'],
'text_to_emoji':['Keyword'],
'explain_like_i_am_5':['Keyword'],
'keywords_generator':['Keyword'],
'social_media_bio':['Keyword'],
'video_idea':['Keyword'],
'video_description':['Keyword'],
'name_generator':['Keyword'],
'viral_ideas':['Keyword'],
'startup_ideas':['Keyword'],
'custom_prompt':['Keyword'],
};
$(document).on('change', '#use_case', function (e) {
$('#topic_col').addClass('d-none');
$('#keyword_col').addClass('d-none');
$('#description_col').addClass('d-none');
$('#keyword').val('');
$('#topic').val('');
$('#description').val('');
const type = $(this).val();
if (typeof useCaseList[type] != 'undefined'){
$('#topic_label').text(useCaseList[type][0]);
$('#topic').attr('placeholder',useCaseList[type][0]);
$('#topic_col').removeClass('d-none');
if (typeof useCaseList[type][1] != 'undefined'){
$('#keyword_label').text(useCaseList[type][1]);
$('#keyword').attr('placeholder',useCaseList[type][1]);
$('#keyword_col').removeClass('d-none');
}
if (typeof useCaseList[type][2] != 'undefined'){
$('#description_label').text(useCaseList[type][2]);
$('#description').attr('placeholder',useCaseList[type][2]);
$('#description_col').removeClass('d-none');
}
}else {
$('#topic_col').addClass('d-none');
$('#keyword_col').addClass('d-none');
}
});
$(document).on('click', '#write_for_me', delay(function (e) {
e.preventDefault();
$('#content-opacity').addClass('content-opacity');
$('#loader').removeClass('d-none');
$('#summernote').summernote('reset');
const keyword = $('#keyword').val();
const name = $('#name').val();
const useCase = $('#use_case').val();
const variants = $('#variants').val();
const language = $('#language').val();
const topic = $('#topic').val();
const description = $('#description').val();
const creativityLevel = $('#creativity_level').val();
const useCaseFields = useCaseList[useCase];
if (typeof useCaseList[useCase] == 'undefined'){
return true
}
if (!keyword){
$('#keyword_text').removeClass('d-none');
}else {
$('#keyword_text').addClass('d-none');
}
if (!useCase){
$('#use_case_text').removeClass('d-none');
}else {
$('#use_case_text').addClass('d-none');
}
if (!variants){
$('#variants_text').removeClass('d-none');
}else {
$('#variants_text').addClass('d-none');
}
if (!creativityLevel){
$('#creativity_level_text').removeClass('d-none');
}else {
$('#creativity_level_text').addClass('d-none');
}
if (!language){
$('#language_text').removeClass('d-none');
}else {
$('#language_text').addClass('d-none');
}
if (keyword && useCase && variants && creativityLevel && language){
$.ajax({
type: 'GET',
url: '{{route('customer.open_ai.get.request')}}',
data: {
keyword: keyword,
name: name,
topic: topic,
description: description,
use_case:useCase,
use_case_input_fields:useCaseFields,
variants:variants,
language:language,
creativityLevel:creativityLevel
},
success: function (res) {
if (res.status == 'success') {
$('#generate_document_text').addClass('d-none');
$('#text-area-group').removeClass('d-none');
$('#text-area').html(res.data);
$('#content-opacity').removeClass('content-opacity');
$('#loader').addClass('d-none');
} else {
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Notification',
body: res.message,
});
$('#generate_document_text').removeClass('d-none');
$('#text-area-group').addClass('d-none');
$('#content-opacity').removeClass('content-opacity');
$('#loader').addClass('d-none');
}
}
})
}else {
$('#content-opacity').removeClass('content-opacity');
$('#loader').addClass('d-none');
}
}, 10))
$('#use_case').select2();
$('#language').select2();
</script>
@endsection
|