forked from eatvio/eatvio-infra
319 lines
20 KiB
PHP
319 lines
20 KiB
PHP
<section class="py-5 diet" id="main">
|
||
<div class="diet__container">
|
||
<div class="diet__header">
|
||
<a class="diet__back icon-arrow-short-left" href="{{ route('recipe.index') }}">
|
||
<span>Мой блог</span>
|
||
</a>
|
||
<h1 class="diet__title">{{ __('recipe.adding') }}</h1>
|
||
</div>
|
||
<div class="diet__form">
|
||
<div class="diet__form-row">
|
||
<div class="label">{{ __('recipe.title') }}</div>
|
||
<input wire:model="title" type="text" class="input" placeholder="Заголовок" />
|
||
</div>
|
||
<div class="diet__form-row">
|
||
<div class="label">{{ __('recipe.type') }}</div>
|
||
<select wire:model="type" class="input">
|
||
<option value="first_meals">{{ __('recipe.first_meals') }}</option>
|
||
<option value="second_meals">{{ __('recipe.second_meals') }}</option>
|
||
<option value="salads">{{ __('recipe.salads') }}</option>
|
||
<option value="snacks">{{ __('recipe.snacks') }}</option>
|
||
<option value="sweets">{{ __('recipe.sweets') }}</option>
|
||
<option value="drinks">{{ __('recipe.drinks') }}</option>
|
||
<option value="other" @selected(in_array($type, ['other', 'unknown']))>{{ __('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 wire:model="image" type="file" name="file" class="file__input hidden" hidden="">
|
||
@error('image') <span class="error">{{ $message }}</span> @enderror
|
||
<span class="file__content">
|
||
@if(is_null($image))
|
||
<span class="file__formats">
|
||
<img src="/img/formats-2.svg" alt="formats">
|
||
</span>
|
||
<span class="file__title">{{ __('recipe.tap_to_select_or_drag_and_drop') }}</span>
|
||
@else
|
||
<p><img src="{{ $image->temporaryUrl() }}" /> </p>
|
||
@endif
|
||
</span>
|
||
</label>
|
||
</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" aria-selected="true" aria-controls="tabpanel-1">Рецепт</button>
|
||
<button class="btn" role="tab" type="button" id="tab-2" aria-selected="false" aria-controls="tabpanel-2" tabindex="-1">Cтатья</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tabpanel" 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>
|
||
<div class="diet__form-column diet__form-column-xl">
|
||
@if(!empty($ingredients))
|
||
<div class="content__table diet__form-row">
|
||
<div class="content__table-wrapper">
|
||
<table class="cabinet__table-content">
|
||
<thead>
|
||
<tr>
|
||
<th>{{ __('recipe.name_of_product')}}</th>
|
||
<th>{{ __('recipe.portion')}}</th>
|
||
<th>{{ __('recipe.units')}}</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach($ingredients as $ingredient)
|
||
<tr>
|
||
<td>{{ $ingredient['name'] }}</td>
|
||
<td>{{ $ingredient['portion'] }}</td>
|
||
<td>{{ __('recipe.' . $ingredient['unit']) }}</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
<div class="diet__form-columns">
|
||
<div class="diet__form-column diet__form-column-lg">
|
||
<input wire:model="ingredients_name" type="text" name="name" class="input" placeholder="Введите название продукта">
|
||
</div>
|
||
<div class="diet__form-column">
|
||
<div class="diet__form-adding">
|
||
<div class="diet__form-column">
|
||
<input wire:model="ingredients_portion" type="num" name="portion" class="input" placeholder="Порция">
|
||
<select wire:model="ingredients_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>
|
||
<button wire:click="addIngredient" type="button" class="btn btn-primary icon-plus"></button>
|
||
</div>
|
||
<button type="button" class="icon-gear"></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="diet__form-row">
|
||
<div class="label">{{ __('recipe.content') }}</div>
|
||
<div class="wysiwyg" wire:ignore>
|
||
<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', () => {
|
||
console.log(editor.getData());
|
||
// $dispatch('input', editor.getData())
|
||
@this.set('description', editor.getData());
|
||
})
|
||
})
|
||
.catch( error => {
|
||
console.error( error );
|
||
});"
|
||
wire:ignore
|
||
wire:key="myIdentifierHere"
|
||
x-ref="myIdentifierHere"
|
||
wire:model.live.debounce.9999999ms="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 }}
|
||
@if($i == 0)
|
||
<span>{{ __('recipe.total_steps') }}: {{ $stepsCount }}</span>
|
||
@endif
|
||
</div>
|
||
<div class="diet__form-step">
|
||
<label class="file">
|
||
<input class="file__input hidden" hidden="" type="file" name="step[{{$i}}][image]" wire:model="steps.{{$i}}.image" id="step[{{$i}}][image]" />
|
||
<span class="file__content">
|
||
@if ($steps[$i]['image'])
|
||
<img src="{{ $steps[$i]['image']->temporaryUrl() }}">
|
||
@else
|
||
<img src="/img/add-file.svg" width="40" height="40" alt="formats">
|
||
@endif
|
||
</span>
|
||
</label>
|
||
<textarea name="desc-step-1" class="textarea" wire:model="steps.{{$i}}.description" id="step[{{$i}}][description]" placeholder="Введите описание шага"></textarea>
|
||
<div class="diet__form-column">
|
||
<button type="button" wire:click="removeStep({{$i}})" class="diet__form-add btn {{ $i == 0 ? 'btn-gray' : 'btn-primary' }}" @disabled($i == 0)>-</button>
|
||
<button type="button" wire:click="addStep" class="diet__form-add btn btn-primary" 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>
|
||
<!--input type="text" name="link" class="input" placeholder="Введите теги через запятую"-->
|
||
<livewire:tags-component key="tags-component" />
|
||
</div>
|
||
<div class="diet__form-row">
|
||
<div class="label">{{ __('recipe.video_link') }}</div>
|
||
<input type="text" name="link" wire:model="video_url" class="input" placeholder="Прикрепите ссылку на YouTube видео">
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
{{-- <div class="container mb-4 py-3 overflow-hidden --bg_white --shadow --radius --mw-1000">
|
||
<div class="row fs-4_5">
|
||
<div class="col-12 col-sm-7 col-md-8 my-4 d-flex flex-column justify-content-between">
|
||
<div class="mb-4">
|
||
<label>{{ __('recipe.record_type') }}</label>
|
||
<ul class="mt-3 nav nav-pills flex-nowrap w-100 --bordered --radius --tabs_blue overflow-x-xs-scroll" role="radiogroup">
|
||
<li class="nav-item" role="presentation">
|
||
<label class="btn btn-lg nav-link py-3 --radius active">{{ __('recipe.self') }}</label>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<a href="{{ route('blog_post.create') }}" class="btn btn-lg nav-link py-3">{{ __('recipe.blog_post') }}</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12 col-sm-6 d-flex flex-column --reciept">
|
||
<label>{{ __('recipe.cooking_time') }}</label>
|
||
<select wire:model="cooking_time" class="form-select mt-3 ps-4 pe-5 py-3 --f_bold">
|
||
<option value="10" selected>{{ __('recipe.t10m') }}</option>
|
||
<option value="20" selected>{{ __('recipe.t20m') }}</option>
|
||
<option value="30" selected>{{ __('recipe.t30m') }}</option>
|
||
<option value="60">{{ __('recipe.t60m') }}</option>
|
||
<option value="120">{{ __('recipe.t120m') }}</option>
|
||
<option value="14400">{{ __('recipe.t14400m') }}</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12 col-sm-6 d-flex flex-column mt-3 mt-sm-0">
|
||
<label>{{ __('recipe.record_state') }}</label>
|
||
<select wire:model="state" class="form-select mt-3 ps-4 pe-5 py-3 --f_bold">
|
||
<option value="active">{{ __('recipe.record_state_active') }}</option>
|
||
<option value="archived">{{ __('recipe.record_state_not_active') }}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mb-4 fs-4_5 --reciept">
|
||
<div class="tab-pane fade show active">
|
||
@php $lastIngedient = count($ingredients) - 1; @endphp
|
||
@foreach($ingredients as $k => $ingredient)
|
||
<div class="d-flex align-items-top flex-wrap flex-sm-nowrap mb-4" data-row="{{ $k }}">
|
||
<div class="w-100">
|
||
<input type="text" wire:model="ingredients.{{$k}}.name" class="form-control fs-4_5 py-3 w-100" placeholder="Введите название продукта...." required="">
|
||
</div>
|
||
<div class="d-flex w-md-80 align-items-baseline">
|
||
<div class="flex-grow-1 ms-sm-3 mt-3 mt-sm-0">
|
||
<input wire:model="ingredients.{{ $k }}.portion" class="form-control fs-4_5 py-3" placeholder="Порция" required="" type="number">
|
||
</div>
|
||
<div class="ms-4 me-2 mt-3 mt-sm-0">
|
||
<select name="unit" wire:model="ingredients.{{ $k }}.unit" class="form-select ps-4 pe-5 py-3 --f_bold">
|
||
<option value="gr">{{ __('recipe.gr') }}</option>
|
||
<option value="teespoon">{{ __('recipe.teespoon') }}</option>
|
||
<option value="tablespoon">{{ __('recipe.tablespoon') }}</option>
|
||
<option value="ml">{{ __('recipe.ml') }}</option>
|
||
<option value="pcs">{{ __('recipe.pcs') }}</option>
|
||
<option value="clove">{{ __('recipe.clove') }}</option>
|
||
<option value="to_taste">{{ __('recipe.to_taste') }}</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="flex-grow-1 ms-sm-3 mt-3 mt-sm-0">
|
||
<button wire:click="removeIngredient({{$k}})" type="button" class="btn btn-outline-danger">x</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
<div class="d-flex justify-content-end mt-2" data-row="0">
|
||
<button type="button" wire:click="addIngredient" class="btn btn-lg btn-primary btn-block py-4 fs-2 lh-0 --radius">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4 fs-4_5">
|
||
<div class="mb-2" data-tags="{{ json_encode($tags) }}">{{ __('recipe.tags') }}</div>
|
||
<livewire:tags-component />
|
||
</div>
|
||
<div class="mb-4 fs-4_5">
|
||
<div class="mb-2">{{ __('recipe.video_link') }}</div>
|
||
<input wire:model="video_url" type="text" class="form-control fs-4_5 py-3 w-100" placeholder="Прикрипите ссылку на YouTube видео" />
|
||
</div>
|
||
</div> --}}
|
||
<div class="diet__container">
|
||
<div class="diet__btns">
|
||
<button wire:click="draft" class="diet__btn btn btn-gray" type="button">{{ __('recipe.to_drafts') }}</button>
|
||
<button wire:click="preview" class="diet__btn btn btn-gray" type="button">{{ __('recipe.preview') }}</button>
|
||
<button wire:click="publish" class="diet__btn btn btn-primary" type="submit">{{ __('recipe.publish') }}</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container mb-5 p-0 --mw-1000">
|
||
@foreach ($errors->all() as $message)
|
||
<div class="alert alert-warning">{{ $message }}</div>
|
||
@endforeach
|
||
</div>
|
||
</section>
|
||
|