@extends('template.'.\Setting::get('template', 'default').'.content.dashboard.app')
@section('content')
<div class="admin-header">
<div class="admin-header" style="margin-bottom:0px !important;">
<div class="container">
<h1><i class="fal fa-plus"></i> {{ __('admin-content.create-new-' . $type_id) }}</h1>
</div>
</div>
<section>
<div class="modal fade" id="addAction" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="post" onsubmit="addAction();" id="add-action">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create new action</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="type">Action type</label>
<select class="form-control" id="type" onchange="changeTypeAction()" name="type" required="required">
<option value="1">Webhook</option>
<option value="2">E-mail</option>
<option value="3">Donation</option>
<option value="4">Link</option>
</select>
</div>
<div class="form-group"><label for="action_name">Action name</label><input type="text" required="required" class="form-control" id="action_name" placeholder="Action name" name="action_name"></div>
<div class="form-group"><label for="action_description">Action description</label><input type="text" class="form-control" id="action_description" placeholder="Action description" name="action_description"></div>
<div class="form-group"><label for="action_icon">Action icon</label><input type="text" required="required" class="form-control" id="action_icon" placeholder="Action icon" name="action_icon"></div>
<div class="form-group">
<label for="action_color">Action color</label>
<select class="form-control" id="action_color" name="action_color" required="required">
<option value="primary">Primary</option>
<option value="secondary">Secondary</option>
<option value="success">Success</option>
<option value="danger">Danger</option>
<option value="warning">Warning</option>
<option value="info">Info</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div class="form-group"><label for="action_amount">Action amount</label><input type="number" required="required" class="form-control" id="action_amount" placeholder="Action amount" name="action_amount"></div>
<div class="form-group"><label for="action_target">Action target url</label><input type="url" required="required" class="form-control" id="action_target" placeholder="Action target url" name="action_webhook"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal fade" id="editAction" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form method="post" onsubmit="editAction();" id="edit-action">
<input type="hidden" name="pos" value="" />
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit action</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="type">Action type</label>
<select class="form-control" onchange="changeTypeActionEdit()" id="editType" name="type" required="required">
<option value="1">Webhook</option>
<option value="2">E-mail</option>
<option value="3">Donation</option>
<option value="4">Link</option>
</select>
</div>
<div class="form-group"><label for="action_name">Action name</label><input type="text" required="required" class="form-control" id="edit_action_name" placeholder="Action name" name="action_name"></div>
<div class="form-group"><label for="action_description">Action description</label><input type="text" class="form-control" id="edit_action_description" placeholder="Action description" name="action_description"></div>
<div class="form-group"><label for="action_icon">Action icon</label><input type="text" required="required" class="form-control" id="edit_action_icon" placeholder="Action icon" name="action_icon"></div>
<div class="form-group">
<label for="action_color">Action color</label>
<select class="form-control" id="edit_action_color" name="action_color" required="required">
<option value="primary">Primary</option>
<option value="secondary">Secondary</option>
<option value="success">Success</option>
<option value="danger">Danger</option>
<option value="warning">Warning</option>
<option value="info">Info</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</div>
<div class="form-group"><label for="action_amount">Action amount</label><input type="number" required="required" class="form-control" id="edit_action_amount" placeholder="Action amount" name="action_amount"></div>
<div class="form-group"><label for="edit_action_target">Action target url</label><input type="url" required="required" class="form-control" id="edit_action_target" placeholder="Action target url" name="action_webhook"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<form action="{{route('dashboard.AddNachrichten')}}" method="post" enctype="multipart/form-data">
@csrf
<input type="hidden" id="nach_id" required="required" value="", name="nach_id">
<input type="hidden" name="type_id" value="{{ $type_id }}" />
<!--<h5 style="margin-bottom:20px;"><i class="fal fa-caret-circle-down"></i> {{ __('admin-content.select-type') }}</h5>
<div class="form-group" style="margin-bottom:30px;">
<select class="form-control" id="type_id" name="type_id" required="required" onchange="changeType(this.value)">
<option value="">Wählen Sie eine Option</option>
@foreach ($types as $type)
<option value="{{ $type->id }}" {{ $type->id == 1 ? 'selected' : '' }}>{{ $type->name }}</option>
@endforeach
</select>
</div>
<hr>-->
<h5 style="margin-top:20px;margin-bottom:20px;"><i class="fal fa-newspaper"></i> {{ __('admin-content.content-news') }}</h5>
<div class="row">
<div class="col-12 col-md-4">
<a style="cursor:pointer;" class="img-content" onclick="clickImgContent();">
<div class="upload-img ci-color bg-ci" style="border: 1px solid; width: 100% ; height: 100%; opacity: 0.1;">
<i class="fal fa-upload"></i>
<br>
<h5 class="text-center" style="color: #6f42c1">Bild hochladen</h5>
</div>
</a>
<div class="form-group" style="display: none;">
<input type="file" id="exampleFormControlInputImage" name="image" class="form-control">
</div>
</div>
<div class="col-12 col-md-7 offset-1">
<div class="form-group">
<label for="exampleFormControlInput1">{{ __('admin-content.content-title') }}</label>
<input type="text" class="form-control" id="title" placeholder="{{ __('admin-content.content-title') }}" name="title" required="required">
</div>
<div class="form-group">
<label for="category_id">{{ __('admin-content.category') }}</label>
@if (auth()->user()->role->id > 2 and !empty(auth()->user()->category))
<input type="text" class="form-control" value="{{ auth()->user()->category->name }}" id="category_id" readonly="readonly">
<input type="hidden" name="category_id" value="{{ auth()->user()->default_category_id }}" />
@else
<select class="form-control" id="category_id" name="category_id" required="required">
<option value="">{{ __('admin-content.select-category') }}</option>
@foreach ($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
@endif
</div>
@if (\Setting::get('lnd_status'))
<h6 class="ci-color"><i class="fal fa-gem"></i> Define as Premium Content</h6>
<div class="form-group" style="margin-bottom: 55px;margin-top:15px;">
<div class="custom-control custom-switch float-left">
<input type="checkbox" disabled name="paid" class="custom-control-input" id="paid" value="1">
<label class="custom-control-label" for="paid">Ja</label>
</div>
</div>
@endif
<div class="form-amount"></div>
</div>
</div>
<!--<div class="form-group">
<label for="category">Category</label>
<select class="form-control" id="category" name="category" required="required" onchange="category_change(this.value, 1)">
<option value="news">News</option>
<option value="angebote">Angebote</option>
</select>
</div>-->
<div id="additional_fields_create">
@if ($type_id == 2)
<div class="form-group"><label for="workplace">Arbeitsort</label><input type="text" class="form-control" id="workplace" placeholder="Arbeitsort" name="additional_fields[workplace]"></div>
<div class="form-group"><label for="contact_info">Kontaktdaten</label><textarea class="form-control" id="contact_info" name="additional_fields[contact_info]" rows="3" placeholder="Kontaktdaten"></textarea></div>
@endif
</div>
@if ($type_id == 3)
<div id="action" style="margin-top:10px;">
<br>
<hr>
<br>
<h5 style="margin-top:20px;margin-bottom:20px;"><i class="fal fa-play-circle"></i> Action Buttons <a href="" data-toggle="modal" data-target="#addAction" class="float-right"><i class="fal fa-plus"></i> Create new Action</a></h5>
<div class="row">
<table class="table table-borderless table-actions">
<thead>
<tr>
<th scope="col">Preview Button</th>
<th scope="col">Action Type</th>
<th scope="col">Action Target</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="row" style="margin-bottom:30px;">
<div class="col-lg-12">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" name="show_total_paid_action" value="1" id="show_total_paid_action">
<label class="custom-control-label" for="show_total_paid_action">Display already paid amount to User</label>
</div>
</div>
<div class="col-lg-12">
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Actions to behave as switch</label>
</div>
</div>
</div>
<br>
<br>
<hr>
</div>
@endif
<br>
<div class="form-group">
<h5> {{ __('admin-content.content-text') }}</h5>
</div>
<textarea class="form-control" id="nachrichten_2" rows="3" placeholder="Nachrichten Text" name="nachrichten" required="required"></textarea>
<br>
<label for="exampleFormControlTextarea1">{{ __('admin-content.content-files') }}</label>
<br>
<div class="col-md-6" style="margin-bottom:20px;">
<input type="file" class="form-control" id="images" name="files[]" onchange="preview_images();" multiple/>
</div>
<div class="form-group" style="margin-top:20px;">
<div class="custom-control custom-switch float-left" style="display: block;">
<input type="checkbox" name="publish" onchange="changePublish(this);" class="custom-control-input" id="publish" value="1">
<label class="custom-control-label" for="publish">Schedule publication</label>
</div>
</div>
<div class="box-publish" style="display: none;margin-top:60px">
<div class="form-group">
<label for="publish_at">{{ __('admin-content.content-publish') }}</label>
<input type="date" class="form-control" id="publish_at" placeholder="{{ __('admin-content.content-publish') }}" name="publish_at">
</div>
</div>
<br>
<br>
<br>
<button type="submit" class="btn btn-primary float-right">
<i class="fal fa-save"></i>
Beitrag veröffentlihcen
</button>
</form>
</div>
</div>
</div>
</section>
<script src="https://cdn.tiny.cloud/1/0015awrvvurgnwz3e0uid83chhzb7lnbi6wyn4ukk7b4lh9k/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="{{ asset('system/js/tiny-de.js') }}"></script>
<script>
function clickImgContent()
{
document.getElementById('exampleFormControlInputImage').click();
}
document.getElementById('exampleFormControlInputImage').addEventListener('change', readURL, true);
function readURL(){
var file = document.getElementById("exampleFormControlInputImage").files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('img-content-fluid').setAttribute("src", reader.result);
//document.getElementById('clock').style.backgroundImage = "url(" + reader.result + ")";
}
if(file){
reader.readAsDataURL(file);
}else{
}
}
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox").length) {
e.stopImmediatePropagation();
}
});
</script>
<script>
function changeTypeAction()
{
var value = $('#type').val();
if (value == 1) {
$('[for="action_target"]').css('display', 'block').text('Action target url');
$('#action_target').css('display', 'block').attr('type', 'url').attr('placeholder', 'Action target url').attr('required', 'required');
}
if (value == 2) {
$('[for="action_target"]').css('display', 'block').text('Action target email');
$('#action_target').css('display', 'block').attr('type', 'email').attr('placeholder', 'Action target email').attr('required', 'required');
}
if (value == 4) {
$('[for="action_target"]').css('display', 'block').text('Action target url');
$('#action_target').css('display', 'block').attr('type', 'url').attr('placeholder', 'Action target url').attr('required', 'required');
}
if (value == 3) {
$('[for="action_target"]').css('display', 'none');
$('#action_target').css('display', 'none').removeAttr('required');
}
}
function changeTypeActionEdit()
{
var value = $('#editType').val();
if (value == 1) {
$('[for="edit_action_target"]').css('display', 'block').text('Action target url');
$('#edit_action_target').css('display', 'block').attr('type', 'url').attr('placeholder', 'Action target url').attr('required', 'required');
}
if (value == 2) {
$('[for="edit_action_target"]').css('display', 'block').text('Action target email');
$('#edit_action_target').css('display', 'block').attr('type', 'email').attr('placeholder', 'Action target email').attr('required', 'required');
}
if (value == 4) {
$('[for="edit_action_target"]').css('display', 'block').text('Action target url');
$('#edit_action_target').css('display', 'block').attr('type', 'url').attr('placeholder', 'Action target url').attr('required', 'required');
}
if (value == 3) {
$('[for="edit_action_target"]').css('display', 'none');
$('#edit_action_target').css('display', 'none').removeAttr('required');
}
}
function addAction()
{
event.preventDefault();
var pos = $('.table-actions tbody tr:last').attr('id');
if (!pos) {
var pos = 1;
} else {
var pos = parseInt(pos) + 1;
}
if (!$('#action_target').val()) {
target = '';
} else {
target = $('#action_target').val();
}
var html_content = '<tr id="'+pos+'">';
html_content += '<input type="hidden" name="action['+pos+'][icon]" value="'+$('#action_icon').val()+'"/>';
html_content += '<input type="hidden" name="action['+pos+'][color]" value="'+$('#action_color').val()+'"/>';
html_content += '<input type="hidden" name="action['+pos+'][amount]" value="'+$('#action_amount').val()+'"/>';
html_content += '<input type="hidden" name="action['+pos+'][name]" value="'+$('#action_name').val()+'"/>';
html_content += '<input type="hidden" name="action['+pos+'][description]" value="'+$('#action_description').val()+'"/>';
html_content += '<td><a class="btn btn-'+$('#action_color').val()+'" style="color:white"> <i class="fal fa-'+$('#action_icon').val()+'"></i> '+$('#action_name').val()+' for '+$('#action_amount').val()+' sats</a></td>';
html_content += '<td>'+$( "#type option:selected" ).text()+'<input type="hidden" name="action['+pos+'][type]" value="'+$('#type').val()+'"/></td>';
html_content += '<td>'+target+'<input type="hidden" name="action['+pos+'][target]" value="'+target+'"/></td>';
html_content += '<td class="float-right"><a href="" onclick="openEditAction('+pos+')" data-id="'+pos+'"><i class="fal fa-edit"></i></a> | <a href="" onclick="removeAction('+pos+')" data-id="'+pos+'"><i class="fad fa-trash" style="color: red;cursor:pointer;"></i></a></td>';
html_content += '</tr>';
$('.table-actions tbody').append(html_content);
$('#add-action')[0].reset();
$('.modal').modal('hide');
}
function removeAction(id)
{
event.preventDefault();
$('#' + id).remove();
}
function openEditAction(id)
{
event.preventDefault();
$('[name="pos"]').val(id);
$('#editType').val($('[name="action['+id+'][type]"]').val());
$('#edit_action_name').val($('[name="action['+id+'][name]"]').val());
$('#edit_action_description').val($('[name="action['+id+'][description]"]').val());
$('#edit_action_icon').val($('[name="action['+id+'][icon]"]').val());
$('#edit_action_color').val($('[name="action['+id+'][color]"]').val());
$('#edit_action_amount').val($('[name="action['+id+'][amount]"]').val());
$('#edit_action_target').val($('[name="action['+id+'][target]"]').val());
changeTypeActionEdit();
$('#editAction').modal('toggle');
}
function editAction()
{
event.preventDefault();
var pos = $('[name="pos"]').val();
if (!$('#edit_action_target').val()) {
target = '';
} else {
target = $('#edit_action_target').val();
}
var html_content = '<tr id="'+pos+'">';
html_content += '<input type="hidden" name="action['+pos+'][icon]" value="'+$('#edit_action_icon').val()+'"/>';
html_content += '<input type="hidden" name="action['+pos+'][color]" value="'+$('#edit_action_color').val()+'"/>';
html_content += '<input type="hidden" name="action['+pos+'][amount]" value="'+$('#edit_action_amount').val()+'"/>';
html_content += '<input type="hidden" name="action['+pos+'][name]" value="'+$('#edit_action_name').val()+'"/>';
html_content += '<input type="hidden" name="action['+pos+'][description]" value="'+$('#edit_action_description').val()+'"/>';
html_content += '<td><a class="btn btn-'+$('#edit_action_color').val()+'" style="color:white"> <i class="fal fa-'+$('#edit_action_icon').val()+'"></i> '+$('#edit_action_name').val()+' for '+$('#edit_action_amount').val()+' sats</a></td>';
html_content += '<td>'+$( "#editType option:selected" ).text()+'<input type="hidden" name="action['+pos+'][type]" value="'+$('#editType').val()+'"/></td>';
html_content += '<td>'+target+'<input type="hidden" name="action['+pos+'][target]" value="'+target+'"/></td>';
html_content += '<td class="float-right"><a href="" onclick="openEditAction('+pos+')" data-id="'+pos+'"><i class="fal fa-edit"></i></a> | <a href="" onclick="removeAction('+pos+')" data-id="'+pos+'"><i class="fad fa-trash" style="color: red;cursor:pointer;"></i></a></td>';
html_content += '</tr>';
$('#' + pos).remove();
$('.table-actions tbody').append(html_content);
$('#edit-action')[0].reset();
$('.modal').modal('hide');
}
function changePaid(event)
{
if ($("#paid").prop("checked")) {
var data_html = '<div class="form-group"><label for="paidAmount">Bezahlbarer Betrag</label><input type="number" class="form-control" id="paidAmount" value="1000" placeholder="Bezahlbarer Betrag" name="paidAmount" required="required" min="1" step="1"></div>';
data_html += '<div class="form-group"><label for="premium_until">Premium Until</label><input type="date" class="form-control" id="premium_until" placeholder="Premium Until" name="premium_until"></div>';
$('.form-amount').html(data_html);
} else {
$('.form-amount').empty();
}
}
function changePublish(event) {
if ($("#publish").prop("checked")) {
$('.box-publish').css('display', 'block');
$('#publish_at').attr('required', 'required');
} else {
$('.box-publish').css('display', 'none');
$('#publish_at').removeAttr('required');
}
}
function changePaid2(event)
{
if (event.value == 1) {
var data_html = '<div class="form-group"><label for="paidAmount">Bezahlbarer Betrag</label><input type="number" class="form-control" id="paidAmount" value="1000" placeholder="Bezahlbarer Betrag" name="paidAmount" required="required"></div>';
data_html += '<div class="form-group"><label for="premium_until">Premium Until</label><input type="date" class="form-control" id="premium_until" placeholder="Premium Until" name="premium_until"></div>';
$('.form-amount2').html(data_html);
} else {
$('.form-amount2').empty();
}
}
</script>
<script>
function changeType(event) {
var type = event;
$('#additional_fields_create').empty();
$('#action').css('display', 'none');
if (type == 2) {
var data_html_type = '<div class="form-group"><label for="workplace">Arbeitsort</label><input type="text" class="form-control" id="workplace" placeholder="Arbeitsort" name="additional_fields[workplace]"></div>';
data_html_type += '<div class="form-group"><label for="contact_info">Kontaktdaten</label><textarea class="form-control" id="contact_info" name="additional_fields[contact_info]" rows="3" placeholder="Kontaktdaten"></textarea></div>';
$('#additional_fields_create').html(data_html_type);
}
if (type == 3) {
/*var data_html_type = '<div class="form-group"><label for="action_name">Action name</label><input type="text" class="form-control" id="action_name" placeholder="Action name" name="action_name"></div>';
data_html_type += '<div class="form-group"><label for="action_description">Action description</label><input type="text" class="form-control" id="action_description" placeholder="Action description" name="action_description"></div>';
data_html_type += '<div class="form-group"><label for="action_icon">Action icon</label><input type="text" class="form-control" id="action_icon" placeholder="Action icon" name="action_icon"></div>';
data_html_type += '<div class="form-group"><label for="action_amount">Action amount</label><input type="number" class="form-control" id="action_amount" placeholder="Action amount" name="action_amount"></div>';
data_html_type += '<div class="form-group"><label for="action_webhook">Action URL Webhook</label><input type="text" class="form-control" id="action_webhook" placeholder="Action URL Webhook" name="action_webhook"></div>';
$('#additional_fields_create').html(data_html_type);*/
$('#action').css('display', 'block');
}
}
tinymce.init({
selector : "#nachrichten_2",
plugins: 'advlist link image lists',
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link | unlink | image',
height: '250',
directionality : 'de',
language : 'de',
setup: function (editor) {
editor.on('change', function (e) {
editor.save();
});
}
});
function category_change(category, create) {
if (category !== 'angebote') {
if (create == 1) {
document.getElementById('contact_info_2').disabled = 'disabled';
tinymce.remove("#contact_info_2");
} else {
document.getElementById('contact_info').disabled = 'disabled';
tinymce.remove("#contact_info");
}
} else {
if (create == 1) {
document.getElementById('contact_info_2').disabled = false;
tinymce.init({
selector : "#contact_info_2",
plugins: 'advlist link image lists',
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link | unlink | image',
height: '250',
directionality : 'de',
language : 'de',
setup: function (editor) {
editor.on('change', function (e) {
editor.save();
});
}
});
} else {
document.getElementById('contact_info').disabled = false;
tinymce.init({
selector : "#contact_info",
plugins: 'advlist link image lists',
toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | outdent indent | link | unlink | image',
height: '250',
directionality : 'de',
language : 'de',
setup: function (editor) {
editor.on('change', function (e) {
editor.save();
});
}
});
}
$(document).on('focusin', function(e) {
if ($(e.target).closest(".tox").length) {
e.stopImmediatePropagation();
}
});
}
}
</script>
</div>
@stop