@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    :-47px;
        margin-bottom : 40px;
    }
    #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;
    }
    .advFeedSubReport{
        height       : 29px;
        float        : right;
        margin-right : 0px;
        margin-left  : 12px;
    }
    .clearFilterMarBottom{
        margin-bottom: -4rem !important;
    }
    .max_wid{
        max-width   : 200px !important;
        margin-left : 12px;
    }
    .exportFeedSubReport{
        height: 29px;
    }
</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.sub_report')</div>
    <div class="form-group flex m-auto">
        <!-- 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_wid">
        <button type="submit" class="advFeedSubReport btn excel-btn btn-sm border-0 border-radius-0 ">Run Report</button>
        @can('hasExcelPermission')
                <button type="submit" class="exportFeedSubReport 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">
    <form>
    <div class="filter-table-inline pl-0 d-flex flex-wrap">
        <div class="form-group col-md-2 pl-0">
            <label for="period_filter">Choose Time Period</label>
            <select id="period_filter" class="form-control">
                <option value='' disabled>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 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 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">
            <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">
            <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">
            <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">
            <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">
            <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">
           <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 pl-0">
            <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 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 pl-0 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">
            <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">
            <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">
            <label for="">Make</label>
            <select class="form-control" id="make_filter" name="make_filter[]" multiple ></select>
        </div>

        <div class="form-group col-md-2 pl-0">
            <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 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 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">
            <label>Optional Filter</label>
            <label class="checkBoxLabel"><input type="checkbox" class="advSelectedOption" data-column="16" data-column-name="current_hour"> Hour-Wise</label>
        </div>
        
    </div>
    </form>
    <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">Account ID</th>
                    <th rowspan="2">Client</th>
                    <th rowspan="2">Brand Name</th>
                    <th rowspan="2">On-Boarded Date</th>
                    <th rowspan="2">Impression Date</th>
                    <th rowspan="2">Hour</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">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 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">

