forked from eatvio/eatvio-infra
373 lines
24 KiB
PHP
373 lines
24 KiB
PHP
<section class="py-5 diet" id="main">
|
||
<div class="diet__container">
|
||
<div class="diet__header">
|
||
<a href="{{ route('recipe.index') }}" class="diet__back icon-arrow-short-left">
|
||
<span>Мой блог</span>
|
||
</a>
|
||
<h1 class="diet__title">{{ __('recipe.editing') }}</h1>
|
||
</div>
|
||
<div class="diet__form">
|
||
<div class="diet__form-row">
|
||
<label class="label">{{ __('recipe.title') }}</label>
|
||
<input wire:model="title" type="text" class="input" placeholder="Заголовок" />
|
||
</div>
|
||
<div class="diet__form-row">
|
||
<label class="label">{{ __('recipe.type') }}</label>
|
||
<select wire:model="type" class="input">
|
||
<option value="first_meals" @selected($type == 'first_meals')>{{ __('recipe.first_meals') }}</option>
|
||
<option value="second_meals" @selected($type == 'second_meals')>{{ __('recipe.second_meals') }}</option>
|
||
<option value="salads" @selected($type == 'salads')>{{ __('recipe.salads') }}</option>
|
||
<option value="snacks" @selected($type == 'snacks')>{{ __('recipe.snacks') }}</option>
|
||
<option value="sweets" @selected($type == 'sweets')>{{ __('recipe.sweets') }}</option>
|
||
<option value="drinks" @selected($type == 'drinks')>{{ __('recipe.drinks') }}</option>
|
||
<option value="other" @selected($type == 'other')>{{ __('recipe.other') }}</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="diet__form-row">
|
||
<div class="diet__form-columns lg-columns">
|
||
<div class="diet__form-column">
|
||
<div class="label">{{ __('recipe.picture') }}</div>
|
||
<label class="file">
|
||
<input type="file" wire:model="image" name="file" class="file__input hidden"
|
||
hidden="">
|
||
<span class="file__content">
|
||
<span class="file__formats">
|
||
@if (is_null($image))
|
||
<img src="/img/formats-2.svg" alt="formats">
|
||
@else
|
||
<img
|
||
src="{{ is_string($image) ? Storage::url($image) : $image->temporaryUrl() }}" />
|
||
@endif
|
||
</span>
|
||
<span class="file__title">
|
||
@if (is_null($image))
|
||
Нажмите для выбора или перетащите изображание
|
||
@endif
|
||
</span>
|
||
</span>
|
||
</label>
|
||
@error('image')
|
||
<span class="error">{{ $message }}</span>
|
||
@enderror
|
||
</div>
|
||
<div class="diet__form-column diet__form-column-lg">
|
||
<div class="diet__form-row">
|
||
<div class="label">
|
||
Тип записи
|
||
</div>
|
||
|
||
<div class="diary__stats-tablist" role="tablist" aria-labelledby="label">
|
||
<button class="btn" role="tab" type="button" id="tab-1"
|
||
wire:click="toggleStateRow('ingredient')"
|
||
aria-selected="{{ $state_row['ingredient'] }}"
|
||
aria-controls="tabpanel-1">Рецепт</button>
|
||
<button class="btn" role="tab" type="button" id="tab-2"
|
||
wire:click="toggleStateRow('article')" aria-selected="{{ $state_row['article'] }}"
|
||
aria-controls="tabpanel-2" tabindex="-1">Cтатья</button>
|
||
</div>
|
||
|
||
{{-- <div class="diary__stats-tablist" role="tablist" aria-labelledby="label"> --}}
|
||
{{-- <button class="btn" role="tab" type="button" id="tab-1" aria-selected="true" aria-controls="tabpanel-1">{{ __('recipe.self') }}</button> --}}
|
||
{{-- <button class="btn" role="tab" type="button" id="tab-2" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">{{ __('recipe.blog_post') }}</button> --}}
|
||
{{-- </div> --}}
|
||
|
||
</div>
|
||
</div>
|
||
<div @class([
|
||
'tabpanel',
|
||
'tabpanel--hidden' => $state_row['ingredient'] !== 'true',
|
||
]) role="tabpanel" id="tabpanel-1" tabindex="0"
|
||
aria-labelledby="tab-1">
|
||
<div class="diet__form-column">
|
||
<div class="diet__form-row">
|
||
<div class="label">{{ __('recipe.cooking_time') }}</div>
|
||
<div class="dropdown" x-data="{ open: false }">
|
||
<button type="button"
|
||
:class="open ? 'dropdown__button active' : 'dropdown__button'"
|
||
x-on:click="open = ! open">
|
||
{{ __('recipe.t' . $cooking_time . 'm') }}
|
||
</button>
|
||
<ul :class="open ? 'dropdown__list visible' : 'dropdown__list'">
|
||
<li wire:click="$set('cooking_time','10')" @click="open = !open"
|
||
:class="$wire.cooking_time == '10' ? 'dropdown__list-item active' :
|
||
'dropdown__list-item'">
|
||
{{ __('recipe.t10m') }}</li>
|
||
<li wire:click="$set('cooking_time','20')" @click="open = !open"
|
||
:class="$wire.cooking_time == '20' ? 'dropdown__list-item active' :
|
||
'dropdown__list-item'">
|
||
{{ __('recipe.t20m') }}</li>
|
||
<li wire:click="$set('cooking_time','30')" @click="open = !open"
|
||
:class="$wire.cooking_time == '30' ? 'dropdown__list-item active' :
|
||
'dropdown__list-item'">
|
||
{{ __('recipe.t30m') }}</li>
|
||
<li wire:click="$set('cooking_time','60')" @click="open = !open"
|
||
:class="$wire.cooking_time == '60' ? 'dropdown__list-item active' :
|
||
'dropdown__list-item'">
|
||
{{ __('recipe.t60m') }}</li>
|
||
<li wire:click="$set('cooking_time','120')" @click="open = !open"
|
||
:class="$wire.cooking_time == '120' ? 'dropdown__list-item active' :
|
||
'dropdown__list-item'">
|
||
{{ __('recipe.t120m') }}</li>
|
||
<li wire:click="$set('cooking_time','14400')" @click="open = !open"
|
||
:class="$wire.cooking_time == '14400' ? 'dropdown__list-item active' :
|
||
'dropdown__list-item'">
|
||
{{ __('recipe.t14400m') }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="diet__form-column">
|
||
<div class="diet__form-row">
|
||
<div class="label">{{ __('recipe.record_state') }}</div>
|
||
<div class="dropdown" x-data="{ open: false }">
|
||
<button type="button"
|
||
:class="open ? 'dropdown__button active' : 'dropdown__button'"
|
||
x-on:click="open = ! open">{{ $state == 'active' ? __('recipe.record_state_active') : __('recipe.record_state_not_active') }}
|
||
</button>
|
||
<ul :class="open ? 'dropdown__list visible' : 'dropdown__list'">
|
||
<li wire:click="$set('state','active')" @click="open = !open"
|
||
:class="$wire.state == 'active' ? 'dropdown__list-item active' :
|
||
'dropdown__list-item'">
|
||
{{ __('recipe.record_state_active') }}</li>
|
||
<li wire:click="$set('state','archived')" @click="open = !open"
|
||
:class="$wire.state == 'archived' ? 'dropdown__list-item active' :
|
||
'dropdown__list-item'">
|
||
{{ __('recipe.record_state_not_active') }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@php
|
||
$n = count($ingredients);
|
||
$lastIngedient = $n - 1;
|
||
@endphp
|
||
@if ($n == 0)
|
||
<div class="diet__form-column diet__form-column-xl">
|
||
<div class="diet__form-columns">
|
||
<div class="diet__form-column diet__form-column-lg" data-row="0">
|
||
<input type="text" wire:model="ingredients.0.name" class="input"
|
||
placeholder="Введите название продукта...." required="">
|
||
</div>
|
||
<div class="diet__form-column">
|
||
<div class="diet__form-adding">
|
||
|
||
<div class="diet__form-column">
|
||
<select wire:model="ingredients.0.unit" name="unit"
|
||
class="input">
|
||
<option value="gr">гр</option>
|
||
<option value="teespoon">ч. ложек</option>
|
||
<option value="tablespoon">ст. ложек</option>
|
||
<option value="ml">мл</option>
|
||
<option value="pcs">шт</option>
|
||
<option value="clove">зубчик</option>
|
||
<option value="to_taste">по вкусу</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="diet__form-column">
|
||
<input wire:model="ingredients.0.portion" class="input"
|
||
placeholder="Порция" required="" type="number">
|
||
<button wire:click="addIngredient" type="button"
|
||
class="btn btn-primary icon-plus"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
@foreach ($ingredients as $k => $ingredient)
|
||
<div class="diet__form-column diet__form-column-xl">
|
||
<div class="diet__form-columns">
|
||
<div class="diet__form-column diet__form-column-lg"
|
||
data-row="{{ $k }}">
|
||
<input type="text" wire:model="ingredients.{{ $k }}.name"
|
||
class="input" placeholder="Введите название продукта...."
|
||
required="">
|
||
</div>
|
||
<div class="diet__form-column">
|
||
<div class="diet__form-adding">
|
||
<div class="diet__form-column">
|
||
<select wire:model="ingredients.{{ $k }}.unit"
|
||
name="unit" class="input">
|
||
<option value="gr">гр</option>
|
||
<option value="teespoon">ч. ложек</option>
|
||
<option value="tablespoon">ст. ложек</option>
|
||
<option value="ml">мл</option>
|
||
<option value="pcs">шт</option>
|
||
<option value="clove">зубчик</option>
|
||
<option value="to_taste">по вкусу</option>
|
||
</select>
|
||
</div>
|
||
<div class="diet__form-column">
|
||
<input wire:model="ingredients.{{ $k }}.portion"
|
||
class="input" placeholder="Порция" required=""
|
||
type="number">
|
||
@if ($k == count($ingredients) - 1)
|
||
<button wire:click="addIngredient" type="button"
|
||
class="btn btn-primary icon-plus"></button>
|
||
@endif
|
||
</div>
|
||
<button wire:click="removeIngredient({{ $k }})" type="button"
|
||
class="btn btn-danger">x</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
|
||
|
||
<div @class([
|
||
'tabpanel',
|
||
'tabpanel--hidden' => $state_row['article'] !== 'true',
|
||
]) role="tabpanel" id="tabpanel-2" tabindex="0"
|
||
aria-labelledby="tab-2">
|
||
<div class="diet__form-column">
|
||
<div class="diet__form-row">
|
||
<div class="label">{{ __('recipe.record_state') }}</div>
|
||
<div class="dropdown" x-data="{ open: false }">
|
||
<button type="button"
|
||
:class="open ? 'dropdown__button active' : 'dropdown__button'"
|
||
x-on:click="open = ! open">{{ $state_article == 'active' ? __('recipe.record_state_active') : __('recipe.record_state_not_active') }}
|
||
</button>
|
||
<ul :class="open ? 'dropdown__list visible' : 'dropdown__list'">
|
||
<li wire:click="$set('state_article','active')" @click="open = !open"
|
||
:class="$wire.state_article == 'active' ? 'dropdown__list-item active' :
|
||
'dropdown__list-item'">
|
||
{{ __('recipe.record_state_active') }}</li>
|
||
<li wire:click="$set('state_article','archived')" @click="open = !open"
|
||
:class="$wire.state_article == 'archived' ? 'dropdown__list-item active' :
|
||
'dropdown__list-item'">
|
||
{{ __('recipe.record_state_not_active') }}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tabpanel tabpanel--hidden" role="tabpanel" id="tabpanel-2" tabindex="0"
|
||
aria-labelledby="tab-2">
|
||
<div class="diet__form-column">
|
||
<div class="diet__form-row">
|
||
<div class="label">
|
||
Статус
|
||
</div>
|
||
<div class="dropdown">
|
||
<button type="button" class="dropdown__button">
|
||
Активна
|
||
</button>
|
||
<ul class="dropdown__list">
|
||
<li data-value="active" class="dropdown__list-item active">Активна</li>
|
||
<li data-value="unactive" class="dropdown__list-item">Неактивна</li>
|
||
</ul>
|
||
<input type="text" name="status" class="dropdown__input hidden"
|
||
hidden="" value="unactive">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4 fs-4_5" wire:ignore>
|
||
<label for="txtFormatter" class="mb-2">{{ __('recipe.content') }}</label>
|
||
<div class="form-textarea w-full" x-data="{}" x-init="ClassicEditor.create($refs.myIdentifierHere, {
|
||
toolbar: {
|
||
items: [
|
||
'heading', '|',
|
||
'bold', 'italic', '|',
|
||
'bulletedList', 'numberedList', '|',
|
||
'outdent', 'indent', '|',
|
||
'blockQuote', 'undo', 'redo'
|
||
],
|
||
shouldNotGroupWhenFull: true
|
||
}
|
||
})
|
||
.then(function(editor) {
|
||
editor.model.document.on('change:data', () => {
|
||
$dispatch('input', editor.getData())
|
||
})
|
||
})
|
||
.catch(error => {
|
||
console.error(error);
|
||
});" wire:ignore
|
||
wire:key="myIdentifierHere" x-ref="myIdentifierHere" wire:model.live="description">
|
||
{!! $description !!}</div>
|
||
</div>
|
||
</div>
|
||
@php
|
||
$stepsCount = count($steps);
|
||
@endphp
|
||
@for ($i = 0; $i < $stepsCount; $i++)
|
||
<div class="diet__form-row">
|
||
<div class="label">
|
||
{{ __('recipe.step') }} {{ $i + 1 }}
|
||
<span>
|
||
{{ __('recipe.total_steps') }}: {{ $stepsCount }}
|
||
</span>
|
||
</div>
|
||
<div class="diet__form-step">
|
||
<label class="file">
|
||
<span class="file__content">
|
||
@if (isset($steps[$i]['image']) && is_string($steps[$i]['image']))
|
||
<img src="{{ Storage::url($steps[$i]['image']) }}">
|
||
@endif
|
||
<input type="file" name="step[{{ $i }}][image]"
|
||
wire:model="steps.{{ $i }}.image"
|
||
id="step[{{ $i }}][image]" hidden>
|
||
@error('steps.' . $i . '.image')
|
||
<span class="error">{{ $message }}</span>
|
||
@enderror
|
||
@if (!isset($steps[$i]['image']))
|
||
<div class="my-3">
|
||
<svg width="50" height="50">
|
||
<use xlink:href="#dndFileIcon"></use>
|
||
</svg>
|
||
</div>
|
||
@endif
|
||
</span>
|
||
</label>
|
||
<textarea class="textarea" name="step[{{ $i }}][description]"
|
||
wire:model.defer="steps.{{ $i }}.description" autoresize="" placeholder="Введи описание шага"
|
||
rows="5">{{ $steps[$i]['description'] ?? '' }}</textarea>
|
||
<div class="diet__form-column">
|
||
<button type="button" wire:click="removeStep({{ $i }})"
|
||
class="diet__form-add btn btn-primary" @disabled($i == 0)>-</button>
|
||
<button type="button" wire:click="addStep" class="diet__form-add btn btn-primary"
|
||
data-bs-toggle="tooltip" data-bs-placement="left" title=""
|
||
data-bs-original-title="Добавить шаг">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endfor
|
||
<div class="diet__form-row">
|
||
<div class="label" data-tags="{{ json_encode($tags) }}">
|
||
{{ __('recipe.tags') }}
|
||
</div>
|
||
<livewire:tags-component :parentComponent="$recipe" />
|
||
</div>
|
||
<div class="diet__form-row">
|
||
<div class="label">
|
||
{{ __('recipe.video_link') }}
|
||
</div>
|
||
<input wire:model="video_url" type="text" class="input"
|
||
placeholder="Прикрепите ссылку на YouTube видео">
|
||
</div>
|
||
</div>
|
||
<div class="diet__btns">
|
||
<button wire:click="draft" type="button"
|
||
class="diet__btn btn btn-gray">{{ __('recipe.to_drafts') }}</button>
|
||
<button type="button" wire:click="preview"
|
||
class="diet__btn btn btn-gray">{{ __('recipe.preview') }}</button>
|
||
<button type="button" wire:click="publish"
|
||
class="diet__btn btn btn-primary">{{ __('recipe.publish') }}</button>
|
||
</div>
|
||
|
||
<div class="container mb-5 p-0 --mw-1000">
|
||
@foreach ($errors->all() as $message)
|
||
<div class="alert alert-warning">{{ $message }}</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
</section>
|