@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;
}
.model-flex-wrapper {
  display: flex;
  gap: 20px;               /* space between Creative + Campaign sections */
  align-items: flex-start; /* align headings at top */
}

.model-div-flex {
  flex: 1; /* equal width */
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  padding: 10px;
  overflow-y: auto;
  max-height: 80vh; /* scroll if content is too tall */
}

.model-div-flex .modal-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.modal-footer.footerwidth {
  display: block;       /* ensure it's block */
  text-align: center;   /* center the button */
}
/* Responsive: stack vertically on smaller screens */
@media (max-width: 992px) {
  .model-flex-wrapper {
    flex-direction: column;
  }
}

 .square-size {
        height: 100px;
        width: 100px;
    }
    .default-size {
        height: 100%;
        width: 100%;
    }
.exportFeedApprovalsReport{
    height: 29px;
}
.max_width{
    padding-bottom: 16px;
    display: flex;
    align-items: end;
    justify-content: end;
}
.nativeAdsApprovalsSubmit, .nativeAdsApprovalRefresh{
    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;
}
  #VideoPreview1{
        max-width : 250px;
        height    : 200px;
        object-fit: contain;
    }
.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=pending]:checked ~ .glider{
    transform: translateX(0);
}

.mysql_clickhouse_toggle input[id=action_done]: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-2">@include('whistle_feed.menu_dropdown.approval')</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="nativeAdsApprovalsSubmit btn excel-btn btn-sm border-0 border-radius-0 ">
                    Run Report
                </button> --}}
                <button type="submit" class="nativeAdsApprovalRefresh btn excel-btn btn-sm border-0 border-radius-0 ">
                    Refresh
                </button>
            {{-- @can('hasExcelPermission')
                    <button type="submit" class="exportFeedApprovalsReport 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="pending" name="tabs-1" checked="">
                            <label class="tab" for="pending">Pending</label>
                            <input type="radio" class="ToggleActiveFilter" id="action_done" name="tabs-1">
                            <label class="tab" for="action_done">Completed</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> --}}
                        </div>
                    </div>
                </div>
            </div>
            <table class="table-bordered table-hover text-center" id="feed-campaign-approvals-table">
                <thead>
                    <tr>
                        <th>Sl.No</th>
                        <th>Asset Type</th>
                        <th>ID</th>
                        <th>Request Type</th>
                        <th>Created Time</th>
                        <th>Created By</th>
                        <th>Action</th>                        
                     </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<!-- Add Reject Reason modal start-->
<div class="modal fade" tabindex="-1" role="dialog" id="RejectReasonModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <label class="float-lg-right">ID: <span class="modal-campID"></span></label>
                <label>Reason<span class="redIcon"> *</span></label>
                <input type="hidden" id="username" name="username" value="">
                <input type="hidden" id="email" name="email" value="">
                <input type="hidden" id="asset" name="asset" value="">
                <textarea id="rejected-reason-txt" class="form-control" autocomplete="off" style="height: 100px;" maxlength="100"></textarea>
                <span class="charcount small pull-right greenIcon" id="charcount"></span>
                <span class="reason-error redIcon"></span>
            </div>

            <div class="modal-footer footerwidth">
                <a type="button" class="btn btn-default btn-sm c-btn" id="modal-close" data-dismiss="modal">Close</a>
                <a type="button" class="btn btn-primary btn-sm text-white" onclick="addRejectedReason()">Submit</a>
            </div>
        </div>
    </div>
</div>
<!-- Add Reject Reason modal end -->

