479 lines
32 KiB
PHP
479 lines
32 KiB
PHP
@extends('layouts.vertical', ['page_title' => 'Add & Edit Products'])
|
|
|
|
@section('css')
|
|
<!-- third party css -->
|
|
<link href="{{asset('assets/libs/quill/quill.min.css')}}" rel="stylesheet" type="text/css" />
|
|
<link href="{{ URL::asset('assets/libs/dropify/dropify.min.css') }}" rel="stylesheet" type="text/css" />
|
|
|
|
<!-- third party css end -->
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
<!-- end page title -->
|
|
@if (session()->has('message'))
|
|
<div class="alert alert-success mt-3">
|
|
{{ session()->get('message') }}
|
|
</div>
|
|
@endif
|
|
<div class="row mt-3">
|
|
<div class="col-xl-12">
|
|
<div class="card">
|
|
<form method="post" id="form-availiblity" enctype="multipart/form-data">
|
|
@csrf
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<h4 class="page-title">Add / Edit {{ $title }}</h4>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<div class="float-end">
|
|
<a href="{{ $base_url }}s"
|
|
class="btn btn-dark waves-effect waves-light">Back</a>
|
|
<button type="submit"
|
|
class="btn btn-success waves-effect waves-light">Submit</button>
|
|
</div>
|
|
</div>
|
|
@foreach ($fields as $field => $props)
|
|
@if ($props['type'] != 'hidden')
|
|
<div class="col-md-{{ isset($props['fullwidth']) ? '12' : '6' }} mb-3">
|
|
<label for="field-{{ $field }}" class="form-label">{{ $props['title'] }}
|
|
{!! isset($props['required']) && $props['required'] ? '<span class="text-danger">*</span>' : '' !!} </label>
|
|
@endif
|
|
@switch($props['type'])
|
|
@case('hidden')
|
|
<input type="{{ $props['type'] }}" id="field-{{ $field }}"
|
|
name="{{ $field }}" value="{{ $mode == 'edit' ? $item->{$field} : '' }}">
|
|
@break
|
|
|
|
@case('text')
|
|
@case('email')
|
|
|
|
@case('number')
|
|
@case('tel')
|
|
<input type="{{ $props['type'] }}" id="field-{{ $field }}"
|
|
name="{{ $field }}" class="form-control"
|
|
placeholder="Enter {{ $props['title'] }}"
|
|
value="{{ $mode == 'edit' && isset($item->{$field}) ? $item->{$field} : '' }}"
|
|
{{ isset($props['required']) && $props['required'] ? 'required' : '' }}
|
|
{!! isset($props['attributes']) ? $props['attributes'] : '' !!}>
|
|
@break
|
|
|
|
@case('date')
|
|
<input type="text" id="field-{{ $field }}" name="{{ $field }}"
|
|
class="form-control" placeholder="Enter {{ $props['title'] }}"
|
|
value="{{ $mode == 'edit' && isset($item->{$field}) ? $item->{$field} : '' }}"
|
|
data-provide="datepicker" data-date-format="mm-dd-yyyy" data-date-autoclose="true"
|
|
{{ isset($props['required']) && $props['required'] ? 'required' : '' }}>
|
|
@break
|
|
|
|
@case('textarea')
|
|
<textarea id="field-{{ $field }}" name="{{ $field }}" class="form-control"
|
|
placeholder="Enter {{ $props['title'] }}" {{ isset($props['required']) && $props['required'] ? 'required' : '' }}>{{ $mode == 'edit' && isset($item->{$field}) ? $item->{$field} : '' }}</textarea>
|
|
@break
|
|
|
|
@case('select')
|
|
<select class="form-control" id="field-{{ $field }}" name="{{ $field }}"
|
|
{{ isset($props['required']) && $props['required'] ? 'required' : '' }}>
|
|
<option value=""> -- Select {{ $props['title'] }} -- </option>
|
|
@foreach ($props['values'] as $k => $v)
|
|
<option value="{{ $k }}"
|
|
{{ $mode == 'edit' && $item->{$field} == $k ? 'selected="selected"' : '' }}>
|
|
{{ $v }}</option>
|
|
@endforeach
|
|
</select>
|
|
@break
|
|
|
|
@case('radio')
|
|
<div class="row ps-2">
|
|
@foreach ($props['values'] as $k => $v)
|
|
<div class="form-check col-auto form-check-blue mb-2">
|
|
<input class="form-check-input" type="radio" name="{{ $field }}"
|
|
value="{{ $k }}"
|
|
id="field-{{ $field }}-{{ $k }}"
|
|
{{ $mode == 'edit' && isset($item->{$field}) && $k == $item->{$field} ? 'checked' : '' }}>
|
|
<label class="form-check-label"
|
|
for="field-{{ $field }}-{{ $k }}">{{ $v }}</label>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@break
|
|
|
|
@case('checkbox')
|
|
<div class="row ps-2">
|
|
@foreach ($props['values'] as $k => $v)
|
|
<div class="form-check col-auto form-check-blue mb-2">
|
|
<input class="form-check-input" type="checkbox"
|
|
name="{{ $field }}[]" value="{{ $k }}"
|
|
id="field-{{ $field }}-{{ $k }}"
|
|
{{ $mode == 'edit' && isset($item->{$field}) && in_array($k, $item->{$field}) ? 'checked' : '' }}>
|
|
<label class="form-check-label"
|
|
for="field-{{ $field }}-{{ $k }}">{{ $v }}</label>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@break
|
|
|
|
@case('multiselect')
|
|
<select class="form-control select2-multiple" data-toggle="select2" data-width="100%"
|
|
multiple="multiple" data-placeholder="Choose {{ $props['title'] }}"
|
|
id="field-{{ $field }}" name="{{ $field }}[]"
|
|
{{ isset($props['required']) && $props['required'] ? 'required' : '' }}>
|
|
<option value=""> -- Select {{ $props['title'] }} -- </option>
|
|
@foreach ($props['values'] as $k => $v)
|
|
<option value="{{ $k }}"
|
|
{{ $mode == 'edit' && isset($item->{$field}) && in_array($k, $item->{$field}) ? 'selected="selected"' : '' }}>
|
|
{{ $v }}</option>
|
|
@endforeach
|
|
</select>
|
|
@break
|
|
|
|
@case('bigmultiselect')
|
|
<select multiple="multiple" class="bigmultiselect multi-select"
|
|
id="field-{{ $field }}" name="{{ $field }}[]"
|
|
{{ isset($props['required']) && $props['required'] ? 'required' : '' }}>
|
|
@foreach ($props['values'] as $k => $v)
|
|
<option value="{{ $k }}"
|
|
{{ $mode == 'edit' && in_array($k, $item->{$field}) ? 'selected="selected"' : '' }}>
|
|
{{ $v }}</option>
|
|
@endforeach
|
|
</select>
|
|
@break
|
|
|
|
@case('yesno')
|
|
<div>
|
|
<div class="form-check mb-2 form-check-success form-check-inline">
|
|
<input class="form-check-input" type="radio" name="{{ $field }}"
|
|
id="field-{{ $field }}-yes" value="yes"
|
|
{{ $mode == 'edit' && $item->{$field} == 'yes' ? 'checked' : '' }}
|
|
{{ isset($props['required']) && $props['required'] ? 'required' : '' }}>
|
|
<label class="form-check-label"
|
|
for="field-{{ $field }}-yes">Yes</label>
|
|
</div>
|
|
<div class="form-check mb-2 form-check-danger form-check-inline">
|
|
<input class="form-check-input" type="radio" name="{{ $field }}"
|
|
id="field-{{ $field }}-no" value="no"
|
|
{{ $mode == 'edit' && $item->{$field} == 'no' ? 'checked' : '' }}>
|
|
<label class="form-check-label" for="field-{{ $field }}-no">No</label>
|
|
</div>
|
|
</div>
|
|
@break
|
|
|
|
@case('image')
|
|
<div class="mt-3" id="file_wrapper">
|
|
<input type="file" name="{{ $field }}" class="dropify"
|
|
data-default-file="{{ $mode == 'edit' && isset($item->{$field}) ? $item->{$field} : '' }}"
|
|
data-allowed-file-extensions="png jpg jpeg gif" />
|
|
<p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
|
|
</div>
|
|
@break
|
|
|
|
@case('multiimage')
|
|
<div class="mt-3" id="file_wrapper">
|
|
<input type="file" name="{{ $field }}[]" multiple class="dropify"
|
|
data-allowed-file-extensions="png jpg jpeg gif" />
|
|
<p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
|
|
</div>
|
|
@break
|
|
|
|
@case('file')
|
|
<div class="mt-3" id="file_wrapper">
|
|
<input type="file" name="{{ $field }}" class="dropify"
|
|
data-default-file="{{ $mode == 'edit' ? $item->{$field} : '' }}"
|
|
data-allowed-file-extensions="png jpg jpeg gif mp4 pdf mp3 zip" />
|
|
<p class="text-muted text-center mt-2 mb-0">1GB Max File size</p>
|
|
</div>
|
|
@break
|
|
|
|
@case('mapping')
|
|
<div class="col-md-12 mb-2">
|
|
<button type="button" class="btn btn-info btn-xs float-end me-2 btn-add-content" ctype="youtube">Add Youtube Video</button>
|
|
<button type="button" class="btn btn-info btn-xs float-end me-2 btn-add-content" ctype="pdf">Add PDF</button>
|
|
<button type="button" class="btn btn-info btn-xs float-end me-2 btn-add-content" ctype="video">Add Video</button>
|
|
<button type="button" class="btn btn-info btn-xs float-end me-2 btn-add-content" ctype="image">Add Image</button>
|
|
<button type="button" class="btn btn-info btn-xs float-end me-2 btn-add-content" ctype="text">Add Text Content</button>
|
|
<div class="clearfix"></div>
|
|
</div>
|
|
<div id="approver-wrapper" class="row">
|
|
<!-- <div class="col-md-12 mb-2">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<label>Type</label>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label>Content</label>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<label>Order</label>
|
|
</div>
|
|
<div class="col-2">
|
|
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
@php
|
|
$contentCount = 0;
|
|
@endphp
|
|
@if ($mode == 'edit')
|
|
|
|
@foreach ($item->contents as $content)
|
|
@if($content->type == 'text')
|
|
<div class="col-md-12 mb-2">
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<label>Text Content</label>
|
|
<div id="snow-editor-{{$contentCount}}" contentCount="{{$contentCount}}" class="snow-editor" style="height: 300px;">{!!$content->content!!}</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<label>Sort Order</label>
|
|
<input type="number" class="form-control" name="sortorder[{{$contentCount}}]" value="{{$content->order}}" required>
|
|
<button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
|
|
</div>
|
|
<input type="hidden" id="content-{{$contentCount}}" name="content[{{$contentCount}}]" value="">
|
|
<input type="hidden" name="type[{{$contentCount}}]" value="text">
|
|
</div>
|
|
</div>
|
|
@elseif($content->type == 'image' || $content->type == 'video' || $content->type == 'pdf')
|
|
<div class="col-md-12 mb-2">
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<label>Upload {{$content->type}}</label>
|
|
<div class="mt-3" id="file_wrapper">
|
|
<input type="file" id="dropify-{{$contentCount}}" name="content[{{$contentCount}}]" class="dropify" data-default-file="{{$content->content}}" data-allowed-file-extensions="png jpg jpeg gif pdf mp4" />
|
|
<p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
|
|
<input type="hidden" id="old-content-{{$contentCount}}" name="old-content[{{$contentCount}}]" value="{{$content->content}}">
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<label>Sort Order</label>
|
|
<input type="number" class="form-control" name="sortorder[{{$contentCount}}]" value="{{$content->order}}" required>
|
|
<button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
|
|
</div>
|
|
<input type="hidden" name="type[{{$contentCount}}]" value="{{$content->type}}">
|
|
</div>
|
|
</div>
|
|
@elseif($content->type == 'youtube')
|
|
<div class="col-md-12 mb-2">
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<label>Youtube URL</label>
|
|
<input type="text" name="content[{{$contentCount}}]" value="{{$content->content}}" class="form-control" />
|
|
</div>
|
|
<div class="col-2">
|
|
<label>Sort Order</label>
|
|
<input type="number" class="form-control" name="sortorder[{{$contentCount}}]" value="{{$content->order}}" required>
|
|
<button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
|
|
</div>
|
|
<input type="hidden" name="type[{{$contentCount}}]" value="youtube">
|
|
</div>
|
|
</div>
|
|
|
|
@endif
|
|
@php
|
|
$contentCount++;
|
|
@endphp
|
|
@endforeach
|
|
@endif
|
|
|
|
</div>
|
|
@break
|
|
@endswitch
|
|
@if ($props['type'] != 'hidden')
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
|
|
<div class="col-md-12 mb-3">
|
|
<div class="float-end">
|
|
<a href="{{ $base_url }}s" class="btn btn-dark waves-effect waves-light">Back</a>
|
|
<button type="submit"
|
|
class="btn btn-success waves-effect waves-light">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> <!-- end card-body -->
|
|
</form>
|
|
</div> <!-- end card-->
|
|
</div> <!-- end col -->
|
|
</div>
|
|
</div>
|
|
<style type="text/css">
|
|
.ms-container {
|
|
max-width: 100%
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script src="{{ URL::asset('assets/libs/dropify/dropify.min.js') }}"></script>
|
|
<script src="{{asset('assets/libs/quill/quill.min.js')}}"></script>
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
let contentCount = {{$contentCount}};
|
|
let editors = []
|
|
let quillmodules = {
|
|
'toolbar': [[{ 'font': [] }, { 'size': [] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }], [{ 'script': 'super' }, { 'script': 'sub' }], [{ 'header': [false, 1, 2, 3, 4, 5, 6] }, 'blockquote', 'code-block'], [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }], ['direction', { 'align': [] }] ]}
|
|
|
|
|
|
$('.dropify').dropify({
|
|
messages: {
|
|
'default': 'Drag and drop a file here or click',
|
|
'replace': 'Drag and drop or click to replace',
|
|
'remove': 'Remove',
|
|
'error': 'Ooops, something wrong appended.'
|
|
},
|
|
error: {
|
|
'fileSize': 'The file size is too big (500MB max).'
|
|
}
|
|
});
|
|
$('.snow-editor').each((index, element) => {
|
|
let quill = new Quill('#'+$(element).attr('id'), {theme: 'snow', modules: quillmodules});
|
|
let hiddenField = $('#content-'+ $(element).attr('contentCount') )
|
|
hiddenField.val( quill.root.innerHTML );
|
|
quill.on('text-change', function(delta, oldDelta, source) {
|
|
hiddenField.val( quill.root.innerHTML );
|
|
});
|
|
});
|
|
|
|
|
|
$('.btn-remove').click(function() {
|
|
$(this).parent().parent().remove();
|
|
});
|
|
$('.btn-add-content').click(function() {
|
|
switch($(this).attr('ctype')) {
|
|
case 'text':
|
|
$('#approver-wrapper').append(`
|
|
<div class="col-md-12 mb-2">
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<label>Text Content</label>
|
|
<div id="snow-editor-${contentCount}" class="snow-editor" style="height: 300px;"></div>
|
|
</div>
|
|
<div class="col-2">
|
|
<label>Sort Order</label>
|
|
<input type="number" class="form-control" name="sortorder[${contentCount}]" value="" required>
|
|
<button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
|
|
</div>
|
|
<input type="hidden" id="content-${contentCount}" name="content[${contentCount}]" value="">
|
|
<input type="hidden" name="type[${contentCount}]" value="text">
|
|
</div>
|
|
</div>
|
|
`);
|
|
let quill = new Quill('#snow-editor-'+contentCount, {theme: 'snow', modules: quillmodules});
|
|
let hiddenField = $('#content-'+contentCount)
|
|
quill.on('text-change', function(delta, oldDelta, source) {
|
|
hiddenField.val( quill.root.innerHTML );
|
|
});
|
|
|
|
break;
|
|
case 'image':
|
|
case 'pdf':
|
|
case 'video':
|
|
$('#approver-wrapper').append(`
|
|
<div class="col-md-12 mb-2">
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<label>Upload ${$(this).attr('ctype')}</label>
|
|
<div class="mt-3" id="file_wrapper">
|
|
<input type="file" id="dropify-${contentCount}" name="content[${contentCount}]" class="dropify" data-allowed-file-extensions="png jpg jpeg gif pdf mp4" />
|
|
<p class="text-muted text-center mt-2 mb-0">500MB Max File size</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-2">
|
|
<label>Sort Order</label>
|
|
<input type="number" class="form-control" name="sortorder[${contentCount}]" value="" required>
|
|
<button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
|
|
</div>
|
|
<input type="hidden" name="type[${contentCount}]" value="${$(this).attr('ctype')}">
|
|
</div>
|
|
</div>
|
|
`);
|
|
$('#dropify-'+contentCount).dropify({
|
|
messages: {
|
|
'default': 'Drag and drop a file here or click',
|
|
'replace': 'Drag and drop or click to replace',
|
|
'remove': 'Remove',
|
|
'error': 'Ooops, something wrong appended.'
|
|
},
|
|
error: {
|
|
'fileSize': 'The file size is too big (500MB max).'
|
|
}
|
|
});
|
|
break;
|
|
case 'youtube':
|
|
$('#approver-wrapper').append(`
|
|
<div class="col-md-12 mb-2">
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<label>Youtube URL</label>
|
|
<input type="text" name="content[${contentCount}]" class="form-control" />
|
|
</div>
|
|
<div class="col-2">
|
|
<label>Sort Order</label>
|
|
<input type="number" class="form-control" name="sortorder[${contentCount}]" value="" required>
|
|
<button type="button" class="btn btn-danger waves-effect waves-light btn-remove mt-2"><i class="mdi mdi-close"></i></button>
|
|
</div>
|
|
<input type="hidden" name="type[${contentCount}]" value="youtube">
|
|
</div>
|
|
</div>
|
|
`);
|
|
break;
|
|
}
|
|
contentCount = contentCount + 1;
|
|
});
|
|
|
|
|
|
|
|
|
|
$('#btn-add-approver').click(function() {
|
|
$('#approver-wrapper').append(`
|
|
<div class="col-md-12 mb-5">
|
|
<div class="row">
|
|
<div class="col-md-3">
|
|
<select class="form-control contentType" name="contents[type][]" required>
|
|
<option value="none">None</option>
|
|
<option value="textbox">Textbox</option>
|
|
<option value="image">Image</option>
|
|
<option value="pdf">PDF</option>
|
|
<option value="video">Video</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-5 contenttextbox" style="display: none;">
|
|
<textarea name="contents[tempcontent][]" class="form-control" placeholder="Enter Content" ></textarea>
|
|
</div>
|
|
<div class="col-md-5 contentfile">
|
|
<input type="file" class="form-control" name="contents[tempcontent][]" value="" >
|
|
</div>
|
|
<div class="col-md-2">
|
|
<input type="text" class="form-control" name="contents[order][]" value="" required>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button type="button" class="btn btn-danger waves-effect waves-light btn-remove">
|
|
<i class="mdi mdi-close"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>`);
|
|
|
|
// Event listener for select element within the appended div
|
|
$('.contentType').last().change(function() {
|
|
var selectedOption = $(this).val();
|
|
var contentTextbox = $(this).closest('.row').find('.contenttextbox');
|
|
var contentFile = $(this).closest('.row').find('.contentfile');
|
|
|
|
if (selectedOption === 'textbox') {
|
|
contentTextbox.show();
|
|
contentFile.hide();
|
|
} else {
|
|
contentTextbox.hide();
|
|
contentFile.show();
|
|
}
|
|
});
|
|
});
|
|
|
|
});
|
|
</script>
|
|
@endsection
|