<style>

p:not(:last-child) {
  margin: 0 0 20px;
}

main {
  margin:40px;
  padding: 40px;
  border: 1px solid rgba(0,0,0,.2);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #abc;
}

.tabs {
  display: none;
  list-style: none;visibility:hidden;
}

field {
  display: inline-block;
  margin: 0 25px;;
  padding: 5px 25px;
  text-align: right;
  width:200px;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #abc;
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 10px;
}

label[for*='1']:before { content: ''; }
label[for*='2']:before { content: ''; }
label[for*='3']:before { content: ''; }
label[for*='4']:before { content: ''; }

label:hover {
  color: #789;
  cursor: pointer;
}

input:checked + label {
  color: #0af;
  border: 1px solid #abc;
  border-top: 2px solid #0af;
  border-bottom: 1px solid #fff;
  padding-bottom:20px;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}


@media screen and (max-width: 800px) {
  label {
    font-size: 0;
  }
  label:before {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 500px) {
  label {
    padding: 15px;
  }
}
</style>

<?php
if (!current_user_can('manage_options')) {
	wp_die('You do not have sufficient permissions to access this page.');
}

global $chk;
$dashboardbuilder_hw_submit = filter_input(INPUT_POST,'dashboardbuilder-hw-submit',FILTER_SANITIZE_STRING);

if(!empty($dashboardbuilder_hw_submit)){
		if (!filter_input(INPUT_POST,'dashboardbuilder-host',FILTER_SANITIZE_STRING)){ ?>
					<div id="message" class="notice notice-error  below-h2">
						<p>Database Host name required</p>
					</div> <?php 
		} else {
				$dashboardbuilder_host = filter_input(INPUT_POST,'dashboardbuilder-host',FILTER_SANITIZE_STRING); 
				global $chk;
					if( get_option('dashboardbuilder-host') != $dashboardbuilder_host){
						 $chk = update_option( 'dashboardbuilder-host', $dashboardbuilder_host);
					}
		}
		
		
		if (!filter_input(INPUT_POST,'dashboardbuilder-user',FILTER_SANITIZE_STRING)){ ?>
					<div id="message" class="notice notice-error  below-h2">
						<p>Database user name required</p>
					</div> <?php 
		} else {
				$dashboardbuilder_user = filter_input(INPUT_POST,'dashboardbuilder-user',FILTER_SANITIZE_STRING); 
				global $chk;
					if( get_option('dashboardbuilder-user') != $dashboardbuilder_user){
						 $chk = update_option( 'dashboardbuilder-user', $dashboardbuilder_user);
					}
		}
		
		if (!filter_input(INPUT_POST,'dashboardbuilder-password',FILTER_SANITIZE_STRING)){ ?>
					<div id="message" class="notice notice-error  below-h2">
						<p>Database user password required</p>
					</div> <?php 
		} else {
				$dashboardbuilder_password = filter_input(INPUT_POST,'dashboardbuilder-password',FILTER_SANITIZE_STRING); 
				global $chk;
					if( get_option('dashboardbuilder-password') != $dashboardbuilder_password){
						 $chk = update_option( 'dashboardbuilder-password', $dashboardbuilder_password);
					}
		}
		
		if (!filter_input(INPUT_POST,'dashboardbuilder-name',FILTER_SANITIZE_STRING)){ ?>
					<div id="message" class="notice notice-error  below-h2">
						<p>Database name required</p>
					</div> <?php 
		} else {
				$dashboardbuilder_name = filter_input(INPUT_POST,'dashboardbuilder-name',FILTER_SANITIZE_STRING); 
				global $chk;
					if( get_option('dashboardbuilder-name') != $dashboardbuilder_name){
						 $chk = update_option( 'dashboardbuilder-name', $dashboardbuilder_name);
					}
		}
		
		if (!filter_input(INPUT_POST,'dashboardbuilder-sql',FILTER_SANITIZE_STRING)){ ?>
					<div id="message" class="notice notice-error  below-h2">
						<p>SQL query required</p>
					</div> <?php 
		} else {
				$dashboardbuilder_sql = filter_input(INPUT_POST,'dashboardbuilder-sql',FILTER_SANITIZE_STRING); 
				global $chk;
					if( get_option('dashboardbuilder-sql') != $dashboardbuilder_sql){
						 $chk = update_option( 'dashboardbuilder-sql', $dashboardbuilder_sql);
					}
		}
		
		
		if (!filter_input(INPUT_POST,'dashboardbuilder-xaxis1',FILTER_SANITIZE_STRING)){ ?>
					<div id="message" class="notice notice-error  below-h2">
						<p>X-axis filed required</p>
					</div> <?php 
		} else {
				$dashboardbuilder_xaxis1 = filter_input(INPUT_POST,'dashboardbuilder-xaxis1',FILTER_SANITIZE_STRING); 
				global $chk;
					if( get_option('dashboardbuilder-xaxis1') != $dashboardbuilder_xaxis1){
						 $chk = update_option( 'dashboardbuilder-xaxis1', $dashboardbuilder_xaxis1);
					}
		}
		
		if (!filter_input(INPUT_POST,'dashboardbuilder-yaxis1',FILTER_SANITIZE_STRING)){ ?>
					<div id="message" class="notice notice-error  below-h2">
						<p>Y-axis filed required</p>
					</div> <?php 
		} else {
				$dashboardbuilder_yaxis1 = filter_input(INPUT_POST,'dashboardbuilder-yaxis1',FILTER_SANITIZE_STRING); 
				global $chk;
					if( get_option('dashboardbuilder-yaxis1') != $dashboardbuilder_yaxis1){
						 $chk = update_option( 'dashboardbuilder-yaxis1', $dashboardbuilder_yaxis1);
					}
		}
		
		$dashboardbuilder_trace1 = filter_input(INPUT_POST,'dashboardbuilder-trace1',FILTER_SANITIZE_STRING); 
		global $chk;
		if( get_option('dashboardbuilder-trace1') != $dashboardbuilder_trace1){
						 $chk = update_option( 'dashboardbuilder-trace1', $dashboardbuilder_trace1);
		}
		
		$dashboardbuilder_color1 = filter_input(INPUT_POST,'dashboardbuilder-color1',FILTER_SANITIZE_STRING); 
		global $chk;
		if( get_option('dashboardbuilder-color1') != $dashboardbuilder_color1){
						 $chk = update_option( 'dashboardbuilder-color1', $dashboardbuilder_color1);
		}
		
		$dashboardbuilder_xtitle1 = filter_input(INPUT_POST,'dashboardbuilder-xtitle1',FILTER_SANITIZE_STRING); 
		global $chk;
		if( get_option('dashboardbuilder-xtitle1') != $dashboardbuilder_xtitle1){
						 $chk = update_option( 'dashboardbuilder-xtitle1', $dashboardbuilder_xtitle1);
		}
		
		$dashboardbuilder_ytitle1 = filter_input(INPUT_POST,'dashboardbuilder-ytitle1',FILTER_SANITIZE_STRING); 
		global $chk;
		if( get_option('dashboardbuilder-ytitle1') != $dashboardbuilder_ytitle1){
						 $chk = update_option( 'dashboardbuilder-ytitle1', $dashboardbuilder_ytitle1);
		}
		
		$dashboardbuilder_type = filter_input(INPUT_POST,'dashboardbuilder-type',FILTER_SANITIZE_STRING); 
		global $chk;
		if( get_option('dashboardbuilder-type') != $dashboardbuilder_type){
						 $chk = update_option( 'dashboardbuilder-type', $dashboardbuilder_type);
		}

}

?>
<div class="wrap">
  <h2>Dashboard Builder Settings</h2>
  <?php if(!empty($dashboardbuilder_hw_submit) && $chk):?>
  <div id="message" class="updated below-h2">
    <p>Settings successfully saved</p>
  </div>
  <?php endif;?>
  
  <div class="metabox-holder">
    <div class="postbox"><p style="padding:30px; ">This plugin provides users with the ability to connect any MySQL database of WordPress or any other database even outside of WordPress and create fully responsive, D3.js based dynamic line charts for you. Our Pro version of Dashboard Builder supports variety of charts such as line, scatter, bar, pie, donuts, bubble, stack, area, heatmap, sankey diagrams and choropleth map. for more information visit <a href="https://dashboardbuilder.net" target="_blank">https://dashboardbuilder.net</a></p>
      <form method="post" action="">
	  
	  <main>

		  <input class="tabs" id="tab1" type="radio" name="tabs" checked >
		  <label for="tab1">Database Settings</label>

		  <input class="tabs" id="tab2" type="radio" name="tabs">
		  <label for="tab2">SQL Query</label>

		  <input class="tabs" id="tab3" type="radio" name="tabs">
		  <label for="tab3">Chart Properties</label>

		  <input class="tabs" id="tab4" type="radio" name="tabs">
		  <label for="tab4">Chart Preferences</label>

		  <section id="content1">
		  <p></p>

			  <p><field>Database Host *:</field><input type="text" name="dashboardbuilder-host" value="<?php if(get_option('dashboardbuilder-host')){echo get_option('dashboardbuilder-host');}?>" placeholder="Enter database host" /></p>
			  <p><field>Database User *:</field><input type="text" name="dashboardbuilder-user" value="<?php if(get_option('dashboardbuilder-user')){echo get_option('dashboardbuilder-user');}?>" placeholder="Enter database user name" /></p>
			  <p><field>Database Password *:</field><input type="password" name="dashboardbuilder-password" value="<?php if(get_option('dashboardbuilder-password')){echo get_option('dashboardbuilder-password');}?>" placeholder="Enter database password " /></p>
			  <p><field>Database Name *:</field><input type="text" name="dashboardbuilder-name" value="<?php if(get_option('dashboardbuilder-name')){echo get_option('dashboardbuilder-name');}?>" placeholder="Enter database name" /></p>
		   <p></p>
		  </section>

		  <section id="content2">
			<p></p>
			 <p style="margin:20px;"><field></field><textarea rows="4" cols="50" name="dashboardbuilder-sql" placeholder="Enter SQL query"><?php if(get_option('dashboardbuilder-sql')){echo get_option('dashboardbuilder-sql');}?></textarea></p>
			<p>
			</p>
		  </section>

		  <section id="content3">
			<p></p>
			  <p><field>Chart type*:</field>
			  
			  <select class="form-control" id="type" name="dashboardbuilder-type"  value="<?php if(get_option('dashboardbuilder-type')){echo get_option('dashboardbuilder-type');}?>" >
										<option value="area" <?php if (get_option('dashboardbuilder-type')=='area'){?> selected <?php }?>>Area</option>
										<option value="bar" <?php if (get_option('dashboardbuilder-type')=='bar'){?> selected <?php }?>>Bar</option>
										<option value="line" <?php if (get_option('dashboardbuilder-type')=='line'){?> selected <?php }?>>Line</option>
										<option value="stack" <?php if (get_option('dashboardbuilder-type')=='stack'){?> selected <?php }?>>Stack</option>
										
			</select>
			  </p>
			  <p><field>X-axis *:</field><input type="text" name="dashboardbuilder-xaxis1" value="<?php if(get_option('dashboardbuilder-xaxis1')){echo get_option('dashboardbuilder-xaxis1');}?>" placeholder="Enter table column name" /></p>
			  <p><field>Y-axis *:</field><input type="text" name="dashboardbuilder-yaxis1" value="<?php if(get_option('dashboardbuilder-yaxis1')){echo get_option('dashboardbuilder-yaxis1');}?>" placeholder="Enter table column name" /></p>
			  <p><field>Trace Name:</field><input type="text" name="dashboardbuilder-trace1" value="<?php if(get_option('dashboardbuilder-trace1')){echo get_option('dashboardbuilder-trace1');}?>" placeholder="Enter Trace Name" /></p>
			  <p><field>Color code:</field><input type="text" name="dashboardbuilder-color1" value="<?php if(get_option('dashboardbuilder-color1')){echo get_option('dashboardbuilder-color1');}?>" placeholder="Enter hexa code e.g #0af;" /></p>
			  
			<p></p>
		  </section>

		  <section id="content4">
			<p></p>
			  
			  <p><field>X-axis Title:</field><input type="text" name="dashboardbuilder-xtitle1" value="<?php if(get_option('dashboardbuilder-xtitle1')){echo get_option('dashboardbuilder-xtitle1');}?>" placeholder="Enter X-axis Title" /></p>
			  <p><field>Y-axis Title:</field><input type="text" name="dashboardbuilder-ytitle1" value="<?php if(get_option('dashboardbuilder-ytitle1')){echo get_option('dashboardbuilder-ytitle1');}?>" placeholder="Enter Y-axis Title" /></p>
			  
			<p></p>
		  </section>

			<p><br/></p>
			<hr/><br/>
            <button type="submit" name="dashboardbuilder-hw-submit" value="Save changes" class="button-primary" />Save changes</button>
		
		</main>
	  
      </form>
	  <div style="padding:10px; ">
		 
		  <hr>
		  <h2>Get additional information</h2>
			<p>- Get the <a href="https://dashboardbuilder.net/install-on-wordpress" target="_blank">Quick Guide</a></p>
			<p>- Find solutions for your problems at <a href="https://dashboardbuilder.net/support" target="_blank">https://dashboardbuilder.net/support</a></p>
		</div>
    </div>
	
  </div>
</div>