Viewing file:  fd8edf7e40a96744a294ef59a1ae38bf.php (56.02 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php $__env->startSection('title'); ?> Work Flow <?php $__env->stopSection(); ?>
<?php $__env->startSection('extra-css'); ?>
<link rel="stylesheet" href="<?php echo e(asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css')); ?>">
<style>
.nav-pills .nav-link{
color: #86A788;
}
.nav-pills .nav-link.active{
padding: 8px 16px;
background-color: #344CB7;
background: linear-gradient(50deg, #495db6, rgb(90, 125, 194));
margin-left: 10px;
margin-right: 10px;
}
.startline{
position: relative;
min-height: 80vh;
text-align: center;
}
.startline p {
font-size: 16px !important;
margin: 0;
}
.startline .fa-plus{
border: 1px solid;
border-radius: 50%;
padding: 8px;
cursor: pointer;
}
.mt-50{
margin-top: 50px;
}
.add-data {
position: fixed;
z-index: 10;
top: 55%;
right: -10%;
transform: translate(-50%, -50%) scale(1);
padding: 30px 20px;
width: 30%;
min-width: 300px;
max-width: 500px;
background-color: #fff;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
border-radius: 8px;
transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.btns-type{
display: flex;
flex-direction: column;
}
.btns-type button{
margin: 5px 0px;
text-align: left;
border: 1px solid;
background-color: transparent !important;
box-shadow: none !important;
}
.remove-data{
position: absolute;
top: 5px;
left: 5px;
background-color: transparent !important;
box-shadow: none !important;
}
.workFlow{
height: 100%;
}
.remove-sms-data{
background-color: transparent;
box-shadow: none !important;
}
.startline2{
background-color: transparent;
border: 2px solid #5B73E8;
box-shadow: 0 4px 8px rgba(91, 115, 232, 0.5) !important;
}
@media (max-width: 575.98px) {
.add-data {
right: -20%;
}
}
.delay-startline{
font-size: 16px !important;
cursor: pointer;
}
</style>
<style>
.switch-container {
position: relative;
display: inline-block;
width: 60px;
height: 40px;
}
.switch-container input {
opacity: 0;
width: 0;
height: 0;
}
.switch-container label {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: background-color 0.3s ease;
border-radius: 34px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.switch-container label:before {
content: "";
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background-color: white;
border-radius: 50%;
width: 40%;
transition: transform 0.3s ease;
}
.switch-container input:checked + label {
background-color: #4CAF50;
}
.switch-container input:checked + label:before {
transform: translateX(26px);
}
.switch-ios {
position: relative;
display: inline-block;
}
.allow-multiple .allow_multiple{
font-size: 20px;
}
.allow_multiple-data{
font-size: 17px;
margin: 0;
}
.day-item{
box-shadow: none !important;
border: 1px solid;
padding: 10px 20px;
font-size: 15px !important;
}
.day-item.active{
background-color: #5B73E8 !important;
color: #fff !important;
}
</style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-12">
<input type="hidden" id="work_flow_id" value="<?php echo e($workFlow_id); ?>">
<div class="card workFlow">
<div class="card-header">
<ul class="nav nav-pills mb-3 mt-3 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">Editor</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active next-page" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="startline">
<div class="">
<div id="startline">
<p class="btn startline2 pr-5 pl-5 pt-2 pb-2">Start</p>
</div>
<div id="plusIcon" class="mt-50 plusIcon plusIcon-id">
<i class="fa fa-plus"></i>
</div>
</div>
<div id="add-new">
<?php if(isset($workflows) && $workflows): ?>
<?php $__currentLoopData = $workflows->sortBy('serial'); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $workflow): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<div class="delay-box mt-5" data-id="<?php echo e($workflow->id); ?>" id="delay-box-<?php echo e($workflow->id); ?>">
<div class="btn boxUpdate-data-<?php echo e($workflow->id); ?> box-data <?php echo e($workflow->type == 'sms' ? 'btn-info' : 'btn-warning'); ?> delay-startline pr-5 pl-5 pt-2 pb-2" data-id="<?php echo e($workflow->id); ?>" data-name="<?php echo e($workflow->name); ?>" data-type="<?php echo e($workflow->type); ?>"
<?php if($workflow->type == 'sms'): ?>
data-message="<?php echo e($workflow->message); ?>"
<?php else: ?>
data-time="<?php echo e($workflow->time); ?>"
data-time_type="<?php echo e($workflow->time_type); ?>"
<?php endif; ?>
id="delay-startline-<?php echo e($workflow->id); ?>">
<i class="fa <?php echo e($workflow->type == 'sms' ? 'fa-comment' : 'fa-clock'); ?> mr-2"></i> <span id="delay-text-<?php echo e($workflow->id); ?>"><?php echo e($workflow->name); ?></span>
</div>
<div id="delay-plusIcon-<?php echo e($workflow->id); ?>" data-id='<?php echo e($workflow->id); ?>' class="mt-50 plusIcon">
<i class="fa fa-plus"></i>
</div>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>
</div>
<div id="add-data" class="add-data text-left d-none">
</div>
</div>
</div>
<div class="tab-pane fade next-page" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
</div>
<div class="tab-pane fade next-page" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="row">
<div class="col-12">
<?php
$decodedNumbers = '';
$decodedDates = '';
$decodedTags = '';
if(isset($workFlow_settings) && $workFlow_settings){
$decodedNumbers = json_decode($workFlow_settings->numbers, true);
$decodedTags = json_decode($workFlow_settings->tags, true);
$decodedDates = json_decode($workFlow_settings->dates, true);
}
?>
<div class="number-list">
<div class="card">
<div class="card-header">
<h2 class="card-title"><?php echo app('translator')->get('Number list'); ?></h2>
</div>
<div class="card-body">
<table class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<th><?php echo e(trans('Date')); ?></th>
<th><?php echo app('translator')->get('Phone Number'); ?></th>
<th><?php echo app('translator')->get('Selected'); ?></th>
</tr>
</thead>
<tbody>
<?php $__currentLoopData = $numbers; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $number): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<tr>
<td><?php echo e($number->created_at->format('F d, Y h:i a')); ?></td>
<td><?php echo e($number->number); ?></td>
<td>
<div class="switch-container switch-ios">
<input type="checkbox" class="numbers switch-numbers" name="number" data-id="<?php echo e($number->id); ?>" id="number-<?php echo e($number->id); ?>"
<?php if(isset($decodedNumbers) && $decodedNumbers): ?>
<?php echo e(is_array($decodedNumbers) && in_array($number->id, $decodedNumbers) ? 'checked' : ''); ?>
<?php endif; ?>
/>
<label for="number-<?php echo e($number->id); ?>"></label>
</div>
</td>
</tr>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</tbody>
</table>
</div>
</div>
</div>
<div class="allow-multiple mt-5">
<div class="form-group d-flex align-items-center m-0">
<label for="" class="allow_multiple">Allow Multiple</label>
<div class="switch-container switch-ios ml-2">
<input type="checkbox" name="allow_multiple" id="allow_multiple"
<?php echo e(isset($workFlow_settings->multiple) && $workFlow_settings->multiple == 'enable' ? 'checked' : ''); ?>/>
<label for="allow_multiple"></label>
</div>
</div>
<p class="allow_multiple-data">Allow a contact to enter this flow more than once</p>
</div>
<div class="allow-multiple mt-5">
<div class="form-group d-flex align-items-center m-0">
<label for="" class="allow_multiple">Time Window</label>
<div class="switch-container switch-ios ml-2">
<input type="checkbox" name="time_window" id="time_window"
<?php echo e(isset($workFlow_settings->time_window) && $workFlow_settings->time_window == 'enable' ? 'checked' : ''); ?>/>
<label for="time_window"></label>
</div>
</div>
<div id="time_window_data" class="time_window_data <?php echo e(isset($workFlow_settings->time_window) && $workFlow_settings->time_window == 'disable' ? 'd-none' : ''); ?>">
<div class="day-list mt-2">
<button type="button" class="btn btn-lg day-item <?php echo e(is_array($decodedDates) && in_array('sun', $decodedDates) ? 'active' : ''); ?>" data-value="sun">Sun</button>
<button type="button" class="btn btn-lg day-item <?php echo e(is_array($decodedDates) && in_array('mon', $decodedDates) ? 'active' : ''); ?>" data-value="mon">Mon</button>
<button type="button" class="btn btn-lg day-item <?php echo e(is_array($decodedDates) && in_array('tue', $decodedDates) ? 'active' : ''); ?>" data-value="tue">Tue</button>
<button type="button" class="btn btn-lg day-item <?php echo e(is_array($decodedDates) && in_array('wed', $decodedDates) ? 'active' : ''); ?>" data-value="wed">Wed</button>
<button type="button" class="btn btn-lg day-item <?php echo e(is_array($decodedDates) && in_array('thu', $decodedDates) ? 'active' : ''); ?>" data-value="thu">Thu</button>
<button type="button" class="btn btn-lg day-item <?php echo e(is_array($decodedDates) && in_array('fri', $decodedDates) ? 'active' : ''); ?>" data-value="fri">Fri</button>
<button type="button" class="btn btn-lg day-item <?php echo e(is_array($decodedDates) && in_array('sat', $decodedDates) ? 'active' : ''); ?>" data-value="sat">Sat</button>
</div>
<div class="time-list mt-3">
<div class="row">
<div class="col-lg-5">
<div class="row justify-content-between align-items-center">
<div class="form-group col-5">
<input type="time" value="<?php echo e(isset($workFlow_settings->start_time) ? date('H:i', strtotime($workFlow_settings->start_time)) : ''); ?>" name="start_time" class="form-control select-time" id="start_time">
</div>
<span class="col-2 text-center">To</span>
<div class="form-group col-5">
<input type="time" value="<?php echo e(isset($workFlow_settings->end_time) ? date('H:i', strtotime($workFlow_settings->end_time)) : ''); ?>" name="end_time" class="form-control select-time" id="end_time">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="allow-multiple mt-5">
<div class="form-group d-flex align-items-center m-0">
<label for="" class="allow_multiple">Waiting Lists</label>
<div class="switch-container switch-ios ml-2">
<input type="checkbox" name="waiting_list" id="waiting_list"
<?php echo e(isset($workFlow_settings->waiting) && $workFlow_settings->waiting == 'enable' ? 'checked' : ''); ?>/>
<label for="waiting_list"></label>
</div>
</div>
</div>
<div class="tag-list mt-5">
<div class="row">
<div class="col-lg-6 col-12">
<div class="allow-multiple">
<div class="form-group d-flex align-items-center m-0">
<label for="" class="allow_multiple">Default Tag</label>
<div class="switch-container switch-ios ml-2">
<input type="checkbox" name="default_tag" id="default_tag"
<?php echo e(isset($workFlow_settings->default_tag) && $workFlow_settings->default_tag == 'enable' ? 'checked' : ''); ?>/>
<label for="default_tag"></label>
</div>
</div>
</div>
<div class="card mt-4 <?php echo e(isset($workFlow_settings->default_tag) && $workFlow_settings->default_tag == 'disable' ? 'd-none' : ''); ?>" id="default_tag_datas">
<div class="card-header">
<h2 class="card-title"><?php echo app('translator')->get('Tags'); ?></h2>
<a class="btn btn-primary float-right btn-sm"
href="<?php echo e(route('customer.label.create')); ?>"><?php echo app('translator')->get('Create Tags'); ?></a>
</div>
<div class="card-body">
<div class="form-group">
<label for="tag"><?php echo app('translator')->get('Select Tag'); ?></label>
<select name="tag[]" class="form-control select2" id="tag" multiple>
<?php if(isset($tags) && $tags): ?>
<?php $__currentLoopData = $tags; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tag): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option value="<?php echo e($tag->id); ?>"
<?php if(isset($decodedTags) && $decodedTags): ?>
<?php $__currentLoopData = $decodedTags; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $decodedTag): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<?php echo e(isset($decodedTag) && $decodedTag == $tag->id?'selected':''); ?>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>
>
<?php echo e($tag->title); ?>
</option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
<?php endif; ?>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('extra-scripts'); ?>
<script src="<?php echo e(asset('plugins/datatables/jquery.dataTables.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/datatables-responsive/js/dataTables.responsive.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js')); ?>"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="<?php echo e(asset('js/leader-line.min.js')); ?>"></script>
<script>
let stateElementId = '';
window.addEventListener('DOMContentLoaded', () => {
const div1 = document.getElementById('startline');
const div2 = document.getElementById('plusIcon');
// let first = $('#first-line').val() ?? '';
// if(first){
// drawLine('plusIcon',`delay-startline-${ first }`);
// drawLine(`delay-startline-${ first }`,`delay-plusIcon-${ first }`);
// }
// drawLine('startline', 'plusIcon');
stateElementId = 'plusIcon';
});
$(document).ready(function() {
// let first = $('#first-line').val() ?? '';
// if(first){
serializeDivs();
// }
});
$(document).on('click','.plusIcon',function(e){
$('#select-type').remove();
$('.delay-form').remove();
$('.sms-form').remove();
let id = $(this).attr('data-id') ?? '';
let html = `
<div id="select-type" class="select-type">
<button id="remove-data" class="btn btn-sm remove-data"><i class="fa fa-times" aria-hidden="true"></i></button>
<h6 class="mb-3">Select Actions</h6>
<div class="btns-type">
<button class="btn btn-lg add-selected-data" data-id="${id}" data-type="sms"><i class="fa fa-home mr-2" aria-hidden="true"></i>Send SMS</button>
<button class="btn btn-lg add-selected-data" data-id="${id}" data-type="delay"><i class="fa fa-clock mr-2" aria-hidden="true"></i>Delay</button>
</div>
</div>
`;
$('#add-data').append(html);
$('#add-data').removeClass('d-none');
});
$(document).on('click','#remove-data',function(e){
$('#add-data').addClass('d-none')
$('#select-type').remove();
$('.delay-form').remove();
$('.sms-form').remove();
});
$(document).on('click','.add-selected-data',function(e){
let type = $(this).attr('data-type');
let html = '';
let id = $(this).attr('data-id') ?? '';
if(type == 'sms'){
html = `
<div class="sms-form">
<button id="remove-data" class="btn btn-sm remove-data"><i class="fa fa-times" aria-hidden="true"></i></button>
<h5 class="mb-4">Text Message Step</h5>
<div class="form-group">
<label for="sms-name"><?php echo app('translator')->get('Action Name'); ?></label>
<input type="text" name="sms-name" class="form-control sms-name" id="sms-name"
placeholder="<?php echo app('translator')->get('Enter Action Name'); ?>" required>
</div>
<div class="form-group">
<label for="message"><?php echo app('translator')->get('Message'); ?></label>
<textarea rows="5" name="message" class="form-control message-all" id="message"
placeholder="<?php echo app('translator')->get('Enter Your Message'); ?>"></textarea>
<div>
<?php $__currentLoopData = sms_template_variables(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$t): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<button type="button" data-name="<?php echo e($key); ?>"
class="btn btn-sm btn-primary sms_template_variable mt-2">
<?php echo e(ucfirst(str_replace('_',' ',$t))); ?>
</button>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="btnSubmit">
<button class="btn btn-sm btn-secondary btn-cancel" data-id="${id}" data-type="sms">cancel</button>
<button class="btn btn-sm btn-primary save-action" data-id="${id}" data-type="sms">Save Action</button>
</div>
</div>
</div>
`;
}
if(type == 'delay'){
html = `
<div class="delay-form">
<button id="remove-data" class="btn btn-sm remove-data"><i class="fa fa-times" aria-hidden="true"></i></button>
<h5 class="mb-4">Delay Step</h5>
<div class="form-group">
<label for="delay-name"><?php echo app('translator')->get('Action Name'); ?></label>
<input type="text" name="delay-name" class="form-control delay-name" id="delay-name"
placeholder="<?php echo app('translator')->get('Enter Action Name'); ?>" required>
</div>
<div class="row">
<div class="col-3">
<div class="form-group">
<input type="number" name="time" class="form-control" id="time" placeholder="0">
</div>
</div>
<div class="col-9">
<select name="time_type" class="form-control" id="time_type">
<option value="min">Minute</option>
<option value="hour">Hour</option>
<option value="day">Day</option>
</select>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="btnSubmit">
<button class="btn btn-sm btn-secondary btn-cancel" data-id="${id}" data-type="delay">cancel</button>
<button class="btn btn-sm btn-primary save-action" data-id="${id}" data-type="delay">Save Action</button>
</div>
</div>
</div>
`;
}
$('#select-type').remove();
$('#add-data').append(html);
});
$(document).on('click','.btn-cancel',function(e){
let type = $(this).attr('data-type');
if(type == 'delay'){
$('.delay-form').remove();
}
if(type == 'sms'){
$('.sms-form').remove();
}
let id = $(this).attr('data-id') ?? '';
let html = `
<div id="select-type" class="select-type">
<button id="remove-data" class="btn btn-sm remove-data"><i class="fa fa-times" aria-hidden="true"></i></button>
<h6 class="mb-3">Select Actions</h6>
<div class="btns-type">
<button class="btn btn-lg add-selected-data" data-id="${id}" data-type="sms"><i class="fa fa-home mr-2" aria-hidden="true"></i>Send SMS</button>
<button class="btn btn-lg add-selected-data" data-id="${id}" data-type="delay"><i class="fa fa-clock mr-2" aria-hidden="true"></i>Delay</button>
</div>
</div>
`;
$('#add-data').append(html);
});
$(document).on('click','.box-data',function(e){
$('#select-type').remove();
$('.delay-form').remove();
$('.sms-form').remove();
let name = $(this).attr('data-name');
let type = $(this).attr('data-type');
let message = $(this).attr('data-message');
let time = $(this).attr('data-time');
let time_type = $(this).attr('data-time_type');
let id = $(this).attr('data-id');
let html = '';
if(type == 'sms'){
html = `
<div class="sms-form">
<button id="remove-data" class="btn btn-sm remove-data"><i class="fa fa-times" aria-hidden="true"></i></button>
<h5 class="mb-4">Text Message Step</h5>
<div class="form-group">
<label for="sms-name"><?php echo app('translator')->get('Action Name'); ?></label>
<input type="text" name="sms-name" class="form-control sms-name" id="sms-name" value="${name}"
placeholder="<?php echo app('translator')->get('Enter Action Name'); ?>" required>
</div>
<div class="form-group">
<label for="message"><?php echo app('translator')->get('Message'); ?></label>
<textarea rows="5" name="message" class="form-control message-add-${id}" id="message"
placeholder="<?php echo app('translator')->get('Enter Your Message'); ?>">${message}</textarea>
<div>
<?php $__currentLoopData = sms_template_variables(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key=>$t): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<button type="button" data-name="<?php echo e($key); ?>" data-id=${id}
class="btn btn-sm btn-primary sms_template_variable2 mt-2">
<?php echo e(ucfirst(str_replace('_',' ',$t))); ?>
</button>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
</div>
<div class="d-flex justify-content-between">
<button id="delete-action" data-id="${id}" class="btn text-danger btn-sm delete-action remove-sms-data">Delete</button>
<div class="btnSubmit">
<button class="btn btn-sm btn-secondary btn-cancel" data-id="${id}" data-type="sms">cancel</button>
<button class="btn btn-sm btn-primary update-action" data-id="${id}" data-type="sms">Update Action</button>
</div>
</div>
</div>
`;
}else{
html = `
<div class="delay-form">
<button id="remove-data" class="btn btn-sm remove-data"><i class="fa fa-times" aria-hidden="true"></i></button>
<h5 class="mb-4">Delay Step</h5>
<div class="form-group">
<label for="delay-name"><?php echo app('translator')->get('Action Name'); ?></label>
<input type="text" name="delay-name" class="form-control delay-name" id="delay-name" value="${name}"
placeholder="<?php echo app('translator')->get('Enter Action Name'); ?>" required>
</div>
<div class="row">
<div class="col-3">
<div class="form-group">
<input type="number" name="time" class="form-control" id="time" placeholder="0" value="${time}">
</div>
</div>
<div class="col-9">
<select name="time_type" class="form-control" id="time_type">
<option value="min" ${time_type === 'min' ? 'selected' : ''}>Minute</option>
<option value="hour" ${time_type === 'hour' ? 'selected' : ''}>Hour</option>
<option value="day" ${time_type === 'day' ? 'selected' : ''}>Day</option>
</select>
</div>
</div>
<div class="d-flex justify-content-between">
<button id="delete-action" data-id="${id}" class="btn text-danger delete-action btn-sm remove-sms-data">Delete</button>
<div class="btnSubmit">
<button class="btn btn-sm btn-secondary btn-cancel" data-id="${id}" data-type="delay">cancel</button>
<button class="btn btn-sm btn-primary update-action" data-id="${id}" data-type="delay">Update Action</button>
</div>
</div>
</div>
`;
}
$('#add-data').append(html);
$('#add-data').removeClass('d-none');
});
let lastElementId = '';
let oldElementId = '';
let clickCount = 0;
$(document).on('click','.save-action',function(e){
let type = $(this).attr('data-type');
let html = '';
let delayName = $('.delay-name').val();
let smsName = $('.sms-name').val();
let message = $('#message').val();
let timeType = $('#time_type').val();
let time = $('#time').val();
let id = $(this).attr('data-id');
let work_flow_id = $('#work_flow_id').val();
clickCount++;
if(!delayName && type == 'delay'){
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Notification',
body: 'Action Name required',
});
return;
}else if(!smsName && type == 'sms'){
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Notification',
body: 'Action Name required',
});
return;
}
if(!time && type == 'delay'){
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Notification',
body: 'Enter delay time',
});
return;
}
if(!message && type == 'sms'){
$(document).Toasts('create', {
autohide: true,
delay: 10000,
class: 'bg-danger',
title: 'Notification',
body: 'Enter Message',
});
return;
}
$.ajax({
method:'POST',
url:'<?php echo e(route('customer.work.flow.store')); ?>',
data:{
"_token":"<?php echo e(csrf_token()); ?>",
smsName:smsName,
delayName:delayName,
type:type,
time:time,
timeType:timeType,
message:message,
serial:clickCount,
work_flow_id:work_flow_id,
},
success:function (res){
if(res.data.type == 'delay'){
html = `
<div class="delay-box mt-5" data-id="${res.data.id}" id="delay-box-${res.data.id}">
<div class="btn boxUpdate-data-${res.data.id} box-data btn-warning delay-startline pr-5 pl-5 pt-2 pb-2" data-id="${res.data.id}" data-type="${res.data.type}" data-name="${res.data.name}" data-time="${res.data.time}" data-time_type="${res.data.time_type}" id="delay-startline-${res.data.id}"><i class="fa fa-clock mr-2"></i><span id="delay-text-${res.data.id}">${res.data.name}</span></div>
<div id="delay-plusIcon-${res.data.id}" data-id='${res.data.id}' class="mt-50 plusIcon">
<i class="fa fa-plus"></i>
</div>
</div>
`
}
if(res.data.type == 'sms'){
html = `
<div class="delay-box mt-5" data-id="${res.data.id}" id="delay-box-${res.data.id}">
<div class="btn boxUpdate-data-${res.data.id} box-data btn-info delay-startline pr-5 pl-5 pt-2 pb-2" data-id="${res.data.id}" data-type="${res.data.type}" data-name="${res.data.name}" data-message="${res.data.message}" id="delay-startline-${res.data.id}"><i class="fa fa-comment mr-2"></i><span id="delay-text-${res.data.id}">${res.data.name}</span></div>
<div id="delay-plusIcon-${res.data.id}" data-id='${res.data.id}' class="mt-50 plusIcon">
<i class="fa fa-plus"></i>
</div>
</div>
`
}
if(id){
$('#delay-box-'+id).last().after(html);
drawLine(`delay-startline-${res.data.id}`, `delay-plusIcon-${res.data.id}`);
}else{
$('#add-new').append(html);
drawLine(`delay-startline-${res.data.id}`, `delay-plusIcon-${res.data.id}`);
}
// let first = $('#first-line').val() ?? '';
// if(clickCount == 1 && !first){
// drawLine(stateElementId,`delay-startline-${res.data.id}`);
// }
serializeDivs();
},
error: function (res){
},
});
$('#add-data').addClass('d-none');
$('#select-type').remove();
$('.delay-form').remove();
$('.sms-form').remove();
});
$(document).on('click','.update-action',function(e){
let id = $(this).attr('data-id');
let type = $(this).attr('data-type');
let delayName = $('.delay-name').val();
let smsName = $('.sms-name').val();
let message = $('#message').val();
let timeType = $('#time_type').val();
let time = $('#time').val();
$.ajax({
method:'POST',
url:'<?php echo e(route('customer.work.flow.update.detail')); ?>',
data:{
"_token":"<?php echo e(csrf_token()); ?>",
id:id,
smsName:smsName,
delayName:delayName,
type:type,
time:time,
timeType:timeType,
message:message,
},
success:function (res){
$(`.boxUpdate-data-${res.data.id}`).attr('data-name',res.data.name);
if(res.data.type == 'sms'){
$(`#delay-text-${res.data.id}`).text(`${res.data.name}`);
$(`.boxUpdate-data-${res.data.id}`).attr('data-message',res.data.message);
}else{
$(`#delay-text-${res.data.id}`).text(`${res.data.name}`);
$(`.boxUpdate-data-${res.data.id}`).attr('data-time',res.data.time);
$(`.boxUpdate-data-${res.data.id}`).attr('data-time_type',res.data.time_type);
}
},
error: function (res){
},
});
$('#add-data').addClass('d-none');
$('#select-type').remove();
$('.delay-form').remove();
$('.sms-form').remove();
});
$(document).on('click','.delete-action',function(e){
let id = $(this).attr('data-id');
Object.keys(lines).forEach(key => {
if (key.includes(`delay-startline-${id}`) || key.includes(`delay-plusIcon-${id}`)) {
lines[key].remove();
delete lines[key];
}
});
$.ajax({
method:'POST',
url:'<?php echo e(route('customer.work.flow.delete')); ?>',
data:{
"_token":"<?php echo e(csrf_token()); ?>",
id:id,
},
success:function (res){
},
error: function (res){
},
});
$(`#delay-box-${id}`).remove();
serializeDivs();
$('#add-data').addClass('d-none');
$('#select-type').remove();
$('.delay-form').remove();
$('.sms-form').remove();
});
function serializeDivs() {
let serializedData = [];
let ids = [];
let index = [];
$('.delay-box').each(function (index, element) {
serializedData.push({
id: $(this).attr('data-id'),
index: index + 1
});
});
drawLine('startline', 'plusIcon');
if (serializedData.length > 0) {
let first = serializedData[0];
drawLine('plusIcon',`delay-startline-${ first.id }`);
drawLine(`delay-startline-${ first.id }`,`delay-plusIcon-${ first.id }`);
serializedData.forEach(function(item) {
ids.push(item.id);
index.push(item.index);
});
for (let i = 0; i < serializedData.length - 1; i++) {
let current = serializedData[i];
let next = serializedData[i + 1];
drawLine(`delay-startline-${current.id}`, `delay-plusIcon-${current.id}`);
drawLine(`delay-plusIcon-${current.id}`, `delay-startline-${next.id}`);
drawLine(`delay-startline-${next.id}`, `delay-plusIcon-${next.id}`);
};
}
$.ajax({
method:'POST',
url:'<?php echo e(route('customer.work.flow.update.serial')); ?>',
data:{
"_token":"<?php echo e(csrf_token()); ?>",
ids:ids,
index:index,
},
success:function (res){
},
error: function (res){
},
});
}
let lines = [];
function lineAlreadyExist(start, end) {
const index = lines[start + '-' + end];
if (index) {
return true;
}
return false;
}
function drawLine(start, end) {
if (lineAlreadyExist(start, end)) {
lines[start + '-' + end].position();
} else {
const line = new LeaderLine(
document.getElementById(start),
document.getElementById(end), {
dash: {
animation: true
},
color: '#000',
size: 2.5,
}
);
lines[start + '-' + end] = line;
}
}
function removeAllLines() {
for (const key in lines) {
if (lines[key]) {
lines[key].remove();
}
}
lines = [];
}
$(document).ready(function() {
$('#pills-home-tab, #pills-profile-tab, #pills-contact-tab').on('shown.bs.tab', function (e) {
var clickedTab = $(e.target).attr('aria-controls');
if(clickedTab == 'pills-home'){
serializeDivs();
}else{
removeAllLines();
}
});
});
</script>
<script>
let number_ids = [];
let date = [];
$(document).ready(function(){
$('.switch-numbers').each(function (index, element) {
let id = $(this).attr('data-id');
let isChecked = $(this).prop('checked');
if(isChecked){
number_ids.push(id);
}else{
number_ids = number_ids.filter(item => item !== id);
}
});
$('.day-item').each(function (index, element) {
let type = $(this).attr('data-value');
if ($(this).hasClass('active')) {
if (!date.includes(type)) {
date.push(type);
}
}else {
date = date.filter(item => item !== type);
}
});
});
$(document).on('change','.numbers',function(e){
let id = $(this).attr('data-id');
let isChecked = $(this).prop('checked');
if(isChecked){
number_ids.push(id);
}else{
number_ids = number_ids.filter(item => item !== id);
}
updateSettings();
});
let allow_multiple = `<?php echo e(isset($workFlow_settings->multiple) && $workFlow_settings->multiple == 'enable' ? 'enable' : 'disable'); ?>`;
$(document).on('change','#allow_multiple',function(e){
let isChecked = $(this).prop('checked');
if(isChecked){
allow_multiple = 'enable';
}else{
allow_multiple = 'disable';
}
updateSettings();
});
let waiting_list = `<?php echo e(isset($workFlow_settings->waiting) && $workFlow_settings->waiting == 'enable' ? 'enable' : 'disable'); ?>`;
$(document).on('change','#waiting_list',function(e){
let isChecked = $(this).prop('checked');
if(isChecked){
waiting_list = 'enable';
}else{
waiting_list = 'disable';
}
updateSettings();
});
$(document).on('change', '#time_window', function() {
let isChecked = $(this).prop('checked');
if (isChecked) {
$('#time_window_data').removeClass('d-none');
} else {
$('#time_window_data').addClass('d-none');
}
updateSettings();
});
$(document).on('change', '#default_tag', function() {
let isChecked = $(this).prop('checked');
if (isChecked) {
$('#default_tag_datas').removeClass('d-none');
} else {
$('#default_tag_datas').addClass('d-none');
}
updateSettings();
});
$(document).on('click','.day-item',function(e){
let type = $(this).attr('data-value');
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
if (!date.includes(type)) {
date.push(type);
}
} else {
date = date.filter(item => item !== type);
}
let isChecked = $('#time_window').prop('checked');
if(isChecked){
updateSettings();
}
});
$(document).on('change','.select-time',function(e){
let isChecked = $('#time_window').prop('checked');
if(isChecked){
updateSettings();
}
});
function updateSettings() {
let start_time = $('#start_time').val();
let end_time = $('#end_time').val();
let dates = JSON.stringify(Array.from(date));
let numberIds = JSON.stringify(Array.from(number_ids));
let time_window_checked = $('#time_window').prop('checked');
let default_tag_checked = $('#default_tag').prop('checked');
let tagIds = $('#tag').val();
let timeWindow = '';
let default_tag = '';
if(time_window_checked){
timeWindow = 'enable';
}else{
timeWindow = 'disable';
}
if(default_tag_checked){
default_tag = 'enable';
}else{
default_tag = 'disable';
}
$.ajax({
method:'POST',
url:'<?php echo e(route('customer.work.flow.update.setting')); ?>',
data:{
"_token":"<?php echo e(csrf_token()); ?>",
number_ids:numberIds,
tag_ids:tagIds,
dates:dates,
allow_multiple:allow_multiple,
waiting_list:waiting_list,
start_time:start_time,
end_time:end_time,
time_window:timeWindow,
default_tag:default_tag,
work_flow_id:$('#work_flow_id').val(),
},
success:function (res){
},
error: function (res){
},
});
}
</script>
<script>
$(document).ready(function() {
$('#tag').select2({
placeholder: "<?php echo app('translator')->get('Select tags'); ?>",
allowClear: true,
width: '100%'
});
});
</script>
<script>
$(document).on('click', '.sms_template_variable', function(e) {
let text_to_insert = $(this).attr('data-name');
typeInTextarea(text_to_insert, document.querySelector('.message-all'));
$('.message-all').focus();
const message = $('.message-all').val();
$('.message-all').trigger('keyup');
});
$(document).on('click', '.sms_template_variable2', function(e) {
let text_to_insert = $(this).attr('data-name');
let id = $(this).attr('data-id');
typeInTextarea(text_to_insert, document.querySelector('.message-add-'+id));
$('.message-add-'+id).focus();
const message = $('.message-all').val();
$('.message-add-'+id).trigger('keyup');
});
function typeInTextarea(newText, el = document.activeElement) {
if (el instanceof HTMLTextAreaElement || el instanceof HTMLInputElement) {
const [start, end] = [el.selectionStart, el.selectionEnd];
el.setRangeText(newText, start, end, 'select');
} else {
console.error('The provided element is not a textarea or input element');
}
}
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.customer', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/picotech/domains/sms.picotech.app/public_html/resources/views/customer/work_flow/create.blade.php ENDPATH**/ ?>
|