@extends('layouts.app') @section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection @section('content') @section('page_title') SMS Template
Details list @endsection
<style>
    .note{
        text-align: center;
        font-weight: 400;
        margin-top: -20px;
        font-size: 0.8rem;
    }
    .d-inline-flex {
    margin-bottom: -50px;
    position:relative;
    z-index:1;
    }
    .table-responsive #maindashboard_filter{
    margin-bottom: 10px;
    }
</style>
<div class="container-fluid">
<!-- @include('dashboard.whistle_dashboard_header') -->

	<div class="card">
        <div class="row ml-3  mt-4 mb-n6">
            <div class="form-group col-md-2">
                @include('rcs_menu')
            </div>
            <div class="form-group col-md-8  align-items-center">
                @include('rcs_header_slider')
                <p class="note"> Reports will get updated with in 2 minutes</p>
            </div>
            @can('hasExcelPermission')
            <div class="col-md-2 mt-2">
                <form class="pull-right mr-3" method="post" action="{{ url('exportgetRcsDashboardApi') }}">
                @csrf
                <button type="submit" class="export-dashboard-excel btn btn-sm excel-btn border-radius-0 pull-right"><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="bot_name" id="bot_name_hidden"/>
                <input type="hidden" name="wa_msg_id" id="wa_msg_id_hidden"/>
                <input type="hidden" name="acc_id" id="acc_id_hidden"/>

                </form>
            </div>    
            @endcan
        </div>
		<div class="card-body">
            <div class="row">
                <div class="form-group col-md-2"> 
                    <label for="start_date">Account &nbsp; </label><br>
                    <select class="form-control" name="langOpt[]" multiple id="langOpt">
                        <optgroup label="ACTIVE">
                            @if(count($accname)>0)
                            @foreach ($accname as $key => $value)
                            @if( $value->status > 0)
                                <option value="{{ $value->id }}">{{ $value->account_name }}-({{ $value->id }})</option>
                                @endif
                                @endforeach
                            @endif
                            </optgroup>
                            <optgroup label="INACTIVE">
                            @if(count($accname)>0)
                            @foreach ($accname as $key => $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>Whistle Message ID</label>
                    <input type="text" class="form-control" id="wa_msg_id" name="wa_msg_id" placeholder="Whistle Message ID"  > 
                </div>
                <div class="form-group col-md-2">
                    <label>Bot Name</label>
                    <input type="text" class="form-control" id="bot_name" name="bot_name" placeholder="Bot Name" > 
                </div>
                <div class="form-group col-md-2">
                    <label for="period_filter">Choose Time Period</label>
                    <select id="period_filter" 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" class="form-control" id="start_date" name="start_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
                </div>
                <div class="form-group col-md-2">
                    <label for="end_date">To Date</label>
                    <input type="text" class="form-control" id="end_date" name="end_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
                </div>
            </div>
			<div class="table-responsive">
				<table class="table table-bordered table-hover text-center" id="datalist">
					<thead>
						<tr>
                            <th scope="col">Sl.No</th>
                            <th scope="col">Account ID</th>
							<th scope="col">Client</th>
							<th scope="col">User Name</th>
							<th scope="col">Email</th>
							<th scope="col">Whistle Message ID</th>
							<th scope="col">Template Name</th>
                            <th scope="col">Bot Name</th>
                            <th scope="col">Created Date</th>
                            <th scope="col">Volume Submitted</th>
                            <th scope="col">Sent</th>
                            <th scope="col">Delivered</th>
                            <th scope="col">Failed</th>
                            <th scope="col">Read</th>
                            <th scope="col">Revoke</th>
                            <th scope="col">Clicks</th>
                            <th scope="col">Unique Clicks</th>
                            <th scope="col">CPM</th>
                            <th scope="col">Spends <span data-toggle="tooltip" title="CPM * Volume Submitted"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
						</tr>
					</thead>
                    <tfoot>
                        <tr>
                        <th>Total</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        </tr>
                    </tfoot>
				</table>
			</div>
		</div>
	</div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script>
    $(document).ready(function () {
        listtemplate();
    });
    $('#langOpt').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Accounts selected',
        nonSelectedText: 'No  Account selected',
        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 border-radius-0" type="button">Clear</button></span>',
            },
            enableCaseInsensitiveFiltering: true
    });

    $("body").on("change", "#langOpt", function() {
        acc_id = $(this).val();
        bot_name = $('bot_name').val();
        wa_msg_id = $('wa_msg_id').val();
        listtemplate(bot_name,wa_msg_id,acc_id);                
    });

    $("#bot_name").keyup(function() {
        bot_name = $(this).val();
        wa_msg_id = $('wa_msg_id').val();
        acc_id = $('#langOpt').val();
        listtemplate(bot_name,wa_msg_id,acc_id);
    });

    $("#wa_msg_id").keyup(function() {
        bot_name = $('bot_name').val();
        wa_msg_id = $(this).val();
        acc_id = $('#langOpt').val();
        listtemplate(bot_name,wa_msg_id,acc_id);
    });

    $(".export-dashboard-excel").click(function(){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var bot_name = $('#bot_name').val();
        var wa_msg_id = $('#wa_msg_id').val();
        var acc_id = $('#langOpt').val();
        $('#from_date_hidden').val(start_date);
        $('#to_date_hidden').val(end_date);
        $('#bot_name_hidden').val(bot_name);
        $('#wa_msg_id_hidden').val(wa_msg_id);
        $('#acc_id_hidden').val(acc_id);
        $(this).submit();
    });
    /**select from date here***/
    $("#start_date").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate: 0,
        autoclose: true,
        todayHighlight: true,
        endDate: 'today',
        onSelect: function (selectedDate) {
            acc_id = $('#langOpt').val();
            bot_name = $('bot_name').val();
            wa_msg_id = $('wa_msg_id').val();
            var startDate = $('#start_date').datepicker('getDate');
            $('#end_date').datepicker('option', 'minDate', startDate);
            $('#end_date').datepicker('setDate', startDate);
            listtemplate(bot_name,wa_msg_id,acc_id);
            $('#period_filter').val('');
        }
    });
    /**select to date here***/
    $("#end_date").datepicker({
        dateFormat: 'yy-mm-dd',
        minDate: $("#start_date").datepicker("getDate"),
        maxDate: 0,
        autoclose: true,
        todayHighlight: true,
        onClose: function () {
            acc_id = $('#langOpt').val();
            bot_name = $('bot_name').val();
            wa_msg_id = $('wa_msg_id').val();
            var startDate = $('#start_date').datepicker('getDate');
            var endDate = $('#end_date').datepicker('getDate');
            if (startDate == null) {
                $('#start_date').datepicker('setDate', endDate);
            }
            if (endDate < startDate) {
                var minDate = $('#end_date').datepicker('option', 'minDate', startDate);
                $('#end_date').datepicker('setDate', minDate);
            }
            listtemplate(bot_name,wa_msg_id,acc_id);
        },
        onSelect: function () {
            $('#period_filter').val('');
        }
    });
    $("body").on("change", "#period_filter", function () {
        acc_id = $('#langOpt').val();
        bot_name = $('bot_name').val();
        wa_msg_id = $('wa_msg_id').val();
        var periodValue = $(this).val();
        $("#start_date").val('');
        $("#end_date").val('');
        if (periodValue == '') {
            listtemplate(bot_name,wa_msg_id,acc_id);
        }
        //filter by today
        if (periodValue == '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);
            listtemplate(bot_name,wa_msg_id,acc_id);
        }
        //filter by yesterday
        else if (periodValue == '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);
            listtemplate(bot_name,wa_msg_id,acc_id);
        }
        //filter by this month
        else if (periodValue == '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);
            listtemplate(bot_name,wa_msg_id,acc_id);
        }
        //filter by last month
        else if (periodValue == '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);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
            listtemplate(bot_name,wa_msg_id,acc_id);
        }
        //filter by last 6 month
        else if (periodValue == '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);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
            listtemplate(bot_name,wa_msg_id,acc_id);
        }
        //filter by this year
        else if (periodValue == '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);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
            listtemplate(bot_name,wa_msg_id,acc_id);
        }
        //filter by previous year
        else if (periodValue == '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);
            $('#start_date').val(start_date);
            $('#end_date').datepicker('option', 'minDate', start_date);
            $('#end_date').datepicker('setDate', end_date);
            listtemplate(bot_name,wa_msg_id,acc_id);
        }
    });
    function listtemplate(bot_name=null,wa_msg_id=null,acc_id=null){
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
		$("#datalist").DataTable().clear().destroy();
        $('#datalist').DataTable({
            "autoWidth": false,
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "scrollX": true,
            "lengthChange": false,
            "pageLength":20,
            "bLengthChange": true,
            "scrollY":  400,
            "scrollCollapse": true,
            "ordering": true,
            "language": {
                search: '',
                searchPlaceholder: "Search..."
            },
            "order": [
                [0, "desc"]
            ],
            "ajax":{
                    "url": "{{ url('getRcsDashboardApi') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data":{
                        _token: "{{csrf_token()}}",
                        start_date: start_date,
                        end_date: end_date,
                        bot_name:bot_name,
                        wa_msg_id:wa_msg_id,
                        acc_id:acc_id
                    }
                   },
            "columns": [
                { data: "id",
                    render: function(data, type, row, meta){
                    	return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
            	{ data: "account_id",
                    render: function(data, type, row, meta){
                    return ((row.account_id)  ? row.account_id :  "NA")
                }
                },
                { data: "client",
                    render: function(data, type, row, meta){
                    return ((row.client)  ? row.client :  "NA")
                }
                },
                { data: "username",
                    render: function(data, type, row, meta){
                    return ((row.username)  ? row.username :  "NA")
                }
                },
                { data: "email",
                    render: function(data, type, row, meta){
                    return ((row.email)  ? row.email :  "NA")
                }
                },
                { data: "wrt",
                    render: function(data, type, row, meta){
                    return ((row.wrt)  ? 'WRT'+row.wrt :  "WRT")
                }
                },
                { data: "template_name",
                    render: function(data, type, row, meta){
                    return ((row.template_name)  ? row.template_name : 'NA')
                }
                },
                { data: "header_name",
                    render: function(data, type, row, meta){
                    return ((row.header_name)  ? row.header_name :  "NA")
                }
                },
                { data: "dashboard_date",
                    render: function(data, type, row, meta){
                    return ((row.dashboard_date)  ? row.dashboard_date :  "NA")
                }
                },
                { data: "submitted_volume",
                    render: function(data, type, row, meta){
                    return ((row.submitted_volume)  ? row.submitted_volume :  "0")
                }
                },
                { data: "sent_count",
                    render: function(data, type, row, meta){
                    return ((row.sent_count)  ? row.sent_count :  "0")
                }
                },
                { data: "delivery_count",
                    render: function(data, type, row, meta){
                    return ((row.delivery_count)  ? row.delivery_count :  "0")
                }
                },
                { data: "failed_count",
                    render: function(data, type, row, meta){
                    return ((row.failed_count)  ? row.failed_count :  "0")
                }
                },
                { data: "read_count",
                    render: function(data, type, row, meta){
                    return ((row.read_count)  ? row.read_count :  "0")
                }
                },
                { data: "revoked_count",
                    render: function(data, type, row, meta){
                    return ((row.revoked_count)  ? row.revoked_count :  "0")
                }
                },
                { data: "clicks",
                    render: function(data, type, row, meta){
                    return ((row.clicks)  ? row.clicks :  "0")
                }
                },
                { data: "unique_clicks",
                    render: function(data, type, row, meta){
                    return ((row.unique_clicks)  ? row.unique_clicks :  "0")
                }
                },
                { data: "cps",
                    render: function(data, type, row, meta){
                    return ((row.cps)  ? row.cps :  "0")
                }
                },
                { data: "spends",
                    render: function(data, type, row, meta){
                    return ((row.spends)  ? row.spends :  "0")
                }
                },
            ],
            fnRowCallback: function(nRow, aData) {
                return nRow;
            },
            "footerCallback": function ( row, start, end, display ) {
            var row = this.api();
            var api = this.api().ajax.json().footer_total[0];
            const numberFormatter = Intl.NumberFormat('en-US');
            $( row.column(9).footer() ).html(api['submitted_volume'] ? numberFormatter.format(api['submitted_volume']) : 0);
            $( row.column(10).footer() ).html(api['sent_count']      ? numberFormatter.format(api['sent_count'])      : 0);
            $( row.column(11).footer() ).html(api['delivery_count']      ? numberFormatter.format(api['delivery_count'])      : 0);
            $( row.column(12).footer() ).html(api['failed_count']      ? numberFormatter.format(api['failed_count'])      : 0);
            $( row.column(13).footer() ).html(api['read_count']      ? numberFormatter.format(api['read_count'])      : 0);
            $( row.column(14).footer() ).html(api['revoked_count']      ? numberFormatter.format(api['revoked_count'])      : 0);
            $( row.column(15).footer() ).html(api['clicks']      ? numberFormatter.format(api['clicks'])      : 0);
            $( row.column(16).footer() ).html(api['unique_clicks']      ? numberFormatter.format(api['unique_clicks'])      : 0);
            $( row.column(18).footer() ).html(api['spends']      ? numberFormatter.format(api['spends'])      : 0);
        }
        });
    }
</script>
@endsection