@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
@endsection

@section('content')
@section('page_title')
    Whistle Feed Campaign
@endsection
<style>
    input:read-only{
        cursor      : pointer;
    }
    #campaigndetails_wrapper{
        top: 50px;
    }
    .mb-n5{
        margin-bottom: -5rem !important;
    }
    .toggle-container {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: Arial, sans-serif;
            font-size: 16px;
        }
    .switch {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 30px;
    }
    .switch input { opacity: 0; width: 0; height: 0; }
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0; left: 0; right: 0; bottom: 0;
        background-color: #ccc;
        transition: .4s;
        border-radius: 34px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    #dbLabel{
        font-size: 0.9rem;
        display: inline-block;
        width: 60px;
        text-align: center;
        transition: all 0.2s ease-in-out;
    }
    input:checked + .slider { background-color:rgb(3, 7, 3); }
    input:checked + .slider:before { transform: translateX(30px); }
    
    .oemadmetatoggle .tabs{
        background-color: #EBEBEB;
        height: 34px !important;
    }
    .oemadmetatoggle .tab,.glider{
        height: 34px !important;
    }
    .oemadmetatoggle input[type="radio"]{
        display: none;
    }
    .oemadmetatoggle input[type=radio]:checked + label {
        color: #fff !important;
        z-index: 2;
    }
    .oemadmetatoggle input[type=radio]:checked + label + .activeFilter{
        color: #fff;
        z-index: 2;
    }
    .oemadmetatoggle input[type=radio]:checked + label > .notification{
        background-color: #fff;
        color: #fff;
    }
    .oemadmetatoggle input[id=oemadToggle-1]:checked ~ .glider{
        transform: translateX(0);
    }
    .oemadmetatoggle input[id=oemadToggle-2]:checked ~ .glider{
        transform: translateX(100%);
    }
    .oemadmetatoggle .activeFilter{
        background: transparent !important;
        border: 0;
    }
    .oemadmetatoggle .glider{
        position: absolute;
        display: flex;
        height: 31px;
        width: 90px;
        background-color: #000;
        z-index: 1;
        border-radius: 99px !important;
        transition: 0.25s ease-out;
    }
    .oemadmetatoggle .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;
    }
    .oemadmetatoggle .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;
    }
    .oemadmetatoggle .glider {
        width: 170px;
    }
    .oemadmetatoggle .tabs  {
        width: 340px;
    }
    .oemadmetatoggle .tab  {
        width: 170px;
    }
    input:checked + .slider_play {
    background-color: #00674F !important;
    }
    .slider_play {
        background-color: #7E0800 !important;
    }
    .play-pause-switch {
        position: relative;
        display: inline-block;
        width: 90px;
        height: 34px;
    }
    .play-pause-switch input {display:none;}
    .slider_play {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ca2222;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .slider_play:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    input:checked + .slider_play {
        background-color:green;
    }
    input:focus + .slider_play {
        box-shadow: 0 0 1px #2196F3;
    }
    input:checked + .slider_play:before {
        -webkit-transform: translateX(55px);
        -ms-transform: translateX(55px);
        transform: translateX(55px);
    }
    .on{
        display: none;
        left: 37% !important;
    }
    .on, .off{
        color: white;
        position: absolute;
        transform: translate(-50%,-50%);
        top: 50%;
        left: 50%;
        font-size: 10px;
        font-weight: bold;
        font-family: Verdana, sans-serif;
    }
    input:checked+ .slider_play .on{
        display: block;
    }
    input:checked + .slider_play .off{
        display: none;
    }    
    .slider_play.round {
        border-radius: 34px !important;
    }
    .slider_play.round:before {
        border-radius: 50% !important;
    }
    .off{
        left: 64% !important;
    }
</style>
<div class="container-fluid">
    <div class="card mt-4">
    <div class="card-body table-responsive">
    <div class="row">
        <div class="form-group col-md-2">@include('whistle_feed.menu_dropdown.approval')</div>
        <div class="oemadmetatoggle flex m-auto pb-3">
            <div class="tabs">
                <input type="radio" class="ToggleActiveFilter" id="oemadToggle-1" name="tabs-1" checked />
                <label class="tab" for="oemadToggle-1">OEM/AdNetwork</label>
                <input type="radio" class="ToggleActiveFilter" id="oemadToggle-2" name="tabs-1" />
                <label class="tab" for="oemadToggle-2">Meta</label>
                <span class="glider"></span>
            </div>
        </div>
        <div class="toggle-container pb-3">
            <span id="dbLabel" style="font-size: 0.9rem;">MySQL</span>
            <label class="switch">
                <input type="checkbox" id="dbToggle">
                <span class="slider round"></span>
            </label>
        </div>
        @can('hasExcelPermission')
        <div class="form-group col-md-1" style="padding-left: 0;">
                <form action="{{ url('exportfeedcampaignapproval') }}" class="pull-right" method="post">
                    @csrf
                    <button type="submit" class="campaign_approval_excel btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i>Export</button>
                    <input type="hidden" name="parentid" id="parent_id_hidden" />
                    <input type="hidden" name="start_date" id="start_date_hidden" />
                    <input type="hidden" name="end_date" id="end_date_hidden" />
                    <input type="hidden" name="inventory_filter[]" id="inventory_filter_hidden"/>
                    <input type="hidden" name="oemId_filter[]" id="oemId_filter_hidden"/>
                    <input type="hidden" name="brandNameSearch" id="brandNameSearch_hidden"/>
                    <input type="hidden" name="campaignIdSearch" id="campaignIdSearch_hidden"/>
                    <input type="hidden" name="channelType_filter" id="channelType_filter_hidden"/>
                    <input type="hidden" name="native_typeFilter" id="native_typeFilter_hidden"/>
                    <input type="hidden" name="placementSearch" id="placementSearch_hidden"/>
                    <input type="hidden" name="subPlacementSearch" id="subPlacementSearch_hidden"/>
                    <input type="hidden" name="bidTypeFilter" id="bidTypeFilter_hidden"/>
                    <input type="hidden" name="countryTypeFilter" id="countryTypeFilter_hidden"/>
                    <input type="hidden" name="approvalStatusFilter" id="approvalStatusFilter_hidden"/>
                    <input type="hidden" name="campaignStatusFilter" id="campaignStatusFilter_hidden"/>
                    <input type="hidden" name="metacampaignIdSearch" id="metacampaignIdSearch_hidden"/>
                    <input type="hidden" name="metaAdsetIdSearch" id="metaAdsetIdSearch_hidden"/>
                    <input type="hidden" name="metaTypeFilter" id="metaTypeFilter_hidden"/>
                    <input type="hidden" name="metaAdAccountIdFilter" id="metaAdAccountIdFilter_hidden"/>
                    <input type="hidden" name="is_mysql" id="is_mysql_hidden"/>
                </form>
        </div>
       @endcan
        <div class="pb-3 col-md-1">
            <button type="button" id="runReport" class="campaignReport btn btn-sm excel-btn border-radius-0"></i>Run Report</button>
        </div>
    </div>
<div class="row mb-n3">
    <div class="form-group col-md-2" style = "padding-left: 8px;">
        <label for=""> Choose Account </label>
        <select class="form-control" name="acc_id[]" multiple id="acc_id">
            @if(count($master_users)>0)
            @foreach ($master_users as $key => $value)
                    <option value="{{ $value->id }}">{{ $value->account_name }}</option>
                @endforeach
            @endif
        </select>
    </div>
    <div class="form-group col-md-2" style = "padding-left: 1px;">
        <label class="labelText">Time Period</label>
        <select id="period_filter" class="form-control">
            <option value=''>Select</option>
            <option value="1" selected>Today</option>
            <option value="2">Yesterday</option>
            <option value="3">This Month</option>
            <option value="4">Last Month</option>
            <option value="5">Last 6 Months</option>
            <option value="6">This Year</option>
            <option value="7">Last Year</option>
        </select>
    </div>
    <div class="form-group col-md-2" style = "padding-left: 1px;">
        <label for="start_date">From Date</label>
        <input type="text" class="form-control" id="start_date" name="start_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
    </div>

    <div class="form-group col-md-2" style = "padding-left: 1px;">
        <label for="end_date">To Date</label>
        <input type="text" class="form-control" id="end_date" name="end_date" placeholder="Select Date" value="{{date('Y-m-d')}}">
    </div>
    <div class="form-group col-md-2" style = "padding-left: 1px;">
        <label class="labelText">Brand Name</label>
        <input type="text" class="form-control cform-control searchBar searchWidth  input-size" id="brandNameSearch" name="brandNameSearch" placeholder="Brand Name" autocomplete="off">
    </div>
    <div class="form-group col-md-2" style = "padding-left: 1px;">
        <label class="labelText">Campaign Id</label>
        <input type="text" class="form-control cform-control searchBar input-size" id="campaignIdSearch" name="campaignIdSearch" placeholder="Campaign ID" autocomplete="off">
    </div>
    <div class="form-group col-md-2 channel_div" style = "padding-left: 1px;">
        <label class="labelText">Campaign Type</label>
        <select id="channelTypeFilter" class="form-control">
            <option value="" selected>All</option>
            <option value="1">OEM</option>
            <option value="2">Ad Network</option>
        </select>
    </div>
    <div class="form-group col-md-2 oem_div" style = "padding-left: 1px;">
        <label class="labelText">OEM Channel</label>
        <select id="oemIdFilter" class="form-control" multiple>
        </select>
    </div>
    <div class="form-group col-md-2 inv_div" style = "padding-left: 1px;">
        <label class="labelText">Inventory Type</label>
        <select id="inventory_filter" class="form-control" multiple>
        </select>
    </div>
    <div class="form-group col-md-2 meta_divs" style = "padding-left: 1px; display: none;">
        <label class="labelText">Meta Campaign ID</label>
        <input type="text" class="form-control cform-control searchBar input-size" id="metacampaignIdSearch" name="metacampaignIdSearch" placeholder="Meta Campaign ID" autocomplete="off">
    </div>
    <div class="form-group col-md-2 meta_divs" style = "padding-left: 1px; display: none;">
        <label class="labelText">Meta Adset ID</label>
        <input type="text" class="form-control cform-control searchBar input-size" id="metaAdsetIdSearch" name="metaAdsetIdSearch" placeholder="Meta Adset ID" autocomplete="off">
    </div>
    <div class="form-group col-md-2 meta_divs" style = "padding-left: 1px; display: none;">
        <label class="labelText">Meta Type</label>
        <select id="metaTypeFilter" class="form-control cform-control divs dropdownFilter input-size">
                <option value="" selected="selected">Select Meta Type</option>
                <option value="Advantage Plus">Advantage Plus</option>
                <option value="Manual">Manual</option>
        </select>
    </div>
    <div class="form-group col-md-2 meta_divs" style = "padding-left: 1px; display: none;">
        <label class="labelText">Meta Ad Account</label>
        <select id="metaAdAccountIdFilter" class="form-control cform-control divs dropdownFilter input-size">
        </select>
    </div>
    <div class="form-group col-md-2 native_ads_type" style = "padding-left: 1px; display: none;">
        <label class="labelText">Native Ads Type</label>
        <select id="native_typeFilter" class="form-control cform-control divs input-size">
            <option value="" selected>All</option>
            <option value="1">App Install Ad</option>
            <option value="2">Content Ad</option>
        </select>
    </div>
    <div class="form-group col-md-2 placement_div" style = "padding-left: 1px;">
        <label class="labelText">Placement Name</label>
        <select id="placementSearch" class="form-control cform-control divs dropdownFilter input-size" multiple>
        </select>
    </div>
    <div class="form-group col-md-2 sub_placement_div" style = "padding-left: 1px;">
        <label class="labelText">Sub Placement</label>
        <select id="subPlacementSearch" class="form-control cform-control divs dropdownFilter input-size" multiple>
        </select>
    </div>
    <div class="form-group col-md-2" style = "padding-left: 1px;">
        <label class="labelText">Bid Type</label>
        <select id="bidTypeFilter" class="form-control cform-control divs input-size dropdownFilter" multiple>
            <option value="0">CPC</option>
            <option value="2">CPM</option>
            <option value="1">CPA</option>
        </select>
    </div>
    <div class="form-group col-md-2" style = "padding-left: 1px;">
        <label class="labelText">Country</label>
        <select id="countryTypeFilter" class="form-control cform-control divs dropdownFilter input-size" multiple>
        </select>
    </div>
    <div class="form-group col-md-2" style = "padding-left: 1px;">
        <label class="labelText">Approval Status</label>
        <select id="approvalStatusFilter" class="form-control cform-control divs input-size" multiple>
            <option value="1">Approved</option>
            <option value="0">Under Review</option>
            <option value="2">Rejected</option>
        </select>
    </div>
    <div class="form-group col-md-2" style = "padding-left: 1px;">
        <label class="labelText" id="campCreaLabel">Campaign Status</label>
        <select id="campaignStatusFilter" class="form-control cform-control divs input-size form-size" multiple>
            <option value="1">Active</option>
            <option value="2,3,4,5,6">In-Active</option>
            <option value="0">Paused</option>
        </select>
    </div>
</div>
</div>
    <div class="col-8 pl-0 custom-z-index">
        @include('whistle_feed.feed_reports.clearFilter')
    </div>

        <table class="table-bordered table-hover top" id="campaigndetails">
            <thead>
                <tr>
                    <th>Sl.No</th>
                    <th>Campaign ID</th>
                    <th>Brand Name</th>
                    <th>Meta Campaign Id</th>
                    <th>Meta Account Name</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Paused Date</th>
                    <th>Campaign Type</th>
                    <th>Inventory Type</th>
                    <th>Bid Type</th>
                    <th>Daily Budget</th>
                    <th>Bid Price</th>
                    <th>Impression</th>
                    <th>Clicks</th>
                    <th>Conversions</th>
                    <th>Reach</th>
                    <th>Likes</th>
                    <th>Shares</th>
                    <th>Clicks From Shares</th>
                    <th>Conversions From Shares</th>
                    <th>Total Spends</th>
                    <th>CTR %</th>
                    <th>CR %</th>
                    <th>CPM</th>
                    <th>CPC</th>
                    <th>CPA</th>
                    <th>Last Edit Made</th>
                    <th>UserName</th>
                    <th>Email ID</th>
                    <th>On-Boarded Date</th>
                    <th>Approval By</th>
                    <th>Approved Date</th>
                    <th>Campaign Status</th>
                    <th>Approval Status</th>
                    @can('hasAddPermission')
                    <th>Action</th>
                    @endcan
                    <th>Delete</th>
                </tr>
            </thead>
            <tfoot>
		        <tr>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                    <th>NA</th>
                </tr>
	        </tfoot>
        </table>
    </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">CampaignID: <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="">
            <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">
            <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">
            <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">
            <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 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">
            <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">
            <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 TileOEM_Make">
            <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">
            <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-->
<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}"/>
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script type="application/javascript">

