@extends('layouts.app')

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

@section('content')
@section('page_title')
    Whistle Feed Publisher
@endsection
<style>
    #campaignId_slot > .modal-dialog {
        max-width: 800px;
    }
    .blockFooter{
        padding-top : 12px;
    }
    .unblockFooter{
        padding-right  : 15px;
        padding-top    : 12px;
        padding-bottom : 10px
    }
    .unblockTag{
        padding-bottom : 15px;
    }
    .multiselect-container input[type="checkbox"],
    .multiselect-container input[type="radio"] {
        cursor: pointer !important;
    }
    .placementModal {
        max-width: 1200px;
    }
    .oemFiltersModal {
        max-width:85%;
    }
    .oemFiltersModal {
        max-width:85%;
    }
    .placementButtons{
        height: 36px;
        font-size: large;
    }
    .oemFiltersButtons{
        height: 36px;
        font-size: large;
    }
    #placementDetailsTable th,
    #placementDetailsTable td {
        text-align: center;
    }
    .p-parent-div{
        width: 193px;
    }
    .sp_min_bid{
        width: 22%;
        margin-top: 14px;
    }
    #p_type{
        justify-content: space-between;
        width          : 100%;
        gap            : 30px
    }
    #d_type{
        justify-content: space-around;
        width          : 100%;
        gap            : 15px
    }
    .placementEntry{
        display : flex;
    }
    input:read-only{
        cursor      : pointer;
    }
    .switch {
        position: relative;
        display: inline-block;
        width: 48px; /* 80% of 60px */
        height: 27.2px; /* 80% of 34px */
    }
    .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: 4px;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 20.8px; /* 80% of 26px */
        width: 20.8px; /* 80% of 26px */
        left: 3.2px; /* 80% of 4px */
        bottom: 3.2px; /* 80% of 4px */
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }
    input:checked + .slider {
        background-color: #2196F3;
    }
    input:checked + .slider:before {
        transform: translateX(20.8px); /* 80% of 26px */
    }
    /* Optional: for rounded corners */
    .slider.round {
        border-radius: 27.2px; /* 80% of 34px */
    }
    .slider.round:before {
        border-radius: 50%;
    }
    .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; }
    /* When the switch input is disabled, affect the parent label and its slider */
    .switch:has(input:disabled),
    .switch:has(input:disabled) .slider,
    .switch:has(input:disabled) .slider::before {
        cursor: default !important;
        pointer-events: none;
        opacity: 0.6;
    }
    .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%;
    }
    input:checked + .slider { background-color:rgb(3, 7, 3); }
    input:checked + .slider:before { transform: translateX(30px); }
    #dbLabel{
        font-size: 0.9rem;
        display: inline-block;
        width: 60px;
        text-align: center;
        transition: all 0.2s ease-in-out;
    }
    </style>
