@extends('layouts.app')

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

@section('content')
@section('page_title')
    Whistle Feed Report
@endsection
<style>
    .dataTables_scroll {
        overflow: auto;
    }
    .filter-table-inline .form-group {
        flex-grow: 1;
        width: auto;
        max-width: 170px;
    }
    #report-main-table_filter{
        margin-top    :-30px;
        margin-bottom : 38px;
        margin-right  : 0px;
    }
    #pencil_id{
        width: 100%;
    }
    .mb-n5 {
    margin-bottom: -5rem !important;
    }
    .advSelectedOption{
        margin-top : 15px;
        min-width  : 25px;
    }
    input:read-only{
        cursor      : pointer;
        margin-top  : 13px;
        margin-left : -6px;
    }
    .checkBoxLabel{
        font-size : 15px;
    }
    .col-md-2 {
        max-width: 172px !important;
    }
    .marTop{
        margin-top: 10px;
    }
    .exportFeedReport{
        height: 29px;
    }
    .advFeedSReport{
        height       : 29px;
        float        : right;
        margin-right : 0px;
        margin-left  : 12px;
    }
    .max_width{
        max-width: 200px !important;
    }
    .countFilter{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .oemadmetatoggle .tabs{
        background-color: #EBEBEB;
        height: 34px !important;
    }
    .oemadmetatoggle .tab,.glider{
        height: 34px !important;
    }
    .oemadmetatoggle input[type="radio"]{
        display: none;
    }
    .oemadmetatoggle input[type=radio]:checked + label {
        color: #fff !important;
        z-index: 2;
    }
    .oemadmetatoggle input[type=radio]:checked + label + .activeFilter{
        color: #fff;
        z-index: 2;
    }
    .oemadmetatoggle input[type=radio]:checked + label > .notification{
        background-color: #fff;
        color: #fff;
    }
    .oemadmetatoggle input[id=oemadToggle-1]:checked ~ .glider{
        transform: translateX(0);
    }
    .oemadmetatoggle input[id=oemadToggle-2]:checked ~ .glider{
        transform: translateX(100%);
    }
    .oemadmetatoggle .activeFilter{
        background: transparent !important;
        border: 0;
    }
    .oemadmetatoggle .glider{
        position: absolute;
        display: flex;
        height: 31px;
        width: 90px;
        background-color: #000;
        z-index: 1;
        border-radius: 99px !important;
        transition: 0.25s ease-out;
    }
    .oemadmetatoggle .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 31px;
        width: 90px;
        font-size: 14px !important;
        font-weight: 500;
        border-radius: 99px;
        cursor: pointer;
        transition: color 0.15s ease-in;
        z-index: 2;
    }
    .oemadmetatoggle .tabs{
        display: flex;
        position: relative;
        background-color: #9d9d9d;
        box-shadow: 0 0 1px 0 rgba(#185ee0, 0.15), 0 6px 12px 0 rgba(#185ee0, 0.15);
        padding: 0px;
        border-radius: 99px !important;
        height:31px;
        width: 180px;
        margin-bottom: 4px;
    }
    .oemadmetatoggle .glider {
        width: 170px;
    }
    .oemadmetatoggle .tabs  {
        width: 340px;
    }
    .oemadmetatoggle .tab  {
        width: 170px;
    }
</style>
<div class="container-fluid">
    <div class="card">
    <div class="row ml-0 mr-0 mt-4">
    <div class="form-group col-md-3">@include('whistle_feed.menu_dropdown.report')</div>
    <div class="form-group countFilter col-md-7">
        <div class="oemadmetatoggle flex m-auto pb-3">
            <div class="tabs">
                <input type="radio" class="ToggleActiveFilter" id="oemadToggle-1" name="tabs-1" checked />
                <label class="tab" for="oemadToggle-1">OEM/AdNetwork</label>
                <input type="radio" class="ToggleActiveFilter" id="oemadToggle-2" name="tabs-1" />
                <label class="tab" for="oemadToggle-2">Meta</label>
                <span class="glider"></span>
            </div>
        </div>
        {{-- <!-- count section start-->
        <div class="btn-outline-success active count-div" id="countfilter0" data-toggle="tooltip">
            <label> Total:</label>
        <small id="total_count0"></small>
        </div>
        <div class="count-div" id="countfilter1" data-toggle="tooltip">
            <label>Active: </label>
            <small id="active_count1"></small>
        </div>
        <div class="count-div" id="countfilter2" data-toggle="tooltip">
            <label>In-Active: </label>
            <small id="inactive_count2"></small>
        </div> --}}
    </div>
    <!-- count section end -->
    <div class="col-md-2 max_width">
        <button type="submit" id="runReport" class="advFeedSReport btn btn-sm border-0 excel-btn border-radius-0"> Run Report</button>
            @can('hasExcelPermission')
                <button type="submit" class="exportFeedReport btn excel-btn btn-sm border-0 border-radius-0"> <i class="fa fa-download"> </i> &nbsp; Export</button>
            @endif
        </div>
    </div>
    <div class="card-body table-responsive">
    <div>
        <div class="filter-table-inline pl-0 d-flex flex-wrap">
            <div class="form-group col-md-2 pl-0 mr-3">
                <label for="period_filter">Choose Time Period</label>
                <select id="period_filter" class="form-control">
                    <option value=''>Select</option>
                    <option value="1" selected>Today</option>
                    <option value="2">Yesterday</option>
                    <option value="3">This Month</option>
                    <option value="4">Last Month</option>
                    <option value="5">Last 6 Months</option>
                    <option value="6">This Year</option>
                    <option value="7">Last Year</option>
                </select>
            </div>
            <div class="form-group col-md-2 mr-3 pl-0">
                <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 mr-3 pl-0">
                <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-2 pl-0 mr-3 channel_div">
            <label>Account ID</label>
                <input type="text" class="form-control" id="account_id" name="account_id" placeholder="Search Account ID" onkeypress="return validateInput(event)">
            </div>
            <div class="form-group col-md-2 pl-0 mr-3">
                <label for="client_filter">Client</label><br>
                        <select class="form-control" name="client_filter" multiple id="client_filter">
                            @foreach ($feed_accname as $value)
                            <option value="{{$value->id}}">
                                {{ $value->account_name }}-({{$value->id}})
                            </option>
                            @endforeach
                        </select>
            </div>
            <div class="form-group col-md-2 pl-0 mr-3">
                <label>Publisher ID</label>
                <input type="text" class="form-control" id="publisher_id" name="publisher_id" placeholder="Search Publisher ID" onkeypress="return validateInput(event)">
            </div>
            <div class="form-group  col-md-2 pl-0 mr-3">
                <label>Website ID</label>
                <div class="form-group prepend d-flex">
                    <span class="prefix" style="font-size:0.8rem !important;">WFP -</span>
                    <input type="text" class="form-control pencil-input" id="pencil_id" name="pencil_id" placeholder="Search Website ID" autocomplete="off" onkeypress="return validateInput(event)">
                </div>
            </div>
            <div class="form-group col-md-2 pl-0 mr-3">
                <label>Campaign ID</label>
                <input type="text" class="form-control" id="campaign_id" name="campaign_id" placeholder="Search Campaign ID" onkeypress="return validateInput(event)"> 
            </div>
            <div class="form-group col-md-2 pl-0 mr-3 channel_div">
                <label>Creative ID</label>
                <input type="text" class="form-control" id="creative_id" name="creative_id" placeholder="Search Creative ID" onkeypress="return validateInput(event)"> 
            </div>
            <div class="form-group col-md-2 channel_div pl-0 mr-3">
                <label class="labelText">Campaign Type</label>
                <select id="channelTypeFilter" class="form-control cform-control divs input-size">
                    <option value="" selected>All</option>
                    <option value="1">OEM</option>
                    <option value="2">Ad Network</option>
                </select>
            </div>
            <div class="form-group col-md-2 pl-0 mr-3 oem_div">
                <label class="labelText">OEM Channel</label>
                <select id="oemIdFilter" class="form-control cform-control divs input-size" multiple>
                </select>
            </div>
            <div class="form-group col-md-2" style = "padding-left: 1px;">
                <label class="labelText">Brand Name</label>
                <input type="text" class="form-control cform-control searchBar searchWidth  input-size" id="brandNameSearch" name="brandNameSearch" placeholder="Brand Name" autocomplete="off">
                <!-- <i class="fa fa-search search-icons"></i> -->
            </div>

            <div class="form-group col-md-2 meta_divs" style = "padding-left: 1px; display: none;">
                <label class="labelText">Meta Campaign ID</label>
                <input type="text" class="form-control cform-control searchBar input-size" id="metacampaignIdSearch" name="metacampaignIdSearch" placeholder="Meta Campaign ID" autocomplete="off">
            </div>
            <div class="form-group col-md-2 meta_divs" style = "padding-left: 1px; display: none;">
                <label class="labelText">Meta Adset ID</label>
                <input type="text" class="form-control cform-control searchBar input-size" id="metaAdsetIdSearch" name="metaAdsetIdSearch" placeholder="Meta Adset ID" autocomplete="off">
            </div>
            <div class="form-group col-md-2 meta_divs" style = "padding-left: 1px; display: none;">
                <label class="labelText">Meta Type</label>
                <select id="metaTypeFilter" class="form-control cform-control divs dropdownFilter input-size">
                        <option value="" selected="selected">Select Meta Type</option>
                        <option value="Advantage Plus">Advantage Plus</option>
                        <option value="Manual">Manual</option>
                </select>
            </div>
            <div class="form-group col-md-2 meta_divs" style = "padding-left: 1px; display: none;">
                <label class="labelText">Meta Ad Account</label>
                <select id="metaAdAccountIdFilter" class="form-control cform-control divs dropdownFilter input-size">
                </select>
            </div>

            <div class="form-group col-md-2" style = "padding-left: 1px;">
                <label class="labelText">Bid Type</label>
                <select id="bidTypeFilter" class="form-control cform-control divs input-size dropdownFilter">
                    <option value="0">CPC</option>
                    <option value="2">CPM</option>
                    <option value="1">CPA</option>
                </select>
            </div>

            <div class="form-group col-md-2 country_div meta_divs" style = "padding-left: 1px; display: none;">
                <label class="labelText">Country</label>
                <select id="countryTypeFilter" class="form-control cform-control divs dropdownFilter input-size" multiple>
                </select>
            </div>

            <div class="form-group col-md-2" style = "padding-left: 1px;">
                <label class="labelText" id="campCreaLabel">Campaign Status</label>
                <select id="campaignStatusFilter" class="form-control">
                    <option value="1">Active</option>
                    <option value="2,3,4,5,6">In-Active</option>
                    <option value="0">Paused</option>
                </select>
            </div>

            <div class="form-group col-md-2 pl-0 mr-3 inv_div">
                <label for="inventory_filter">Inventory Type</label>
                    <select class="form-control" name="inventory_filter[]" multiple id="inventory_filter"> </select>
            </div>
            <div class="form-group col-md-2 pl-0 mr-3 state_div">
                <label>State</label>
                <input type="text" class="form-control" id="state_filter" name="state_filter" placeholder="Search State">
            </div>
            <div class="form-group col-md-2 pl-0 mr-3 city_div">
                <label>City</label>
                <input type="text" class="form-control" id="city_filter" name="city_filter" placeholder="Search City">
            </div>
            <div class="form-group col-md-2 pl-0 mr-3 meta_divs" style = "padding-left: 1px; display: none;">
                <span class="dates-comb divs breakdownVal allFeedFilterDiv">
                    <label class="labelText">Breakdown</label>
                    <select id="breakdown_filter" class="form-control cform-control divs input-size form-size" style="font-size: 13px;">
                        <option value="0" selected>Placement-Device</option>
                        <option value="1">Country-Region</option>
                        <option value="2">Age-Gender</option>
                    </select>
                </span>
            </div>
             <div class="form-group col-md-2 pl-0 mr-3 ageVal allFeedFilterDiv selectBidType input-size form-size" style = "padding-left: 1px; display: none;">
                <label class="labelText">Age</label>
                <select id="age_filter" class="form-control cform-control divs input-size form-size">
                    <option value="" selected disabled>Select Age</option>
                    <option value="18-24">18-24</option>
                    <option value="25-34">25-34</option>
                    <option value="35-44">35-44</option>
                    <option value="45-54">45-54</option>
                    <option value="55-64">55-64</option>
                    <option value="65+">65+</option>
                </select>
            </div>

            <div class="form-group col-md-2 pl-0 mr-3 genderVal allFeedFilterDiv selectBidType input-size form-size" style = "padding-left: 1px; display: none;">
                <label class="labelText">Gender</label>
                <select id="gender_filter" class="form-control cform-control divs input-size form-size">
                    <option value="" selected disabled>Select Age</option>
                    <option value="male">Male</option>
                    <option value="female">Female</option>
                    <option value="unknown">Unknown</option>
                </select>
            </div>

            <div class="form-group col-md-2 pl-0 mr-3 device_creative_div allFeedFilterDiv device_creative">
                <label class="labelText">Device</label>
                <select id="deviceFilter" class="form-control cform-control divs">
                    <option value="Desktop">Desktop</option>
                    <option value="Mobile">Mobile</option>
                </select>
            </div>
            <div class="form-group col-md-2 pl-0 mr-3 channel_div">
                <label for="">Make</label>
                <select class="form-control" name="make_filter[]" multiple id="make_filter"></select>
            </div>

            <div class="form-group col-md-2 pl-0 mr-3 channel_div">
                <label>Model</label><br>
                <select class="form-control" name="model_filter[]" multiple id="model_filter"> </select>
            </div>
            <div class="form-group col-md-2 pl-0 mr-3 placement_div">
                <label>Placement</label><br>
                <select class="form-control" name="placement_filter[]" multiple id="placement_filter"> </select>
    
            </div>
            <div class="form-group col-md-2 pl-0 mr-3 sub_placement_div">
                <label>Sub Placement</label><br>
                <select class="form-control" name="sub_placement_filter[]" multiple id="sub_placement_filter"> </select>
            </div>
            <div class="form-group col-md-2 pl-0 mr-3">
                <label>Optional Filter</label>
                <label class="checkBoxLabel"><input type="checkbox" class="advSelectedOption" data-column="26" data-column-name="current_hour">Hour-Wise</label>
            </div>
        </div>
    </div>
    <div class="col-8 pl-0 mb-4 custom-z-index">
        @include('whistle_feed.feed_reports.clearFilter')
    </div>
        <table class="table-bordered table-hover text-center" id="report-main-table">
            <thead>
                <tr>
                    <th rowspan="2">Sl.No</th>
                    <th rowspan="2">Campaign Status</th>
                    <th rowspan="2">Campaign ID</th>
                    <th rowspan="2">Creative ID</th>
                    <th rowspan="2">Channel Type</th>
                    <th rowspan="2">Inventory Type</th>
                    <th rowspan="2">Audience Type</th>
                    <th rowspan="2">Publisher ID</th>
                    <th rowspan="2">Website ID</th>
                    <th rowspan="2">Placement Name</th>
                    <th rowspan="2">Sub Placement Name</th>
                    <th rowspan="2">Placement ID</th>
                    <th rowspan="2">Website Name</th>
                    <th rowspan="2">Account ID</th>
                    <th rowspan="2">Client</th>
                    <th rowspan="2">Campaign Type</th>
                    <th rowspan="2">Meta Campaign Type</th>
                    <th rowspan="2">Meta Account Number</th>
                    <th rowspan="2">Meta Campaign ID</th>
                    <th rowspan="2">Meta Adset ID</th>
                    <th rowspan="2">Reach</th>
                    <th rowspan="2">UserName</th>
                    <th rowspan="2">Brand Name</th>
                    <th rowspan="2">Email</th>
                    <th rowspan="2">On-Boarded Date</th>
                    <th rowspan="2">Impression Date</th>
                    <th rowspan="2">Hour</th>
                    <th rowspan="2">Age</th>
                    <th rowspan="2">Gender</th>
                    <th rowspan="2">Region</th>
                    <th rowspan="2">Country</th>
                    <th rowspan="2">State</th>
                    <th rowspan="2">City</th>
                    <th rowspan="2">Zip Code</th>
                    <th rowspan="2">Platform</th>
                    <th rowspan="2">OS</th>
                    <th rowspan="2">Make</th>
                    <th rowspan="2">Model</th>
                    <th rowspan="2">Bid Price</th>
                    <th rowspan="2">Bids Won</th>
                    <th rowspan="2">Impressions</th>
                    <th rowspan="2">Paused Impressions</th>
                    <th rowspan="2">View Rate % <span data-toggle="tooltip" title="(Viewable Impressions / Bids Won) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th rowspan="2">Clicks</th>
                    <!-- <th rowspan="2">Unique Clicks</th> -->
                    <th rowspan="2">Conversions</th>
                    <th rowspan="2" class="video-header">Video Viewability % <span data-toggle="tooltip" title="(First Quartile * 25 + Mid Piont * 50 + Third Quartile * 75 + Complete * 100) / (First Quartile + Mid Piont + Third Quartile + Complete)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th colspan="9" class="video-header">Video Events</th>
                    <th rowspan="2">Likes</th>
                    <th rowspan="2">Shares</th>
                    <th rowspan="2">Clicks From Shares</th>
                    <th rowspan="2">Conversions From Shares</th>
                    <th rowspan="2">CPM Spends</th>
                    <th rowspan="2">CPC Spends</th>
                    <th rowspan="2">CPA Spends</th>
                    <th rowspan="2">Total Spends</th>
                    <th rowspan="2">CTR % <span data-toggle="tooltip" title="(clicks * (100 / Impressions))"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th rowspan="2">CR <span data-toggle="tooltip" title="(Conversions / Clicks) x 100"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th rowspan="2">CPM <span data-toggle="tooltip" title="(Spends / Impressions) x 1000"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th rowspan="2">CPC <span data-toggle="tooltip" title="(Spends / Clicks)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th rowspan="2">CPA <span data-toggle="tooltip" title="(Spends / Conversions)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th rowspan="2">Entry Type</th>
                </tr>
                <tr class="video-header-col">
                    <th>Start</th>
                    <th>25 % Viewed</th>
                    <th>50 % Viewed</th>
                    <th>75 % Viewed</th>
                    <th>100 % Viewed</th>
                    <th>Rewind</th>
                    <th>Full Screen</th>
                    <th>Mute</th>
                    <th>Skip</th>
                </tr>
            </thead>
            <tfoot>
		        <tr>
                    <th>Total</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <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 class="video-footer">NA</th>
                    <th class="video-footer">NA</th>
                    <th class="video-footer">NA</th>
                    <th class="video-footer">NA</th>
                    <th class="video-footer">NA</th>
                    <th class="video-footer">NA</th>
                    <th class="video-footer">NA</th>
                    <th class="video-footer">NA</th>
                    <th class="video-footer">NA</th>
                    <th class="video-footer">NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                </tr>
	        </tfoot>
        </table>
    </div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}"/>
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="application/javascript">
const numberFormatter = Intl.NumberFormat('en-IN');

