@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title') Whatsapp Dashboard @endsection
@php
    $today = date('Y-m-d');
    $limitdays = date('Y-m-d', strtotime('-31 days'));
@endphp
<style> 
    .form-inline .multiselect-container label.checkbox, .form-inline .multiselect-container label.radio{
        display: unset;
    }

    .dataTables_wrapper .dataTables_filter input {
        margin-right: 0px;
        margin-top: 0px;
    }
    #organisation_name_log{
        width:16vw;
    }
    #select_date{
        margin-left: 0%;
        margin-top: 2%;
    }
    #download_log{
        position: absolute;
        left: 85%;
        height: 1.9rem;
        width: 5vw;
        line-height: 0;
    }
    .excel-btn{
        margin-right: 20px;
    }
    </style>
<script>
let organisation_name_log = null;
$(document).ready(function(){

    $('#whatsappdashboard').DataTable({"scrollX": true, "bLengthChange": false  });
    $('#start_date,#end_date').datepicker('setDate', 'today');
    $('#start_date,#end_date').datepicker({  maxDate: new Date() });

    $(".export-dashboard-excel").click(function(){
        selecetedColumnArray = [];
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var parent_id = $('#langOpt').val();


        $("input:checkbox:checked").each(function(){
            if($(this).data('column-name')){
                selecetedColumnArray.push($(this).data('column-name'));
            }
        });
        $('#from_date_hidden').val(start_date);
        $('#to_date_hidden').val(end_date);
        $('#parent_id_hidden').val(parent_id);
        $('#export_selected_column').val(selecetedColumnArray);
        $(this).submit();
    });
    whatsappdashboarddata();
});
    
$(document).on('click', '#download_log', function() {
        $('#organisation_name_log').val('');
        let today = new Date().toISOString().split('T')[0];
        $('#log_from_date').val(today);
        $('#log_to_date').val(today);
        $("#logs_modal").modal("show");
});
$(document).on('change', '#log_from_date, #log_to_date', function() {
        let today = new Date().toISOString().split('T')[0];
        let selectedDate = $(this).val();
        if (selectedDate > today) {
            alert('Future dates restricted');
            $(this).val(today);
        }
});