<div class="container-fluid">
    <div class="card">
    <div class="row ml-0 mr-0 mt-4">
        <div class="form-group col-md-2">@include('whistle_feed.menu_dropdown.approval')</div>
        <div class="flex m-auto pb-3">
            <!-- count section start-->
            <form class="flex m-auto">
                <div class="btn-outline-success active count-div" id="countfilter0" data-toggle="tooltip">
                    <label> Total:</label>
                <small id="total_count0"></small>
                </div>
                <div class="count-div" id="countfilter1" data-toggle="tooltip">
                    <label>Active: </label>
                    <small id="active_count1"></small>
                </div>
                <div class="count-div" id="countfilter2" data-toggle="tooltip">
                    <label>In-Active: </label>
                    <small id="inactive_count2"></small>
                </div>
            </form>
           
        </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>
            
            <!-- count section end -->
        @can('hasExcelPermission')
        <div class="form-group col-md-1">
                <form action="{{ url('exportfeedpublisherapproval') }}" class="pull-right" method="post">
                    @csrf
                    <input type="hidden" name="language_filter[]" id="language_filter_hidden" />
                    <input type="hidden" name="category_filter[]" id="category_filter_hidden"/>
                    <input type="hidden" name="platform_filter[]" id="platform_filter_hidden"/>
                    <input type="hidden" name="revenue_filter[]"  id="revenue_filter_hidden"/>
                    <input type="hidden" name="approved_filter[]" id="approved_filter_hidden"/>
                    <input type="hidden" name="publisher_state" id="publisher_state_hidden"/>
                    <input type="hidden" name="website_id" id="website_id_hidden" />
                    <input type="hidden" name="is_mysql" id="is_mysql_hidden" />
                    <button type="submit" class="creative_approval_excel btn btn-sm excel-btn border-radius-0"><i class="fa fa-download"></i> Export</button>
                </form>
        </div>
       @endcan
    </div>
    <div class="card-body table-responsive">
        <form>
            <div class="filter-table-inline pl-0 d-flex flex-wrap">
                <div class="form-group col-md-2 pl-0">
                    <label for="category_filter">Category</label>
                    <select id="category_filter" class="form-control" data-live-search="true" multiple>
                                            </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="platform_filter">Platform Filter</label>
                    <select id="platform_filter" class="form-control" multiple>
                        <option value="0">Website</option>
                        <option value="1">Mobile App</option>
                    </select>
                </div>
                <div class="form-group col-2 pl-0">
                    <label for="client_filter">Publisher ID</label><br>
                    <select class="form-control" name="client_filter" id="client_filter" multiple>
                                            </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="language_filter">Language Filter</label>
                    <select id="language_filter" class="form-control" multiple>
                                                </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="revenue_filter">Revenue Type</label>
                    <select id="revenue_filter" class="form-control" data-live-search="true" multiple>
                        <option value='1'>CPM</option>
                        <option value='0'>CPC</option>
                        <option value='2'>CPI</option>
                        <option value='3'>RTB</option>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="approved_filter">Approved By</label>
                    <select id="approved_filter" class="form-control" multiple>
                                            </select>
                </div>
                <div class="form-group">
                     <label>Website ID</label>
                     <div class="form-group prepend d-flex">
                     <span class="prefix" style="font-size:0.8rem !important;">WFP -</span>
                     <input type="text" class="form-control pencil-input" id="website_id" name="website_id" placeholder="Search Website ID">
                </div>
             </div>
            </div>
        </form>
        <div class="col-6 pl-0 custom-z-index-8">
            @include('whistle_feed.feed_reports.clearFilter')
        </div>
        <table class="table-bordered table-hover text-center" id="publisherdetails">
            <thead>
                <tr>
                    <th>Sl.No</th>
                    <th>Publisher ID</th>
                    <th>Publisher</th>
                    <th>Website ID</th>
                    <th>Category</th>
                    <th>Language</th>
                    <th>Language-Wise Script <span data-toggle="tooltip" title="If this is selected, it means that the publisher can use language wise tags (same script for multiple websites)"><i class="fa fa-info-circle" aria-hidden="true"></i></span></th>
                    <th>Platform</th>
                    <th>Website/App</th>
                    <th>Mobile Number</th>
                    <th>UserName</th>
                    <th>Email ID</th>
                    <th>Inventory Type</th>
                    <th>Is OEM</th>
                    <th>Revenue Type</th>
                    <th style="min-width:110px;">Paid On</th>
                    <th>Variable CPM</th>
                    <th>Currency</th>
                    <th>Cost</th>
                    <th>Interstitial Cost</th>
                    <th>Available Campaigns</th>
                    <th>OnBoarded Date</th>
                    <th>Approval By</th>
                    <th>Approved Date</th>
                    <th>Last Edited By</th>
                    <th>Last Edited On</th>
                    <th>Block/UnBlock Categories</th>
                    <th>Blocked Time Slots</th>
                    <th>Blocked By Region</th>
                    <th>Placement</th>
                    <th>OEM Preference</th>
                    <th>Dimension Preference</th>
                    <th>Postback URL</th>
                    <th>Approval Status</th>                   
                    @can('hasAddPermission')
                    <th>Website Status</th>
                    @endcan

                </tr>
            </thead>
        </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">PublisherID: <span class="modal-publisherID"></span></label>
            <label>Reason<span class="redIcon"> *</span></label>
            <input type="hidden" id="username" name="username" value="">
            <input type="hidden" id="email" name="email" value="">
            <input type="hidden" id="website" name="website" 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 text-white btn-sm" onclick="addRejectedReason()">Submit</a>
         </div>
      </div>
   </div>
</div>
<!-- Add Reject Reason modal end -->