$(document).ready(function() {
    var campaign_state = 0;
    var inventory_filter = oemIdFilter = channelTypeFilter = '';
    var typingTimer;
    /* call function while DOM get ready to get all records.*/
    feedSubReportList();
    get_campaign_count();
    getPlacementNames();
    getInventories();
    getOEMIds();
    $('.inv_div').show();
    $('.oem_div').hide();

    //all records displaying here
    function feedSubReportList(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,sub_placement=null,make=null,model=null,state=null,city=null,oemId_filter=null,channelType_filter=null) {
        const numberFormatter = Intl.NumberFormat('en-IN');
        $('.exportFeedSubReport').removeAttr('disabled');
        $('.exportFeedSubReport').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('getFeedSubReport') }}",           
                "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,
                        "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": sub_placement,
                        "make"             : make,
                        "model"            : model,
                        "state"            : state,
                        "city"             : city,
                        "oemId_filter"     : oemId_filter,
                        "channelType_filter": channelType_filter
                    },
                "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",
                    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",
                    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');
                        return data;
                    }
                },
                { 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",
                    render: function(data, type, row, meta){
                        return (row.Placement_Name ? row.Placement_Name : '')
                    }
                },
                { data: "Sub_Placement_Name",
                    render: function(data, type, row, meta){
                        return (row.Sub_Placement_Name ? row.Sub_Placement_Name : '')
                    }
                },
                { 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: "Brandname",
                    render: function(data, type, row, meta){
                     return ((row.Brandname)  ? row.Brandname :  "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: "State",
                    render: function(data, type, row, meta){
                     return ((row.State)  ? row.State :  "NA")
                    }
                },
                { data: "City",
                    render: function(data, type, row, meta){
                     return ((row.City)  ? row.City :  "NA")
                    }
                },
                { data: "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",
                    render: function(data, type, row, meta){
                     return ((row.Os)  ? row.Os :  "NA")
                    }
                },
                { data: "Make",
                    render: function(data, type, row, meta){
                        return ((row.Make)  ? row.Make :  "Others")
                    }
                },
                { data: "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(row.Bidprice) : "0")
                    }
                },
                { data: "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(row.Impressions) : "0")
                    }
                },
                { data: "Paused_Impressions",
                    render: function(data, type, row, meta){
                     return ((row.Paused_Impressions) ? numberFormatter.format(row.Paused_Impressions) : "0")
                    }
                },
                { data: "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(row.Clicks) : "0")
                    }
                },
                { data: "Conversions",
                    render: function(data, type, row, meta){
                     return ((row.Conversions) ? numberFormatter.format(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",
                    render: function(data, type, row, meta){
                     return ((row.Likes) ? numberFormatter.format(row.Likes) : "0")
                    }
                },
                { data: "Shares",
                    render: function(data, type, row, meta){
                     return ((row.Shares) ? numberFormatter.format(row.Shares) : "0")
                    }
                },
                { data: "Clicks_From_Shares",
                    render: function(data, type, row, meta){
                     return numberFormatter.format(row.Clicks_From_Shares)
                    }
                },
                { data: "Conversions_From_Shares",
                    render: function(data, type, row, meta){
                     return numberFormatter.format(row.Conversions_From_Shares)
                    }
                },
                { data: "Cpm_Spends",
                    render: function(data, type, row, meta){
                     return ((row.Cpm_Spends) ? numberFormatter.format(row.Cpm_Spends) :  "0")
                    }
                },
                { data: "Cpc_Spends",
                    render: function(data, type, row, meta){
                     return ((row.Cpc_Spends) ? numberFormatter.format(row.Cpc_Spends) :  "0")
                    }
                },
                { data: "Cpa_Spends",
                    render: function(data, type, row, meta){
                     return ((row.Cpa_Spends) ? numberFormatter.format(row.Cpa_Spends) :  "0")
                    }
                },
                { data: "Total_Spends",
                    render: function(data, type, row, meta){
                     return ((row.Total_Spends) ? numberFormatter.format(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",
                    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(25).footer() ).html(api['bidsWonTotal'] ? api['bidsWonTotal'] : 0);
                $( row.column(26).footer() ).html(api['impressionsTotal'] ? api['impressionsTotal'] : 0);
                $( row.column(27).footer() ).html(api['pausedImpressionsTotal'] ? api['pausedImpressionsTotal'] : 0);
                $( row.column(28).footer() ).html(api['view_RateTotal'] ? api['view_RateTotal'] : 0);
                $( row.column(29).footer() ).html(api['clicksTotal'] ? api['clicksTotal'] : 0);
                $( row.column(30).footer() ).html(api['conversionsTotal'] ? api['conversionsTotal'] : 0);
                $( row.column(32).footer() ).html(api['video_start_total'] ? api['video_start_total'] : 0);
                $( row.column(33).footer() ).html(api['video_first_quartile_total'] ? api['video_first_quartile_total'] : 0);
                $( row.column(34).footer() ).html(api['video_midpoint_total'] ? api['video_midpoint_total'] : 0);
                $( row.column(35).footer() ).html(api['video_third_quartile_total'] ? api['video_third_quartile_total'] : 0);
                $( row.column(36).footer() ).html(api['video_complete_total'] ? api['video_complete_total'] : 0);
                $( row.column(37).footer() ).html(api['video_rewind_total'] ? api['video_rewind_total'] : 0);
                $( row.column(38).footer() ).html(api['video_full_screen_total'] ? api['video_full_screen_total'] : 0);
                $( row.column(39).footer() ).html(api['video_mute_total'] ? api['video_mute_total'] : 0);
                $( row.column(40).footer() ).html(api['video_skip_total'] ? api['video_skip_total'] : 0);
                $( row.column(41).footer() ).html(api['sumLikes'] ? api['sumLikes'] : 0);
                $( row.column(42).footer() ).html(api['sumShares'] ? api['sumShares'] : 0);
                $( row.column(43).footer() ).html(api['sumSharedClicks'] ? api['sumSharedClicks'] : 0);
                $( row.column(44).footer() ).html(api['sumSharedConversions'] ? api['sumSharedConversions'] : 0);
                $( row.column(45).footer() ).html(api['cpm_spends_total'] ? api['cpm_spends_total'] : 0);
                $( row.column(46).footer() ).html(api['cpc_spends_total'] ? api['cpc_spends_total'] : 0);
                $( row.column(47).footer() ).html(api['cpa_spends_total'] ? api['cpa_spends_total'] : 0);
                $( row.column(48).footer() ).html(api['spendsTotal'] ? api['spendsTotal'] : 0);
                $( row.column(49).footer() ).html(api['CTR_Total'] ? api['CTR_Total'] + '%' : '0.00%');
                $( row.column(50).footer() ).html(api['CR_Total'] ? api['CR_Total'] : '0.00');
                $( row.column(51).footer() ).html(api['CPM_Total'] ? api['CPM_Total'] : '0.00');
                $( row.column(52).footer() ).html(api['CPC_Total'] ? api['CPC_Total'] : '0.00');
                $( row.column(53).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([31, 32, 33, 34, 35, 36, 37, 38, 39, 40]).visible(true);
                $('.video-footer, .video-header-col, .video-header').show();
            }else{
                table.columns([31, 32, 33, 34, 35, 36, 37, 38, 39, 40]).visible(false);
                $('.video-footer, .video-header-col, .video-header').hide();
            }
        $('.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 );
                }
        });
    }

    //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();
        inventory_filter = $('#inventory_filter').val();
        oemIdFilter = $('#oemIdFilter').val();
        channelTypeFilter = $('#channelTypeFilter').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;
        var subplacement_name= $('#sub_placement_filter').val();
        var make             = $('#make_filter').val();
        var model            = $('#model_filter').val();
        var state            = $('#state_filter').val();
        var city             = $('#city_filter').val();
        var placement_name   = $('#placement_filter').val();
        feedSubReportList(account_id,pencil_id,campaign_id,campaign_state,inventory_filter,client_id,creative_id,audience_type,publisher_id,optionalFilter,optionalFilter,placement_name,subplacement_name,make,model,state,city,oemIdFilter,channelTypeFilter);
        $('.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('');
        $('.advSelectedOption').prop('checked', false);
        $('#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 option:first').prop('selected',true);
        $("#inventory_filter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $("#oemIdFilter").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");
        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');
        feedSubReportList();
        getPlacementNames();
    });

     /*return start and end date for  excel export*/
    $(document).on("click",".exportFeedSubReport",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 channelType_filter= $('#channelTypeFilter').val();
        var oemId_filter      = $('#oemIdFilter').val();
        var inventory_filter  = $('#inventory_filter').val();
        var audience_type     = $('#audience_type').val();
        var creative_id       = $('#creative_id').val();
        let page_name         = 'Sub ' + $("#sub_report_dropdown option:selected").text();
        var optionalFilter    = $('.advSelectedOption:checked').length;
        var state             = $('#state_filter').val();
        var make              = $('#make_filter').val();
        var model             = $('#model_filter').val();
        var city              = $('#city_filter').val();
        var placement_name    = $('#placement_filter').val();
        var subplacement_name = $('#sub_placement_filter').val();
        var publisher_id      = $("#publisher_id").val();
        var client_id         = $('#client_filter').val();
        var search            = $('#report-main-table_filter input[type="search"]').val();

        $('.exportFeedSubReport').attr('disabled','disabled');
        $('.exportFeedSubReport').addClass('bg-secondary');
        $.ajax({
            "url"  : "{{ url('exportFeedSubReport') }}",
            "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,
                inventory_filter : inventory_filter,
                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,
                publisher_id     : publisher_id,
                client_id        : client_id,
                oemId_filter     : oemId_filter,
                channelType_filter: channelType_filter
            },
            "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');
                }
            }
        });
    });

    $(document).on("click",".advFeedSubReport",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 client_id         = $('#client_filter').val();
        var inventory_filter  = $('#inventory_filter').val();
        var oemIdFilter       = $('#oemIdFilter').val();
        var channelTypeFilter = $('#channelTypeFilter').val();
        var audience_type     = $('#audience_type').val();
        var publisher_id      = $("#publisher_id").val();
        var creative_id       = $('#creative_id').val();
        let page_name         = $("#sub_report_dropdown option:selected").text();
        var optionalFilter    = $('.advSelectedOption:checked').length;
        var state             = $('#state_filter').val();
        var make              = $('#make_filter').val();
        var model             = $('#model_filter').val();
        var city              = $('#city_filter').val();
        var placement_name    = $('#placement_filter').val();
        var subplacement_name = $('#sub_placement_filter').val();
        feedSubReportList(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, oemIdFilter, channelTypeFilter);
        // 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());
    });

    //     /*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 make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedSubReportList(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 make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedSubReportList(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);
    // });

    // /*Client filter on change*/
    // $("body").on("change", "#client_filter", function() {
    //     var client_id        = $(this).val();
    //     var account_id       = $('#account_id').val();
    //     var pencil_id        = $('#pencil_id').val();
    //     var campaign_id      = $('#campaign_id').val();
    //     var creative_id      = $('#creative_id').val();
    //     var audience_type    = $('#audience_type').val();
    //     var publisher_id     = $("#publisher_id").val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var optionalFilter   = $('.advSelectedOption:checked').length;
    //     var subplacement_name= $('#sub_placement_filter').val();
    //     var make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     feedSubReportList(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);
    // });
    // /*  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 make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedSubReportList(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 make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedSubReportList(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 make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedSubReportList(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 make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     feedSubReportList(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 make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     feedSubReportList(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 make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     feedSubReportList(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);
    //     });

    //     $("#state_filter").keyup(function(){
    //     var state            = $(this).val();
    //     var client_id        = $('#client_filter').val();
    //     var account_id       = $('#account_id').val();
    //     var pencil_id        = $('#pencil_id').val();
    //     var campaign_id      = $('#campaign_id').val();
    //     var creative_id      = $('#creative_id').val();
    //     var audience_type    = $('#audience_type').val();
    //     var publisher_id     = $("#publisher_id").val();
    //     var inventory_filter = $('#inventory_filter').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();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedSubReportList(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);
    // });

    // $("#city_filter").keyup(function(){
    //     var city             = $(this).val();
    //     var account_id       = $('#account_id').val();
    //     var client_id        = $('#client_filter').val();
    //     var pencil_id        = $('#pencil_id').val();
    //     var campaign_id      = $('#campaign_id').val();
    //     var creative_id      = $('#creative_id').val();
    //     var audience_type    = $('#audience_type').val();
    //     var publisher_id     = $("#publisher_id").val();
    //     var inventory_filter = $('#inventory_filter').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 state            = $('#state_filter').val();
    //     clearTimeout(typingTimer);
    //     typingTimer = setTimeout(function() {
    //         feedSubReportList(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);
    // });

    /*Placement filter on change*/
    $("body").on("change", "#placement_filter", function() {
        var placement_name   = $(this).val();
        var account_id       = $('#account_id').val();
        var pencil_id        = $('#pencil_id').val();
        var campaign_id      = $('#campaign_id').val();
        var creative_id      = $('#creative_id').val();
        var audience_type    = $('#audience_type').val();
        var publisher_id     = $("#publisher_id").val();
        var client_id        = $('#client_filter').val();
        var inventory_filter = $('#inventory_filter').val();
        var optionalFilter   = $('.advSelectedOption:checked').length;
        var make             = $('#make_filter').val();
        var model            = $('#model_filter').val();
        var state            = $('#state_filter').val();
        var city             = $('#city_filter').val();
        var subplacement_name= $('#sub_placement_filter').val();
        placement_name       = placement_name.length ? placement_name : 0;
        // feedSubReportList(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);
    });

    // /*Sub Placement filter on change*/
    // $("body").on("change", "#sub_placement_filter", function() {
    //     var subplacement_name= $(this).val();
    //     var account_id       = $('#account_id').val();
    //     var pencil_id        = $('#pencil_id').val();
    //     var campaign_id      = $('#campaign_id').val();
    //     var creative_id      = $('#creative_id').val();
    //     var audience_type    = $('#audience_type').val();
    //     var publisher_id     = $("#publisher_id").val();
    //     var inventory_filter = $('#inventory_filter').val();
    //     var optionalFilter   = $('.advSelectedOption:checked').length;
    //     var placement_name   = $('#placement_filter').val();
    //     var make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var client_id        = $('#client_filter').val();
    //     feedSubReportList(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);
    // });

    /*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 make             = $(this).val();
        var account_id       = $('#account_id').val();
        var pencil_id        = $('#pencil_id').val();
        var campaign_id      = $('#campaign_id').val();
        var creative_id      = $('#creative_id').val();
        var audience_type    = $('#audience_type').val();
        var publisher_id     = $("#publisher_id").val();
        var inventory_filter = $('#inventory_filter').val();
        var optionalFilter   = $('.advSelectedOption:checked').length;
        var subplacement_name= $('#sub_placement_filter').val();
        var placement_name   = $('#placement_filter').val();
        var model            = $('#model_filter').val();
        var state            = $('#state_filter').val();
        var city             = $('#city_filter').val();
        var client_id        = $('#client_filter').val();
        getModelTypes(makeId);
        // feedSubReportList(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);
    });

    // /*Model filter on change*/
    // $("body").on("change", "#model_filter", function() {
    //     var model            = $(this).val();
    //     var account_id       = $('#account_id').val();
    //     var pencil_id        = $('#pencil_id').val();
    //     var campaign_id      = $('#campaign_id').val();
    //     var creative_id      = $('#creative_id').val();
    //     var audience_type    = $('#audience_type').val();
    //     var publisher_id     = $("#publisher_id").val();
    //     var inventory_filter = $('#inventory_filter').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 state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var client_id        = $('#client_filter').val();
    //     feedSubReportList(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 make             = $('#make_filter').val();
            var model            = $('#model_filter').val();
            var state            = $('#state_filter').val();
            var city             = $('#city_filter').val();
            var placement_name   = $('#placement_filter').val();
            var subplacement_name= $('#sub_placement_filter').val();
            // feedSubReportList(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 make             = $('#make_filter').val();
            var model            = $('#model_filter').val();
            var state            = $('#state_filter').val();
            var city             = $('#city_filter').val();
            var placement_name   = $('#placement_filter').val();
            var subplacement_name= $('#sub_placement_filter').val();
            // feedSubReportList(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 make             = $('#make_filter').val();
            var model            = $('#model_filter').val();
            var state            = $('#state_filter').val();
            var city             = $('#city_filter').val();
            var placement_name   = $('#placement_filter').val();
            var subplacement_name= $('#sub_placement_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);
                // feedSubReportList(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);
                // feedSubReportList(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());
                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
                // feedSubReportList(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);
                // feedSubReportList(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);
                // feedSubReportList(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());
                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
                // feedSubReportList(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);
                // feedSubReportList(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);
            }
        }
        });

    // 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 make             = $('#make_filter').val();
    //     var model            = $('#model_filter').val();
    //     var state            = $('#state_filter').val();
    //     var city             = $('#city_filter').val();
    //     var placement_name   = $('#placement_filter').val();
    //     var subplacement_name= $('#sub_placement_filter').val();
    //     feedSubReportList(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());
    // });

});



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

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);
    }
  }
  if(bothCampaign){ //for both OEM and Ad Network Campaign
    getPlacementNames();
  }
}

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) {
  $.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');
    }
  });
}
// 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 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');
        }
    });
}
// 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');
        }
    });
}
$('#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();
            }
        });
    }
});

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)
}
</script>
@endsection