</script>
<div class="modal fade" tabindex="-1" role="dialog" id="logs_modal" data-keyboard="false" data-backdrop="static">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><strong>Download Log Report </strong></h5>
                </div>
                    <div class="modal-body">
                        <div class="row mb-1">
                            <label class="col-sm-4 control-label"><b>Organisation Name : </b></label>
                            <div class="col-sm-5">
                                <select id="organisation_name_log">
                                    <option value=''>Select Account</option>
                                    @foreach($wa_act_accname as $data)
                                        <option value = '{{$data->id}}' >{{$data->account_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="row mb-1" id="select_date">
                            <div class="form-group col-md-5 row">
                                <label for="log_from_date"><b>From Date</b></label>
                                <input type="date" class="form-control" id="log_from_date" name="log_from_date" min="{{ $limitdays }}" value="{{ $today }}">
                            </div>

                            <div class="form-group col-md-5">
                                <label for="log_to_date"><b>To Date</b></label>
                                <input type="date" class="form-control" id="log_to_date" name="log_to_date" min="{{ $limitdays }}" value="{{ $today }}">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer footerwidth">
                        <a type="button" class="btn btn-secondary text-white close_icon" id="close" data-dismiss="modal">Close</a>
                        <button type="button" class="btn btn-primary" id="submit_downloadlog_report">Download</button>
                    </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="card">
        <div class="row ml-3  mt-4 mb-n6">
            <div class="form-group col-md-2">@include('whatsapp_menu')</div>
                @can('hasExcelPermission')
                <div class="col-md-10 mt-2">
                    <button type="submit" id="download_log"class="log-report btn border-radius-0 btn btn-dark"> Logs </button>
                    <form class="pull-right" method="post" action="{{ url('exportwhatsappdashboard') }}">
                    @csrf
                    <button type="submit" class="export-dashboard-excel btn  btn-sm excel-btn border-radius-0"><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"/>
                    <input type="hidden" name="exportSelectedColumn" id="export_selected_column"/>
                    </form>
                    @endcan
                </div>
        </div>
        <div class="card-body">               
            <form class="flex">
                <div class="form-group col-md-3"> 
                    <label for="start_date">Choose Account &nbsp; </label><br>
                    <select class="form-control" name="langOpt[]" multiple id="langOpt">
                        <optgroup label="ACTIVE">
                            @foreach ($accname as $value)
                            @if($value->status == 1)
                                <option value="{{$value->id}}">{{ $value->account_name }}-({{$value->id}})</option>
                            @endif
                            @endforeach
                        </optgroup>
                        <optgroup label="INACTIVE">
                            @foreach ($accname as $value)
                            @if($value->status == 0)
                                <option value="{{$value->id}}">{{ $value->account_name }}-({{$value->id}})</option>
                            @endif
                            @endforeach
                        </optgroup>
                    </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">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">
                </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">
                </div>

                <div class="dropdown column-toggle col-xs-1 col-md-1 col-sm-1 ml-n5">
                    <a class="dropdown-toggle column-toggle-dropdown  pull-right" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="fa fa-filter" aria-hidden="true"></i></a>
                    <div class="dropdown-menu toggle-column-dropdown-menu">
                        <ul class="dropdown-item toggle-column"> 
                            <li><label><input type="checkbox" id="checkAll"> Check All</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="1" data-column-name="launch_id" checked> Launch ID</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="2" data-column-name="account_id" checked> Account ID</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="3" data-column-name="brand_name" checked> Brand Name<label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="4" data-column-name="category" checked> Category</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="5" data-column-name="account_category" checked> Account Category</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="6" data-column-name="client" checked> Client</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="7" data-column-name="username" checked> Username</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="8" data-column-name="email" checked> Email</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="9" data-column-name="role"> Role</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="10" data-column-name="user_id"> User ID</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="11" data-column-name="created_on"> Created On</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="12" data-column-name="account_manager"> Account Manager</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="13" data-column-name="relation_manager"> Relationship Manager</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="14" data-column-name="account_type" checked> Account Type</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="15" data-column-name="boarding_status"> Boarding Status</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="16" data-column-name="type_of_sales"> Type of Sales</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="17" data-column-name="state"> State</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="18" data-column-name="city"> City</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="19" data-column-name="campaign_group" checked> Campaign Group</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="20" data-column-name="campaign_sub_group" checked> Campaign Sub Group</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="21" data-column-name="campaign_data" checked> Campaign Data</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="22" data-column-name="campaign_url" checked> Campaign URL</label></li>
                            {{-- <li><label><input type="checkbox" class="toggle-vis" data-column="23" data-column-name="campaign_type"> Campaign Type</label></li> --}}
                            <li><label><input type="checkbox" class="toggle-vis" data-column="24" data-column-name="gateway_name" checked> Gateway Name</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="25" data-column-name="account_name" checked> Account Name</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="26" data-column-name="language" checked> Language</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="27" data-column-name="campaign_date_and_time" checked> Campaign Date & Time</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="28" data-column-name="launched_status" checked> Launched Status</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="29" data-column-name="whatsapp_message_pushed" checked> Message Pushed</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="30" data-column-name="whatsapp_message_submitted" checked> Message Submitted</label></li>
                            <li class="d-none" ><label><input type="checkbox" class="d-none" data-column="31" data-column-name="total_message_units"> Total Message Units</label></li>

                            <li><label><input type="checkbox" class="toggle-vis" data-column="32" data-column-name="invalid_count" checked> Invalid Count</label></li>
                            <li class="d-none" ><label><input type="checkbox" class="d-none" data-column="33" data-column-name="dnd_ndnd_count"> Dnd ndnd Count</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="34" data-column-name="exclude_count" checked> Exclude Count</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="35" data-column-name="blacklist_count" checked> Blacklist Count</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="36" data-column-name="duplicate_numbers_count" checked> Duplicate Numbers Count</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="37" data-column-name="exclude_no_activity_numbers" checked> Exclude No Activity Numbers</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="38" data-column-name="exclude_operator_count" checked> Exclude Operator Count</label></li>

                            <li><label><input type="checkbox" class="toggle-vis" data-column="43" data-column-name="clicks" checked> Clicks</label></li>

                            <li><label><input type="checkbox" class="toggle-vis" data-column="41" data-column-name="delivery_count" checked> Delivery Count</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="40" data-column-name="failed_count" checked> Failed Count</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="42" data-column-name="read_count" checked> Read Count</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="39" data-column-name="sent_count" checked> Send Count</label></li>

                            <li><label><input type="checkbox" class="toggle-vis" data-column="44" data-column-name="unique_clicks" checked> Unique Clicks</label></li>
                            <li class="d-none" ><label><input type="checkbox" class="d-none" data-column="45" data-column-name="bot_clicks"> Bot Clicks</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="46" data-column-name="whistle_actions" checked> Whistle Actions</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="47" data-column-name="total_spends" checked> Total Spends</label></li>

                            <li><label><input type="checkbox" class="toggle-vis" data-column="48" data-column-name="master_CPS1"> Master CPM</label></li>
                            <li class="d-none" ><label><input  class="d-none" data-column="49" data-column-name="master_CPS2"> Master CPS2</label></li>
                            <li class="d-none" ><label><input  class="d-none" data-column="50" data-column-name="master_CPS3"> Master CPS3</label></li>

                            <li><label><input type="checkbox" class="toggle-vis" data-column="51" data-column-name="manager_CPS1"> Manager CPM</label></li>
                            <li class="d-none" ><label><input  class="d-none" data-column="52" data-column-name="manager_CPS2"> Manager CPS2</label></li>
                            <li class="d-none" ><label><input  class="d-none" data-column="53" data-column-name="manager_CPS3"> Manager CPS3</label></li>

                            <li><label><input type="checkbox" class="toggle-vis" data-column="54" data-column-name="user_CPS1"> User CPM</label></li>
                            <li class="d-none" ><label><input type="checkbox" class="d-none" data-column="55" data-column-name="user_CPS2"></label></li>
                            <li class="d-none" ><label><input type="checkbox" class="d-none" data-column="56" data-column-name="user_CPS3"></label></li>

                            {{-- <li><label><input type="checkbox" class="toggle-vis" data-column="57" data-column-name="content_volume_1"> Content Volume 1</label></li> --}}
                            {{-- <li><label><input type="checkbox" class="toggle-vis" data-column="58" data-column-name="content_volume_2" checked> Content Volume 2</label></li> --}}
                            {{-- <li><label><input type="checkbox" class="toggle-vis" data-column="59" data-column-name="content_volume_3" checked> Content Volume 3</label></li> --}}

                            <li><label><input type="checkbox" class="toggle-vis" data-column="60" data-column-name="content_1_SMS_units"> Content Whatsapp Units</label></li>
                            {{-- <li><label><input type="checkbox" class="toggle-vis" data-column="61" data-column-name="content_2_SMS_units" checked> Content 2 SMS Units</label></li> --}}
                            {{-- <li><label><input type="checkbox" class="toggle-vis" data-column="62" data-column-name="content_3_SMS_units" checked> Content 3 SMS Units</label></li> --}}

                            <li><label><input type="checkbox" class="toggle-vis" data-column="63" data-column-name="CTRP" checked> CTR %</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="64" data-column-name="UCTR" checked> UCTR %</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="65" data-column-name="lead_ratio" checked> Lead Ratio</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="66" data-column-name="CPC" checked> CPC</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="67" data-column-name="CPUC" checked> CPUC</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="68" data-column-name="CPL" checked> CPL</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="69" data-column-name="CPM" checked> CPM</label></li>
                            {{-- <li><label><input type="checkbox" class="toggle-vis" data-column="70" data-column-name="bot_clicks_ratio"> Bot Click Ratio %</label></li> --}}
                            <li><label><input type="checkbox" class="toggle-vis" data-column="71" data-column-name="CTA" checked> CTA %</label></li>
                            <li><label><input type="checkbox" class="toggle-vis" data-column="72" data-column-name="UCTA" checked> UCTA %</label></li>

                        </ul>
                    </div>
                </div>
            </form>
            <div class="table-responsive">
                <table class="table-bordered table-hover " id="whatsappdashboard">
                    <thead>
                        <tr>
                        <th>Sr. No</th>
                        <th>Launch ID</th>
                        <th>Account ID</th>
                        <th>Brand Name</th>
                        <th>Category</th>
                        <th>Account Category</th>
                        <th>Client</th>
                        <th>User Name</th>
                        <th>Email</th>
                        <th>Role</th>
                        <th>User ID</th>
                        <th>Account Created On </th>
                        <th>Account Manager</th>
                        <th>Relationship Manager</th>
                        <th>Account Type</th>
                        <th>Boarding Status</th>
                        <th>Type of Sales</th>
                        <th>State</th>
                        <th>City</th>
                        <th>Campaign Group</th>
                        <th>Campaign Sub Group</th>
                        <th>Campaign Data</th>
                        <th>Campaign URL</th>
                        <th>Campaign Type</th>
                        <th>Gateway Name</th>
                        <th>Account Name</th>
                        <th>Language</th>
                        <th>Campaign Date & Time</th>
                        <th>Launched Status</th>

                        <th>Messages Pushed</th>
                        <th>Messages Submitted</th>
                        <th>Total Message Units</th>

                        <th>Invalid Numbers</th>
                        <th>DND Numbers</th>
                        <th>Already Used Numbers</th>
                        <th>Blacklisted Numbers</th>
                        <th>Duplicate Numbers</th>
                        <th>Exclude No Activity Numbers</th>
                        <th>Exclude Operator Numbers</th>


                        <th>Sent Count</th>
                        <th>Failed Count</th>
                        <th>Delivered Count</th>
                        <th>Read Count</th>

                        <th>Clicks</th>


                        <th>Unique Clicks</th>
                        <th>Bot Clicks</th>
                        <th>Whistle Actions</th>
                        <th>Total Spends</th>

                        <th>Master CPM</th>
                        <th>Master CPM2</th>
                        <th>Master CPM3</th>

                        <th>Manager CPM</th>
                        <th>Manager CPM2</th>
                        <th>Manager CPM3</th>

                        <th>User CPM</th>
                        <th>User CPM2</th>
                        <th>User CPM3</th>

                        <th>Content Volume </th>
                        <th>Content Volume 2</th>
                        <th>Content Volume 3</th>

                        <th>Content Whatsapp Units</th>
                        <th>Content 2 SMS Units </th>
                        <th>Content 3 SMS Units</th>

                        <th>CTR % <span data-toggle="tooltip" title="(Total Clicks / SMS Submitted) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>UCTR % <span data-toggle="tooltip" title="(Unique Clicks / SMS Submitted) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>Lead Ratio <span data-toggle="tooltip" title="(Whistle Actions/ SMS Submitted) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>CPC <span data-toggle="tooltip" title="Spends / Clicks"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>CPUC  <span data-toggle="tooltip" title="Spends/ Unique Clicks"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>CPL <span data-toggle="tooltip" title="Spends / Whistle Actions"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>CPM <span data-toggle="tooltip" title="Total Spends / SMS Submitted"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>Bot Click Ratio % <span data-toggle="tooltip" title=" (Bot Clicks * 100)/(Bot Clicks + Clicks)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>

                        <th>CTA % <span data-toggle="tooltip" title=" (Whistle Actions / Clicks) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        <th>UCTA % <span data-toggle="tooltip" title=" (Whistle Actions / Unique Clicks) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                        @if(Gate::allows('hasLogsPermission'))
                            <th>Logs</th>
                        @endif
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <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>
                            <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>
                            <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>
                            <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>
                            @if(Gate::allows('hasLogsPermission'))
                                <th>NA</th>
                            @endif
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="logModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content logmodelcontent">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body logmodalbody">
            <p id="logdata"></p>
            </div>
            <div class="modal-footer logmodalfooter">
            </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
    });

    var start_date = end_date = '';

        $("#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);
            whatsappdashboarddata();
            disableColumns();
            permanentlyDeleteColumns();
            $('#period_filter').val('');
            // $('#checkAll').prop('checked',true);
            // $('.toggle-vis').prop('checked',true);
        }
    });

    $("#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 (endDate < startDate) {
                var minDate = $('#end_date').datepicker('option', 'minDate', startDate);
                $('#end_date').datepicker('setDate', minDate);
            }
            whatsappdashboarddata();
            disableColumns();
            permanentlyDeleteColumns();
            // $('#checkAll').prop('checked',true);
            // $('.toggle-vis').prop('checked',true);
        },
        onSelect: function() {
            $('#period_filter').val('');
        }
    });

    $('#langOpt').change(function(){
        var parent_id = $(this).val();
        whatsappdashboarddata();
        disableColumns();
        permanentlyDeleteColumns();
    });

    
    $("body").on("change", "#period_filter", function(){
            var periodValue = $(this).val();

            //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);
                whatsappdashboarddata();
                disableColumns();
                permanentlyDeleteColumns();

                // $('#checkAll').prop('checked',false);
                // $('.toggle-vis').prop('checked',true);
            }

            //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);
                whatsappdashboarddata();
                disableColumns();
                permanentlyDeleteColumns();

                // $('#checkAll').prop('checked',true);
                // $('.toggle-vis').prop('checked',true);
            }

            //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);
                whatsappdashboarddata();
                disableColumns();
                permanentlyDeleteColumns();

                // $('#checkAll').prop('checked',true);
                // $('.toggle-vis').prop('checked',true);
            }

            //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);
                whatsappdashboarddata();
                disableColumns();
                permanentlyDeleteColumns();

                // $('#checkAll').prop('checked',true);
                // $('.toggle-vis').prop('checked',true);
            }

            //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);
                whatsappdashboarddata();
                disableColumns();
                permanentlyDeleteColumns();

                // $('#checkAll').prop('checked',true);
                // $('.toggle-vis').prop('checked',true);
            }

            //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);
                whatsappdashboarddata();
                disableColumns();
                permanentlyDeleteColumns();
                // $('#checkAll').prop('checked',true);
                // $('.toggle-vis').prop('checked',true);
            }

            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);
                whatsappdashboarddata();
                disableColumns();
                permanentlyDeleteColumns();
                // $('#checkAll').prop('checked',true);
                // $('.toggle-vis').prop('checked',true);
            }
        });


    function whatsappdashboarddata(){
        disableColumns();
        permanentlyDeleteColumns();
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        var parent_id = $('#langOpt').val();
        $("#whatsappdashboard").DataTable().clear().destroy();
        $('#whatsappdashboard').DataTable({
            "autoWidth": false,
            "processing": true,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "scrollX": true,
            "scrollCollapse": true,
            "scrollY":  400,
            "lengthChange": false,
            "pageLength":20,
            "bLengthChange": true,
            "ordering": true,
            "language": {
                search: '',
                searchPlaceholder: "Search..."
            },
            "order": [
                [0, "desc"]
            ],
            "ajax": {
                type: "POST",
                url: 'getWhatsappDashboard',
                "data": {
                    "_token": "{{ csrf_token() }}",
                    "start_date": start_date,
                    "end_date": end_date,
                    "parent_id": parent_id,
                },
            },
            "columnDefs": [{
                orderable: false,
                targets: 0
            }],
            "columns": [
                {
                    data: 'launch_id',
                    render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                {
                    data: 'launch_id',
                    render: function(data, type, row, meta) {
                        return row.launch_id;
                    }
                },
                {
                    data: 'account_id',
                    render: function(data, type, row, meta) {
                        return row.account_id;
                    }
                },
                {
                    data: 'brand_name',
                    render: function(data, type, row, meta) {
                        url = 'campaigndetails/' + row.account_id + '/' + row.campaign_id + '/' + row.from_date + '/' + row.to_date;
                        if (type === 'display') {
                            data = '<a href="' + url + '"  target="_blank">' + (row.brand_name ? row.brand_name : 'NA') + '</a>';
                        }
                        return data;
                    }
                },
                {
                    data: 'industry',
                    render: function(data, type, row, meta) {
                        return row.industry;
                    }
                },
                {
                    data: 'account_category',
                    render: function(data, type, row, meta) {
                        return row.account_category;
                    }
                },
                {
                    data: 'client',
                    render: function(data, type, row, meta) {
                        return row.client;
                    }
                },
                {
                    data: 'username',
                    render: function(data, type, row, meta) {
                        return row.username ? row.username.split(',')[0] : 'NA';
                    }
                },
                {
                    data: 'email',
                    render: function(data, type, row, meta) {
                        return row.username ? row.username.split(',')[1] : 'NA';
                    }
                },
                {
                    data: 'role',
                    render: function(data, type, row, meta) {
                        return row.username ? row.username.split(',')[2] : 'NA';
                    }
                },
                {
                    data: 'user_id',
                    render: function(data, type, row, meta) {
                        return row.user_id;
                    }
                },
                {
                    data: 'created_on',
                    render: function(data, type, row, meta) {
                        return row.created_on;
                    }
                },
                {
                    data: 'account_manager',
                    render: function(data, type, row, meta) {
                        return (row.account_manager ? row.account_manager : 'Not Assigned')
                    }
                },
                {
                    data: 'relation_manager',
                    render: function(data, type, row, meta) {
                        return (row.relation_manager ? row.relation_manager : 'Not Assigned')
                    }
                },
                {
                    data: 'account_type',
                    render: function(data, type, row, meta) {
                        return (row.account_type ? row.account_type : 'NA')
                    }
                },
                {
                    data: 'boarding_status',
                    render: function(data, type, row, meta) {
                        return (row.boarding_status ? row.boarding_status : 'NA')
                    }
                },
                {
                    data: 'sales_type',
                    render: function(data, type, row, meta) {
                        return (row.sales_type ? row.sales_type : 'NA')
                    }
                },
                {
                    data: 'state',
                    render: function(data, type, row, meta) {
                        return (row.state ? row.state : 'NA')
                    }
                },
                {
                    data: 'city',
                    render: function(data, type, row, meta) {
                        return (row.city ? row.city : 'NA')
                    }
                },
                {
                    data: 'group_name',
                    render: function(data, type, row, meta) {
                        return (row.group_name ? row.group_name : 'NA')
                    }
                },
                {
                    data: 'sub_group_name',
                    render: function(data, type, row, meta) {
                        return (row.sub_group_name ? row.sub_group_name : 'NA')
                    }
                },
                {
                    data: 'campaign_data',
                    render: function(data, type, row, meta) {
                        return (row.campaign_data ? row.campaign_data : 'NA')
                    }
                },
                {
                    data: 'campaign_url',
                    render: function(data, type, row, meta) {
                        return (row.campaign_url ? row.campaign_url : 'NA')
                    }
                },
                {
                    data: 'campaign_through',
                    render: function(data, type, row, meta) {
                        return (row.campaign_through ? row.campaign_through : 'NA')
                    }
                },
                {
                    data: 'gateway',
                    render: function(data, type, row, meta) {
                        return (row.gateway ? row.gateway : 'NA')
                    }
                },
                {
                    data: 'sender_name',
                    render: function(data, type, row, meta) {
                        return (row.sender_name ? row.sender_name : 'NA')
                    }
                },
                {
                    data: 'message_type',
                    render: function(data, type, row, meta) {
                        return (row.message_type ? row.message_type : 'NA')
                    }
                },
                {
                    data: 'datetime',
                    render: function(data, type, row, meta) {
                        return (row.datetime ? row.datetime : 'NA')
                    }
                },
                {
                    data: 'scheduled_status',
                    render: function(data, type, row, meta) {
                        if (data == 'Success') {
                            return ("<p style='color:#28a745'>"+data+"</p>");
                        } 
                        else if(data=='In-Process'){
                            return ("<p style='color:#ff8e01'>"+data+"</p>");
                        }
                        else{
                            return ("<p style='color:#b21111'>"+data+"</p>");
                        }
                    }
                },
                {
                    data: 'pushed_volume',
                    render: function(data, type, row, meta) {
                        return (row.pushed_volume ? row.pushed_volume : '0')
                    }
                },
                {
                    data: 'volume_count',
                    render: function(data, type, row, meta) {
                        return (row.volume_count ? row.volume_count : '0')
                    }
                },
                {
                    data: 'total_message_units',
                    render: function(data, type, row, meta) {
                        return (row.total_message_units ? row.total_message_units : '0')
                    }
                },
                {
                    data: 'invalid_count',
                    render: function(data, type, row, meta) {
                        return (row.invalid_count ? row.invalid_count : '0')
                    }
                },
                {
                    data: 'dnd_ndnd_count',
                    render: function(data, type, row, meta) {
                        return (row.dnd_ndnd_count ? row.dnd_ndnd_count : '0')
                    }
                },
                {
                    data: 'exclude_count',
                    render: function(data, type, row, meta) {
                        return (row.exclude_count ? row.exclude_count : '0')
                    }
                },
                {
                    data: 'blacklist_count',
                    render: function(data, type, row, meta) {
                        return (row.blacklist_count ? row.blacklist_count : '0')
                    }
                },
                {
                    data: 'duplicate_numbers_count',
                    render: function(data, type, row, meta) {
                        return (row.duplicate_numbers_count ? row.duplicate_numbers_count : '0')
                    }
                },
                {
                    data: 'exclude_no_activity_numbers',
                    render: function(data, type, row, meta) {
                        return (row.exclude_no_activity_numbers ? row.exclude_no_activity_numbers : '0')
                    }
                },
                {
                    data: 'exclude_operator_count',
                    render: function(data, type, row, meta) {
                        return (row.exclude_operator_count ? row.exclude_operator_count : '0')
                    }
                },
                {
                    data:'sent_count',
                    render:function(data,type,row,meta){
                        return (row.sent_count ? row.sent_count : '0')
                    }
                },
                {
                    data:'failed_count',
                    render:function(data,type,row,meta){
                        return (row.failed_count ? row.failed_count : '0')
                    }
                },
                {
                    data:'delivery_count',
                    render:function(data,type,row,meta){
                        return (row.delivery_count ? row.delivery_count : '0')
                    }
                },
                {
                    data:'read_count',
                    render:function(data,type,row,meta){
                        return (row.read_count ? row.read_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: 'bot_clicks',
                    render: function(data, type, row, meta) {
                        return (row.bot_clicks ? row.bot_clicks : '0')
                    }
                },
                {
                    data: 'whistle_actions',
                    render: function(data, type, row, meta) {
                        return (row.whistle_actions ? row.whistle_actions : '0')
                    }
                },
                {
                    data: 'total_spends',
                    render: function(data, type, row, meta) {
                        return (row.total_spends ? row.total_spends : '0')
                    }
                },
                {
                    data: 'master_cps',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let master_cps1 = (role == 'MASTER' || role == 'VLADMIN') ? (row.master_cps ? row.master_cps: '0.00') : '0.00';
                        return master_cps1
                    }
                },
                {
                    data: 'master_cps2',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let master_cps2 = (role == 'MASTER' || role == 'VLADMIN') ? (row.master_cps2 ? row.master_cps2: '0.00') : '0.00';
                        return master_cps2
                    }
                },
                {
                    data: 'master_cps3',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let master_cps3 = (role == 'MASTER' || role == 'VLADMIN') ? (row.master_cps3 ? row.master_cps3: '0.00') : '0.00';
                        return master_cps3
                    }
                },
                {
                    data: 'manager_cps',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let manager_cps1 = (role == 'MANAGER') ? (row.manager_cps ? row.manager_cps: '0.00') : '0.00';
                        return manager_cps1
                    }
                },
                {
                    data: 'manager_cps2',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let manager_cps2 = (role == 'MANAGER') ? (row.manager_cps2 ? row.manager_cps2: '0.00') : '0.00';
                        return manager_cps2
                    }
                },
                {
                    data: 'manager_cps3',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let manager_cps3 = (role == 'MANAGER') ? (row.manager_cps3 ? row.manager_cps3: '0.00') : '0.00';
                        return manager_cps3
                    }
                },
                {
                    data: 'cps',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let user_cps1 = (role == 'USER') ? (row.cps ? row.cps: '0.00') : '0.00';
                        return user_cps1
                    }
                },
                {
                    data: 'cps2',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let user_cps2 = (role == 'USER') ? (row.cps2 ? row.cps2: '0.00') : '0.00';
                        return user_cps2
                    }
                },
                {
                    data: 'cps3',
                    render: function(data, type, row, meta) {
                        let role = row.username ? row.username.split(',')[2] : '';
                        let user_cps3 = (role == 'USER') ? (row.cps3 ? row.cps3: '0.00') : '0.00';
                        return user_cps3
                    }
                },
                {
                    data: 'content1_volume',
                    render: function(data, type, row, meta) {
                        return (row.content1_volume ? row.content1_volume : '0.00')
                    }
                },
                {
                    data: 'content2_volume',
                    render: function(data, type, row, meta) {
                        return (row.content2_volume ? row.content2_volume : '0.00')
                    }
                },
                {
                    data: 'content3_volume',
                    render: function(data, type, row, meta) {
                        return (row.content3_volume ? row.content3_volume : '0.00')
                    }
                },
                {
                    data: 'sms1_unit',
                    render: function(data, type, row, meta) {
                        return (row.sms1_unit ? row.sms1_unit : '0.00')
                    }
                },
                {
                    data: 'sms2_unit',
                    render: function(data, type, row, meta) {
                        return (row.sms2_unit ? row.sms2_unit : '0.00')
                    }
                },
                {
                    data: 'sms3_unit',
                    render: function(data, type, row, meta) {
                        return (row.sms3_unit ? row.sms3_unit : '0.00')
                    }
                },
                {
                    data: 'CTRP',
                    render: function(data, type, row, meta) {
                        return (row.CTRP ? row.CTRP + ' %' : '0.00')
                    }
                },
                {
                    data: 'UCTR',
                    render: function(data, type, row, meta) {
                        return (row.UCTR ? row.UCTR + ' %' : '0.00')
                    }
                },
                {
                    data: 'lead_ratio',
                    render: function(data, type, row, meta) {
                        return (row.lead_ratio ? row.lead_ratio : '0.00')
                    }
                },
                {
                    data: 'CPC',
                    render: function(data, type, row, meta) {
                        return (row.CPC ? row.CPC : '0.00')
                    }
                },
                {
                    data: 'CPUC',
                    render: function(data, type, row, meta) {
                        return (row.CPUC ? row.CPUC : '0.00')
                    }
                },
                {
                    data: 'CPL',
                    render: function(data, type, row, meta) {
                        return (row.CPL ? row.CPL : '0.00')
                    }
                },
                {
                    data: 'CPM',
                    render: function(data, type, row, meta) {
                        return (row.CPM ? row.CPM : '0.00')
                    }
                },
                {
                    data: 'bot_clicks_ratio',
                    render: function(data, type, row, meta) {
                        return (row.bot_clicks_ratio ? row.bot_clicks_ratio : '0.00')
                    }
                },
                {
                    data: 'CTA',
                    render: function(data, type, row, meta) {
                        return (row.CTA ? row.CTA : '0.00')
                    }
                },
                {
                    data: 'UCTA',
                    render: function(data, type, row, meta) {
                        return (row.UCTA ? row.UCTA : '0.00')
                    }
                },
                @if(Gate::allows('hasLogsPermission'))
                {
                    data: 'logfile_name',
                    render: function(data, type, row, meta) {

                        //  If log File is there then only give user the option to Download
                        if(row.logfile_name){
                            data = `
                                <button class='log-modal viewlogbutton' data-toggle='modal' data-info='${row.logfile_name}'><span class='glyphicon glyphicon-edit'></span>View log</button>
                                <button class='log-modal-download' data-info='${row.logfile_name}'><i class='fa fa-download' aria-hidden='true'></i></button>`;
                                return data;
                        }
                        // If File is not there, Display a blank Disabled Button
                        else{
                            data = `<button disabled>
                                <span class='glyphicon glyphicon-edit'></span>View log</button>`;
                        }

                        return data;
                    }
                }
                @endif
            ],
            fnRowCallback: function(nRow, aData) {
                return nRow;
            },
            footerCallback: function(footerrow, data, start, end, display) {
                var row = this.api();
                var api = this.api().ajax.json().footer_total;
                const numberFormatter = Intl.NumberFormat('en-IN');
                $(row.column(29).footer()).html(api['whatsapp_message_pushed']               ? numberFormatter.format(Number(api['whatsapp_message_pushed']).toFixed(2)) : 0);
                $(row.column(30).footer()).html(api['whatsapp_message_submitted']                ? numberFormatter.format(Number(api['whatsapp_message_submitted']).toFixed(2)) : 0);
                // $(row.column(31).footer()).html(api['total_message_units']             ? numberFormatter.format(Number(api['total_message_units']).toFixed(2)) : 0);
                $(row.column(32).footer()).html(api['invalid_count']               ? numberFormatter.format(Number(api['invalid_count']).toFixed(2)) : 0);
                // $(row.column(33).footer()).html(api['dnd_ndnd_count']              ? numberFormatter.format(Number(api['dnd_ndnd_count']).toFixed(2)) : 0);
                $(row.column(34).footer()).html(api['exclude_count']               ? numberFormatter.format(Number(api['exclude_count']).toFixed(2)) : 0);
                $(row.column(35).footer()).html(api['blacklist_count']             ? numberFormatter.format(Number(api['blacklist_count']).toFixed(2)) : 0);
                $(row.column(36).footer()).html(api['duplicate_numbers_count']     ? numberFormatter.format(Number(api['duplicate_numbers_count']).toFixed(2)) : 0);
                $(row.column(37).footer()).html(api['exclude_no_activity_numbers'] ? numberFormatter.format(Number(api['exclude_no_activity_numbers']).toFixed(2)) : 0);
                $(row.column(38).footer()).html(api['exclude_operator_count']      ? numberFormatter.format(Number(api['exclude_operator_count']).toFixed(2)) : 0);
                $(row.column(43).footer()).html(api['sent_count']                      ? numberFormatter.format(Number(api['clicks']).toFixed(2)) : 0);
                $(row.column(41).footer()).html(api['failed_count']              ? numberFormatter.format(Number(api['delivery_count']).toFixed(2)) : 0);
                $(row.column(40).footer()).html(api['delivery_count']                ? numberFormatter.format(Number(api['failed_count']).toFixed(2)) : 0);
                $(row.column(42).footer()).html(api['read_count']                  ? numberFormatter.format(Number(api['read_count']).toFixed(2)) : 0);
                $(row.column(39).footer()).html(api['clicks']                  ? numberFormatter.format(Number(api['sent_count']).toFixed(2)) : 0);
                $(row.column(44).footer()).html(api['unique_clicks']               ? numberFormatter.format(Number(api['unique_clicks']).toFixed(2)) : 0);
                // $(row.column(45).footer()).html(api['bot_clicks']                  ? numberFormatter.format(Number(api['bot_clicks']).toFixed(2)) : 0);
                $(row.column(46).footer()).html(api['whistle_actions']             ? numberFormatter.format(Number(api['whistle_actions']).toFixed(2)) : 0);
                $(row.column(47).footer()).html(api['total_spends']                ? numberFormatter.format(Number(api['total_spends']).toFixed(2)) : 0);
                $(row.column(57).footer()).html(api['content1_volume']             ? numberFormatter.format(Number(api['content1_volume']).toFixed(2)) : 0);
                // $(row.column(58).footer()).html(api['content2_volume']             ? numberFormatter.format(Number(api['content2_volume']).toFixed(2)) : 0);
                // $(row.column(59).footer()).html(api['content3_volume']             ? numberFormatter.format(Number(api['content3_volume']).toFixed(2)) : 0);
                $(row.column(60).footer()).html(api['sms1_unit']                   ? numberFormatter.format(Number(api['sms1_unit']).toFixed(2)) : 0);
                // $(row.column(61).footer()).html(api['sms2_unit']                   ? numberFormatter.format(Number(api['sms2_unit']).toFixed(2)) : 0);
                // $(row.column(62).footer()).html(api['sms3_unit']                   ? numberFormatter.format(Number(api['sms3_unit']).toFixed(2)) : 0);
                $(row.column(63).footer()).html(api['CTRP']                        ? Number(api['CTRP']).toFixed(2) : 0.00);
                $(row.column(64).footer()).html(api['UCTR']                        ? Number(api['UCTR']).toFixed(2) : 0.00);
                $(row.column(66).footer()).html(api['lead_ratio']                  ? Number(api['lead_ratio']).toFixed(2) : 0.00);
                $(row.column(66).footer()).html(api['CPC']                         ? Number(api['CPC']).toFixed(2) : 0.00);
                $(row.column(67).footer()).html(api['CPUC']                        ? Number(api['CPUC']).toFixed(2) : 0.00);
                $(row.column(68).footer()).html(api['CPL']                         ? Number(api['CPL']).toFixed(2) : 0.00);
                $(row.column(69).footer()).html(api['CPM']                         ? Number(api['CPM']).toFixed(2) : 0.00);
                // $(row.column(70).footer()).html(api['bot_clicks_ratio']            ? Number(api['bot_clicks_ratio']).toFixed(2) : 0.00);
                $(row.column(71).footer()).html(api['CTA']                         ? Number(api['CTA']).toFixed(2) : 0.00);
                $(row.column(72).footer()).html(api['UCTA']                        ? Number(api['UCTA']).toFixed(2) : 0.00);
            },
        });
    }

    $('.toggle-vis').on('click', function (e) {
        if ($('.toggle-vis:checked').length == $('.toggle-vis').length){
             $('#checkAll').prop('checked',true);
        }
        else {
            $('#checkAll').prop('checked',false);
        }
        // Get the column API object
        var column =  $("#whatsappdashboard").DataTable().column($(this).attr('data-column'));
        // Toggle the visibility
        column.visible(!column.visible());
        permanentlyDeleteColumns();
    });

    $("#checkAll").click(function () {
     $('.toggle-vis').prop('checked', this.checked);
     $(".dataTables_processing").css("display","block");
     setTimeout(() => {
     $(".dataTables_processing").css("display","none");
     }, 1000);
     for ( var i=1 ; i<=$('.toggle-vis').length+16; i++ ) {
        if($(this).is(':checked')){
            console.log($("#whatsappdashboard").DataTable().column( i )+" "+new Date().getTime());
         $("#whatsappdashboard").DataTable().column( i ).visible(  true );
        }else{
         $("#whatsappdashboard").DataTable().column( i ).visible(  false );

        }
    }
    permanentlyDeleteColumns();
 });
 $("document").ready(function() {    
    disableColumns();
    permanentlyDeleteColumns();
     $('.dropdown-item').on('click', function(e) {
    if($(this).hasClass('toggle-column')) {
        e.stopPropagation();
    }
});
});