<!-- Block Caategories Start-->
<div class="modal fade" tabindex="-1" role="dialog" id="blockCategories" data-keyboard="false" data-backdrop="static">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-body">
         <h4 class="pull-left"><label><b>Block Categories</b></label></h4>
         <div class="pull-right inline-block">
         <label class="float-lg-right">Publisher ID: <span class="block-cat-modal-publisherID"></span></label><br>
         <label class="float-lg-right">Website ID: <span class="block-cat-modal-WebsiteID"></span></label>
         </div>
            <input type="hidden" id="totalcategory" value="">
            <div id="all-category-block" class="mt-5"></div>
         </div>

         <div class="modal-footer footerwidth">
         <a type="button" class="btn btn-secondary btn-sm text-white" id="modal-close" data-dismiss="modal">Close</a>
            <a type="button" class="btn btn-primary text-white btn-sm submit_button" onclick="AddBlockCategories()">Submit</a>
         </div>
      </div>
   </div>
</div>
<!-- Block Categories end -->
<!-- Time Slots Start-->
<div class="modal fade" tabindex="-1" role="dialog" id="timeSlots" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><strong>Blocked Time Slots</strong></h5>
                <div class="pull-right inline-block">
                    <label class="float-lg-right">Publisher ID: <span class="time-slot-modal-publisherID"></span></label><br>
                    <label class="float-lg-right">Website ID: <span class="time-slot-modal-WebsiteID"></span></label>
                </div>
            </div>
            <div class="pl-2 time_slot_select_all_div">
                <input type="checkbox" id="clear_checked"/>
                <label for="clear_checked" class="cursor-pointer redIcon">Select all</label>
            </div>
            <div class="modal-body">
                    <div id="all_time_slots" class="">
                    </div>
            </div>
            <div class="modal-footer footerwidth">
                <a type="button" class="btn btn-secondary btn-sm text-white" id="modal-close" data-dismiss="modal">Close</a>
                <a type="button" class="btn btn-primary text-white btn-sm time_slot_submit_button" onclick="addTimeSlots()">Submit</a>
            </div>
        </div>
    </div>
</div>
<!-- Time slots Modal end -->

<!-- Block Based Campaign Id Model Start Here -->
<div class="modal fade" tabindex="-1" role="dialog" id="campaignId_slot" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><strong>Block By Region</strong></h5>
                <div class="pull-right inline-block">
                    <label class="float-lg-right">Publisher ID: <span class="campaignId-slot-publisherID"></span></label><br>
                    <label class="float-lg-right">Website ID: <span class="campaignId-slot-WebsiteID"></span></label>
                    <input type="hidden" name="">
                </div>
            </div>
            <div class="modal-body">
                <div class="d-flex flex-wrap" >
                    <div class="form-group col-4 pl-0">
                        <label for="campaignid">Campaign ID</label>
                            <select class="form-control" name="campaignid"  id="campaignid"> </select>
                    </div>
                    <div class="form-group col-4 pl-0">
                        <label for="state">State</label>
                            <select class="form-control" name="state[]" multiple id="state" required> </select>
                            <span class="error-state span-error redIcon"></span>
                    </div>
                    <div class="form-group col-4 pl-0">
                        <label for="city">City</label>
                            <select class="form-control" name="city[]" multiple id="city"> </select>
                    </div>
                </div>           
                <div class="modal-footer footerwidth blockFooter">
                    <a type="button" class="btn btn-primary text-white btn-sm " id="addblockcity">Submit</a>
                </div> 
                
                <!-- unblock campaign state and city wise -->
                <h5 class="modal-title unblockTag"><strong>UnBlock By Region</strong></h5>

                <div class="d-flex flex-wrap" >
                    <div class="form-group col-4 pl-0">
                        <label for="">Campaign ID</label>
                            <select class="form-control" name="blockedCampaignId"  id="blockedCampaignId"> </select>
                    </div>
                    <div class="form-group col-4 pl-0">
                        <label for="">State</label>
                            <select class="form-control" name="blockedstate[]" multiple id="blockedstate"> </select>
                            <span class="error-unblockState span-error redIcon"></span>
                    </div>
                    <div class="form-group col-4 pl-0">
                        <label for="">city</label>
                        <select class="form-control" name="blockedcities[]" multiple id="blockedcities"> </select>
                    </div>
                </div>
            </div>
            
            <div class="modal-footer footerwidth unblockFooter">
                <a type="button" class="btn btn-secondary btn-sm text-white" id="close" data-dismiss="modal">Close</a>
                <a type="button" class="btn btn-primary text-white btn-sm " id="unblockStateCity">Submit</a>
            </div>
        </div>
    </div>
