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

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>whatsapp</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            Whatsapp
        </div>
    </div>
    <br>
    <div class="col-lg-8 panel panel-default">
        <div class="panel-body p-3">
        <form id="send_sms_form" class="form-horizontal" role="form" action="{{route('whatsapp.send')}}" method="POST">
                @csrf
                <fieldset>

                <div class="form-group">
                    <label class="control-label col-lg-4 col-md-3">
                        Number
                    </label>

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

                <div class="form-group">
                    <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="content" id="content" cols="30" rows="5" style="width: 100%;" required="" class="form-control" maxlength="160"></textarea>
                        
                        <div style="float:right;">

                        </div>
                    </div>
                    
                </div>
                
                <div class="form-group">
                    <div class="col-lg-12 col-md-12">
                        <input type="submit" value="SEND" class="btn btn-primary btn-sm pull-right" id="send_sms_button">
                    </div>
                </div>

            </fieldset>

            </form>
            </div>
    </div>
</div>
@endsection

@push('js')
<script>

$(function() {
    
    // $('#send_sms_button').click(function(){
    //     var xhr = new XMLHttpRequest(),

    //             body = JSON.stringify(
    //                 {
    //                     "messages": [{
    //                         "to": '26776674902',//$('#number').val(),
    //                         "content": $('#content').val()
    //                     }]
    //                 }
    //             );
    //             xhr.open('POST', 'https://platform.clickatell.com/wa/messages', true);
    //             xhr.setRequestHeader('Content-Type', 'application/json');
    //             xhr.setRequestHeader('Authorization', '8-3-ggh6SkSFD80oIEDuJA==');
    //             xhr.onreadystatechange = function(){
    //                 if (xhr.readyState == 4 && xhr.status == 200) {
    //                     console.log('success');
    //                 }
    //             };

    //             xhr.send(body);
    // })
    
    $("form#send_sms_form").validate({                   
        submitHandler: function(form) {
            $.ajax({
                type:'post',
                data: $('form#send_sms_form').serializeArray(),
                url:'{{route('whatsapp.send')}}',
                success:function(res){
                    console.log(res);
                    if (res == 'fail') {
                        toastr.error('fails');    
                    } else {
                        toastr.success('succeed');
                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    toastr.error('fail');
                    console.log(textStatus, errorThrown);
                }
            });
        }
    });

})

</script>
@endpush