@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title') Client Usage @endsection
<style type="text/css">
    .form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio{
        display: unset;
    }
    td, th {
    text-align: center;
  }
</style>

<script>
	$(document).ready(function() {
		//multi select for users
        $('#acc_id').multiselect({
            includeSelectAllOption: true,
            allSelectedText: 'All Users selected',
            nonSelectedText: 'No User selected',
            selectAllValue: 'all',
            selectAllText: 'Select all',
            unselectAllText: 'Unselect all',
            buttonWidth:'300px'
        });
        $('#clientusagedashboard').DataTable({"bLengthChange": false});
        var d = new Date();
        $('#start_date,#end_date').datepicker('setDate','today');
        clientselection();
        $(".user_usage_excel").click(function(){
            var start_date = $('#start_date').val();
            var end_date = $('#end_date').val();
            var parent_id = $('#acc_id').val();
            $('#from_date_hidden').val(start_date);
            $('#to_date_hidden').val(end_date);
            $('#parent_id_hidden').val(parent_id);
            $(this).submit();
        });
    });
</script>

<div class="container-fluid">
    <div class="card">
      
    <div class="card-header">
        <h2>Client Usage 
            @can('hasExcelPermission')
            <form action="{{ url('exportclientusage') }}" method="post" class="pull-right">
                @csrf
                <button type="submit" class="user_usage_excel btn excel-button"><i class="fa fa-download"></i> Export</button>
                <input type="hidden" name="fromdate" id="from_date_hidden" />
                <input type="hidden" name="todate" id="to_date_hidden"/>
                <input type="hidden" name="parentid" id="parent_id_hidden"/>
            </form>
        @endcan
        </h2>
    </div>

    <div class="card-body table-responsive">
        <div class="row">
        <div class="filter-table-inline col-md-10 pl-0">
         <div class="form-group col-md-3">
                    <label for="start_date">Choose Account &nbsp; </label><br>
                        <select class="form-control" name="acc_id[]" multiple id="acc_id">
                        <optgroup label="ACTIVE">
                            @if(count($accname)>0)
                                @foreach ($accname as $value)
                                @if( $value->status == 1)
                                <option value="{{$value->id}}">{{ $value->account_name }}-({{$value->id}})</option>
                                @endif
                                @endforeach
                            @endif
                        </optgroup>
                        <optgroup label="INACTIVE">
                            @if(count($accname)>0)
                                @foreach ($accname as $value)
                                @if( $value->status == 0)
                                <option value="{{$value->id}}">{{ $value->account_name }}-({{$value->id}})</option>
                                @endif
                                @endforeach
                            @endif
                        </optgroup>
                        </select>
                </div>
                <div class="form-group col-md-2">
                            <label for="monthsel">Choose Time Period</label>
                            <select id="monthsel" class="form-control">
                                <option value=''>Select</option>
                                <option value="1" selected>Today</option>
                                <option value="2">Yesterday</option>
                                <option value="3">This Month</option>
                                <option value="4">Last Month</option>
                                <option value="5">Last 6 Months</option>
                                <option value="6">This Year</option>
                                <option value="7">Last Year</option>
                            </select>
                        </div>
                <div class="form-group col-md-2">
                    <label for="start_date">From Date</label>
                    <input type="text" id="start_date" class="form-control" name="start_date" placeholder="Start Date">
                </div>

                <div class="form-group col-md-2">
                    <label for="end_date">To Date</label>
                    <input type="text" id="end_date" class="form-control"  name="end_date" placeholder="End Date">

                </div>
        </div>

    </div>
            <table class="table-bordered table-striped" id="clientusagedashboard">
                <thead>
                    <tr>
                        <th>Account ID</th>
                        <th>Organization</th>
                        <th>Client Email Id</th>
                        <th>Volume Pushed </th>
                        <th>Volume Submitted</th>
                        <th>Total SMS Units</th>
                        <th>Spends</th>
                        <th>Sender Names</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($clientdata['data'] as $val)
                        <tr>
                            <td>{{$val->account_id }}</td>
                            <td>{{$val->account_name }}</td>
                            <td>{{$val->email }}</td>
                            <td>{{$val->pushed_volume}}</td>
                            <td>{{$val->volume_count}}</td>
                            <td>{{$val->total_units}}</td>
                            <td>{{$val->spends}}</td>
                            <td>{{$val->sender_names}}</td>
                        </tr>
                    @endforeach
                </tbody>
                <tfoot>
                    <tr>
                        <th>Total</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th title="Total Pushed Count"></th>
                        <th title="total Submitted Count"></th>
                        <th title="Total SMS Units"></th>
                        <th title="Total Spends"></th>
                        <th title="Sender Names">NA</th>
                    </tr>
                 </tfoot>
            </table>
    </div>
</div>

