Viewing file:  create.blade.php (37.6 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('admin.layouts.app')
@section('title')
{{ __('create_plan') }}
@endsection
@section('content')
<div class="container-fluid">
<div class="row">
<div class="col-md-8 mx-auto">
<div class="card">
<div class="card-header">
<h3 class="card-title" style="line-height: 36px;">{{ __('create_plan') }}</h3>
<a href="{{ route('module.plan.index') }}"
class="btn bg-primary float-right d-flex align-items-center justify-content-center">
<i class="fas fa-arrow-left"></i> {{ __('back') }}
</a>
</div>
</div>
<div class="row pb-4">
<div class="col-md-8 pt-3">
<form id="form" class="form-horizontal" action="{{ route('module.plan.store') }}"
method="POST">
@csrf
<!-- Plan Information Box -->
<div id="planInfoBox" class="section card mb-4">
<div class="card-header">
<h5 class="fw-bold">{{ __('plan_information') }}</h5>
</div>
<div class="card-body row">
<!-- Select Plan payment type Here -->
<div class="col-md-12">
<div class="form-group">
<x-forms.label name="plan_payment_type" required="true" />
<div class="d-flex ">
<div class="custom-control custom-radio custom-control-inline">
<input onclick="changePaymentType()" type="radio" id="one_time_plan"
name="plan_payment_type" class="custom-control-input"
value="one_time" @checked(old('plan_payment_type', 'one_time') == 'one_time')>
<label class="custom-control-label" for="one_time_plan">
{{ __('one_time') }}
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input onclick="changePaymentType()" type="radio" id="recurring_plan"
name="plan_payment_type" class="custom-control-input"
value="recurring" @checked(old('plan_payment_type') == 'recurring')>
<label class="custom-control-label" for="recurring_plan">
{{ __('recurring') }}
</label>
</div>
</div>
@error('plan_payment_type')
<span class="invalid-feedback d-block" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<!-- Recurring Pricing Here -->
<div class="col-md-6 recurring_plan">
<div class="form-group">
<x-forms.label name="plan_type" required="true" for="ad_limit"
for="plan_type" />
<select name="interval" class="custom-select mr-sm-2" id="plan_type">
<option {{ old('interval') == 'monthly' ? 'selected' : '' }}
value="monthly">
{{ __('monthly') }}
</option>
<option {{ old('interval') == 'yearly' ? 'selected' : '' }} value="yearly">
{{ __('yearly') }}
</option>
<option {{ old('interval') == 'custom_date' ? 'selected' : '' }}
value="custom_date">
{{ __('plan_duration') }}
</option>
</select>
</div>
</div>
<div class="col-md-6 recurring_plan">
<div class="form-group">
<x-forms.label name="stripe_price_id" required="true" for="stripe_id"
for="plan_type" />
<input type="text" id="stripe_id" name="stripe_id"
value="{{ old('stripe_id') }}"
class="form-control @error('stripe_id') is-invalid @enderror"
placeholder="e.g: price_****">
@error('stripe_id')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<!-- This field is dependent to Recurring option. Whenever you choose "duration" from Plan type, it will be visible -->
<div class="col-md-6 d-none" id="interval_date">
<div class="form-group">
<x-forms.label name="interval_days" required="true"
for="custom_interval_days" />
<input type="number" min="1" id="custom_interval_days"
name="custom_interval_days" value="{{ old('custom_interval_days') }}"
class="form-control @error('custom_interval_days') is-invalid @enderror"
placeholder="e.g: 5">
@error('custom_interval_days')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<!-- Onetime Pricing Here -->
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="plan_name" required="true" for="label" />
<input type="text" id="label" name="label" value="{{ old('label') }}"
class="form-control @error('label') is-invalid @enderror"
placeholder="e.g: {{ __('basic') }} / {{ __('standard') }} / {{ __('premium') }}">
@error('label')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="price" required="true" for="price">
({{ config('templatecookie.currency_symbol') }})
</x-forms.label>
<input type="number" id="price" name="price"
value="{{ old('price') }}"
class="form-control @error('price') is-invalid @enderror"
placeholder="{{ __('price') }}">
@error('price')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<x-forms.label name="set_recommended_package" required="true" />
<div class="d-flex ">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="recommended_plan_yes" name="recommended"
class="custom-control-input" value="1">
<label class="custom-control-label" for="recommended_plan_yes">
{{ __('yes') }}
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="recommended_plan_no" name="recommended"
class="custom-control-input" value="0" checked="">
<label class="custom-control-label" for="recommended_plan_no">
{{ __('no') }}
</label>
</div>
</div>
@error('recommended')
<span class="invalid-feedback d-block"
role="alert">{{ $message }}</span>
@enderror
</div>
</div>
</div>
</div>
<!-- Listing Post Limit Box -->
<div id="listingLimitBox" class="section card mb-4">
<div class="card-header">
<h5 class="fw-bold">{{ __('listing_limit') }}</h5>
</div>
<div class="card-body row">
<div class="col-md-12">
<div class="form-group">
<x-forms.label name="listing_post_limit" required="true" for="ad_limit" />
<input type="number" id="ad_limit" name="ad_limit"
value="{{ old('ad_limit') }}"
class="form-control @error('ad_limit') is-invalid @enderror"
placeholder="e.g: 5">
@error('ad_limit')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
</div>
</div>
<!-- Featured Box -->
<div id="featuredBox" class="section card mb-4">
<div class="card-header">
<h5 class="fw-bold">{{ __('featured_listing') }}</h5>
</div>
<div class="card-body row">
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="featured_listing_limit" required="true"
for="featured_limit" />
<input type="number" id="featured_limit" name="featured_limit"
value="{{ old('featured_limit') }}"
class="form-control @error('featured_limit') is-invalid @enderror"
placeholder="e.g: 5">
@error('featured_limit')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="featured_listing_duration_days" required="true"
for="featured_duration" />
<input type="number" id="featured_duration" name="featured_duration" min="-1"
value="{{ old('featured_duration') }}"
class="form-control @error('featured_duration') is-invalid @enderror"
placeholder="e.g: 2">
@error('featured_duration')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
<p><small class="text-mute">{{ __('featured') }}
{{ __('days_wont_expire_with_a_setting_of_minus_one') }}</small></p>
</div>
</div>
</div>
</div>
<!-- Urgent Box -->
<div id="urgentBox" class="section card mb-4">
<div class="card-header">
<h5 class="fw-bold">{{ __('urgent_listing') }}</h5>
</div>
<div class="card-body row">
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="urgent_listing_limit" required="true"
for="urgent_limit" />
<input type="number" id="urgent_limit" name="urgent_limit"
value="{{ old('urgent_limit') }}"
class="form-control @error('urgent_limit') is-invalid @enderror"
placeholder="e.g: 5">
@error('urgent_limit')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="urgent_listing_duration_days" required="true"
for="urgent_duration" />
<input type="number" id="urgent_duration" name="urgent_duration" min="-1"
value="{{ old('urgent_duration') }}"
class="form-control @error('urgent_duration') is-invalid @enderror"
placeholder="e.g: 2">
@error('urgent_duration')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
<p><small class="text-mute">{{ __('urgent') }}
{{ __('days_wont_expire_with_a_setting_of_minus_one') }}</small></p>
</div>
</div>
</div>
</div>
<!-- Highlight Box -->
<div id="highlightBox" class="section card mb-4">
<div class="card-header">
<h5 class="fw-bold">{{ __('highlight_listing') }}</h5>
</div>
<div class="card-body row">
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="highlight_listing_limit" required="true"
for="highlight_limit" />
<input type="number" id="highlight_limit" name="highlight_limit"
value="{{ old('highlight_limit') }}"
class="form-control @error('highlight_limit') is-invalid @enderror"
placeholder="e.g: 5">
@error('highlight_limit')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="highlight_listing_duration_days" required="true"
for="highlight_duration" />
<input type="number" id="highlight_duration" name="highlight_duration" min="-1"
value="{{ old('highlight_duration') }}"
class="form-control @error('highlight_duration') is-invalid @enderror"
placeholder="e.g: 2">
@error('highlight_duration')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
<p><small class="text-mute">{{ __('highlight') }}
{{ __('days_wont_expire_with_a_setting_of_minus_one') }}</small></p>
</div>
</div>
</div>
</div>
<!-- Top Box -->
<div id="topBox" class="section card mb-4">
<div class="card-header">
<h5 class="fw-bold">{{ __('top_listing') }}</h5>
</div>
<div class="card-body row">
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="top_listing_limit" required="true" for="top_limit" />
<input type="number" id="top_limit" name="top_limit"
value="{{ old('top_limit') }}"
class="form-control @error('top_limit') is-invalid @enderror"
placeholder="e.g: 5">
@error('top_limit')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="top_listing_duration_days" required="true"
for="top_duration" />
<input type="number" id="top_duration" name="top_duration" min="-1"
value="{{ old('top_duration') }}"
class="form-control @error('top_duration') is-invalid @enderror"
placeholder="e.g: 2">
@error('top_duration')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
<p><small class="text-mute">{{ __('top') }}
{{ __('days_wont_expire_with_a_setting_of_minus_one') }}</small></p>
</div>
</div>
</div>
</div>
<!-- Bump up Box -->
<div id="bumpUpBox" class="section card mb-4">
<div class="card-header">
<h5 class="fw-bold">{{ __('bump_up_listing') }}</h5>
</div>
<div class="card-body row">
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="bump_up_listing_limit" required="true"
for="bump_up_limit" />
<input type="number" id="bump_up_limit" name="bump_up_limit"
value="{{ old('bump_up_limit') }}"
class="form-control @error('bump_up_limit') is-invalid @enderror"
placeholder="e.g: 5">
@error('bump_up_limit')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="bump_up_listing_duration_days" required="true"
for="bump_up_duration" />
<input type="number" id="bump_up_duration" name="bump_up_duration" min="-1"
value="{{ old('bump_up_duration') }}"
class="form-control @error('bump_up_duration') is-invalid @enderror"
placeholder="e.g: 2">
@error('bump_up_duration')
<span class="invalid-feedback" role="alert">{{ $message }}</span>
@enderror
<p><small class="text-mute">{{ __('bump_up') }}
{{ __('days_wont_expire_with_a_setting_of_minus_one') }}</small></p>
</div>
</div>
</div>
</div>
<!-- Membership Box -->
<div id="membershipBox" class="section card mb-4">
<div class="card-header">
<h5 class="fw-bold">{{ __('membership') }}</h5>
</div>
<div class="card-body row">
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="membership_badge" for="badge" required="true" />
<div class="d-flex ">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="badge_plan_yes" name="badge"
class="custom-control-input" value="1" checked>
<label class="custom-control-label" for="badge_plan_yes">
{{ __('yes') }}
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="badge_plan_no" name="badge"
class="custom-control-input" value="0">
<label class="custom-control-label" for="badge_plan_no">
{{ __('no') }}
</label>
</div>
</div>
@error('badge')
<span class="invalid-feedback d-block"
role="alert">{{ $message }}</span>
@enderror
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<x-forms.label name="premium_member" for="premium_member" required="true" />
<div class="d-flex">
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="premium_member_yes" name="premium_member"
class="custom-control-input" value="1" checked>
<label class="custom-control-label" for="premium_member_yes">
{{ __('yes') }}
</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="premium_member_no" name="premium_member"
class="custom-control-input" value="0">
<label class="custom-control-label" for="premium_member_no">
{{ __('no') }}
</label>
</div>
</div>
@error('premium_member')
<span class="invalid-feedback d-block"
role="alert">{{ $message }}</span>
@enderror
</div>
</div>
</div>
</div>
<div class="row justify-content-center mt-3">
<button class="btn btn-success" type="submit"><i class="fas fa-plus"></i>
{{ __('create') }}</button>
</div>
</form>
</div>
<div class="col-md-4 pt-3">
<div class="card tc-sticky-sidebar">
<div class="card-body">
<h5 class="mb-4">{{ __('create_plan') }}</h5>
<div class="tc-vertical-step">
<ul class="list-unstyled">
<li>
<a href="#planInfoBox"
class="step-menu active">{{ __('plan_information') }}</a>
</li>
<li>
<a href="#listingLimitBox" class="step-menu">{{ __('listing_limit') }}</a>
</li>
<li>
<a href="#featuredBox" class="step-menu">{{ __('featured_listing') }}</a>
</li>
<li>
<a href="#urgentBox" class="step-menu">{{ __('urgent_listing') }}</a>
</li>
<li>
<a href="#highlightBox" class="step-menu">{{ __('highlight_listing') }}</a>
</li>
<li>
<a href="#topBox" class="step-menu">{{ __('top_listing') }}</a>
</li>
<li>
<a href="#bumpUpBox" class="step-menu">{{ __('bump_up_listing') }}</a>
</li>
<li>
<a href="#membershipBox" class="step-menu">{{ __('membership') }}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('style')
<style>
h5 {
font-weight: bold;
}
/* Sidebar menu CSS Start */
.tc-vertical-step,
.tc-vertical-step-link {
position: relative;
}
.tc-vertical-step ul:before,
.tc-vertical-step-link ul:before {
content: "";
position: absolute;
left: 5px;
top: 10px;
width: 2px;
height: 100%;
background: #dfe3e8;
}
.tc-vertical-step ul li:not(:last-child),
.tc-vertical-step-link ul li:not(:last-child) {
padding-bottom: 1rem;
}
.tc-vertical-step ul li a,
.tc-vertical-step-link ul li a {
position: relative;
display: block;
color: #454f5b;
padding-left: 26px;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
body.dark-mode .tc-vertical-step ul li a,
body.dark-mode .tc-vertical-step-link ul li a {
color: #dfe3e8;
}
.tc-vertical-step ul li a:before,
.tc-vertical-step-link ul li a:before {
content: "";
position: absolute;
left: 1px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 10px;
height: 10px;
background: #dfe3e8;
border-radius: 50%;
z-index: 2;
}
.tc-vertical-step ul li a:after,
.tc-vertical-step-link ul li a:after {
content: "";
position: absolute;
left: -3px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 18px;
height: 18px;
border-radius: 50%;
border: 1px solid var(--main-color);
z-index: 1;
opacity: 0;
}
.step-menu.active:before,
.step-menu.active:before {
background-color: var(--main-color) !important;
}
.step-menu.active:after,
.step-menu.active:after {
opacity: 1;
}
.tc-sticky-sidebar {
position: sticky;
top: 1rem;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 8;
}
/* Sidebar menu CSS End */
</style>
@endsection
@section('script')
<script>
changePaymentType();
if ('{{ old('interval') }}' == 'custom_date') {
$('#interval_date').removeClass('d-none');
}
function changePaymentType() {
if ($('#one_time_plan').is(':checked')) {
$('.recurring_plan').addClass('d-none');
} else {
$('.recurring_plan').removeClass('d-none');
}
}
$('#plan_type').on('change', function() {
if ($(this).val() == 'custom_date') {
$('#interval_date').removeClass('d-none');
} else {
$('#interval_date').addClass('d-none');
}
});
</script>
{{-- Sidebar Menu script start --}}
<script>
const stepMenus = document.querySelectorAll('.step-menu');
const sections = document.querySelectorAll('.section');
function isElementInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
);
}
function updateActiveStepMenuItem() {
let activeSection = null;
for (let i = 0; i < sections.length; i++) {
if (isElementInViewport(sections[i])) {
activeSection = sections[i];
break;
}
}
stepMenus.forEach(menu => menu.classList.remove('active'));
if (activeSection) {
const targetId = activeSection.id;
const activeMenuItem = document.querySelector(`.step-menu[href="#${targetId}"]`);
if (activeMenuItem) {
activeMenuItem.classList.add('active');
}
}
}
function handleStepMenuItemClick(event) {
event.preventDefault();
const targetId = this.getAttribute('href').substring(1);
const targetElement = document.getElementById(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
}
stepMenus.forEach(menuItem => {
menuItem.addEventListener('click', handleStepMenuItemClick);
});
window.addEventListener('scroll', updateActiveStepMenuItem);
updateActiveStepMenuItem();
</script>
{{-- Sidebar Menu script end --}}
@endsection
|