@extends('layouts.app')

@section('appjs')
    <script type="application/javascript" src="{{ asset('js/app.js') }}"></script>
    <script src="{{ asset('js/bootstrap-multiselect.js')}}"></script>
    <link rel="stylesheet" href="{{ asset('css/bootstrap-multiselect.css')}}"/>
@endsection

@section('content')
@section('page_title')
    Whistle Feed Creative
@endsection
<style>
    #creativedetails_filter{
        margin-top: 0rem;
        margin-bottom: 0rem;
    }
    .mb-n3{
    margin-bottom: 2rem !important;
    }
    #VideoPreview1{
        max-width : 250px;
        height    : 200px;
        object-fit: contain;
    }
    input:read-only{
        cursor      : pointer;
    }
    .square-size {
        height: 100px;
        width: 100px;
    }
    .default-size {
        height: 100%;
        width: 100%;
    }
    .smallimg{
        background-color: #e7e7e7;
        width: 91px;
        border-radius: 15px !important;
        box-shadow: 1px 1px 3px 0px rgb(0 0 0 / 40%) !important;
    }
    .oemBannerAds120x600{
        height : 400px !important;
        width  : 120px !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">
                <form action="{{ url('exportfeedcreativeapproval') }}" method="post" class="pull-right">
                    @csrf
                    <button type="submit" class="creative_approval_excel btn-sm btn excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                    <input type="hidden" name="start_date" id="start_date_hidden" />
                    <input type="hidden" name="end_date" id="end_date_hidden" />
                    <input type="hidden" name="campaign_filter[]" id="campaign_filter_hidden" />
                    <input type="hidden" name="creative_filter[]" id="creative_filter_hidden" />
                    <input type="hidden" name="brandName" id="brandName_hidden" />
                    <input type="hidden" name="campaign_id" id="campaign_id_hidden" />
                    <input type="hidden" name="creative_id" id="creative_id_hidden" />
                    <input type="hidden" name="creativeName" id="creativeName_hidden" />
                    <input type="hidden" name="language_filter[]" id="language_filter_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="channelType_filter" id="channelType_filter_hidden"/>
                    <input type="hidden" name="metaCampaignId" id="metaCampaignId_hidden"/>
                    <input type="hidden" name="metaAdsetId" id="metaAdsetId_hidden"/>
                    <input type="hidden" name="metaCreativeId" id="metaCreativeId_hidden"/>
                    <input type="hidden" name="metaTypeFilter" id="metaTypeFilter_hidden"/>
                    <input type="hidden" name="metaAdAccountId" id="metaAdAccountId_hidden"/>
                    <input type="hidden" name="placementSearch[]" id="placementSearch_hidden"/>
                    <input type="hidden" name="subPlacementSearch[]" id="subPlacementSearch_hidden"/>
                    <input type="hidden" name="countryTypeFilter[]" id="countryTypeFilter_hidden"/>
                    <input type="hidden" name="approvalStatus[]" id="approvalStatus_hidden"/>
                    <input type="hidden" name="creativeStatus[]" id="creativeStatus_hidden"/>
                    <input type="hidden" name="native_ads_type" id="native_ads_type_hidden"/>
                    <input type="hidden" name="approved_filter[]" id="approved_filter_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 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 for="brandnameCampID">Campaign Ids</label>
            <select class="form-control" name="brandnameCampID[]" multiple id="brandnameCampID">
                @if(count($brandnameCampID)>0)
                @foreach ($brandnameCampID as $key => $value)
                <option value="{{ $value->id }}">{{ $value->brandname }} ({{ $value->id }})</option>
                @endforeach
                @endif
            </select>
        </div>
        <div class="form-group col-md-2" style = "padding-left: 1px;">
            <label for="creative_filter">Creative Ids</label>
            <select class="form-control" name="creative_ids[]" multiple id="creative_filter">
                @if(count($creative_ids)>0)
                @foreach ($creative_ids as $key => $value)
                <option value="{{ $value->id }}">{{ $value->creative_name }} ({{ $value->id }})</option>
                @endforeach
                @endif
            </select>
        </div>
        <div class="form-group col-md-2" style = "padding-left: 8px;">
            <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" style = "padding-left: 1px;">
            <label class="labelText">Creative Id</label>
            <input type="text" class="form-control cform-control searchBar input-size" id="creativeIdSearch" name="creativeIdSearch" placeholder="Creative ID" autocomplete="off">
        </div>
        <div class="form-group col-md-2" style = "padding-left: 1px;">
            <label class="labelText">Creative Name</label>
            <input type="text" class="form-control cform-control searchBar searchWidth input-size" id="creativeNameSearch" name="creativeNameSearch" placeholder="Creative Name" autocomplete="off">
        </div>
        <div class="form-group col-md-2" style = "padding-left: 1px;">
            <label for="language_filter">Language Filter</label>
            <select id="language_filter" class="form-control" style = "right: 63px !important;" multiple>
                                </select>
        </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" style = "width: 100%;">
                <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 custom-z-index" 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 custom-z-index inv_div" style = "padding-left: 1px;">
            <label class="labelText">Inventory Type</label>
            <select id="inventory_filter" class="form-control" style = "right: 63px !important;" 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 Creative ID</label>
            <input type="text" class="form-control cform-control searchBar input-size" id="metaCreativeIdSearch" name="metaCreativeIdSearch" placeholder="Meta Creative 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">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">Creative Status</label>
            <select id="creativeStatusFilter" 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 class="form-group col-md-2 custom-z-index" style = "padding-left: 1px;">
            <label for="approved_filter">Approved By</label>
            <select id="approved_filter" class="form-control" multiple>
                            </select>
        </div>
    </div>
    <div class="col-8 pl-0 custom-z-index-8">
        @include('whistle_feed.feed_reports.clearFilter')
    </div>
        <table class="table-bordered table-hover" id="creativedetails">
            <thead>
                <tr>
                    <th>Sl.No</th>
                    <th>Campaign ID</th>
                    <th>Brand Name</th>
                    <th>Creative ID</th>
                    <th>Meta Adset Id</th>
                    <th>Meta Account Name</th>
                    <th>Campaign Type</th>
                    <th>Inventory Type</th>
                    <th>Creative Name</th>
                    <th>Creative Headline</th>
                    <th>Creative Description <span data-toggle="tooltip" title="(Min char 50 and Max char 60)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th>Creative Language</th>
                    <th>Tracking Url</th>
                    <th>On-Boarded Date</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>Approval By</th>
                    <th>Approved Date</th>
                    <th>Creative 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>
                    @can('hasAddPermission')
                    <th>NA</th>
                    @endcan
                    <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">CreativeID: <span class="modal-creativeID"></span></label>
            <label>Reason<span class="redIcon"> *</span></label>
            <input type="hidden" id="campid" name="campid" 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="viewCreativeData">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <!-- Modal body -->
      <div class="modal-body">
       <h5 class="modal-title text-center">Creative Details
        <button type="button" class="close pauseVideo" 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-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>
        <div class="row mb-1">
            <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 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 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 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 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">
            <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 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">
            <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 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>
        <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 class="modal-footer footerwidth">
            <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>
<script type="application/javascript">

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

    var creative_state = 0;
$(document).ready(function() {
    var campaign_filter = creative_filter = language_filter = approved_filter = inventory_filter = oemId_filter = channelType_filter = '';
    var is_mysql = 0;
    creativedetails_list();
    get_creative_count();
    getInventoryTypes();
    getOEMIds();
    getCountriesData();
    getPlacementTypes();
    $('.oem_div').hide();
    $('.inv_div').show();

    $('.pauseVideo').on('click', function () {
        $('#VideoPreview1').each(function(){
            this.pause();
        });
    });
    // clear all filter script
    $('.clear_filter').on('click',function(){
        $("#brandnameCampID").multiselect("clearSelection");
        $("#approved_filter").multiselect("clearSelection");
        $("#language_filter").multiselect("clearSelection");
        $("#creative_filter").multiselect("clearSelection");
        $('#inventory_filter').multiselect('clearSelection');
        $('#oemIdFilter').multiselect('clearSelection');
        $('#channelTypeFilter option:first').prop('selected',true);
        $('.oem_div').hide();
        $('.inv_div').show();
        $('#campaignIdSearch,#brandNameSearch,#native_typeFilter,#metacampaignIdSearch,#metaAdsetIdSearch,#metaCreativeIdSearch,#metaTypeFilter,#metaAdAccountIdFilter').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");
        $('#countryTypeFilter').val('').prop('selected', true);
        $("#countryTypeFilter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('#approvalStatusFilter').val('').prop('selected', true);
        $("#approvalStatusFilter").multiselect("clearSelection").multiselect("refresh").multiselect("rebuild");
        $('#creativeStatusFilter').val('').prop('selected', true);
        $("#creativeStatusFilter").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);
        creativedetails_list();
    });

    $("body").on("change", ".ToggleActiveFilter", function(){
        oemAdNetworkMetaToggle();
        $("#runReport").trigger("click");
    });

    $("body").on("change","#placementSearch",function() {
        var placement = $('#placementSearch option:selected').val();
        let channel_type_val = ($('#oemadToggle-2').is(":checked") ? '3' : $("#channelTypeFilter").val());
          var placementValue = $(this).val();
        if(placementValue){
            if (channel_type_val === '3') {
                $('.sub_placement_div').show(); // Always show if channel type is 3
                getSubPlacementTypes(placementValue);
            } else {
                ((placementValue.includes('1') && placementValue.includes('3')) && placementValue.length == 2) || 
                ((placementValue.includes('1') || placementValue.includes('3')) && placementValue.length == 1)  
                ? $('.sub_placement_div').hide() 
                : $('.sub_placement_div').show();
            }
        }
        if(placement == undefined){
            $(".selectPlacement button").each(function() {
                this.style.setProperty("background-color", "#fff", "important");
                this.style.setProperty("color", "#858585", "important");
            });
        }
        else{
            $(".selectPlacement button").each(function() {
                this.style.setProperty("background-color", "#DDE6EE", "important");
                this.style.setProperty("color", "#0A78BE", "important");
            });
        }
        var dateSelect = $('#nativeTimePeriod').val();
        $("#subPlacementSearch").prop('selectedIndex',0)
        var inventoryTypeFilter = $("#inventory_filter").val();
        getSubPlacementTypes(placementValue,inventoryTypeFilter)
    });

    $("body").on("click", "#runReport", function(){
        var campaign_filter   = $('#brandnameCampID').val();
        var creative_filter   = $('#creative_filter').val();
        var brandName         = $('#brandNameSearch').val();
        var campaign_id       = $('#campaignIdSearch').val();
        var creative_id       = $('#creativeIdSearch').val();
        var creativeName      = $('#creativeNameSearch').val();
        var language          = $('#language_filter').val();
        var inventory_filter  = $('#inventory_filter').val();
        var oemId_filter      = $('#oemIdFilter').val();
        var metaCampaignId    = $('#metacampaignIdSearch').val();
        var metaAdsetId       = $('#metaAdsetIdSearch').val();
        var metaCreativeId    = $('#metaCreativeIdSearch').val();
        var metaTypeFilter    = $('#metaTypeFilter').val();
        var metaAdAccountId   = $('#metaAdAccountIdFilter').val();
        var placementSearch   = $('#placementSearch').val();
        var subPlacementSearch= $('#subPlacementSearch').val();
        var countryTypeFilter = $('#countryTypeFilter').val();
        var approvalStatus    = $('#approvalStatusFilter').val();
        var creativeStatus    = $('#creativeStatusFilter').val();
        var native_ads_type   = $('#native_typeFilter').val();
        var approved_filter   = $('#approved_filter').val();
        creativedetails_list(campaign_filter, creative_filter, brandName, campaign_id, creative_id, creativeName, language, inventory_filter, oemId_filter, metaCampaignId, metaAdsetId, metaCreativeId, metaTypeFilter, metaAdAccountId, placementSearch, subPlacementSearch, countryTypeFilter, approvalStatus, creativeStatus, native_ads_type, approved_filter);
    });

    $('#brandnameCampID').multiselect({
        includeSelectAllOption: true,
        allSelectedText: 'All Campaign Ids',
        nonSelectedText: 'Select Ids To Filter',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        enableFiltering: true,
        includeSelectAllOption: true,
        selectAllJustVisible: false,
        templates: {
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
        },
        enableCaseInsensitiveFiltering: true
    });
    $('#creative_filter').multiselect({
        includeSelectAllOption: true,
        allSelectedText: 'All Creative Ids',
        nonSelectedText: 'Select Ids To Filter',
        selectAllValue: 'all',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        buttonWidth: '100%',
        enableFiltering: true,
        includeSelectAllOption: true,
        selectAllJustVisible: false,
        templates: {
            filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter border-radius-0" type="button">Clear</button></span>',
        },
        enableCaseInsensitiveFiltering: true
    });
    $('#inventory_filter').multiselect({
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Inventory',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        includeSelectAllOption : true,
        maxHeight              : 200,
        numberDisplayed        : 1,
        buttonWidth            : '100%',
    });
    $('#oemIdFilter').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select OEM',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        numberDisplayed        : 1,
        buttonWidth            : '100%',
    });
    $('#language_filter').multiselect({
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Language',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        includeSelectAllOption : true,
        maxHeight              : 200,
        numberDisplayed        : 1,
        buttonWidth            : '100%',
    });
    $('#approved_filter').multiselect({
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Approved By',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        includeSelectAllOption : true,
        maxHeight              : 200,
        numberDisplayed        : 1,
        buttonWidth            : '100%',
    });
    $('#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',
    });
    $('#approvalStatusFilter').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Status',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        numberDisplayed        : 1,
        // buttonWidth            : '150px',
    });
    $('#creativeStatusFilter').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>'
        }
    });

     /**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);
            }
        }
    })

   //if any button is clicked from campaign status (first event) 
    $(document).on('click', '.approval-button', function (e) {
            let approval_status_val =$(this).attr('approval-button-val');
            let rowID    = $(this).attr('row-id');
            let campid   = $(this).attr('row-campid');
            // if approve button clicked
            if(approval_status_val==1){
            if(window.confirm('Are you sure you want to approve this Creative ?')){
                $.ajax({
                    type: "POST",
                    url: "{{url('creative_approve_reject')}}",
                    data: {
                        "_token" : "{{ csrf_token() }}",
                        "row_id" : rowID,
                        "action" : approval_status_val,
                        "campid" : campid
                    },
                    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('