Viewing file:  create.blade.php (53.59 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.customer')
@section('title') Work Flow @endsection
@section('extra-css')
<link rel="stylesheet" href="{{asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css')}}">
<link rel="stylesheet" href="{{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>
@endsection
@section('content')
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-12">
<input type="hidden" id="work_flow_id" value="{{ $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>
{{-- <li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Waiting List</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Setting</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">
@if(isset($workflows) && $workflows)
{{-- <input type="hidden" value="{{ isset($workflows) && $workflows->where('serial','1')->first() ? $workflows->where('serial','1')->first()->id : '' }}" id="first-line"> --}}
@foreach ($workflows->sortBy('serial') as $workflow)
<div class="delay-box mt-5" data-id="{{ $workflow->id }}" id="delay-box-{{ $workflow->id }}">
<div class="btn boxUpdate-data-{{ $workflow->id }} box-data {{ $workflow->type == 'sms' ? 'btn-info' : 'btn-warning' }} delay-startline pr-5 pl-5 pt-2 pb-2" data-id="{{ $workflow->id }}" data-name="{{ $workflow->name }}" data-type="{{ $workflow->type }}"
@if($workflow->type == 'sms')
data-message="{{ $workflow->message }}"
@else
data-time="{{ $workflow->time }}"
data-time_type="{{ $workflow->time_type }}"
@endif
id="delay-startline-{{ $workflow->id }}">
<i class="fa {{ $workflow->type == 'sms' ? 'fa-comment' : 'fa-clock' }} mr-2"></i> <span id="delay-text-{{ $workflow->id }}">{{ $workflow->name }}</span>
</div>
<div id="delay-plusIcon-{{ $workflow->id }}" data-id='{{ $workflow->id }}' class="mt-50 plusIcon">
<i class="fa fa-plus"></i>
</div>
</div>
@endforeach
@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);
}
@endphp
<div class="number-list">
<div class="card">
<div class="card-header">
<h2 class="card-title">@lang('Number list')</h2>
</div>
<div class="card-body">
<table class="table table-striped table-bordered dt-responsive nowrap">
<thead>
<tr>
<th>{{trans('Date')}}</th>
<th>@lang('Phone Number')</th>
<th>@lang('Selected')</th>
</tr>
</thead>
<tbody>
@foreach ($numbers as $number)
<tr>
<td>{{ $number->created_at->format('F d, Y h:i a') }}</td>
<td>{{ $number->number }}</td>
<td>
<div class="switch-container switch-ios">
<input type="checkbox" class="numbers switch-numbers" name="number" data-id="{{ $number->id }}" id="number-{{ $number->id }}"
@if(isset($decodedNumbers) && $decodedNumbers)
{{ is_array($decodedNumbers) && in_array($number->id, $decodedNumbers) ? 'checked' : '' }}
@endif
/>
<label for="number-{{ $number->id }}"></label>
</div>
</td>
</tr>
@endforeach
</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"
{{ 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"
{{ 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 {{ 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 {{ is_array($decodedDates) && in_array('sun', $decodedDates) ? 'active' : '' }}" data-value="sun">Sun</button>
<button type="button" class="btn btn-lg day-item {{ is_array($decodedDates) && in_array('mon', $decodedDates) ? 'active' : '' }}" data-value="mon">Mon</button>
<button type="button" class="btn btn-lg day-item {{ is_array($decodedDates) && in_array('tue', $decodedDates) ? 'active' : '' }}" data-value="tue">Tue</button>
<button type="button" class="btn btn-lg day-item {{ is_array($decodedDates) && in_array('wed', $decodedDates) ? 'active' : '' }}" data-value="wed">Wed</button>
<button type="button" class="btn btn-lg day-item {{ is_array($decodedDates) && in_array('thu', $decodedDates) ? 'active' : '' }}" data-value="thu">Thu</button>
<button type="button" class="btn btn-lg day-item {{ is_array($decodedDates) && in_array('fri', $decodedDates) ? 'active' : '' }}" data-value="fri">Fri</button>
<button type="button" class="btn btn-lg day-item {{ 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="{{ 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="{{ 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"
{{ 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"
{{ isset($workFlow_settings->default_tag) && $workFlow_settings->default_tag == 'enable' ? 'checked' : '' }}/>
<label for="default_tag"></label>
</div>
</div>
</div>
<div class="card mt-4 {{ isset($workFlow_settings->default_tag) && $workFlow_settings->default_tag == 'disable' ? 'd-none' : '' }}" id="default_tag_datas">
<div class="card-header">
<h2 class="card-title">@lang('Tags')</h2>
<a class="btn btn-primary float-right btn-sm"
href="{{route('customer.label.create')}}">@lang('Create Tags')</a>
</div>
<div class="card-body">
<div class="form-group">
<label for="tag">@lang('Select Tag')</label>
<select name="tag[]" class="form-control select2" id="tag" multiple>
@if (isset($tags) && $tags)
@foreach ($tags as $tag)
<option value="{{ $tag->id }}"
@if (isset($decodedTags) && $decodedTags)
@foreach ($decodedTags as $decodedTag)
{{isset($decodedTag) && $decodedTag == $tag->id?'selected':''}}
@endforeach
@endif
>
{{ $tag->title }}
</option>
@endforeach
@endif
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
@endsection
@section('extra-scripts')
<script src="{{asset('plugins/datatables/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('plugins/datatables-responsive/js/dataTables.responsive.min.js')}}"></script>
<script src="{{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="{{ 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">@lang('Action Name')</label>
<input type="text" name="sms-name" class="form-control sms-name" id="sms-name"
placeholder="@lang('Enter Action Name')" required>
</div>
<div class="form-group">
<label for="message">@lang('Message')</label>
<textarea rows="5" name="message" class="form-control message-all" id="message"
placeholder="@lang('Enter Your Message')"></textarea>
<div>
@foreach(sms_template_variables() as $key=>$t)
<button type="button" data-name="{{$key}}"
class="btn btn-sm btn-primary sms_template_variable mt-2">
{{ucfirst(str_replace('_',' ',$t))}}
</button>
@endforeach
</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">@lang('Action Name')</label>
<input type="text" name="delay-name" class="form-control delay-name" id="delay-name"
placeholder="@lang('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">@lang('Action Name')</label>
<input type="text" name="sms-name" class="form-control sms-name" id="sms-name" value="${name}"
placeholder="@lang('Enter Action Name')" required>
</div>
<div class="form-group">
<label for="message">@lang('Message')</label>
<textarea rows="5" name="message" class="form-control message-add-${id}" id="message"
placeholder="@lang('Enter Your Message')">${message}</textarea>
<div>
@foreach(sms_template_variables() as $key=>$t)
<button type="button" data-name="{{$key}}" data-id=${id}
class="btn btn-sm btn-primary sms_template_variable2 mt-2">
{{ucfirst(str_replace('_',' ',$t))}}
</button>
@endforeach
</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">@lang('Action Name')</label>
<input type="text" name="delay-name" class="form-control delay-name" id="delay-name" value="${name}"
placeholder="@lang('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:'{{route('customer.work.flow.store')}}',
data:{
"_token":"{{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:'{{route('customer.work.flow.update.detail')}}',
data:{
"_token":"{{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:'{{route('customer.work.flow.delete')}}',
data:{
"_token":"{{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:'{{route('customer.work.flow.update.serial')}}',
data:{
"_token":"{{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 = `{{ 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 = `{{ 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:'{{route('customer.work.flow.update.setting')}}',
data:{
"_token":"{{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: "@lang('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>
@endsection
|