@extends('layouts.dashlayoutsingle')
@section('content')
	<div class="container">
		<hr class="my-3 bg-transparent border-0">
		<div class="row">
			<div class="col-md-12 text-center">
				<h1 class="main-title home">{{ optionByKey('publish_for_free') }}</h1>
			</div>
			<div class="col-md-12 mt-5">
				<ul id="progressbar">
					<li class="active icon-user" id="personal"><strong>{{ optionByKey('insert') }}</strong></li>
					<li id="photo" class="icon-camera active"><strong>{{ optionByKey('your_photo') }}</strong></li>
					<li id="promote" class="icon-thumbs-up active"><strong>{{ optionByKey('verify') }}</strong></li>
					<li id="confirm" class="icon-checkmark"><strong>{{ optionByKey('finish') }}</strong></li>
				</ul>
					<div class="row">
						<div class="col-md-8">
							<div class="row">
							
							{!! Html::form('POST', url($profile_promote_url) )->open() !!}
						
							<input type="hidden" name="secret_code" value="{{$profile_key}}">
							<input type="hidden" name="product_id" >
							<input type="hidden" name="profile_id" value="{{$profiles->id}}">
							<input type="hidden" name="time_data_id">
							<input type="hidden" name="permotiontype" value="0">
								<div class="col-md-12">
									<div class="select-plan-gride bg-light border rounded-3 p-3">
									   <h5 class="fw-bold"><i class="icon-top-icon"></i> TOP</h5>										   <p class="small"> {!! str_replace('{adsid}',$profiles->post_id,optionByKey('we_will_help_you')) !!} </p>										   <a class="fs-6 mb-2 d-inline-block show-example-link" href="#" data-bs-toggle="modal" data-bs-target="#DiscoverVipBenefits">												<i class="icon-eye me-2"></i> {!! optionByKey('show_example') !!}											</a>
										
										<div class="promote-your-ad-list row">
										@foreach($products as $key=>$product)
										
										@php $val = explode('x',$product->name);
											 $price = number_format($coins_rate*$product->per_coin_rate,2,'.','');		
											 
											 $allinoneprice = number_format($coins_rate*$product->allinone_coin_rate,2,'.','');
											 
											 $excprice = number_format($coins_rate*$product->exc_coin_rate,2,'.','');
											 $randnum = explode(',',$product->randnum);
											 
											 $highlightprice = number_format($coins_rate*$product->highlight_coin_rate,2,'.','');
											 
											 $newlabelprice = number_format($coins_rate*$product->new_label_coin_rate,2,'.','');
										 @endphp
										 
											<div class="col-md-6">
							<div class="promote-your-ad-box promote-day-select promote-select-time-slot" data-pname="{{$val[0]}}X{{$val[1]}}" data-price="{{$price}}" data-coin="{{$product->per_coin_rate}}" data-product_id="{{$product->id}}" id="promote-your-ad-box_{{$key}}">
								<input type="checkbox" name="optradio" id="promote-ad{{$key}}" class="check-radio-btn">
								
								<label for="promote-ad{{$key}}" class="{{ $product->days_name}} p-2 pb-3">
									<div class="promote-ad-coins-info d-flex align-items-start justify-content-between flex-column mb-4">
										<span class="select-radio-icon"></span>
										<div class="p-ad-ch d-flex justify-content-between w-100">
											<div class="promote-ad-coins-item text-start">
												<span class="prodcut-purchase-number text-end">
													<span class="item fs-3 fw-bold pinkColor">{{$val[0]}}</span>
													<span class="item fs-4 fw-bold">x</span>
													<span class="item fs-3 fw-bold">{{$val[1]}}</span>
												</span>
											</div>
											<div class="promote-ad-coins-item text-end">
												<div class="coins-quantity-text fw-bold">({{$product->per_coin_rate}} {{optionByKey('coins_name')}})</div>
												<div class="fw-bold fs-6 coins-price-title">{{$currency_symbol}}  {{ number_format($coins_rate*$product->per_coin_rate,2,'.','') }}</div>
											</div>
										</div>
										<div class="p-d-cl-n d-flex align-items-start justify-content-start">
											<p>{!! $product->description !!}</p>
										</div>
									</div>

									<div class="promote-ad-coins-bottom-info">
										<div class="pradday">{{$product->days_name}}</div>
										<div class="form-group">
											<select class="form-control custom-select time-slot-dropdown" name="" required="required" disabled>
												<option value="">{{optionByKey('select_time_slot')}}</option>
												@foreach(getProductPlan($product->id) as $plan)
													<option value="{{ $plan->id }}">{{ $plan->plan_time }}</option>
												@endforeach
											</select>
										</div>
										<div class="promote-ad-coins-toggle-wrapper">
											<!-- New Plan Section Start -->
											<div class="new-optionplan-box">
												
												{!! optionByKey('contantupgrades') !!}
												
											 <div class="upgradePanel p-2 mb-12 parrent-toggle">
													
													{!! optionByKey('contantallinone') !!}
													
													<div class="promote-ad-coin-detail-info fw-bold">
														+ {{$currency_symbol}} {{ number_format($coins_rate*$product->allinone_coin_rate,2,'.','') }} ({{$product->allinone_coin_rate}} {!! optionByKey('coins_name') !!})
													</div>
													
													<div class="show-example-link-box mb-0">
														<a class="show-example-link" href="#" data-bs-toggle="modal" data-bs-target="#allinoneBenefits"><i class="icon-eye me-2"></i> {!! optionByKey('show_example') !!}</a>
													</div>
													
													<label for="terms_{{$randnum[0]}}" class="switch switch-left-right">  
														<input id="terms_{{$randnum[0]}}" data-pname="{{$val[0]}}X{{$val[1]}}" data-mainprice="{{number_format($price,2,'.','')}}" data-price="{{number_format($allinoneprice,2,'.','')}}" data-coin="{{$product->allinone_coin_rate}}"  data-percoin="{{$product->per_coin_rate}}" class="switch-input onoff-switch-promote" type="checkbox" name="allinone">
														<span data-on="{!! optionByKey('yes_btn') !!}" data-off="{!! optionByKey('no_btn') !!}" class="switch-label"></span> 
														<span class="switch-handle"></span>
													</label>
												</div>
											
												<div class="upgradePanel p-2 mb-12 child-toggle">
													
													{!! optionByKey('contantexclusive') !!}
													
													<div class="promote-ad-coin-detail-info fw-bold">
														+ {{$currency_symbol}} {{ number_format($coins_rate*$product->exc_coin_rate,2,'.','') }} ({{$product->exc_coin_rate}} {!! optionByKey('coins_name') !!})
													</div>
													<div class="show-example-link-box mb-0">
														<a class="show-example-link" href="#" data-bs-toggle="modal" data-bs-target="#vipprimebenfits"><i class="icon-eye me-2"></i> {!! optionByKey('show_example') !!}
														</a>
													</div>
													<label for="terms_{{$randnum[1]}}" class="switch switch-left-right">
														<input id="terms_{{$randnum[1]}}" data-pname="{{$val[0]}}X{{$val[1]}}" data-mainprice="{{number_format($price,2,'.','')}}"data-price="{{number_format($excprice,2,'.','')}}"data-coin="{{$product->exc_coin_rate}}" data-percoin="{{$product->per_coin_rate}}" data-type="exclusive" class="switch-input onoff-switch-promote" type="checkbox" name="allpromotion">
														<span data-on="{!! optionByKey('yes_btn') !!}" data-off="{!! optionByKey('no_btn') !!}" class="switch-label"></span> 
														<span class="switch-handle"></span>
													</label>
												</div>
											
												<div class="upgradePanel p-2 mb-12 child-toggle">
													
													{!! optionByKey('contanthighlight') !!}
													
													
													<div class="promote-ad-coin-detail-info fw-bold">
														+ {{$currency_symbol}} {{ number_format($coins_rate*$product->highlight_coin_rate,2,'.','') }} ({{$product->highlight_coin_rate}} {!! optionByKey('coins_name') !!})
													</div>
													<div class="show-example-link-box mb-0">
														<a class="show-example-link" href="#" data-bs-toggle="modal" data-bs-target="#highlightBenefits"><i class="icon-eye me-2"></i> {!! optionByKey('show_example') !!}
	</a>
													</div>
													<label for="terms_{{$randnum[2]}}" class="switch switch-left-right">
														<input id="terms_{{$randnum[2]}}" data-pname="{{$val[0]}}X{{$val[1]}}" data-mainprice="{{number_format($price,2,'.','')}}" data-price="{{number_format($highlightprice,2,'.','')}}" data-coin="{{$product->highlight_coin_rate}}"  data-percoin="{{$product->per_coin_rate}}" data-type="highlight" class="switch-input onoff-switch-promote" type="checkbox" name="allpromotion"> 
														<span data-on="Sim" data-off="Não" class="switch-label"></span> 
														<span class="switch-handle"></span>
													</label>
												</div>
											
												<div class="upgradePanel p-2  child-toggle">
													
													{!! optionByKey('contantnewlabel') !!}
													
													<div class="promote-ad-coin-detail-info fw-bold">
														+ {{$currency_symbol}} {{ number_format($coins_rate*$product->new_label_coin_rate,2,'.','') }} ({{$product->new_label_coin_rate}} {!! optionByKey('coins_name') !!})
													</div>
													<div class="show-example-link-box mb-0">
														<a class="show-example-link" href="#" data-bs-toggle="modal" data-bs-target="#labelnewBenefits"><i class="icon-eye me-2"></i> {!! optionByKey('show_example') !!}
														</a>
													</div>
													
												   <label for="terms_{{$randnum[3]}}" class="switch switch-left-right" >
														<input id="terms_{{$randnum[3]}}" data-pname="{{$val[0]}}X{{$val[1]}}" data-mainprice="{{number_format($price,2,'.','')}}" data-price="{{number_format($newlabelprice,2,'.','')}}" data-coin="{{$product->new_label_coin_rate}}" data-percoin="{{$product->per_coin_rate}}" class="switch-input onoff-switch-promote" data-type="newlabel" type="checkbox" name="allpromotion">  
														<span data-on="Sim" data-off="Não" class="switch-label"></span> 
														<span class="switch-handle"></span>
													</label>
													
												</div>
											
											
											
											</div>
											<!-- New Plan Section Start -->
										</div>
									</div>
								</label>
							</div>
						</div>
						@endforeach							@foreach($productstwo as $key=>$product)														@php $val = explode('x',$product->name);								 $price = number_format($coins_rate*$product->per_coin_rate,2,'.','');										 								 $allinoneprice = number_format($coins_rate*$product->allinone_coin_rate,2,'.','');								 								 $excprice = number_format($coins_rate*$product->exc_coin_rate,2,'.','');								 $randnum = explode(',',$product->randnum);								 								 $highlightprice = number_format($coins_rate*$product->highlight_coin_rate,2,'.','');								 								 $newlabelprice = number_format($coins_rate*$product->new_label_coin_rate,2,'.','');							 @endphp							 			<div class="col-md-6">				<div class="promote-your-ad-box promote-day-select promote-select-time-slot nightplan" data-pname="{{$val[0]}}X{{$val[1]}}" data-price="{{$price}}" data-coin="{{$product->per_coin_rate}}" data-product_id="{{$product->id}}" id="promote-your-ad-box_{{$key+3}}">					<input type="checkbox" name="optradio" id="promote-ad{{$key+3}}" class="check-radio-btn">																							<label for="promote-ad{{$key+3}}" class="Night p-2 pb-3">						<div class="promote-ad-coins-info d-flex align-items-start justify-content-between flex-column mb-4">							<span class="select-radio-icon"></span>							<div class="p-ad-ch d-flex justify-content-between w-100">								<div class="promote-ad-coins-item text-start">									<span class="prodcut-purchase-number text-end">										<span class="item fs-3 fw-bold pinkColor">{{$val[0]}}</span>										<span class="item fs-4 fw-bold">x</span>										<span class="item fs-3 fw-bold">{{$val[1]}}</span>									</span>								</div>														<div class="promote-ad-coins-item text-end">									<div class="coins-quantity-text fw-bold">({{$product->per_coin_rate}} {{optionByKey('coins_name')}})</div>									<div class="fw-bold fs-6 coins-price-title">{{$currency_symbol}}  {{ number_format($coins_rate*$product->per_coin_rate,2,'.','') }}</div>								</div>																			</div>														<div class="p-d-cl-n d-flex align-items-start justify-content-start">								<p>{!! $product->description !!}</p>							</div>						</div>						<div class="promote-ad-coins-bottom-info">							<div class="pradday">{{$product->days_name}}</div>								<div class="form-group p-d-cl-n">						   									@foreach(getProductPlan($product->id) as $plan)										<p class="night_time_slot" data-nightplanid="{{$plan->id}}"> <span class="watch-icon"></span>										<strong>{{ $plan->plan_time }}</strong></p>									@endforeach												</div>								<div class="promote-ad-coins-toggle-wrapper">													<!-- New Plan Section Start -->													<div class="new-optionplan-box">																												{!! optionByKey('contantupgrades') !!}																											 <div class="upgradePanel p-2 mb-12 parrent-toggle">																														{!! optionByKey('contantallinone') !!}																														<div class="promote-ad-coin-detail-info fw-bold">																+ {{$currency_symbol}} {{ number_format($coins_rate*$product->allinone_coin_rate,2,'.','') }} ({{$product->allinone_coin_rate}} {!! optionByKey('coins_name') !!})															</div>																														<div class="show-example-link-box mb-0">																<a class="show-example-link" href="#" data-bs-toggle="modal" data-bs-target="#allinoneBenefits"><i class="icon-eye me-2"></i> {!! optionByKey('show_example') !!}</a>															</div>																														<label for="terms_{{$randnum[0]}}" class="switch switch-left-right">  																<input id="terms_{{$randnum[0]}}" data-pname="{{$val[0]}}X{{$val[1]}}" data-mainprice="{{number_format($price,2,'.','')}}" data-price="{{number_format($allinoneprice,2,'.','')}}" data-coin="{{$product->allinone_coin_rate}}"  data-percoin="{{$product->per_coin_rate}}" class="switch-input onoff-switch-promote" type="checkbox" name="allinone">																<span data-on="{!! optionByKey('yes_btn') !!}" data-off="{!! optionByKey('no_btn') !!}" class="switch-label"></span> 																<span class="switch-handle"></span>															</label>														</div>																											<div class="upgradePanel p-2 mb-12 child-toggle">																														{!! optionByKey('contantexclusive') !!}																														<div class="promote-ad-coin-detail-info fw-bold">																+ {{$currency_symbol}} {{ number_format($coins_rate*$product->exc_coin_rate,2,'.','') }} ({{$product->exc_coin_rate}} {!! optionByKey('coins_name') !!})															</div>															<div class="show-example-link-box mb-0">																<a class="show-example-link" href="#" data-bs-toggle="modal" data-bs-target="#vipprimebenfits"><i class="icon-eye me-2"></i> {!! optionByKey('show_example') !!}																</a>															</div>															<label for="terms_{{$randnum[1]}}" class="switch switch-left-right">																<input id="terms_{{$randnum[1]}}" data-pname="{{$val[0]}}X{{$val[1]}}" data-mainprice="{{number_format($price,2,'.','')}}"data-price="{{number_format($excprice,2,'.','')}}"data-coin="{{$product->exc_coin_rate}}" data-percoin="{{$product->per_coin_rate}}" data-type="exclusive" class="switch-input onoff-switch-promote" type="checkbox" name="allpromotion">																<span data-on="{!! optionByKey('yes_btn') !!}" data-off="{!! optionByKey('no_btn') !!}" class="switch-label"></span> 																<span class="switch-handle"></span>															</label>														</div>																											<div class="upgradePanel p-2 mb-12 child-toggle">																														{!! optionByKey('contanthighlight') !!}																																													<div class="promote-ad-coin-detail-info fw-bold">																+ {{$currency_symbol}} {{ number_format($coins_rate*$product->highlight_coin_rate,2,'.','') }} ({{$product->highlight_coin_rate}} {!! optionByKey('coins_name') !!})															</div>															<div class="show-example-link-box mb-0">																<a class="show-example-link" href="#" data-bs-toggle="modal" data-bs-target="#highlightBenefits"><i class="icon-eye me-2"></i> {!! optionByKey('show_example') !!}	</a>															</div>															<label for="terms_{{$randnum[2]}}" class="switch switch-left-right">																<input id="terms_{{$randnum[2]}}" data-pname="{{$val[0]}}X{{$val[1]}}" data-mainprice="{{number_format($price,2,'.','')}}" data-price="{{number_format($highlightprice,2,'.','')}}" data-coin="{{$product->highlight_coin_rate}}"  data-percoin="{{$product->per_coin_rate}}" data-type="highlight" class="switch-input onoff-switch-promote" type="checkbox" name="allpromotion"> 																<span data-on="{{optionByKey('yes_btn')}}" data-off="{{optionByKey('no_btn')}}" class="switch-label"></span> 																<span class="switch-handle"></span>															</label>														</div>																											<div class="upgradePanel p-2  child-toggle">																														{!! optionByKey('contantnewlabel') !!}																														<div class="promote-ad-coin-detail-info fw-bold">																+ {{$currency_symbol}} {{ number_format($coins_rate*$product->new_label_coin_rate,2,'.','') }} ({{$product->new_label_coin_rate}} {!! optionByKey('coins_name') !!})															</div>															<div class="show-example-link-box mb-0">																<a class="show-example-link" href="#" data-bs-toggle="modal" data-bs-target="#labelnewBenefits"><i class="icon-eye me-2"></i> {!! optionByKey('show_example') !!}																</a>															</div>																													   <label for="terms_{{$randnum[3]}}" class="switch switch-left-right" >																<input id="terms_{{$randnum[3]}}" data-pname="{{$val[0]}}X{{$val[1]}}" data-mainprice="{{number_format($price,2,'.','')}}" data-price="{{number_format($newlabelprice,2,'.','')}}" data-coin="{{$product->new_label_coin_rate}}" data-percoin="{{$product->per_coin_rate}}" class="switch-input onoff-switch-promote" data-type="newlabel" type="checkbox" name="allpromotion">  																<span data-on="{{optionByKey('yes_btn')}}" data-off="{{optionByKey('no_btn')}}" class="switch-label"></span> 																<span class="switch-handle"></span>																																															</label>																													</div>																																							</div>													<!-- New Plan Section Start -->												</div>																	</div>					</label>				</div>				</div>												@endforeach	
						</div>
					</div>
				</div>
			   
				<div class="col-md-12 mt-3">
					{!! optionByKey('comman_informations') !!}		
				</div>
				
			</div>
		</div>
			<div class="col-md-4">
				<div class="card total-price-box p-3 bg-light">

					<h5 class="card-title fs-6 fw-bold mb-4">{!! optionByKey('promotions') !!}</h5>
				   
					<div class="pricing-features mb-4">
					   <div class="feature fw-bold">
							<p id="add_data" class="add_data_slot">{!! optionByKey('no_promotion') !!}</p>
							
							<div id="totalslot">
								<div class="time_slot_error">{!! optionByKey('select_time_slot') !!}</div>
								<p id="add_data_total" class="add_data_slot"></p>
							</div>
							
						</div>                                       
					</div>
					
					<!-- Button -->
					<button type="submit" name="buyandpublish" id="buyandpublish" disabled="disabled" class="btn btn-primary btn-block w-100">
					   {!! optionByKey('buy_button') !!}
					</button>
				 </div>
			</div>
			
		{!! Html::form()->close() !!} 	
		</div>
	</div>
	</div>
	</div>
	<!-- DiscoverVipBenefits Modal -->
	<div class="modal fade" id="DiscoverVipBenefits" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="DiscoverVipBenefitsLabel" aria-hidden="true">
	<div class="modal-dialog">
	<div class="modal-content">
		<div class="modal-header justify-content-center">
			<h5 class="modal-title fs-4"> 
				<i class="icon-top-icon"></i>
			</h5>
			<button type="button" data-bs-dismiss="modal" aria-label="Fechar" class="position-absolute close close-btn-al">
				<span aria-hidden="true">×</span>
			</button>
		</div>
		
		{!! optionByKey('show_example_popup_vip') !!}
			
	</div>
	</div>
	</div>
	<!-- Modal -->    

	<!-- allinoneBenefits Modal -->
	<div class="modal fade" id="allinoneBenefits" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="allinoneBenefitsLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			{!! optionByKey('show_popup_allinone') !!}            
		</div>
	</div>
	</div>
	<!-- Modal -->

	<!-- vipprimebenfits Modal -->
	<div class="modal fade" id="vipprimebenfits" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="vipprimebenfitsLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">		
			{!! optionByKey('show_example_popup_exclusive') !!}              
		</div>
	</div>
	</div>
	<!-- Modal -->

	<!-- highlightBenefits  Modal -->
	<div class="modal fade" id="highlightBenefits" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="highlightBenefitsLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			{!! optionByKey('show_popup_highlight') !!}            
		</div>
	</div>
	</div>
	<!-- Modal -->

	<!-- highlightBenefits  Modal -->
	<div class="modal fade" id="labelnewBenefits" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="labelnewBenefitsLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			{!! optionByKey('show_popup_labelnew') !!}
		</div>
	</div>
	</div>
	<!-- Modal -->





	@endsection


	@push('css-styles')
	<link rel="stylesheet" href="/static/css/dashboard.css?v={{time()}}">
	<link rel="stylesheet" href="/static/css/select-plan-pg.css?v={{time()}}">
	@endpush


	@push('scripts')
	<script>  

	document.addEventListener('DOMContentLoaded', function() {
		$('.check-radio-btn').change(function () {
			var adBox = $(this).closest('.promote-your-ad-box');
			var select = adBox.find('select');
			if (this.checked) {
				select.prop('disabled', false);
			} else {
				select.prop('disabled', true);
			}
		}); 

		$('.promote-your-ad-box').click(function () {
			$('.promote-your-ad-box').not(this).each(function() {
				$(this).find('input[type="checkbox"]').prop('checked', false);
				$(this).find('select').prop('disabled', true);
			});  
							
		});

		const boxes = document.querySelectorAll('.promote-your-ad-box');
		boxes.forEach(box => {
			const checkbox = box.querySelector('.check-radio-btn');
			checkbox.addEventListener('change', () => {
				if (checkbox.checked) {
					boxes.forEach(b => b.classList.remove('active'));
					box.classList.add('active');
				} else {
					const anyChecked = Array.from(boxes).some(b => b.querySelector('.check-radio-btn').checked);
					if (!anyChecked) {
						box.classList.remove('active');
						$("#add_data").html('{!! optionByKey('no_promotion') !!}');
						$("#buyandpublish").prop('disabled', true);
					}
				}
			});
		});

		// Select all dropdowns
		const dropdowns = document.querySelectorAll('.time-slot-dropdown');
		dropdowns.forEach(dropdown => {
			dropdown.addEventListener('change', () => {
				const wrapper = dropdown.closest('.promote-ad-coins-bottom-info').querySelector('.promote-ad-coins-toggle-wrapper');
				if (dropdown.value) {
					wrapper.classList.add('active');
				} else {
					wrapper.classList.remove('active');
				}
			});
		});    


		var isUpdating = false;
		$(".parrent-toggle .switch-input").change(function() {
			if (isUpdating) return; 
			var isChecked = $(this).prop('checked');
			var $box = $(this).closest('.promote-your-ad-box');                
			isUpdating = true;
			$box.find('.child-toggle .switch-input').each(function() {
				$(this).prop('checked', isChecked).change(); 
			});
			isUpdating = false;
			$(this).closest('.upgradePanel').toggleClass("border-active", isChecked);
			$(this).closest('.promote-your-ad-box').find('.child-toggle .switch-input').each(function() {
				$(this).closest('.upgradePanel').toggleClass("border-active", isChecked);                    
			});
		});

		$(".child-toggle .switch-input").change(function() {
			if (isUpdating) return;                 
			var $this = $(this);
			var $box = $this.closest('.promote-your-ad-box');
			var allChildChecked = $box.find(".child-toggle .switch-input").length === $box.find(".child-toggle .switch-input:checked").length;
			
			isUpdating = true;
			$box.find(".parrent-toggle .switch-input").prop('checked', allChildChecked).change();  
			isUpdating = false;
			$this.closest('.upgradePanel').toggleClass("border-active", $this.prop('checked'));
		});

		function checkAllChildrenActive(box) {
			return box.find(".child-toggle .switch-input").length === box.find(".child-toggle .switch-input:checked").length;
		}

		function resetSiblingSwitches(parentID) {
			$(".promote-your-ad-box").not("#" + parentID).find('.switch-input').each(function() {
				$(this).prop('checked', false).change();
			});
		}

		$(".promote-your-ad-box").click(function() {
			var parentID = $(this).attr('id');
			resetSiblingSwitches(parentID);
		});           

		$(".promote-your-ad-box").click(function () {
			var isChecked = $(this).find(".check-radio-btn").is(":checked");
			if (isChecked) {
				$(this).find(".custom-select").removeAttr("disabled");
				 $("#totalslot").css("display", "block");
				 $(".time_slot_error").css("display", "block");
			} else {
				$(".promote-your-ad-box .custom-select").prop("disabled", true);
				$(this).find(".custom-select").prop("disabled", true);
				$(".promote-your-ad-box .custom-select").val("");
				$(".promote-ad-coins-toggle-wrapper").removeClass("active");
				$("#totalslot").css("display", "none");         
			}
		});
		
		$(".custom-select").on('change',function(){
			var value = $(this).val();
			if(value > 0){	
				$('.time_slot_error').addClass('none');	
				$(this).parents('.promote-your-ad-box').addClass('promote-select-time-slot');
				$('#buyandpublish').removeAttr("disabled");
				$('input[name=time_data_id]').val(value);
			}else{
				$('.time_slot_error').removeClass('none');
				$(this).parents('.promote-your-ad-box').removeClass('promote-select-time-slot');
				$('input[name=time_data_id]').val(0);
			} 
		});			
		
		$('.custom-select').on('change', function() {
			if(this.value === ''){
				$('.time_slot_error').removeClass('none');
			}
		});

		$('.onoff-switch-promote').change(function() {
			var totalcoin = 0;
			var totalprice = 0;		
			var typeArray = [];
			
			var mainPrice = parseFloat($(this).data('mainprice'));
			
			$('input[name="allpromotion"]:checked').each(function() {
				totalcoin += parseFloat($(this).attr('data-coin'));
			});
			
			$('input[name="allpromotion"]:checked').each(function() {
				totalprice += parseFloat($(this).attr('data-price'));
			});
			
			$('input[name="allpromotion"]:checked').each(function() {
				typeArray.push($(this).attr('data-type'));
			});
			
			$('input[name=permotiontype]').val(typeArray);
							
			$("#add_data").html("Top Promotion <span>" + $(this).data("pname") + "</span> (" + parseFloat(totalcoin + $(this).data("percoin")) + " {{optionByKey('coins_name')}} )");
			
			var total = mainPrice + totalprice;	

			$("#add_data_total").html('<span class="ttllbel">Total:</span> <span class="pricevalue">{{$currency_symbol}} ' + parseFloat(total).toFixed(2) + "</span>");	
		});
		
		
	$('.promote-your-ad-box').click(function(){
			var isChecked = $("input.check-radio-btn").is(":checked");
			$('#add_data').html('Top <span>'+$(this).data('pname')+'</span> ('+$(this).data('coin')+' {{optionByKey('coins_name')}})');			
			$('#add_data_total').html('<span class="ttllbel">Total:</span> <span class="pricevalue">{{$currency_symbol}} '+$(this).data('price')+'</span>');			 
			$('input[name=product_id]').val($(this).data('product_id'));
			
		});
});


