@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;
    }
    .max_wid{
        margin-left: auto;
        margin-right: 5px !important;
    }
    .liveads_report{
        float        : right !important;
        margin-right : 0px;
        margin-left  : 12px;
    }
    .modal-body .col-sm-8>p{
        word-wrap: break-word;
    }
</style>
<div class="container-fluid">
    <div class="card">
        <div class="row ml-0 mr-0 mt-4 mb-n4">
            <div class="form-group col-md-3">@include('whistle_feed.menu_dropdown.opsLogs')</div>
            <div class="col-md-3 max_wid">
                <button type="submit" class="excel-btn btn btn-sm border-radius-0 liveads_report">Run Report</button>
            </div>
        </div>
        <div class="card-body table-responsive">
            <form>
                <div class="d-flex flex-wrap" style="margin-top:15px;">
                    <div class="form-group col-md-2 pl-0">
                        <label>Campagin 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>
            </form>
            <table class="table-bordered table-hover text-center" id="liveads-report-main-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Campaign Id</th>
                        <th>Creative Id</th>
                        <th>Website Id</th>
                        <th>View Details</th>
                        <th>User Id</th>
                        <th>Creative Status</th>
                        <th>Industry</th>
                        <th>Iab Code</th>
                        <th>Brandname</th>
                        <th>Language</th>
                        <th>Headline</th>
                        <th>Subtext</th>
                        <th>Background Color</th>
                        <th>Platform</th>
                        <th>Bid Price</th>
                        <th>Start Date</th>
                        <th>End Date</th>
                        <th>Approval Status</th>
                        <th>CTA</th>
                        <th>Inventory Type</th>
                        <th>Sub Inventory</th>
                        <th>Channel Type</th>
                        <th>Audience Type</th>
                        <th>Campaign Type</th>
                        <th>View Count</th>
                        <th>Payable Event</th>
                        <th>Is Gaid</th>
                        <th>Group Id</th>
                        <th>Height</th>
                        <th>Width</th>
                        <th>Bitrate</th>
                        <th>Resolution</th>
                        <th>Duration</th>
                        <th>Brand Retargetting Type</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Total</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                        <th>NA</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<!--view details about campaign  modal start-->
<div class="modal fade" tabindex="-1" role="dialog" id="viewDetails">
   <div class="modal-dialog max-width700" role="document">
      <div class="modal-content">
         <!-- Modal body -->
      <div class="modal-body">
       <h5 class="modal-title text-center">Live Ads Details
        <button type="button" class="close" data-dismiss="modal">
            <span><i class="fa fa-times-circle" aria-hidden="true"></i></span>
        </button></h5><hr>

        <div class="row mb-1">
            <label class="col-sm-3 control-label">Trackeing Url</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-tracker" >NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">VTA</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-vta" >NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Final Url</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-final-url">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Landing Url</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-landing-url">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Countries</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-countries">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">States</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-states">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Cities</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-cities">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Devices</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-devices">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Placement Id</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-placement-id">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Mobile Brands</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-mobile-brands">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Logo Url</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-logo-url">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Icon Url</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-icon-url">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Campaign App</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-campaign-app">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Campaign Website</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-campaign-website">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Disclaimer</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-disclaimer">NA</p></div>
        </div> 
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Sharable Content</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-sharable-content">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Model</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-model">NA</p>
            </div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Make</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-make">NA</p></div>
        </div>
        <div class="row mb-1 TileOEM_Carrier">
            <label class="col-sm-3 control-label">Carrier</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-carrier">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Selected Hours</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-selected-hours">NA</p></div>
        </div>
        <div class="row mb-1 brands_select">
            <label class="col-sm-3 control-label">Selected Days</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-selected-days">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Audience Category</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-audience-category">NA</p>
        </div>
        </div>
        <div class="row">
            <label class="col-sm-3 control-label">Audience Brand</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-2"><p class="modal-audience-brand">NA</p></div>
        </div>
        <div class="row mb-1">
            <label class="col-sm-3 control-label">Audience Retagetting Keys</label>
            <label class="col-sm-1">:</label>
            <div class="col-sm-8"><p class="modal-audience-retargetting-keys">NA</p></div>
        </div>
      </div>
         <div class="modal-footer footerwidth">
            <a type="button" class="btn btn-default c-btn" data-dismiss="modal">Close</a>
         </div>
      </div>
   </div>
