@extends('frontend.home')
@section('content')
<!--==================================================-->
<!-- Start KiyoHR Breadcumb Area -->
<!--==================================================-->
<div class="breadcumb-area container_white d-flex">
	<div class="container">
		<div class="row align-items-center">
			<div class="col-lg-12 text-center">
				<div class="breadcumb-content">
					<div class="breadcumb-title">
						<h4>Pricing Plan</h4>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--==================================================-->
<!-- End KiyoHR Breadcumb Area -->
<!--==================================================-->

<!--==================================================-->
<!-- Start Hosting pricing Area Style Two-->
<!--==================================================-->
<section class="pricing-area style_two inner_page">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="section_title text-center">
					
					<h1>Choose the Comfortable Pricing Plans </h1>
					<p style="width:100%">{{ $frontSetting->price_description }}</p>
				</div>
				<div class="d-flex justify-content-center mb-24">
					<div class="d-flex items-center">
						<span for="pricing-switch" class="mr-4">{{ isset($frontSetting->pricing_yearly_text) ?  $frontSetting->pricing_yearly_text : 'Yearly' }}</span>
						<input type="checkbox" id="pricing-switch" value="1" class="hidden" checked>
						<label for="pricing-switch" id="slider" class="relative mr-4 w-8 h-4 rounded-full bg-green-900 cursor-pointer" style="margin-top: 0.30rem;"></label>
						<span class="mr-4">{{ isset($frontSetting->pricing_monthly_text) ?  $frontSetting->pricing_monthly_text : 'Monthly' }}</span>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			@php $key = 1; @endphp
			@foreach ($subscriptionPlans as $subscriptionPlan)
			<div class="col-lg-3 col-md-6" style="position: relative;">
				@if($subscriptionPlan->is_popular)
					<img style="position: absolute;top: -2.75rem;right: 1rem;z-index:99" src="{{ $frontSetting->most_popular_image_url }}" alt="">
				@endif
				<div class="pricing-single-items style_two">
					<div class="pricing_inner">
						<div class="pricing_icon">
						@php ($key > 3)?$key = 1:$key = $key; @endphp

							<img src="assets/images/home_two/price_icon_0{{$key}}.png" alt="">
						</div>
						<div class="pricing-title">
							<h3>{{ $subscriptionPlan->name }}</h3>
							<span>
							@if($subscriptionPlan->default == 'yes')
							{{ $frontSetting->pricing_no_card_text }}
							@else
							<span class="monthly_div" style="display: none;">
								{{ isset($frontSetting->pricing_billed_monthly_text) ?  $frontSetting->pricing_billed_monthly_text : 'Billed Monthly' }}
							</span>
							<span class="yearly_div">
								{{ isset($frontSetting->pricing_billed_yearly_text) ?  $frontSetting->pricing_billed_yearly_text : 'Billed Yearly' }}
							</span>
							@endif
							</span>
						</div>																
					</div>
					<div class="pricing-body">
						<div class="pricing-feature">
							<ul>
								@foreach ($subscriptionPlan->features as $subscriptionPlanFeature)
									<li><img src="assets/images/home_two/icon.png" alt="">{{ $subscriptionPlanFeature }}</li>
								@endforeach
							</ul>
						</div>
					</div>
					<div class="pricing-item-text">	
					@if($subscriptionPlan->default == 'yes')
						{{ $frontSetting->pricing_free_text }}
					@else
						<span class="monthly_div" style="display: none;">
							<span class="tk">{{ \App\SuperAdmin\Classes\SuperAdminCommon::formatAmountCurrency(number_format($subscriptionPlan->monthly_price, 0, '.', ',')) }}</span><span class="month">/ {{ $frontSetting->pricing_month_text }}</span>
						</span>
						<span class="yearly_div">
							<span class="tk">{{ \App\SuperAdmin\Classes\SuperAdminCommon::formatAmountCurrency( number_format($subscriptionPlan->annual_price, 0, '.', ',')) }}</span><span class="month">/ {{  isset($frontSetting->pricing_year_text) ?  $frontSetting->pricing_year_text : 'year' }}</span>
						</span>
					@endif				
					</div>
					<div class="consalt_btn style_two">
						<a href="{{ route('front.register') }}"> {{ $frontSetting->pricing_get_started_button_text }}<span></span></a>
					</div>
				</div>
			</div>
			@php $key++; @endphp
			@endforeach
		</div>	
		<p class="mb-4 text-sm text-gray-500 text-center font-medium leading-relaxed">{{ $frontSetting->price_card_title }}</p>
        <div class="d-flex flex-wrap justify-content-center">
            @foreach ($pricingCards as $pricingCard)
                <div class="w-auto">
                    <a href="javascript:void(0);">
                        <img src="{{ $pricingCard->logo_url }}" alt="{{ $pricingCard->name }}">
                    </a>
                </div>
            @endforeach
        </div>			
	</div>