$(document).on('click', '.log-modal', function() {
        var logfile_name = $(this).data('info');
        $('.loading').css('display','block');
        $.ajax({
            type: 'post',
            url: 'logfile',
            data: {
                "_token": "{{ csrf_token() }}",
                "logfile": logfile_name
            },
            success: function(data) {
                $('.loading').css('display','none');
                $('#logModal').modal('show');
                $('#logdata').text(data);
            },
            error: function(xhr, status, error) {
            $('.loading').css('display','none');
            alert('log file not found.');
            }
        });
    });

    $('#close').on('click',function(){
        $('#organisation_name_log').val('');
        $('#log_from_date').val('');
        $('#log_to_date').val('');
        $("#logs_modal").modal("hide");
    })

    $(document).on('click', '.log-modal-download', function() {
        var logfile_name = $(this).data('info');
        $('.loading').css('display','block');
        $.ajax({
            type: 'post',
            url: 'logfile',
            data: {
                "_token": "{{ csrf_token() }}",
                "logfile": logfile_name
            },
        success: function(data) {
            $('.loading').css('display','none');
                var blob = new Blob([data], { type: 'text/plain' });
                var downloadLink = document.createElement('a');
                downloadLink.href = window.URL.createObjectURL(blob);
                downloadLink.download = logfile_name + '.log';
                document.body.appendChild(downloadLink);
                downloadLink.click();
                document.body.removeChild(downloadLink);
            },
            error: function(xhr, status, error)
            {
                $('.loading').css('display','none');
                alert('log file not found.');
            }
        });
    });