<!--view details about campaign  modal start-->
<div class="modal fade" tabindex="-1" role="dialog" id="viewCampaignData">
    <div class="modal-dialog max-width700" role="document">
        <div class="modal-content">
            <!-- Modal body -->
            <div class="modal-body">
                <h5 class="modal-title text-center">Campaign 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">Campaign ID</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="view-modal-campID" >NA</p></div>
                </div>
                <div class="row mb-1">
                    <label class="col-sm-3 control-label">Industry</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-industry" >NA</p></div>
                </div>
                <div class="row mb-1">
                    <label class="col-sm-3 control-label">Brand Name</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-brand">NA</p></div>
                </div>
                <div class="row mb-1">
                    <label class="col-sm-3 control-label">Campaign Group</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-group">NA</p></div>
                </div>
                <div class="row mb-1">
                    <label class="col-sm-3 control-label">Campaign Sub Group</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-subgroup">NA</p></div>
                </div>
                <div class="row mb-1">
                    <label class="col-sm-3 control-label campaign_type">Campaign Type</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-campaign-type">NA</p></div>
                </div>
                <div class="row mb-1 meta_filters">
                    <label class="col-sm-3 control-label campaign_type">Meta Type</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-meta-type">NA</p></div>
                </div>
                <div class="row mb-1 meta_filters">
                    <label class="col-sm-3 control-label campaign_type">Meta Ad Account</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-meta-ad-account">NA</p></div>
                </div>
                <div class="row mb-1 meta_filters">
                    <label class="col-sm-3 control-label campaign_type">Meta Campaign Id</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-meta-campaign-id">NA</p></div>
                </div>
                <div class="row mb-1 meta_filters">
                    <label class="col-sm-3 control-label campaign_type">Meta Adset Id</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-meta-adset-id">NA</p></div>
                </div>
                <div class="row mb-1 not_meta_filters">
                    <label class="col-sm-3 control-label" id="oemChannel">Inventory Type</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-oem-channel">NA</p></div>
                </div>
                <div class="row mb-1 inventoryType">
                    <label class="col-sm-3 control-label">Inventory Type</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-inventory-type">NA</p></div>
                </div>
                <div class="row mb-1 placement non_oem">
                    <label class="col-sm-3 control-label">Placement</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-placement-name">NA</p></div>
                </div>
                <div class="row mb-1 sub_placement">
                    <label class="col-sm-3 control-label">Sub Placement</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-sub-placement-name">NA</p></div>
                </div>
                <div class="row mb-1 campaign_website_bundle not_meta_filters">
                    <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 campaign_website_bundle not_meta_filters">
                    <label class="col-sm-3 control-label">Campaign Bundle Id</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-campaign-package">NA</p></div>
                </div>
                <div class="row mb-1 meta_filters">
                    <label class="col-sm-3 control-label">Target By Country</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-country">NA</p></div>
                </div>
                <div class="row mb-1 TileOEM OemText">
                    <label class="col-sm-3 control-label">Target By State</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 TileOEM OemText">
                    <label class="col-sm-3 control-label">Target By City</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 OEM_platform_device not_meta_filters">
                    <label class="col-sm-3 control-label">Target By Platform</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-platform">NA</p></div>
                </div>
                <div class="row mb-1 OEM_platform_device not_meta_filters">
                    <label class="col-sm-3 control-label">Target By Device</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8">
                    <p class="modal-device">NA</p>
                    </div>
                </div>
                <div class="row mb-1 meta_filters">
                    <label class="col-sm-3 control-label">Meta Interest</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8">
                    <p class="modal-meta-interest">NA</p>
                    </div>
                </div>
                <div class="row mb-1 meta_filters">
                    <label class="col-sm-3 control-label">Meta Behaviors </label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8">
                    <p class="modal-meta-behaviours">NA</p>
                    </div>
                </div>
                <div class="row meta_filters">
                    <label class="col-sm-3 control-label">Min Age</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-2"><p class="modal-min-age">NA</p></div>
                </div>
                <div class="row meta_filters">
                    <label class="col-sm-3 control-label">Max Age</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-2"><p class="modal-max-age">NA</p></div>
                </div>
                <div class="row mb-1 TileOEM_Make not_meta_filters">
                    <label class="col-sm-3 control-label">Make Names</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_Make not_meta_filters">
                    <label class="col-sm-3 control-label">Model Names</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 TileOEM_Carrier">
                    <label class="col-sm-3 control-label">Target By 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 TileOEM_Make tileOEM_Gaid">
                    <label class="col-sm-3 control-label">Target By GAID's</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-gaid">NA</p></div>
                </div>
                <div class="row mb-1 brands_select">
                    <label class="col-sm-3 control-label">Target By 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">Bid Type</label>
                    <label class="col-sm-1">:</label>
                <div class="col-sm-8">
                <p class="modal-bid-type">NA</p>
                </div>
                </div>
                <div class="row">
                    <label class="col-sm-3 control-label">Bid Price</label>
                    <label class="col-sm-1">:</label>

                    <div class="col-sm-2"><p class="modal-bid-price">NA</p></div>

                </div>
                <div class="row mb-1">
                    <label class="col-sm-3 control-label" id="budgetLabel">Daily Campaign Budget</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-budget">NA</p></div>
                </div>
                <div class="row TileOEM dateFields tileOEM_date">
                    <label class="col-sm-3 control-label">Start Date</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-2"><p class="modal-start-date">NA</p></div>

                    <label class="col-sm-2 control-label">End Date</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-3"><p class="modal-end-date">NA</p></div>
                </div>
                <div class="row mb-1 payable_event">
                    <label class="col-sm-3 control-label">Payable Event</label>
                    <label class="col-sm-1">:</label>
                    <div class="col-sm-8"><p class="modal-payable">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 about campaign  modal start-->

