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

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Save SMS Template</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Save SMS Template
        </div>
    </div>
    <br>
    <div class="col-lg-6 panel panel-default">

        <div class="panel-body p-3" style="border-top: 1px solid #8080804a;padding-top: 11px !important;">
            <h5>Save Sms Template</h5>
            <form id="sms_template_form">                
                <fieldset>
                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3 text-right">
                        Name
                    </label>

                    <div class="col-lg-8 col-md-9">
                        <input type="text" class="form-control" name="template_name" id="template_name" required>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3 text-right">
                        Content
                    </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="template_content" id="template_content" cols="30" rows="5" style="width: 100%;" required="" class="form-control" maxlength="480"></textarea>
                        
                        <div style="float:right;">
                            <span id="left_letter_template">160</span>&nbsp;letters are left<span>
                        </div>
                    </div>
                    
                </div>
                
                <div class="form-group">
                    <div class="col-lg-12 col-md-12">
                        <input type="button" value="Save" class="btn btn-primary btn-sm pull-right" onclick="saveTemplate()">
                    </div>
                </div>

            </fieldset>

            </form>
        </div>
    </div>

    <div class="col-lg-6 panel panel-default">
        <h4>Sms Template Table</h4>
        <div class="template-table-div"></div>
    </div>
    
    <div id="running_log"></div>
</div>
@endsection

@push('js')
    <script>           

            $('#template_content').on('keyup', function(e){
                var len = $(this).val().length;
                var left_letter = 160-len;
                $('#left_letter_template').html(left_letter);
                if (left_letter < 1) {
                    e.preventDefault();
                }
            })
           
            function getSmsTemplate(){

                let uri = '{{route('customer.get.sms.template')}}';

                axios.post(uri, null).then(res => {
                    var html = [];
                    $('.template-table-div').html(res.data);
                });
            }

            function saveTemplate(){
                if ($("form#sms_template_form").valid()){
                    let uri = '{{route('customer.save.sms.template')}}';
                        var data = {
                            name: $('#template_name').val(),
                            content: $('#template_content').val()
                        };
                        axios.post(uri, data).then(res => {
                            toastr.success('succeed');
                            $('#template_name').val('');
                            $('#template_content').val('');
                            getSmsTemplate();
                        });   
                }
            }

            function confirmDelete(id) {

                $.confirm({
                    title: "Please confirm!",
                    content: 'Are you sure to remove this template?',
                    buttons: {
                        OK: {
                            text: 'OK',
                            action: function() {
                                let uri = '{{route('customer.delete.sms.template')}}';
                                let data = {
                                    templateId: id
                                };
                                axios.post(uri, data).then(res => {
                                    toastr.success('successfully deleted');
                                    getSmsTemplate();
                                });
                            },
                        },
                        close: {
                            text: 'Cancel',
                            // action: function(){
                            //     form_validator.settings.ignore = "";
                            // },
                        },
                    }
                });
            }


        $(document).ready(()=>{
            getSmsTemplate();
            $('.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'); 
                }
            });
        })
    </script>
@endpush