<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}"/>
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script>
	
    var start_date = end_date = '';
    $("#start_date").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate : 0,
        autoclose: true,
        todayHighlight: true,
        endDate: 'today',
        onSelect: function (selectedDate) {
            var date2 = $('#start_date').datepicker('getDate');
            $('#end_date').datepicker('option', 'minDate', date2);
            $('#end_date').datepicker('setDate', date2);
            clientselection();
            $('#monthsel').val('');
        }
    });
    $("#end_date").datepicker({
        dateFormat: 'yy-mm-dd',
        minDate: $("#start_date").datepicker("getDate"),
        maxDate : 0,
        autoclose: true,
        todayHighlight: true,
        onClose: function() {
            var dt1 = $('#start_date').datepicker('getDate');
            var dt2 = $('#end_date').datepicker('getDate');
            if (dt2 < dt1) {
                var minDate = $('#end_date').datepicker('option', 'minDate');
                $('#end_date').datepicker('setDate', minDate);
            }
            clientselection();
        },
        onSelect: function() {
            $('#monthsel').val('');
        }
    });

    $(document).ready(function() {
        
        $("body").on("change", "#monthsel", function(){
            var selectValue = $(this).val();

                //filter by today
                if(selectValue=='1'){
                var start_date = new Date().toJSON().slice(0,10);
                var end_date = new Date().toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
               clientselection(start_date, end_date);
            }

             //filter by yesterday
             else if(selectValue=='2'){
                var start_date =  new Date(Date.now() - 864e5).toJSON().slice(0,10);
                var end_date =  new Date(Date.now() - 864e5).toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                clientselection(start_date, end_date);
            }

            //filter by this month
            else if(selectValue=='3'){
                var start_date = new Date();
                var end_date = new Date().toJSON().slice(0,10);
                start_date = new Date(start_date.setMonth(start_date.getMonth()));
                start_date = new Date(start_date.setDate(1));
                start_date = start_date.toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                clientselection(start_date, end_date);
            }
             // filter by last month
           else if(selectValue=='4'){
                var start_date = new Date();
                var end_date = new Date();
                start_date = new Date(start_date.setDate(1));
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 1));
                start_date = start_date.toJSON().slice(0,10);
                end_date = new Date(end_date.setDate(1)-864e5);
                end_date = end_date.toJSON().slice(0,10);
                $('#end_date').val(end_date);
                $('#start_date').val(start_date);
                clientselection(start_date, end_date);
            }
            //filter by last 6 month
            else if(selectValue=='5')
            {
                var start_date = new Date();
                var end_date = new Date();
                end_date = new Date(end_date.setDate(1)-864e5);
                end_date = end_date.toJSON().slice(0,10);
                start_date = new Date(start_date.setDate(1));
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 6));
                start_date = start_date.toJSON().slice(0,10);
                $('#end_date').val(end_date);
                $('#start_date').val(start_date);
                clientselection(start_date, end_date);
            }
            //filter by this year
            else if(selectValue=='6')
            {
                var end_date = new Date().toJSON().slice(0,10);
                var makeDate = new Date(end_date);
                var start_date = new Date(makeDate.setMonth(0));
                start_date = new Date(makeDate.setDate(1));
                start_date = start_date.toJSON().slice(0,10);
                $('#end_date').val(end_date);
                $('#start_date').val(start_date);
                clientselection(start_date, end_date);
            }
            //filter by previous year
            else if(selectValue=='7'){
                var end_date = new Date();
                var start_date = new Date();
                end_date = new Date(end_date.setMonth(0));
                end_date = new Date(end_date.setDate(1)-864e5).toJSON().slice(0,10);
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 12));
                start_date = new Date(start_date.setMonth(0));
                start_date = new Date(start_date.setDate(1)).toJSON().slice(0,10);
                $('#end_date').val(end_date);
                $('#start_date').val(start_date);
                clientselection(start_date, end_date);
            }
        });
    });// end of document ready
    $('#acc_id').multiselect({
        enableFiltering: true,
        includeSelectAllOption: true,
        selectAllJustVisible: false,
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button">Clear</button></span>',
        },
        enableCaseInsensitiveFiltering: true,
    });
    $('#acc_id').change(function(){
        var parent_id = $(this).val();
        clientselection()
    });

    function clientselection(){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var parent_id = $('#acc_id').val();
        $.ajax({
            type: "POST",
            url: 'clientusage',
            data: {
                "_token"     : "{{ csrf_token() }}",
                "start_date" : start_date,
                "end_date"   : end_date,
                "parent_id"  : parent_id,
            },
            success: function(data) {
                var clientdata = data['data'];
                $("#clientusagedashboard").DataTable().clear().destroy();
                $('#clientusagedashboard').DataTable({data: clientdata, "bLengthChange": true,"scrollCollapse": true,"scrollY":  400,"scrollCollapse": true, "pageLength": 20,
                    order: [[5, 'desc']],
                aoColumns: [
                    { data: "account_id"},
                    { data: "account_name"},
                    { data: "email" },
                    { data: "pushed_volume" },
                    { data: "volume_count" },
                    { data: "total_units" },
                    { data: "spends" },
                    { data: "sender_names" }
                ],
                "footerCallback": function ( row, data, start, end, display ) {
                    var api = this.api(), data;

                    // Remove the formatting to get integer data for summation
                    var intVal = function ( i ) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '')*1 :
                            typeof i === 'number' ?
                                i : 0;
                    };

                    // Total sms unit in footer
                    pageTotalPushedCount = api.column(3).data().reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    pageTotalSubmittedCount = api.column(4).data().reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    pageTotalSmsUnit = api.column(5).data().reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    pageTotalSpends = api.column(6).data().reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );
                    // Update footer total
                    $( api.column( 3 ).footer() ).html(pageTotalPushedCount);
                    $( api.column( 4 ).footer() ).html(pageTotalSubmittedCount);
                    $( api.column( 5 ).footer() ).html(pageTotalSmsUnit);
                    $( api.column( 6 ).footer() ).html(pageTotalSpends);
                 }
                });
            }
        });
    }

</script>
@endsection