<!--view details about campaign  modal start-->
<div class="modal fade" tabindex="-1" role="dialog" id="viewCreativeData">
    <div class="modal-dialog modal-xl" role="document"> <!-- modal-xl for extra width -->
        <div class="modal-content">
            <div class="model-flex-wrapper">
                <!-- Modal body -->
                <div class="model-div-flex">
                    <div class="modal-body">
                        <h5 class="modal-title text-center">
                            Creative Details
                        </h5>
                        <hr>
            
                        <div class="row mb-1">
                            <label class="col-sm-4 control-label">Campaign ID</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-campaign-id" >NA</p></div>
                        </div>
                        <div class="row mb-1">
                            <label class="col-sm-4 control-label">Brand Name</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-brand-name" >NA</p></div>
                        </div>
                        <div class="row mb-1">
                            <label class="col-sm-4 control-label">Creative ID</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all view-modal-creativeID" >NA</p></div>
                        </div>
                        <div class="row mb-1">
                            <label class="col-sm-4 control-label">Creative Name</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-creat-name" >NA</p></div>
                        </div>

                        <!-- Meta Columns -->
                        <div class="row mb-1 creative_meta_filters ">
                            <label class="col-sm-4 control-label">Meta Page ID</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-page-id" >NA</p></div>
                        </div>
                        <div class="row mb-1 creative_meta_filters">
                            <label class="col-sm-4 control-label">Meta Ads ID</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-ads-id" >NA</p></div>
                        </div>
                        <div class="row mb-1 creative_meta_filters">
                            <label class="col-sm-4 control-label">Meta Creative ID</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-creative-id" >NA</p></div>
                        </div>
                        <div class="row mb-1 creative_meta_filters">
                            <label class="col-sm-4 control-label">Primary Text</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-primary-text" >NA</p></div>
                        </div>
                        <div class="row mb-1 creative_meta_filters">
                            <label class="col-sm-4 control-label">Headline</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-headline" >NA</p></div>
                        </div>
                        <div class="row mb-1 creative_meta_filters">
                            <label class="col-sm-4 control-label">Description</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-description" >NA</p></div>
                        </div>
                        <div class="row mb-1 creative_meta_filters">
                            <label class="col-sm-4 control-label">CTA (Call To Action)</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-cta" >NA</p></div>
                        </div>
                        <div class="row mb-1 creative_meta_filters">
                            <label class="col-sm-4 control-label">Link</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-landing-url" >NA</p></div>
                        </div>
                        <!-- Meta column ends -->

                        <!-- OEM/Ad column starts -->
                        <div class="row mb-1 creative_oem_ad_filters">
                            <label class="col-sm-4 control-label">Creative Language</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-lang">NA</p></div>
                        </div>
                        <div class="row mb-1 creative_oem_ad_filters headline">
                            <label class="col-sm-4 control-label" id="headline_label">Headline</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-headline">NA</p></div>
                        </div>
                        <div class="row mb-1 creative_oem_ad_filters description">
                            <label class="col-sm-4 control-label" id="subtext_label">Description</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-subtext">NA</p></div>
                        </div>
                        <div class="row mb-1 creative_oem_ad_filters disclaimer">
                            <label class="col-sm-4 control-label">Disclaimer</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-disclaimer">NA</p></div>
                        </div>
                        <div class="row mb-1 creative_oem_ad_filters CTA">
                            <label class="col-sm-4 control-label">CTA (Call To Action)</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-cta">NA</p></div>
                        </div>
                        <div class="row mb-1 creative_oem_ad_filters">
                            <label class="col-sm-4 control-label">Tracking Link</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-link">NA</p></div>
                        </div>
                        <div class="row mb-1 creative_oem_ad_filters vta">
                            <label class="col-sm-4 control-label">Impression PostBack</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-vta">NA</p></div>
                        </div>
                        <div class="row mb-1 creative_oem_ad_filters">
                            <label class="col-sm-4 control-label" id="redirection_label">Landing Url</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-landing" id="tracker2">NA</p></div>
                        </div>
                        <div class="row mb-1 creative_oem_ad_filters image_size_div">
                            <label class="col-sm-4 control-label">Dimension</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7"><p class="word-break-all modal-dimension" id="dimension">NA</p></div>
                        </div>
                        <!-- OEM/Ad column ends -->
                        <div class="row mb-1 videoPreview">
                            <label for="" class="col-sm-4 control-label">Video Preview</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7">
                                <div class="row" id="previewSection2">
                                    <div class="col-sm-3 mb-10">
                                        <div class="gallaryimg">
                                            <div class="gallary-inner-div">
                                                <video id="VideoPreview1" class="smallvideo" controls></video>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-1 icon_preview">
                            <label for="" class="col-sm-4 control-label">Icon Preview</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7">
                                <img src="" alt="" id="IconPreview1" class="square-size">
                            </div>
                        </div>
                        <div class="row mb-1 tilePreview oem_text_image">
                            <label for="" class="col-sm-4 control-label">Ad Preview</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-7">
                                <img src="" alt="" id="ImgPreview1" class="default-size">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="model-div-flex">
                    <div class="modal-body">
                        <h5 class="modal-title text-center">Campaign Details</h5>
                        <hr>

                        <div class="row mb-1">
                            <label class="col-sm-3 control-label">Campaign ID</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="view-modal-campID" >NA</p></div>
                        </div>
                        <div class="row mb-1">
                            <label class="col-sm-3 control-label">Industry</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-industry" >NA</p></div>
                        </div>
                        <div class="row mb-1">
                            <label class="col-sm-3 control-label">Brand Name</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-brand">NA</p></div>
                        </div>
                        <div class="row mb-1">
                            <label class="col-sm-3 control-label">Campaign Group</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-group">NA</p></div>
                        </div>
                        <div class="row mb-1">
                            <label class="col-sm-3 control-label">Campaign Sub Group</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-subgroup">NA</p></div>
                        </div>
                        <div class="row mb-1">
                            <label class="col-sm-3 control-label campaign_type">Campaign Type</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-campaign-type">NA</p></div>
                        </div>
                        <div class="row mb-1 meta_filters">
                            <label class="col-sm-3 control-label campaign_type">Meta Type</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-meta-type">NA</p></div>
                        </div>
                        <div class="row mb-1 meta_filters">
                            <label class="col-sm-3 control-label campaign_type">Meta Ad Account</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-meta-ad-account">NA</p></div>
                        </div>
                        <div class="row mb-1 meta_filters">
                            <label class="col-sm-3 control-label campaign_type">Meta Campaign Id</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-meta-campaign-id">NA</p></div>
                        </div>
                        <div class="row mb-1 meta_filters">
                            <label class="col-sm-3 control-label campaign_type">Meta Adset Id</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-meta-adset-id">NA</p></div>
                        </div>
                        <div class="row mb-1 not_meta_filters">
                            <label class="col-sm-3 control-label" id="oemChannel">Inventory Type</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-oem-channel">NA</p></div>
                        </div>
                        <div class="row mb-1 inventoryType">
                            <label class="col-sm-3 control-label">Inventory Type</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-inventory-type">NA</p></div>
                        </div>
                        <div class="row mb-1 placement non_oem">
                            <label class="col-sm-3 control-label">Placement</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-placement-name">NA</p></div>
                        </div>
                        <div class="row mb-1 sub_placement">
                            <label class="col-sm-3 control-label">Sub Placement</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-sub-placement-name">NA</p></div>
                        </div>
                        <div class="row mb-1 campaign_website_bundle not_meta_filters">
                            <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 campaign_website_bundle not_meta_filters">
                            <label class="col-sm-3 control-label">Campaign Bundle Id</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-campaign-package">NA</p></div>
                        </div>
                        <div class="row mb-1 meta_filters">
                            <label class="col-sm-3 control-label">Target By Country</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-country">NA</p></div>
                        </div>
                        <div class="row mb-1 TileOEM OemText">
                            <label class="col-sm-3 control-label">Target By State</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 TileOEM OemText">
                            <label class="col-sm-3 control-label">Target By City</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 OEM_platform_device not_meta_filters">
                            <label class="col-sm-3 control-label">Target By Platform</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-platform">NA</p></div>
                        </div>
                        <div class="row mb-1 OEM_platform_device not_meta_filters">
                            <label class="col-sm-3 control-label">Target By Device</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8">
                            <p class="modal-device">NA</p>
                            </div>
                        </div>
                        <div class="row mb-1 meta_filters">
                            <label class="col-sm-3 control-label">Meta Interest</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8">
                            <p class="modal-meta-interest">NA</p>
                            </div>
                        </div>
                        <div class="row mb-1 meta_filters">
                            <label class="col-sm-3 control-label">Meta Behaviors </label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8">
                            <p class="modal-meta-behaviours">NA</p>
                            </div>
                        </div>
                        <div class="row meta_filters">
                            <label class="col-sm-3 control-label">Min Age</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-2"><p class="modal-min-age">NA</p></div>
                        </div>
                        <div class="row meta_filters">
                            <label class="col-sm-3 control-label">Max Age</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-2"><p class="modal-max-age">NA</p></div>
                        </div>
                        <div class="row mb-1 TileOEM_Make not_meta_filters">
                            <label class="col-sm-3 control-label">Make Names</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_Make not_meta_filters">
                            <label class="col-sm-3 control-label">Model Names</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 TileOEM_Carrier">
                            <label class="col-sm-3 control-label">Target By 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 TileOEM_Make tileOEM_Gaid">
                            <label class="col-sm-3 control-label">Target By GAID's</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-gaid">NA</p></div>
                        </div>
                        <div class="row mb-1 brands_select">
                            <label class="col-sm-3 control-label">Target By 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">Bid Type</label>
                            <label class="col-sm-1">:</label>
                        <div class="col-sm-8">
                        <p class="modal-bid-type">NA</p>
                        </div>
                        </div>
                        <div class="row">
                            <label class="col-sm-3 control-label">Bid Price</label>
                            <label class="col-sm-1">:</label>

                            <div class="col-sm-2"><p class="modal-bid-price">NA</p></div>

                        </div>
                        <div class="row mb-1">
                            <label class="col-sm-3 control-label" id="budgetLabel">Daily Campaign Budget</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-budget">NA</p></div>
                        </div>
                        <div class="row TileOEM dateFields tileOEM_date">
                            <label class="col-sm-3 control-label">Start Date</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-2"><p class="modal-start-date">NA</p></div>

                            <label class="col-sm-2 control-label">End Date</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-3"><p class="modal-end-date">NA</p></div>
                        </div>
                        <div class="row mb-1 payable_event">
                            <label class="col-sm-3 control-label">Payable Event</label>
                            <label class="col-sm-1">:</label>
                            <div class="col-sm-8"><p class="modal-payable">NA</p></div>
                        </div>
                    </div>
                </div> 
            </div>
            <br>
            <br>
            <br>
            <!-- Footer is now separate and stays block-level -->
            <div class="modal-footer footerwidth text-center">
                <a type="button" class="btn btn-default c-btn pauseVideo" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>
