Viewing file:  choose_program.blade.php (66.3 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('layouts.frontLayout')
@section('title')
{{get_settings('app_name')}} - {{trans('admin.features')}}
@endsection
@section('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css"/>
<style>
.design-one-title {
position: relative;
top: -33px;
background: #555252;
color: white;
font-weight: 900;
font-size: 18px;
height: 33px;
line-height: 30px;
}
.checkbox-right-image {
height: 135px;
margin: 20px 0px;
}
.design-one-right-image-title {
}
.h-100 {
height: 100%;
}
.w-100 {
width: 100%;
}
.checkbox-right-image {
background: #1E1E1E;
}
.checkbox-right-image:hover {
background: #2A2A2A;
}
.multiple-checkbox-title {
position: relative;
font-size: 18px !important;
color: #fff;
font-weight: 600;
}
.multiple-checked-checkbox {
display: initial !important;
}
.single-radio-title {
display: initial;
color: white;
font-size: 18px;
font-weight: 600;
position: relative;
top: -2px;
}
.single-radio-description {
color: white;
}
.single-radio-input {
width: 16px;
height: 15px;
}
.single-radio-section {
background: #212121;
margin: 20px 0px;
border:2px solid transparent;
}
.single-radio-section:hover{
background: #2A2A2A;
}
.height-btn.active {
background: #3a3a3a !important;
color: white;
border: 2px solid #fc5830;
}
.weight-btn.active {
background: #3a3a3a !important;
color: white;
border: 2px solid #fc5830;
}
.height-btn.focus, .weight-btn:focus {
outline: 0 !important;
box-shadow: none !important;
}
.btn.focus{
outline: 0 !important;
box-shadow: none !important;
}
.bg-black {
background: #1E1E1E;
}
label {
cursor: pointer;
}
.height-btn:hover {
background: #4b454596;
color: white;
}
.height-btn {
background: #4b454596;
color: white;
}
.height-label{
color: #fff;
font-size: 20px;
}
.unit-label-title{
color: #fff;
font-size: 18px;
}
.mckboxActive{
border: 2px solid rgb(255 68 0);
}
.weight-btn:hover {
background: #4b454596;
color: white;
}
.weight-btn {
background: #4b454596;
color: white;
}
#next_button {
background-color: #ff4400 !important;
border-color: #ff4400 !important;
padding: 10px 25px;
}
#back_button {
background-color: #ff4400 !important;
border-color: #ff4400 !important;
padding: 10px 25px;
color: white !important;
opacity: 1;
}
.multi-radio-section div input {
display: initial !important;
}
.multi-radio-section {
padding: 20px 0px;
border-radius: 3px !important;
background: #1E1E1E;
margin: 20px 0px;
}
.multi-radio-section:hover{
background: #272727;
}
.plan-card.active {
box-shadow: 0px 8px 15px rgb(0 0 0 / 43%) !important;
}
.plan-card {
background: linear-gradient(to bottom,#ff4400,#232321);
border: hidden;
color: white;
cursor: pointer;
}
.ul-none {
list-style: none;
line-height: 35px;
}
.plan-row {
width: 100%;
}
input[type=checkbox] {
display: none;
}
.trigger_next.active{
border: 2px solid rgb(255 68 0);
height: 254px;
}
.trigger_next_f.active{
border: 3px solid rgb(255 68 0);
}
</style>
<style>
pre {
padding: 20px 20px 0 0;
background: #f9f9f9;
border: 1px solid #f2f2f2;
margin-bottom: 30px;
line-height: 2em;
}
.top {
background-color: #333;
border-bottom: 3px solid #00b3bc;
color: #fff;
padding: 20px;
}
.top h1 {
font-size: 20px;
text-align: center;
}
.slider-container {
width: 90%;
max-width: 500px;
margin: 0 auto 50px;
}
.config {
border: 1px solid #f2f2f2;
margin-bottom: 30px;
line-height: 1.7em;
}
.config table {
border-collapse: collapse;
width: 100%;
}
.config table td {
padding: 10px;
border-bottom: 1px solid #f2f2f2;
}
.config table tr:nth-child(even) td {
background-color: #f9f9f9;
}
.mb {
margin-bottom: 15px;
}
.label {
font-weight: bold;
white-space: nowrap;
}
.download {
margin-bottom: 20px;
}
.download a {
text-decoration: none;
color: #00969b;
font-size: 16px;
}
.ranger-slider-images {
height: 400px;
}
.ranger-slider-images img {
height: 100%;
margin: 0 auto;
}
.ch-multi-fields.active {
border: 1px solid rgb(255 68 0);
}
input:checked {
border-color: rgb(255 68 0);
background-color: rgb(255 68 0);
}
.design-o-sec label {
width: 100%;
}
.design-o-sec label .design-o-img-sec img {
width: 100%;
}
.design-o-sec label .design-o-img-sec {
width: 100%;
}
.w-100 {
width: 100% !important;
}
</style>
<style>
.choose-program-section h2 {
font-size: 48px !important;
/* text-align: left; */
/*line-height: 90px;*/
color: white;
font-weight: 800;
letter-spacing: -0.0218097em;
margin-top: 35px;
}
.slider-program-title{
font-size: 35px;
}
input[type="date"], input[type="email"], input[type="number"], input[type="password"], input[type="search"],
input[type="tel"], input[type="text"], input[type="url"], select, textarea, .woocommerce .quantity input.qty, .wp-block-search input[type="search"], .dark input[type="email"], .dark input[type="password"], .dark input[type="tel"], .dark input[type="text"], .dark select, .dark textarea {
color: #000000 !important;
background-color: rgb(255 255 255) !important;
border-color: #ff4400 !important;
}
.badge {
display: none;
}
.active .badge {
background: white !important;
padding: 10px 10px !important;
font-size: 19px !important;
font-weight: 500 !important;
border: hidden;
display: block !important;
color:black !important;
}
.design-o-img-sec img {
height: 100% !important;
}
.design-o-img-sec {
height: 200px !important;
background: #272727;
}
.design-o-img-sec:hover{
background: #2c2b2b;
}
.trigger_next_input{
display: none !important;
}
.trigger_next_f_input{
display: none !important;
}
/* h1,h2,h3,h4,h5,h6{
line-height: 28px !important;
} */
.plan-card .card-header h2,h1,h3,h4,h5,h6{
color: white !important;
}
@media (max-width: 700px) {
#programForm{
margin-top: 35px !important;
}
}
#back_button:disabled{
cursor: not-allowed !important;
}
#Top_bar{
top: 0px !important;
}
.choose-program-section-wrapper {
padding-top: 46px;
background: linear-gradient(360deg, black, transparent);
}
.choose-back-icon {
background: #5f5b5b;
padding: 3px 4px 4px 3px;
color: white;
}
.choose-back-icon:hover {
background: #8b8484;
}
.progress-devider-arrow-line {
height: 3px;
background: rgb(255 68 0);
}
.choose-program-wrapper-bg {
background: #000;
background-image: linear-gradient(rgb(88 84 84 / 49%) .1em, transparent .1em), linear-gradient(90deg, rgb(47 47 47) .1em, transparent .1em);
background-size: 4em 4em;
}
.choose-program-sub-title {
font-size: 18px;
/*text-align: left;*/
color: #fff;
}
.choose-program-sec-title {
font-size: 35px;
font-weight: 900;
text-align: left;
margin-top: 35px;
}
.checkbox-right-image {
height: 170px;
}
a{
text-decoration: none
}
a:hover{
text-decoration: none
}
.design-one-right-image-title {
font-size: 24px;
font-weight: 800;
}
.step-wise-des.text-white {
margin: 10px 0px;
}
.design-seven-label-title {
font-size: 20px;
color: #fff;
font-weight: 600;
}
button.continue-btn {
border: none;
background: rgb(255 68 0);
color: #fff;
font-size: 20px;
border-radius: 2px;
padding: 10px 15px;
font-weight: 600;
}
.user-input-label{
font-size: 18px;
color: #fff;
}
.design-one-p-image{
padding: 20px 25px 30px 25px;
}
.initial-content{
background: #1c1c1a;
position: fixed;
z-index: 99999;
width: 101%;
min-height: 700px;
text-align: center;
}
.single-ck-bx-section{
position: relative;
overflow: hidden;
}
.preview-only-sl {
background: #1c1c1a;
padding: 10px 20px;
border-radius: 5px;
}
.preview-only-sl .detail-text-title{
font-size: 18px !important;
}
@media (max-width: 750px) {
.design-o-img-sec {
height: 168px !important;
}
.choose-program-section h2{
font-size: 30px !important;
}
.choose-program-sub-title{
font-size: 14px !important;
}
.checkbox-right-image{
height: 140px !important;
}
.ranger-slider-images{
height: 350px !important;
}
.res-title-for-sm{
font-size: 30px !important;
}
}
</style>
@endsection
@section('content')
<div class="row initial-content align-items-center">
<div class="col-md-12">
<img width="70" src="{{asset('images/VAyR.gif')}}" alt="">
</div>
</div>
<div id="Content" class="choose-program-wrapper-bg" role="main">
<div class="section mcb-section choose-program-section-wrapper">
<section class="choose-program-section">
<div class="container">
<form id="programForm" class=" mb-0" action="{{route('save.program.data')}}" method="post">
@csrf
<div class="row align-items-center pt-3">
<div class="col-lg-1">
<a href="#" id="" disabled="disabled" class="choose-program-back-btn" onclick="back()">
<i class="fa fa-chevron-left choose-back-icon" aria-hidden="true"></i>
</a>
</div>
<div class="col-lg-10">
<div class="progress-devider-arrow-line">
</div>
</div>
<div class="col-lg-1">
<div class="text-white"><span class="step-serial">1</span>/ <span class="all-steps">{{isset($steps)?count($steps):''}}</span> </div>
</div>
</div>
<div class="">
<div class="row mb-3 d-none">
<div class="col-md-5 mx-auto">
<button type="submit" id="next_button"
class="btn btn-primary ms-auto float-right"
onclick="next()">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
@foreach($steps as $key=>$step)
@if($step->design=='design_one')
<div class="tab d-none">
<div class="row">
<div class="col-md-10 mx-auto text-center">
<div class="form-group mb-5">
<h2 class="choose-program-main-title">
{{$step->title}}
</h2>
@if($step->sub_title)
<div class="choose-program-sub-title">
{{$step->sub_title}}
</div>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 mx-auto">
<div class="row mt-3">
@foreach($step->step_details as $kk=>$detail)
@php $value=$detail->value?json_decode($detail->value):''; @endphp
<div class="col-md-3 col-6 text-center">
<div class="form-group design-o-sec">
<label for="check_box{{$detail->id}}" data-id="{{$step->id}}" class=" single_s_cl_{{$step->id}}" onclick="next()">
<div class="design-o-img-sec">
<img class="img-fluid design-one-p-image" src="{{asset('uploads/'.$value->image)}}"
alt="">
</div>
<h5 class="design-one-title">{{$value->title}} ({{$value->value}})</h5>
</label>
<input class="common_input trigger_next_input" type="radio" value="{{$detail->id}}=={{$value->value}}"
id="check_box{{$detail->id}}"
name="fordesign_{{$step->id}}">
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
@elseif($step->design=='design_four')
<div class="tab d-none">
<div class="row">
<div class="col-md-5 mx-auto text-center">
<div class="form-group mb-3">
<h1 class="choose-program-sec-title">
{{$step->title}}
</h1>
@if($step->sub_title)
<div class="choose-program-sub-title">
{{$step->sub_title}}
</div>
@endif
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-5 mx-auto">
@foreach($step->step_details as $s_key=>$detail)
@php $value=$detail->value?json_decode($detail->value):''; @endphp
<label data-id="{{$step->id}}" class="row trigger_next_f single_s_clf_{{$step->id}} align-items-center checkbox-right-image {{$s_key > 0?'mt-2':''}}"
for="check_box_{{$detail->id}}">
<div class="col-md-8 col-8">
<span class="design-one-right-image-title text-white">{{$value->title}}</span>
<div class="step-wise-des text-white">{{$value->description}}</div>
</div>
<div class="col-md-4 col-4 h-100 p-0 single-ck-bx-section">
<img class=""
src="{{asset('uploads/'.$value->image)}}" alt="">
</div>
<input type="checkbox" class="common_input trigger_next_f_input" name="fordesign_{{$step->id}}" value="{{$detail->id}}=={{$value->value}}" id="check_box_{{$detail->id}}">
</label>
@endforeach
</div>
</div>
</div>
@elseif($step->design=='design_two')
<div class="tab d-none">
<div class="row">
<div class="col-md-10 mx-auto">
<div class="row mt-3 align-items-center text-center">
@php $slider_array=[]; @endphp
@foreach($step->step_details as $s_key=>$detail)
@php
$value=$detail->value?json_decode($detail->value):'';
$slider_array[]=isset($value->value)?$value->value:'';
@endphp
@endforeach
<div class="col-md-6">
<div class="div ranger-slider-images">
@foreach($step->step_details as $s_key=>$detail)
@php
$value=$detail->value?json_decode($detail->value):'';
$unique_id=str_replace('-','_', $value->value)
@endphp
<img src="{{asset('uploads/'.$value->image)}}"
class="{{$s_key=='0'?'':'d-none'}} preview-images-sl slider_preview_image_{{$unique_id}}"
alt="">
@endforeach
</div>
</div>
<div class="col-md-6 mx-auto">
<h3 class="slider-program-title"> {{$step->title}}</h3>
<div class="slider-container">
<input name="step_{{$detail->id}}" type="text"
id="slider2"
class="slider common_input"/>
</div>
<div class="continue-btn-for-choose-prog float-right mb-4 mt-2">
<button type="button" onclick="next()" class="continue-btn">
Continue
<span class="ml-5">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
@elseif($step->design=='design_six')
<div class="tab d-none">
<div class="row mt-3">
<div class="col-md-5 mx-auto">
@foreach($step->step_details as $s_key=>$detail)
@php $value=$detail->value?json_decode($detail->value):''; @endphp
<label data-id="{{$detail->id}}"
class="row align-items-center ml-2 ch-multi-fields multi-box_{{$detail->id}} checkbox-right-image {{$s_key > 0?'mt-2':''}}"
for="ch_multiple_checkbox_{{$detail->id}}">
<div class="col-md-8 col-8 text-left">
<input type="checkbox" name="step_{{$detail->id}}" value="{{$value->value}}" data-id="{{$detail->id}}" class="multiple-checked-checkbox common_input multi-checkbox-select_{{$detail->id}}"
id="ch_multiple_checkbox_{{$detail->id}}">
<label
class="multiple-checkbox-title ml-3 text-left">{{$value->title}}</label>
</div>
<div class="col-md-4 col-4 text-center h-100">
<img class="h-100"
src="{{asset('uploads/'.$value->image)}}"
alt="">
</div>
</label>
@endforeach
<div class="continue-btn-for-choose-prog float-right mb-4 mt-2">
<button type="button" onclick="next()" class="continue-btn">Continue <span class="ml-5"><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</span></button>
</div>
</div>
</div>
</div>
@elseif($step->design=='design_five')
<div class="tab d-none">
<div class="row">
<div class="col-md-5 mx-auto text-center">
<div class="form-group mb-5">
@if($step->non_sub_title)
<h4 class="text-left">
{{$step->non_sub_title}}
</h4>
@endif
<h1 class="res-title-for-sm">
{{$step->title}}
</h1>
@if($step->sub_title)
<h5 class="">
{{$step->sub_title}}
</h5>
@endif
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-5 mx-auto">
@foreach($step->step_details as $s_key=>$detail)
@php $value=$detail->value?json_decode($detail->value):''; @endphp
<label
class="row align-items-center p-1 ml-2 single_radion-sec_{{$detail->id}} single-radio-section pt-4 is_active_{{$s_key}} {{$s_key > 0?'mt-2':''}}"
for="single-design_{{$detail->id}}">
<div class="col-md-12 col-12 text-left">
<input type="radio" name="stepdetail_{{$step->id}}"
value="{{$detail->id}}"
class="single-radio-input common_input single-radio-selection"
id="single-design_{{$detail->id}}" data-id="{{$detail->id}}">
<h3 class="single-radio-title ml-1">{{isset($value->title)?$value->title:''}} </h3>
<h6 class="d-block ml-4 mt-2 pl-1 single-radio-description">{{isset($value->description)?$value->description:''}}</h6>
</div>
</label>
@endforeach
<div class="continue-btn-for-choose-prog float-right mb-4 mt-2">
<button type="button" onclick="next()" class="continue-btn">Continue <span class="ml-5"><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</span></button>
</div>
</div>
</div>
</div>
@elseif($step->design=='design_three')
<div class="tab d-none">
<div class="row">
<div class="col-md-5 mx-auto text-center">
<div class="form-group mb-5">
@if($step->non_sub_title)
<h4 class="text-left">
{{$step->non_sub_title}}
</h4>
@endif
<h1 class="res-title-for-sm">
{{$step->title}}
</h1>
@if($step->sub_title)
<h5 class="">
{{$step->sub_title}}
</h5>
@endif
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-5 mx-auto">
<div class="row">
<div class="col-md-6 text-left">
<div class="unit-label-title">Unit</div>
</div>
<div class="col-md-6 text-right">
@foreach($step->step_details as $s_key=>$detail)
@php $value=$detail->value?json_decode($detail->value):''; @endphp
@if(isset($value->group) && $value->group=='ft')
<button type="button" class="btn height-btn"
data-type="{{isset($value->group)?$value->group:''}}">
ft,in
</button>
@else
<button type="button" class="btn height-btn"
data-type="{{isset($value->group)?$value->group:''}}">
cm
</button>
@endif
@endforeach
</div>
</div>
@foreach($step->step_details as $s_key=>$detail)
@php $value=$detail->value?json_decode($detail->value):''; @endphp
<div class="row height-section-r {{$s_key !='0'?'d-none':''}}"
id="section_{{isset($value->group)?$value->group:''}}">
<div class="col-md-12 form-group">
<label for=""
class="height-label">Height({{isset($value->group)?$value->group:''}}
)</label>
<input name="step_{{$detail->id}}" class="form-control common_input"
type="text"
placeholder="Enter {{isset($value->group)?$value->group:''}}">
</div>
</div>
@endforeach
<div class="continue-btn-for-choose-prog float-right mb-4 mt-2">
<button type="button" onclick="next()" class="continue-btn">Continue <span class="ml-5"><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</span></button>
</div>
</div>
</div>
</div>
@elseif($step->design=='design_nine')
<div class="tab d-none">
<div class="row">
<div class="col-md-5 mx-auto text-center">
<div class="form-group mb-5">
@if($step->non_sub_title)
<h4 class="text-left">
{{$step->non_sub_title}}
</h4>
@endif
<h1 class="res-title-for-sm">
{{$step->title}}
</h1>
@if($step->sub_title)
<h5 class="">
{{$step->sub_title}}
</h5>
@endif
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-5 mx-auto">
@foreach($step->step_details as $s_key=>$detail)
@php $value=$detail->value?json_decode($detail->value):''; @endphp
<label
class="row align-items-center ml-2 multi-radio-section {{$s_key > 0?'mt-2':''}}"
for="single-design_{{$detail->id}}">
<div class="col-md-12 col-12 text-left">
<input type="checkbox" name="step_{{$step->id}}"
value="{{isset($value->value)?$value->value:''}}"
class="single-radio-input common_input"
id="single-design_{{$detail->id}}">
<h4 class="single-radio-title ml-1">{{isset($value->title)?$value->title:''}} </h4>
</div>
</label>
@endforeach
<div class="continue-btn-for-choose-prog float-right mb-4 mt-2">
<button type="button" onclick="next()" class="continue-btn">
Continue
<span class="ml-5">
<i class="fa fa-long-arrow-right"
aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
</div>
@elseif($step->design=='design_seven')
<div class="tab d-none">
<div class="row">
<div class="col-md-5 mx-auto text-center">
<div class="form-group mb-5">
@if($step->non_sub_title)
<h4 class="text-left">
{{$step->non_sub_title}}
</h4>
@endif
<h1 class="res-title-for-sm">
{{$step->title}}
</h1>
@if($step->sub_title)
<h5 class="">
{{$step->sub_title}}
</h5>
@endif
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-5 mx-auto">
<div class="row">
<div class="col-md-6 text-left">
<h5 class="">Unit</h5>
</div>
@php
$unique_group=[];
@endphp
@foreach($step->step_details as $s_key=>$detail)
@php
$value=$detail->value?json_decode($detail->value):'';
$unique_group[isset($value->group)?$value->group:'']=isset($value->group)?$value->group:'';
@endphp
@endforeach
<div class="col-md-6 text-right">
@foreach($unique_group as $group)
@if(isset($group) && $group=='lb')
<button type="button" class="btn weight-btn"
data-type="{{$group}}">lb
</button>
@else
<button type="button" class="btn weight-btn"
data-type="{{$group}}">kg
</button>
@endif
@endforeach
</div>
</div>
@foreach($step->step_details as $s_key=>$detail)
@php $value=$detail->value?json_decode($detail->value):''; @endphp
<div
class="row weight-section-r {{$s_key > 1?'d-none':''}} weight_{{isset($value->group)?$value->group:''}}">
<div class="col-md-12 form-group">
<label for=""
class="design-seven-label-title">{{isset($value->title)?$value->title:''}}</label>
<input
name="stepweight_{{$detail->id}}[{{isset($value->group)?$value->group:''}}]"
class="form-control common_input" type="text"
placeholder="Enter {{isset($value->group)?$value->group:''}}">
</div>
</div>
@endforeach
<div class="row">
<div class="col-md-12">
<div class="continue-btn-for-choose-prog float-right mb-4 mt-2">
<button type="button" onclick="next()" class="continue-btn">Continue <span class="ml-5"><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
@elseif($step->design=='design_eight')
<div class="tab d-none">
<div class="row">
<div class="col-md-5 mx-auto text-center">
<div class="form-group mb-5">
@if($step->non_sub_title)
<h4 class="text-left">
{{$step->non_sub_title}}
</h4>
@endif
<h1 class="res-title-for-sm">
{{$step->title}}
</h1>
@if($step->sub_title)
<h5 class="">
{{$step->sub_title}}
</h5>
@endif
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 mx-auto">
<div class="row mt-3 align-items-center text-center">
@php $only_slider_array=[]; @endphp
@foreach($step->step_details as $s_key=>$detail)
@php
$value=$detail->value?json_decode($detail->value):'';
$only_slider_array[]=isset($value->value)?$value->value:'';
@endphp
@endforeach
<div class="col-md-12 mx-auto">
<div class="slider-container">
<input name="step_{{$detail->id}}" type="text"
id="slider3"
class="slider common_input"/>
</div>
</div>
@foreach($step->step_details as $s_key=>$detail)
@php
$value=$detail->value?json_decode($detail->value):'';
@endphp
<div
class="col-md-12 text-left {{$s_key=='0'?'':'d-none'}} preview-only-sl slider_preview_desc_{{isset($value->value)?$value->value:''}}">
<h3 class="mb-0 detail-text-title">{{isset($value->t_title)?$value->t_title:''}}</h3>
<h6 class="">{{isset($value->t_description)?$value->t_description:''}}</h6>
</div>
@endforeach
<div class="col-md-12 mt-4">
<div class="continue-btn-for-choose-prog float-right mb-4 mt-2">
<button type="button" onclick="next()" class="continue-btn">Continue <span class="ml-5"><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
@endif
@endforeach
@if(!auth('customer')->user())
<div class="tab d-none">
<div class="row">
<div class="col-md-5 mx-auto">
<h4 class="mb-3 text-center">{{trans('Enter your information')}}</h4>
<div class="form-group">
<label class="user-input-label" for="">{{trans('First Name')}}</label>
<input type="text" class="form-control common_input" name="first_name"
placeholder="Enter First Name">
</div>
<div class="form-group">
<label class="user-input-label" for="">{{trans('Last Name')}}</label>
<input type="text" class="form-control common_input" name="last_name"
placeholder="Enter Last Name">
</div>
<div class="form-group">
<label class="user-input-label" for="">{{trans('Email')}}</label>
<input type="email" class="form-control common_input" name="email"
placeholder="Enter Email">
</div>
<div class="continue-btn-for-choose-prog float-right mb-4 mt-2">
<button type="button" onclick="next()" class="continue-btn">Continue <span class="ml-5"><i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</span></button>
</div>
</div>
</div>
</div>
@endif
<div class="tab d-none text-center">
<div class="row mt-4">
<div class="col-md-8 mx-auto">
<h4 class="">{{trans('CHOOSE THE BEST PLAN FOR YOU')}}</h4>
<div class="mt-5">
<div class="row">
@foreach($plans as $key=>$plan)
<div class="col-md-6 col-6 mt-5">
<div class="card plan-card {{request()->get('plan') && request()->get('plan')==$plan->id?'active':''}}"
id="plan_card_{{$plan->id}}" data-id="{{$plan->id}}">
<div class="card-header">
<h3>
{{$plan->title}}
</h3>
<h4>
Price: {{formatNumberWithCurrSymbol($plan->price)}}
</h4>
<h6>{{strtoupper($plan->recurring_type)}}</h6>
</div>
<div class="card-body">
<ul class="mt-2 ul-none p-0">
@if($plan->meal_plan=='yes')
<li>
Meal Plan
</li>
@endif
@if($plan->meal_plan=='yes')
<li>
Workout Plan
</li>
@endif
@if($plan->live_support=='yes')
<li>
Live Support
</li>
@endif
@if(isset($plan->details) && $plan->details)
@foreach(json_decode($plan->details) as $detail)
@if($detail)
<li>
{{$detail}}
</li>
@endif
@endforeach
@endif
<li>
Cancel Anytime
</li>
</ul>
</div>
<div class="badge">
Selected
</div>
</div>
</div>
@endforeach
</div>
<div class="row">
<div class="col-md-12 mt-3">
<div class="continue-btn-for-choose-prog float-right mb-4 mt-2">
<button type="submit" class="continue-btn">
Submit
<span class="ml-5">
<i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</span>
</button>
</div>
</div>
</div>
</div>
<input type="hidden" class="mr-3 common_input"
value="{{request()->get('plan')?request()->get('plan'):(isset($plans[0])?$plans[0]->id:'')}}"
id="plan_id" name="plan_id">
</div>
</div>
</div>
</div>
<div class="tab d-none text-center">
<div class="row">
<div class="col-md-12">
<div class="loader-section">
<img src="{{asset('front/img/gym_loader.gif')}}" alt="">
</div>
</div>
</div>
</div>
</form>
</div>
</section>
</div>
</div>
@php
$slider_arrays= isset($slider_array)?array_values($slider_array):[0];
if(isset($slider_array) && $slider_array){
$slider_arrays = '"'.implode('","', $slider_array).'"';
}else{
$slider_arrays="0";
}
//Slider 3
$only_slider_array= isset($only_slider_array)?array_values($only_slider_array):[0];
if(isset($only_slider_array) && $only_slider_array){
$only_slider_array = '"'.implode('","', $only_slider_array).'"';
}else{
$only_slider_array="0";
}
@endphp
@endsection
@section('js')
<script>
"use strict";
$(document).on('click', '.plan-card', function (e) {
const id = $(this).attr('data-id');
$('.plan-card').removeClass('active');
$(this).addClass('active');
$('#plan_id').val(id);
});
$(document).ready(function(){
$('.initial-content').remove();
});
</script>
<script>
"use strict";
var current = 0;
var tabs = $(".tab");
var tabs_pill = $(".tab-pills");
loadFormData(current);
function loadFormData(n) {
$(tabs_pill[n]).addClass("active");
$(tabs[n]).removeClass("d-none");
$("#back_button").attr("disabled", n == 0 ? true : false);
n == tabs.length - 1
? $("#next_button").text("Submit").removeAttr("onclick").addClass('submitForm')
: $("#next_button")
.attr("type", "button")
.html(`<i class="fa fa-chevron-right"></i>`)
.attr("onclick", "next()").removeClass('submitForm');
}
let static_step_counter=1;
let static_step_counter_over=0;
function next() {
$(tabs[current]).addClass("d-none");
$(tabs_pill[current]).removeClass("active");
$('.choose-program-back-btn').removeAttr('disabled');
current++;
console.log(current)
loadFormData(current);
const all_step_numbers=$('.all-steps').text();
if(all_step_numbers <= static_step_counter){
static_step_counter_over++;
console.log(static_step_counter_over)
return;
}
static_step_counter++;
$('.step-serial').text(static_step_counter);
let bar_width=0;
bar_width =(static_step_counter * 100) /all_step_numbers;
bar_width=bar_width.toFixed(2);
if(bar_width > 100){
bar_width='100';
}
$('.progress-devider-arrow-line').css('width', bar_width+'%');
}
function back() {
if(static_step_counter == 1 && static_step_counter_over == 0){
return;
}
$(tabs[current]).addClass("d-none");
$(tabs_pill[current]).removeClass("active");
current--;
loadFormData(current);
if(static_step_counter_over <= 0) {
static_step_counter--;
$('.step-serial').text(static_step_counter);
let bar_width = 0;
const all_step_numbers = $('.all-steps').text();
bar_width = (static_step_counter * 100) / all_step_numbers;
bar_width = bar_width.toFixed(2);
if (bar_width > 100) {
bar_width = '100';
}
$('.progress-devider-arrow-line').css('width', bar_width + '%');
}else{
static_step_counter_over--;
}
}
$(document).ready(function(){
let bar_width=0;
const all_step_numbers=$('.all-steps').text();
bar_width =(static_step_counter * 100) /all_step_numbers;
bar_width=bar_width.toFixed(2);
if(bar_width > 100){
bar_width='100';
}
$('.progress-devider-arrow-line').css('width', bar_width+'%');
// $('.progress-devider-arrow-line').css('padding', '10px');
})
$(document).on('click', '.submitForm', function (e) {
$('#programForm').submit();
// $(".common_input").each(function(){
// const array_val=[];
//
// if($(this).is(":checked")){
// const name=$(this).attr('name');
// const val=$(this).val();
// array_val.push({name:name, value:val})
// }
//
// console.log(array_val,$('#programForm').serialize());
// })
})
$(document).on('click', '.trigger_next', function (e) {
const id=$(this).attr('data-id');
$('.single_s_cl_'+id).removeClass('active')
if(!$(this).hasClass()){
$(this).addClass('active')
}else{
$(this).removeClass('active')
}
// e.preventDefault();
// const for_data=$(this).attr('for');
// $('#next_button').trigger('click');
// $('#'+for_data).trigger('change');
});
$(document).on('click', '.trigger_next_f', function (e) {
e.preventDefault();
const id=$(this).attr('data-id');
$('.single_s_clf_'+id).removeClass('active')
if(!$(this).hasClass()){
$(this).addClass('active')
}else{
$(this).removeClass('active')
}
next()
// e.preventDefault();
// const for_data=$(this).attr('for');
// $('#next_button').trigger('click');
// $('#'+for_data).trigger('change');
});
</script>
<script>
"use strict";
$(document).on('click', '.height-btn', function (e) {
const type = $(this).attr('data-type');
$('.height-btn').removeClass('active');
$(this).addClass('active');
$('.height-section-r').addClass('d-none');
$('#section_' + type).removeClass('d-none');
})
$(document).on('click', '.multiple-checked-checkbox', function (e) {
const id = $(this).attr('data-id');
if ($('#ch_multiple_checkbox_'+id).is(':checked')) {
$('.multi-box_'+id).addClass('mckboxActive');
}else{
$('.multi-box_'+id).removeClass('mckboxActive');
}
})
$(document).on('click', '.single-radio-selection', function (e) {
const id = $(this).attr('data-id');
// if ($('.is_active_'+id).hasClass('mckboxActive')) {
// $('.single_radion-sec_'+id).removeClass('mckboxActive');
// }else{
// $('.single_radion-sec_'+id).addClass('mckboxActive');
// }
$('.single-radio-section').removeClass('mckboxActive');
$('.single_radion-sec_'+id).addClass('mckboxActive');
// if ($('#single-design_'+id).is(':checked')) {
// console.log('checked');
// $('.single_radion-sec_'+id).addClass('mckboxActive');
// }else{
// console.log('unchecked radio button');
// $('.single_radion-sec_'+id).removeClass('mckboxActive');
//
//
// }
})
$(document).on('click', '.weight-btn', function (e) {
const type = $(this).attr('data-type');
$('.weight-btn').removeClass('active');
$(this).addClass('active');
$('.weight-section-r').addClass('d-none');
$('.weight_' + type).removeClass('d-none');
})
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<script>
"use strict";
$("#slider2").ionRangeSlider({
grid: true,
from: new Date().getMonth(),
values: [
{!! $slider_arrays !!}
],
onChange: function (data) {
let value = data.from_value;
if(value) {
value = value.replace('-', '_');
}
$('.preview-images-sl').addClass('d-none');
$('.slider_preview_image_' + value).removeClass('d-none');
// window.location.replace("@Url");
},
});
$("#slider3").ionRangeSlider({
grid: true,
from: new Date().getMonth(),
values: [
{!! $only_slider_array !!}
],
onChange: function (data) {
let value = data.from_value;
console.log(value);
$('.preview-only-sl').addClass('d-none');
$('.slider_preview_desc_' + value).removeClass('d-none');
// window.location.replace("@Url");
},
});
</script>
@endsection
|