@extends('layouts.app')

@section('appjs')
<script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection
@section('content')
@section('page_title')
Whistle Feed Publisher Report
@endsection
<style>
    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: #e8ebed;
    }

    .btn-light,
    .btn-light:hover,
    .btn-light:focus,
    .btn-light:not(:disabled):not(.disabled):active,
    .btn-light:not(:disabled):not(.disabled).active,
    .show>.btn-light.dropdown-toggle {
        background-color: #fff;
        border-color: #ced4da;
    }

    .bootstrap-select>.dropdown-toggle.bs-placeholder,
    .bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
        color: #495057 !important;
    }

    .bootstrap-select .dropdown-menu {
        min-width: 100% !important;
    }

    .dataTables_scroll {
        overflow: auto;
    }
    #report-main-table_filter{
        margin-top: -10px;
        margin-bottom: 0px !important;
    }
    .small{
        float: left;
        margin-top: -15px;
    }
    .pencil-input{
        width : 100% !important;
    }
    .pubSelectedOption{
        margin-top : 15px;
        min-width  : 20px;
    }
    input:read-only{
        cursor      : pointer;
        margin-top  : 13px;
        margin-left : -6px;
    }
    .checkboxLabel{
       font-size : 15px;
       width     : 150px;
    }
    .pubFeedSubReport{
        height       : 27px;
        float        : right;
        margin-left  : -20px;
        margin-right : 10px;
    }
    .export-feedpublishersourcingurlreport{
        height: 27px;
    }
    .creative_datatable, .dataTables_wrapper, .hourly_based_Publisher_child_table, .bottom {
       margin-top: 0 !important;
       background-color:#fff;
    }
</style>
@php
    $websiteIds = explode(',', env('PUBLISHER_PLACEMENT_WEBSITE_IDS'));
@endphp

<div class="container-fluid">
    <div class="card mt-4">
        <div class="card-body table-responsive">
            <div class="row meta-assets-dropdown">
                <div class="form-group" style="min-width: 200px;">@include('whistle_feed.menu_dropdown.metadropdown')</div>
            </div>
            <table class="table-bordered table-hover text-center" id="report-main-table">
                <thead>
                    <tr>
                        <th>Creative Details</th> 
                        <th>Sl.No</th>              <!-- 1 -->
                        <th>Campaign ID</th>        <!-- 2 -->
                        <th>Brand Name</th>         <!-- 3 -->
                        <th>Mata Campaign ID</th>   <!-- 4 -->
                        <th>Account Number</th>     <!-- 5 -->
                        <th>Campaign URL</th>       <!-- 6 -->
                        <th>Pixel URL</th>       <!-- 6 -->                       
                    </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>
