@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-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>
            <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>Username</th>
                        <th>Mobile</th>
                        <th>Type</th>
                        <th>Message</th>
                        <th>Time</th>
                        <th>Sent On</th>
                    </thead>
                    <tbody>
                                                @foreach($logs as $log)
                        <tr>
                            <td>
                            <div class="inline" style="display:inline-block;">
                              <input type="checkbox" form="bulk_delete_form" class="custom-checkbox filled-in" name="checked[]" value="{{$log->id}}" id="checkbox{{$log->id}}">
                              <label for="checkbox{{$log->id}}"></label>
                            </div>
                            {{++$index}}</td>
                            <td>{{ $log->username }}</td> 
                            <td>{{ $log->mobile }}</td> 
                            <td>{{ $log->type }}</td> 
                            <td><p data-toggle="tooltip" data-placement="top" title="{{$log->message}}">{{ \Str::limit($log->message,25) }}</p></td> 
                            <td>{{ $log->remark }}</td> 
                            <td>{{ $log->created_at }}</td> 
                        </tr>
                        @endforeach
                    </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>
            $(".select2").select2({
                // 'placeholder': '--please--'
            });

            $('#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();
                }
            })

            $(function() {
                $('[data-toggle="tooltip"]').tooltip();
                getCustomerByGroup();
  
                $("form#send_sms_form").validate({ 
                    submitHandler: function(form) {
                        console.log($('form#send_sms_form').serializeArray());
                        $.ajax({
                            type:'post',
                            data: $('form#send_sms_form').serializeArray(),
                            url:'{{route('customer.sendsms')}}',
                            success:function(res){
                                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');
                                    location.reload();
                                    /** end */
                                }
                            },
                            error:function(res){
                                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);
                });
            }
        $('.table').dataTable({
             "pageLength": 50       
       });
    </script>
@endpush