<!--view details about campaign  modal start-->

<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() {
    getNativeAdsApprovals();
});

function getNativeAdsApprovals() {
    var startDate = $('#nativeStartDate').val();
    var endDate   = $('#nativeEndDate').val();
    let toggle  =   $('#pending').is(":checked");
    let orderColumnIndex = toggle ? 4 : 7;

    $('.exportFeedApprovalsReport').removeAttr('disabled');
    $('.exportFeedApprovalsReport').removeClass('bg-secondary');

    // Destroy previous DataTable
    if ($.fn.DataTable.isDataTable("#feed-campaign-approvals-table")) {
        $("#feed-campaign-approvals-table").DataTable().clear().destroy();
    }

    // Build header dynamically
    let tableHead = `
        <tr>
            <th>Sl.No</th>
            <th>Asset Type</th>
            <th>ID</th>
            <th>Request Type</th>
            <th>Created Time</th>
            <th>Created By</th>
    `;

    if (!toggle) {
        tableHead += `
            <th>Action By</th>
            <th>Updated Time</th>
            <th>Reason</th>
        `;
    }

    tableHead += `
            <th>Action</th>
        </tr>
    `;

    $("#feed-campaign-approvals-table thead").html(tableHead);

    // Build columns dynamically (same count as <th>)
    let columns = [
        { data: "id",
            render: function(data, type, row, meta) {
                return meta.row + meta.settings._iDisplayStart + 1;
            }
        },
        { data: "asset_type", render: d => (d ? ucfirst(d) : "NA") },
        { 
            data: "c_id", 
            render: function(data, type, row, meta) {
                if (!data) return "NA";
                if (row.asset_type === "campaign") {
                    return '<span class="custom-tooltip" data-toggle="tooltip" title="View Campaign Details" onclick="viewCampaignData('+data+')">' +
                        '<i class="fa fa-eye" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp;' + data +
                        '</span>';
                }
                if (row.asset_type === "creative") {
                    return '<span class="custom-tooltip" data-toggle="tooltip" title="View Creative Details" onclick="viewCreativeData('+data+')">' +
                        '<i class="fa fa-eye" aria-hidden="true"></i> &nbsp;&nbsp;&nbsp;' + data +
                        '</span>';
                }
                return data;
            } 
        },
        { data: "type", 
            render: function(data, type, row, meta){ 
                return row.type ==1 ? '<span class="text-success">Initial Request</span>' : '<span class="text-warning">Updated Request</span>'
            }
        },
        { data: "created_on", render: d => (d ? d : "NA") },
        { data: "created_by", render: d => (d ? d : "NA") },
    ];

    if (!toggle) {
        columns.push(
            { data: "action_by", render: d => (d ? d : "NA") },
            { data: "updated_on", render: d => (d ? d : "NA") },
            { data: "reason", render: d => (d ? d : "NA") }
        );
    }

    let order;

    if (toggle) {
        columns.push({
            data: "action",
            render: function(data, type, row, meta) {
                return `
                    <button type='button' class='approval-button btn btn-success btn-sm approve-button-${row.c_id} rounded-pill shadow-sm' row-id='${row.c_id}' row-asset='${row.asset_type}' approval-button-val='1'>Approve</button>
                    <button type='button' class='approval-button reject-button-${row.c_id} btn btn-danger btn-sm rounded-pill shadow-sm' row-id='${row.c_id}' row-asset='${row.asset_type}' row-username='${row.created_by}' row-email='${row.email}' approval-button-val='2'>Reject</button>
                `;
            }
        });
    } else {
        columns.push({
            data: "action",
            render: function(data, type, row, meta) {
                if(row.action == 1){
                    data = '<label class="badge badge-success">&nbsp;&nbsp;Approved&nbsp;&nbsp;</label>';
                }else if(row.action == 2){
                    data = '<label class="badge badge-danger">&nbsp;&nbsp;Rejected&nbsp;&nbsp;</label>';
                }
                return data;
            }
        });
    }

    function ucfirst(str) {
        return str.charAt(0).toUpperCase() + str.slice(1);
    }

    // Init DataTable with matching headers & columns
    $('#feed-campaign-approvals-table').DataTable({
        processing: true,
        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: [[orderColumnIndex, "desc"]],
        columnDefs: [{ orderable: false, targets: '_all' }],
        ajax: {
            url: "{{ url('getNativeAdsApprovals') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                toggle: toggle,
            },
            dataType: "json",
        },
        columns: columns,
        fnRowCallback: function(nRow, aData) {
            return nRow;
        },
        fnDrawCallback: function(settings) {
            $('.paginate_button').click(function(){
                $('.dataTables_scrollBody').scrollTop(0);
            });
        }
    });
}