// Disable the columns those cannot be seen
function disableColumns(){
    /*
        -Disable column array contains the list of column numbers that needs to be disabled
        - If any of these columns need to be enabled then remove that column number from the array
    */
    let disable_column_array = [23,58,59,61,62,9,10,11,12,13,15,16,17,18,48,51,52,53,54,55,56,57,60];

    
    disable_column_array.forEach((currCol)=>{
        $("#whatsappdashboard").DataTable().column( currCol ).visible(  false );
    });

    // make those checkbox as uncheck after changinf filters
    $('.toggle-vis').each(function(){
        var dataColumn = parseInt($(this).data('column'));
        if($.inArray(dataColumn, disable_column_array) !== -1){
            $(this).prop('checked', false); // Uncheck the checkbox
        }
    });
}

/*
    - These are the permanentely deleted columns
    - They cannot be accessable 
        => 23 [Campaign Type]
        => 58 [content2_volume]
        => 59 [content3_volume]
        => 61 [sms2_unit]
        => 62 [sms3_unit]
    - These columns if required then simply remove from this array

*/
function permanentlyDeleteColumns(){
    let columns = [23,58,59,61,62,33,45,31,49,50,52,53,55,56,70,57];
    columns.forEach((currCol)=>{
        $("#whatsappdashboard").DataTable().column( currCol ).visible(  false );
    });
}

