File: /var/www/vhost/disk-apps/comfama.sports-crowd.com/resources/views/app_section/form.blade.php
@csrf
<div class="card-body">
<div class="form-row">
<div class="row" id="image_button">
<div class="form-group col-md-6">
<label for="image">{{ Lang::get('messages.app_section.image')}} </label>
<input type="file" id="image" name="image">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="name">{{ Lang::get('messages.app_section.name') }} </label>
<input type="text" class="form-control" id="name" name="name" placeholder="" required value="{{ $object->name ?? old('name') }}">
</div>
<div class="form-group col-md-4">
<label for="description">{{ Lang::get('messages.app_section.description') }} </label>
<input type="text" class="form-control" id="description" name="description" placeholder="" required value="{{ $object->description ?? old('description') }}">
</div>
<div class="form-group col-md-4">
<label for="path">{{ Lang::get('messages.app_section.path') }} </label>
<input type="text" class="form-control" id="path" name="path" placeholder="" required value="{{ $object->path ?? old('path') }}">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="button_order">{{ Lang::get('messages.app_section.priority') }} </label>
<input type="number" class="form-control" id="button_order" name="button_order" placeholder="" required value="{{ $object->button_order ?? old('button_order') }}">
</div>
<div class="form-group col-md-4">
<label for="button_width">{{ Lang::get('messages.app_section.button_width') }} </label>
<select class="form-control" name="button_width" value="{{ $object->button_width ?? old('button_width')}}" required>
<option value="" disabled {{ isset($object->button_width) ? '' : 'selected' }}>
@lang('messages.select')
</option>
<option value="6" {{isset($object->button_width) && $object->button_width == 6 ? 'selected' : ''}}>
Ancho mediano
</option>
<option value="12" {{isset($object->button_width) && $object->button_width == 12 ? 'selected' : ''}}>
Ancho completo
</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="icon_name">{{ Lang::get('messages.app_section.icon_name') }} </label>
<input type="text" class="form-control" id="icon_name" name="icon_name" placeholder="" required value="{{ $object->icon_name ?? old('icon_name') }}">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="button_text_color" class="ul-form__label">@lang('messages.app_section.text_color') {{ Lang::get('messages.optional') }}</label>
<input type="text" class="form-control color-picker" id="button_text_color" name="button_text_color" placeholder="" value="{{ $object->button_text_color ?? old('button_text_color') }}">
</div>
<div class="form-group col-md-4">
<label for="button_color" class="ul-form__label">@lang('messages.app_section.button_color') {{ Lang::get('messages.optional') }}</label>
<input type="text" class="form-control color-picker" id="button_color" name="button_color" placeholder="" value="{{ $object->button_color ?? old('button_color') }}">
</div>
<div class="form-group col-md-4">
<label for="button_link">{{ Lang::get('messages.app_section.button_link') }} {{ Lang::get('messages.optional') }}</label>
<input type="text" class="form-control" id="button_link" name="button_link" placeholder="" value="{{ $object->button_link ?? old('button_link') }}">
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="tab">{{ Lang::get('messages.app_section.tab') }} {{ Lang::get('messages.optional') }}</label>
<input type="text" class="form-control" id="tab" name="tab" placeholder="" value="{{ $object->tab ?? old('tab') }}">
</div>
<div class="form-group col-md-4">
<label for="validate_data_type">{{ Lang::get('messages.app_section.validate_data_type') }} {{ Lang::get('messages.optional') }}</label>
<select class="form-control" name="validate_data_type" id="validate_data_type">
<@foreach($validationTypes as $type) @if(isset($object) && $type->value==$object->validate_data_type)
<option value="{{ $type->value }}" selected="selected">{{ $type->name }}
</option>
@else
<option value="{{ $type->value }}">{{ $type->name }}</option>
@endif
@endforeach
</select>
</div>
<div class="form-group col-md-4">
<label for="chip_new">{{ Lang::get('messages.app_section.chip_new') }} {{ Lang::get('messages.optional') }}</label>
<select class="form-control" id="chip_new" name="chip_new" value="{{ $object->chip_new ?? old('chip_new') }}">
<option value="0" {{isset($object) && !$object->chip_new ? 'selected' : ''}}>
@lang('messages.inactive')
</option>
<option value="1" {{isset($object) && $object->chip_new ? 'selected' : ''}}>
@lang('messages.active')
</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="enable_on_home">{{ Lang::get('messages.app_section.enable_on_home') }} {{ Lang::get('messages.optional') }}</label>
<select class="form-control" id="enable_on_home" name="enable_on_home" value="{{ $object->enable_on_home ?? old('enable_on_home') }}">
<option value="0" {{isset($object) && !$object->enable_on_home ? 'selected' : ''}}>
@lang('messages.inactive')
</option>
<option value="1" {{isset($object) && $object->enable_on_home ? 'selected' : ''}}>
@lang('messages.active')
</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="enable_on_tabs">{{ Lang::get('messages.app_section.enable_on_tabs') }} {{ Lang::get('messages.optional') }}</label>
<select class="form-control" id="enable_on_tabs" name="enable_on_tabs" value="{{ $object->enable_on_tabs ?? old('enable_on_tabs') }}">
<option value="0" {{isset($object) && !$object->enable_on_tabs ? 'selected' : ''}}>
@lang('messages.inactive')
</option>
<option value="1" {{isset($object) && $object->enable_on_tabs ? 'selected' : ''}}>
@lang('messages.active')
</option>
</select>
</div>
<div class="form-group col-md-4">
<label for="enable_on_settings">{{ Lang::get('messages.app_section.enable_on_settings') }} {{ Lang::get('messages.optional') }}</label>
<select class="form-control" id="enable_on_settings" name="enable_on_settings" value="{{ $object->enable_on_settings ?? old('enable_on_settings') }}">
<option value="0" {{isset($object) && !$object->enable_on_settings ? 'selected' : ''}}>
@lang('messages.inactive')
</option>
<option value="1" {{isset($object) && $object->enable_on_settings ? 'selected' : ''}}>
@lang('messages.active')
</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-md-4">
<label for="enable_section_on_home">{{ Lang::get('messages.app_section.enable_section_on_home')}} {{ Lang::get('messages.optional') }}</label>
<select class="form-control" id="enable_section_on_home" name="enable_section_on_home" value="{{ $object->enable_section_on_home ?? old('enable_section_on_home') }}">
<option value="0" {{isset($object) && !$object->enable_section_on_home ? 'selected' : ''}}>
@lang('messages.inactive')
</option>
<option value="1" {{isset($object) && $object->enable_section_on_home ? 'selected' : ''}}>
@lang('messages.active')
</option>
</select>
</div>
<!-- <div id="link_home">
<div class="form-group col-md-5">
<label for="link_section_home">{{ Lang::get('messages.app_section.link_section_home') }} {{ Lang::get('messages.optional') }}</label>
<input type="text" class="form-control color-picker" id="link_section_home" name="link_section_home" placeholder="" value="{{ $object->link_section_home ?? old('link_section_home') }}">
</div>
</div> -->
<div id="link_home">
<div class="form-group col-md-3">
<label for="image2">{{ Lang::get('messages.app_section.link_section_home') }} {{ Lang::get('messages.optional') }}</label>
<div id="container"></div>
<input type="file" id="image2" name="image2">
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="link">{{ Lang::get('messages.screen_banners_tag23') }} {{ Lang::get('messages.optional') }}</label>
@include('layouts.multiselect')
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.select2').select2();
});
document.getElementById('image').addEventListener('change', function(e) {
CheckDimension();
var iconInput = document.getElementById('icon_name');
var buttonTextColorInput = document.getElementById('button_text_color');
var buttonColorInput = document.getElementById('button_color');
var buttonImage2 = document.getElementById('image2');
if (e.target.files[0]) {
if (iconInput.value != "" && buttonTextColorInput.value != "" && buttonColorInput.value != "") {
iconInput.value = "";
buttonTextColorInput.value = "";
buttonColorInput.value = "";
buttonImage2.value = "";
}
iconInput.disabled = true;
buttonTextColorInput.disabled = true;
buttonColorInput.disabled = true;
buttonImage2.disabled = true;
$("#icon_name").prop('required', false);
} else {
iconInput.disabled = false;
buttonTextColorInput.disabled = false;
buttonColorInput.disabled = false;
buttonImage2.disabled = false;
$("#icon_name").prop('required', true);
}
});
function CheckDimension() {
var fileUpload = document.getElementById("image");
//Validamos si el archivo es una imagen válida.
var regex = new RegExp("(.jpg|.png|.gif)$");
if (regex.test(fileUpload.value.toLowerCase())) {
//Validamos si HTML5 es compatible.
if (typeof(fileUpload.files) != "undefined") {
var reader = new FileReader();
reader.readAsDataURL(fileUpload.files[0]);
reader.onload = function(e) {
var image = new Image();
image.src = e.target.result;
//Valide la altura y el ancho del archivo.
image.onload = function() {
var height = this.height;
var width = this.width;
if (width > 630 || height < 276 || height > 342) {
swal("Error", "El ancho y la altura de la imagen no deben exceder las siguientes dimensiones, para botón mediano (626x338 px), botón ancho completo (626x280 px)", "error");
return false;
}
};
}
} else {
swal("Error", "Este navegador no es compatible con HTML5.");
return false;
}
} else {
swal("Error", "Seleccione un archivo de imagen válido.");
return false;
}
}
document.getElementById('image2').addEventListener('change', function(e) {
var iconInputSectionHome = document.getElementById('enable_section_on_home');
if (iconInputSectionHome.value == 0) {
var buttonImage2 = document.getElementById('image2');
buttonImage2.value = "";
swal("Error", "Para subir y guardar la imagen debes seleccionar (Activo) en Activar Sesión en Home.");
return false;
}
var iconInput = document.getElementById('icon_name');
var buttonTextColorInput = document.getElementById('button_text_color');
var buttonColorInput = document.getElementById('button_color');
var buttonImage = document.getElementById('image');
if (e.target.files[0]) {
if (iconInput.value != "" && buttonTextColorInput.value != "" && buttonColorInput.value != "") {
iconInput.value = "";
buttonTextColorInput.value = "";
buttonColorInput.value = "";
buttonImage.value = "";
}
iconInput.disabled = true;
buttonTextColorInput.disabled = true;
buttonColorInput.disabled = true;
buttonImage.disabled = true;
$("#icon_name").prop('required', false);
$(" select[name='button_width']").prop('required', false);
} else {
iconInput.disabled = false;
buttonTextColorInput.disabled = false;
buttonColorInput.disabled = false;
buttonImage.disabled = false;
$("#icon_name").prop('required', true);
$(" select[name='button_width']").prop('required', true);
}
});
</script>