</div>
<!-- Block Based Campaign Id Model End -->

<!-- Add Placement Model Start Here -->
<div class="modal fade" tabindex="-1" role="dialog" id="placement_modal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog placementModal" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><strong>Add Placement</strong></h5>
                <div class="pull-right inline-block">
                    <label class="float-lg-right">Website ID: <span class="placement_websiteID"></span></label>
                    <input type="hidden" name="">
                </div>
            </div>
            <div class="modal-body">
                <div class="d-flex flex-wrap" >
                    <form id="placementForm">
                        <div class="placementEntry">
                            <div class="d-flex" id="p_type">
                                <div>
                                    <label for="campaignid" class="control-label clabel">Placement Type </label>
                                    <select id="placement_type" class="form-control">
                                        <option value="" selected="" disabled="">Select Placement Type</option>
                                        <option value="1">Placement</option>
                                        <option value="2">Sub Placement</option>
                                    </select>
                                    <span class="placement-type-error redIcon"></span>
                                </div>
                                <div class="placement_div">
                                    <label class="control-label clabel">Placement Name</label>
                                    <div>
                                        <input type="text" class="form-control" name="placementName" id="placementName" placeholder="Placement Name" required="">
                                        <span class="placement-name-error redIcon"></span>
                                    </div>
                                </div>
                                <div class="placement_div">
                                    <label class="control-label clabel">Inventory Type </label>
                                    <div>
                                        <select id="placement_inv_type" class="form-control">
                                            <option value="" selected="">Select Inventory Type</option>
                                           <option value="1">Text Ads </option>
                                            <option value="3">Tile Ads</option>
                                            <option value="6">Banner Ads</option>
                                            <option value="4">OEM-Text</option>
                                        </select>
                                        <span class="placement-inventory-error redIcon"></span>
                                    </div>
                                </div>
                                <div class="p-parent-div parent_placement_div" >
                                    <label>Placement Name</label>
                                    <select class="p-parent-div form-control" name="parent_placement_id" id="parent_placement_id"> </select>
                                    <span class="parent-placement-name-error redIcon"></span>
                                </div>
                                <div class="sub_placement_div">
                                    <label class="control-label clabel5">Sub Placement Name</label>
                                    <div class="sub-css">
                                        <input type="text" class="form-control" name="subPlacementName" id="subPlacementName" placeholder="Sub Placement Name" required="">
                                        <span class="sub-placement-name-error redIcon"></span>
                                    </div>
                                </div>
                                <div class="sub_placement_id">
                                    <label class="control-label clabel">Placement Id</label>
                                    <div>
                                        <input type="text" class="form-control" name="placementId" id="placementId" placeholder="Placement ID" required="">
                                        <span class="placement-id-error redIcon"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="sp_min_bid">
                            <label class="control-label clabel">Minimum Bid</label>
                            <div class="">
                                <input type="number" class="form-control" name="sub_min_bid" id="sub_min_bid" placeholder="Minimum Bid" required="">
                                <span class="sp-min-bid-error redIcon"></span>
                            </div>
                        </div>
                    </form>
                </div>           
            </div>
            
            <div class="modal-footer footerwidth unblockFooter">
                <a type="button" class="btn btn-primary text-white btn-sm placementButtons" id="addPlacement">Submit</a>
            </div>

            <table class="table table-bordered" id="placementDetailsTable">
              <thead>
                  <tr>
                      <th>Placement Name</th>
                      <th>Sub Placement Name</th>
                      <th style="max-width: 300px !important;">Placement ID</th>
                      <th>Inventory Type</th>
                      <th>Minimum Bid</th>
                      <th>Action</th>
                  </tr>
              </thead>
              <tbody id="placementDetailsContainer">
                  <!-- Placement details will be inserted here dynamically -->
              </tbody>
            </table>
            <div class="modal-footer footerwidth unblockFooter"> 
                <a type="button" class="btn btn-secondary btn-sm text-white placementButtons" id="close" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>
<!-- Add Placement Model Ends Here -->

