@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>Domains</h3>
                            <small>
                                Table for netsapiens domains
                            </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 Domains from PBX </button>
            <button type="submit" class="btn btn-default btn-pull-summaries"><span class="pe-7s-refresh-2"></span>&nbsp;&nbsp;Pull Domains summery from PBX </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>Description</th>
                                    <th>Reseller</th>
                                    <th>Count users total</th>
                                    <th>Count_devices_registered</th>
                                    <th>Count_devices_total</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($domains as $domain)
                                <tr>
                                    <td><a href="/pbxdomain/{{$domain['domain']}}" >{{$domain['domain']}}</a></td>
                                    <td>{{$domain['description']}}</td>
                                    <td>{{$domain['reseller']}}</td>
                                    <td>{{$domain['summary']['count_users_total'] ?? 0 }}</td>
                                    <td>{{$domain['summary']['count_devices_registered'] ?? 0}}</td>
                                    <td>{{$domain['summary']['count_devices_total'] ?? 0}}</td>
                                    <td><button class="btn btn-default btn-xs" data-toggle="modal" data-target="#info_modal" onclick="fullInfo({{$domain}});">Full info</button></td>
                                </tr>
                                @endforeach
                                </tbody>
                            </table>
                            <div class="modal fade" id="info_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">Full domain info</h4>
                                        </div>
                                        <div class="modal-body">
                                            <pre class="m-t-sm fullInfo"></pre>
                                        </div>
                                        <div class="modal-footer">
                                            <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;}
    function fullInfo(domainInfo) {
        $('.fullInfo').html(JSON.stringify(domainInfo, null, "\t"));
    }
    
    $(document).ready(function () {
        $('#maintable').DataTable({
            "order": [[ 0, "asc" ]],
            "scrollX": true,
            "autoWidth": false,
            dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
            "lengthMenu": [[25, 50, -1], [25, 50, "All"]],
            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.pulldomains') }}?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);
                }
            });
        });

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

            $.ajax({
                type: "POST",
                url: "{{ route('apisv2.netsapiens.pulldomainsummaries') }}?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);
                }
            });
        });
    });
</script>
@endsection