$('#organisation_name_log').on('change',function(){
    $('#submit_downloadlog_report').prop('disabled', false);
})

/**
 * Log Report
 */
$('#submit_downloadlog_report').on('click',function(){
    let macc = $(`#organisation_name_log`).val();
    let fromdate = $(`#log_from_date`).val();
    let todate = $(`#log_to_date`).val();
    if(!macc || !fromdate || !todate){
        alert('Please fill all the details ');
        return;
    }
    if (todate < fromdate) {
        alert("To date cannot be earlier than From date");
        return; // Exit the function
    }

    $.ajax({
        type: "POST",
        url: "{{ url('/whatsapp_logreport_download') }}",

        data: {
            "_token" : "{{ csrf_token() }}",
            "macc" : macc,
            "fromdate":fromdate,
            "todate":todate

        },
        dataType:'json',
        success: function(data) {
            if(data.status==true){
                if(data.message){
                    toastr.success(data.message);
                }
                else toastr.success('Log Report Sent Successfully');

                $(`#organisation_name_log`).val('');
                $(`#log_from_date`).val('');
                $(`#log_to_date`).val('');
                $("#logs_modal").modal("hide");
            }else{
                if(data.status==false && data.message=='Disabled'){
                    toastr.error('Log Report cannot be downloaded ');
                    $('#submit_downloadlog_report').prop('disabled', true);
                }
                else{
                    toastr.error(data.message);
                    $("#logs_modal").modal("hide");
                }
            }
        }
    });
});

</script>
@endsection