@extends('layouts.app', ['pageSlug' => 'customerSetup'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Send SMS</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Send SMS
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-6 panel panel-default">
            <div class="panel-body">
                <form id="send_sms_form" class="form-horizontal" role="form" action="{{route('customer.sendsms')}}" method="POST">
                    @csrf
                    <fieldset>
    
                    <div class="form-group">
                        <label class="control-label col-lg-4 col-md-3">
                            Group
                        </label>
    
                        <div class="col-lg-8 col-md-9">
                            <select style="width: 100%;" class="select2 select2-hidden-accessible" name="group[]" id="group" multiple>
                                <option value="">select group</option>
                                @foreach ($groups as $g)
                                @if(empty($g->group)) @continue @endif
                                <option value="{{$g->group}}">{{$g->group}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
    
                  
                    <div class="form-group">
                        <label class="control-label col-lg-4 col-md-3">
                            Customers
                        </label>
    
                        <div class="col-lg-8 col-md-9">
                            <select style="width: 100%;" class="select2 select2-hidden-accessible" name="receivers[]" id="receivers" multiple required>
                                
                            </select>
                        </div>
                    </div>
    
                    <div class="form-group">
                        <label class="control-label col-lg-4 col-md-3">
                            Template ON/OFF
                        </label>
    
                        <div class="col-lg-8 col-md-9">
                            <label for="non_template">
                                <input type="radio" name="template_on_off" id="non_template" value="off" checked>No Use Template
                            </label>
                            <label for="use_template">
                                <input type="radio" name="template_on_off" id="use_template" value="on">Use Template
                            </label>
                        </div>
                    </div>
                    
                    <div class="form-group non-template-msg">
                        <label class="control-label col-lg-4 col-md-3">
                            Message
                        </label>
                        <div class="col-lg-8 col-md-9">
                        <!-- max length for sms is 160 https://www.clickatell.com/faqs/answer/what-is-the-maximum-length-of-an-sms/ -->
                            <textarea name="message" id="message" cols="30" rows="5" style="width: 100%;" class="form-control" maxlength="480"></textarea>
                            
                            <div style="float:right;">
                                <span id="left_letter">160</span>&nbsp;letters are left<span>
                            </div>
                        </div>
                        
                    </div>
    
                    <div class="form-group use-template-msg">
                        <label class="control-label col-lg-4 col-md-3">
                            Templates
                        </label>
    
                        <div class="col-lg-8 col-md-9">
                            <select style="width: 100%;" class="select2 select2-hidden-accessible" name="sms_template_name" id="sms_template_name" onchange="getTemplateById()">
                                <option value="">select template</option>
                                <option value="portal_info">Portal Info</option>
                                <option value="expired_user">Expired users</option>
                                @foreach ($templates as $t)
                                <option value="{{$t->id}}">{{$t->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group use-template-msg">
                        <label class="control-label col-lg-4 col-md-3">
                           Template Message
                        </label>
                        <div class="col-lg-8 col-md-9">
                            <textarea name="sms_template_message" id="sms_template_message" cols="30" rows="5" style="width: 100%;" class="form-control" maxlength="160"></textarea>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="col-lg-12 col-md-12">
                            <button type="submit" class="btn btn-primary btn-sm pull-right" id="send_sms_button">SEND</button>
                        </div>
                    </div>
    
                </fieldset>
    
                </form>
                <div id="pageloader" style="display:none;">
                  <span><i class="fa fa-2x fa-spin fa-spinner"></i> <b>Processing</b></span>
                </div>
            </div>
        </div>
        @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
        <div class="col-lg-6 panel panel-default">
            <div class="panel-body">
                <h4>Clickatell Balance</h4>
                <h3>{{isset($balance['balance']) ? $balance['balance'] : ''}} {{isset($balance['currency']) ? $balance['currency'] : ''}}</h3>
            </div>
        </div>
        @endif
        <br>
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-6"><h5>SMS Log</h5></div>
                <div class="col-lg-6 text-right"><button type="button" class="btn btn-danger" data-toggle="modal" data-target="#bulk_delete"><i class="fa fa-trash"></i> Delete Selected</button></div>
            </div>
            <div id="bulk_delete" class="delete-modal modal fade" role="dialog">
                <div class="modal-dialog modal-sm">
                <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="delete-icon"></div>
                  </div>
                  <div class="modal-body text-center">
                    <h4 class="modal-heading">Are You Sure ?</h4>
                    <p>Do you really want to delete these records? This process cannot be undone.</p>
                  </div>
                  <div class="modal-footer">
                    <form class="form-horizontal" role="form" action="{{route('customer.removesms')}}" method="POST" id = "bulk_delete_form">
                        @csrf
                      <button type="reset" class="btn btn-info" data-dismiss="modal">No</button>
                      <button type="submit" class="btn btn-danger">Yes</button>
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <br>
            <div id="running_log">
                <table id="custom_table1" class="table table-striped table-bordered">
                    <thead>
                        <th>        
                        <div class="inline" style="display:inline-block;">
                          <input id="checkboxAll" type="checkbox" class="custom-checkbox filled-in" name="checked[]" value="all">
                          <label for="checkboxAll"></label>
                        </div>#</th>
                        <th>ID</th>
                        <th>Username</th>
                        <th>Mobile</th>
                        <th>Type</th>
                        <th>Message</th>
                        <th>Status</th>
                        <th>Sent On</th>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('js')

<style>
#receivers-error{
    position: absolute;
    top: 10px;
    z-index: 99;
}
</style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
    <script>
        $(function() {
            $(".select2").select2({
                // 'placeholder': '--please--'
            });
            var url = $(location).attr('href');
            var table2 = $('#custom_table1').DataTable({
              processing: true,
              serverSide: true,
              stateSave: true,
              pageLength: 50,
              searchable: true,
              ajax: url,
              language: {
                searchPlaceholder: "Search..."
              },
              columns: [
                  {data: 'id', name: 'id', searchable : false, orderable : false},
                  {data: 'DT_RowIndex', name: 'DT_RowIndex', searchable : false, orderable : false},
                  {data : 'username', name : 'sms_logs.username'},
                  {data : 'mobile', name : 'sms_logs.mobile'},
                  {data : 'type', name : 'sms_logs.type'},
                  {data : 'message', name : 'sms_logs.message'},
                  {data : 'status', name : 'sms_logs.status'},
                  {data : 'sent', name : 'sms_logs.created_at'},
              ],
              dom : 'lBfrtip',
              buttons : [
                'csv','excel','pdf','print','copy'
              ],
              order : [[0,'DESC']]
           });
            $('#message').on('keyup', function(e){
                var len = $(this).val().length;
                var left_letter = 160-len;
                $('#left_letter').html(left_letter);
                if (left_letter < 1) {
                    e.preventDefault();
                }
            })
          $( document ).ajaxComplete(function() {
            // Required for Bootstrap tooltips in DataTables
                $('[data-toggle="tooltip"]').tooltip({
                    "html": true,
                    "delay": {"show": 1000, "hide": 0},
                });
            });
            getCustomerByGroup();
            
            
            $("form#send_sms_form").validate({ 
                submitHandler: function(form) {
                    $("#send_sms_button").prop("disabled", true);
                    console.log($('form#send_sms_form').serializeArray());
                    $('#pageloader').show();
                    $.ajax({
                        type:'post',
                        data: $('form#send_sms_form').serializeArray(),
                        url:'{{route('customer.sendsms')}}',
                        success:function(res){
                            $("#send_sms_form").attr('disabled','false');
                            if (res == 'fail') {
                                toastr.error('fails');    
                            } else if (res == 'no-msg') {
                                toastr.error('please insert message');
                            } else {
                                toastr.success('Succeed');
                                /** refresh fields */
                                
                                $('#receivers').val('').trigger('change');
                                $('#sms_template_name').val('').trigger('change');
                                $('#sms_template_message').val('');
                                $('#message').val('');
                                $('#use_template').prop('checked', false);
                                $('#non_template').prop('checked', true).trigger('change');
                                $('#pageloader').hide();
                                location.reload();
                                /** end */
                            }
                        },
                        error:function(res){
                            $("#send_sms_button").prop("disabled", false);
                            $('#pageloader').hide();
                            console.log('Error', res);
                            toastr.error('fail');
                        }
                    });
                }
            });

            $('#group').change(()=>{
                getCustomerByGroup();
            });

            $('#receivers').change(function(){
                $('#receivers-error').css('display', 'none');
                var selected = $('#receivers').val();
                if (selected.includes('all') && selected.length > 1){
                    $('#receivers').val('all').trigger('change');
                }
            });

            $('.use-template-msg').css('display','none');

            $("input:radio[name='template_on_off']").change(function(){
                var _val = $(this).val();
                if (_val == 'off') {
                    $('.use-template-msg').css('display','none'); 
                    $('.non-template-msg').css('display',''); 
                } else {
                    $('.use-template-msg').css('display',''); 
                    $('.non-template-msg').css('display','none'); 
                }
            });

        });

        function getCustomerByGroup(){
            var group = $('#group').val();
            console.log(group);
            let uri = '{{route('customer.get.by.group')}}';
            var data = {
                'group': group
            }
            axios.post(uri, data).then(res => {
            console.log(res.data);
                var html = [];
                html.push('<option value="all">All(!!!this will send all customers)</option><option value="active">Active customers only</option>');
                for(var cus of res.data) {
                    var opt = '<option value="' + cus.mobile + '">' + cus.username + '('+ cus.mobile +') ('+ cus.status +')</option>';
                    html.push(opt);
                }
                $('#receivers').html(html.join('')).trigger('change');
            });
        }

        function getTemplateById() {
            var tempId = $('#sms_template_name').val();

            let uri = '{{route('customer.get.sms.template.byid')}}';
            var data = {
                'templateId': tempId
            }
            axios.post(uri, data).then(res => {
                
                $('#sms_template_message').html(res.data.content);
            });
        }
    </script>
@endpush