$(document).on("click",".exportFeedApprovalsReport",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();
    $('.exportFeedApprovalsReport').attr('disabled','disabled');
    $('.exportFeedApprovalsReport').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",".nativeAdsApprovalsSubmit",function(e){
    e.preventDefault()
    getNativeAdsApprovals();
});

$(document).on("click",".nativeAdsApprovalRefresh",function(e){
    e.preventDefault()
    getNativeAdsApprovals();
});

$("body").on("change", ".ToggleActiveFilter", function(){
    getNativeAdsApprovals();
});



$(document).on('click', '.approval-button', function (e) {
    let approval_status_val     =   $(this).attr('approval-button-val');
    let rowID                   =   $(this).attr('row-id');
    let username                =   $(this).attr('row-username');
    let email                   =   $(this).attr('row-email');
    let asset                   =   $(this).attr('row-asset');
    if(approval_status_val==1){
        if(window.confirm('Are you sure you want to approve this Campaign ?')){
            let url = (asset == "campaign" ? "{{url('campaign_approve_reject')}}" : "{{url('creative_approve_reject')}}");
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    "_token" : "{{ csrf_token() }}",
                    "row_id" : rowID,
                    "action" : approval_status_val
                },
                dataType:'json',
                success: function(data) {
                    $(".approve-button-"+rowID).attr("disabled", 'disabled');
                    $(".reject-button-"+rowID).removeAttr("disabled", 'disabled');
                    if(data.status == 'SUCCESS'){
                        toastr.success(data.message+ ' Successfully !!');
                    }else{
                        toastr.error(data.message);
                    }
                    $('#campaigndetails').DataTable().ajax.reload();
                }
            });
        }
    }else if(approval_status_val==2){
        $('#RejectReasonModal').modal('show');
        $('#charcount').html("");
        $('.reason-error').html("");
        $('#rejected-reason-txt').val("");
        $('.modal-campID').html(rowID);
        $('#username').val(username);
        $('#email').val(email);
        $('#asset').val(asset);
    }
});

