File: /var/www/javago-portal-updates/resources/views/cafe/cafe-menu/items/items.blade.php
<x-app-layout>
<x-slot name="css">
<link rel="stylesheet" href="{{ asset('plugins/select2/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bootstrap-select/bootstrap-select.min.css') }}">
<style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
.form-group label,
label {
text-transform: capitalize;
}
.buttons {
margin-top: calc(100vh - 70vh) !important;
}
</style>
</x-slot>
<x-app-breadcrumb>
<li class="breadcrumb-item">
<a href="{{ $cancelUrl }}" class="breadcrumb_home">
{{ __('common.CafeMenu') }}
</a>
</li>
<li class="breadcrumb-item active" aria-current="page">{{ $title }}</li>
</x-app-breadcrumb>
<div class="page-header row">
<div class="page-title col-12 d-flex pr-4">
<h3 class="my-auto">{{ $title }}
</h3>
</div>
</div>
<div class="row layout-top-spacing">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 layout-spacing">
{{-- <x-flash-message></x-flash-message> --}}
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<form class="mt-4" method="POST" id="cafe_menu_form" action="{{ $url }}">
@csrf
@if (!$addPage)
@method('PUT')
@endif
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 row">
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label for="item_image_id" class="form-label">{{ __('common.itemIcon') }}*</label>
<select id="item_image_id" name="item_image_id"
class="form-control @error('item_image_id') is-invalid @enderror">
<option value="">{{ __('common.selectItemIcon') }}
</option>
@foreach ($preDefinedItem as $index => $item)
<option value="{{ $item->id }}"
data-src="{{ Aws::presignedUri($item->item_image) }}"
{{ isset($item_image_id) && $item_image_id == $item->id ? 'selected' : '' }}>
{{ $item->item_name }}
</option>
@endforeach
</select>
@error('stamp_color')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label for="item_name" class="form-label">{{ __('common.itemName') }}*</label>
<input type="text" name="item_name" id="item_name"
class="form-control text-wrap @error('item_name') is-invalid @enderror"
value="{{ isset($item_name) && $item_name != null ? $item_name : '' }}"
placeholder="{{ __('common.EnterItemName') }}">
@error('item_name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label for="item_category_id"
class="form-label">{{ __('common.category') }}*</label>
<select id="item_category_id" name="item_category_id"
class="form-control @error('item_category_id') is-invalid @enderror">
<option value="">
{{ __('common.selectItemCategory') }}
</option>
@foreach ($itemCategory as $index => $category)
<option value="{{ $index }}"
{{ isset($item_category) && $item_category == $index ? 'selected' : '' }}>
{{ $category }}
</option>
@endforeach
</select>
@error('item_category_id')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label for="item_type_id" class="form-label">{{ __('common.type') }}*</label>
<select id="item_type_id" name="item_type_id"
class="form-control @error('item_type_id') is-invalid @enderror">
<option value="">
{{ __('common.selectItemType') }}
</option>
@foreach ($itemType as $index => $type)
<option value="{{ $index }}"
{{ isset($item_type) && $item_type == $index ? 'selected' : '' }}>
{{ $type }}
</option>
@endforeach
</select>
@error('item_type_id')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label for="item_description"
class="form-label">{{ __('common.item_description') }}*</label>
<textarea name="item_description" id="item_description"
class="form-control @error('item_description') is-invalid @enderror" cols="30" rows="10"
placeholder="{{ __('common.EnterItemDescription') }}">{{ isset($item_description) && $item_description != '' ? $item_description : '' }}</textarea>
@error('item_description')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
{{-- item size price container --}}
<div id="item_size_price_container"
class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12 row mb-4">
{{-- item size price fieldset --}}
<!--label class="col-12 form-label">{{ __('common.ItemSizePrice') }}</label-->
<fieldset class="col-6 row" data-repeater="{{ $maxSizePrice }}">
{!! isset($itemPriceSize) ? $itemPriceSize : '' !!}
</fieldset>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6 form-group add_size_price">
<button type="button" href class="btn success-btn repeat"
onclick="addItemSizeAndPrice()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 5V19" stroke="white" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M5 12H19" stroke="white" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
<!--div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label for="item_option" class="form-label">{{ __('common.item_option') }}</label>
<select id="item_option" name="item_option[]"
class="form-control @error('item_option') is-invalid @enderror" multiple>
<option value="">
{{ __('common.selectItemOption') }}
</option>
@foreach ($options as $index => $option)
<optgroup label="{{ $option }}">
@foreach ($optionSizes as $optionSize)
@if ($optionSize->addon_id == $index)
<option value="{{ $optionSize->id }}"
{{ isset($optionSizeCafeItems) && in_array($optionSize->id, $optionSizeCafeItems) ? 'selected' : '' }}>
{{ $optionSize->addon_size_name }}
</option>
@endif
@endforeach
</optgroup>
@endforeach
</select>
@error('item_type_id')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div-->
@php
$existingOptions = isset($optionSizeCafeItems) ? $optionSizeCafeItems : [];
$existingPrices = isset($existingItemPrices) ? $existingItemPrices : [];
@endphp
{{-- Item Options Create --}}
<div id="item_option_price_container" class="col-xl-9 col-lg-9 col-md-9 col-sm-12 col-12 row mb-4">
<fieldset id="item_price_template" class="col-12 row d-none" style="align-items:end;">
<!--div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label for="option" class="form-label">Option</label>
<input type="text" name="option[]" class="form-control text-wrap" placeholder="Option" value="" disabled>
</div-->
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label class="form-label">{{ __('common.item_option') }}</label>
<select class="form-control item-option-dropdown" name="item_option[]">
<option value="">{{ __('common.selectItemOption') }}</option>
@foreach ($options as $index => $option)
<optgroup label="{{ $option }}" data-index="{{ $index }}">
@foreach ($optionSizes as $optionSize)
@if ($optionSize->addon_id == $index)
<option value="{{ $optionSize->id }}">
{{ $optionSize->addon_size_name }}
</option>
@endif
@endforeach
</optgroup>
@endforeach
</select>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label for="item_price" class="form-label">Additional Cost (£)</label>
<input type="number" name="item_price[]" class="form-control text-wrap"
maxlength="6" placeholder="{{ __('common.enterAdditionalCost') }}">
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4 text-right">
<button type="button" class="btn btn-danger" onclick="removeItem(this)" style="padding-top: 14px;"> - </button>
</div>
</fieldset>
@foreach($existingOptions as $option)
<fieldset class="col-12 row" style="align-items:end;">
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label class="form-label">{{ __('common.item_option') }}</label>
<select class="form-control item-option-dropdown" name="item_option[]">
<option value="">{{ __('common.selectItemOption') }}</option>
@foreach ($options as $optIndex => $optionName)
<optgroup label="{{ $optionName }}" data-index="{{ $optIndex }}">
@foreach ($optionSizes as $optionSize)
@if ($optionSize->addon_id == $optIndex)
<option value="{{ $optionSize->id }}" {{ $optionSize->id == $option['addon_size_id'] ? 'selected' : '' }}>
{{ $optionSize->addon_size_name }}
</option>
@endif
@endforeach
</optgroup>
@endforeach
</select>
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4">
<label for="item_price" class="form-label">Additional Cost (�)</label>
<input type="number" name="item_price[]" class="form-control text-wrap"
maxlength="6" placeholder="{{ __('common.enterAdditionalCost') }}" value="{{ $option['addon_size_price'] }}">
</div>
<div class="col-xl-3 col-lg-3 col-md-3 col-sm-12 col-12 form-group mb-4 text-right">
<button type="button" class="btn btn-danger" onclick="removeItem(this)" style="padding-top: 14px;"> - </button>
</div>
</fieldset>
@endforeach
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6 col-6 form-group add_option_price">
<button type="button" class="btn success-btn repeat" onclick="addpriceANDoption()">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 5V19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M5 12H19" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg> Add Options
</button>
</div>
</div>
</div>
</div>
{{-- <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 form-group mb-4">
<div class="custom-control custom-checkbox">
<input type="checkbox" name="is_multi_size" class="custom-control-input"
id="is_multi_size" value="1">
<label class="custom-control-label text-capitalize"
for="is_multi_size">{{ __('common.is_multi_size') }}</label>
</div>
<div id="multi_size" class="mt-4" style="display: none;">
@foreach ($itemSize as $index => $size)
<div class="row mt-4">
<div class="col-xl-1 col-lg-1 col-md-1 col-sm-12 col-12 form-group">
<label for="{{ 'size_' . $index }}"
class="form-label">{{ __('common.size') }}*</label>
<p><b>{{ $size }}</b></p>
<input type="hidden" id="{{ 'item[' . $index . '][item_size_id]' }}"
name="{{ 'item[' . $index . '][item_size_id]' }}"
value="{{ $index }}" hidden>
</div>
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-12 form-group">
<label for="{{ 'item[' . $index . '][item_price]' }}"
class="form-label">{{ __('common.price') }}*</label>
<input type="number"
class="form-control @error('{{ "item[" . $index . "][item_price]" }}') is-invalid @enderror"
id="{{ 'item[' . $index . '][item_price]' }}"
name="{{ 'item[' . $index . '][item_price]' }}" maxlength="6"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
placeholder="{!! __('common.EnterItemPrice') !!}"
value="{{ isset($item_price) && $item_price != null ? $item_price : '' }}">
@error("{{ 'item[' . $index . '][item_price]' }}")
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="col-xl-2 col-lg-2 col-md-2 col-sm-12 col-12 form-group">
<div class="custom-control custom-radio">
<input type="radio" id="{{ 'item[' . $index . '][defaultPrice]' }}"
name="defaultPrice" class="custom-control-input default-price" value="{{ $index }}">
<label class="custom-control-label"
for="{{ 'item[' . $index . '][defaultPrice]' }}">{{ __('common.DefaultPrice') }}</label>
</div>
</div>
</div>
@endforeach
</div>
</div> --}}
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mt-3 py-4 bg-coffee-light">
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 form-group mb-3">
<label for=""
class="form-label">{{ __('common.addonsItemName') }}</label>
</div>
@for ($i = 0; $i < 3; $i++)
@php
$selected = 0;
@endphp
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12 form-group">
<select id="addon_item[{{ $i }}][addon_item_id]"
name="addon_item[{{ $i }}][addon_item_id]"
data-addon="{{ $i }}"
class="addon_item form-control custom-select @error('addon_item{{ $i }}') is-invalid @enderror">
<option value="">
{{ __('common.selectAddonItemName') }}
</option>
@foreach ($items as $index => $item)
<option value="{{ $index }}"
@if (isset($addon_items) && sizeOf($addon_items) >= $i) @if (isset($addon_items[$i]) && $index == $addon_items[$i] && $selected == 0)
$selected = 1;
unset($i);
{{ 'selected' }} @endif
@endif
>
{{ $item }}
</option>
@endforeach
</select>
@error('addon_item[{{ $i }}][addon_item_id]')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
<h6 for="" class="form-label mt-4">{!! __('common.size&Price') !!}
</h6>
<div class="details">
</div>
</div>
@endfor
</div>
</div>
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 mx-0 px-0 mt-4">
<a href="{{ $cancelUrl }}"
class="btn btn-coffee-dark mt-4 py-2 px-4">{{ __('common.Cancel') }}</a>
<button type="submit"
class="btn btn-coffee-light mt-4 mx-3 py-2 px-4">{{ $addPage ? __('common.Save') : __('common.Update') }}</button>
</div>
</form>
</div>
</div>
</div>
</div>
{!! $addonItemsTemplate !!}
<x-slot name="script">
<script src="{{ asset('assets/js/libs/jquery.validate.min.js') }}"></script>
<script src="{{ asset('assets/js/libs/additional-methods.min.js') }}"></script>
<script src="{{ asset('plugins/select2/select2.min.js') }}"></script>
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
}
});
const validation = {};
validation.item_image_id_required = "{{ __('validation.validation.item_image_id.required') }}";
validation.item_name_required = "{{ __('validation.validation.item_name.required') }}";
validation.item_name_minlength = "{{ __('validation.validation.item_name.minlength') }}";
validation.item_name_maxlength = "{{ __('validation.validation.item_name.maxlength') }}";
validation.item_category_id_required = "{{ __('validation.validation.item_category_id.required') }}";
validation.item_type_id_required = "{{ __('validation.validation.item_type_id.required') }}";
validation.item_description_required = "{{ __('validation.validation.item_description.required') }}";
validation.item_description_minlength = "{{ __('validation.validation.item_description.minlength') }}";
validation.item_description_maxlength = "{{ __('validation.validation.item_description.maxlength') }}";
validation.item_option_required = "{{ __('validation.validation.item_option.required') }}";
validation.item_size_id_required = "{{ __('validation.validation.item_size_id.required') }}";
validation.item_price_required = "{{ __('validation.validation.item_price.required') }}";
validation.item_price_maxlength = "{{ __('validation.validation.item_price.maxlength') }}";
const sizeNA = Number('{{-- $sizeNA->id --}}');
const getAddonItems = '{{ $getAddonUrl }}';
const addPage = '{{ $addPage }}';
const selectItemOption = "{{ __('common.selectItemOption') }}";
const fromElement = '#cafe_menu_form';
$('#cafe_menu_form .btn-coffee-light').on('click', function(event) {
// Select the first input and first select within the container
var firstInput = document.querySelector('#item_size_price_container input');
var firstSelect = document.querySelector('#item_size_price_container select');
var isValid = true;
// Clear previous error states
[firstInput, firstSelect].forEach(function(element) {
if (element) {
element.style.border = '';
var errorMessage = element.nextElementSibling; // Assumes error message is a sibling
if (errorMessage && errorMessage.classList.contains('error-message')) {
errorMessage.remove();
}
}
});
// Validate first input (if exists)
if (firstInput && firstInput.value.trim() === '') {
firstInput.style.border = '1px solid red';
isValid = false;
// Create and append error message
var errorMessage = document.createElement('span');
errorMessage.className = 'error-message';
errorMessage.style.color = 'red';
errorMessage.textContent = 'This field is required.';
firstInput.parentNode.insertBefore(errorMessage, firstInput.nextSibling);
firstInput.focus();
}
// Validate first select (if exists)
if (firstSelect && firstSelect.value === '') {
firstSelect.style.border = '1px solid red';
isValid = false;
// Create and append error message
var errorMessage = document.createElement('span');
errorMessage.className = 'error-message';
errorMessage.style.color = 'red';
errorMessage.textContent = 'This field is required.';
firstSelect.parentNode.insertBefore(errorMessage, firstSelect.nextSibling);
firstSelect.focus();
}
// Prevent form submission if not valid
if (!isValid) {
event.preventDefault();
}
});
//Options and Prices js
let selectedOptions = [];
// let optionCount = 0;
// Initialize dropdowns
function initializeDropdowns() {
document.querySelectorAll('.item-option-dropdown').forEach(dropdown => {
dropdown.addEventListener('change', function() {
updateOptions();
});
});
}
// Add new fieldset with dropdowns
function addpriceANDoption() {
const container = document.getElementById('item_option_price_container');
const template = document.getElementById('item_price_template');
// Clone the template
const newItem = template.cloneNode(true);
newItem.classList.remove('d-none');
newItem.removeAttribute('id');
// optionCount++;
// const optionInput = newItem.querySelector('input[name="option[]"]');
// optionInput.value = `Option ${optionCount}`;
// Add dropdown event listener
const newDropdown = newItem.querySelector('.item-option-dropdown');
newDropdown.addEventListener('change', function() {
updateOptions();
});
// Append the new item to the container
container.appendChild(newItem);
initializeDropdowns(); // Reinitialize dropdowns to attach event listeners
}
// Remove fieldset
function removeItem(button) {
const fieldset = button.closest('fieldset');
const dropdown = fieldset.querySelector('.item-option-dropdown');
// Remove selected option from selectedOptions array
const selectedValue = dropdown.value;
selectedOptions = selectedOptions.filter(value => value !== selectedValue);
fieldset.remove();
updateOptions();
}
// Update dropdown options based on selections
function updateOptions() {
const dropdowns = document.querySelectorAll('.item-option-dropdown');
// Clear all dropdown options
dropdowns.forEach(dropdown => {
const selectedValue = dropdown.value;
// Reset all options to visible
dropdown.querySelectorAll('option').forEach(option => {
option.style.display = 'block';
});
// Filter out options that are already selected in other dropdowns
selectedOptions.forEach(value => {
dropdown.querySelectorAll(`option[value="${value}"]`).forEach(option => {
option.style.display = 'none';
});
});
// Add the current dropdown's selected value back
if (selectedValue) {
dropdown.querySelectorAll(`option[value="${selectedValue}"]`).forEach(option => {
option.style.display = 'block';
});
}
});
// Update selectedOptions array
selectedOptions = Array.from(dropdowns).map(dropdown => dropdown.value).filter(value => value);
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
initializeDropdowns();
updateOptions();
// Initialize selectedOptions with existing selections
selectedOptions = Array.from(document.querySelectorAll('.item-option-dropdown')).map(dropdown => dropdown.value).filter(value => value);
});
</script>
<script src="{{ asset('plugins/bootstrap-select/bootstrap-select.min.js') }}"></script>
<script src="{{ asset('assets/js/cafe/repeaterPriceSize.js') }}"></script>
<script src="{{ asset('assets/js/cafe/addEditItem.js') }}"></script>
<script src="{{ asset('assets/js/common-custom.js') }}"></script>
<script>
disableSubmitAfterValidate(fromElement);
if(sessionStorage.getItem('menu_display') == 'no'){
$('.header').addClass('d-none');
}
</script>
</x-slot>
</x-app-layout>