1080 lines
63 KiB
PHP
1080 lines
63 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/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 schedule-field schedule-field-{{ $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('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' : '' }}>
|
|
@break
|
|
|
|
@case('date')
|
|
<input type="text" id="field-{{ $field }}" name="{{ $field }}"
|
|
class="form-control datepicker"
|
|
placeholder="Enter {{ $props['title'] }}"
|
|
value="{{ $mode == 'edit' && !empty($item->{$field})
|
|
? \Carbon\Carbon::parse($item->{$field})->format('m/d/Y')
|
|
: '' }}"
|
|
{{ isset($props['required']) && $props['required'] ? 'required' : '' }}>
|
|
@break
|
|
|
|
@case('datetime')
|
|
<input type="text" id="field-{{ $field }}" name="{{ $field }}"
|
|
class="form-control datetimepicker" placeholder="Enter {{ $props['title'] }}"
|
|
value="{{ $mode == 'edit' && isset($item->{$field}) ? $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')
|
|
@php
|
|
$__selected = (isset($item->{$field}) && $item->{$field} !== '' && $item->{$field} !== null)
|
|
? $item->{$field}
|
|
: ($props['default'] ?? null);
|
|
@endphp
|
|
<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 }}"
|
|
{{ (string) $__selected === (string) $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('multiselect')
|
|
@php
|
|
$__selectedList = (isset($item->{$field}) && is_array($item->{$field}) && count($item->{$field}))
|
|
? $item->{$field}
|
|
: ($props['default'] ?? []);
|
|
@endphp
|
|
<select class="form-control select2" data-toggle="select2" multiple data-width="100%" 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}}" {{is_array($__selectedList) && in_array($k, $__selectedList) ? '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' ? $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('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('multicheckbox')
|
|
<div class="row ps-2">
|
|
@foreach($props['values'] as $k => $v)
|
|
<div class="form-check col-md-3 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, (array)$item->{$field})
|
|
? 'checked' : ''
|
|
}}
|
|
|
|
{{ isset($props['required']) && $props['required'] ? 'required' : '' }}
|
|
>
|
|
|
|
<label class="form-check-label" for="field-{{ $field }}-{{ $k }}">
|
|
{{ $v }}
|
|
</label>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@break
|
|
|
|
@case('mapping')
|
|
<div><button type="button" class="btn btn-info btn-xs float-end"
|
|
id="btn-add-mapping">Add Mapping</button></div>
|
|
<table class="table mb-0" id="table-metrics">
|
|
<thead>
|
|
<tr>
|
|
<th>Metric</th>
|
|
<th>Name</th>
|
|
<th>Weight</th>
|
|
<th>Target</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@if ($mode == 'edit')
|
|
@foreach ($item->{$field} as $map)
|
|
<tr>
|
|
<td>
|
|
<select class="form-control metric-select" name="metric[]" required>
|
|
<option value=""> -- Select Metric -- </option>
|
|
@foreach ($props['metrics'] as $k => $v)
|
|
<option value="{{ $k }}"
|
|
{{ $map->metric == $k ? 'selected="selected"' : '' }}>
|
|
{{ $v }}</option>
|
|
@endforeach
|
|
</select>
|
|
</td>
|
|
<td><input type="text" name="display_unit[]"
|
|
class="form-control" value="{{ $map->display }}"></td>
|
|
|
|
<td><input type="number" name="weight[]" class="form-control"
|
|
value="{{ isset($map->weight) ? $map->weight : 1 }}"></td>
|
|
|
|
<td><input type="number" name="metric_target[]" class="form-control"
|
|
min="0" step="any" placeholder="Target"
|
|
value="{{ $map->target ?? ($item->metric_target[$loop->index] ?? '') }}"></td>
|
|
|
|
<th><button type="button"
|
|
class="btn btn-danger waves-effect waves-light btn-remove"><i
|
|
class="mdi mdi-close"></i></button></th>
|
|
</tr>
|
|
@endforeach
|
|
@else
|
|
<tr>
|
|
<td>
|
|
<select class="form-control metric-select" name="metric[]" required>
|
|
<option value=""> -- Select Metric -- </option>
|
|
@foreach ($props['metrics'] as $k => $v)
|
|
<option value="{{ $k }}">{{ $v }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</td>
|
|
<td><input type="text" name="display_unit[]" class="form-control"
|
|
value=""></td>
|
|
|
|
<td><input type="number" name="weight[]" class="form-control"
|
|
value="1"></td>
|
|
|
|
<td><input type="number" name="metric_target[]" class="form-control"
|
|
min="0" step="any" placeholder="Target" value=""></td>
|
|
|
|
<th><button type="button"
|
|
class="btn btn-danger waves-effect waves-light btn-remove"><i
|
|
class="mdi mdi-close"></i></button></th>
|
|
</tr>
|
|
@endif
|
|
</tbody>
|
|
</table>
|
|
@break
|
|
|
|
@case('milestonemapping')
|
|
<div class="d-flex justify-content-end mb-3">
|
|
<button type="button" class="btn btn-primary btn-sm" id="btn-add-milestone">
|
|
+ Add Milestone
|
|
</button>
|
|
</div>
|
|
|
|
<div id="milestone-container">
|
|
|
|
@php
|
|
$milestoneCount = isset($item->target) ? count($item->target) : 1;
|
|
@endphp
|
|
|
|
@for ($i = 0; $i < $milestoneCount; $i++)
|
|
<div class="card milestone-card mb-4"
|
|
style="border:1px solid #cfe8ff; box-shadow: 0 8px 34px rgba(4, 4, 2, 0.18);">
|
|
<div class="card-body">
|
|
|
|
<input type="hidden" name="milestone_id[]"
|
|
value="{{ $item->milestone_id[$i] ?? '' }}">
|
|
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h5 class="mb-0">Milestone {{ $i + 1 }}</h5>
|
|
<button type="button"
|
|
class="btn btn-danger btn-sm btn-remove-milestone">
|
|
<i class="mdi mdi-close"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="row g-3">
|
|
{{-- Target Title --}}
|
|
<div class="col-md-3">
|
|
<label class="form-label">Target Title</label>
|
|
<input type="text" name="target_title[]" class="form-control"
|
|
placeholder="Enter target title"
|
|
value="{{ $item->target_title[$i] ?? '' }}">
|
|
</div>
|
|
|
|
{{-- Target --}}
|
|
<div class="col-md-3">
|
|
<label class="form-label">Target </label><span
|
|
class="text-danger"> *</span>
|
|
<input type="number" name="target[]" class="form-control"
|
|
value="{{ $item->target[$i] ?? '' }}" required>
|
|
</div>
|
|
|
|
{{-- Repeat Target --}}
|
|
<div class="col-md-3">
|
|
<label class="form-label">Repeat Target</label>
|
|
<select name="repeat_target[]" class="form-control">
|
|
<option value="0" @if (($item->repeat_target[$i] ?? '0') == '0') selected @endif>No</option>
|
|
<option value="1" @if (($item->repeat_target[$i] ?? '0') == '1') selected @endif>Yes</option>
|
|
</select>
|
|
</div>
|
|
|
|
{{-- Roles --}}
|
|
<div class="col-md-3">
|
|
<label class="form-label">Roles</label><span
|
|
class="text-danger"> *</span>
|
|
<select name="roles[{{ $i }}][]"
|
|
class="form-control select2" multiple required>
|
|
@foreach ($props['roles'] ?? [] as $k => $v)
|
|
<option value="{{ $k }}"
|
|
@if (isset($item->roles[$i]) && in_array($k, $item->roles[$i])) selected @endif>
|
|
{{ $v }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
{{-- Reporting Roles --}}
|
|
<div class="col-md-3">
|
|
<label class="form-label">Reporting Roles</label><span
|
|
class="text-danger"> *</span>
|
|
<select name="reporting_roles[{{ $i }}][]"
|
|
class="form-control select2" multiple required>
|
|
@foreach ($props['roles'] ?? [] as $k => $v)
|
|
<option value="{{ $k }}"
|
|
@if (isset($item->reporting_roles[$i]) && in_array($k, $item->reporting_roles[$i])) selected @endif>
|
|
{{ $v }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
{{-- Notifications --}}
|
|
<h6 class="mb-3">Notifications</h6>
|
|
<div class="row g-3">
|
|
<div class="col-md-3">
|
|
<div class="form-check mt-4">
|
|
<input type="checkbox" class="form-check-input"
|
|
name="user_notification[]"
|
|
@if (!empty($item->user_notification[$i])) checked @endif>
|
|
<label class="form-check-label">User Notification</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<div class="form-check mt-4">
|
|
<input type="checkbox" class="form-check-input"
|
|
name="user_email[]"
|
|
@if (!empty($item->user_email[$i])) checked @endif>
|
|
<label class="form-check-label">User Email</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label class="form-label">Manager Notification</label>
|
|
<select name="manager_notification[{{ $i }}][]"
|
|
class="form-control select2" multiple>
|
|
<option value="l1manager"
|
|
@if (isset($item->manager_notification[$i]) && in_array('l1manager', $item->manager_notification[$i])) selected @endif>L1
|
|
Manager</option>
|
|
<option value="l2manager"
|
|
@if (isset($item->manager_notification[$i]) && in_array('l2manager', $item->manager_notification[$i])) selected @endif>L2
|
|
Manager</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<label class="form-label">Manager Email</label>
|
|
<select name="manager_email[{{ $i }}][]"
|
|
class="form-control select2" multiple>
|
|
<option value="l1manager"
|
|
@if (isset($item->manager_email[$i]) && in_array('l1manager', $item->manager_email[$i])) selected @endif>L1
|
|
Manager</option>
|
|
<option value="l2manager"
|
|
@if (isset($item->manager_email[$i]) && in_array('l2manager', $item->manager_email[$i])) selected @endif>L2
|
|
Manager</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
|
|
{{-- Badge --}}
|
|
<h6 class="mb-3">Send Badge</h6>
|
|
<div class="row g-3 mb-3">
|
|
<div class="col-md-4">
|
|
<label class="form-label">Send Badge</label>
|
|
<select name="send_badge[{{ $i }}][]"
|
|
class="form-control select2">
|
|
<option value="">Select Badge</option>
|
|
@foreach ($props['badges'] ?? [] as $k => $v)
|
|
<option value="{{ $k }}"
|
|
@if (isset($item->send_badge[$i]) && in_array($k, $item->send_badge[$i])) selected @endif>
|
|
{{ $v }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="my-4">
|
|
<h6 class="mb-3">Send Appreciation</h6>
|
|
|
|
<div class="row g-3">
|
|
<div class="col-md-6">
|
|
<label class="form-label">Appreciation Category</label>
|
|
<select name="appreciation_category[]"
|
|
class="form-control select2">
|
|
<option value=""
|
|
{{ empty($item->appreciation_category[$i]) ? 'selected' : '' }}>
|
|
Select Category</option>
|
|
@foreach ($props['appreciation_categories'] ?? [] as $k => $v)
|
|
<option value="{{ $k }}"
|
|
@if (($item->appreciation_category[$i] ?? '') == $k) selected @endif>
|
|
{{ $v }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<label class="form-label">Message</label>
|
|
<textarea name="appreciation_message[]" class="form-control">{{ $item->appreciation_message[$i] ?? '' }}</textarea>
|
|
</div>
|
|
</div>
|
|
<div class="row g-3">
|
|
<div class="col-md-12">
|
|
<label class="form-label">Appreciation Image</label>
|
|
<select name="appreciation_image[]"
|
|
class="form-control select2-image">
|
|
|
|
<option value="">Select Image</option>
|
|
|
|
@foreach ($props['appreciation_image'] ?? [] as $id => $img)
|
|
<option value="{{ $id }}"
|
|
data-image="{{ $img['image'] }}"
|
|
@if (($item->appreciation_image[$i] ?? '') == $id) selected @endif>
|
|
{{ $img['title'] }}
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
<div class="image-preview-wrapper mt-2"
|
|
style="position:relative;width:80px;height:80px;">
|
|
<img class="appreciation_preview"
|
|
src="{{ $item->appreciation_image[$i] ?? '' }}"
|
|
style="width:80px;height:80px;object-fit:cover;border-radius:6px;border:1px solid #ddd;padding:3px;">
|
|
<span class="preview_eye"
|
|
style="position:absolute;top:4px;right:4px;background:rgba(0,0,0,0.6);color:#fff;padding:4px;border-radius:4px;cursor:pointer;font-size:12px;">
|
|
👁
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endfor
|
|
</div>
|
|
|
|
{{-- FULLSCREEN IMAGE MODAL --}}
|
|
<div id="imagePreviewModal"
|
|
style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);z-index:9999;align-items:center;justify-content:center;">
|
|
<img id="fullscreen_image"
|
|
style="max-width:90%;max-height:90%;border-radius:6px;">
|
|
</div>
|
|
@break
|
|
|
|
@case('combined_metrics')
|
|
<div><button type="button" class="btn btn-info btn-xs float-end"
|
|
id="btn-add-metric">Add Metric</button></div>
|
|
<table class="table mb-0" id="table-combined">
|
|
<thead>
|
|
<tr>
|
|
<th width="10%">Type</th>
|
|
<th width="10%">Title</th>
|
|
<th width="65%">Include Metrics</th>
|
|
<th width="8%">List View?</th>
|
|
<th width="7%">Delete?</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@if ($mode == 'edit')
|
|
@foreach (json_decode($item->{$field}) as $i => $map)
|
|
<tr>
|
|
<td>
|
|
<select class="form-control" name="combined_metrics[type][]"
|
|
required>
|
|
<option value=""> -- Select Type -- </option>
|
|
<option value="prescribers"
|
|
{{ $map->type == 'prescribers' ? 'selected' : '' }}>
|
|
Prescribers (no of)</option>
|
|
<option value="unique_new"
|
|
{{ $map->type == 'unique_new' ? 'selected' : '' }}>
|
|
Unique New Prescribers (launch)</option>
|
|
<option value="combination"
|
|
{{ $map->type == 'combination' ? 'selected' : '' }}>
|
|
Combination (Total)</option>
|
|
<option value="mtd"
|
|
{{ $map->type == 'mtd' ? 'selected' : '' }}>MTD Value
|
|
</option>
|
|
<option value="ytd"
|
|
{{ $map->type == 'ytd' ? 'selected' : '' }}>YTD Value
|
|
</option>
|
|
<option value="unit_for_ranking"
|
|
{{ $map->type == 'unit_for_ranking' ? 'selected' : '' }}>
|
|
Units For Ranking</option>
|
|
<option value="active_user"
|
|
{{ $map->type == 'active_user' ? 'selected' : '' }}>
|
|
Active Users</option>
|
|
</select>
|
|
</td>
|
|
<td><input type="text" name="combined_metrics[title][]"
|
|
class="form-control"
|
|
value="{{ isset($map->title) ? $map->title : '' }}"></td>
|
|
<td><select class="form-control select2-multiple"
|
|
data-toggle="select2" data-width="100%"
|
|
multiple="multiple" data-placeholder="Choose Metrics"
|
|
name="combined_metrics[fields][{{ $i }}][]">
|
|
<option value=""> -- Select Multiple Metrics --
|
|
</option>
|
|
@foreach ($fields['metrics']['metrics'] as $k => $v)
|
|
<option value="{{ $k }}"
|
|
{{ isset($map->fields) && is_array($map->fields) && in_array($k, $map->fields) ? 'selected="selected"' : '' }}>
|
|
{{ $v }}</option>
|
|
@endforeach
|
|
</select>
|
|
</td>
|
|
<td><select name="combined_metrics[list_view][]"
|
|
class="form-control">
|
|
<option value="no"
|
|
{{ isset($map->list_view) && $map->list_view == 'no' ? 'selected' : '' }}>
|
|
No</option>
|
|
<option value="yes"
|
|
{{ isset($map->list_view) && $map->list_view == 'yes' ? 'selected' : '' }}>
|
|
Yes</option>
|
|
</select></td>
|
|
<th><button type="button"
|
|
class="btn btn-danger waves-effect waves-light btn-remove"><i
|
|
class="mdi mdi-close"></i></button></th>
|
|
</tr>
|
|
@endforeach
|
|
@endif
|
|
</tbody>
|
|
</table>
|
|
@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="{{ URL::asset('assets/libs/flatpickr/flatpickr.min.js') }}"></script>
|
|
<script type="text/javascript">
|
|
function toggleUserAttributesField() {
|
|
var show = $('#field-show_user_attributes').val() === 'yes';
|
|
var $field = $('#field-user_attributes');
|
|
$field.closest('.mb-3').toggle(show);
|
|
if (show && $field.length) {
|
|
if ($field.hasClass('select2-hidden-accessible')) {
|
|
$field.select2('destroy');
|
|
}
|
|
$field.select2({ width: '100%' });
|
|
}
|
|
}
|
|
|
|
$(document).ready(function() {
|
|
$('#field-show_user_attributes').on('change', toggleUserAttributesField);
|
|
|
|
$('.datepicker').flatpickr({
|
|
dateFormat: "m/d/Y"
|
|
});
|
|
|
|
$('.datetimepicker').flatpickr({
|
|
enableTime: true,
|
|
dateFormat: "m/d/Y H:i"
|
|
});
|
|
|
|
if ($('#field-send_time').length) {
|
|
$('#field-send_time').flatpickr({
|
|
enableTime: true,
|
|
noCalendar: true,
|
|
dateFormat: "H:i",
|
|
time_24hr: true
|
|
});
|
|
}
|
|
|
|
function getSelectedScheduleType() {
|
|
return $('input[name="days_or_dates"]:checked').val() || 'days';
|
|
}
|
|
|
|
function toggleScheduleFields() {
|
|
const type = getSelectedScheduleType();
|
|
$('.schedule-field-days, .schedule-field-dates').hide();
|
|
|
|
if (type === 'days') {
|
|
$('.schedule-field-days').show();
|
|
} else if (type === 'dates') {
|
|
$('.schedule-field-dates').show();
|
|
}
|
|
}
|
|
|
|
if ($('input[name="days_or_dates"]').length) {
|
|
if ($('input[name="days_or_dates"]:checked').length === 0) {
|
|
$('#field-days_or_dates-days').prop('checked', true);
|
|
}
|
|
toggleScheduleFields();
|
|
$('input[name="days_or_dates"]').on('change', toggleScheduleFields);
|
|
}
|
|
|
|
@if (isset($fields['metrics']))
|
|
$('#btn-add-mapping').click(function() {
|
|
|
|
$('table#table-metrics tbody').append(`<tr>
|
|
<td>
|
|
<select class="form-control metric-select" name="metric[]" required>
|
|
<option value=""> -- Select Metric -- </option>
|
|
@foreach ($fields['metrics']['metrics'] as $k => $v)
|
|
<option value="{{ $k }}">{{ $v }}</option>
|
|
@endforeach
|
|
</select>
|
|
</td>
|
|
<td><input type="text" name="display_unit[]" class="form-control" value=""></td>
|
|
<td><input type="number" name="weight[]" class="form-control" value="1"></td>
|
|
<td><input type="number" name="metric_target[]" class="form-control" min="0" step="any" placeholder="Target" value=""></td>
|
|
<th><button type="button" class="btn btn-danger btn-remove"><i class="mdi mdi-close"></i></button></th>
|
|
</tr>`);
|
|
|
|
initMetricSelect2($('table#table-metrics tbody tr').last());
|
|
|
|
$('.btn-remove').off().on('click', function() {
|
|
$(this).closest('tr').remove();
|
|
});
|
|
|
|
$('.cust-date').flatpickr();
|
|
|
|
});
|
|
|
|
let comcount = 100;
|
|
|
|
$('#btn-add-metric').click(function() {
|
|
|
|
$('table#table-combined tbody').append(`<tr>
|
|
<td>
|
|
<select class="form-control" name="combined_metrics[type][${comcount}]" required>
|
|
<option value=""> -- Select Type -- </option>
|
|
<option value="prescribers">Prescribers (no of)</option>
|
|
<option value="unique_new">Unique New Prescribers (launch)</option>
|
|
<option value="combination">Combination (Total)</option>
|
|
<option value="mtd">MTD Value</option>
|
|
<option value="ytd">YTD Value</option>
|
|
<option value="unit_for_ranking">Unit For Ranking</option>
|
|
<option value="active_user">Active User</option>
|
|
</select>
|
|
</td>
|
|
<td><input type="text" name="combined_metrics[title][${comcount}]" class="form-control"></td>
|
|
<td>
|
|
<select class="form-control select2-multiple" data-toggle="select2" multiple name="combined_metrics[fields][${comcount}][]">
|
|
<option value=""> -- Select Multiple Metrics -- </option>
|
|
@foreach ($fields['metrics']['metrics'] as $k => $v)
|
|
<option value="{{ $k }}">{{ $v }}</option>
|
|
@endforeach
|
|
</select>
|
|
</td>
|
|
<th><button type="button" class="btn btn-danger btn-remove"><i class="mdi mdi-close"></i></button></th>
|
|
</tr>`);
|
|
|
|
// ✅ FIX: ONLY this (no direct select2 call)
|
|
initializeSelect2();
|
|
|
|
$('.btn-remove').off().on('click', function() {
|
|
$(this).closest('tr').remove();
|
|
});
|
|
|
|
$('.cust-date').flatpickr();
|
|
|
|
comcount++;
|
|
});
|
|
|
|
$('.btn-remove').click(function() {
|
|
$(this).closest('tr').remove();
|
|
});
|
|
|
|
@endif
|
|
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
// Initialize Select2 on page load
|
|
initializeSelect2();
|
|
|
|
// Load preview for existing milestones
|
|
$('.select2-image').each(function() {
|
|
updatePreview(this);
|
|
});
|
|
|
|
$('.milestone-card').each(function() {
|
|
validateAppreciation($(this));
|
|
});
|
|
|
|
});
|
|
|
|
|
|
/* --------------------------
|
|
METRIC SELECT2 (Choose Metric mapping rows)
|
|
---------------------------*/
|
|
function initMetricSelect2($context) {
|
|
($context || $('#table-metrics')).find('select.metric-select').each(function() {
|
|
let $select = $(this);
|
|
|
|
if ($select.hasClass('select2-hidden-accessible')) {
|
|
$select.select2('destroy');
|
|
}
|
|
|
|
$select.select2({
|
|
width: '100%',
|
|
placeholder: '-- Select Metric --',
|
|
allowClear: true
|
|
});
|
|
});
|
|
}
|
|
|
|
/* --------------------------
|
|
SELECT2 INITIALIZATION
|
|
---------------------------*/
|
|
function initializeSelect2() {
|
|
|
|
// destroy existing select2 on elements we reinitialize
|
|
$('[data-toggle="select2"], .select2, .select2-image').each(function () {
|
|
if ($(this).hasClass('select2-hidden-accessible')) {
|
|
$(this).select2('destroy');
|
|
}
|
|
});
|
|
|
|
// normal select2
|
|
$('[data-toggle="select2"], .select2').select2({
|
|
width: '100%'
|
|
});
|
|
|
|
// image select2
|
|
$('.select2-image').select2({
|
|
width: '100%',
|
|
templateResult: formatImage,
|
|
templateSelection: formatImage,
|
|
escapeMarkup: function(m) {
|
|
return m;
|
|
}
|
|
});
|
|
|
|
initMetricSelect2();
|
|
toggleUserAttributesField();
|
|
}
|
|
|
|
|
|
/* --------------------------
|
|
SELECT2 IMAGE TEMPLATE
|
|
---------------------------*/
|
|
function formatImage(option) {
|
|
|
|
if (!option.id) return option.text;
|
|
|
|
let img = $(option.element).data('image');
|
|
|
|
if (!img) return option.text;
|
|
|
|
return $(
|
|
'<span style="display:flex;align-items:center;">' +
|
|
'<img src="' + img +
|
|
'" style="width:40px;height:40px;object-fit:cover;margin-right:8px;border-radius:4px;">' +
|
|
'<span>' + option.text + '</span>' +
|
|
'</span>'
|
|
);
|
|
|
|
}
|
|
|
|
|
|
/* --------------------------
|
|
UPDATE PREVIEW IMAGE
|
|
---------------------------*/
|
|
function updatePreview(select) {
|
|
|
|
let img = $(select).find('option:selected').data('image');
|
|
let preview = $(select)
|
|
.closest('.milestone-card')
|
|
.find('.image-preview-wrapper');
|
|
|
|
if (img) {
|
|
preview.show();
|
|
preview.find('img').attr('src', img);
|
|
} else {
|
|
preview.hide();
|
|
preview.find('img').attr('src', '');
|
|
}
|
|
|
|
}
|
|
|
|
function validateAppreciation(wrapper) {
|
|
|
|
let category = wrapper.find('select[name="appreciation_category[]"]').first().val();
|
|
let message = (wrapper.find('textarea[name="appreciation_message[]"]').first().val() || '').trim();
|
|
let image = wrapper.find('select[name="appreciation_image[]"]').first().val();
|
|
|
|
if (category) {
|
|
wrapper.find('textarea[name="appreciation_message[]"]').prop('required', true);
|
|
wrapper.find('select[name="appreciation_image[]"]').prop('required', true);
|
|
} else {
|
|
wrapper.find('textarea[name="appreciation_message[]"]').prop('required', false);
|
|
wrapper.find('select[name="appreciation_image[]"]').prop('required', false);
|
|
}
|
|
|
|
}
|
|
|
|
$(document).on('change input',
|
|
'[name="appreciation_category[]"], [name="appreciation_image[]"], [name="appreciation_message[]"]',
|
|
function() {
|
|
|
|
let wrapper = $(this).closest('.milestone-card');
|
|
|
|
validateAppreciation(wrapper);
|
|
|
|
});
|
|
|
|
|
|
/* --------------------------
|
|
DROPDOWN CHANGE
|
|
---------------------------*/
|
|
$(document).on('change', '.select2-image', function() {
|
|
updatePreview(this);
|
|
});
|
|
|
|
|
|
/* --------------------------
|
|
FULLSCREEN PREVIEW
|
|
---------------------------*/
|
|
$(document).on('click', '.preview_eye', function() {
|
|
|
|
let img = $(this)
|
|
.closest('.image-preview-wrapper')
|
|
.find('.appreciation_preview')
|
|
.attr('src');
|
|
|
|
if (img) {
|
|
$('#fullscreen_image').attr('src', img);
|
|
$('#imagePreviewModal').css('display', 'flex');
|
|
}
|
|
|
|
});
|
|
|
|
$('#imagePreviewModal').on('click', function() {
|
|
$(this).hide();
|
|
});
|
|
|
|
|
|
/* --------------------------
|
|
ADD NEW MILESTONE WITH PROPER INDEX
|
|
---------------------------*/
|
|
/* --------------------------
|
|
ADD NEW MILESTONE WITH PROPER INDEX
|
|
---------------------------*/
|
|
$(document).on('click', '#btn-add-milestone', function() {
|
|
|
|
let container = $('#milestone-container');
|
|
let clone = $('.milestone-card:first').clone();
|
|
|
|
// Clear values
|
|
clone.find('input[type=number]').val('');
|
|
clone.find('input[name="target_title[]"]').val('');
|
|
clone.find('textarea').val('');
|
|
clone.find('input[type=checkbox]').prop('checked', false);
|
|
clone.find('select[name="repeat_target[]"]').val('0');
|
|
|
|
// ❌ REMOVE REQUIRED ATTRIBUTES (FIX)
|
|
clone.find('[name="appreciation_category[]"]').prop('required', false);
|
|
clone.find('[name="appreciation_message[]"]').prop('required', false);
|
|
clone.find('[name="appreciation_image[]"]').prop('required', false);
|
|
|
|
// IMPORTANT: clear milestone id
|
|
clone.find('input[name="milestone_id[]"]').val('');
|
|
|
|
// Clear select2 selections
|
|
clone.find('select').each(function() {
|
|
if ($(this).attr('name') === 'repeat_target[]') {
|
|
$(this).val('0');
|
|
} else if ($(this).hasClass('select2-image')) {
|
|
$(this).val('').trigger('change');
|
|
} else if ($(this).attr('name').includes('appreciation_category')) {
|
|
$(this).val('').trigger('change');
|
|
} else {
|
|
$(this).val(null).trigger('change');
|
|
}
|
|
});
|
|
|
|
// Clear image preview
|
|
clone.find('.appreciation_preview').attr('src', '');
|
|
|
|
// Append clone
|
|
container.append(clone);
|
|
|
|
// Reindex all milestones
|
|
container.find('.milestone-card').each(function(index) {
|
|
|
|
// Update milestone title
|
|
$(this).find('h5').text('Milestone ' + (index + 1));
|
|
|
|
$(this).find('input, select, textarea').each(function() {
|
|
|
|
let name = $(this).attr('name');
|
|
|
|
if (name) {
|
|
name = name.replace(/\[\d+\]/, `[${index}]`);
|
|
$(this).attr('name', name);
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
// Destroy old select2 before reinit
|
|
clone.find('.select2').removeClass('select2-hidden-accessible').next('.select2').remove();
|
|
clone.find('.select2-image').removeClass('select2-hidden-accessible').next('.select2').remove();
|
|
|
|
initializeSelect2();
|
|
|
|
});
|
|
|
|
|
|
/* --------------------------
|
|
REMOVE MILESTONE AND REINDEX
|
|
---------------------------*/
|
|
$(document).on('click', '.btn-remove-milestone', function() {
|
|
|
|
let container = $('#milestone-container');
|
|
|
|
if (container.find('.milestone-card').length > 1) {
|
|
|
|
$(this).closest('.milestone-card').remove();
|
|
|
|
// Reindex remaining milestones
|
|
container.find('.milestone-card').each(function(index) {
|
|
|
|
// Update milestone title
|
|
$(this).find('h5').text('Milestone ' + (index + 1));
|
|
|
|
$(this).find('input, select, textarea').each(function() {
|
|
|
|
let name = $(this).attr('name');
|
|
|
|
if (name) {
|
|
name = name.replace(/\[\d+\]/, `[${index}]`);
|
|
$(this).attr('name', name);
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
|
|
function toggleCustomDates() {
|
|
let period = $('#field-period').val();
|
|
|
|
if (period === 'custom') {
|
|
$('#field-custom_start_date').closest('.col-md-6').show();
|
|
$('#field-custom_end_date').closest('.col-md-6').show();
|
|
|
|
// ✅ make required
|
|
$('#field-custom_start_date').attr('required', true);
|
|
$('#field-custom_end_date').attr('required', true);
|
|
|
|
} else {
|
|
$('#field-custom_start_date').closest('.col-md-6').hide();
|
|
$('#field-custom_end_date').closest('.col-md-6').hide();
|
|
|
|
// ❌ remove required
|
|
$('#field-custom_start_date').removeAttr('required');
|
|
$('#field-custom_end_date').removeAttr('required');
|
|
|
|
// Optional: clear values
|
|
$('#field-custom_start_date').val('');
|
|
$('#field-custom_end_date').val('');
|
|
}
|
|
}
|
|
|
|
// Run on page load (edit mode support)
|
|
toggleCustomDates();
|
|
|
|
// On change
|
|
$('#field-period').on('change', function () {
|
|
toggleCustomDates();
|
|
});
|
|
|
|
});
|
|
</script>
|
|
@endsection
|