@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>Domain Overview - {{$domain}}</h3>
                            <small>
                                Info about domain
                            </small>
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="panel panel-filled">
                        <div class="panel-body">
                            <div class="small">Total SMS Extensions</div>
                            <h2 class="m-b-none">{{$extensionTotal}}</h2>
                        </div>
                    </div>
                </div>
            </div>
            
            <h3>SMS Enabled Numbers</h3>
            <hr />
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-filled">
                        <div class="panel-body">
                            <table class="table table-responsive-sm" id="sms-table">
                                <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Number</th>
                                    <th>Out. Today</th>
                                    <th>Inb. Today</th>
                                    <th>Out. AVG 7 days</th>
                                    <th>Inb. AVG 7 days</th>
                                    <th>Out. AVG 30 days</th>
                                    <th>Inb. AVG 30 days</th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($smsUsers as $user)
                                    <tr>
                                        <td>{{$user['dest']}}</td>
                                        <td>{{$user['number']}}</td>
                                        <td>{{$user->out_today }}</td>
                                        <td>{{$user->inb_today }}</td>
                                        <td>{{$user->week_out_avg }}</td>
                                        <td>{{$user->week_in_avg }}</td>
                                        <td>{{$user->month_out_avg }}</td>
                                        <td>{{$user->month_in_avg }}</td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- End main content-->
<script src="/vendor/chart.js/dist/Chart.min.js"></script>
<script src="/vendor/datatables/datatables.min.js"></script>
<script src="/vendor/datatables/dataTables.bootstrap4.min.js"></script>
<script>
    $(document).ready(function () {
        $('#maintable').DataTable({
            "order": [[ 0, "asc" ]],
            "autoWidth": false,
            "scrollX":true,
            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'}
            ]
        });
        
        $('#sms-table').DataTable({
            "order": [[ 0, "asc" ]],
            "autoWidth": false,
            "scrollX":true,
            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'}
            ]
        });
        
    });
</script>
@endsection