@extends('layouts.app')

@section('content')

<div class="row">
    {!! $filter_area !!}
    
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="card collapsible">
            <div id="dashboard_summary" class="header card-inside-title">
                <h2 class="pointer">
                    Overall
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
            </div>
            <div class="body panel-content">
                <table class="table table-bordered">
                    <thead>
                        <tr class="odd">
                            <th>Total Billable Minutes (min)</th>
                            <th>{{ @$overall['total_billable_mins'] }}</th>
                            </tr>
                        <tr class="even">
                            <th>Total Calls Counter (Call)</th>
                            <th>{{ @$overall['calls_counter'] }}</th>
                            </tr>
                        <tr class="odd">
                            <th>Total Cost Before Tax (LE)</th>
                            <th>{{ @$overall['total_cost_before'] }}</th>
                            </tr>
                        <tr class="even">
                            <th>Total Cost After Tax (LE)</th>
                            <th>{!! round(@$overall['total_cost_after'],2) !!}</th>
                        </tr>
                    </thead>
                </table>


            </div>
        </div>
    </div>
    
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="card collapsible">
            <div id="dashboard_tickets" class="header card-inside-title">

                <h2 class="pointer">
                    Billing
                    <span class="expander">
                        <i class="fa fa-angle-up pointer" aria-hidden="true"></i>
                    </span>
                </h2>
            </div>
            <div class="body panel-content">
                <div class="table-responsive col-lg-12 col-md-12 col-sm-12">
                    <table class="table users table-sortable data-table">
                        <Thead>
                            <tr>
                                <th class="th-sort-desc">Call Date</th>
                                <th>Ext</th>
                                <th>Call From</th>
                                <th>Call To</th>
                                <th>Network</th>
                                <th>Time</th>
                                <!-- <th>Ring Time</th> -->
                                <th>Minutes</th>
                                <th>Setup Fees</th>
                                <th>Fees</th>
                                <!-- <th>Tax-Fees</th> -->
                                <!-- <th>Action</th> -->
                            </tr>
                        </Thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
@push('scripts')
    <script type="text/javascript">

    @php
        $params_combined = 'daterange='.implode(' - ',$conds) ."&user_ext=".$user_ext;
    @endphp
    $(function () {
        var table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            order: [[0, 'desc']],
            ajax: "{{ route('reporting.billing').'?' }}{!! $params_combined !!}",
            columns: [
                {data: 'calldate', name: 'calldate'},
                {data: 'cnum', name: 'cnum',searchable: true},
                {data: 'cnam', name: 'cnam',searchable: true},
                {data: 'dst', name: 'dst',searchable: true},
                {data: 'network', name: 'network',searchable: true},
                {
                    data: 'billsec', 
                    name: 'billsec',
                    render: function (billsec) {
                        var date = new Date(null);
                        date.setSeconds(billsec);
                        var hhmmssFormat = date.toISOString().substr(11, 8);
                        return hhmmssFormat;
                    },
                    searchable: false
                },
                
                {data: 'minutes', name: 'minutes',searchable: false},
                {data: 'setup', name: 'setup',searchable: false},
                {data: 'fees', name: 'fees',searchable: false},
                //{data: 'taxfees', name: 'taxfees',searchable: false},
            ]
        });
    });
    </script>
    <script>
        console.log('hello');
    </script>
@endpush