{header}

<div class="content-header row">
	<div class="content-header-left col-md-4 col-12 mb-2">
		<h3 class="content-header-title">{l_title_current}</h3>
	</div>
	<div class="content-header-right col-md-8 col-12">
		<div class="breadcrumbs-top float-md-right">
			<div class="breadcrumb-wrapper mr-1">
				<ol class="breadcrumb">
					<li class="breadcrumb-item">
						<a href="{url_main}administration/city_options.php">{l_menu_city_options}</a>
					</li>
					<li class="breadcrumb-item active">
						{l_title_current}
					</li>
				</ol>
			</div>
		</div>
	</div>
</div>

{menu_page}

<div class="alert alert-success border-0 alert-dismissible mb-2-1" role="alert">{l_changes_save}</div>

<!-- begin_logo_block -->
<div class="content-body">
	<div class="row">
		<div class="col-12">
			<div class="card">
				<div class="card-header">
					<h4 class="card-title">{title_block}</h4>
                    <a class="heading-elements-toggle"><i class="la la-ellipsis-v font-medium-3"></i></a>
                    <div class="heading-elements">
                        <ul class="list-inline mb-0">
                            <li><a data-action="collapse"><i class="ft-minus"></i></a></li>
                        </ul>
                    </div>
				</div>
				<div class="card-content collapse show">
					<div class="card-body">
					<script>
					$(function() {
						var $img,${block}Frm=$('#{block}_form'),
						${block}File=${block}Frm.find('input.upload'),
						${block}Sbm=${block}Frm.find('#update{block}'),
						${block}BtnDisabled=${block}Frm.find('.btn_disabled'),
						${block}Delete=${block}Frm.find('#delete{block}'),
						${block}Cmd=${block}Frm.find('#cmd{block}'),
						isUpload{block}=false;

						${block}File.change(function(){
							${block}Sbm.html('<span>{j_upload}</span>');
						});

						$('.logo_param_{block}, .logo_param_mobile_{block}').on('input',function(){
							if(!isUpload{block})${block}Sbm.html('<span>{l_update_size}</span>');
						})

						${block}Frm.ajaxForm({
								beforeSubmit: function(a,f,o) {
									if (${block}Cmd.val() != 'delete_{block}'){
										if(!isUpload{block}){
											${block}Cmd.val('update_param_logo');
										}else{
											$img=$('#{block}_output').find('img');
											$('#{block}_output').html('{j_submitting}');
										}
									} else {
										$img=$('#{block}_output').find('img');
										$('#{block}_output').html('{j_submitting}');
									}
									${block}BtnDisabled.prop('disabled', true);
									${block}Sbm.addChildrenLoader();
								},
								success: function(data) {
									if(${block}Cmd.val() == 'update_param_logo'){
										redirectUrl('{url_page}?action=saved');
										return;
									}

									var url = '{url_logo}', $out = $('#{block}_output');
									${block}BtnDisabled.prop('disabled', false);
									${block}Sbm.removeChildrenLoader();

									try {
										var obj = jQuery.parseJSON(data);
										if (obj.status == 0 || obj.url == '') {
											$out.html('').append($img);
											alertCustom(obj.msg);
										} else {
											url = obj.url;
											var $imgNew=$('<img style="width:'+obj.width+'px; height:'+obj.height+'px;" src="'+url+'?' + Math.random() + '" alt=""/>').fadeTo(1,0).load(function(){
												$(this).fadeTo(100,1);
											});
											$out.html('').append($imgNew);
											if (${block}Cmd.val() != 'delete_{block}'){
												if (typeof obj.width != 'undefined' && typeof obj.height != 'undefined') {
													$('#{block}_form').find('.logo_width').val(obj.width).end()
															.find('.logo_height').val(obj.height);
												}
												${block}Sbm.html('<span>{j_update_size}</span>');
											}
										}
									} catch (err) {
										$out.html('').append($img);
										alertCustom('{j_file_type_is_incorrect}');
									}
								}
							})

							_dzSetReaderOnLoad('{block}', function(){
								isUpload{block}=true;
								$('#update{block}').html('<span>{j_drop_image_publish}</span>');
							})

							_dzSetReaderDelete('{block}', function(){
								isUpload{block}=false;
								$('#update{block}').html('<span>{j_upload}</span>');
							})
						})

						function confirmCustom{block}(){
							confirmCustom('{j_are_you_sure}', function(){
								$('#cmd{block}').val('delete_{block}');
								$('#{block}_form').submit();
							})
						}
						</script>

						<form id="{block}_form" action="{url_page}" method="POST" enctype="multipart/form-data">
							<input type="hidden" id ="cmd{block}" name="cmd" value="update_{block}">
							<input type="hidden" name="block" value="{block}">

							<div id="{block}_output" class="block_logo city_logo">
								<img style="width:{logo_width}px; height:{logo_height}px;" src="{url_logo}?rand={rand}" alt=""/>
							</div>
							<!-- begin_logo_block_params -->
							<div class="row">
								<fieldset class="form-group col-md-12 mb05">
									<span>{l_desktop}:</span>
								</fieldset>
								<fieldset class="form-group col-md-6">
									<label>{l_width}<span>({l_px})</span></label>
									<input class="form-control logo_param_{block}" type="text" maxlength="3" name="{block}_width" value="{logo_width}">
								</fieldset>
								<fieldset class="form-group col-md-6">
									<label>{l_height}<span>({l_px})</span></label>
									<input class="form-control logo_param_{block}" type="text" maxlength="3" name="{block}_height" value="{logo_height}">
								</fieldset>
							</div>

							<div class="row">
								<fieldset class="form-group col-md-12 mb05">
									<span>{l_mobile}:</span>
								</fieldset>
								<fieldset class="form-group col-md-12">
									<label>{l_width}<span>({l_percentage_of_the_viewport})</span></label>
									<input class="form-control logo_param_mobile_{block}" type="text" maxlength="3" name="{block}_mobile_width" value="{logo_width_mobile}">
								</fieldset>
							</div>
							<!-- end_logo_block_params -->

							<!--<fieldset class="form-group">
								<input class="upload" type="file" name="logo"/>
							</fieldset>-->

							<fieldset class="form-group upload-single-file">
								<div id="dpz-upload-single-icon" data-name="{block}" class="dropzone dropzone-area dpz-upload-single-icon">
									<input id="dpz-file{block}" class="image-data-url" type="hidden" name="logo_data" value="">
								</div>
							</fieldset>

							<fieldset class="form-group">
								<button class="btn btn-primary" type="submit" id="update{block}" onClick="$('#cmd{block}').val('update_{block}');">
									<span>{l_upload}</span>
								</button>
								<!-- begin_delete -->
								<button class="btn btn-secondary ml-1" type="submit" id="delete{block}" onClick="confirmCustom{block}(); return false;">{l_delete}</button>
								<!-- end_delete -->
							</fieldset>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- end_logo_block -->



{footer}