@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;
}
.nativeAdsClicksSubmit{
    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;
}
@media (max-width: 768px) {
    .analytic_ui{
        flex: 1 1 100%;
    }
    .analytic_ui{
        margin-top: 10px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 912px) {
    .analytic_ui {
        flex: none;
    }
}
.dropdown {
    display:block;
}
.mysql_clickhouse_toggle .tabs{
    background-color: #EBEBEB;
    height: 34px !important;
}
.mysql_clickhouse_toggle .tab,.glider{
    height: 34px !important;
}
.mysql_clickhouse_toggle input[type="radio"] {
    display: none;
}
.mysql_clickhouse_toggle input[type=radio]:checked + label {
    color: #fff !important;
    z-index: 2;
}
.mysql_clickhouse_toggle input[type=radio]:checked + label + .activeFilter{
    color: #fff;
    z-index: 2;
}
.mysql_clickhouse_toggle input[type=radio]:checked + label > .notification {
    background-color: #fff;
    color: #fff;
}
.mysql_clickhouse_toggle input[id=mysqlClickhouse-1]:checked ~ .glider{
    transform: translateX(0);
}

.mysql_clickhouse_toggle input[id=mysqlClickhouse-2]:checked ~ .glider{
    transform: translateX(100%);
}

.mysql_clickhouse_toggle .activeFilter{
    background: transparent !important;
    border: 0;
}

.mysql_clickhouse_toggle .glider {
    position: absolute;
    display: flex;
    height: 31px;
    width: 90px;
    background-color: #000;
    z-index: 1;
    border-radius: 99px !important;
    transition: 0.25s ease-out;
}

.mysql_clickhouse_toggle .tab{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 31px;
    width: 90px;
    font-size: 14px !important;
    font-weight: 500;
    border-radius: 99px;
    cursor: pointer;
    transition: color 0.15s ease-in;
    z-index: 2;
}

.mysql_clickhouse_toggle .tabs {
    display: flex;
    position: relative;
    background-color: #9d9d9d;
    box-shadow: 0 0 1px 0 rgba(#185ee0, 0.15), 0 6px 12px 0 rgba(#185ee0, 0.15);
    padding: 0px;
    border-radius: 99px !important;
    height:31px;
    width: 180px;
    margin-bottom: 4px;
}

.mysql_clickhouse_toggle .glider {
    width: 170px;
}
.mysql_clickhouse_toggle .tabs  {
    width: 340px;
}
.mysql_clickhouse_toggle .tab  {
    width: 170px;
}
.panelcolDiv{
    width: 100%;
}
.dates-comb{
    margin:0px 0px 0 5px !important;
    padding: 6px 0px;
    box-shadow: 0px 0px 10px 3px #dddfe0;
    position: relative;
    top: 2px;
    box-shadow: unset;
}
.meta_filter {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 15px;
    margin-top: 6px;
}
.meta_filter .meta_text {
    padding-right: 6px;
    font-size: 14px !important;
}
.meta_filter .switch {
    position: relative;
    display: inline-block;
    width: 43px !important;
    height: 22px !important; 
}
.meta_filter .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider_main {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: .4s;
    border-radius: 4px;
    background-color: #9d9d9d !important;
}
.slider_main:before {
    position: absolute;
    content: "";
    height: 20px; 
    width: 20px; 
    left: 1px;
    bottom: 3px;
    background-color: #fff;
    transition: .4s;
    border-radius: 50%;
    top:1px;
}
input:checked + .slider_main {
    background-color: #000 !important;
}
input:checked + .slider_main:before {
    transform: translateX(20.8px); 
}
.slider_main.round {
    border-radius: 27.2px;
}
.slider_main.round:before {
    border-radius: 50%;
}
.analytic_ui {
    display: flex;
    justify-content: center;
    align-items: center;
}
</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="button" id="refreshNativeAdsClicks" class="refreshNativeAdsClicks btn excel-btn btn-sm border-0 border-radius-0">
                    Reset
                </button>
                <button type="submit" class="nativeAdsClicksSubmit 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>
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 dropdown">
                <div class="analytic_ui">
                    <div class="form-group mysql_clickhouse_toggle">
                        <div class="tabs">
                            <input type="radio" class="ToggleActiveFilter" id="mysqlClickhouse-1" name="tabs-1" checked="">
                            <label class="tab" for="mysqlClickhouse-1">Mysql</label>
                            <input type="radio" class="ToggleActiveFilter" id="mysqlClickhouse-2" name="tabs-1">
                            <label class="tab" for="mysqlClickhouse-2">Clickhouse</label>
                            <span class="glider"></span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 panelcolDiv">
                <div class="text-right">
                    <div class="filter-container">
                        <div class="form-inline" id="myForm">
                            <span class="dates-comb divs">
                                <label class="labelText">From Date</label>
                                <input type="date" 
                                    id="nativeStartDate" 
                                    class="form-control cform-control input-size" 
                                    name="nativeStartDate" 
                                    placeholder="Start Date"
                                    max="2026-02-24">
                            </span>
                            <span class="dates-comb divs">
                                <label class="labelText">To Date</label>
                                <input type="date" 
                                    id="nativeEndDate" 
                                    class="form-control cform-control input-size" 
                                    name="nativeEndDate" 
                                    placeholder="End Date"
                                    max="2026-02-24">
                            </span>
                            <span class="dates-comb divs">
                                <label class="labelText">Creative Id</label>
                                <input type="text" class="form-control cform-control searchBar input-size" id="creativeIdSearch" name="creativeIdSearch" placeholder="Creative ID" autocomplete="off">
                            </span>
                            <span class="dates-comb divs">
                                <label class="labelText">Website Id</label>
                                <input type="text" class="form-control cform-control searchBar input-size" id="websiteIdSearch" name="websiteIdSearch" placeholder="Website ID" autocomplete="off">
                            </span>
                            <span class="dates-comb divs">
                                <div class="meta_filter">
                                    <label class="meta_text">Meta</label>
                                    <div>
                                        <label class="switch">
                                            <input type="checkbox" id="metaToggle">
                                            <span class="slider_main round"></span>
                                        </label>
                                    </div>
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table-bordered table-hover text-center" id="feed-campaign-report-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Unique Click Id</th>
                        <th>Creative Id</th>
                        <th>Campaign Iab</th>
                        <th>Created Time</th>
                        <th>Created Date</th>
                        <th>Current Hour</th>
                        <th>User Os</th>
                        <th>User Device</th>
                        <th>User Browser</th>
                        <th>City</th>
                        <th>Zipcode</th>
                        <th>Region</th>
                        <th>Country</th>
                        <th>Created Ip</th>
                        <th>Publisher Id</th>
                        <th>Created On</th>
                        <th>Publisher Token</th>
                        <th>Publisher Iabcode</th>
                        <th>Website Id</th>
                        <th>Publisher Url</th>
                        <th>Ad Size</th>
                        <th>Ad Url</th>
                        <th>Google Rtb Request Id</th>
                        <th>Imp Id</th>
                        <th>Follower</th>
                        <th>Ad Lang</th>
                        <th>Conversions</th>
                        <th>Audience Type</th>
                        <th>Gaid</th>
                        <th>Final Url</th>
                        <th>Make</th>
                        <th>Model</th>
                        <th>Placement Id</th>
                        <th>Subplacement Id</th>
                        <th>Aff Sub1</th>
                        <th>Feed Sub Id1</th>
                        <th>Feed Sub Id3</th>
                        <th>Feed Sub Id4</th>
                        <th>Feed Sub Id5</th>
                        <th>Feed Sub Id6</th>
                        <th>Feed Sub Id7</th>
                        <th>Feed Sub Id8</th>
                        <th>Feed Sub Id9</th>
                        <th>Feed Sub Id10</th>
                        <th>Feed Sub Id 2</th>
                        <th>Feed Sub Id2</th>
                        <th>Shared</th>
                        <th>User Agent</th>
                        <th>Meta</th>
                        <th>Fb Clickid</th>
                        <th>Payout</th>
                        <th>Redirection Url</th>
                     </tr>
                </thead>
            </table>
        </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() {
    getNativeAdsClicks();
});
['nativeStartDate', 'nativeEndDate'].forEach(function(id) {
    document.getElementById(id).addEventListener('input', function () {
        let today = new Date().toISOString().split("T")[0];
        if (this.value > today) {
            this.value = today; 
        }
    });
});


function getNativeAdsClicks(toggle = false) {
    var startDate           = $('#nativeStartDate').val();
    var endDate             = $('#nativeEndDate').val();
    var websiteIdSearch     = $('#websiteIdSearch').val();
    var creativeIdSearch    = $("#creativeIdSearch").val();
    var metaToggle = $("#metaToggle").prop("checked") ? 1 : 0;
    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": false,
        "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('getNativeAdsClicks') }}",
            "type" : "POST",
            "data" : {
                    _token             : "{{csrf_token()}}",
                    toggle             : toggle,
                    startDate          : startDate,
                    endDate            : endDate,
                    websiteIdSearch    : websiteIdSearch,
                    creativeIdSearch   : creativeIdSearch,
                    metaToggle         : metaToggle,
                },
            "dataType" : "json",
        },
        "columnDefs"    : [
            { orderable : false, targets: '_all' }
                ],
        "columns": [
            { data: "id",
                render: function(data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            { data: "unique_click_id",
                render: function(data, type, row, meta){
                    return ((row.unique_click_id) ? row.unique_click_id : "NA")
                }
            },
            { data: "creative_id",
                render: function(data, type, row, meta){
                    return ((row.creative_id) ? row.creative_id : "NA")
                }
            },
            { data: "campaign_iab",
                render: function(data, type, row, meta){
                    return ((row.campaign_iab) ? row.campaign_iab : "NA")
                }
            },
            { data: "created_time",
                render: function(data, type, row, meta){
                    return ((row.created_time) ? row.created_time : "NA")
                }
            },
            { data: "created_date",
                render: function(data, type, row, meta){
                    return ((row.created_date) ? row.created_date : "NA")
                }
            },
            { data: "current_hour",
                render: function(data, type, row, meta){
                    return ((row.current_hour) ? row.current_hour : "NA")
                }
            },
            { data: "user_os",
                render: function(data, type, row, meta){
                    return ((row.user_os) ? row.user_os : "NA")
                }
            },
            { data: "user_device",
                render: function(data, type, row, meta){
                    return ((row.user_device) ? row.user_device : "NA")
                }
            },
            { data: "user_browser",
                render: function(data, type, row, meta){
                    return ((row.user_browser) ? row.user_browser : "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: "region",
                render: function(data, type, row, meta){
                    return ((row.region) ? row.region : "NA")
                }
            },
            { data: "country",
                render: function(data, type, row, meta){
                    return ((row.country) ? row.country : "NA")
                }
            },
            { data: "created_ip",
                render: function(data, type, row, meta){
                    return ((row.created_ip) ? row.created_ip : "NA")
                }
            },
            { data: "publisher_id",
                render: function(data, type, row, meta){
                    return ((row.publisher_id) ? row.publisher_id : "NA")
                }
            },
            { data: "created_on",
                render: function(data, type, row, meta){
                    return ((row.created_on) ? row.created_on : "NA")
                }
            },
            { data: "publisher_token",
                render: function(data, type, row, meta){
                    return ((row.publisher_token) ? row.publisher_token : "NA")
                }
            },
            { data: "publisher_iabcode",
                render: function(data, type, row, meta){
                    return ((row.publisher_iabcode) ? row.publisher_iabcode : "NA")
                }
            },
            { data: "website_id",
                render: function(data, type, row, meta){
                    return ((row.website_id) ? row.website_id : "NA")
                }
            },
            { data: "publisher_url",
                render: function(data, type, row, meta){
                    return ((row.publisher_url) ? row.publisher_url : "NA")
                }
            },
            { data: "ad_size",
                render: function(data, type, row, meta){
                    return ((row.ad_size) ? row.ad_size : "NA")
                }
            },
            { data: "ad_url",
                render: function(data, type, row, meta){
                    return ((row.ad_url) ? row.ad_url : "NA")
                }
            },
            { data: "google_rtb_request_id",
                render: function(data, type, row, meta){
                    return ((row.google_rtb_request_id) ? row.google_rtb_request_id : "NA")
                }
            },
            { data: "imp_id",
                render: function(data, type, row, meta){
                    return ((row.imp_id) ? row.imp_id : "NA")
                }
            },
            { data: "follower",
                render: function(data, type, row, meta){
                    return ((row.follower) ? row.follower : "NA")
                }
            },
            { data: "ad_lang",
                render: function(data, type, row, meta){
                    return ((row.ad_lang) ? row.ad_lang : "NA")
                }
            },
            { data: "conversions",
                render: function(data, type, row, meta){
                    return ((row.conversions) ? row.conversions : "NA")
                }
            },
            { data: "audience_type",
                render: function(data, type, row, meta){
                    return ((row.audience_type) ? row.audience_type : "NA")
                }
            },
            { data: "gaid",
                render: function(data, type, row, meta){
                    return ((row.gaid) ? row.gaid : "NA")
                }
            },
            { data: "final_url",
                render: function(data, type, row, meta){
                    return ((row.final_url) ? row.final_url : "NA")
                }
            },
            { data: "make",
                render: function(data, type, row, meta){
                    return ((row.make) ? row.make : "NA")
                }
            },
            { data: "model",
                render: function(data, type, row, meta){
                    return ((row.model) ? row.model : "NA")
                }
            },
            { data: "placement_id",
                render: function(data, type, row, meta){
                    return ((row.placement_id) ? row.placement_id : "NA")
                }
            },
            { data: "subplacement_id",
                render: function(data, type, row, meta){
                    return ((row.subplacement_id) ? row.subplacement_id : "NA")
                }
            },
            { data: "aff_sub1",
                render: function(data, type, row, meta){
                    return ((row.aff_sub1) ? row.aff_sub1 : "NA")
                }
            },
            { data: "feed_sub_id1",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id1) ? row.feed_sub_id1 : "NA")
                }
            },
            { data: "feed_sub_id3",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id3) ? row.feed_sub_id3 : "NA")
                }
            },
            { data: "feed_sub_id4",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id4) ? row.feed_sub_id4 : "NA")
                }
            },
            { data: "feed_sub_id5",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id5) ? row.feed_sub_id5 : "NA")
                }
            },
            { data: "feed_sub_id6",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id6) ? row.feed_sub_id6 : "NA")
                }
            },
            { data: "feed_sub_id7",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id7) ? row.feed_sub_id7 : "NA")
                }
            },
            { data: "feed_sub_id8",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id8) ? row.feed_sub_id8 : "NA")
                }
            },
            { data: "feed_sub_id9",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id9) ? row.feed_sub_id9 : "NA")
                }
            },
            { data: "feed_sub_id10",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id10) ? row.feed_sub_id10 : "NA")
                }
            },
            { data: "feed_sub_id_2",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id_2) ? row.feed_sub_id_2 : "NA")
                }
            },
            { data: "feed_sub_id2",
                render: function(data, type, row, meta){
                    return ((row.feed_sub_id2) ? row.feed_sub_id2 : "NA")
                }
            },
            { data: "shared",
                render: function(data, type, row, meta){
                    return ((row.shared) ? row.shared : "NA")
                }
            },
            { data: "user_agent",
                render: function(data, type, row, meta){
                    return ((row.user_agent) ? row.user_agent : "NA")
                }
            },
            { data: "meta",
                render: function(data, type, row, meta){
                    return ((row.meta) ? row.meta : "NA")
                }
            },
            { data: "fb_clickid",
                render: function(data, type, row, meta){
                    return ((row.fb_clickid) ? row.fb_clickid : "NA")
                }
            },
            { data: "payout",
                render: function(data, type, row, meta){
                    return ((row.payout) ? row.payout : "NA")
                }
            },
            { data: "redirection_url",
                render: function(data, type, row, meta){
                    return ((row.redirection_url) ? row.redirection_url : "NA")
                }
            },
        ],
        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",".nativeAdsClicksSubmit",function(e){
    e.preventDefault()
    getNativeAdsClicks();
});


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

$("body").on("change", ".ToggleActiveFilter", function(){
    let toggle  =   $('#mysqlClickhouse-1').is(":checked");
    getNativeAdsClicks(toggle);
});

$("body").on("click", "#refreshNativeAdsClicks", function () {
    // Reset date pickers
    $("#nativeStartDate").val("");
    $("#nativeEndDate").val("");

    // Reset text inputs
    $("#creativeIdSearch").val("");
    $("#websiteIdSearch").val("");

    // Reset checkbox (Meta toggle)
    $("#metaToggle").prop("checked", false);

    // Reset radio buttons (Mysql/Clickhouse → Mysql default)
    $("#mysqlClickhouse-1").prop("checked", true);
    $("#mysqlClickhouse-2").prop("checked", false);

    //To reload the data
    getNativeAdsClicks();
});


</script>
@endsection