Viewing file:  70a42f1f905921aef50138b89a3631c5.php (20.55 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<?php $__env->startSection('title','Compose | SmsBox'); ?>
<?php $__env->startSection('extra-css'); ?>
<link rel="stylesheet" href="<?php echo e(asset('plugins/select2/css/select2.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('plugins/daterangepicker/daterangepicker.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css')); ?>">
<link rel="stylesheet" href="<?php echo e(asset('css/msg_overview.css')); ?>">
<style>
#select2-toNumbers-results, #select2-fromNumber-results {
overflow-y: auto;
max-height: 200px;
}
.iphone {
width: 300px;
height: 609px;
background-size: 100% 100%;
margin: 0 auto;
position: relative;
}
.user-chat-profile {
font-size: 30px;
padding: 20px 5px;
}
.chat-box-text-sec {
color: #fff;
margin-left: auto;
background-color: #00a9de;
}
.chat-message-content {
font-size: 18px;
padding: 10px 20px;
border-radius: 25px;
color: #fff;
background-color: #00a9de;
max-width: 600px;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
position: relative;
margin: 15px 10px;
word-break: break-all;
direction: ltr;
}
.chat-curve-reply:after {
content: "";
width: 20px;
height: 12px;
display: block;
background-image: url("https://stageviewcincyshakes.firebaseapp.com/icon-gray-message.e6296433d6a72d473ed4.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
bottom: -2px;
left: -5px;
}
.chat-message-content:after {
width: 19px;
height: 13px;
left: inherit;
right: -5px;
background-image: url("https://stageviewcincyshakes.firebaseapp.com/icon-blue-message.2be55af0d98ee2864e29.png");
}
.chat-application-sec {
display: flex;
justify-content: flex-end;
align-items: flex-end;
overflow-y: hidden;
}
.chat-date-time {
font-size: 8px;
margin: 5px 0px;
}
.chat-text-area {
font-size: 13px;
}
</style>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('content'); ?>
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1><?php echo e(trans('customer.quick_send')); ?></h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a
href="<?php echo e(route('customer.smsbox.overview')); ?>"><?php echo e(trans('customer.smsbox')); ?></a></li>
<li class="breadcrumb-item active"><?php echo e(trans('customer.quick_send')); ?></li>
</ol>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<!-- /.col -->
<div class="col-lg-8 col-md-7 mx-auto">
<div class="card card-primary card-outline">
<form id="compose_form" action="<?php echo e(route('customer.smsbox.compose.sent')); ?>" method="post"
enctype="multipart/form-data">
<?php echo csrf_field(); ?>
<div class="card-header">
<h3 class="card-title"><?php echo e(trans('customer.compose_new_message')); ?></h3>
</div>
<!-- /.card-header -->
<div class="card-body">
<div class="form-group">
<label for="device_id">Select Device</label>
<select name="device_id" class="form-control select2" id="device_id">
<option value="">Choose a device</option>
<?php $__currentLoopData = $devices; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $device): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option device_name="<?php echo e($device->name); ?>"
value="<?php echo e($device->id); ?>"><?php echo e($device->name); ?>
</option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</select>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label for="toNumbers">Select Recipient</label>
<select name="to_numbers[]" id="toNumbers" class="select2 compose-select"
multiple="multiple"
data-placeholder="<?php echo e(trans('customer.recipient')); ?>:">
<?php if(isset($users_to_contacts)): ?>
<optgroup label="Contacts">
<?php $__currentLoopData = $users_to_contacts; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $to): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option value="<?php echo e(json_encode($to)); ?>"><?php echo e($to['value']); ?></option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</optgroup>
<?php endif; ?>
<?php if(isset($users_to_groups)): ?>
<optgroup label="Groups">
<?php $__currentLoopData = $users_to_groups; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $to): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<option value="<?php echo e(json_encode($to)); ?>"><?php echo e($to['value']); ?></option>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</optgroup>
<?php endif; ?>
</select>
</div>
</div>
</div>
<div class="form-group">
<textarea name="body" cols="5" rows="5" id="compose-textarea" class="form-control compose-body"
placeholder="<?php echo e(trans('customer.enter_message')); ?>"></textarea>
<div class="text-right">
<b id="smsCount"></b> SMS (<b id="smsLength"></b>) Characters left
</div>
</div>
<div class="form-group d-none">
<label for="mms_files"><?php echo e(trans('customer.choose_file')); ?>:</label>
<input type="file" accept="image/*" id="mms_files" class="form-control"
name="mms_files[]" multiple>
</div>
<div class="form-group">
<div class="icheck-success d-inline">
<input name="isSchedule"
type="checkbox" id="isScheduled">
<label for="isScheduled">
<?php echo e(trans('customer.schedule')); ?>
</label>
</div>
<input style="display: none"
name="schedule"
value=""
id="schedule" type='text'
class="form-control"/>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<div class="float-right">
<button type="submit" class="btn btn-primary"><i
class="far fa-envelope"></i> <?php echo e(trans('customer.send')); ?>
</button>
</div>
<button id="reset" type="button" class="btn btn-default"><i
class="fas fa-times"></i> <?php echo e(trans('customer.reset')); ?>
</button>
</div>
<!-- /.card-footer -->
</form>
</div>
<!-- /.card -->
</div>
<div class="col-md-4 col-4" id="mobileVersion">
<div class="iphone"
style="background-image: url('<?php echo e(asset('images/iphone6.png')); ?>')">
<div class="border">
<div class="responsive-html5-chat">
<form class="chat">
<span></span>
<div class="messages">
<div class="message">
</div>
</div>
<input type="text" placeholder="Your message" disabled="">
<input type="submit" value="Send" disabled="">
</form>
<div class="chat-application-sec chat-box-sec d-flex">
<div class="chat-box-wrapper">
<div class="chat-box-text-sec chat-message-content chat-curve-reply">
<div class="text-sec" id="msg_mobaile_view">
</div>
</div>
</div>
<div class="user-icon-sec">
<i class="fa fa-user-circle user-chat-profile" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</section>
<!-- /.content -->
<input type="hidden" id="meg-time">
<?php $__env->stopSection(); ?>
<?php $__env->startSection('extra-scripts'); ?>
<script src="<?php echo e(asset('plugins/select2/js/select2.full.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/daterangepicker/moment.min.js')); ?>"></script>
<script src="<?php echo e(asset('plugins/daterangepicker/daterangepicker.js')); ?>"></script>
<script !src="">
"use strict";
var select2 = $('#toNumbers').select2({
minimumInputLength: 1,
tags: true,
tokenSeparators: [",", " "],
})
$('#fromNumber').select2({
theme: 'bootstrap4'
});
$('#from_number').select2({
multiple: false,
placeholder: 'Select a from number',
});
$(function () {
"use strict";
$('#schedule').daterangepicker({
autoUpdateInput: true,
singleDatePicker: true,
timePicker: true,
locale: {
format: 'MM/DD/YYYY hh:mm A'
}
});
});
$('#isScheduled').on('change', function (e) {
const checked = $(this).is(':checked');
if (checked) {
$('#schedule').show();
} else {
$('#schedule').hide();
}
})
$('#reset').on('click', function (e) {
e.preventDefault();
$(select2).val('').trigger('change');
$("#compose-textarea").val('');
let checked = $("#isScheduled").is(':checked');
if (checked) {
$('#isScheduled').click().prop("checked", false);
}
})
$("#compose-textarea").on("keyup change", function (e) {
e.preventDefault()
const checked = $("#isScheduled").is(':checked');
let dateTime = '';
if (checked) {
dateTime = $('#schedule').val();
} else {
dateTime = $('#meg-time').val()
}
let data = $('#compose-textarea').val();
let compose = data.replace(/\n/g, "<br />");
$("#msg_mobaile_view").html(`<div class="chat-text-area"> ${compose} <div>`);
});
$('#schedule').on('change', function (e) {
e.preventDefault()
let data = $('#compose-textarea').val();
let compose = data.replace(/\n/g, "<br />");
const checked = $("#isScheduled").is(':checked');
let dateTime = '';
if (checked) {
dateTime = $('#schedule').val();
} else {
dateTime = $('#meg-time').val()
}
if (compose) {
$("#msg_mobaile_view").html(`<div class="chat-date-time">${dateTime}</div>
<div class="chat-text-area"> ${compose}</div>`);
}
});
$('#isScheduled').on('change', function (e) {
e.preventDefault()
let data = $('#compose-textarea').val();
let compose = data.replace(/\n/g, "<br />");
const checked = $("#isScheduled").is(':checked');
let dateTime = '';
if (checked) {
dateTime = $('#schedule').val();
} else {
dateTime = $('#meg-time').val()
}
if (compose) {
$("#msg_mobaile_view").html(`<div class="chat-date-time">${dateTime}</div>
<div class="chat-text-area"> ${compose}</div>`);
}
});
$('#phone_number').trigger('change');
</script>
<script>
const myDate = new Date();
let daysList = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
let monthsList = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Aug', 'Oct', 'Nov', 'Dec'];
let date = myDate.getDate();
let month = monthsList[myDate.getMonth()];
let year = myDate.getFullYear();
let day = daysList[myDate.getDay()];
let today = `${date} ${month} ${year}, ${day}`;
let amOrPm;
let twelveHours = function () {
if (myDate.getHours() > 12) {
amOrPm = 'PM';
let twentyFourHourTime = myDate.getHours();
let conversion = twentyFourHourTime - 12;
return `${conversion}`
} else {
amOrPm = 'AM';
return `${myDate.getHours()}`
}
};
let hours = twelveHours();
let minutes = myDate.getMinutes();
let currentTime = `${hours}:${minutes} ${amOrPm}`;
$('#meg-time').val(today + ' ' + currentTime)
$('#device_id').on('change', function (e) {
e.preventDefault();
$('#sim_id').html('');
let simInfo = $('option:selected', this).attr('data-sim-info');
if (simInfo) {
simInfo = JSON.parse(simInfo);
if (simInfo && typeof simInfo == 'object') {
let options = '';
for (let sim of simInfo) {
let singleSimInfo = sim.split(':');
options += `<option value="${singleSimInfo[1]}">${singleSimInfo[2]} (SIM ${parseInt(singleSimInfo[0])+1})</option>`
}
$('#sim_id').html(options);
}
}
})
</script>
<script>
(function($){
$.fn.smsArea = function(options){
//Generate Ascii Character Array
var maxCh = 1000;
var minCh = 0;
var arrAscii = [];
for(minCh =1; minCh < maxCh; minCh++){
arrAscii.push(minCh * 160);
}
//End
//Generate Unicode Character Array
var unMaxCh = 1000;
var unMinCh = 0;
var arrUnicode = [];
for(unMinCh =1; unMinCh < unMaxCh; unMinCh++){
arrUnicode.push(unMinCh * 70);
}
//End
var
e = this,
cutStrLength = 0,
s = $.extend({
cut: true,
maxSmsNum: 1000,
interval: 5,
counters: {
message: $('#smsCount'),
character: $('#smsLength')
},
lengths: {
ascii: arrAscii,
unicode: arrUnicode
}
}, options);
e.keyup(function(){
clearTimeout(this.timeout);
this.timeout = setTimeout(function(){
var
smsType,
smsLength = 0,
smsCount = -1,
charsLeft = 0,
text = e.val(),
isUnicode = false;
for(var charPos = 0; charPos < text.length; charPos++){
switch(text[charPos]){
case "\n":
case "[":
case "]":
case "\\":
case "^":
case "{":
case "}":
case "|":
case "€":
smsLength += 2;
break;
default:
smsLength += 1;
}
//!isUnicode && text.charCodeAt(charPos) > 127 && text[charPos] != "€" && (isUnicode = true)
if(text.charCodeAt(charPos) > 127 && text[charPos] != "€")
isUnicode = true;
}
if(isUnicode) smsType = s.lengths.unicode;
else smsType = s.lengths.ascii;
for(var sCount = 0; sCount < s.maxSmsNum; sCount++){
cutStrLength = smsType[sCount];
if(smsLength <= smsType[sCount]){
smsCount = sCount + 1;
charsLeft = smsType[sCount] - smsLength;
break
}
console.log(sCount, s.maxSmsNum);
}
if(s.cut) e.val(text.substring(0, cutStrLength));
smsCount == -1 && (smsCount = s.maxSmsNum, charsLeft = 0);
s.counters.message.html(smsCount);
s.counters.character.html(charsLeft);
}, s.interval)
}).keyup();
}}(jQuery));
//Start
$(function(){
$('#compose-textarea').smsArea();
})
$('#fromType').trigger('change');
</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/sender.picotech.app/public_html/resources/views/customer/smsbox/compose.blade.php ENDPATH**/ ?>
|