@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>
    .d-inline-flex {
    margin-bottom: -50px;
    position:relative;
    z-index:1;
    }
    .table-responsive #datalist_filter{
    margin-top: 20px;
    margin-right:40px;
    }
    .table-responsive #maindashboard_filter{
    margin-bottom: 10px;
    }
    .dataTables_length{
        margin-top: 30px;
    }
</style>
<div class="container-fluid">
<!-- @include('dashboard.whistle_dashboard_header') -->
@include('dashboard.transactional_header')
	<div class="card">
        <div class="row ml-3  mt-4 mb-n6">
            <div class="form-group col-md-2">@include('sms_trans_menu')</div>
            <div class="col-md-10 mt-2">
                <form class="pull-right mr-3" method="post" id="exportdashboard" action="{{ url('exportTransLogsdashboard') }}">
                @csrf
                    <button type="submit" class="export-dashboard-excel btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                </form>
            </div>
        </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>Sender ID</label>
                    <input type="text" class="form-control" id="sender_id" name="sender_id" placeholder="Search Sender ID" onkeypress="return (event.charCode >= 65 && event.charCode <= 90) || (event.charCode >= 97 && event.charCode <= 122)">
                </div>
                <div class="form-group col-md-2">
                    <label>wmsgid / Template ID</label>
                    <input type="text" class="form-control" id="sms_temp_id" name="sms_temp_id" placeholder="Search Template ID" onkeypress="return event.charCode >= 48 && event.charCode <= 57" > 
                </div>
                <div class="form-group col-md-2">
                    <label>Entity ID</label>
                    <input type="text" class="form-control" id="entity_id" name="entity_id" placeholder="Search Entity ID" onkeypress="return event.charCode >= 48 && event.charCode <= 57" > 
                </div>
                <div class="form-group col-md-2">
                    <label>Mobile Number</label>
                    <input type="text" class="form-control" id="mobile_num" name="mobile_num" placeholder="Search Mobile Number" onkeypress="return event.charCode >= 48 && event.charCode <= 57" maxlength="10"  onpaste="handlePaste(event)"> 
                </div>
                <div class="form-group col-md-2">
                    <label for="language">Language</label>
                    <select id="language" class="form-control">
                        <option value='' selected>All</option>
                        <option value='0'>English</option>
                        <option value='1'>Unicode</option>     
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="msg_type">Message Type</label>
                    <select id="msg_type" class="form-control">
                        <option value='' selected>All</option>
                        <option value='2'>Promotional</option>
                        <option value='1'>Transactional</option>     
                    </select>
                </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 3 Months</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 class="form-group col-md-1 mt-4">
                    <button type="submit" id= "submit" class="btn btn-primary form-control">Apply</button>
                </div>
            </div>
			<div class="table-responsive">
				<table class="table table-bordered table-hover text-center" id="datalist">
					<thead>
						<tr>
                            <th>Sl.No</th>
                            <th>Account ID</th>
							<th>Client Name</th>
                            <th>User Name</th>
                            <th>Email</th>
                            <th>Mobile Number</th>
                            <th>Whistle Message ID</th>
                            <th>Gateway Name</th>
                            <th>Sender Name</th>
                            <th>SMS Template ID</th>
                            <th>Entity ID</th>
                            <th>Message Type</th>
                            <th>Language</th>
                            <th>Sample Content</th>
                            <th>Char Length</th>
                            <th>SMS Unit</th>
                            <th>Msg ID</th>
                            <th>Sent Date</th>
                            <th>Sent TimeStamp</th>
                            <th>Delivered Date</th>
                            <th>Delivered TimeStamp</th>
                            <th>Clicks</th>
                            <th>Unique Clicks</th>
                            <th>Whistle Action</th>
                            <th>CPUC <span data-toggle="tooltip" title="(Spends / Unique Clicks)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                            <th>CPA <span data-toggle="tooltip" title="(Spends /Whistle Action"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                            <th>CPM </th>
                            <th>Spends</th>
                            <th>Error Code</th>
                            <th>Error Status</th>
                            <th>Error Response</th>
						</tr>
					</thead>
				</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>
    //multi select for users
    $('#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
    });
    function handlePaste(event) {
        var pasteData = (event.clipboardData || window.clipboardData).getData('text');
        if (!/^\d+$/.test(pasteData)) {
            event.preventDefault();
        }
    }
    $(document).ready(function () {
        $('#datalist').DataTable({"scrollX": true, "bLengthChange": false,  "language": {search: '', searchPlaceholder: "Search..."} });
        date_filter();
    });
    function date_filter(){
         /**select from date here***/
        $("#start_date").datepicker({
            dateFormat: 'yy-mm-dd',
            maxDate: 0,
            autoclose: true,
            todayHighlight: true,
            endDate: 'today',
            onSelect: function (selectedDate) {
                var startDate = $('#start_date').datepicker('getDate');
                $('#end_date').datepicker('option', 'minDate', startDate);
                $('#end_date').datepicker('setDate', startDate);
                $('#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 () {
                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);
                }
            },
            onSelect: function () {
                $('#period_filter').val('');
            }
        });
        $("body").on("change", "#period_filter", function () {
            var periodValue = $(this).val();
            var sender_id = $('#sender_id').val();
            var mobile_num = $('#mobile_num').val();
            var sms_temp_id = $('#sms_temp_id').val();
            var parent_id = $('#langOpt').val();
            var entity_id = $('#entity_id').val();
            var language = $('#language').val();
            var msg_type = $('#msg_type').val();
            $("#start_date").val('');
            $("#end_date").val('');
            if (periodValue == '') {
                
            }
            //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);
            }
            //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);
            }
            //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);
            }
            //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);
            }
            //filter by last 3 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() - 3));
                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);
            }
        });

    }
   
    function listtemplate(start_date=null,end_date=null,sender_id=null,mobile_num=null,sms_temp_id=null,parent_id=null,entity_id=null,language=null,msg_type=null){
		$("#datalist").DataTable().clear().destroy();
        $('#datalist').DataTable({
            "autoWidth": false,
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "scrollX": true,
            "lengthChange": false,
            "pageLength":20,
            "scrollY":  400,
            "bLengthChange": true,
            "scrollCollapse": true,
            "ordering": true,
            "language": {
                search: '',
                searchPlaceholder: "Search..."
            },
            "order": [
                [20, ""]
            ],
           
            "ajax":{
                    "url": "{{ url('smsTransLogs') }}",
                    "dataType": "json",
                    "type": "POST",
                    "data":{
                        _token: "{{csrf_token()}}",
                        start_date: start_date,
                        end_date: end_date,
                        sender_id:sender_id,
                        mobile_num:mobile_num,
                        sms_temp_id:sms_temp_id,
                        parent_id:parent_id,
                        entity_id:entity_id,
                        language:language,
                        msg_type:msg_type,
                    },
                    "dataType": "json",

                   },
            "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_name",
                    render: function(data, type, row, meta){
                    return ((row.client_name)  ? row.client_name :  "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: "mobile_number",
                    render: function(data, type, row, meta) {
                        if (type == 'display') {
                            if (row.mobile_number) {
                                return row.mobile_number.substring(0, 5) + 'XXXXX';
                            } else {
                                return "NA";
                            }
                        } else {
                            return data;
                        }
                    }
                },
                { data: "whistle_message_id",
                    render: function(data, type, row, meta){
                    return ((row.whistle_message_id)  ? row.whistle_message_id :  "WST")
                }
                },
                { data: "gateway",
                    render: function(data, type, row, meta){
                    return ((row.gateway)  ? row.gateway :  "NA")
                }
                },
                { data: "sender_id_name",
                    render: function(data, type, row, meta){
                    return ((row.sender_id_name)  ? row.sender_id_name :  "NA")
                }
                },
                { data: "sms_template_id",
                    render: function(data, type, row, meta){
                    return ((row.sms_template_id)  ? row.sms_template_id :  "NA")
                }
                },
                { data: "entity_id",
                    render: function(data, type, row, meta){
                    return ((row.entity_id)  ? row.entity_id :  "NA")
                }
                },
                {
                    data: "message_type",
                    render: function(data, type, row, meta){
                        if (type == 'display') {
                            if (row.message_type == 1) {
                                return "Transactional";
                            } else if (row.message_type == 2) {
                                return "Promotional";
                            } else {
                                return "NA";
                            }
                        } else {
                            return row.message_type;
                        }
                    }
                }, 
                {
                    data: "language",
                    render: function(data, type, row, meta){
                        if (type == 'display') {
                            if (row.language == 0) {
                                return "English";
                            } else if (row.language == 1) {
                                return "Unicode";
                            } else {
                                return "NA";
                            }
                        } else {
                            return row.language;
                        }
                    }
                },
                { data: "sample_content",
                    render: function(data, type, row, meta){
                    return ((row.sample_content)  ? row.sample_content :  "NA")
                }
                },       
                { data: "char_length",
                    render: function(data, type, row, meta){
                    return ((row.char_length)  ? row.char_length :  "0")
                }
                },
                { data: "sms_units",
                    render: function(data, type, row, meta){
                    return ((row.sms_units)  ? row.sms_units :  "0")
                }
                },
                { data: "measage_id",
                    render: function(data, type, row, meta){
                    return ((row.measage_id)  ? row.measage_id :  "NA")
                }
                },
                { data: "sent_date",
                    render: function(data, type, row, meta){
                    return ((row.sent_date)  ? row.sent_date :  "NA")
                }
                },
                { data: "sent_time",
                    render: function(data, type, row, meta){
                    return ((row.sent_time)  ? row.sent_time :  "NA")
                }
                },
                { data: "delivery_date",
                    render: function(data, type, row, meta){
                    return ((row.delivery_date)  ? row.delivery_date :  "NA")
                }
                },
                { data: "delivery_timestamp",
                    render: function(data, type, row, meta){
                    return ((row.delivery_timestamp)  ? row.delivery_timestamp :  "NA")
                }
                },
                { 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: "whistle_action",
                    render: function(data, type, row, meta){
                    return ((row.whistle_action)  ? row.whistle_action :  "NA")
                }
                },
                { data: "CPUC",
                    render: function(data, type, row, meta){
                    return ((row.CPUC)  ? row.CPUC :  "NA")
                }
                },
                { data: "CPA",
                    render: function(data, type, row, meta){
                    return ((row.CPA)  ? row.CPA :  "NA")
                }
                },
                { data: "cps",
                    render: function(data, type, row, meta){
                    return ((row.cps)  ? row.cps :  "NA")
                }
                },
                { data: "spends",
                    render: function(data, type, row, meta){
                    return ((row.spends)  ? row.spends :  "NA")
                }
                },
                { data: "error_code",
                    render: function(data, type, row, meta){
                    return ((row.error_code)  ? row.error_code :  "NA")
                }
                },
                { data: "error_status",
                    render: function(data, type, row, meta){
                    return ((row.error_status)  ? row.error_status :  "NA")
                }
                },
                { data: "error_response",
                    render: function(data, type, row, meta){
                    return ((row.error_response)  ? row.error_response :  "NA")
                }
                },             
            ],
            fnRowCallback: function(nRow, aData) {
                return nRow;
            },
        });
    }

    $(document).on('click',".export-dashboard-excel",function(e) {
        e.preventDefault()
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var sender_id = $('#sender_id').val();
        var mobile_num = $('#mobile_num').val();
        var sms_temp_id = $('#sms_temp_id').val();
        var parent_id = $('#langOpt').val();
        var entity_id = $('#entity_id').val();
        var language = $('#language').val();
        var msg_type = $('#msg_type').val();
                   
        $.ajax({
            "url" : "{{ url('exportTransLogsdashboard') }}",
            "type": "POST",
            "data": {
                _token: "{{csrf_token()}}",
                fromdate    : start_date,
                todate      : end_date,
                sender_id   : sender_id,
                mobile_num  : mobile_num,
                sms_temp_id : sms_temp_id,
                parent_id   : parent_id,
                entity_id   : entity_id,
                language    : language,
                msg_type    : msg_type
                },
            "dataType": "json",
            success: function(response) {
                if(response){
                    toastr.success('Report will generate with in 15 to 20 mins and it will sent to Email ID');
                }else{
                    toastr.error('Something Went Wrong or File Is Already Being Created');
                }
            }
        });
                
    });
    
    $(document).on('click',"#submit",function(e) {
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();

        var sender_id = $('#sender_id').val();
        var mobile_num = $('#mobile_num').val();
        var sms_temp_id = $('#sms_temp_id').val();
        var parent_id = $('#langOpt').val();
        var entity_id = $('#entity_id').val();
        var language = $('#language').val();
        var msg_type = $('#msg_type').val();
            listtemplate(start_date,end_date,sender_id,mobile_num,sms_temp_id,parent_id,entity_id,language,msg_type);
        date_filter();
    });
</script>
@endsection