CrestRoad/laravel/resources/views/msgsend/form.blade.php

220 lines
15 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" action="" 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':'' }}>
@break
@case('date')
<input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control datepicker" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit'&&isset($item->{$field})?$item->{$field}:''}}" data-date-autoclose="true" {{isset($props['required'])&&$props['required']?'required':'' }}>
@break
@case('time')
<input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control timepicker" placeholder="Enter {{$props['title']}}" value="{{$mode=='edit'&&isset($item->{$field})?$item->{$field}:''}}" 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('keywords')
<div class="row" id="field-{{$field}}">
</div>
@break
@case('select')
<select class="form-control" data-toggle="select2" 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('template')
<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"':''}} data='{!! json_encode($props['template_data'][$k]) !!}'>{{$v}}</option>
@endforeach
</select>
@break
@case('checkbox')
@foreach($props['values'] as $k => $v)
<div class="form-check mb-2 form-check-blue">
<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
@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
@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/flatpickr/flatpickr.min.js')}}"></script>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="select2"]').select2();
$('.datepicker').flatpickr();
$('.timepicker').flatpickr({enableTime: true, noCalendar: true, dateFormat: "H:i"});
$('#field-template').change(function(){
let template_data = JSON.parse( $('#field-template option:selected').attr('data') )
$('#field-template_body').html('')
$('#field-header_params').html('')
$('#field-body_params').html('')
$('#field-button_params').html('')
$('#field-button_cta').html('')
console.log(template_data)
if(template_data) {
$('#field-template_body').html(template_data.template_body)
if(template_data.button_url || template_data.button_label) {
$('#field-button_cta').html(
'<div class="col-12 mb-2"><strong>Email button</strong></div>'
+ '<div class="col-12 mb-2 text-muted small">URL: ' + (template_data.button_url || '-') + '</div>'
+ '<div class="col-12 mb-2 text-muted small">Label: ' + (template_data.button_label || 'Click here') + '</div>'
)
}
if(template_data.header_params != null)
for(let p of template_data.header_params.split('||') ) {
$('#field-header_params').append('<div class="col-6 mb-2">'+p+'</div><div class="col-6 mb-2"><input type="text" name="header_params[]" class="form-control" value="'+p+'" required> </div>')
}
if(template_data.body_params != null)
for(let p of template_data.body_params.split('||') ) {
$('#field-body_params').append('<div class="col-6 mb-2">'+p+'</div><div class="col-6 mb-2"><input type="text" name="body_params[]" class="form-control" value="'+p+'" required> </div>')
}
if(template_data.button_params != null)
for(let p of template_data.button_params.split('||') ) {
$('#field-button_params').append('<div class="col-6 mb-2">'+p+'</div><div class="col-6 mb-2"><input type="text" name="button_params[]" class="form-control" value="'+p+'" required> </div>')
}
}
})
$('.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).'
}
});
});
</script>
@endsection