function addRejectedReason(){
    var reason = $("#rejected-reason-txt").val();
    var username = $("#username").val();
    var email = $("#email").val();
    var asset = $("#asset").val();
    var rowID = $(".modal-campID").text();
    var flag = true;
    if(reason == '' ||  rowID==''){
        $(".reason-error").html("This Field is Required");
        flag = false;
    }
    else if($("#rejected-reason-txt").val().length < 25){
        $(".reason-error").html("Please Enter Atleast 25 Characters");
        flag = false;
    }
    else if(flag){
        $(".reason-error").html("");
        let url = (asset == "campaign" ? "{{url('feedCampaignRejectReason')}}" : "{{url('update_creative_reject_reason')}}")
        $.ajax({
            type: "POST",
            url: url,
            data: {
                "_token"  : "{{ csrf_token() }}",
                "row_id"  : rowID,
                "reason"  : reason
            },
            dataType:'json',
            success: function(data) {
                if(data.status != "Failed") {
                    $("#rejected-reason-txt").val('');
                    $('#RejectReasonModal').modal('hide');
                    // after updating reason calling function to change status as reject
                    rejected(rowID, 2, reason, email, username, asset);
                    $('#campaigndetails').DataTable().ajax.reload();
                }
                else{
                    toastr.error(data.message);
                }
            }
        });
    }
}

