@extends('layouts.app')

@section('content')

     <!-- Main content-->
     <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="view-header">
                        <div class="header-icon">
                            <i class="pe page-header-icon pe-7s-albums"></i>
                        </div>
                        <div class="header-title">
                            <h3>SMS Enabled Numbers</h3>
                            <small>
                                Table for netsapiens domain extensions with sms
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            <button type="submit" class="btn btn-default btn-pull"><span class="pe-7s-refresh-2"></span>&nbsp;&nbsp;Pull SMS Extensions </button>
            <hr>
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-filled">
                        <div class="panel-body" id="maindiv">
                            <div class="loader">
                                <div class="loader-dots"></div>
                            </div>
                            <table id="maintable" class="table table-striped table-hover table-responsive-sm">
                                <thead>
                                <tr>
                                    <th>Domain</th>
                                    <th>Number</th>
                                    <th>Application</th>
                                    <th>Dest</th>
                                    <th>Carrier</th>
                                    <th>MMS Capable</th>
                                    <th>Group MMS Capable</th>
                                    <th>Sms Limit</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($domains as $domain)
                                <tr>
                                    <td><a href="/pbxdomain/{{$domain['domain']}}" target="_blank">{{$domain['domain']}}</a></td>
                                    <td>{{formatphonenumber($domain['number'])}}</td>
                                    <td>{{$domain['application']}}</td>
                                    <td>{{$domain['dest']}}</td>
                                    <td>{{$domain['carrier']}}</td>
                                    <td>{{$domain['mmsCapable']}}</td>
                                    <td>{{$domain['groupMMSCapable']}}</td>
                                    <td>{{$domain['sms_limit']}}</td>
                                    <td>
                                        <button class="btn btn-xs btn-default" data-toggle="modal" data-target="#edit-modal" type="button" data-rowid="{{ $domain->id }}"><i class="fa fa-paste"></i> Edit</button>
                                    </td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
                                <div class="loader">
                                    <div class="loader-bar"></div>
                                </div>
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header text-center">
                                            <h4 class="modal-title">Edit</h4>
                                        </div>
                                        <form id="frm-edit">
                                            <div class="modal-body">
                                                <div class="form-group"><label for="edit-number">Number</label>
                                                    <input type="number" id="edit-number" class="form-control" name="number" readonly>
                                                </div>
                                                <div class="form-group"><label for="edit-limit">Day Limit</label>
                                                    <input type="number" id="edit-limit" class="form-control" name="sms_limit">
                                                </div>
                                                <input type="hidden" id="edit-row-id" name="extension_id" value="">
                                            </div>
                                        </form>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default btn-edit">Save</button>
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- End main content-->
<script type="text/javascript" src="{{ asset('assets/jquery.validate.min.js') }}"></script>
<script src="vendor/datatables/datatables.min.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script>
    u="";
    function settoken(e) {u=$(e).parent().parent().children()[1].innerText;}
    $(document).ready(function () {
        $('#maintable').DataTable({
            //"order": [[ 0, "asc" ]],
            "scrollX": true,
            dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
            "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
            columnDefs: [
                { "width": "110px", "targets": [2] }
            ],
            buttons: [
                {extend: 'copy', className: 'btn-sm'},
                {extend: 'csv', title: 'CSV File', className: 'btn-sm'},
                {extend: 'pdf', title: 'PDF File', className: 'btn-sm'},
                {extend: 'print', className: 'btn-sm'}
            ],
        });

        $('.btn-pull').click(function() {
            overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
            $('#maindiv').toggleClass('ld-loading'); //Loading...

            $.ajax({
                type: "POST",
                url: "{{ route('apisv2.netsapiens.pulldomainextensionwithsms') }}?api_token={{auth()->user()->api_token}}",
                headers: {
                    'Authorization': `Bearer {{auth()->user()->api_token}}`,
                },
                data:{},
                success: function (data, status, jqXHR) {
                    overlay.remove();
                    $('#maindiv').toggleClass('ld-loading'); //Loading...

                    //console.log(data);
                    toastr.info("Reloading...");
                    setTimeout(function(){ location.reload(); }, 1000);
                },
                error: function (jqXHR, status) {
                    overlay.remove();
                    $('#maindiv').toggleClass('ld-loading'); //Loading...

                    //console.log(jqXHR);
                    toastr.error(jqXHR.responseJSON.message);
                }
            });
        });

        $('#edit-modal').on('show.bs.modal', function(event) {
            this.querySelector('form').reset();

            const button = $(event.relatedTarget);
            const extensionId = button.data('rowid');

            $.ajax({
                url: "{{ route('api.extension.get') }}?api_token={{auth()->user()->api_token}}&extension_id=" + extensionId,
                headers: {
                    'Authorization': `Bearer {{auth()->user()->api_token}}`,
                },
                success: function (data, status, jqXHR) {
                    $('#edit-limit').val(data.sms_limit);
                    $('#edit-row-id').val(data.id);
                    $('#edit-number').val(data.number);
                },
                error: function (jqXHR, status) {
                    //console.log(jqXHR);
                    toastr.error(jqXHR.responseJSON.message);
                }
            });
        });
        
        $('.btn-edit').click(function() {
            const frm = $('#frm-edit');

            overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
            $('#edit-modal').toggleClass('ld-loading'); //Loading...

            var data_post = frm.serialize();

            $.ajax({
                type: "POST",
                url: "{{ route('api.extension.edit') }}?api_token={{auth()->user()->api_token}}",
                headers: {
                    'Authorization': `Bearer {{auth()->user()->api_token}}`,
                },
                data:data_post,
                success: function (data, status, jqXHR) {
                    overlay.remove();
                    $('#edit-modal').toggleClass('ld-loading'); //Loading...

                    toastr.success("Updated!");
                    setTimeout(function() { location.reload(); }, 1000);
                },
                error: function (jqXHR, status) {
                    overlay.remove();
                    $('#edit-modal').toggleClass('ld-loading'); //Loading...

                    toastr.error(jqXHR.responseJSON.message);
                }
            });
        });
    });
</script>
@endsection