<script type="application/javascript">
$(document).ready(function() {
    //all records displaying here
    feedPublisherSubReport();

    function feedPublisherSubReport() {
        var start_date  =   $('#start_date').val();
        var end_date    =   $('#end_date').val();
        $("#report-main-table").DataTable().clear().destroy();
        $('#report-main-table').DataTable({
            "processing": true,
            "lengthChange": false,
            "serverSide": true,
            "paging": true,
            "searching": true,
            "scrollX": true,
            "pageLength": 50,
            "ordering": true,
            "lengthChange": false, 
            "scrollY":  400,
            "scrollCollapse": true,
            "fixedHeader":{ header: true},
            "language": { search: "",searchPlaceholder: "Search..." },
            "ajax": {
                "url"  : "{{ url('meta-campaigns') }}",
                "type" : "POST",
                "data" : {
                        _token             : "{{csrf_token()}}",
                        "start_date"       : start_date,
                        "end_date"         : end_date
                    },
                "dataType" : "json",
            },
            "order": [[ 2, "desc" ]],
            "columnDefs"    : [
                { orderable : true, targets: '_all' }
                    ],
            "columns": [
                {
                    data: "id",
                    "defaultContent": '<a href="#!"> <i class="fa fa-plus-circle greenIcon" aria-hidden="true"> </i> </a> <a href"#!> Download hour</a>',
                    render: function(data, type, row, meta) {
                            return `
                                <span class="creative_data m-2">
                                    <a href="#!">
                                    <i class="fa fa-plus-circle greenIcon" aria-hidden="true" data-id="${row.id}" 
                                        data-account_number="${row.meta_account_number}"></i>
                                    </a>
                                </span>
                            `;
                                
                    }
                },
                { 
                    data: "id",
                    render: function(data, type, row, meta) {
                    // serial number (index + pagination start)
                    return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { 
                    data: "id",
                    render: function(data, type, row, meta){
                    return ((row.id) ? row.id : "NA");
                    }
                },
                { 
                    data: "brandname",
                    render: function(data, type, row, meta){
                    return ((row.brandname) ? row.brandname : "NA");
                    }
                },
                { 
                    data: "meta_campaign_id",
                    render: function(data, type, row, meta){
                    return ((row.meta_campaign_id) ? row.meta_campaign_id : "NA");
                    }
                },
                { 
                    data: "meta_account_number",
                    render: function(data, type, row, meta){
                    return ((row.meta_account_number) ? row.meta_account_number : "NA");
                    }
                },
                { 
                    data: "campaign_redirection_url",
                    render: function(data, type, row, meta){
                        return `<button type="button" onclick="campaignRedirect('${row.meta_campaign_id}','${row.meta_account_number}')" 
                                class="btn btn-sm btn-primary shadow-sm open-reject-modal" 
                                style="width:120px">
                                Redirect 
                            </button>`;
                    }
                },
                { 
                    data: "pixel_redirection_url",
                    render: function(data, type, row, meta){
                        return `<button type="button" onclick="pixelRedirect('${row.meta_pixel_id}','${row.meta_account_number}')" 
                                class="btn btn-sm btn-primary shadow-sm open-reject-modal" 
                                style="width:120px">
                                Redirect 
                            </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 );
            }
        });
    }
});


$('body').on('click', '.creative_data', function() {
    var table = $("#report-main-table").DataTable();
    var tr = $(this).closest('tr');
    var row = table.row(tr);

    var campaign_id  = $(this).find('i').data('id');
    var meta_acc_no  = $(this).find('i').data('account_number');

    // ✅ If this row is already open, just close it and return
    if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
        $("i", this).removeClass("fa-minus-circle redIcon")
                    .addClass("fa-plus-circle greenIcon");
        return;  // stop here
    }

    // ✅ Otherwise close any other open rows first
    // table.rows().every(function () {
    //     if (this.child.isShown()) {
    //         this.child.hide();
    //         $(this.node()).removeClass('shown');
    //         $("i", $(this.node())).removeClass("fa-minus-circle redIcon")
    //                               .addClass("fa-plus-circle greenIcon");
    //     }
    // });

    // ✅ Open this row now
    row.child('<div id="creative_datatable"><table class="table table-small-font table-bordered hourly_based_Publisher_child_table text-center" id="childtable-creative_data-'+campaign_id+'" width="50%" ></table></div>').show();
    tr.addClass('shown');
    $("i", this).removeClass("fa-plus-circle greenIcon")
                .addClass("fa-minus-circle redIcon");

    $.ajax({
        type: 'POST',
        url: "{{url('meta-creatives')}}",
        dataType: "json",
        data: {
            _token: "{{csrf_token()}}",
            "campaign_id"   : campaign_id
        },
        success: function(detailsData) {
            $('#childtable-creative_data-'+campaign_id).DataTable({
                data: detailsData.data,
                paging: false,
                deferRender: true,
                lengthChange: false,
                bSort: false,
                bInfo: false,
                searching: false,
                bAutoWidth: false,
                order: [],
                columns: [
                    {
                        title: 'S.no',
                        data:  "id",
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    { title: 'Creative ID', data: 'id' },
                    { title: 'Creative Name', data: 'creative_name' },
                    { title: 'Meta Ads ID', data: 'meta_ads_id' },
                    { title: 'Meta Page ID', data: 'meta_page_id' },
                    {
                        title: 'Redirection URL',
                        data: 'id',
                        render: function(data, type, row, meta){
                            return `<button type="button" onclick="creativeRedirect('${row.meta_ads_id}','${meta_acc_no}')" 
                                    class="btn btn-sm btn-primary shadow-sm open-reject-modal" 
                                    style="width:120px">Redirect</button>`;
                        }
                    },
                ]
            });
        }
    });
});

function campaignRedirect(campID, accNO) {
    let url = `https://adsmanager.facebook.com/adsmanager/manage/campaigns?act=${accNO}&business_id=1301304427783329&global_scope_id=1301304427783329&selected_campaign_ids=${campID}`;
    window.open(url, '_blank'); // opens in new tab
}

function creativeRedirect(creaID, accNO) {
    let url = `https://adsmanager.facebook.com/adsmanager/manage/ads?act=${accNO}&business_id=1301304427783329&global_scope_id=1301304427783329&selected_ad_ids=${creaID}`;
    window.open(url, '_blank'); // opens in new tab
}

function pixelRedirect(pixelId, accNO) {
    let url = `https://business.facebook.com/events_manager2/list/pixel/${pixelId}/overview?business_id=1301304427783329&global_scope_id=1301304427783329&act=${accNO}&nav_source=scope`;
    window.open(url, '_blank'); // opens in new tab
}

</script>
@endsection