//function to change status as reject
function rejected(rowID, approval_status_val, reason, email, username, asset){
        let url   =   (asset == "campaign" ? "{{url('campaign_approve_reject')}}" : "{{url('creative_approve_reject')}}");
        $.ajax({
        type: "POST",
        url: url,
        data: {
            "_token"  : "{{ csrf_token() }}",
            "row_id"  : rowID,
            "action"  : approval_status_val,
            "username": username,
            "email"   : email,
            "reason"  : reason
            },
        dataType:'json',
        success: function(data) {
            $(".reject-button-"+rowID).attr("disabled", 'disabled');
            $(".approve-button-"+rowID).removeAttr("disabled", 'disabled');
            toastr.error(data.message+ ' Successfully !!');
            toastr.success('Mail Sent Successfully !!');
        }
    });
}

$('#rejected-reason-txt').on('paste', function(e) {
    var pastedData = (e.originalEvent || e).clipboardData.getData('text');
    if (!regex.test(pastedData)) {
        e.preventDefault();
    } else {
        // Set timeout to allow the paste event to complete and validate the new value
        setTimeout(() => {
        var newValue = $(this).val();
        if (!regex.test(newValue)) {
            $(this).val('');
        }
        }, 0);
    }
});

$("#rejected-reason-txt").keyup(function(){
    char_count = $("#rejected-reason-txt").val().length;
    str_count = "(" + char_count + " Characters )";
    $("#charcount").html(str_count);
});

var regex = new RegExp("^[a-zA-Z_ ,.-]*$");
$('#rejected-reason-txt').on('input keyup keypress', function(e) {
    var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
    if (regex.test(str) || e.type === 'input') {
        return true;
    }
    e.preventDefault();
    return false;
});

function viewCampaignData(campid, campaign= true){
    var leapmobWebsites =