Files
numstation-web/resources/views/themes/tailwind/cms/subscriptions/management/form.blade.php

270 lines
16 KiB
PHP
Raw Normal View History

2023-12-22 12:35:55 +08:00
@csrf
<div class="flex">
<div class="label-field"><label>
<span>{{ __("Status") }}</span>
<select name="status" required>
<option value="active" {{ isset($subscription) && $subscription && $subscription->status == 'active' ? 'selected' : '' }}>{{ __("Active") }}</option>
<option value="inactive" {{ isset($subscription) && $subscription && $subscription->status == 'inactive' ? 'selected' : '' }}>{{ __("Inactive") }}</option>
</select>
</label></div>
</div>
<div class="flex">
<div class="label-field"><label>
<span>{{ __("Name(English)") }}</span>
<input type="text" placeholder="" value="{{ isset($subscription) && $subscription ? $subscription->name_english : '' }}" name="name_english" required>
</label></div>
<div class="label-field"><label>
<span>{{ __("Name(Chinese)") }}</span>
<input type="text" placeholder="" value="{{ isset($subscription) && $subscription ? $subscription->name_chinese : '' }}" name="name_chinese" required>
</label></div>
</div>
<div class="flex">
<div class="label-field"><label>
<span>{{ __("Period(English)") }}</span>
<select name="period_english" required>
<option value="annually" {{ isset($subscription) && $subscription && $subscription->period_english == 'annually' ? 'selected' : '' }}>Annually</option>
<option value="monthly" {{ isset($subscription) && $subscription && $subscription->period_english == 'monthly' ? 'selected' : '' }}>Monthly</option>
<option value="daily" {{ isset($subscription) && $subscription && $subscription->period_english == 'daily' ? 'selected' : '' }}>Daily</option>
</select>
</label></div>
<div class="label-field"><label>
<span>{{ __("Period(Chinese)") }}</span>
<select name="period_chinese" required>
<option value="每年" {{ isset($subscription) && $subscription && $subscription->period_chinese == '每年' ? 'selected' : '' }}>每年</option>
<option value="每月" {{ isset($subscription) && $subscription && $subscription->period_chinese == '每月' ? 'selected' : '' }}>每月</option>
<option value="每日" {{ isset($subscription) && $subscription && $subscription->period_chinese == '每日' ? 'selected' : '' }}>每日</option>
</select>
</label></div>
</div>
<div class="flex">
<div class="label-field"><label>
<span>{{ __("Name description(English)") }}</span>
<input type="text" placeholder="" name="description_english" value="{{ isset($subscription) && $subscription ? $subscription->description_english : '' }}" required>
</label></div>
</div>
<div class="flex">
<div class="label-field"><label>
<span>{{ __("Name description(Chinese)") }}</span>
<input type="text" placeholder="" name="description_chinese" value="{{ isset($subscription) && $subscription ? $subscription->description_chinese : '' }}" required>
</label></div>
</div>
<div class="flex">
<div class="label-field"><label>
<span>{{ __("Price") }}($)</span>
<input type="text" class="number-only" placeholder="" name="price" value="{{ isset($subscription) && $subscription ? $subscription->price : '' }}" required>
</label></div>
</div>
<div class="legend-form form-tabs basic-services-wrapper">
<h3 class="nomarg">Basic services</h3>
@php
$basicServices = isset($subscription) && $subscription ? $subscription->basicServices : [[]];
@endphp
@foreach ($basicServices as $basicService)
<div class="form-tabs basic-services-item">
<div class="flex align-center">
<div class="fit-content">
Service <span class="basic-services-count">{{ $loop->iteration }}</span> title
</div>
<div class="label-field"><label>
<span>(English)</span>
<input type="text" placeholder="" value="{{ isset($basicService->title_english) ? $basicService->title_english : '' }}" name="basic_service_title_english[{{ $loop->index }}]" required>
</label></div>
<div class="label-field"><label>
<span>(Chinese)</span>
<input type="text" placeholder="" value="{{ isset($basicService->title_chinese) ? $basicService->title_chinese : '' }}" name="basic_service_title_chinese[{{ $loop->index }}]" required>
</label></div>
</div>
<div class="form-tabs basic-services-item-list-wrapper">
@php
$lists = isset($basicService->lists) ? $basicService->lists : [[]];
@endphp
@foreach ($lists as $list)
<div class="flex align-center basic-services-item-list-item">
<div class="fit-content list-title">
{{ __("Service") }} <span class="basic-services-count">{{ $loop->iteration }}</span> {{ __("list") }}
</div>
<div class="label-field">
<label>
<span>({{ __("English") }})</span>
<input type="text" placeholder="" value="{{ isset($list->title_english) ? $list->title_english : '' }}" class="basic_service_list_title_english" name="basic_service_list_title_english[{{ $loop->parent->index }}][{{ $loop->index }}]" required>
</label>
</div>
<div class="label-field">
<label>
<span>({{ __("Chinese") }})</span>
<input type="text" placeholder="" value="{{ isset($list->title_chinese) ? $list->title_chinese : '' }}" class="basic_service_list_title_chinese" name="basic_service_list_title_chinese[{{ $loop->parent->index }}][{{ $loop->index }}]" required>
</label>
</div>
<div class="list-buttons-wrapper">
<button type="button" class="list-buttons" data-action="remove">-</button>
<button type="button" class="list-buttons" data-action="add">+</button>
</div>
</div>
@endforeach
</div>
<div class="flex">
<button type="button" class="btn btn-error basic-services-buttons btn-normal" data-action="remove">{{ __("Remove service") }}</button>
</div>
</div>
@endforeach
<div class="flex">
<button type="button" class="btn primary-button btn-normal basic-services-buttons" data-action="add">{{ __("Add new service") }}</button>
</div>
</div>
<div class="legend-form form-tabs optional-services-wrapper">
<h3 class="nomarg">Optional services</h3>
@php
$optionalServices = isset($subscription) && $subscription ? $subscription->optionalServices : [[]];
@endphp
@foreach ($optionalServices as $optionalService)
<div class="form-tabs optional-services-item">
<div class="flex align-center optional-services-item-list-item">
<div class="fit-content list-title">
{{ __("Service") }} <span class="optional-services-count">{{ $loop->iteration }}</span> {{ __("list") }}
</div>
<div class="label-field">
<label>
<span>({{ __("English") }})</span>
<input type="text" placeholder="" value="{{ isset($optionalService->title_english) ? $optionalService->title_english : '' }}" name="optional_service_title_english[{{ $loop->index }}]" required>
</label>
</div>
<div class="label-field">
<label>
<span>({{ __("Chinese") }})</span>
<input type="text" placeholder="" value="{{ isset($optionalService->title_chinese) ? $optionalService->title_chinese : '' }}" name="optional_service_title_chinese[{{ $loop->index }}]" required>
</label>
</div>
</div>
<div class="flex align-center price-fields">
<div class="fit-content">
{{ __("Service") }} <span class="optional-services-count">{{ $loop->iteration }}</span> {{ strtolower(__("Price")) }}
</div>
<div class="label-field">
<label>
<input type="radio" class="optional_service_is_custom" name="optional_service_is_custom[{{ $loop->index }}]" value="no" {{ isset($optionalService->is_custom) && !$optionalService->is_custom ? 'checked' : '' }} required>
<span>$</span>
<input type="text" class="number-only" name="optional_service_price[{{ $loop->index }}]" value="{{ isset($optionalService->is_custom) && !$optionalService->is_custom && isset($optionalService->price) ? $optionalService->price : '' }}">
</label>
<label>
<span>{{ __("Period") }}</span>
<select name="optional_service_period[{{ $loop->index }}]">
<option value="year" {{ isset($optionalService->is_custom) && !$optionalService->is_custom && isset($optionalService->period) && $optionalService->period == 'year' ? 'selected' : '' }}>{{ __("Year") }}</option>
<option value="month" {{ isset($optionalService->is_custom) && !$optionalService->is_custom && isset($optionalService->period) && $optionalService->period == 'month' ? 'selected' : '' }}>{{ __("Month") }}</option>
<option value="day" {{ isset($optionalService->is_custom) && !$optionalService->is_custom && isset($optionalService->period) && $optionalService->period == 'day' ? 'selected' : '' }}>{{ __("Day") }}</option>
</select>
</label>
</div>
<div class="label-field">
<label>
<input type="radio" class="optional_service_is_custom" name="optional_service_is_custom[{{ $loop->index }}]" value="yes" {{ isset($optionalService->is_custom) && $optionalService->is_custom ? 'checked' : '' }} required>
<span>{{ __("Custom") }}:</span>
<input type="text" name="optional_service_custom_description[]" value="{{ isset($optionalService->is_custom) && $optionalService->is_custom && isset($optionalService->custom_description) ? $optionalService->custom_description : '' }}">
</label>
</div>
</div>
<div class="flex">
<button type="button" class="btn btn-error optional-services-buttons btn-normal" data-action="remove">{{ __("Remove service") }}</button>
</div>
</div>
@endforeach
<div class="flex">
<button type="button" class="btn primary-button btn-normal optional-services-buttons" data-action="add">{{ __("Add new service") }}</button>
</div>
</div>
<div class="d-flex align-items-center justify-content-center">
<button type="submit" class="btn green-btn mx-3">{{ __("Save") }}</button>
<a href="{{ route('cms.subscriptions.management') }}" class="btn red-btn mx-3">{{ __("Back") }}</a>
</div>
<script>
$(document).ready( function () {
$(document).on('click', '.basic-services-item-list-wrapper .basic-services-item-list-item .list-buttons', function(e) {
var action = $(this).attr('data-action');
var parentWrapper = $(this).parents('.basic-services-item-list-wrapper').first();
if (action == 'add') {
var cloneWrapper = parentWrapper.find('.basic-services-item-list-item').first().clone();
cloneWrapper.find('input[type="text"]').val('');
parentWrapper.append(cloneWrapper);
}
else if (action == 'remove') {
if (parentWrapper.find('.basic-services-item-list-item').length > 1) {
$(this).parents('.basic-services-item-list-item').first().remove();
}
}
});
$(document).on('click', '.basic-services-wrapper .basic-services-buttons', function(e) {
var action = $(this).attr('data-action');
var parentWrapper = $(this).parents('.basic-services-wrapper').first();
if (action == 'add') {
var cloneWrapper = parentWrapper.find('.basic-services-item').first().clone();
cloneWrapper.find('.basic-services-count').text(parentWrapper.find('.basic-services-item').length + 1);
cloneWrapper.find('input[type="text"]').val('');
cloneWrapper.find('.basic-services-item-list-wrapper .basic-services-item-list-item:not(:first-child)').remove();
cloneWrapper.find('.basic-services-item-list-wrapper .basic-services-item-list-item .basic_service_list_title_english').attr('name', 'basic_service_list_title_english[' + parentWrapper.find('.basic-services-item').length + '][]');
cloneWrapper.find('.basic-services-item-list-wrapper .basic-services-item-list-item .basic_service_list_title_chinese').attr('name', 'basic_service_list_title_chinese[' + parentWrapper.find('.basic-services-item').length + '][]');
parentWrapper.find('.basic-services-item:last').after(cloneWrapper);
}
else if (action == 'remove') {
if (parentWrapper.find('.basic-services-item').length > 1) {
$(this).parents('.basic-services-item').first().remove();
var count = 1;
parentWrapper.find('.basic-services-item').each(function( index ) {
$(this).find('.basic-services-count').text(count);
$(this).find('.basic-services-item-list-wrapper .basic-services-item-list-item .basic_service_list_title_english').attr('name', 'basic_service_list_title_english[' + (count - 1) + '][]');
$(this).find('.basic-services-item-list-wrapper .basic-services-item-list-item .basic_service_list_title_chinese').attr('name', 'basic_service_list_title_chinese[' + (count - 1) + '][]');
count++;
});
}
}
});
$(document).on('click', '.optional-services-wrapper .optional-services-buttons', function(e) {
var action = $(this).attr('data-action');
var parentWrapper = $(this).parents('.optional-services-wrapper').first();
if (action == 'add') {
var cloneWrapper = parentWrapper.find('.optional-services-item').first().clone();
cloneWrapper.find('.optional-services-count').text(parentWrapper.find('.optional-services-item').length + 1);
cloneWrapper.find('input[type="radio"]').prop('checked', false);
cloneWrapper.find('.optional_service_is_custom').attr('name', 'optional_service_is_custom[' + parentWrapper.find('.optional-services-item').length + ']');
cloneWrapper.find('.price-fields').find('select').removeAttr('required');
cloneWrapper.find('.price-fields').first().find('input[type="text"]').removeAttr('required');
parentWrapper.find('.optional-services-item:last').after(cloneWrapper);
}
else if (action == 'remove') {
if (parentWrapper.find('.optional-services-item').length > 1) {
$(this).parents('.optional-services-item').first().remove();
var count = 1;
parentWrapper.find('.optional-services-item').each(function( index ) {
$(this).find('.optional-services-count').text(count);
$(this).find('.optional_service_is_custom').attr('name', 'optional_service_is_custom[' + (count - 1) + ']');
count++;
});
}
}
});
$(document).on('change', '.optional_service_is_custom', function(e) {
$(this).parents('.price-fields').first().find('select').removeAttr('required');
$(this).parents('.price-fields').first().find('input[type="text"]').removeAttr('required');
$(this).parents('.label-field').first().find('select').attr('required', 'required');
$(this).parents('.label-field').first().find('input[type="text"]').attr('required', 'required');
});
});
</script>