@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></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;
}

.col-md-2 {
    max-width: 172px !important;
}
.exportFeedCampaignReport{
    height: 29px;
}
.max_width{
    padding-bottom: 16px;
    display: flex;
    align-items: end;
    justify-content: end;
}
.advCampaignReport{
    height       : 29px;
    float        : right;
    margin-right : 10px;
    margin-left  : 12px;
}
.modal-width{
    max-width: 1000px !important;
}

.button-style{
    margin-left: 10px;
    border-radius: 5px;
    border: 1px solid black;
    background-color: grey;
    color: white;
    padding: 4px 8px;
}
</style>
<div class="container-fluid">
    <div class="card">
        <div class="row ml-1 mr-0 mt-3 mb-n4">
            <div class="form-group col-md-3">@include('whistle_feed.menu_dropdown.opsLogs')</div>
            <div class="col-md-6">
            </div>
            <div class="col-md-3 max_width">
                <button type="submit" class="advCampaignReport btn excel-btn btn-sm border-0 border-radius-0 ">Run Report</button>
            @can('hasExcelPermission')
                    <button type="submit" class="exportFeedCampaignReport btn excel-btn btn-sm border-0 border-radius-0"> <i class="fa fa-download"> </i> &nbsp; Export</button>
            @endif
            </div>
        </div>
        <div class="card-body table-responsive">
        <div>
            <table class="table-bordered table-hover text-center" id="feed-campaign-report-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>IAB Code</th>
                        <th>Industry Name</th>
                        <th>Brand Name</th>
                        <th>Campaign Group</th>
                        <th>Campaign Sub-group</th>
                        <th>Campaign Website</th>
                        <th>Campaign Package</th>
                        <th>Objectives</th>
                        <th>Meta Campaign Name</th>
                        <th>Payable Event</th>
                        <th>Bidprice</th>
                        <th>Campaign Type</th>
                        <th>Channel Type</th>
                        <th>Inventory Type</th>
                        <th>Sub Inventory</th>
                        <th>Audience Type</th>
                        <th>Audience Category</th>
                        <th>Daycapping</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Clicks</th>
                        <th>Unique Clicks</th>
                        <th>Impressions</th>
                        <th>Conversions</th>
                        <th>CPC</th>
                        <th>CTR</th>
                        <th>RCPA</th>
                        <th>CPA</th>
                        <th>Spends</th>
                        <th>Campaign Status</th>
                        <th>Paused At</th>
                        <th>Approval Status</th>
                        <th>Approved By</th>
                        <th>Approver Name</th>
                        <th>Approved Date</th>
                        <th>Rejected Reason</th>
                        <th>Daily Campaign Budget Tracker</th>
                        <th>Fraud Clicks</th>
                        <th>Deleted</th>
                        <th>Blocked Websites Status</th>
                        <th>Creative Count</th>
                        <th>OEM Id</th>
                        <th>Autob Id</th>
                        <th>Maxthreshold</th>
                        <th>Is Gaid</th>
                        <th>Audience Group Id</th>
                        <th>City Tier</th>
                        <th>Meta Campaign Id</th>
                        <th>Meta Adset Id</th>
                        <th>Meta Performance Goal</th>
                        <th>Meta Account Number</th>
                        <th>Meta Pixel Id</th>
                        <th>Meta Campaign Type</th>
                        <th>Meta Billing Event</th>
                        <th>Gender</th>
                        <th>Min Age</th>
                        <th>Max Age</th>
                        <th>Meta Device Target</th>
                        <th>Meta Custom Audiences</th>
                        <th>Action</th>
                     </tr>
                </thead>
            </table>
        </div>

        <!-- Modal for Launch filter selection  -->
        <div class="modal fade" tabindex="2" role="dialog" id="edit-data"  data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title">Campaign Report Data</h5>
                    <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
        
                    <div style="display: none" id="campaign_data_error_div">
                        <button type="button" class="close" data-dismiss="alert">×</button>   
                        <strong id="campaign_data_error_message"></strong>
                    </div>
        
                    <div class="modal-body">
        
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal for Creative filter selection  -->
        <div class="modal fade" tabindex="2" role="dialog" id="edit-data-creatives"  data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog modal-width" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                    <h5 class="modal-title">Campaign Report Data</h5>
                    <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    </div>
        
                    <div style="display: none" id="campaign_data_error_div">
                        <button type="button" class="close" data-dismiss="alert">×</button>   
                        <strong id="campaign_data_error_message"></strong>
                    </div>
        
                    <div class="modal-body1">
                        <table class="table-bordered table-hover text-center" id="creatives-filter-table">
                            <thead>
                                <tr>
                                    <th>Sl.No</th>
                                    <th>Preview</th>
                                    <th>Creative Name</th>
                                    <th>Language</th>
                                    <th>Headline</th>
                                    <th>Subtext</th>
                                    <th>Background Color</th>
                                    <th>Tracker</th>
                                    <th>VTA</th>
                                    <th>Final URL</th>
                                    <th>Landing URL</th>
                                    <th>Creative Status</th>
                                    <th>Paused At</th>
                                    <th>Approval Status</th>
                                    <th>Approved By</th>
                                    <th>Approver Name</th>
                                    <th>Approved Date</th>
                                    <th>Rejected Reason</th>
                                    <th>Clicks</th>
                                    <th>Unique Clicks</th>
                                    <th>Impressions</th>
                                    <th>Conversions</th>
                                    <th>Spends</th>
                                    <th>Created On</th>
                                    <th>Updated On</th>
                                    <th>Fraud Clicks</th>
                                    <th>CTA</th>
                                    <th>Deleted</th>
                                    <th>Disclaimer</th>
                                    <th>Likes</th>
                                    <th>Shares</th>
                                    <th>Shared Clicks</th>
                                    <th>Shared Conversions</th>
                                    <th>Sharable Content</th>
                                    <th>Banner Dimension</th>
                                    <th>Height</th>
                                    <th>Width</th>
                                    <th>Bitrate</th>
                                    <th>Resolution</th>
                                    <th>Duration</th>
                                    <th>Icon URL</th>
                                    <th>Icon Expiry</th>
                                    <th>Presigned Icon URL</th>
                                    <th>Meta Ads ID</th>
                                    <th>Meta Creative ID</th>
                                    <th>Meta Page ID</th>
                                 </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}" />
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<script type="application/javascript">
$(document).ready(function() {
    feedCampaignReportList();

    function feedCampaignReportList() {
        const numberFormatter = Intl.NumberFormat('en-IN');
        $('.exportFeedCampaignReport').removeAttr('disabled');
        $('.exportFeedCampaignReport').removeClass('bg-secondary');
        $("#feed-campaign-report-table").DataTable().clear().destroy();
        $('#feed-campaign-report-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" : [
                [1, "desc"]
            ],
            "ajax": {
                "url"  : "{{ url('getFeedCampaignReport') }}",
                "type" : "POST",
                "data" : {
                        _token             : "{{csrf_token()}}"
                    },
                "dataType" : "json",
            },
            "columnDefs"    : [
                { orderable : false, targets: '_all' }
                   ],
            "columns": [
                { data: "id",
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: "iab_code",
                    render: function(data, type, row, meta){
                        return ((row.iab_code) ? row.iab_code : "NA")
                    }
                },
                { data: "NULL",
                    render: function(data, type, row, meta){
                        return ((row.NULL) ? row.NULL : "NA")
                    }
                },
                { data: "brandname",
                    render: function(data, type, row, meta){
                        return ((row.brandname) ? row.brandname : "NA")
                    }
                },
                { data: "campaigngroup",
                    render: function(data, type, row, meta){
                        return ((row.campaigngroup) ? row.campaigngroup : "NA")
                    }
                },
                { data: "campaignsgroup",
                    render: function(data, type, row, meta){
                        return ((row.campaignsgroup) ? row.campaignsgroup : "NA")
                    }
                },
                { data: "campaign_website",
                    render: function(data, type, row, meta){
                        return ((row.campaign_website) ? row.campaign_website : "NA")
                    }
                },
                { data: "campaign_package",
                    render: function(data, type, row, meta){
                        return ((row.campaign_package) ? row.campaign_package : "NA")
                    }
                },
                { data: "objectives",
                    render: function(data, type, row, meta){
                        return ((row.objectives) ? row.objectives : "NA")
                    }
                },
                { data: "meta_campaign_name",
                    render: function(data, type, row, meta){
                        return ((row.meta_campaign_name) ? row.meta_campaign_name : "NA")
                    }
                },
                { data: "payable_event",
                    render: function(data, type, row, meta){
                        return ((row.payable_event) ? row.payable_event : "NA")
                    }
                },
                { data: "bidprice",
                    render: function(data, type, row, meta){
                        return ((row.bidprice) ? row.bidprice : "NA")
                    }
                },
                { data: "campaign_type",
                    render: function(data, type, row, meta){
                        return ((row.campaign_type) ? row.campaign_type : "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: "sub_inventory",
                    render: function(data, type, row, meta){
                        return ((row.sub_inventory) ? row.sub_inventory : "NA")
                    }
                },
                { data: "audience_type",
                    render: function(data, type, row, meta){
                        return ((row.audience_type) ? row.audience_type : "NA")
                    }
                },
                { data: "audience_category",
                    render: function(data, type, row, meta){
                        return ((row.audience_category) ? row.audience_category : "NA")
                    }
                },
                { data: "daycapping",
                    render: function(data, type, row, meta){
                        return ((row.daycapping) ? row.daycapping : "NA")
                    }
                },
                { data: "startdate",
                    render: function(data, type, row, meta){
                        return ((row.startdate) ? row.startdate : "NA")
                    }
                },
                { data: "enddate",
                    render: function(data, type, row, meta){
                        return ((row.enddate) ? row.enddate : "NA")
                    }
                },
                { data: "clicks",
                    render: function(data, type, row, meta){
                        return ((row.clicks) ? row.clicks : "NA")
                    }
                },
                { data: "unique_clicks",
                    render: function(data, type, row, meta){
                        return ((row.unique_clicks) ? row.unique_clicks : "NA")
                    }
                },
                { data: "impressions",
                    render: function(data, type, row, meta){
                        return ((row.impressions) ? row.impressions : "NA")
                    }
                },
                { data: "conversions",
                    render: function(data, type, row, meta){
                        return ((row.conversions) ? row.conversions : "NA")
                    }
                },
                { data: "CPC",
                    render: function(data, type, row, meta){
                        return ((row.CPC) ? row.CPC : "NA")
                    }
                },
                { data: "CTR",
                    render: function(data, type, row, meta){
                        return ((row.CTR) ? row.CTR : "NA")
                    }
                },
                { data: "RCPA",
                    render: function(data, type, row, meta){
                        return ((row.RCPA) ? row.RCPA : "NA")
                    }
                },
                { data: "CPA",
                    render: function(data, type, row, meta){
                        return ((row.CPA) ? row.CPA : "NA")
                    }
                },
                { data: "spends",
                    render: function(data, type, row, meta){
                        return ((row.spends) ? row.spends : "NA")
                    }
                },
                { data: "campaign_status",
                    render: function(data, type, row, meta){
                        return ((row.campaign_status) ? row.campaign_status : "NA")
                    }
                },
                { data: "paused_at",
                    render: function(data, type, row, meta){
                        return ((row.paused_at) ? row.paused_at : "NA")
                    }
                },
                { data: "approval_status",
                    render: function(data, type, row, meta){
                        return ((row.approval_status) ? row.approval_status : "NA")
                    }
                },
                { data: "approved_by",
                    render: function(data, type, row, meta){
                        return ((row.approved_by) ? row.approved_by : "NA")
                    }
                },
                { data: "approver_name",
                    render: function(data, type, row, meta){
                        return ((row.approver_name) ? row.approver_name : "NA")
                    }
                },
                { data: "approved_date",
                    render: function(data, type, row, meta){
                        return ((row.approved_date) ? row.approved_date : "NA")
                    }
                },
                { data: "rejected_reason",
                    render: function(data, type, row, meta){
                        return ((row.rejected_reason) ? row.rejected_reason : "NA")
                    }
                },
                { data: "daily_campaign_budget_tracker",
                    render: function(data, type, row, meta){
                        return ((row.daily_campaign_budget_tracker) ? row.daily_campaign_budget_tracker : "NA")
                    }
                },
                { data: "fraud_clicks",
                    render: function(data, type, row, meta){
                        return ((row.fraud_clicks) ? row.fraud_clicks : "NA")
                    }
                },
                { data: "deleted",
                    render: function(data, type, row, meta){
                        return ((row.deleted) ? row.deleted : "NA")
                    }
                },
                { data: "blocked_websites_status",
                    render: function(data, type, row, meta){
                        return ((row.blocked_websites_status) ? row.blocked_websites_status : "NA")
                    }
                },
                { data: "creative_count",
                    render: function(data, type, row, meta){
                        return ((row.creative_count) ? row.creative_count : "NA")
                    }
                },
                { data: "oem_id",
                    render: function(data, type, row, meta){
                        return ((row.oem_id) ? row.oem_id : "NA")
                    }
                },
                { data: "autobid",
                    render: function(data, type, row, meta){
                        return ((row.autobid) ? row.autobid : "NA")
                    }
                },
                { data: "maxthreshold",
                    render: function(data, type, row, meta){
                        return ((row.maxthreshold) ? row.maxthreshold : "NA")
                    }
                },
                { data: "is_gaid",
                    render: function(data, type, row, meta){
                        return ((row.is_gaid) ? row.is_gaid : "NA")
                    }
                },
                { data: "audience_group_id",
                    render: function(data, type, row, meta){
                        return ((row.audience_group_id) ? row.audience_group_id : "NA")
                    }
                },
                { data: "city_tier",
                    render: function(data, type, row, meta){
                        return ((row.city_tier) ? row.city_tier : "NA")
                    }
                },
                { data: "meta_campaign_id",
                    render: function(data, type, row, meta){
                        return ((row.meta_campaign_id) ? row.meta_campaign_id : "NA")
                    }
                },
                { data: "meta_adset_id",
                    render: function(data, type, row, meta){
                        return ((row.meta_adset_id) ? row.meta_adset_id : "NA")
                    }
                },
                { data: "meta_performance_goal",
                    render: function(data, type, row, meta){
                        return ((row.meta_performance_goal) ? row.meta_performance_goal : "NA")
                    }
                },
                { data: "meta_account_number",
                    render: function(data, type, row, meta){
                        return ((row.meta_account_number) ? row.meta_account_number : "NA")
                    }
                },
                { data: "meta_pixel_id",
                    render: function(data, type, row, meta){
                        return ((row.meta_pixel_id) ? row.meta_pixel_id : "NA")
                    }
                },
                { data: "meta_campaign_type",
                    render: function(data, type, row, meta){
                        return ((row.meta_campaign_type) ? row.meta_campaign_type : "NA")
                    }
                },
                { data: "meta_billing_event",
                    render: function(data, type, row, meta){
                        return ((row.meta_billing_event) ? row.meta_billing_event : "NA")
                    }
                },
                { data: "gender",
                    render: function(data, type, row, meta){
                        return ((row.gender) ? row.gender : "NA")
                    }
                },
                { data: "min_age",
                    render: function(data, type, row, meta){
                        return ((row.min_age) ? row.min_age : "NA")
                    }
                },
                { data: "max_age",
                    render: function(data, type, row, meta){
                        return ((row.max_age) ? row.max_age : "NA")
                    }
                },
                { data: "meta_device_target",
                    render: function(data, type, row, meta){
                        return ((row.meta_device_target) ? row.meta_device_target : "NA")
                    }
                },
                { data: "meta_custom_audiences",
                    render: function(data, type, row, meta){
                        return ((row.meta_custom_audiences) ? row.meta_custom_audiences : "NA")
                    }
                },
                { data: "id",
                    render: function(data, type, row, meta){
                        return `<button onclick="launch_filter(${row.id})" class="button-style">Launch Filter</button><button onclick='creatives_filter(${row.id})' class="button-style">Creatives</button>`;
                    }
                }
            ],
            fnRowCallback: function(nRow, aData) {
                return nRow;
            },
            fnDrawCallback: function( settings ) {
                $('.paginate_button').click(function(){
                $('.dataTables_scrollBody').scrollTop(0);
                })
            }
        });
        $('.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 );
                }
        });
    }

    $(document).on("click",".exportFeedCampaignReport",function(e){
        e.preventDefault()
        let page_name         = $("#sub_report_dropdown option:selected").text();
        var start_date        = $('#start_date').val();
        var end_date          = $('#end_date').val();
        $('.exportFeedCampaignReport').attr('disabled','disabled');
        $('.exportFeedCampaignReport').addClass('bg-secondary');
        $.ajax({
            "url": "{{ url('exportFeedSspReport') }}",
            "type": "GET",
            "data": {
                page_name        : page_name,
                fromdate         : start_date,
                todate           : end_date
            },
            "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",".advCampaignReport",function(e){
        e.preventDefault()
        feedCampaignReportList();
    });
});
function launch_filter(id) {
    $.ajax({
        url: "{{ url('getFeedCampaignLaunchFilter') }}",
        type: "POST",
        data: {
            _token: "{{ csrf_token() }}",
            id: id,
            is_creative: 2
        },
        dataType: "json",
        success: function(response) {
            renderTargetingData(response);
            $('#edit-data').modal('show');
        },
        error: function(xhr, status, error) {
            $('.modal-body').html('<p class="text-danger">Failed to load data.</p>');
        }
    });
}

function renderTargetingData(response) {
    const targeting = response.data[0]; 
    function formatValue(val) {
        if (!val || val === 'NULL' || val === null || val.length === 0) return `<span class="text-muted">Not specified</span>`;
        if (Array.isArray(val)) return val.join(', ');
        return val;
    }

    const html = `
        <p><strong>Countries Included:</strong> ${formatValue(targeting.countries_included)}</p>
        <p><strong>States Included:</strong> ${formatValue(targeting.states_included)}</p>
        <p><strong>States Excluded:</strong> ${formatValue(targeting.states_excluded)}</p>
        <p><strong>Cities Included:</strong> ${formatValue(targeting.cities_included)}</p>
        <p><strong>Cities Excluded:</strong> ${formatValue(targeting.cities_excluded)}</p>
        <p><strong>Pincodes Included:</strong> ${formatValue(targeting.pincodes_included)}</p>
        <p><strong>Pincodes Excluded:</strong> ${formatValue(targeting.pincodes_excluded)}</p>
        <p><strong>Devices:</strong> ${formatValue(targeting.devices)}</p>
        <p><strong>Mobile Brands:</strong> ${formatValue(targeting.mobile_brands)}</p>
        <p><strong>Model IDs:</strong> ${formatValue(targeting.model_id)}</p>
        <p><strong>OS:</strong> ${formatValue(targeting.mobile_os)}</p>
        <p><strong>Make:</strong> ${formatValue(targeting.make)}</p>
        <p><strong>Operators Included:</strong> ${formatValue(targeting.operators_included)}</p>
        <p><strong>Operators Excluded:</strong> ${formatValue(targeting.operators_excluded)}</p>
        <p><strong>Carrier ID:</strong> ${formatValue(targeting.carrier_id)}</p>
        <p><strong>Browsers Included:</strong> ${formatValue(targeting.browsers_included)}</p>
        <p><strong>Browsers Excluded:</strong> ${formatValue(targeting.browsers_excluded)}</p>
        <p><strong>Platform:</strong> ${formatValue(targeting.platform)}</p>
        <p><strong>Placement IDs:</strong> ${formatValue(targeting.placement_id)}</p>
        <p><strong>Sub Placement IDs:</strong> ${formatValue(targeting.sub_placement_ids)}</p>
        <p><strong>Selected Hours:</strong> ${formatValue(targeting.selected_hours)}</p>
        <p><strong>Selected Days:</strong> ${formatValue(targeting.selected_days)}</p>
        <p><strong>Industry:</strong> ${formatValue(targeting.audience_industry)}</p>
        <p><strong>Brand:</strong> ${formatValue(targeting.audience_brand)}</p>
        <p><strong>Group:</strong> ${formatValue(targeting.audience_group)}</p>
        <p><strong>Sub Group:</strong> ${formatValue(targeting.audience_sub_group)}</p>
    `;

    $('.modal-body').html(html);
}

function creatives_filter(id) {
    $("#creatives-filter-table").DataTable().clear().destroy();
        $('#creatives-filter-table').DataTable({
            "processing": true,
            "lengthChange": false,
            "serverSide": true,
            "paging": false,
            "searching": false,
            "scrollX": true,
            "pageLength": 2,
            "ordering": true,
            "lengthChange": false,
            "scrollY":  400,
            "scrollCollapse": true,
            "fixedHeader":{ header: true},
            "info": false, // Hide the info display
            "order" : [
                [1, "desc"]
            ],
            "ajax": {
                "url"  : "{{ url('getFeedCampaignLaunchFilter') }}",
                "type" : "POST",
                "data" : {
                        _token             : "{{csrf_token()}}",
                        id: id,
                        is_creative: 1
                    },
                "dataType" : "json",
            },
            "columnDefs"    : [
                { orderable : false, targets: '_all' }
                   ],
            "columns": [
                { data: "id",
                    render: function(data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: "presigned_asset_aws_url",
                    render: function(data, type, row, meta){
                        return ((row.presigned_asset_aws_url) ? row.presigned_asset_aws_url : "NA")
                    }
                },
                { data: "creative_name",
                    render: function(data, type, row, meta){
                        return ((row.creative_name) ? row.creative_name : "NA")
                    }
                },
                { data: "language",
                    render: function(data, type, row, meta){
                        return ((row.language) ? row.language : "NA")
                    }
                },
                { data: "headline",
                    render: function(data, type, row, meta){
                        return ((row.headline) ? row.headline : "NA")
                    }
                },
                { data: "subtext",
                    render: function(data, type, row, meta){
                        return ((row.subtext) ? row.subtext : "NA")
                    }
                },
                { data: "background_color",
                    render: function(data, type, row, meta){
                        return ((row.background_color) ? row.background_color : "NA")
                    }
                },
                { data: "tracker",
                    render: function(data, type, row, meta){
                        return ((row.tracker) ? row.tracker : "NA")
                    }
                },
                { data: "vta",
                    render: function(data, type, row, meta){
                        return ((row.vta) ? row.vta : "NA")
                    }
                },
                { data: "final_url",
                    render: function(data, type, row, meta){
                        return ((row.final_url) ? row.final_url : "NA")
                    }
                },
                { data: "landing_url",
                    render: function(data, type, row, meta){
                        return ((row.landing_url) ? row.landing_url : "NA")
                    }
                },
                { data: "creative_status",
                    render: function(data, type, row, meta){
                        return ((row.creative_status) ? row.creative_status : "NA")
                    }
                },
                { data: "paused_at",
                    render: function(data, type, row, meta){
                        return ((row.paused_at) ? row.paused_at : "NA")
                    }
                },
                { data: "approval_status",
                    render: function(data, type, row, meta){
                        return ((row.approval_status) ? row.approval_status : "NA")
                    }
                },
                { data: "approved_by",
                    render: function(data, type, row, meta){
                        return ((row.approved_by) ? row.approved_by : "NA")
                    }
                },
                { data: "approver_name",
                    render: function(data, type, row, meta){
                        return ((row.approver_name) ? row.approver_name : "NA")
                    }
                },
                { data: "approved_date",
                    render: function(data, type, row, meta){
                        return ((row.approved_date) ? row.approved_date : "NA")
                    }
                },
                { data: "rejected_reason",
                    render: function(data, type, row, meta){
                        return ((row.rejected_reason) ? row.rejected_reason : "NA")
                    }
                },
                { data: "clicks",
                    render: function(data, type, row, meta){
                        return ((row.clicks) ? row.clicks : "NA")
                    }
                },
                { data: "unique_clicks",
                    render: function(data, type, row, meta){
                        return ((row.unique_clicks) ? row.unique_clicks : "NA")
                    }
                },
                { data: "impressions",
                    render: function(data, type, row, meta){
                        return ((row.impressions) ? row.impressions : "NA")
                    }
                },
                { data: "conversions",
                    render: function(data, type, row, meta){
                        return ((row.conversions) ? row.conversions : "NA")
                    }
                },
                { data: "spends",
                    render: function(data, type, row, meta){
                        return ((row.spends) ? row.spends : "NA")
                    }
                },
                { data: "created_on",
                    render: function(data, type, row, meta){
                        return ((row.created_on) ? row.created_on : "NA")
                    }
                },
                { data: "updated_on",
                    render: function(data, type, row, meta){
                        return ((row.updated_on) ? row.updated_on : "NA")
                    }
                },
                { data: "fraud_clicks",
                    render: function(data, type, row, meta){
                        return ((row.fraud_clicks) ? row.fraud_clicks : "NA")
                    }
                },
                { data: "CTA",
                    render: function(data, type, row, meta){
                        return ((row.CTA) ? row.CTA : "NA")
                    }
                },
                { data: "deleted",
                    render: function(data, type, row, meta){
                        return ((row.deleted) ? row.deleted : "NA")
                    }
                },
                { data: "disclaimer",
                    render: function(data, type, row, meta){
                        return ((row.disclaimer) ? row.disclaimer : "NA")
                    }
                },
                { data: "likes",
                    render: function(data, type, row, meta){
                        return ((row.likes) ? row.likes : "NA")
                    }
                },
                { data: "shares",
                    render: function(data, type, row, meta){
                        return ((row.shares) ? row.shares : "NA")
                    }
                },
                { data: "shared_clicks",
                    render: function(data, type, row, meta){
                        return ((row.shared_clicks) ? row.shared_clicks : "NA")
                    }
                },
                { data: "shared_conversions",
                    render: function(data, type, row, meta){
                        return ((row.shared_conversions) ? row.shared_conversions : "NA")
                    }
                },
                { data: "sharable_content",
                    render: function(data, type, row, meta){
                        return ((row.sharable_content) ? row.sharable_content : "NA")
                    }
                },
                { data: "banner_dimension",
                    render: function(data, type, row, meta){
                        return ((row.banner_dimension) ? row.banner_dimension : "NA")
                    }
                },
                { data: "height",
                    render: function(data, type, row, meta){
                        return ((row.height) ? row.height : "NA")
                    }
                },
                { data: "width",
                    render: function(data, type, row, meta){
                        return ((row.width) ? row.width : "NA")
                    }
                },
                { data: "bitrate",
                    render: function(data, type, row, meta){
                        return ((row.bitrate) ? row.bitrate : "NA")
                    }
                },
                { data: "resolution",
                    render: function(data, type, row, meta){
                        return ((row.resolution) ? row.resolution : "NA")
                    }
                },
                { data: "duration",
                    render: function(data, type, row, meta){
                        return ((row.duration) ? row.duration : "NA")
                    }
                },
                { data: "icon_url",
                    render: function(data, type, row, meta){
                        return ((row.icon_url) ? row.icon_url : "NA")
                    }
                },
                { data: "presigned_icon_expiry_date",
                    render: function(data, type, row, meta){
                        return ((row.presigned_icon_expiry_date) ? row.presigned_icon_expiry_date : "NA")
                    }
                },
                { data: "presigned_icon_url",
                    render: function(data, type, row, meta){
                        return ((row.presigned_icon_url) ? row.presigned_icon_url : "NA")
                    }
                },
                { data: "meta_ads_id",
                    render: function(data, type, row, meta){
                        return ((row.meta_ads_id) ? row.meta_ads_id : "NA")
                    }
                },
                { data: "meta_creative_id",
                    render: function(data, type, row, meta){
                        return ((row.meta_creative_id) ? row.meta_creative_id : "NA")
                    }
                },
                { data: "meta_page_id",
                    render: function(data, type, row, meta){
                        return ((row.meta_page_id) ? row.meta_page_id : "NA")
                    }
                }
            ],
            fnRowCallback: function(nRow, aData) {
                return nRow;
            },
            fnDrawCallback: function( settings ) {
                $('.paginate_button').click(function(){
                $('.dataTables_scrollBody').scrollTop(0);
                })
            }
        });
        $('#edit-data-creatives').modal('show');
}

function getStatusText(code) {
    switch (parseInt(code)) {
        case 0: return 'Draft';
        case 1: return 'Active';
        case 5: return 'Paused';
        default: return 'Unknown';
    }
}


</script>
@endsection