forked from eatvio/eatvio-infra
156 lines
7.6 KiB
PHP
156 lines
7.6 KiB
PHP
<section class="py-5" id="main">
|
|
<div class="container d-flex justify-content-between align-items-center mb-4 px-4 py-3 --bg_white --shadow --radius --mw-1000">
|
|
<a href="{{ route('diet.index') }}" class="d-flex align-items-center --f_bold --f_main"><svg width="17" height="16" class="me-2"><use xlink:href="#GoBack"></use></svg><span class="d-none d-md-inline">{{ __('diet.my_diets') }}</span></a>
|
|
<div class="fs-5 text-center">
|
|
<div class="--f_bolder">{{ __('diet.diet_adding') }}</div>
|
|
</div>
|
|
<div class="col-1 col-md-2"></div>
|
|
</div>
|
|
|
|
<form>
|
|
|
|
<div class="container mb-5 py-3 overflow-hidden --bg_white --shadow --radius --mw-1000">
|
|
<div class="fs-4_5">
|
|
<label for="form-title">{{ __('diet.name') }}</label>
|
|
<input wire:model="name" type="text" id="form-title" class="form-control mt-3 py-3 w-100" placeholder="Введите название диеты" required="" autocomplete="off" role="presentation" />
|
|
</div>
|
|
|
|
<div class="row fs-4_5">
|
|
<div class="col-12 col-sm-12 col-xl-4 my-4 dnd_file">
|
|
<label for="form-image">{{ __('diet.picture') }}</label>
|
|
<div class="form__item mt-3 p-3 --radius --bordered text-center --f_grey">
|
|
<input wire:model="image" type="file" name="form-image" id="form-image">
|
|
@error('image') <span class="error">{{ $message }}</span> @enderror
|
|
|
|
<label for="form-image" class="file-label">
|
|
@if(is_null($image))
|
|
<p><svg width="88" height="88"><use xlink:href="#dndFileIcon"></use></svg></p>
|
|
<div class="px-3">{{ __('diet.tap_to_select_or_drag_and_drop') }}</div>
|
|
<div id="file-name"></div>
|
|
@else
|
|
{{-- @php dd($image) @endphp --}}
|
|
<p><img src="{{ $image->temporaryUrl() }}" /> </p>
|
|
@endif
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="col-12 col-sm-12 col-xl-8 my-4">
|
|
<div class="row mb-3">
|
|
<div class="col-12 col-sm-6 d-flex flex-column">
|
|
<label for="form-image">{{ __('diet.duration') . " " . $duration }}</label>
|
|
<select wire:model.live="duration" class="form-select my-3 ps-4 pe-5 py-3 --f_bold">
|
|
<option value="7" selected>7 {{ __('diet.days') }}</option>
|
|
<option value="14">14 {{ __('diet.days') }}</option>
|
|
<option value="28">28 {{ __('diet.days') }}</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-12 col-sm-6 d-flex flex-column">
|
|
<label for="form-image">{{ __('diet.status') }} {{ __('diet.' . $state) }}</label>
|
|
<select wire:model="state" class="form-select my-3 ps-4 pe-5 py-3 --f_bold">
|
|
<option value="active" selected="">{{ __('diet.active') }}</option>
|
|
<option value="inactive">{{ __('diet.inactive') }}</option>
|
|
<option value="draft">{{ __('diet.draft') }}</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12 col-sm-6 d-flex flex-column">
|
|
<div class="btn-group --radio">
|
|
<input wire:model="type.meat" type="checkbox" class="btn-check" name="dates" id="dates1" autocomplete="off">
|
|
<label class="btn --f_bold" for="dates1"><svg width="40" height="40"><use xlink:href="#MeatBig"></use></svg><div>{{ __('diet.meat') }}</div></label>
|
|
|
|
<input wire:model="type.veg" type="checkbox" class="btn-check" name="dates" id="dates2" autocomplete="off">
|
|
<label class="btn --f_bold" for="dates2"><svg width="40" height="40"><use xlink:href="#BroccoliBig"></use></svg><div>{{ __('diet.veg') }}</div></label>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 col-sm-6 d-flex flex-column">
|
|
<div class="btn-group --radio">
|
|
<input wire:model="type.corb" type="checkbox" class="btn-check" name="status" id="status1" autocomplete="off">
|
|
<label class="btn --f_bold" for="status1"><svg width="40" height="40"><use xlink:href="#BreadBig"></use></svg><div>{{ __('diet.corb') }}</div></label>
|
|
|
|
<input wire:model="type.alko" type="checkbox" class="btn-check" name="status" id="status2" autocomplete="off">
|
|
<label class="btn --f_bold" for="status2"><svg width="40" height="40"><use xlink:href="#WineBig"></use></svg><div>{{ __('diet.alko') }}</div></label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mb-4 fs-4_5" wire:ignore>
|
|
<label for="details" class="mb-3">{{ __('diet.description') }}</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.debounce.9999999ms="details"></div>
|
|
</div>
|
|
</div>
|
|
<div class="container mb-4 px-4 py-3 --bg_white --shadow --radius --mw-1000">
|
|
<div class="d-flex justify-content-between align-items-center text-center fs-5 --f_bolder">
|
|
<div class="flex-grow-1">{{ $duration }} {{ __('diet.days') }}</div>
|
|
<svg width="20" height="11"><use xlink:href="#arrUpIcon"></use></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container px-0 --mw-1000">
|
|
<div class="d-grid gap-5 grid-template-columns-2">
|
|
@for($day = 1; $day <= $duration; $day++)
|
|
<livewire:diet.day-edit :day="$day" wire:key="day-{{ $day }}"/>
|
|
@endfor
|
|
</div>
|
|
</div>
|
|
|
|
@if($errors)
|
|
<div class="container p-0 --mw-1000 --bg_note --shadow --radius mt-2">
|
|
<ul>
|
|
@foreach($errors->all() as $message)
|
|
<li> {{ $message }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="container p-0 --mw-1000">
|
|
<div class="row gx-3 gx-lg-4 gy-3 gy-lg-4">
|
|
<div class="col">
|
|
<button wire:click.prevent="addToDrafts" class="btn btn-lg btn-secondary btn-block w-100 --f_bolder --no_wrap">{{ __('diet.button_add_to_drafts') }}</button>
|
|
</div>
|
|
<div class="col">
|
|
<button wire:click.prevent="showPreview" class="btn btn-lg btn-secondary btn-block w-100 --f_bolder --no_wrap">{{ __('diet.button_show_preview') }}</button>
|
|
</div>
|
|
<div class="col">
|
|
<button wire:click.prevent="publish" class="btn btn-lg btn-primary btn-block w-100 --f_bolder --no_wrap" type="submit">{{ __('diet.button_publish') }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</section>
|