<!-- Postback Modal Start Here -->
<div class="modal fade" tabindex="-1" role="dialog" id="postback_modal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><strong>Postback URL</strong></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="postbackForm">
                    <div class="form-group">
                        <input type="text" class="form-control" name="postbackURL" id="postbackURL" placeholder="Enter Postback URL" required>
                        <input type="hidden" id="website_id" name="website_id">
                        <span class="postback-url-error redIcon"></span>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="updatePostback">Update</button>
            </div>
        </div>
    </div>
</div>
<!-- Postback Modal Ends Here -->

<!-- OEM FILTERS Modal Start Here -->
<div class="modal fade" tabindex="-1" role="dialog" id="oemFiltersModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog oemFiltersModal" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="oemModalTitle"><strong>OEM Preference</strong></h5>
                <div class="pull-right inline-block">
                    <label class="float-lg-right">Website ID: <span class="placement_websiteID"></span></label>
                </div>
            </div>
            <div class="modal-body">
                <form id="placementForm">
                    <div class="d-flex flex-wrap" id="p_type">
                        <!-- Add your form fields here -->
                    </div>
                </form>

                <table class="table table-bordered" id="placementDetailsTable">
                    <thead>
                        <tr>
                            <th>Country</th>
                            <th>State</th>
                            <th>City</th>
                            <th style="max-width: 300px !important;">Model</th>
                            <th>Make</th>
                            <th>Gaid</th>
                            <th>Placement</th>
                            <th>Sub Placement</th>
                            <th>Bid Type</th>
                        </tr>
                    </thead>
                    <tbody id="OemfilterContainer">
                        <tr>
                            <td>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox">
                                    <span class="slider round"></span>
                                </label>
                            </td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox" id="placementSwitch">
                                    <span class="slider round"></span>
                                </label>
                            </td>
                            <td>
                                <label class="switch">
                                    <input type="checkbox"  id="subSwitch">
                                    <span class="slider round"></span>
                                </label>
                            </td>
                            <td>
                            <div class="dropdown">
                                <select id="CampaignType" class="form-control cform-control divs input-size" multiple>
                                    <option value="0">CPC</option>
                                    <option value="1">CPA</option>
                                    <option value="2">CPM</option>
                                </select>
                                </div>
                            </td>
                        </tr>
                    </tbody> 
                </table>
            </div>
            <div class="modal-footer footerwidth unblockFooter">
                <a type="button" class="btn btn-primary text-white btn-sm oemFiltersButtons" id="addFilters">Submit</a>
                <a type="button" class="btn btn-secondary btn-sm text-white oemFiltersButtons" id="close" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>

<!-- OEM Dimension Modal Start Here -->
<div class="modal fade" tabindex="-1" role="dialog" id="oemDimensionModal" data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog oemDimensionModal" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="oemModalTitle"><strong>Dimension Preference</strong></h5>
                <div class="pull-right inline-block">
                    <label class="float-lg-right">Website ID: <span class="placement_websiteID"></span></label>
                </div>
            </div>
            <div class="modal-body" style="min-height: 220px;">
                <form id="dimensionForm">
                    <div class="dimensionEntry">
                        <div class="d-flex" id="d_type">
                            <div class="inventories_div">
                                <label class="control-label clabel">Inventory Type </label>
                                <div>
                                    <select name="inv_type" id="inv_type" class="form-control"></select>
                                    <span class="inventory-error redIcon"></span>
                                </div>
                            </div>
                            <div class="dimension_div">
                                <label class="control-label clabel">Dimension</label>
                                <div>
                                    <select id="dimensions" class="form-control" multiple>
                                    </select>
                                    <span class="dimension-error redIcon"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer footerwidth unblockFooter">
                <a type="button" class="btn btn-primary text-white btn-sm oemFiltersButtons" id="addDimensions">Submit</a>
                <a type="button" class="btn btn-secondary btn-sm text-white oemFiltersButtons" id="close" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>

<link rel="stylesheet" href="{{asset('css/jquery-ui.css')}}"/>
<script type="application/javascript" src="{{ asset('js/jquery-ui.js') }}"></script>
<script src="{{ asset('js/bootstrap-toggle.min.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 viewOnly= false;
    @can('hasUpdatePermission')
    viewOnly = true;
    @endcan