</div>
<!--view details modal end-->

<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() {
    liveAdsSubReport();
    
    $(document).on("click",".liveads_report",function(e){
        e.preventDefault()
        var creative_id       = $('#creative_id').val();
        var campaign_id       = $('#campaign_id').val();
        liveAdsSubReport(creative_id, campaign_id);
    });
});

function liveAdsSubReport(creative_id=0, campaign_id=0) {
    const numberFormatter = Intl.NumberFormat('en-IN');
    $('#liveads-report-main-table').DataTable().clear().destroy();
    $('#liveads-report-main-table').DataTable({
        "bautoWidth"   : false,
        "processing"   : true,
        "serverSide"   : true,
        "paging"       : true,
        "lengthChange" : false,
        "searching"    : true,
        "scrollX"      : true,
        "lengthChange" : false,
        "pageLength"   : 50,
        "ordering"     : true,
        "scrollY"      :  400,
        "scrollCollapse": true,
        "fixedHeader"  :{ header: true},
        "language"     : { search: '', searchPlaceholder: "Search..." },
        "order"        : [
                            [0, "desc"]
                         ],
        "ajax": {
            "url"      : "{{ url('getLiveAdsSubReport') }}",
            "dataType" : "json",
            "type"     : "POST",
            "data"     : {
                _token       : "{{csrf_token()}}",
                "creative_id": creative_id,
                "campaign_id": campaign_id
            },
        },
        "columnDefs"   : [
              { orderable: false, targets: 0 }
        ],
        "columns": [
            {
                data   : "campaign_id",
                render : function(data, type, row, meta){
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                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   : "oem_id",
                render : function(data, type, row, meta){
                    return (row.oem_id ? row.oem_id : "NA")
                }
            },
            { 
                data   : "view_details",
                render : function(data, type, row, meta){
                    return @can('hasViewPermission')'<span class="custom-tooltip" data-toggle="tooltip" title="View Details" onclick="viewDetails('+row.creative_id+')"><i class="fa fa-eye" aria-hidden="true"></i> &nbsp&nbsp&nbsp'@endif + 'View';
                }
            },
            { 
                data   : "user_id",
                render : function(data, type, row, meta){
                    return (row.user_id ? row.user_id : "NA")
                }
            },
            {
                data   : "creative_status",
                render : function(data, type, row, meta){
                    return (row.creative_status ? row.creative_status : "NA")
                }
            },
            { 
                data   : "industry",
                render : function(data, type, row, meta){
                    return (row.industry ? row.industry : "NA")
                }
            },
            {
                data   : "iab_code",
                render : function(data, type, row, meta){
                    return (row.iab_code ? row.iab_code : "NA")
                }
            },
            {
                data   : "brandname",
                render : function(data, type, row, meta){
                    return (row.brandname ? row.brandname : "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   : "platform",
                render : function(data, type, row, meta){
                    return (row.platform ? row.platform : "NA")
                }
            },
            { 
                data   : "bidprice",
                render : function(data, type, row, meta){
                    return (row.bidprice ? row.bidprice : 0)
                }
            },
            { 
                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   : "approval_status",
                render : function(data, type, row, meta){
                    return (row.approval_status ? row.approval_status : "NA")
                }
            },
            { 
                data   : "CTA",
                render : function(data, type, row, meta){
                    return (row.CTA ? row.CTA : "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   : "channel_type",
                render : function(data, type, row, meta){
                    return (row.channel_type ? row.channel_type : "NA")
                }
            },
            { 
                data   : "audience_type",
                render : function(data, type, row, meta){
                    return (row.audience_type ? row.audience_type : "NA")
                }
            },
            { 
                data   : "campaign_type",
                render : function(data, type, row, meta){
                    return (row.campaign_type ? row.campaign_type : "NA")
                }
            },
            { 
                data   : "view_count",
                render : function(data, type, row, meta){
                    return (row.view_count ? row.view_count : "NA")
                }
            },
            { 
                data   : "payable_event",
                render : function(data, type, row, meta){
                    return (row.payable_event ? row.payable_event : "NA")
                }
            },
            { 
                data   : "is_gaid",
                render : function(data, type, row, meta){
                    return (row.is_gaid ? row.is_gaid : "NA")
                }
            },
            { 
                data   : "group_id",
                render : function(data, type, row, meta){
                    return (row.group_id ? row.group_id : "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   : "brand_retargetting_type",
                render : function(data, type, row, meta){
                    return (row.brand_retargetting_type ? row.brand_retargetting_type : "NA")
                }
            }
        ],
        fnDrawCallback: function( settings ) {
            $('.paginate_button').click(function(){
            $('.dataTables_scrollBody').scrollTop(0);
            })
        }
    });
}

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)
}

function viewDetails(creative_id){
    $("#viewDetails").modal("show");
    $.ajax({
        type: "POST",
        url: "{{url('viewDetailsByCreativeId')}}",
        data: {
            "_token" : "{{ csrf_token() }}",
            creativeId: creative_id
        },
        dataType:'json',
        success: function(data) {
            $.each(data.data, function(key,val) {
                setTimeout(() => {
                    $('.modal-tracker').html(val.tracker ? val.tracker :'NA');
                    $('.modal-vta').html(val.vta ? val.vta :'NA');
                    $('.modal-final-url').html(val.final_url ? val.final_url :'NA');
                    $('.modal-landing-url').html(val.landing_url ? val.landing_url :'NA');
                    $('.modal-countries').html((val.countries != '0' && val.countries) ? val.countries?.split(',')?.join(', ') :'NA');
                    $('.modal-states').html((val.states != '0' && val.states) ? val.states?.split(',')?.join(', ') :'NA');
                    $('.modal-cities').html((val.cities != '0' && val.cities) ? val.cities?.split(',').join(', ') :'NA');
                    $('.modal-devices').html((val.devices != '0' && val.devices) ? val.devices?.split(',')?.join(', ') :'NA');
                    $('.modal-placement-id').html((val.placement_id != '0' && val.placement_id) ? val.placement_id?.split(',')?.join(', ') :'NA');
                    $('.modal-mobile-brands').html((val.mobile_brands != '0' && val.mobile_brands) ? val.mobile_brands?.split(',')?.join(', ') :'NA');
                    $('.modal-logo-url').html(val.logo_url ? val.logo_url :'NA');
                    $('.modal-icon-url').html(val.icon_url ? val.icon_url :'NA');
                    $('.modal-campaign-app').html(val.campaign_app ? val.campaign_app :'NA');
                    $('.modal-campaign-website').html(val.campaign_website ? val.campaign_website :'NA');
                    $('.modal-disclaimer').html(val.disclaimer ? val.disclaimer :'NA');
                    $('.modal-sharable-content').html(val.sharable_content ? val.sharable_content?.split(',')?.join(', ') :'NA');
                    $('.modal-model').html((val.model != '0' && val.model) ? val.model?.split(',')?.join(', ') :'NA');
                    $('.modal-make').html((val.make != '0' && val.make) ? val.make?.split(',')?.join(', ') :'NA');
                    $('.modal-carrier').html((val.carrier != '0' && val.carrier) ? val.carrier?.split(',')?.join(', ') :'NA');
                    $('.modal-selected-hours').html(val.selected_hours ? val.selected_hours?.split(',')?.join(', ') :'NA');
                    $('.modal-selected-days').html(val.selected_days ? val.selected_days?.split(',')?.join(', ') :'NA');
                    $('.modal-audience-category').html(val.audience_category!= '[]' ? val.audience_category :'NA');
                    $('.modal-audience-brand').html(val.audience_brand ? val.audience_brand?.split(',')?.join(', ') :'NA');
                    $('.modal-audience-retargetting-keys').html((val.audience_retargetting_keys != '0' && val.audience_retargetting_keys) ? val.audience_retargetting_keys?.split(',')?.join(', ') :'NA');
                }, 100);
            });
        }
    });
}

</script>
@endsection