$(document).ready(function() {
    getPlacementNames();
    getCountriesData();
    getInventories();
    getOEMIds();
    $('.inv_div').show();
    $('.oem_div').hide();
    var campaign_state = 0;
    var inventory_filter = channelType_filter = oemId_filter = '';
    var typingTimer;

    /* call function while DOM get ready to get all records.*/
    feedReportList();
    get_campaign_count();

    //Count Filter
    $('.count-div').click(function (e) {
        e.preventDefault();
        campaign_state = parseInt(this.id.slice(-1));
        var pencil_id = $('#pencil_id').val();
        var account_id = $('#account_id').val();
        var campaign_id = $('#campaign_id').val();
        channelType_filter = $('#channelTypeFilter').val();
        oemId_filter = $('#oemIdFilter').val();
        inventory_filter = $('#inventory_filter').val();
        client_id = $('#client_filter').val();
        var creative_id = $('#creative_id').val();
        audience_type = $('#audience_type').val();
        publisher_id = $('#publisher_id').val();
        optionalFilter = $('.advSelectedOption:checked').length;
        subplacement_name = $('#sub_placement_filter').val();
        placement_name    = $('#placement_filter').val();
        make              = $('#make_filter').val();
        model             = $('#model_filter').val();
        city              = $('#city_filter').val();
        state             = $("#state_filter").val();
        feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city,oemId_filter,channelType_filter);
        $('.count-div').removeClass('btn-outline-success active');
        $(this).addClass('btn-outline-success active');
    });

    $('.clear_filter').on('click',function(){
        $('#pencil_id').val('');
        $('#account_id').val('');
        $('#campaign_id').val('');
        $("#publisher_id").val('');
        $('#creative_id').val('');
        $('#period_filter   option:eq(1)').prop('selected',true);
        $('#inventory_filter option:first').prop('selected',true);
        $('#audience_type option:first').prop('selected',true);
        $('#client_filter input[type="checkbox"]').prop('checked', false);
        $('#client_filter option:selected').prop('selected', false);
        $('#client_filter').multiselect('refresh');
        $('#state_filter').val('');
        $('#city_filter').val('');
        $('#make_filter').val('');
        $('#model_filter').val('').prop('selected', true);
        $('#channelTypeFilter').val('').prop('selected', true);
        $("#oemIdFilter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#inventory_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#make_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#model_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('#placement_filter').val('').prop('selected', true);
        $("#placement_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('#sub_placement_filter').val('').prop('selected', true);
        $("#sub_placement_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('.advSelectedOption').prop('checked', false);
        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);
        $('.count-div').removeClass('btn-outline-success active');
        $('#'+$('.count-div').eq(0).prop('id')).addClass('btn-outline-success active');
        feedReportList();
        getPlacementNames();
    });
     /*return start and end date for  excel export*/
    $(document).on("click",".exportFeedReport",function(e){
        e.preventDefault()
        var start_date        = $('#start_date').val();
        var end_date          = $('#end_date').val();
        var account_id        = $('#account_id').val();
        var pencil_id         = $('#pencil_id').val();
        var campaign_id       = $('#campaign_id').val();
        var inventory_filter  = $('#inventory_filter').val();
        var channelType_filter= $('#channelTypeFilter').val();
        var oemId_filter      = $('#oemIdFilter').val();
        var audience_type     = $('#audience_type').val();
        var client_id         = $('#client_filter').val();
        var creative_id       = $('#creative_id').val();
        var optionalFilter    = $('.advSelectedOption:checked').length;
        var subplacement_name = $('#sub_placement_filter').val();
        var placement_name    = $('#placement_filter').val();
        var make              = $('#make_filter').val();
        var model             = $('#model_filter').val();
        var city              = $('#city_filter').val();
        var state             = $("#state_filter").val();
        var publisher_id      = $("#publisher_id").val();
        var search            = $('#report-main-table_filter input[type="search"]').val();
        let page_name         = $("#report_dropdown option:selected").text();

        $('.exportFeedReport').attr('disabled','disabled');
        $('.exportFeedReport').addClass('bg-secondary');
        $.ajax({
            "url": "{{ url('exportFeedReport') }}",
            "type": "GET",
            "data": {
                fromdate         : start_date,
                todate           : end_date,
                accountid        : account_id,
                pencilid         : pencil_id,
                campaignid       : campaign_id,
                campaign_state   : campaign_state,
                page_name        : page_name,
                channelType_filter: channelType_filter,
                oemId_filter     : oemId_filter,
                inventory_filter : inventory_filter,
                client_id        : client_id,
                creative_id      : creative_id,
                audience_type    : audience_type,
                optionalFilter   : optionalFilter,
                placement_name   : placement_name,
                subplacement_name: subplacement_name,
                make             : make,
                model            : model,
                state            : state,
                city             : city,
                search           : search,
            },
            "dataType": "json",
            success: function(response) {
                if(response){
                    toastr.success('File Will Be Sent To Your Registered Email Id');
                }else{
                    toastr.error('Something Went Wrong or File Is Already Being Created');
                }
            }
        });
    });

    $("body").on("click", "#runReport", function(){
        var account_id        = $('#account_id').val();
        var brandName         = $('#brandNameSearch').val();
        var pencil_id         = $('#pencil_id').val();
        var campaign_id       = $('#campaign_id').val();
        var channelType_filter= ($('#oemadToggle-2').is(":checked") ? '3' : $("#channelTypeFilter").val());
        var oemId_filter      = $('#oemIdFilter').val();
        var inventory_filter  = $('#inventory_filter').val();
        var client_id         = $('#client_filter').val();
        var creative_id       = $('#creative_id').val();
        var audience_type     = $('#audience_type').val();
        var publisher_id      = $("#publisher_id").val();
        var optionalFilter    = $('.advSelectedOption:checked').length;
        var metaCampaignId    = $('#metacampaignIdSearch').val();
        var metaAdsetId       = $('#metaAdsetIdSearch').val();
        var metaTypeFilter    = $('#metaTypeFilter').val();
        var metaAdAccountId   = $('#metaAdAccountIdFilter').val();
        var subplacement_name = $('#sub_placement_filter').val();
        var bidTypeFilter     = $('#bidTypeFilter').val();
        var placement_name    = $('#placement_filter').val();
        var make              = $('#make_filter').val();
        var model             = $('#model_filter').val();
        var campaignStatus    = $('#campaignStatusFilter').val();
        var countryTypeFilter = $('#countryTypeFilter').val();
        var city              = $('#city_filter').val();
        var state             = $("#state_filter").val();
        var breakdown_filter  = $("#breakdown_filter").val();
        var age_filter        = $("#age_filter").val();
        var gender_filter     = $("#gender_filter").val();
        var deviceFilter      = $("#deviceFilter").val();
        feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city,oemId_filter,channelType_filter, brandName, metaCampaignId, metaAdsetId, metaTypeFilter, metaAdAccountId, bidTypeFilter, campaignStatus, countryTypeFilter, breakdown_filter, age_filter, gender_filter, deviceFilter);
    });
    
        /*account id filter*/
    // $("#account_id").keyup(function(){
    //     var account_id = $(this).val();
    //     var pencil_id = $('#pencil_id').val();
    //     var campaign_id = $('#campaign_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id = $('#client_filter').val();
    //     var creative_id = $('#creative_id').val();
    //     var audience_type = $('#audience_type').val();
    //     var publisher_id = $("#publisher_id").val();
    //     var optionalFilter = $('.advSelectedOption:checked').length;
    //     var subplacement_name = $('#sub_placement_filter').val();
    //     var placement_name    = $('#placement_filter').val();
    //     var make              = $('#make_filter').val();
    //     var model             = $('#model_filter').val();
    //     var city              = $('#city_filter').val();
    //     var state             = $("#state_filter").val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedReportList(account_id, pencil_id,campaign_id, campaign_state, inventory_filter, client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
    //     }, 500);
    // });

    /*publisher id filter*/
    // $("#publisher_id").keyup(function(){
    //     var publisher_id = $(this).val();
    //     var account_id = $("#account_id").val();
    //     var pencil_id = $('#pencil_id').val();
    //     var campaign_id = $('#campaign_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id = $('#client_filter').val();
    //     var creative_id = $('#creative_id').val();
    //     var audience_type = $('#audience_type').val();
    //     var optionalFilter = $('.advSelectedOption:checked').length;
    //     var subplacement_name = $('#sub_placement_filter').val();
    //     var placement_name    = $('#placement_filter').val();
    //     var make              = $('#make_filter').val();
    //     var model             = $('#model_filter').val();
    //     var city              = $('#city_filter').val();
    //     var state             = $("#state_filter").val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedReportList(account_id, pencil_id,campaign_id, campaign_state, inventory_filter, client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
    //     }, 500);
    // });

    /*  campaign id filter*/
    // $("#campaign_id").keyup(function(){
    //     var campaign_id = $(this).val();
    //     var pencil_id = $('#pencil_id').val();
    //     var account_id = $('#account_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id = $('#client_filter').val();
    //     var creative_id = $('#creative_id').val();
    //     var audience_type = $('#audience_type').val();
    //     var publisher_id = $("#publisher_id").val();
    //     var optionalFilter = $('.advSelectedOption:checked').length;
    //     var subplacement_name = $('#sub_placement_filter').val();
    //     var placement_name    = $('#placement_filter').val();
    //     var make              = $('#make_filter').val();
    //     var model             = $('#model_filter').val();
    //     var city              = $('#city_filter').val();
    //     var state             = $("#state_filter").val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedReportList(account_id, pencil_id,campaign_id, campaign_state, inventory_filter, client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
    //     }, 500);
    // });

    /*  creative id filter*/
    // $('#creative_id').keyup(function() {
    //     clearTimeout(typingTimer);
    //     var creative_id = $(this).val();
    //     var campaign_id = $('#campaign_id').val();
    //     var pencil_id = $('#pencil_id').val();
    //     var account_id = $('#account_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id = $('#client_filter').val();
    //     var audience_type = $('#audience_type').val();
    //     var publisher_id = $("#publisher_id").val();
    //     var optionalFilter = $('.advSelectedOption:checked').length;
    //     var subplacement_name = $('#sub_placement_filter').val();
    //     var placement_name    = $('#placement_filter').val();
    //     var make              = $('#make_filter').val();
    //     var model             = $('#model_filter').val();
    //     var city              = $('#city_filter').val();
    //     var state             = $("#state_filter").val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedReportList(account_id, pencil_id,campaign_id, campaign_state, inventory_filter, client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
    //     }, 500);
    // });
    
    /*Pencil id filter*/
    // $("#pencil_id").keyup(function(){
    //     var account_id = $('#account_id').val();
    //     var creative_id = $('#creative_id').val();
    //     var campaign_id = $('#campaign_id').val();
    //     var pencil_id = $(this).val();
    //     var campaign_id = $('#campaign_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id = $('#client_filter').val();
    //     var audience_type = $('#audience_type').val();
    //     var publisher_id = $("#publisher_id").val();
    //     var optionalFilter = $('.advSelectedOption:checked').length;
    //     var subplacement_name = $('#sub_placement_filter').val();
    //     var placement_name    = $('#placement_filter').val();
    //     var make              = $('#make_filter').val();
    //     var model             = $('#model_filter').val();
    //     var city              = $('#city_filter').val();
    //     var state             = $("#state_filter").val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id, creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
    //     }, 500);
    // });

    // inventory filter
    // $("body").on("change", "#inventory_filter", function(){
    //     var account_id = $('#account_id').val();
    //     var pencil_id = $('#pencil_id').val();
    //     var campaign_id = $('#campaign_id').val();
    //     var inventory_filter = $(this).val();
    //     var client_id = $('#client_filter').val();
    //     var creative_id = $('#creative_id').val();
    //     var audience_type = $('#audience_type').val();
    //     var publisher_id = $("#publisher_id").val();
    //     var optionalFilter = $('.advSelectedOption:checked').length;
    //     var subplacement_name = $('#sub_placement_filter').val();
    //     var placement_name    = $('#placement_filter').val();
    //     var make              = $('#make_filter').val();
    //     var model             = $('#model_filter').val();
    //     var city              = $('#city_filter').val();
    //     var state             = $("#state_filter").val();
    //     feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
    // });

    /*Client filter on change*/
    // $("body").on("change", "#client_filter", function() {
    //     var account_id = $('#account_id').val();
    //     var pencil_id = $('#pencil_id').val();
    //     var campaign_id = $('#campaign_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id = $(this).val();
    //     var creative_id = $('#creative_id').val();
    //     var audience_type = $('#audience_type').val();
    //     var publisher_id = $("#publisher_id").val();
    //     var optionalFilter = $('.advSelectedOption:checked').length;
    //     var subplacement_name = $('#sub_placement_filter').val();
    //     var placement_name    = $('#placement_filter').val();
    //     var make              = $('#make_filter').val();
    //     var model             = $('#model_filter').val();
    //     var city              = $('#city_filter').val();
    //     var state             = $("#state_filter").val();
    //     feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
    // });

    // $("body").on("change", "#audience_type", function(){
    //     var account_id = $('#account_id').val();
    //     var pencil_id = $('#pencil_id').val();
    //     var campaign_id = $('#campaign_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id = $('#client_filter').val();
    //     var creative_id = $('#creative_id').val();
    //     var audience_type = $(this).val();
    //     var publisher_id = $("#publisher_id").val();
    //     var optionalFilter = $('.advSelectedOption:checked').length;
    //     var subplacement_name = $('#sub_placement_filter').val();
    //     var placement_name    = $('#placement_filter').val();
    //     var make              = $('#make_filter').val();
    //     var model             = $('#model_filter').val();
    //     var city              = $('#city_filter').val();
    //     var state             = $("#state_filter").val();
    //     feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
    // });

    //multi select for users
    $('#client_filter').multiselect({
        enableFiltering: true,
        selectAllJustVisible: false,
        includeSelectAllOption: true,
        allSelectedText: 'All Selected',
        nonSelectedText: 'Select Client',
        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
    });

    $('#model_filter').multiselect({
        nonSelectedText                : 'Select Model',
        allSelectedText                : 'Selected All',
        unselectAllText                : 'Unselect all',
        selectAllJustVisible           : false,
        enableFiltering                : true,
        includeFilterClearBtn          : true,
        buttonWidth                    : '100%',
        enableHTML                     : true,
        enableCaseInsensitiveFiltering : true,
        selectAllJustVisible           : false,
        includeSelectAllOption         : true,
        templates : {
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button"><i class="fa fa-close"></i></button></span>',
        },
    });

    $('#oemIdFilter').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select OEM',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        numberDisplayed        : 1,
        buttonWidth            : '155px',
    });

    $('#inventory_filter').multiselect({
        nonSelectedText        : 'Select Inventory',
        allSelectedText        : 'Selected All',
        selectAllJustVisible   : false,
        includeSelectAllOption : true,
        selectAllValue         : 'all',
        selectAllText          : 'Select all',
        unselectAllText        : 'Unselect all',
    });

    $('#make_filter').multiselect({
        nonSelectedText        : 'Select Make',
        allSelectedText        : 'Selected All',
        selectAllJustVisible   : false,
        includeSelectAllOption : true,
        selectAllValue         : 'all',
        selectAllText          : 'Select all',
        unselectAllText        : 'Unselect all',
    });
    $('#model_filter').multiselect({
        nonSelectedText        : 'Select Model',
        allSelectedText        : 'Selected All',
        selectAllJustVisible   : false,
        includeSelectAllOption : true,
        selectAllValue         : 'all',
        selectAllText          : 'Select all',
        unselectAllText        : 'Unselect all',
    });
    $('#placement_filter').multiselect({
        nonSelectedText                : 'Select Placement',
        allSelectedText                : 'Selected All',
        unselectAllText                : 'Unselect all',
        selectAllJustVisible           : false,
        enableFiltering                : true,
        includeFilterClearBtn          : true,
        buttonWidth                    : '100%',
        enableHTML                     : true,
        enableCaseInsensitiveFiltering : true,
        selectAllJustVisible           : false,
        includeSelectAllOption         : true,
        templates : {
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button"><i class="fa fa-close"></i></button></span>',
        },
    });

    $('#sub_placement_filter').multiselect({
        nonSelectedText                : 'Select Sub Placement',
        allSelectedText                : 'Selected All',
        unselectAllText                : 'Unselect all',
        selectAllJustVisible           : false,
        enableFiltering                : true,
        includeFilterClearBtn          : true,
        buttonWidth                    : '100%',
        enableHTML                     : true,
        enableCaseInsensitiveFiltering : true,
        selectAllJustVisible           : false,
        includeSelectAllOption         : true,
        templates : {
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button"><i class="fa fa-close"></i></button></span>',
        },
    });

  /**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');
            var todaysDate = new Date();
            let year = startDate.getFullYear();
            let month = startDate.getMonth();
            let daysInMonth = new Date(year, month + 1, 0).getDate();
            let currentMonth = new Date().getMonth();
            let currentDate = new Date();
            let timeDifference = currentDate-startDate
            let daysDifferent = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
             var maxdaycount;
            if(startDate){
                maxdaycount = new Date(startDate);
                maxdaycount.setDate(maxdaycount.getDate() + daysInMonth-1);
            }
            var client_id = $('#client_filter').val();
            if (todaysDate.setHours(0,0,0,0) == startDate.setHours(0,0,0,0)) {
                $('#end_date').datepicker('option', 'maxDate', startDate);
            } 
            else if((month==currentMonth)|| (daysDifferent<=daysInMonth)){
                let today = new Date()
                let formattedDate = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0');
                $('#end_date').datepicker('option', 'maxDate', formattedDate);
            }
            else {
                $('#end_date').datepicker('option', 'maxDate', maxdaycount);
            }
            $('#end_date').datepicker('option', 'minDate', startDate);
            $('#end_date').datepicker('setDate', startDate);
            var pencil_id = $('#pencil_id').val();
            var account_id = $('#account_id').val();
            var campaign_id = $('#campaign_id').val();
            var inventory_filter = $('#inventory_filter').val();
            var creative_id = $('#creative_id').val();
            var audience_type = $('#audience_type').val();
            var publisher_id = $("#publisher_id").val();
            var optionalFilter = $('.advSelectedOption:checked').length;
            var subplacement_name = $('#sub_placement_filter').val();
            var placement_name    = $('#placement_filter').val();
            var make              = $('#make_filter').val();
            var model             = $('#model_filter').val();
            var city              = $('#city_filter').val();
            var state             = $("#state_filter").val();
            // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
            $('#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);
            }
            var pencil_id = $('#pencil_id').val();
            var account_id = $('#account_id').val();
            var campaign_id = $('#campaign_id').val();
            var inventory_filter = $('#inventory_filter').val();
            var client_id = $('#client_filter').val();
            var creative_id = $('#creative_id').val();
            var audience_type = $('#audience_type').val();
            var publisher_id = $('#publisher_id').val();
            var optionalFilter = $('.advSelectedOption:checked').length;
            var subplacement_name = $('#sub_placement_filter').val();
            var placement_name    = $('#placement_filter').val();
            var make              = $('#make_filter').val();
            var model             = $('#model_filter').val();
            var city              = $('#city_filter').val();
            var state             = $("#state_filter").val();
            // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
        },
        onSelect: function() {
            $('#period_filter').val('');
        }
    });

    $("body").on("change", "#period_filter", function(){
            var periodValue = $(this).val();           
            var account_id = $("#account_id").val();
            var pencil_id = $('#pencil_id').val();
            var campaign_id = $('#campaign_id').val();
            var inventory_filter = $('#inventory_filter').val();
            var client_id = $('#client_filter').val();
            var creative_id = $('#creative_id').val();
            var audience_type = $('#audience_type').val();
            var publisher_id = $('#publisher_id').val();
            var optionalFilter = $('.advSelectedOption:checked').length;
            var subplacement_name = $('#sub_placement_filter').val();
            var placement_name    = $('#placement_filter').val();
            var make              = $('#make_filter').val();
            var model             = $('#model_filter').val();
            var city              = $('#city_filter').val();
            var state             = $("#state_filter").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', 'maxDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
            }

            //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', 'maxDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
            }

            //filter by this month
            else if(periodValue=='3'){
                var start_date = new Date();
                var end_date = new Date();
                end_date =   end_date.setDate(end_date.getDate() - 0);
                end_date = new Date(end_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('option', 'maxDate', end_date); // Set maxDate to today
                $('#end_date').datepicker('setDate', end_date);
                $('#end_date').val(end_date); // Ensure end date is set in the input field
                // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
            }

            //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);
                // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
            }

            //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);
                // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
            }

            //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);
                end_date = new Date();
                end_date =   end_date.setDate(end_date.getDate() - 0);
                end_date = new Date(end_date).toJSON().slice(0, 10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('option', 'maxDate', end_date); // Set maxDate to today
                $('#end_date').datepicker('setDate', end_date);
                $('#end_date').val(end_date); // Ensure end date is set in the input field
                // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
            }
            //filter by previous year
            else if(periodValue=='7'){
                var end_date = new Date();
                var start_date = new Date();
                end_date = new Date(end_date.setMonth(0));
                end_date = new Date(end_date.setDate(1)-864e5).toJSON().slice(0,10);
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 12));
                start_date = new Date(start_date.setMonth(0));
                start_date = new Date(start_date.setDate(1)).toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
                // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,placement_name,subplacement_name,make,model,state,city);
            }
        }
        });

    $("body").on("click", "#submitFilter", function() {
        var state            = $("#state_filter").val();
        var account_id       = $("#account_id").val();
        var pencil_id        = $('#pencil_id').val();
        var campaign_id      = $('#campaign_id').val();
        var channelType_filter= $('#channelTypeFilter').val();
        var oemId_filter     = $('#oemIdFilter').val();
        var inventory_filter = $('#inventory_filter').val();
        var client_id        = $('#client_filter').val();
        var creative_id      = $('#creative_id').val();
        var audience_type    = $('#audience_type').val();
        var publisher_id     = $('#publisher_id').val();
        var OptionalSelected = $('.advSelectedOption:checked').length;
        var subplacement_name= $('#sub_placement_filter').val();
        var placement_name   = $('#placement_filter').val();
        var make             = $('#make_filter').val();
        var model            = $('#model_filter').val();
        var city             = $('#city_filter').val();
        feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id, OptionalSelected,placement_name,subplacement_name,make,model,state,city,oemId_filter,channelType_filter);
        // Get the column API object
        var column =  $("#report-main-table").DataTable().column($('.advSelectedOption').attr('data-column'));
        // Toggle the visibility of the column
        column.visible(column.visible());
    });
        // selecting each optional columns 
    // $('.advSelectedOption').on('click', function (e) {
    //     var account_id       = $("#account_id").val();
    //     var pencil_id        = $('#pencil_id').val();
    //     var campaign_id      = $('#campaign_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id        = $('#client_filter').val();
    //     var creative_id      = $('#creative_id').val();
    //     var audience_type    = $('#audience_type').val();
    //     var publisher_id     = $('#publisher_id').val();
    //     var OptionalSelected = $('.advSelectedOption:checked').length;
    //     var subplacement_name = $('#sub_placement_filter').val();
    //     var placement_name    = $('#placement_filter').val();
    //     var make              = $('#make_filter').val();
    //     var model             = $('#model_filter').val();
    //     var city              = $('#city_filter').val();
    //     var state             = $("#state_filter").val();
    //     feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id, OptionalSelected,placement_name,subplacement_name,make,model,state,city);
    //     // Get the column API object
    //     var column =  $("#report-main-table").DataTable().column($(this).attr('data-column'));
    //     // Toggle the visibility of the column
    //     column.visible(column.visible());
    // });

    // $("#state_filter").keyup(function(){
    //     var state            = $(this).val();
    //     var state            = $("#state_filter").val();
    //     var account_id       = $("#account_id").val();
    //     var pencil_id        = $('#pencil_id').val();
    //     var campaign_id      = $('#campaign_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id        = $('#client_filter').val();
    //     var creative_id      = $('#creative_id').val();
    //     var audience_type    = $('#audience_type').val();
    //     var publisher_id     = $('#publisher_id').val();
    //     var OptionalSelected = $('.advSelectedOption:checked').length;
    //     var subplacement_name= $('#sub_placement_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     var make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var city             = $('#city_filter').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id, OptionalSelected,placement_name,subplacement_name,make,model,state,city);
    //     }, 500);
    // });

    // $("#city_filter").keyup(function(){
    //     var state            = $("#state_filter").val();
    //     var account_id       = $("#account_id").val();
    //     var pencil_id        = $('#pencil_id').val();
    //     var campaign_id      = $('#campaign_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id        = $('#client_filter').val();
    //     var creative_id      = $('#creative_id').val();
    //     var audience_type    = $('#audience_type').val();
    //     var publisher_id     = $('#publisher_id').val();
    //     var OptionalSelected = $('.advSelectedOption:checked').length;
    //     var subplacement_name= $('#sub_placement_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     var make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var city             = $('#city_filter').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id, OptionalSelected,placement_name,subplacement_name,make,model,state,city);
    //     }, 500);
    // });

    /*Placement filter on change*/
    $("body").on("change", "#placement_filter", function() {
        var state            = $("#state_filter").val();
        var account_id       = $("#account_id").val();
        var pencil_id        = $('#pencil_id').val();
        var campaign_id      = $('#campaign_id').val();
        var inventory_filter = $('#inventory_filter').val();
        var client_id        = $('#client_filter').val();
        var creative_id      = $('#creative_id').val();
        var audience_type    = $('#audience_type').val();
        var publisher_id     = $('#publisher_id').val();
        var OptionalSelected = $('.advSelectedOption:checked').length;
        var subplacement_name= $('#sub_placement_filter').val();
        var placement_name   = $('#placement_filter').val();
        var make             = $('#make_filter').val();
        var model            = $('#model_filter').val();
        var city             = $('#city_filter').val();
        placement_name       = placement_name.length ? placement_name : 0;
        // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id, OptionalSelected,placement_name,subplacement_name,make,model,state,city);
    });

    /*Sub Placement filter on change*/
    // $("body").on("change", "#sub_placement_filter", function() {
    //     var account_id       = $("#account_id").val();
    //     var pencil_id        = $('#pencil_id').val();
    //     var campaign_id      = $('#campaign_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id        = $('#client_filter').val();
    //     var creative_id      = $('#creative_id').val();
    //     var audience_type    = $('#audience_type').val();
    //     var publisher_id     = $('#publisher_id').val();
    //     var OptionalSelected = $('.advSelectedOption:checked').length;
    //     var subplacement_name= $('#sub_placement_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     var make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var city             = $('#city_filter').val();
    //     var state            = $("#state_filter").val();
    //     feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id, OptionalSelected,placement_name,subplacement_name,make,model,state,city);
    // });

    /*Make filter on change*/
    $("body").on("change", "#make_filter", function() {
        var makeId = [];
        $('#make_filter option:selected').each(function() {
            makeId.push($(this).attr('data-id'));
        });
        makeId               = makeId.length ? makeId : 0;
        var state            = $("#state_filter").val();
        var account_id       = $("#account_id").val();
        var pencil_id        = $('#pencil_id').val();
        var campaign_id      = $('#campaign_id').val();
        var inventory_filter = $('#inventory_filter').val();
        var client_id        = $('#client_filter').val();
        var creative_id      = $('#creative_id').val();
        var audience_type    = $('#audience_type').val();
        var publisher_id     = $('#publisher_id').val();
        var OptionalSelected = $('.advSelectedOption:checked').length;
        var subplacement_name= $('#sub_placement_filter').val();
        var placement_name   = $('#placement_filter').val();
        var make             = $('#make_filter').val();
        var model            = $('#model_filter').val();
        var city             = $('#city_filter').val();
        getModelTypes(makeId);
        // feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id, OptionalSelected,placement_name,subplacement_name,make,model,state,city);
    });

    /*Model filter on change*/
    // $("body").on("change", "#model_filter", function() {
    //     var state            = $("#state_filter").val();
    //     var account_id       = $("#account_id").val();
    //     var pencil_id        = $('#pencil_id').val();
    //     var campaign_id      = $('#campaign_id').val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var client_id        = $('#client_filter').val();
    //     var creative_id      = $('#creative_id').val();
    //     var audience_type    = $('#audience_type').val();
    //     var publisher_id     = $('#publisher_id').val();
    //     var OptionalSelected = $('.advSelectedOption:checked').length;
    //     var subplacement_name= $('#sub_placement_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     var make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var city             = $('#city_filter').val();
    //     feedReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id, OptionalSelected,placement_name,subplacement_name,make,model,state,city);
    // });
});

