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

464 lines
35 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@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" 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>
@if($mode=='edit' && isset($item->is_personalized) && $item->is_personalized == 'yes' )
<a href="/formpersonalizations?form={{$item->id}}" class="btn btn-dark waves-effect waves-light">Personalisations</a>
@endif
<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">
@if(empty($props['hide_label']))
<label for="field-{{$field}}" class="form-label">{{$props['title']}} {!!isset($props['required'])&&$props['required'] ? '<span class="text-danger">*</span>':''!!} </label>
@endif
@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')
@case('date')
<input type="{{$props['type']}}" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit'?($item->{$field} ?? ''):''}}" {{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'?($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('multiselect')
@php
$multiSelected = [];
if (is_object($item ?? null) && isset($item->{$field}) && is_array($item->{$field})) {
$multiSelected = $item->{$field};
} elseif ($mode !== 'edit' && isset($props['default']) && is_array($props['default'])) {
$multiSelected = $props['default'];
}
@endphp
<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}}" {{ in_array($k, $multiSelected) ? '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' && isset($item->{$field}) && in_array($k, $item->{$field}) ? 'selected="selected"':''}}>{{$v}}</option>
@endforeach
</select>
@break
@case('yesno')
@php
$yesnoDefault = $props['default'] ?? 'no';
$yesnoValue = $mode === 'edit'
? ($item->{$field} ?? $yesnoDefault)
: $yesnoDefault;
@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" {{ $yesnoValue === '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" {{ $yesnoValue === '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'?($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')
<div class="col-md-12"><button type="button" class="btn btn-info btn-xs float-end" id="btn-add-approver">Add Approver</button></div>
<div id="approver-wrapper" class="row">
@if($mode=='edit')
@foreach(($item->{$field} ?? []) as $map)
<div class="col-md-6 mb-2">
<div class="row">
<div class="col-10">
<select class="form-control" name="workflow_approvers[]" required>
<option value=""> -- Select Metric -- </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"><i class="mdi mdi-close"></i></button>
</div>
</div>
</div>
@endforeach
@else
<div class="col-md-6 mb-2">
<div class="row">
<div class="col-10">
<select class="form-control" name="workflow_approvers[]" required>
<option value=""> -- Select Metric -- </option>
@foreach($props['approvers'] as $k => $v)
<option value="{{$k}}">{{$v}}</option>
@endforeach
</select>
</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>
@endif
</div>
@break
@case('email_notifications')
@php
$emailRules = $mode === 'edit'
? ($item->email_notification_rules ?? [])
: [];
if (is_string($emailRules) && $emailRules !== '') {
$emailRules = json_decode($emailRules, true) ?: [];
}
if (!is_array($emailRules) || count($emailRules) === 0) {
$emailRules = [[
'enabled' => 'yes',
'manager_levels' => [],
'role_ids' => [],
'selected_users' => [],
'condition' => '',
'subject' => '',
'body' => '',
]];
}
$emailNotificationEnabled = $mode === 'edit'
? (($item->email_notification ?? 'no') === 'yes')
: false;
@endphp
<div id="email-notification-rules-panel" class="{{ $emailNotificationEnabled ? '' : 'd-none' }}">
<div class="col-md-12">
<p class="text-muted small mb-2">
Configure emails sent on form submission. Select L1–L4 managers, roles, and/or individual users.
Use JSON conditions (same format as Auto Approve Condition). Placeholders:
<code>{RECIPIENT_NAME}</code>, <code>{FORM_NAME}</code>, <code>{USER_NAME}</code>.
</p>
<button type="button" class="btn btn-info btn-xs float-end" id="btn-add-email-rule">Add Email Rule</button>
</div>
<div id="email-notification-rules-wrapper" class="col-md-12">
@foreach($emailRules as $ruleIndex => $rule)
@php
$rule = (array) $rule;
$ruleEnabled = ($rule['enabled'] ?? 'yes') === 'no' ? 'no' : 'yes';
$ruleManagerLevels = (array) ($rule['manager_levels'] ?? []);
$ruleRoleIds = (array) ($rule['role_ids'] ?? []);
$ruleSelectedUsers = (array) ($rule['selected_users'] ?? []);
$ruleCondition = $rule['condition'] ?? '';
if (is_array($ruleCondition)) {
$ruleCondition = json_encode($ruleCondition, JSON_PRETTY_PRINT);
}
@endphp
<div class="card border mb-3 email-notification-rule" data-rule-index="{{ $ruleIndex }}">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0">Email Rule <span class="rule-number">{{ $ruleIndex + 1 }}</span></h5>
<button type="button" class="btn btn-danger btn-sm btn-remove-email-rule">
<i class="mdi mdi-close"></i> Remove
</button>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<label class="form-label">Enabled</label>
<div>
<div class="form-check form-check-inline form-check-success">
<input class="form-check-input" type="radio" name="email_notification_rules[{{ $ruleIndex }}][enabled]" value="yes" {{ $ruleEnabled === 'yes' ? 'checked' : '' }}>
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline form-check-danger">
<input class="form-check-input" type="radio" name="email_notification_rules[{{ $ruleIndex }}][enabled]" value="no" {{ $ruleEnabled === 'no' ? 'checked' : '' }}>
<label class="form-check-label">No</label>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Notify Manager Levels</label>
<select class="form-control select2-multiple email-rule-managers" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[{{ $ruleIndex }}][manager_levels][]" data-placeholder="Choose manager levels">
@foreach($props['manager_levels'] as $levelKey => $levelLabel)
<option value="{{ $levelKey }}" {{ in_array($levelKey, $ruleManagerLevels, true) ? 'selected' : '' }}>{{ $levelLabel }}</option>
@endforeach
</select>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Notify Roles</label>
<select class="form-control select2-multiple email-rule-roles" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[{{ $ruleIndex }}][role_ids][]" data-placeholder="Choose roles">
@foreach($props['roles'] as $roleId => $roleName)
<option value="{{ $roleId }}" {{ in_array($roleId, $ruleRoleIds, true) ? 'selected' : '' }}>{{ $roleName }}</option>
@endforeach
</select>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Notify Users</label>
<select class="form-control select2-multiple email-rule-users" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[{{ $ruleIndex }}][selected_users][]" data-placeholder="Choose users">
@foreach(($props['users'] ?? []) as $userId => $userLabel)
<option value="{{ $userId }}" {{ in_array($userId, $ruleSelectedUsers, true) ? 'selected' : '' }}>{{ $userLabel }}</option>
@endforeach
</select>
</div>
<div class="col-md-12 mb-3">
<label class="form-label">Condition (JSON)</label>
<textarea class="form-control font-monospace" rows="4" name="email_notification_rules[{{ $ruleIndex }}][condition]" placeholder='{"AND":[{"attribute":"field_code","operator":"eq","value":"Yes"}]}'>{{ $ruleCondition }}</textarea>
<small class="text-muted">Leave empty to always send when enabled. Operators: exists, has_value, eq, neq, gt, lt, gte, lte, includes.</small>
</div>
<div class="col-md-12 mb-3">
<label class="form-label">Email Subject</label>
<input type="text" class="form-control" name="email_notification_rules[{{ $ruleIndex }}][subject]" value="{{ $rule['subject'] ?? '' }}" placeholder="Submission alert for {RECIPIENT_NAME}">
</div>
<div class="col-md-12 mb-3">
<label class="form-label">Email Body</label>
<textarea class="form-control" rows="5" name="email_notification_rules[{{ $ruleIndex }}][body]" placeholder="Dear {RECIPIENT_NAME},&#10;&#10;{USER_NAME} has submitted {FORM_NAME}.">{{ $rule['body'] ?? '' }}</textarea>
</div>
</div>
</div>
</div>
@endforeach
</div>
<template id="email-notification-rule-template">
<div class="card border mb-3 email-notification-rule" data-rule-index="__INDEX__">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h5 class="card-title mb-0">Email Rule <span class="rule-number">__NUMBER__</span></h5>
<button type="button" class="btn btn-danger btn-sm btn-remove-email-rule">
<i class="mdi mdi-close"></i> Remove
</button>
</div>
<div class="row">
<div class="col-md-12 mb-3">
<label class="form-label">Enabled</label>
<div>
<div class="form-check form-check-inline form-check-success">
<input class="form-check-input" type="radio" name="email_notification_rules[__INDEX__][enabled]" value="yes" checked>
<label class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline form-check-danger">
<input class="form-check-input" type="radio" name="email_notification_rules[__INDEX__][enabled]" value="no">
<label class="form-check-label">No</label>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Notify Manager Levels</label>
<select class="form-control select2-multiple email-rule-managers" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[__INDEX__][manager_levels][]" data-placeholder="Choose manager levels">
@foreach($props['manager_levels'] as $levelKey => $levelLabel)
<option value="{{ $levelKey }}">{{ $levelLabel }}</option>
@endforeach
</select>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Notify Roles</label>
<select class="form-control select2-multiple email-rule-roles" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[__INDEX__][role_ids][]" data-placeholder="Choose roles">
@foreach($props['roles'] as $roleId => $roleName)
<option value="{{ $roleId }}">{{ $roleName }}</option>
@endforeach
</select>
</div>
<div class="col-md-4 mb-3">
<label class="form-label">Notify Users</label>
<select class="form-control select2-multiple email-rule-users" data-toggle="select2" data-width="100%" multiple="multiple" name="email_notification_rules[__INDEX__][selected_users][]" data-placeholder="Choose users">
@foreach(($props['users'] ?? []) as $userId => $userLabel)
<option value="{{ $userId }}">{{ $userLabel }}</option>
@endforeach
</select>
</div>
<div class="col-md-12 mb-3">
<label class="form-label">Condition (JSON)</label>
<textarea class="form-control font-monospace" rows="4" name="email_notification_rules[__INDEX__][condition]" placeholder='{"AND":[{"attribute":"field_code","operator":"eq","value":"Yes"}]}'></textarea>
<small class="text-muted">Leave empty to always send when enabled.</small>
</div>
<div class="col-md-12 mb-3">
<label class="form-label">Email Subject</label>
<input type="text" class="form-control" name="email_notification_rules[__INDEX__][subject]" placeholder="Submission alert for {RECIPIENT_NAME}">
</div>
<div class="col-md-12 mb-3">
<label class="form-label">Email Body</label>
<textarea class="form-control" rows="5" name="email_notification_rules[__INDEX__][body]" placeholder="Dear {RECIPIENT_NAME},&#10;&#10;{USER_NAME} has submitted {FORM_NAME}."></textarea>
</div>
</div>
</div>
</div>
</template>
</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 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).'
}
});
$('#btn-add-approver').click(function(){
$('#approver-wrapper').append(`<div class="col-md-6 mb-2">
<div class="row">
<div class="col-10">
<select class="form-control" name="workflow_approvers[]" required>
<option value=""> -- Select Metric -- </option>
@foreach($fields['workflow_approvers']['approvers'] ?? [] as $k => $v)
<option value="{{$k}}">{{$v}}</option>
@endforeach
</select>
</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();
});
function renumberEmailRules() {
$('#email-notification-rules-wrapper .email-notification-rule').each(function(index) {
$(this).attr('data-rule-index', index);
$(this).find('.rule-number').text(index + 1);
$(this).find('[name^="email_notification_rules["]').each(function() {
const name = $(this).attr('name');
if (!name) {
return;
}
$(this).attr('name', name.replace(/email_notification_rules\[\d+\]/, 'email_notification_rules[' + index + ']'));
});
});
}
function initEmailRuleSelects($container) {
$container.find('.email-rule-managers, .email-rule-roles, .email-rule-users').each(function() {
if (!$(this).hasClass('select2-hidden-accessible')) {
$(this).select2({ width: '100%' });
}
});
}
initEmailRuleSelects($('#email-notification-rules-wrapper'));
function toggleEmailNotificationPanel() {
const enabled = $('input[name="email_notification"]:checked').val() === 'yes';
$('#email-notification-rules-panel').toggleClass('d-none', !enabled);
}
toggleEmailNotificationPanel();
$('input[name="email_notification"]').on('change', toggleEmailNotificationPanel);
function toggleUserAttributesField() {
const show = $('input[name="show_user_attributes"]:checked').val() !== 'no';
$('#field-user_attributes').closest('.mb-3').toggle(show);
}
toggleUserAttributesField();
$('input[name="show_user_attributes"]').on('change', toggleUserAttributesField);
$(document).on('click', '.btn-remove-email-rule', function() {
$(this).closest('.email-notification-rule').remove();
renumberEmailRules();
});
$('#btn-add-email-rule').click(function() {
const template = $('#email-notification-rule-template').html();
const index = $('#email-notification-rules-wrapper .email-notification-rule').length;
const html = template
.replace(/__INDEX__/g, index)
.replace(/__NUMBER__/g, index + 1);
const $rule = $(html);
$('#email-notification-rules-wrapper').append($rule);
initEmailRuleSelects($rule);
renumberEmailRules();
});
});
</script>
@endsection