forked from eatvio/eatvio-infra
308 lines
17 KiB
PHP
308 lines
17 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="#" 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">Мои планы</span></a>
|
||
<div class="fs-5 text-center">
|
||
<div class="--f_bolder">Добавление плана</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">Название</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">Изображение</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">Нажмите для выбора или перетащите изображение</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">Длительность плана питания {{ $duration }}</label>
|
||
<select wire:model="duration" class="form-select my-3 ps-4 pe-5 py-3 --f_bold">
|
||
<option value="7" selected>7 дней</option>
|
||
<option value="14">14 дней</option>
|
||
<option value="21">21 дней</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-12 col-sm-6 d-flex flex-column">
|
||
<label for="form-image">Статус {{ $state }}</label>
|
||
<select wire:model="state" class="form-select my-3 ps-4 pe-5 py-3 --f_bold">
|
||
<option value="active" selected="">Активна</option>
|
||
<option value="inactive">Не активна</option>
|
||
<option value="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.slim" 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="#SlimBig"></use></svg><div>Slim</div></label>
|
||
|
||
<input wire:model="type.fit" 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="#FitBig"></use></svg><div>Fit</div></label>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 col-sm-6 d-flex flex-column">
|
||
<div class="btn-group --radio">
|
||
<input wire:model="type.wellness" 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="#WellnessBig"></use></svg><div>Wellness</div></label>
|
||
|
||
<input wire:model="type.behavior" 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="#BehaviorBig"></use></svg><div>Behavior</div></label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="mb-4 fs-4_5" wire:ignore>
|
||
<label for="details" class="mb-3">Описание </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 px-0 mb-4 --mw-1000">
|
||
<div class="d-md-flex justify-content-between align-items-center">
|
||
<div class="h4 mb-3 mb-md-0 text-uppercase --f_grey">Оказание услуг</div>
|
||
<div class="d-flex align-items-center flex-wrap flex-lg-nowrap flex-column-reverse flex-lg-row">
|
||
<ul class="nav nav-pills flex-nowrap w-100 --bordered --radius --tabs_blue --bg_white" id="pills-tab" role="tablist">
|
||
<li class="nav-item" role="presentation">
|
||
<button wire:click="$set('packets_count', 1)" class="btn-lg nav-link px-0 px-md-5 py-3 --f_bold {{ $packets_count === 1 ? 'active' : '' }}" data-bs-toggle="pill" data-bs-target="#pills-0" type="button" role="tab" aria-controls="pills-0" aria-selected="false">1 Вариант</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button wire:click="$set('packets_count', 3)" class="btn-lg nav-link px-0 px-md-5 py-3 --f_bold {{ $packets_count === 3 ? 'active' : ''}}" data-bs-toggle="pill" data-bs-target="#pills-1" type="button" role="tab" aria-controls="pills-1" aria-selected="true">3 Варианта</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="tab-content mb-4" id="pills-tabContent">
|
||
@if($packets_count === 1)
|
||
<div class="tab-pane fade active show" id="pills-0" role="tabpanel" aria-labelledby="pills-0-tab">
|
||
<div class="container mb-5 p-3 overflow-hidden --bg_white --shadow --radius --mw-1000">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6 mb-3">
|
||
<label class="mb-3">Название</label>
|
||
<input wire:model="packet1_options_input.short" type="text" class="form-control fs-4_5 py-3 w-100" placeholder="Введите краткое описание варианта" required="">
|
||
</div>
|
||
<div class="col-12 col-md-6 mb-3">
|
||
<label class="mb-3">Цена</label>
|
||
<input wire:model="packet1_options_input.price" type="number" class="form-control fs-4_5 py-3 w-100" placeholder="Введите цену варианта" required="">
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="mb-3">Описание услуги:</label>
|
||
<textarea wire:model="packet1_options_input.description" type="text" class="form-control py-3 w-100" placeholder="Описание услуги" required=""></textarea>
|
||
</div>
|
||
<label class="mb-3">Содержание услуги:</label>
|
||
@isset($packet1_options['items'])
|
||
<ul class="mb-3">
|
||
@foreach($packet1_options['items'] as $item)
|
||
<li>
|
||
<td>{{ $item }}</td>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
@endisset
|
||
<div class="row">
|
||
<div class="col-12 col-md-10 mb-3">
|
||
<input wire:model="input_items" type="text" class="form-control py-3 w-100" placeholder="Содержание услуги" required="" />
|
||
</div>
|
||
<div class="col-12 col-md-2 mb-3">
|
||
<button wire:click="addPacketOption('packet1_options', 'packet1_options_input')" type="button" class="float-end btn btn-lg btn-primary btn-block px-5 fs-6 --f_bold">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
@if($packets_count === 3)
|
||
<div class="tab-pane fade active show" id="pills-1" role="tabpanel" aria-labelledby="pills-1-tab">
|
||
<div class="container mb-5 p-3 overflow-hidden --bg_white --shadow --radius --mw-1000 --counter_variant">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6 mb-3">
|
||
<label class="mb-3">Краткое описание</label>
|
||
<input wire:model="packet1_options_input.short" type="text" class="form-control fs-4_5 py-3 w-100" placeholder="Введите краткое описание варианта" required="">
|
||
</div>
|
||
<div class="col-12 col-md-6 mb-3">
|
||
<label class="mb-3">Цена</label>
|
||
<input wire:model="packet1_options_input.price" type="number" class="form-control fs-4_5 py-3 w-100" placeholder="Введите цену варианта" required="">
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="mb-3">Описание услуги:</label>
|
||
<textarea wire:model="packet1_options_input.description" type="text" class="form-control py-3 w-100" placeholder="Описание услуги" required=""></textarea>
|
||
</div>
|
||
<label class="mb-3">Содержание услуги:</label>
|
||
@isset($packet1_options['items'])
|
||
<ul class="mb-3">
|
||
@foreach($packet1_options['items'] as $item)
|
||
<li>
|
||
<td>{{ $item }}</td>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
@endisset
|
||
<div class="row">
|
||
<div class="col-12 col-md-10 mb-3">
|
||
<input type text wire:model="input_items" type="text" class="form-control py-3 w-100" placeholder="Содержание услуги" required=""></textarea>
|
||
</div>
|
||
<div class="col-12 col-md-2 mb-3">
|
||
<button wire:click="addPacketOption('packet1_options', 'packet1_options_input')" type="button" class="float-end btn btn-lg btn-primary btn-block px-5 fs-6 --f_bold">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container mb-5 p-3 overflow-hidden --bg_white --shadow --radius --mw-1000 --counter_variant">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6 mb-3">
|
||
<label class="mb-3">Краткое описание</label>
|
||
<input wire:model="packet2_options_input.short" type="text" class="form-control fs-4_5 py-3 w-100" placeholder="Введите краткое описание варианта" required="">
|
||
</div>
|
||
<div class="col-12 col-md-6 mb-3">
|
||
<label class="mb-3">Цена</label>
|
||
<input wire:model="packet2_options_input.price" type="number" class="form-control fs-4_5 py-3 w-100" placeholder="Введите цену варианта" required="">
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="mb-3">Описание услуги:</label>
|
||
<textarea wire:model="packet2_options_input.description" type="text" class="form-control py-3 w-100" placeholder="Описание услуги" required=""></textarea>
|
||
</div>
|
||
<label class="mb-3">Содержание услуги:</label>
|
||
@isset($packet2_options['items'])
|
||
<ul class="mb-3">
|
||
@foreach($packet2_options['items'] as $item)
|
||
<li>
|
||
<td>{{ $item }}</td>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
@endisset
|
||
<div class="row">
|
||
<div class="col-12 col-md-10 mb-3">
|
||
<input type text wire:model="input_items" type="text" class="form-control py-3 w-100" placeholder="Содержание услуги" required=""></textarea>
|
||
</div>
|
||
<div class="col-12 col-md-2 mb-3">
|
||
<button wire:click="addPacketOption('packet2_options', 'packet2_options_input')" type="button" class="float-end btn btn-lg btn-primary btn-block px-5 fs-6 --f_bold">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="container mb-5 p-3 overflow-hidden --bg_white --shadow --radius --mw-1000 --counter_variant">
|
||
<div class="row">
|
||
<div class="col-12 col-md-6 mb-3">
|
||
<label class="mb-3">Краткое описание</label>
|
||
<input wire:model="packet3_options_input.short" type="text" class="form-control fs-4_5 py-3 w-100" placeholder="Введите краткое описание варианта" required="">
|
||
</div>
|
||
<div class="col-12 col-md-6 mb-3">
|
||
<label class="mb-3">Цена</label>
|
||
<input wire:model="packet3_options_input.price" type="number" class="form-control fs-4_5 py-3 w-100" placeholder="Введите цену варианта" required="">
|
||
</div>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="mb-3">Описание услуги:</label>
|
||
<textarea wire:model="packet3_options_input.description" type="text" class="form-control py-3 w-100" placeholder="Описание услуги" required=""></textarea>
|
||
</div>
|
||
<label class="mb-3">Содержание услуги:</label>
|
||
@isset($packet3_options['items'])
|
||
<ul class="mb-3">
|
||
@foreach($packet3_options['items'] as $item)
|
||
<li>
|
||
<td>{{ $item }}</td>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
@endisset
|
||
<div class="row">
|
||
<div class="col-12 col-md-10 mb-3">
|
||
<input type text wire:model="input_items" type="text" class="form-control py-3 w-100" placeholder="Содержание услуги" required=""></textarea>
|
||
</div>
|
||
<div class="col-12 col-md-2 mb-3">
|
||
<button wire:click="addPacketOption('packet3_options', 'packet3_options_input')" type="button" class="float-end btn btn-lg btn-primary btn-block px-5 fs-6 --f_bold">+</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
@if($errors)
|
||
<div class="container p-0 --mw-1000 --bg_white --shadow --radius">
|
||
<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">
|
||
<a wire:click="addToDrafts" href="#" class="btn btn-lg btn-secondary btn-block w-100 --f_bolder --no_wrap">В ЧЕРНОВИК</a>
|
||
</div>
|
||
<div class="col">
|
||
<a wire:click="showPreview" href="#" class="btn btn-lg btn-secondary btn-block w-100 --f_bolder --no_wrap">ПРЕВЬЮ</a>
|
||
</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">ОПУБЛИКОВАТЬ</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
</section>
|
||
|