Viewing file:  compose.blade.php (25.44 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.customer')
@section('title','Compose | SmsBox')
@section('extra-css')
<link rel="stylesheet" href="{{asset('plugins/select2/css/select2.min.css')}}">
<link rel="stylesheet" href="{{asset('plugins/daterangepicker/daterangepicker.css')}}">
<link rel="stylesheet" href="{{asset('plugins/icheck-bootstrap/icheck-bootstrap.min.css')}}">
<link rel="stylesheet" href="{{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;
}
.card-head-title {
font-weight: 600;
font-family: "Montserrat", sans-serif !important;
font-size: 17px;
}
.label-head {
font-size: 1rem !important;
font-weight: 600 !important;
}
</style>
@endsection
@section('content')
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>{{trans('customer.quick_send')}}</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a
href="{{route('customer.smsbox.overview')}}">{{trans('customer.smsbox')}}</a></li>
<li class="breadcrumb-item active">{{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="{{route('customer.smsbox.compose.sent')}}" method="post"
enctype="multipart/form-data">
@csrf
<div class="card-header">
<h3 class="card-title card-head-title">{{trans('customer.compose_new_message')}}</h3>
</div>
<input type="hidden" name="device_type" value="device" class="device_type">
<!-- /.card-header -->
<div class="card-body">
<ul class="nav nav-pills mb-3 mt-5" id="pills-tab" role="tablist">
<li class="nav-item contact-data mr-2">
<a class="nav-link custom nav-link-hover active activeDevice" data-type="device" id="pills-home-tab" data-toggle="pill"
href="#pills-home" role="tab" aria-controls="pills-home"
aria-selected="true">@lang('customer.devices')</a>
</li>
<li class="nav-item contact-data">
<a class="nav-link custom nav-link-hover activeDevice" data-type="whatsapp" id="pills-profile-tab" data-toggle="pill"
href="#pills-profile" role="tab" aria-controls="pills-profile"
aria-selected="false">@lang('customer.wa_devices')</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel"
aria-labelledby="pills-home-tab">
<div class="form-group">
<label for="device_id" class="label-head">Select Device</label>
<select name="device_id" class="form-control select2" id="device_id">
<option value="">Choose a device</option>
@foreach($devices as $device)
<option data-sim-info="{{$device->sim_info}}" device_name="{{$device->name}}"
value="{{$device->id}}">{{$device->name}} ({{$device->model}})
</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="sim_id" class="label-head">Select SIM</label>
<select name="subscriber_id" class="form-control select2" id="sim_id">
</select>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel"
aria-labelledby="pills-profile-tab">
<div class="form-group">
<label for="wadevice_id" class="label-head">Select Device</label>
<select name="device_id" class="form-control select2" id="wadevice_id">
<option value="">Choose a device</option>
@foreach($wadevices as $device)
<option data-sim-info="{{$device->sim_info}}" device_name="{{$device->name}}"
value="{{$device->id}}">{{$device->name}} ({{$device->model}})
</option>
@endforeach
</select>
</div>
</div>
</div>
{{-- <div class="form-group">
<label for="device_id" class="label-head">Select Device</label>
<select name="device_id" class="form-control select2" id="device_id">
<option value="">Choose a device</option>
@foreach($devices as $device)
<option data-sim-info="{{$device->sim_info}}" device_name="{{$device->name}}"
value="{{$device->id}}">{{$device->name}} ({{$device->model}})
</option>
@endforeach
</select>
</div> --}}
<div id="pre_draft">
@isset($draft)
<input type='hidden' id='draft_id' name='draft_id' value='{{$draft->id}}' />
@endisset
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label for="toNumbers" class="label-head">Select Recipient</label>
<select name="to_numbers[]" id="toNumbers" class="select2 compose-select"
multiple="multiple" data-placeholder="{{trans('customer.recipient')}}:">
@if(isset($draft) && $draft->formatted_number_to)
@foreach($draft->formatted_number_to_array as $to)
<option selected value="{{$to}}">{{$to}}</option>
@endforeach
@endif
@isset($users_to_contacts)
<optgroup label="Contacts">
@foreach($users_to_contacts as $to)
<option value="{{json_encode($to)}}">{{$to['value']}}</option>
@endforeach
</optgroup>
@endisset
@isset($users_to_groups)
<optgroup label="Groups">
@foreach($users_to_groups as $to)
<option value="{{json_encode($to)}}">{{$to['value']}}</option>
@endforeach
</optgroup>
@endisset
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="toNumbers" class="label-head">Message body</label>
<textarea name="body" id="compose-textarea" class="form-control compose-body"
placeholder="{{trans('customer.enter_message')}}">{{isset($draft)?$draft->body:''}}</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">{{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 d-none">
<div class="icheck-success d-inline">
<input {{isset($draft) && $draft->schedule_datetime?'checked':''}} name="isSchedule"
type="checkbox" id="isScheduled">
<label for="isScheduled">
{{trans('customer.schedule')}}
</label>
</div>
<input style="display: {{isset($draft) && $draft->schedule_datetime?'block':'none'}}"
name="schedule"
value="{{isset($draft) && $draft->schedule_datetime?$draft->schedule_datetime->format('m/d/Y h:i A'):''}}"
id="schedule" type='text' class="form-control" />
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<div class="float-right">
<button id="draft" type="button" class="btn btn-default"><i class="fas fa-pencil-alt"></i>
{{trans('customer.draft')}}
</button>
<button type="submit" class="btn btn-primary"><i class="far fa-envelope"></i>
{{trans('customer.send')}}
</button>
</div>
<button id="reset" type="button" class="btn btn-default"><i class="fas fa-times"></i>
{{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('{{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">
@endsection
@section('extra-scripts')
<script src="{{asset('plugins/select2/js/select2.full.min.js')}}"></script>
<script src="{{asset('plugins/daterangepicker/moment.min.js')}}"></script>
<script src="{{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'
}
});
});
$(document).on('click', '.activeDevice', function(e){
const type=$(this).attr('data-type');
$('.device_type').val(type);
})
$('#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);
}
})
$('#draft').on('click', function (e) {
e.preventDefault();
const from = $('#device_id').val();
const to = $('#toNumbers').val();
const body = $('#compose-textarea').val();
const checked = $("#isScheduled").is(':checked');
const draft_id = $("#draft_id").val();
let schedule = '';
if (checked) {
schedule = $('#schedule').val();
}
$.ajax({
method: 'post',
url: '{{route('customer.smsbox.draft.store')}}',
data: {_token: '{{csrf_token()}}', from, to, body, checked, schedule, draft_id},
success: function (res) {
if (res.status == 'success') {
notify('success', res.message);
var id = res.data.id;
$('#pre_draft').html("<input type='hidden' id='draft_id' name='draft_id' value='" + id + "'/>");
} else {
notify('danger', res.message);
}
}
})
})
$("#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>
@endsection
|