$(document).ready(function() {
    var category_filter = language_filter = revenue_filter = platform_filter = approved_filter = client_filter= '';
    var publisher_state = is_mysql = 0;
    
    $(document).on("mouseenter", "#subSwitch, #subSwitch + .slider, label[for='subSwitch']", function () {
       let parentChecked = $("#placementSwitch").prop("checked");
       let $subSwitch = $("#subSwitch");
       let $label = $subSwitch.closest("label.switch");
        if (!parentChecked) {
            // Disable and show tooltip
            $subSwitch.prop("disabled", true);
            $label.attr("title", "Placement should be active");
        } else {
            // Enable and remove tooltip
            $subSwitch.prop("disabled", false);
            $label.removeAttr("title");
        }
    });

    $(document).on("change", "#placementSwitch", function () {
        let isChecked = $(this).prop("checked");
        let $subSwitch = $("#subSwitch");
        let $label = $subSwitch.closest("label.switch");

        if (!isChecked) {
            // Disable and uncheck subSwitch
            $subSwitch.prop("disabled", true).prop("checked", false);
            $label.attr("title", "Placement should be active");
        } else {
            // Enable subSwitch, keep unchecked initially
            $subSwitch.prop("disabled", false).prop("checked", false);
            $label.removeAttr("title");
        }
    });

    publisherdetails_list();
    get_publisher_count()/*call function to display Total, Active and In-Active Count*/
    $('.toggle-event').bootstrapToggle();
    // clear all filter script
    $('.clear_filter').on('click',function(){
        $('#category_filter').multiselect('clearSelection');
        $('#language_filter').multiselect('clearSelection');
        $('#platform_filter').multiselect('clearSelection');
        $('#revenue_filter').multiselect('clearSelection');
        $('#approved_filter').multiselect('clearSelection');
        $('#client_filter').multiselect('clearSelection');
        $('.count-div').removeClass('btn-outline-success active');
        $('#'+$('.count-div').eq(0).prop('id')).addClass('btn-outline-success active');
        publisherdetails_list();
    });   
    //Count Filter
    $('.count-div').click(function (e) {
                e.preventDefault();
                publisher_state = parseInt(this.id.slice(-1));
                language_filter = $('#language_filter').val();
                revenue_filter  = $('#revenue_filter').val();
                platform_filter = $('#platform_filter').val();
                category_filter = $('#category_filter').val();
                approved_filter = $('#approved_filter').val();
                client_id       = $('#client_filter').val();
                publisherdetails_list(category_filter, language_filter, platform_filter, revenue_filter,approved_filter,publisher_state,client_id);
                $('.count-div').removeClass('btn-outline-success active');
                $(this).addClass('btn-outline-success active');
    });

    $('#dbToggle').on('change', function() {
        language_filter = $('#language_filter').val();
        revenue_filter  = $('#revenue_filter').val();
        platform_filter = $('#platform_filter').val();
        category_filter = $('#category_filter').val();
        approved_filter = $('#approved_filter').val();
        website_id      = $('#website_id').val().trim();
        client_id       = $('#client_filter').val();
        localStorage.setItem('dbToggleChecked', $(this).is(':checked'));
        publisherdetails_list(category_filter, language_filter, platform_filter, revenue_filter, approved_filter, publisher_state, website_id,client_id);
    });
    /*Language filter on change*/
    $("body").on("change", "#language_filter", function() {
        language_filter = $(this).val();
        revenue_filter  = $('#revenue_filter').val();
        platform_filter = $('#platform_filter').val();
        category_filter = $('#category_filter').val();
        approved_filter = $('#approved_filter').val();
        website_id      = $('#website_id').val().trim();
        client_id       = $('#client_filter').val();
        publisherdetails_list(category_filter, language_filter, platform_filter, revenue_filter, approved_filter, publisher_state, website_id,client_id);
    });
    /*Revenue filter on change*/
    $("body").on("change", "#revenue_filter", function() {
        revenue_filter    = $(this).val();
        language_filter = $('#language_filter').val();
        platform_filter = $('#platform_filter').val();
        category_filter = $('#category_filter').val();
        approved_filter = $('#approved_filter').val();
        website_id      = $('#website_id').val().trim();
        client_id       = $('#client_filter').val();
        publisherdetails_list(category_filter, language_filter, platform_filter, revenue_filter, approved_filter, publisher_state, website_id,client_id);
    });
    //  script for platform filter
    $("body").on("change", "#platform_filter", function(){
        platform_filter = $(this).val();
        revenue_filter  = $('#revenue_filter').val();
        language_filter = $('#language_filter').val();
        category_filter = $('#category_filter').val();
        approved_filter = $('#approved_filter').val();
        website_id      = $('#website_id').val().trim();
        client_id       = $('#client_filter').val();
        publisherdetails_list(category_filter, language_filter, platform_filter, revenue_filter, approved_filter, publisher_state, website_id,client_id);
    });
    //  script for approved filter
    $("body").on("change", "#approved_filter", function(){
        approved_filter = $(this).val();
        language_filter = $('#language_filter').val();
        platform_filter = $('#platform_filter').val();
        category_filter = $('#category_filter').val();
        revenue_filter  = $('#revenue_filter').val();
        website_id      = $('#website_id').val().trim();
        client_id       = $('#client_filter').val();
        publisherdetails_list(category_filter, language_filter, platform_filter, revenue_filter, approved_filter, publisher_state, website_id,client_id);
    });
    //  script for category filter
    $("body").on("change", "#category_filter", function(){
        category_filter = $(this).val();
        language_filter = $('#language_filter').val();
        platform_filter = $('#platform_filter').val();
        revenue_filter  = $('#revenue_filter').val();
        approved_filter = $('#approved_filter').val();
        website_id      = $('#website_id').val().trim();
        client_id       = $('#client_filter').val();
        publisherdetails_list(category_filter, language_filter, platform_filter, revenue_filter, approved_filter, publisher_state, website_id,client_id);
    });
    // script for website id
    $("body").on("keydown", "#website_id", function (e) {   
    if (e.keyCode === 13) { 
        var website_id = $(this).val().trim();
            category_filter = $('#category_filter').val();
            language_filter = $('#language_filter').val();
            platform_filter = $('#platform_filter').val();
            revenue_filter  = $('#revenue_filter').val();
            approved_filter = $('#approved_filter').val();
            client_id       = $('#client_filter').val();
            publisherdetails_list(category_filter, language_filter, platform_filter, revenue_filter, approved_filter, publisher_state, website_id,client_id);
        }
    });
    $("body").on("change", "#client_filter", function(){
        client_id = $(this).val();
        category_filter = $('#category_filter').val();
        language_filter = $('#language_filter').val();
        platform_filter = $('#platform_filter').val();
        revenue_filter  = $('#revenue_filter').val();
        approved_filter = $('#approved_filter').val();
        website_id      = $('#website_id').val().trim();
        publisherdetails_list(category_filter, language_filter, platform_filter, revenue_filter, approved_filter, publisher_state, website_id, client_id);
    });
    $('#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%',
    });
    $('#revenue_filter').multiselect({
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Revenue',
        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%',
    });
    $('#platform_filter').multiselect({
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Platform',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        includeSelectAllOption : true,
        maxHeight              : 200,
        numberDisplayed        : 1,
        buttonWidth            : '100%',
    });
    $('#dimensions').multiselect({
        includeSelectAllOption : true,
        allSelectedText        : 'All Selected',
        nonSelectedText        : 'Select Dimension',
        selectAllText          : 'Select All',
        unselectAllText        : 'UnSelect All',
        selectAllJustVisible   : false,
        numberDisplayed        : 1,
        buttonWidth            : '165px',
        width                  : '165px',
        maxHeight              : 130,
        enableFiltering        : true,
        enableCaseInsensitiveFiltering: true,
        includeFilterClearBtn: true,
        enableHTML: true,
        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>'
        }
    });
    $('#CampaignType').multiselect({
            includeSelectAllOption : true,
            allSelectedText        : 'All Selected',
            nonSelectedText        : 'Select Bid Type',
            selectAllText          : 'Select All',
            unselectAllText        : 'UnSelect All',
            selectAllJustVisible   : false,
            numberDisplayed        : 1,
            buttonWidth            : '165px',
            width                  : '165px'
    });   
    $('#category_filter').multiselect({
        includeSelectAllOption: true,
        nonSelectedText: 'Select Category',
        selectAllText: 'Select all',
        unselectAllText: 'Unselect all',
        allSelectedText: 'All Category selected',
        selectAllValue: 'all',
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        includeFilterClearBtn: true,
        buttonWidth: '100%',
        enableHTML: true,
        selectAllJustVisible: false,
        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>'
        }
    });
    $('#client_filter').multiselect({
        includeSelectAllOption: true,
        nonSelectedText: 'Select Publisher Id',
        selectAllText: 'Select All',
        unselectAllText: 'Unselect All',
        allSelectedText: 'All Selected',
        selectAllValue: 'All',
        enableFiltering: true,
        enableCaseInsensitiveFiltering: true,
        includeFilterClearBtn: true,
        buttonWidth: '100%',
        enableHTML: true,
        selectAllJustVisible: false,
        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>'
        }
    });
    /*script for   excel export*/
    $(".creative_approval_excel").click(function(e){
        e.preventDefault();
        language_filter = $('#language_filter').val();
        category_filter = $('#category_filter').val();
        platform_filter = $('#platform_filter').val();
        revenue_filter  = $('#revenue_filter').val();
        approved_filter = $('#approved_filter').val();
        website_id      = $('#website_id').val().trim();
        let client_id   = $('#client_filter').val();
        let page_name   = $("#approval_dropdown option:selected").text();
        $('#language_filter_hidden').val(language_filter);
        $('#category_filter_hidden').val(category_filter);
        $('#platform_filter_hidden').val(platform_filter);
        $('#revenue_filter_hidden').val(revenue_filter);
        $('#approved_filter_hidden').val(approved_filter);
        $('#publisher_state_hidden').val(publisher_state);
        $('#website_id_hidden').val(website_id);
        is_mysql = $('#dbToggle').is(':checked') ? 1 : 0;
        $('#is_mysql_hidden').val(is_mysql);
        $.ajax({
            "url" : "{{ url('exportfeedpublisherapproval') }}",
            "type": "POST",
            "data": {
                _token              : "{{csrf_token()}}",
                language_filter     : language_filter,
                category_filter     : category_filter,
                platform_filter     : platform_filter,
                revenue_filter      : revenue_filter,
                approved_filter     : approved_filter,
                website_id          : website_id,
                page_name           : page_name,
                client_id           : client_id,
                is_mysql            : is_mysql
            },
            "dataType": "json",
            success: function(response) {
                if(response){
                    toastr.success('File Will Be Sent To Your Registered Email Id');
                }else{
                    toastr.error('Something Went Wrong or File Is Already Being Created');
                }
            }
        });
    });

      //  script for category filter
      $("body").on("change", "#placement_type", function(){
        var website_id = $('.placement_websiteID').html();
        clearPlacementFields();
        
        placement_type = $(this).val();
        if(placement_type == '1'){
            $('.sub_placement_div').hide();
            $('.placement_div').show();
            $('.parent_placement_div').hide();
            $('.sub_placement_id').hide();
            $('.sp_min_bid').hide();
        }else if(placement_type == '2'){
            $('.sub_placement_div').show();
            $('.placement_div').hide();
            $('.parent_placement_div').show();
            $('.sub_placement_id').show();
            $('.sp_min_bid').show();

            $.ajax({
            url      : "{{ url('getParentPlacementData') }}/" + website_id,
            type     : 'GET',
            dataType : 'json',
            success  : function (response) {
                $('#parent_placement_id').empty().append('<option value="" disabled selected>Select Placement Name</option>');
                $.each(response, function(i, item) {
                    $('<option>').attr({"value": item.id + "-" + item.inventory_type + "-" + item.placement_name}).text(item.placement_name).appendTo('#parent_placement_id');
                });
                $('#parent_placement_id').multiselect('rebuild').multiselect("clearSelection").multiselect("refresh");
                },
                error: function (error) {
                    alert(error);
                }
            });
            
        }
    });
      // current date
        // Adding hover functionality for disabled approval button (only for UnderReview status)
        $(document).on('mouseenter', '.approval-button[disabled]', function() {
            // Check if the status is 'UnderReview'
            var rowID = $(this).attr('row-id');
            if ($('.underreview-span-' + rowID).length > 0) {
                // Display message when hovering over a disabled button and status is UnderReview
                $(this).attr('title', 'Click on the Website Link first');
            }
            else if ($('.Approved-span-' + rowID).length > 0) {
                // Display message when hovering over a disabled button and status is UnderReview
                $(this).removeAttr('title');
            }
        });
    //if any button is clicked from website 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 username = $(this).attr('row-username');
            let email    = $(this).attr('row-email');
            let website    = $(this).attr('row-website');
            $(this).removeAttr('title');
            // if approve button clicked
            if(approval_status_val==1){
            if(window.confirm('Are you sure you want to approve this Website ?')){
                $.ajax({
                    type: "POST",
                    url: "{{url('publisher_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('