268 lines
17 KiB
PHP
268 lines
17 KiB
PHP
@extends('layouts.vertical', ["page_title"=> "Add & Edit Video Customization"])
|
|
|
|
@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 {{isset($props['class'])?$props['class']:''}}" id="field-wrapper-{{$field}}" style="{{isset($props['style'])?$props['style']:''}}">
|
|
<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="{{isset($props['value'])?$props['value']:($mode=='edit'&&isset($item->{$field})?$item->{$field}:'')}}" {{isset($props['required'])&&$props['required']?'required':'' }} {{isset($props['onchange'])?'onchange="'.$props['onchange'].'(this)"':''}}>
|
|
@break
|
|
@case('date')
|
|
<input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control" placeholder="Enter {{$props['title']}}" value="{{isset($props['value'])?$props['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('datetime')
|
|
<input type="text" id="field-{{$field}}" name="{{$field}}" class="form-control datetime" placeholder="Enter {{$props['title']}}" value="{{isset($props['value'])?$props['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':'' }}>{{isset($props['value'])?$props['value']:($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':'' }} {{isset($props['onchange'])?'onchange="'.$props['onchange'].'(this)"':''}}>
|
|
@if(!isset($props['default']) || $props['default'] != '')
|
|
<option value=""> -- Select {{$props['title']}} -- </option>
|
|
@endif
|
|
@foreach($props['values'] as $k => $v)
|
|
<option value="{{$k}}" {{(isset($props['value']) && $props['value'] == $k) || ($mode=='edit' && isset($item->{$field}) && $item->{$field} == $k) ? 'selected="selected"':''}}>{{$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('multitextbox')
|
|
<div class="row">
|
|
@foreach($props['values'] as $k => $v)
|
|
<div class="col-3">{{$v}}</div>
|
|
<div class="col-3 mb-1">
|
|
<input type="text" id="field-{{$k}}" name="{{$field}}[{{$k}}]" class="form-control" value="{{isset($option->val)?$option->val:''}}" {{isset($props['required'])&&$props['required']?'required':'' }}>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@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' && isset($item->{$field}) && $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' && isset($item->{$field}) && $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="{{isset($props['value'])?$props['value']:($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="{{isset($props['value'])?$props['value']:($mode=='edit'?$item->{$field}:'')}}" data-allowed-file-extensions="png jpg jpeg gif mp4 pdf mp3 zip csv" />
|
|
<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/bootstrap-datepicker/bootstrap-datepicker.min.js')}}"></script>
|
|
<script src="{{asset('assets/libs/flatpickr/flatpickr.min.js')}}"></script>
|
|
|
|
<script type="text/javascript">
|
|
function showCustomizationFields(selectElement) {
|
|
var selectedValue = selectElement.value;
|
|
console.log('Selected customization type:', selectedValue);
|
|
|
|
// Hide all customization field wrappers first
|
|
$('.customization-field').each(function() {
|
|
$(this).attr('style', 'display:none !important;');
|
|
});
|
|
|
|
// Show fields for selected customization type
|
|
if(selectedValue) {
|
|
// Convert 'video_frame' to 'video-frame-field' to match PHP class generation
|
|
// PHP uses: strtolower(str_replace('_', '-', $typeKey)) . '-field'
|
|
var typeClass = selectedValue.toLowerCase().replace(/_/g, '-') + '-field';
|
|
console.log('Looking for class:', typeClass);
|
|
console.log('Found elements:', $('.' + typeClass).length);
|
|
|
|
// Show all fields with this type class (the wrapper divs have the class)
|
|
// Remove the inline style to restore Bootstrap's default display
|
|
$('.' + typeClass).each(function() {
|
|
$(this).removeAttr('style');
|
|
console.log('Showing element:', $(this).attr('id'));
|
|
});
|
|
|
|
// If video_frame is selected, show orientation field and trigger its visibility logic
|
|
if(selectedValue == 'video_frame') {
|
|
$('#field-wrapper-orientation').removeAttr('style');
|
|
var orientationSelect = document.getElementById('field-orientation');
|
|
if(orientationSelect) {
|
|
showOrientationFields(orientationSelect);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function showOrientationFields(selectElement) {
|
|
var selectedValue = selectElement.value;
|
|
console.log('Selected orientation:', selectedValue);
|
|
|
|
// Hide all orientation-specific fields
|
|
$('#field-wrapper-portrait_video_width, #field-wrapper-portrait_video_height, #field-wrapper-portrait_frame_image').attr('style', 'display:none !important;');
|
|
$('#field-wrapper-landscape_video_width, #field-wrapper-landscape_video_height, #field-wrapper-landscape_frame_image').attr('style', 'display:none !important;');
|
|
|
|
// Show fields based on orientation
|
|
if(selectedValue == 'portrait' || selectedValue == 'both') {
|
|
$('#field-wrapper-portrait_video_width, #field-wrapper-portrait_video_height, #field-wrapper-portrait_frame_image').removeAttr('style');
|
|
}
|
|
|
|
if(selectedValue == 'landscape' || selectedValue == 'both') {
|
|
$('#field-wrapper-landscape_video_width, #field-wrapper-landscape_video_height, #field-wrapper-landscape_frame_image').removeAttr('style');
|
|
}
|
|
}
|
|
|
|
$(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).'
|
|
}
|
|
});
|
|
|
|
$('.datetime').flatpickr({
|
|
enableTime: true,
|
|
dateFormat: "Y-m-d H:i"
|
|
});
|
|
|
|
// Handle change event for customization_type (works with both regular select and select2)
|
|
$(document).on('change', '#field-customization_type', function() {
|
|
showCustomizationFields(this);
|
|
});
|
|
|
|
// Handle change event for orientation
|
|
$(document).on('change', '#field-orientation', function() {
|
|
showOrientationFields(this);
|
|
});
|
|
|
|
// Initialize visibility on page load
|
|
setTimeout(function() {
|
|
var customizationTypeSelect = document.getElementById('field-customization_type');
|
|
if (customizationTypeSelect && customizationTypeSelect.value) {
|
|
showCustomizationFields(customizationTypeSelect);
|
|
} else {
|
|
// Hide all customization fields if no type selected
|
|
$('.customization-field').each(function() {
|
|
$(this).attr('style', 'display:none !important;');
|
|
});
|
|
}
|
|
}, 500);
|
|
});
|
|
</script>
|
|
@endsection
|
|
|