Rapport-Laravel/resources/views/articlesbank/form.blade.php

371 lines
24 KiB
PHP

@extends('layouts.vertical', ['page_title' => 'Add & Edit Products'])
@section('css')
<!-- third party css -->
<link href="{{ asset('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/multiselect/multiselect.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('assets/libs/dropify/dropify.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet"
type="text/css" />
<link href="{{ asset('assets/libs/flatpickr/flatpickr.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"><button type="button" class="btn btn-info btn-xs float-end"
id="btn-add-approver">Add Reminder</button></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>
@if ($mode == 'edit')
@foreach ($item->contents->content as $key => $content)
<div class="col-md-12 mb-5">
<div class="row">
<div class="col-md-3">
<select class="form-control" name="contents[type][]" required>
<option value="none">None</option>
<option value="textbox"
{{ $item->contents->type[$key] == 'textbox' ? 'selected' : '' }}>
Textbox</option>
<option value="image"
{{ $item->contents->type[$key] == 'image' ? 'selected' : '' }}>
Image</option>
<option value="pdf"
{{ $item->contents->type[$key] == 'pdf' ? 'selected' : '' }}>
PDF</option>
<option value="video"
{{ $item->contents->type[$key] == 'video' ? 'selected' : '' }}>
Video</option>
</select>
</div>
@if($item->contents->type[$key] == 'textbox')
<div class="col-md-4">
<input type="text" class="form-control"
name="contents[tempcontent][]"
value="{{ $content }}" required>
</div>
@else
<div class="col-md-4">
<input type="file" class="form-control"
name="contents[tempcontent][]" value="{{$content}}" required>
</div>
@endif
<div class="col-md-3">
<input type="text" class="form-control"
name="contents[order][]"
value="{{ $item->contents->order[$key] }}" required>
</div>
<div class="col-2">
<button type="button"
class="btn btn-danger waves-effect waves-light btn-remove"><i
class="mdi mdi-close"></i></button>
</div>
</div>
</div>
@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="{{ asset('assets/libs/select2/select2.min.js') }}"></script>
<script src="{{ asset('assets/libs/multiselect/multiselect.min.js') }}"></script>
<script src="{{ asset('assets/libs/multiselect/jquery.quicksearch.js') }}"></script>
<script src="{{ URL::asset('assets/libs/dropify/dropify.min.js') }}"></script>
<script src="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('assets/libs/flatpickr/flatpickr.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$('[data-toggle="select2"]').select2();
$('.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).'
}
});
$('.24hours-timepicker').flatpickr({
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true
});
$('.btn-remove').click(function() {
$(this).parent().parent().remove();
});
$('#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