document.addEventListener('DOMContentLoaded', function() {
    function handleCheckboxChange() {
        const boxes = document.querySelectorAll('.promote-your-ad-box');
        
        boxes.forEach(box => {
            const checkbox = box.querySelector('.check-radio-btn');
            const toggleWrapper = box.querySelector('.promote-ad-coins-toggle-wrapper');
            const select = box.querySelector('.time-slot-dropdown');

            if (checkbox.checked) {
                toggleWrapper.classList.add('active');			
                if (box.classList.contains('nightplan')) {
                    toggleWrapper.classList.add('active');
                } else {
                    if (select.value) {
                        toggleWrapper.classList.add('active');
                    } else {
                        toggleWrapper.classList.remove('active');
                    }
                }
            } else {
                toggleWrapper.classList.remove('active');
            }
        });
    }
   

    // Attach event listeners
    const checkboxes = document.querySelectorAll('.check-radio-btn');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', handleCheckboxChange);
    });
	
	$(".nightplan").click(function () {
		var timeslotnitval = $(this).find('.night_time_slot').data('nightplanid');
		$('input[name=time_data_id]').val(timeslotnitval);
			var isChecked = $(this).find(".check-radio-btn").is(":checked");
			if (isChecked) {						
				$('.time_slot_error').css('display','none');
				$('.common-btn-red').removeAttr("disabled")
			} else {
				$(".promote-night-select .promote-ad-coins-toggle-wrapper").css('display','none');
				$('input[name=time_data_id]').val(0);
			}
	});
    
});






</script>

<style type="text/css">
.custom-select:disabled {
	color: #6c757d;
	background-color: #e9ecef;
}
.time_slot_error {display: none;}

span.pricevalue {
	float: right;
}
.time_slot_error.none {		
	display: none !important;	
}	
.time_slot_error {		
	color: red;		
	margin: 10px 0;		
	font-size: 11px;	
}	
</style>
	
	@endpush