</section>
<!--==================================================-->
<!-- End Hosting  Pricing Area Style Two -->
<!--==================================================-->


<!--==================================================-->
<!-- Start KiyoHR Marquee Area Style Two-->
<!--==================================================-->
<div class="marquee_area style_two" id="faq_area">
	<div class="container-fluid">
		<div class="row">
			<div class="col-lg-12">
				<div class="slide-har st1">
					<div class="box">
						<div class="item"><h4 class="d-flex align-items-center"><a href="#"><img class="marqee_img_left" src="assets/images/home_3/marqee_star.png" alt=""><span>Business Consultant</span><span class="icon-img-50 ml-40"><img src="assets/images/home_3/marqee_star.png" alt=""></span></a></h4></div>					
						<div class="item"><h4 class="d-flex align-items-center"><a href="#"><span>MARKETING STRATEGY</span><span class="icon-img-50"><img src="assets/images/home_3/marqee_star.png" alt=""></span></a></h4></div>					
						<div class="item"><h4 class="d-flex align-items-center"><a href="#"><span>BUSINESS SOLUTIONS</span><span class="icon-img-50"><img src="assets/images/home_3/marqee_star.png" alt=""></span></a></h4></div>					
						<div class="item"><h4 class="d-flex align-items-center"><a href="#"><span>DESIGN & DEVELOPMENT</span><span class="icon-img-50"><img src="assets/images/home_3/marqee_star.png" alt=""></span></a></h4></div>					
						<div class="item"><h4 class="d-flex align-items-center"><a href="#"><span>BUSINESS STRATEGY</span><span class="icon-img-50"><img src="assets/images/home_3/marqee_star.png" alt=""></span></a></h4></div>					
					</div>
				</div>		
			</div>
		</div>
	</div>
</div>
<!--==================================================-->
<!-- End KiyoHR  Marquee Area-->
<!--==================================================-->


<!--==================================================-->
<!-- Start KiyoHR  Faq Area-->
<!--==================================================-->
<section class="faq_area">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				<div class="section_title text-center">
					<h4>FAQ’s</h4>
					<h1>Frequently Asked Questions </h1>
					<h1>Portable Services</h1>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-lg-12">
				<!-- Start Accordion -->
				<div class="container">
					<div id="tab1" class="tab_content">
						<ul class="accordion">
							@foreach ($allFaqs as $allFaq)
							<li>
								<a><span>{{ $allFaq->question }}</span><i class="bi bi-chevron-right"></i></a>
								<p>{{ $allFaq->answer }}</p>
							</li>
							@endforeach
							
						</ul>
					</div>
				</div>
				<!-- End Accordion -->
			</div>
		</div>
	</div>
</section>
<!--==================================================-->
<!-- End KiyoHR  Faq Area-->
<!--==================================================-->
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script>
        $('#pricing-switch').change(function () {
            if($(this).is(':checked'))
            {
                $('.monthly_div').hide();
                $('.yearly_div').show();
            } else {
				$('.yearly_div').hide();
                $('.monthly_div').show();
            }
        });
    </script>
@endsection