var currentDate = new Date();
    currentDate = currentDate.getFullYear() + "-" + (currentDate.getMonth()+1) + "-" + currentDate.getDate() +' '+ currentDate.getHours() + ":" + currentDate.getMinutes() + ":" + currentDate.getSeconds();
    var inventory_filter = '';
    var oemId_filter = '';
    var channelType_filter = '';
    var is_mysql = 0;

$(document).ready(function() {
    get_campaign_count();
    $('.oem_div').hide();
    $('.inv_div').show();
    getOEMIds();
    getCountriesData();
    getInventoryTypes();
    getPlacementTypes();
    campaigndetails_list();

    // clear all filter script
    $('.clear_filter').on('click',function(){
        $("#acc_id").multiselect("clearSelection");
        $('#inventory_filter').multiselect('clearSelection');
        $('#oemIdFilter').multiselect('clearSelection');
        $('#channelTypeFilter option:first').prop('selected',true);
        $('.oem_div').hide();
        $('.inv_div').show();
        $('#acc_id').val('');
        $('#campaignIdSearch').val('');
        $("#brandNameSearch").val('');
        $('#native_typeFilter').val('');
        $('#period_filter option:eq(1)').prop('selected',true);
        $('#placementSearch').val('').prop('selected', true);
        $("#placementSearch").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('#subPlacementSearch').val('').prop('selected', true);
        $("#subPlacementSearch").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('#bidTypeFilter').val('').prop('selected', true);
        $("#bidTypeFilter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('#countryTypeFilter').val('').prop('selected', true);
        $("#countryTypeFilter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('#approvalStatusFilter').val('').prop('selected', true);
        $("#approvalStatusFilter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('#campaignStatusFilter').val('').prop('selected', true);
        $("#campaignStatusFilter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        var start_date = new Date().toJSON().slice(0, 10);
        var end_date = new Date().toJSON().slice(0, 10);
        $('#start_date').val(start_date);
        $('#end_date').datepicker('option', 'minDate', start_date);
        $('#end_date').datepicker('setDate', end_date);
        campaigndetails_list();
    });

    $('#acc_id').multiselect({
        enableFiltering: true,
        includeSelectAllOption: true,
        selectAllJustVisible: false,
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        templates: {
            filter: '<li class="multiselect-item multiselect-filter"><div class="input-group mb-3"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-search"></i></span></div><input class="form-control multiselect-search" type="text" /></div></li>',
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="fa fa-close"></i></button></span>'
        },
        enableCaseInsensitiveFiltering: true,
    });

    $('#placementSearch').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Placement',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        maxHeight              : 200,
        numberDisplayed        : 1,
        // buttonWidth            : '150px',
    });

    $('#subPlacementSearch').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Subplacement',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        maxHeight              : 200,
        numberDisplayed        : 1,
        // buttonWidth            : '150px',
    });

    $('#bidTypeFilter').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Bid Type',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        // buttonWidth            : '150px',
    });

    $('#approvalStatusFilter').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Status',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        numberDisplayed        : 1,
        // buttonWidth            : '150px',
    });

    $('#campaignStatusFilter').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Status',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        numberDisplayed        : 1,
        // buttonWidth            : '150px',
    });

    $('#countryTypeFilter').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Country',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        numberDisplayed        : 1,
        // buttonWidth            : '150px',
        maxHeight              : 200,
        enableFiltering        : true,
        filterPlaceholder      : 'Search...',
        enableCaseInsensitiveFiltering : true,
        templates              : {
        filter: '<li class="multiselect-item filter" style="margin: 5px;"><div class="input-group"><input class="form-control multiselect-search" type="text" placeholder="Search..."></div></li>',
        filterClearBtn: '<span class="input-group-btn "><button class="btn btn-default multiselect-clear-filter" type="button" style="margin: 2px;"><i class="fa fa-times"></i></button></span>'
        }
    });

    $('#inventory_filter').multiselect({
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Inventory',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        includeSelectAllOption : true,
        maxHeight              : 200,
        numberDisplayed        : 1,
        // buttonWidth            : '150px',
    });

    $('#oemIdFilter').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select OEM',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        numberDisplayed        : 1,
        maxHeight              : 200,
        // buttonWidth            : '150px',
    });

    /**select from date here***/
    $("#start_date").datepicker({
        dateFormat: 'yy-mm-dd',
        maxDate : 0,
        autoclose: true,
        todayHighlight: true,
        endDate: 'today',
        onSelect: function (selectedDate) {
            var startDate = $('#start_date').datepicker('getDate');
            var todaysDate = new Date();
            let year = startDate.getFullYear();
            let month = startDate.getMonth();
            let daysInMonth = new Date(year, month + 1, 0).getDate();
            let currentMonth = new Date().getMonth();
            let currentDate = new Date();
            let timeDifference = currentDate-startDate
            let daysDifferent = Math.floor(timeDifference / (1000 * 60 * 60 * 24));
             var maxdaycount;
            if(startDate){
                maxdaycount = new Date(startDate);
                maxdaycount.setDate(maxdaycount.getDate() + daysInMonth-1);
            }
            var client_id = $('#client_filter').val();
            if (todaysDate.setHours(0,0,0,0) == startDate.setHours(0,0,0,0)) {
                $('#end_date').datepicker('option', 'maxDate', startDate);
            } 
            else if((month==currentMonth)|| (daysDifferent<=daysInMonth)){
                let today = new Date()
                let formattedDate = today.getFullYear() + '-' + String(today.getMonth() + 1).padStart(2, '0') + '-' + String(today.getDate()).padStart(2, '0');
                $('#end_date').datepicker('option', 'maxDate', formattedDate);
            }
            else {
                $('#end_date').datepicker('option', 'maxDate', maxdaycount);
            }
            $('#end_date').datepicker('option', 'minDate', startDate);
            $('#end_date').datepicker('setDate', startDate);
            $('#period_filter').val('');
        }
    });

    /**select to date here***/
    $("#end_date").datepicker({
        dateFormat: 'yy-mm-dd',
        // minDate: $("#start_date").datepicker("getDate"),
        maxDate : 0,
        autoclose: true,
        todayHighlight: true,
        onClose: function() {
            var startDate = $('#start_date').datepicker('getDate');
            var endDate = $('#end_date').datepicker('getDate');
            if (startDate == null) {
                $('#start_date').datepicker('setDate', endDate);
            }
            if (endDate < startDate) {
                var minDate = $('#end_date').datepicker('option', 'minDate', startDate);
                $('#end_date').datepicker('setDate', minDate);
            }
        },
        onSelect: function() {
            $('#period_filter').val('');
        }
    });

    $("body").on("change", "#period_filter", function(){
            var periodValue = $(this).val();
            $("#start_date").val('');
            $("#end_date").val('');
            if(periodValue!=''){
            //filter by today
            if(periodValue=='1') {
                var start_date = new Date().toJSON().slice(0,10);
                var end_date = new Date().toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'maxDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
            } 
            else if(periodValue=='2') { //filter by yesterday
                var start_date =  new Date(Date.now() - 864e5).toJSON().slice(0,10);
                var end_date =  new Date(Date.now() - 864e5).toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'maxDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
            }
            else if(periodValue=='3') { //filter by this month
                var start_date = new Date();
                var end_date = new Date();
                end_date =   end_date.setDate(end_date.getDate());
                end_date = new Date(end_date).toJSON().slice(0, 10);
                start_date = new Date(start_date.setMonth(start_date.getMonth()));
                start_date = new Date(start_date.setDate(1));
                start_date = start_date.toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('option', 'maxDate', end_date); // Set maxDate to today
                $('#end_date').datepicker('setDate', end_date);
                $('#end_date').val(end_date); // Ensure end date is set in the input field
            }            
            else if(periodValue=='4') { //filter by last month
                var start_date = new Date();
                var end_date = new Date();
                start_date = new Date(start_date.setDate(1));
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 1));
                start_date = start_date.toJSON().slice(0,10);
                end_date = new Date(end_date.setDate(1)-864e5);
                end_date = end_date.toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
            }
            
            else if(periodValue=='5') { //filter by last 6 month
                var start_date = new Date();
                var end_date = new Date();
                end_date = new Date(end_date.setDate(1)-864e5);
                end_date = end_date.toJSON().slice(0,10);
                start_date = new Date(start_date.setDate(1));
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 6));
                start_date = start_date.toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
            }
            else if(periodValue=='6') { //filter by this year
                var end_date = new Date().toJSON().slice(0,10);
                var makeDate = new Date(end_date);
                var start_date = new Date(makeDate.setMonth(0));
                start_date = new Date(makeDate.setDate(1));
                start_date = start_date.toJSON().slice(0,10);
                end_date = new Date();
                end_date =   end_date.setDate(end_date.getDate());
                end_date = new Date(end_date).toJSON().slice(0, 10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('option', 'maxDate', end_date); // Set maxDate to today
                $('#end_date').datepicker('setDate', end_date);
                $('#end_date').val(end_date); // Ensure end date is set in the input field
            }
            else if(periodValue=='7') { //filter by previous year
                var end_date = new Date();
                var start_date = new Date();
                end_date = new Date(end_date.setMonth(0));
                end_date = new Date(end_date.setDate(1)-864e5).toJSON().slice(0,10);
                start_date = new Date(start_date.setMonth(start_date.getMonth() - 12));
                start_date = new Date(start_date.setMonth(0));
                start_date = new Date(start_date.setDate(1)).toJSON().slice(0,10);
                $('#start_date').val(start_date);
                $('#end_date').datepicker('option', 'minDate', start_date);
                $('#end_date').datepicker('setDate', end_date);
            }
        }
    })

    $('#dbToggle').on('change', function() {
        localStorage.setItem('dbToggleChecked', $(this).is(':checked'));
        $("#runReport").trigger("click");
    });

    // inventory filter
    $('#inventory_filter').on('change', function() {
        var campaign_type = (($('#oemadToggle-2').is(":checked")) ? '3': $("#channelTypeFilter").val() );
        var selectedInventory = $(this).val();
        var Inventory = $('#inventory_filter option:selected').val();
        var placementList = '';
        $('#native_typeFilter').val('');
        $('#placementSearch, #subPlacementSearch').empty();
        if(selectedInventory  && campaign_type != '3'){
            if (selectedInventory.length === 1 && selectedInventory.includes('2')) {
                $(".placement_div, .sub_placement_div").hide();
            } else {
                $(".placement_div, .sub_placement_div").show();
            }
            selectedInventory.includes('8') ? $('.native_ads_type').show() : $('.native_ads_type').hide();
            if(selectedInventory.includes('1') || selectedInventory.includes('5') || selectedInventory.includes('6')){
                placementList +=`<option value="1">Standard Inventory</option>`;
            }
            placementList +=`<option value="2">Expanded Inventory</option>`;
            placementList +=`<option value="3">Selected Inventory</option>`;
            $("#placementSearch").html(placementList);
            $('#placementSearch').multiselect('rebuild').multiselect('refresh').multiselect('clearSelection');
            getSubPlacement(2);
        }else{
            $(".sub_placement_div, .placement_div").show()
            getPlacementTypes(campaign_type);
        }
        if(Inventory==undefined){
            $(".selectInventory button").each(function() {
                this.style.setProperty("background-color", "#fff", "important");
                this.style.setProperty("color", "#858585", "important");
            });
        }
        else{
            $(".selectInventory button").each(function() {
                this.style.setProperty("background-color", "#DDE6EE", "important");
                this.style.setProperty("color", "#0A78BE", "important");
            });
        }
    });

    // oem filter
    $("body").on("change", "#oemIdFilter", function(){
        oemId_filter = $(this).val();
        channelType_filter= $('#channelTypeFilter').val();
        getPlacementByOEMId(oemId_filter);
    });
    
    $(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');
        if(approval_status_val==1){
        if(window.confirm('Are you sure you want to approve this Campaign ?')){
            $.ajax({
                type: "POST",
                url: "{{url('campaign_approve_reject')}}",
                data: {
                    "_token" : "{{ csrf_token() }}",
                    "row_id" : rowID,
                    "action" : approval_status_val
                },
                dataType:'json',
                success: function(data) {
                    $(".reject-span-"+rowID).html("Approved").removeClass("text-danger reject-span-"+rowID).addClass("text-success approve-span-"+rowID);
                    $(".underreview-span-"+rowID).html("Approved").removeClass("text-warning underreview-span-"+rowID).addClass("text-success approve-span-"+rowID);
                    $(".approve-button-"+rowID).attr("disabled", 'disabled');
                    $(".reject-button-"+rowID).removeAttr("disabled", 'disabled');
                    $(".rejected-reason-info-"+rowID).hide();
                    $(".approved-by-"+rowID).html('