334 lines
21 KiB
PHP
334 lines
21 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" />
|
|
<!-- 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" action="{{url()->current()}}" 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 {{ !empty($props['workflow_only']) ? 'workflow-config-field' : '' }}" id="field-wrapper-{{$field}}">
|
|
<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('tel')
|
|
@case('date')
|
|
<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':'' }}>
|
|
@break
|
|
@case('number')
|
|
@php
|
|
$__numVal = '';
|
|
if ($mode == 'edit' && isset($item->{$field})) {
|
|
$__numVal = $item->{$field};
|
|
} elseif (isset($item->{$field})) {
|
|
$__numVal = $item->{$field};
|
|
} elseif (isset($props['default'])) {
|
|
$__numVal = $props['default'];
|
|
}
|
|
@endphp
|
|
<input type="number" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{ $__numVal }}" {{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}}" {{isset($item->{$field}) && $item->{$field} == $k ? 'selected="selected"':''}}>{{$v}}</option>
|
|
@endforeach
|
|
</select>
|
|
@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')
|
|
@php
|
|
$__yn = null;
|
|
if (isset($item->{$field})) {
|
|
$__yn = $item->{$field};
|
|
} elseif (isset($props['default'])) {
|
|
$__yn = $props['default'];
|
|
}
|
|
@endphp
|
|
<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" {{$__yn === '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" {{$__yn === 'no' ? 'checked' : ''}}>
|
|
<label class="form-check-label" for="field-{{$field}}-no">No</label>
|
|
</div>
|
|
</div>
|
|
@break
|
|
@case('datalist')
|
|
@php
|
|
$__dlVal = '';
|
|
if (isset($item->{$field})) {
|
|
$__dlVal = $item->{$field};
|
|
} elseif (isset($props['default'])) {
|
|
$__dlVal = $props['default'];
|
|
}
|
|
@endphp
|
|
<input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control" list="datalist-{{$field}}" placeholder="{{ $props['placeholder'] ?? 'Pick existing or type a new value' }}" value="{{ $__dlVal }}" {{isset($props['required'])&&$props['required']?'required':'' }}>
|
|
<datalist id="datalist-{{$field}}">
|
|
@foreach(($props['values'] ?? []) as $k => $v)
|
|
<option value="{{ $k }}">{{ $v !== $k ? $v : '' }}</option>
|
|
@endforeach
|
|
</datalist>
|
|
@break
|
|
@case('image')
|
|
<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" />
|
|
<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')
|
|
@if(isset($props['approvers']))
|
|
<div class="col-md-12"><button type="button" class="btn btn-info btn-xs float-end btn-add-workflow-approver">Add Approver</button></div>
|
|
<div id="workflow-approver-wrapper" class="row">
|
|
@php
|
|
$__wfApprovers = ($mode == 'edit' && isset($item->{$field}) && is_array($item->{$field})) ? $item->{$field} : ['l1manager'];
|
|
@endphp
|
|
@foreach($__wfApprovers as $map)
|
|
<div class="col-md-6 mb-2 workflow-approver-row">
|
|
<div class="row">
|
|
<div class="col-10">
|
|
<select class="form-control" name="workflow_approvers[]">
|
|
<option value=""> -- Select Approver -- </option>
|
|
@foreach($props['approvers'] as $k => $v)
|
|
<option value="{{$k}}" {{$map == $k ? 'selected="selected"':''}}>{{$v}}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="col-2">
|
|
<button type="button" class="btn btn-danger waves-effect waves-light btn-remove-workflow-approver"><i class="mdi mdi-close"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
<div class="col-md-12"><button type="button" class="btn btn-info btn-xs float-end" id="btn-add-approver">Add Option</button></div>
|
|
<div id="approver-wrapper" class="row">
|
|
<div class="col-md-12 mb-2">
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<label>Option Value</label>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<label>Option Display</label>
|
|
</div>
|
|
<div class="col-2">
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@if($mode=='edit')
|
|
@foreach($item->{$field} as $map)
|
|
<div class="col-md-12 mb-2">
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<input type="text" class="form-control" name="option_value[]" value="{{$map->value}}" required>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<input type="text" class="form-control" name="option_name[]" value="{{$map->display}}" 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>
|
|
@endif
|
|
@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 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).'
|
|
}
|
|
});
|
|
|
|
function toggleWorkflowFields() {
|
|
var enabled = $('input[name="workflow"]:checked').val() === 'yes';
|
|
$('.workflow-config-field').each(function() {
|
|
var $section = $(this);
|
|
$section.toggle(enabled);
|
|
$section.find('input, select, textarea').each(function() {
|
|
var $el = $(this);
|
|
if (!enabled) {
|
|
if ($el.prop('required')) {
|
|
$el.attr('data-was-required', '1');
|
|
}
|
|
$el.prop({ required: false, disabled: true });
|
|
} else {
|
|
$el.prop('disabled', false);
|
|
if ($el.attr('data-was-required')) {
|
|
$el.prop('required', true);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
toggleWorkflowFields();
|
|
$('input[name="workflow"]').change(toggleWorkflowFields);
|
|
|
|
@if($mode=='edit' && in_array($item->type, ['select', 'checkbox', 'radio']))
|
|
$('#approver-wrapper').show();
|
|
@else
|
|
$('#approver-wrapper').hide();
|
|
@endif
|
|
$('#field-type').change(function(){
|
|
if($(this).val() == 'select' || $(this).val() == 'checkbox' || $(this).val() == 'radio' ) {
|
|
$('#approver-wrapper').show();
|
|
} else {
|
|
$('#approver-wrapper').hide();
|
|
}
|
|
});
|
|
|
|
var workflowApproverOptions = @json(collect($fields['workflow_approvers']['approvers'] ?? []));
|
|
|
|
function bindWorkflowApproverRemove() {
|
|
$('.btn-remove-workflow-approver').off('click').on('click', function(){
|
|
$(this).closest('.workflow-approver-row').remove();
|
|
});
|
|
}
|
|
bindWorkflowApproverRemove();
|
|
|
|
$('.btn-add-workflow-approver').click(function(){
|
|
var optionsHtml = '<option value=""> -- Select Approver -- </option>';
|
|
$.each(workflowApproverOptions, function(k, v) {
|
|
optionsHtml += '<option value="' + k + '">' + v + '</option>';
|
|
});
|
|
$('#workflow-approver-wrapper').append(
|
|
'<div class="col-md-6 mb-2 workflow-approver-row">' +
|
|
'<div class="row">' +
|
|
'<div class="col-10">' +
|
|
'<select class="form-control" name="workflow_approvers[]">' + optionsHtml + '</select>' +
|
|
'</div>' +
|
|
'<div class="col-2">' +
|
|
'<button type="button" class="btn btn-danger waves-effect waves-light btn-remove-workflow-approver"><i class="mdi mdi-close"></i></button>' +
|
|
'</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
bindWorkflowApproverRemove();
|
|
});
|
|
|
|
$('#btn-add-approver').click(function(){
|
|
$('#approver-wrapper').append(`<div class="col-md-12 mb-2">
|
|
<div class="row">
|
|
<div class="col-md-5">
|
|
<input type="text" class="form-control" name="option_value[]" required>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<input type="text" class="form-control" name="option_name[]" 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>`);
|
|
|
|
$('.btn-remove').unbind();
|
|
$('.btn-remove').click(function(){
|
|
$(this).parent().parent().remove();
|
|
});
|
|
$('.cust-date').unbind();
|
|
$('.cust-date').flatpickr();
|
|
});
|
|
|
|
});
|
|
</script>
|
|
@endsection |