//all records displaying here
function feedReportList(account_id=null,pencil_id=null,campaign_id=null,campaign_state=null,inventory_filter=null,client_id =null,creative_id=null,audience_type=null,publisher_id=null,optionalFilter=null,placement_name=null,subplacement_name=null,make=null,model=null,state=null,city=null,oemId_filter=null,channelType_filter=null, brandName =null, metaCampaignId =null, metaAdsetId =null, metaTypeFilter =null, metaAdAccountId =null, bidTypeFilter =null, campaignStatus =null, countryTypeFilter=null, breakdown_filter = null, age_filter = null, gender_filter = null, deviceFilter = null) {
    const numberFormatter = Intl.NumberFormat('en-IN');
    $('.exportFeedReport').removeAttr('disabled');
    $('.exportFeedReport').removeClass('bg-secondary');
    var start_date = $('#start_date').val();
    var end_date   = $('#end_date').val();
    $("#report-main-table").DataTable().clear().destroy();
    $('#report-main-table').DataTable({
        "processing"     : true,
        "lengthChange"   : false,
        "serverSide"     : true,
        "paging"         : true,
        "searching"      : true,
        "scrollX"        : true,
        "pageLength"     : 50,
        "ordering"       : true,
        "lengthChange"   : false, 
        "scrollY"        : 400,
        "scrollCollapse" : true,
        "fixedHeader"    : { header: true},
        "language"       : { search: "",searchPlaceholder: "Search..." },
        "order" : [
            [21, "desc"]
        ],
        "ajax": {
            "url"  : "{{ url('getFeedReport') }}",           
            "type" : "POST",
            "data" : {
                    _token             : "{{csrf_token()}}",
                    "start_date"       : start_date,
                    "end_date"         : end_date,
                    "account_id"       : account_id,
                    "pencil_id"        : pencil_id,
                    "campaign_id"      :campaign_id,
                    "campaign_state"   :campaign_state,
                    "oemId_filter"     :oemId_filter,
                    "channelType_filter":channelType_filter,
                    "inventory_filter" :inventory_filter,
                    "client_id"        :client_id,
                    "creative_id"      : creative_id,
                    "audience_type"    :audience_type,
                    "publisher_id"     : publisher_id,
                    "optionalFilter"   : optionalFilter,
                    "placement_name"   :placement_name,
                    "subplacement_name":subplacement_name,
                    "make"             :make,
                    "model"            :model,
                    "state"            :state,
                    "city"             :city,
                    "countryTypeFilter":    countryTypeFilter,
                    "bidTypeFilter"    :    bidTypeFilter,
                    "campaignStatus"   :    campaignStatus,
                    "brandName"        :    brandName,
                    "metaCampaignId"   :    metaCampaignId,
                    "metaAdsetId"      :    metaAdsetId,
                    "metaTypeFilter"   :    metaTypeFilter,
                    "metaAdAccountId"  :    metaAdAccountId,
                    "breakdown_filter" :    breakdown_filter,
                    "age_filter"       :    age_filter,
                    "gender_filter"    :    gender_filter,
                    "deviceFilter"     :    deviceFilter,
                },
            "dataType": "json",
        },
        "columnDefs": [
            { orderable: false, targets: 0 }
               ],
        "columns": [
            { data: "id",
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            { data: "Campaign_Status",
              data: "deleted",
               render: function(data, type, row, meta){
                if(row.deleted == 'Deleted'){
                    data = '<label class="badge badge-danger">&nbsp;&nbsp;Deleted&nbsp;&nbsp;</label>';
                }else{
                    if(row.Campaign_Status == 'Active'){
                        data = '<label class="badge badge-success">&nbsp;&nbsp;Active&nbsp;&nbsp;</label>';
                    }else if(row.Campaign_Status == 'Paused'){
                        data = '<label class="badge badge-danger">&nbsp;&nbsp;Paused&nbsp;&nbsp;</label>';
                    }else {
                        data = '<label class="badge badge-danger">In-Active&nbsp;</label>';
                    }
                }
                return data;
               }
           },
            { data: "Campaign_Id",
                render: function(data, type, row, meta){
                 return ((row.Campaign_Id)  ? row.Campaign_Id :  "NA")
                }
            },
            { data: "Creative_Id", name : "Creative_Id",
                render: function(data, type, row, meta){
                 return ((row.Creative_Id)  ? row.Creative_Id :  "NA")
                }
            },
            { data: "Channel_Type",
                render:function(data, type, row, meta){
                     return ((row.Channel_Type)  ? row.Channel_Type :  "NA")
                }
            },
            { data: "Inventory_Type",
                render:function(data, type, row, meta){
                     return ((row.Inventory_Type)  ? row.Inventory_Type :  "NA")
                    // data = row.inventory_type == 1 ? 'Text' : (row.inventory_type == 2 ? 'Tile' : (row.inventory_type == 3 ? 'OEM' : (row.inventory_type == 4 ? "OEM-Text" : (row.inventory_type == 5 ? "Text-Expanded" : (row.inventory_type == 6 ? "Banner Ads" : "Interstitial")))));
                }
            },
            { data: "Audience_Type",name: "Audience_Type",
                render:function(data, type, row, meta){
                    return ((row.Audience_Type)  ? row.Audience_Type :  "NA")
                    // data = row.audience_type == 1 ? 'Curated Audience' : (row.audience_type == 2 ? 'Generic Audience' : 'NA');
                }
            },
            { data: "Publisher_Id",
                render:function(data, type, row, meta){
                    data = (row.Publisher_Id ? row.Publisher_Id : 'NA');
                    return data;
                }
            },
            { data: "Website_Id",
                render: function(data, type, row, meta){
                 return ((row.Website_Id)  ? 'WFP'+row.Website_Id :  "WFP")
                }
            },
            { data: "Placement_Name",name: "Placement_Name",
                render: function(data, type, row, meta){
                    return (row.Placement_Name ? row.Placement_Name : '')
                }
            },
            { data: "Sub_Placement_Name",name: "Sub_Placement_Name",
                render: function(data, type, row, meta){
                    return (row.Sub_Placement_Name ? row.Sub_Placement_Name : '')
                }
            },
            { data: "Placement_Id", name: "Placement_Id",
                render: function(data, type, row, meta){
                    return ( row.Placement_Id  ? ((row.Placement_Id!='0') ? row.Placement_Id : '') : '')
                }
            },
            {
                data: "Website",
                render: function(data, type, row, meta){
                data = (row.Website)  ? '<a href = ' + row.Website + ' target="_blank"> ' + row.Website + ' </a>' : "NA";
                return data;
                }
            },
            { data: "Account_Id",
                render: function(data, type, row, meta){
                 return ((row.Account_Id)  ? row.Account_Id :  "NA")
                }
            },
            { data: "Account_Name",
                render: function(data, type, row, meta){
                 return ((row.Account_Name)  ? row.Account_Name :  "NA")
                }
            },
             { data: "campaign_type",
                render: function(data, type, row, meta){
                 return ((row.campaign_type)  ? row.campaign_type :  "NA")
                }
            },
            { data: "meta_campaign_type",name: "meta_campaign_type",
                render: function(data, type, row, meta){
                 return ((row.meta_campaign_type)  ? row.meta_campaign_type :  "NA")
                }
            },
            { data: "meta_account_number", name: "meta_account_number",
                render: function(data, type, row, meta){
                 return ((row.meta_account_number)  ? row.meta_account_number :  "NA")
                }
            },
            { data: "meta_campaign_id", name: "meta_campaign_id",
                render: function(data, type, row, meta){
                 return ((row.meta_campaign_id)  ? row.meta_campaign_id :  "NA")
                }
            },
            { data: "meta_adset_id", name: "meta_adset_id",
                render: function(data, type, row, meta){
                 return ((row.meta_adset_id)  ? row.meta_adset_id :  "NA")
                }
            },
            { data: "Reach", name: "Reach",
                render: function(data, type, row, meta){
                 return ((row.Reach)  ? row.Reach :  "NA")
                }
            },
            { data: "Username",
                render: function(data, type, row, meta){
                 return ((row.Username)  ? row.Username :  "NA")
                }
            },
            { data: "Brandname",
                render: function(data, type, row, meta){
                 return ((row.Brandname)  ? row.Brandname :  "NA")
                }
            },
            { data: "Email",
                render: function(data, type, row, meta){
                 return ((row.Email)  ? row.Email :  "NA")
                }
            },
            { data: "On_Boarded_Date",
                render: function(data, type, row, meta){
                 return ((row.On_Boarded_Date)  ? row.On_Boarded_Date :  "NA")
                }
            },
            { data: "Created_Date",
                render: function(data, type, row, meta){
                    if(row.Created_Date != ''){
                       var dateformat = row.Created_Date.split('-');
                        data = dateformat[2]+'-'+dateformat[1]+'-'+dateformat[0];
                    }else{
                        data = 'NA';
                    }
                    return data;
                }
            },
            { data: "Current_Hour",
                render: function(data, type, row, meta){
                 return ((row.Current_Hour)  ? row.Current_Hour :  "0")
                }
            },
            { data: "age", name: "age",
                render: function(data, type, row, meta){
                 return ((row.age)  ? row.age :  "NA")
                }
            },
            { data: "gender", name: "gender",
                render: function(data, type, row, meta){
                 return ((row.gender)  ? row.gender :  "NA")
                }
            },
            { data: "region", name: "region",
                render: function(data, type, row, meta){
                 return ((row.region)  ? row.region :  "NA")
                }
            },
            { data: "country", name: "country",
                render: function(data, type, row, meta){
                 return ((row.country)  ? row.country :  "NA")
                }
            },
            { data: "State", name: "State",
                render: function(data, type, row, meta){
                 return ((row.State)  ? row.State :  "NA")
                }
            },
            { data: "City", name: "City",
                render: function(data, type, row, meta){
                 return ((row.City)  ? row.City :  "NA")
                }
            },
            { data: "Zipcode", name: "Zipcode",
                render: function(data, type, row, meta) {
                    return ((row.Zipcode)  ? row.Zipcode : "NA")
                }
            },
            { data: "Device",
                render: function(data, type, row, meta){
                 return ((row.Device)  ? row.Device :  "NA")
                }
            },
            { data: "Os",name: "Os",
                render: function(data, type, row, meta){
                 return ((row.Os)  ? row.Os :  "NA")
                }
            },
            { data: "Make", name: "Make",
                render: function(data, type, row, meta){
                 return ((row.Make)  ? row.Make :  "Others")
                }
            },
            { data: "Model",  name: "Model",
                render: function(data, type, row, meta){
                 return ((row.Model)  ? row.Model :  "Others")
                }
            },
            { data: "Bidprice",
                render: function(data, type, row, meta){
                    return ((row.Bidprice) ? numberFormatter.format(Number(row.Bidprice)) : "0")
                }
            },
            { data: "Bids_Won", name: "Bids_Won",
                render: function(data, type, row, meta){
                 return ((row.Bids_Won) ? numberFormatter.format(Number(row.Bids_Won)) : "0")
                }
            },
            { data: "Impressions",
                render: function(data, type, row, meta){
                 return ((row.Impressions) ? numberFormatter.format(Number(row.Impressions)) : "0")
                }
            },
            { data: "Paused_Impressions", name: "Paused_Impressions",
                render: function(data, type, row, meta){
                 return ((row.Paused_Impressions) ? numberFormatter.format(Number(row.Paused_Impressions)) : "0")
                }
            },
            { data: "View_Rate", name: "View_Rate",
                render: function(data, type, row, meta){
                 return ((row.View_Rate) ? row.View_Rate+' %':"0 %")
                }
            },
            { data: "Clicks",
                render: function(data, type, row, meta){
                 return ((row.Clicks) ? numberFormatter.format(Number(row.Clicks)) : "0")
                }
            },
            // { data: "unique_clicks",
            //     render: function(data, type, row, meta){
            //      return ((row.unique_clicks)  ? numberFormatter.format(Number(row.unique_clicks)) :  "0")
            //     }
            // },
            { data: "Conversions",
                render: function(data, type, row, meta){
                 return ((row.Conversions) ? numberFormatter.format(Number(row.Conversions)) : "0")
                }
            },
            { data: "Video_Viewability",
                render: function(data, type, row, meta){
                 return ((row.Video_Viewability) ? row.Video_Viewability+' %':"0.00 %")
                }
            },
            { data: "Video_Start",
                render: function(data, type, row, meta){
                    return ((row.Video_Start) ? row.Video_Start :"0")
                }
            },
            { data: "25_Viewed",
                render: function(data, type, row, meta){
                    return ((row['25_Viewed']) ? row['25_Viewed'] :"0")
                }
            },
            { data: "50_Viewed",
                render: function(data, type, row, meta){
                    return ((row['50_Viewed']) ? row['50_Viewed'] :"0")
                }
            },
            { data: "75_Viewed",
                render: function(data, type, row, meta){
                    return ((row['75_Viewed']) ? row['75_Viewed'] :"0")
                }
            },
            { data: "100_Viewed",
                render: function(data, type, row, meta){
                    return ((row['100_Viewed']) ? row['100_Viewed'] :"0")
                }
            },
            { data: "Video_Rewind",
                render: function(data, type, row, meta){
                    return ((row.Video_Rewind) ? row.Video_Rewind :"0")
                }
            },
            { data: "Video_Full_Screen",
                render: function(data, type, row, meta){
                    return ((row.Video_Full_Screen) ? row.Video_Full_Screen :"0")
                }
            },
            { data: "Video_Mute",
                render: function(data, type, row, meta){
                    return ((row.Video_Mute) ? row.Video_Mute :"0")
                }
            },
            { data: "Video_Skip",
                render: function(data, type, row, meta){
                    return ((row.Video_Skip) ? row.Video_Skip :"0")
                }
            },
            { data: "Likes", name: "Likes",
                render: function(data, type, row, meta){
                 return ((row.Likes) ? numberFormatter.format(Number(row.Likes)) : "0")
                }
            },
            { data: "Shares", name: "Shares",
                render: function(data, type, row, meta){
                 return ((row.Shares) ? numberFormatter.format(Number(row.Shares)) : "0")
                }
            },
            { data: "Clicks_From_Shares", name: "Clicks_From_Shares",
                render: function(data, type, row, meta){
                 return numberFormatter.format(Number(row.Clicks_From_Shares))
                }
            },
            { data: "Conversions_From_Shares", name: "Conversions_From_Shares",
                render: function(data, type, row, meta){
                 return numberFormatter.format(Number(row.Conversions_From_Shares))
                }
            },
            { data: "Cpm_Spends",
                render: function(data, type, row, meta){
                 return ((row.Cpm_Spends) ? numberFormatter.format(Number(row.Cpm_Spends)) :  "0")
                }
            },
            { data: "Cpc_Spends",
                render: function(data, type, row, meta){
                 return ((row.Cpc_Spends) ? numberFormatter.format(Number(row.Cpc_Spends)) :  "0")
                }
            },
            { data: "Cpa_Spends",
                render: function(data, type, row, meta){
                 return ((row.Cpa_Spends) ? numberFormatter.format(Number(row.Cpa_Spends)) : "0")
                }
            },
            { data: "Total_Spends",
                render: function(data, type, row, meta){
                 return ((row.Total_Spends) ? numberFormatter.format(Number(row.Total_Spends)) : "0")
                }
            },
            { data: "CTR",
                render: function(data, type, row, meta) {
                    return ((row.CTR)  ? row.CTR + "%" : "0.00%")
                }
            },
            { data: "CR",
                render: function(data, type, row, meta) {
                    return ((row.CR)  ? row.CR + "%" :  "0.00%")
                }
            },
            { data: "CPM",
                render: function(data, type, row, meta) {
                    return ((row.CPM)  ? row.CPM : "0.00")
                }
            },
            { data: "CPC",
                render: function(data, type, row, meta) {
                    return ((row.CPC)  ? row.CPC : "0.00")
                }
            },
            { data: "CPA",
                render: function(data, type, row, meta) {
                    return ((row.CPA)  ? row.CPA : "0.00")
                }
            },
            { data: "Entry_Type", name: "Entry_Type",
                render: function(data, type, row, meta) {
                    return ((row.Entry_Type)  ? row.Entry_Type : "NA")
                }
            }
        ],
        fnRowCallback: function(nRow, aData) {
            return nRow;
        },
        fnDrawCallback: function( settings ) {
            $('.paginate_button').click(function(){
            $('.dataTables_scrollBody').scrollTop(0);
            })
        },
        footerCallback: function ( row, start, end, display ) {
            var row = this.api();
            var api = this.api().ajax.json().footer_total[0];
            $( row.column(20).footer() ).html(api['sumReachTotal']      ? api['sumReachTotal']    : 0);
            $( row.column(39).footer() ).html(api['bidsWonTotal']      ? api['bidsWonTotal']    : 0);
            $( row.column(40).footer() ).html(api['impressionsTotal'] ? api['impressionsTotal'] : 0);
            $( row.column(41).footer() ).html(api['pausedImpressionsTotal'] ? api['pausedImpressionsTotal'] : 0);
            $( row.column(42).footer() ).html(api['view_RateTotal'] ? (api['view_RateTotal']) : 0);
            $( row.column(43).footer() ).html(api['clicksTotal']      ? (api['clicksTotal'])      : 0);
            $( row.column(44).footer() ).html(api['conversionsTotal'] ? (api['conversionsTotal']) : 0);
            $( row.column(46).footer() ).html(api['video_start_total'] ? api['video_start_total'] : 0);
            $( row.column(47).footer() ).html(api['video_first_quartile_total'] ? api['video_first_quartile_total'] : 0);
            $( row.column(48).footer() ).html(api['video_midpoint_total'] ? api['video_midpoint_total'] : 0);
            $( row.column(49).footer() ).html(api['video_third_quartile_total'] ? api['video_third_quartile_total'] : 0);
            $( row.column(50).footer() ).html(api['video_complete_total'] ? api['video_complete_total'] : 0);
            $( row.column(51).footer() ).html(api['video_rewind_total'] ? api['video_rewind_total'] : 0);
            $( row.column(52).footer() ).html(api['video_full_screen_total'] ? api['video_full_screen_total'] : 0);
            $( row.column(53).footer() ).html(api['video_mute_total'] ? api['video_mute_total'] : 0);
            $( row.column(54).footer() ).html(api['video_skip_total'] ? api['video_skip_total'] : 0);
            $( row.column(55).footer() ).html(api['sumLikes'] ? (api['sumLikes']) : 0);
            $( row.column(56).footer() ).html(api['sumShares'] ? (api['sumShares']) : 0);
            $( row.column(57).footer() ).html(api['sumSharedClicks'] ? (api['sumSharedClicks']) : 0);
            $( row.column(58).footer() ).html(api['sumSharedConversions'] ? (api['sumSharedConversions']) : 0);
            $( row.column(59).footer() ).html(api['cpm_spends_total']     ? (api['cpm_spends_total'])     : 0);
            $( row.column(60).footer() ).html(api['cpc_spends_total']     ? (api['cpc_spends_total'])     : 0);
            $( row.column(61).footer() ).html(api['cpa_spends_total']     ? (api['cpa_spends_total'])     : 0);
            $( row.column(62).footer() ).html(api['spendsTotal']          ? (api['spendsTotal'])          : 0);
            $( row.column(63).footer() ).html(api['CTR_Total']   ?  api['CTR_Total'] +'%' : '0.00%');
            $( row.column(64).footer() ).html(api['CR_Total']    ?  api['CR_Total']  : '0.00');
            $( row.column(65).footer() ).html(api['CPM_Total']   ?  api['CPM_Total'] : '0.00');
            $( row.column(66).footer() ).html(api['CPC_Total']   ?  api['CPC_Total'] : '0.00');
            $( row.column(67).footer() ).html(api['CPA_Total']   ?  api['CPA_Total'] : '0.00');
        }
    });
        var table = $("#report-main-table").DataTable();
        if (inventory_filter != null && inventory_filter.length === 1 && inventory_filter.includes('5') ) {
            table.columns([45, 46, 47, 48, 49, 50, 51, 52, 53, 54]).visible(true);
            $('.video-footer, .video-header-col, .video-header').show();
        }else{
            $('.video-footer, .video-header-col, .video-header').hide();
            table.columns([45, 46, 47, 48, 49, 50, 51, 52, 53, 54]).visible(false);
        }
        for (let colName of [ 'Likes', 'Shares', 'Clicks_From_Shares', 'Conversions_From_Shares','Audience_Type','Placement_Id','State','City','Zipcode','Os','Make','Model','Bids_Won','Paused_Impressions','View_Rate','Entry_Type']) {
            table.column(`${colName}:name`).visible(channelType_filter != 3);
        }
        for (let colName of ['meta_campaign_type', 'meta_account_number', 'meta_campaign_id', 'meta_adset_id','Reach']) {
            table.column(`${colName}:name`).visible(channelType_filter == 3);
        }
        for (let colName of ['age', 'gender', 'country', 'region', 'Placement_Name', 'Sub_Placement_Name']) {
            table.column(`${colName}:name`).visible(false);
        }

        // Then, show columns based on your filters
        if (breakdown_filter == 2 && channelType_filter == 3) {
            for (let colName of ['age', 'gender']) {
                table.column(`${colName}:name`).visible(true);
            }
        } else if (breakdown_filter == 1 && channelType_filter == 3) {
            for (let colName of ['country', 'region']) {
                table.column(`${colName}:name`).visible(true);
            }
        } else if ((breakdown_filter == 0 && channelType_filter == 3) || true) {
            for (let colName of ['Placement_Name', 'Sub_Placement_Name']) {
                table.column(`${colName}:name`).visible(true);
            }
        }
        
    $('.advSelectedOption').each(function() {
        if($(this).is(':checked')){
            $("#report-main-table").DataTable().column( $(this).data('column') ).visible(  true );
        }else{
            $("#report-main-table").DataTable().column( $(this).data('column') ).visible(  false );
        }
    });
}

function getMetaAccountIds(){
    $.ajax({
        url: "{{url('fetchMetaAccountIds')}}",
        type: 'GET',
        dataType: 'json', // Ensures response is automatically parsed as JSON
        success: function(response) {
            // Loop through the parsed JSON object
            $('#metaAdAccountIdFilter').empty();
            $('#metaAdAccountIdFilter').append(`<option value="">Select Ad Account</option>`);
            response.forEach(function(meta_details) {
                $('#metaAdAccountIdFilter').append(
                    `<option value="${meta_details.account_id}">${meta_details.account_name}</option>`
                );
            });
        },
        error: function(xhr, status, error) {
            console.error('AJAX Error:', error);
        }
    });   
}

// Getting Report Campaign Count
function get_campaign_count(){
    $.ajax({
        "url": "{{ url('get_campaign_count') }}",
        "type": "POST",
        "data": {
                _token: "{{csrf_token()}}",
                "flag":0
            },
            "dataType": "json",
        success: function(response) {
            $("#total_count0").html(response[0].total);
            $("#active_count1").html(response[0].active);
            $("#inactive_count2").html(response[0].inactive);
        }
    });
}

    // get Make Types
    $.ajax({
        "url"      : "{{ url('getMakeTypes') }}",
        "type"     : 'GET',
        "dataType" : 'json',
        success: function(response) {
            $('#make_filter').empty();
                $.each(response, function(key, value) {
                    $("#make_filter").append(`<option data-id= "${value.id}" value="${value.make_name}">${value.make_name}</option>`);
                });
                $('#make_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
        }
    });
    getModelTypes();

// get make details 
function getModelTypes(make_id = 0){
    $.ajax({
        "url"      : "{{ url('getModelTypes') }}/" + make_id,
        "type"     : 'GET',
        "dataType" : 'json',
        success: function(response) {
            $('#model_filter').empty();
            $.each(response, function(index, res) {
                $("#model_filter").append(`<option value="${res.model_name}">${res.model_name}</option>`);
            });

            $('#model_filter').multiselect('refresh').multiselect('rebuild');
        }
    });
}

function getSubPlacement(flag){
  $.ajax({
    "url"      : "{{ url('getSubPlacementNames') }}/" + flag,
    "type"     : 'GET',
    "dataType" : 'json',
    success: function(response) {
      $("#sub_placement_filter").empty();
      var subPlacementList = '';
      response.forEach(function(data){
          subPlacementList +=`<option value="${data.id}">${data.sub_placement_name}</option>`;
      });
      $("#sub_placement_filter").html(subPlacementList);
      $('#sub_placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
    }
  });
}

// Load Inventory Types
function getPlacementTypes(campaign_type) {
  var bothCampaign = true;
  if(campaign_type){
    if(campaign_type == 1){ //for OEM Campaign
      bothCampaign = false;
      $.ajax({
        "url"      : "{{ url('get_placement_names') }}",
        "type"     : 'GET',
        "dataType" : 'json',
        success: function(response) {
          $("#placement_filter").empty()
          var placementList = '';
          response.forEach(function(data){
            if (data.website_id) {
              placementList +=`<option value="${data.id}" data-id="${data.id}" data-inventory="${data.inventory_type}">${data.placement_name}</option>`;
            }
          });
          $("#placement_filter").html(placementList);
          $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
        }
      });
     getSubPlacement(1);
    }else if(campaign_type == 2){ //for Ad Network Campaign
      bothCampaign = false;
      $("#placement_filter").empty()
      var placementList = '';
      placementList =`<option value="1">Standard Inventory</option>`;
      placementList +=`<option value="2">Expanded Inventory</option>`;
      placementList +=`<option value="3">Selected Inventory</option>`;
      $("#placement_filter").html(placementList);
      $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
     getSubPlacement(2);
    }else {
        bothCampaign = false;
        let placementList = '';
        $.ajax({
            url: "{{url('getMetaPlacements')}}",
            type: "GET",
            dataType: "json",
            success: function(data) {
                data.forEach(function(option) {
                    placementList += `<option value="${option.id}" data-id="${option.id}" data-inventory="${option.code}">${option.placement_name}</option>`;
                });                  
                $("#placement_filter").html(placementList);
                $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
                loadSubPlacements();
            }
        });
    }
  }
  if(bothCampaign){ //for both OEM and Ad Network Campaign
    getPlacementNames();
  }
}

function loadSubPlacements(data) {
    $.ajax({
        type: "POST",
        url: "{{url('getMetaSubplacementById')}}",
        data: {
            _token: "{{csrf_token()}}",
            placement_id: data
        },
        dataType: "json",
        success: function(response) {
            var subplacements = response;
            if (subplacements.length > 0) {
                var container = '';
                subplacements.forEach(function(option) {
                    container += `<option value="${option.placement_value}">${option.subplacement_name}</option>`;
                });
                $("#sub_placement_filter").html(container);
                $('#sub_placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
            }
        }
    });
}

function getCountriesData(status=1){
    $.ajax({
        url: "{{url('getCountries')}}",
        type: "GET",
        dataType: "json",
        data: {
            _token: "{{csrf_token()}}",
            "status" : status
        },
        success: function(response) {
            var country_list='';
            response.forEach(function(data){
                country_list +=`<option value="${data.country_code}">${data.country_name}</option>`;
            });
            $('#countryTypeFilter').html(country_list);
            $('#countryTypeFilter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
        }
    });
}

function getPlacementNames(){
  var channelTypeFilter = $("#channelTypeFilter").val();
  $.ajax({
    "url"      : "{{ url('get_placement_names') }}",
    "type"     : 'GET',
    "dataType" : 'json',    
    success: function(response) {
        $("#placement_filter").empty()
        var placementList = '';
        response.forEach(function(data){
          // if (data.website_id) {
            placementList +=`<option value="${data.id}" data-id="${data.id}">${data.placement_name}</option>`;
          // }
        });
        placementList +=`<option value="1">Standard Inventory</option>`;
        placementList +=`<option value="2">Expanded Inventory</option>`;
        placementList +=`<option value="3">Selected Inventory</option>`;
        $("#placement_filter").html(placementList);
        $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
        if(channelTypeFilter){
          getSubPlacement(channelTypeFilter[0]);
        }else{
          getSubPlacement(0);
        } 
    }
  });
}
// Load Sub-Placement Types
function getSubPlacementTypes(id,inventory_type) {
    let channel_type_val = ($('#oemadToggle-2').is(":checked") ? '3' : $("#channelTypeFilter").val());
    if(channel_type_val == 3) {
        $.ajax({
            type: "POST",
            url: "{{url('getMetaSubplacementById')}}",
            data: {
                _token: "{{csrf_token()}}",
                id: id
            },
            dataType: "json",
            success: function(response) {
                $("#sub_placement_filter").empty();
                var subplacements = response;
                if (subplacements.length > 0) {
                    var container = '';
                    subplacements.forEach(function(option) {
                        container += `<option value="${option.placement_value}">${option.subplacement_name}</option>`;
                    });
                    $("#sub_placement_filter").html(container);
                    $('#sub_placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
                }
            }
        });
    } else {
        $.ajax({
            "url"      : "{{ url('getSubplacementById') }}",
            "type"     : 'POST',
            "dataType" : 'json',    
            "data" :{
                        _token: "{{csrf_token()}}",
                        "id" : id, 
                        "inventory_type" : inventory_type
                    },
            success: function(response) {
            $("#sub_placement_filter").empty()
            var subPlacementList = '';
            response.forEach(function(data){
                subPlacementList +=`<option value="${data.id}">${data.sub_placement_name}</option>`;
            });
            $("#sub_placement_filter").html(subPlacementList);
            $('#sub_placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
            }
        });
    }
}

function getPlacementByOEMId(oem_id){
  $.ajax({
    "url"      : "{{ url('getPlacementsByOEMId') }}",
    "type"     : 'POST',
    "dataType" : 'json',
    "data": {
                _token: "{{csrf_token()}}",
                "oem_id" : oem_id,
                "flag":1
            },    
    success: function(response) {
      $("#placement_filter").empty();
      var subPlacementList = '';
      response.forEach(function(data){
          subPlacementList +=`<option value="${data.id}">${data.placement_name}</option>`;
      });
      $("#placement_filter").html(subPlacementList);
      $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
      getSubPlacementByOEMId(oem_id);
    }
  });
}

function getSubPlacementByOEMId(oem_id){
  $.ajax({
    "url"      : "{{ url('getPlacementsByOEMId') }}",
    "type"     : 'POST',
    "dataType" : 'json',    
    "data": {
                _token: "{{csrf_token()}}",
                "oem_id" : oem_id,
                "flag":0
            },    
    success: function(response) {
      $("#sub_placement_filter").empty();
      var subPlacementList = '';
      response.forEach(function(data){
          subPlacementList +=`<option value="${data.id}">${data.placement_name}</option>`;
      });
      $("#sub_placement_filter").html(subPlacementList);
      $('#sub_placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
    }
  });
}

$('#channelTypeFilter').on('change', function() {
    var campaign_type     = $(this).val();
    $('#oemIdFilter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
    $('#inventory_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
    $('.oem_div').hide();
    $('.inv_div').show();

    if(campaign_type){
        if(campaign_type.length > 1){
            $('.inv_div').show();
            $('.oem_div').hide();
        }else{
            if(campaign_type[0] == 1){
                $('.inv_div').hide();
                $('.oem_div').show();
            }else if(campaign_type[0] == 2){
                $('.inv_div').show();
                $('.oem_div').hide();
            }
        }
    }else{
        $('.inv_div').show();
        $('.oem_div').hide();
    }
    $(".sub_placement_div, .placement_div").show()
    getPlacementTypes(campaign_type);
});

$('#oemIdFilter').on('change',function() {
    var oem_id     = $(this).val();
    getPlacementByOEMId(oem_id);
});

//Handling placement dropdown display based on Inventory Changes
$('#inventory_filter').on('change', function() {
    var campaign_type = $("#channelTypeFilter").val();
    var selectedInventory = $(this).val();
    var placementList = '';
    $('#placement_filter, #sub_placement_filter').empty();
    if(selectedInventory.length > 0){
        (selectedInventory.includes('1') || selectedInventory.includes('5') || selectedInventory.includes('6') || selectedInventory.includes('7')) ? $(".sub_placement_div, .placement_div").show() : $(".sub_placement_div, .placement_div").hide();
        if (selectedInventory.length === 0 || 
            (selectedInventory.includes('1') && selectedInventory.includes('5') && selectedInventory.includes('6') && selectedInventory.includes('7'))) {
            placementList += `<option value="1">Standard Inventory</option>`;
            placementList += `<option value="2">Expanded Inventory</option>`;
            placementList += `<option value="3">Selected Inventory</option>`;
        } else {
            if (selectedInventory.includes('5') || selectedInventory.includes('6') || selectedInventory.includes('1')) {
                placementList += `<option value="1">Standard Inventory</option>`;
            }
            if (selectedInventory.includes('6') || selectedInventory.includes('1') || selectedInventory.includes('7')) {
                placementList += `<option value="2">Expanded Inventory</option>`;
                placementList += `<option value="3">Selected Inventory</option>`;
            }
        }
        $("#placement_filter").html(placementList);
        $('#placement_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
        getSubPlacement(2);
    }else {
        $(".sub_placement_div, .placement_div").show()
        getPlacementTypes(2);
    }
});

$("body").on("change", "#placement_filter", function() {
    var inventoryTypeFilter  = $('#inventory_filter').val();
    var placementValue = $(this).val();// Ensure placementValue is an array
    getSubPlacementTypes(placementValue,inventoryTypeFilter);
    (placementValue[0] == '1' || placementValue[0] == '3') && !placementValue.includes('2') ? $('.sub_placement_div').hide() :  $('.sub_placement_div').show();
    if(placementValue == ''){
        $('#sub_placement_filter option').slice(1).each(function() {
            var optionInventory = $(this).attr('data-inventory-type');
            if (optionInventory === '3') {
                $(this).show();
            }else {
                $(this).hide();
            }
        });
    }
});

// Get All OEM Ids
function getOEMIds() {
    $.ajax({
        url: "{{ url('getAllOEMIds') }}",
        type: "GET",
        dataType: "json",
        success: function(response) {
            $("#oemIdFilter").empty();
            var oemList = '';
            response.forEach(function(data){
                let oem_name = data.oem_name ? ' ('+data.oem_name+')' : '';
                oemList +="<option value='"+data.id+"'>OEM - "+data.id + oem_name+"</option>";
            });
            $("#oemIdFilter").html(oemList);
            $('#oemIdFilter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
        }
    });
}

function getInventories (){
    var website_id = $('.campaignId-slot-WebsiteID').text();
    var campaignId = $('#blockedCampaignId').val();
    $.ajax({
        url      : "{{ url('get_inventory_types') }}",
        type     : 'GET',
        dataType : 'json',
        success: function(data) {
            $('#inventory_filter').empty();
            $.each(data, function(key, value) {
            if(value.id != 8 && value.id != 9){
                $('#inventory_filter').append($('<option>', {
                    value : value.id,
                    text  : value.inventory_name
                }));
            }
            });
            $('#inventory_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
        }
    });
}

function validateInput(event) {
    var inputValue = event.key;
    if (inputValue === '0' && event.target.value === '') {
        // If '0' is the first character and the input is empty, prevent entering '0'
        event.preventDefault();
        return false;
    }
    return event.charCode >= 48 && event.charCode <= 57; // Allow only digits (0-9)
}



$("body").on("change", ".ToggleActiveFilter", function(){
    oemAdNetworkMetaToggle();
    breakdownHandler();
    $("#runReport").trigger("click");
});

function oemAdNetworkMetaToggle(){
    var campaign_type = ($('#oemadToggle-2').is(":checked") ? '3' : $("#channelTypeFilter").val());
    if(campaign_type == 3){
        $('.channel_div, .city_div').hide();
        $('.meta_divs').show();
    }else {
        $('.channel_div, .city_div').show();
        $('.meta_divs').hide();
    }
    $('#placementSearch').val("");
    $('#countryTypeFilter').val("");
    $('#native_typeFilter').val('');
    $('.native_ads_type').hide();
    $('#oemIdFilter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
    $('#inventory_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
    $('#placementSearch, #subPlacementSearch').empty();
    $('#placementSearch').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
    $('#subPlacementSearch').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
    // var is_oem_dashboard  = sessionVar == 'nativeDataTable' || sessionVar == 'crtvsummary' || sessionVar == 'groupWiseReport' || sessionVar == 'rptsummary' || sessionVar == 'publisher-report' ? true : false;
    if(campaign_type){
        if(campaign_type.length > 1){
            $('.inv_div').show();
            $('.oem_div').show();
        }else{
            if(campaign_type[0] == 1){
                $('.inv_div').hide();
                $('.meta_divs, .meta_cam_ad_divs, .meta_creative_divs').hide();
                $('.oem_div').show();
            }else if(campaign_type[0] == 2){
                getInventoryTypes();
                $('.inv_div').show();
                $('.meta_divs, .meta_cam_ad_divs, .meta_creative_divs').hide();
                $('.oem_div').hide();
            }else if(campaign_type[0] == 3){
                getInventoryTypes(3);
                getMetaAccountIds();
                $('.inv_div, .meta_divs, .brand_inv_div').show();
            }
        }
    }else{
        $('.inv_div').show();
        $('.oem_div, .meta_divs').hide();
        getInventoryTypes();
    }
    if(campaign_type==1 || campaign_type==2 || campaign_type==3){
        $("#channelTypeFilter").each(function() {
            this.style.setProperty("background-color", "#DDE6EE", "important");
            this.style.setProperty("color", "#0A78BE", "important");
        });
    }
    else{
        $("#channelTypeFilter").each(function() {
            this.style.setProperty("background-color", "#fff", "important");
            this.style.setProperty("color", "#858585", "important");
        }); 
    }
    $(".sub_placement_div, .placement_div").show();
    getPlacementTypes(campaign_type);
}

//Load inventory types
function getInventoryTypes() {
    var channel = ($('#oemadToggle-2').is(":checked") ? '3' : $("#channelTypeFilter").val());
    $.ajax({
        url: "{{ url('get_inventory_types') }}",
        type: "GET",
        dataType: "json",
        success: function(response) {
            $('#inventory_filter').empty();
            var inventoryList = '';
            response.forEach(function(data){
                if(channel == 3 && (data.id == 5 || data.id == 6)){
                    inventoryList +=`<option value="${data.id}">${data.inventory_name}</option>`;
                }
                else if (channel != 3 && data.id != 3 && data.id != 4) {
                    inventoryList +=`<option value="${data.id}">${data.inventory_name}</option>`;
                }
            });
            $("#inventory_filter").html(inventoryList);
            $('#inventory_filter').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
        }
    });
}
$("body").on("change", "#breakdown_filter", function(){
    breakdownHandler();
});

function breakdownHandler(){
    var breakdownVal = $('#breakdown_filter').val();

    $('#deviceFilter, #state_filter, #placement_filter, #sub_placement_filter, #countryTypeFilter, #gender_filter, #age_filter').val("");
    $('#placement_filter, #sub_placement_filter').prop('selectedIndex', 0);
    $('#placement_filter, #sub_placement_filter, #deviceFilter, #countryTypeFilter').val("").multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
    $('#stateCheckbox, #cityCheckbox, #deviceCheckbox, #selectAllCheckbox').prop('checked', false);
    $('#breakdown_filter')[0].style.setProperty("background-color", "#DDE6EE", "important");
    $('#breakdown_filter')[0].style.setProperty("color", "#0A78BE", "important");

    var campaign_type = ($('#oemadToggle-2').is(":checked") ? '3' : $("#channelTypeFilter").val());
    if(campaign_type == 3){
        if (breakdownVal == 0) {
            $(".placement_div, .sub_placement_div, .device_creative").show();
            $(".state_div, .country_div, .ageVal, .genderVal").hide();
            $(".state_city_div").eq(1).hide();

        } else if (breakdownVal == 1) {
            $(".state_div, .country_div").show();
            $(".state_div").eq(1).hide();
            $(".placement_div, .sub_placement_div, .device_creative").hide();
            $(".ageVal, .genderVal").hide();

        } else{
            $(".state_div, .country_div").hide();
            $(".state_div").eq(1).hide();
            $(".ageVal, .genderVal").show();
            $(".device_creative, .placement_div, .sub_placement_div").hide();
        }
    } else {
        $(".ageVal, .genderVal, .country_div").hide();
        $(".state_div").show();
    }
}
</script>
@endsection