<!DOCTYPE html>
<html lang="en">
<head>
	<!-- header -->
		<?php $this->load->view('admin/common_header'); ?>
	<!-- /header -->

	<!-- Theme JS files -->
	<script type="text/javascript" src="<?php echo base_url();?>assets/js/plugins/forms/styling/uniform.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url();?>assets/js/plugins/forms/styling/switchery.min.js"></script>
	<script type="text/javascript" src="<?php echo base_url();?>assets/js/plugins/forms/styling/switch.min.js"></script>

	<script type="text/javascript" src="<?php echo base_url();?>assets/js/core/app.js"></script>
	<script type="text/javascript" src="<?php echo base_url();?>assets/js/pages/form_checkboxes_radios.js"></script>
	<!-- /theme JS files -->

</head>

<body>

	<!-- Fixed navbars wrapper -->
	<div class="navbar-fixed-top">

		<!-- Main navbar -->
		<?php $this->load->view('admin/mainnav'); ?>
		<!-- /main navbar -->


		<!-- Second navbar -->
		<?php $this->load->view('admin/secondnav'); ?>
		<!-- /second navbar -->

	</div>
	<!-- /fixed navbars wrapper -->


	<!-- Page header -->
	<?php $this->load->view('admin/pageheader'); ?>
	<!-- /page header -->


	<!-- Page container -->
	<div class="page-container">

		<!-- Page content -->
		<div class="page-content">

			<!-- Main content -->
			<div class="content-wrapper">

				<input type="checkbox" class="switchery" checked="checked">
				<!-- Switchery toggles -->
				
				<!-- /switchery toggles -->


				<!-- Bootstrap switch -->
				<div class="panel panel-flat">
					<div class="panel-heading">
						<h5 class="panel-title">Bootstrap switch</h5>
						<div class="heading-elements">
							<ul class="icons-list">
		                		<li><a data-action="collapse"></a></li>
		                		<li><a data-action="reload"></a></li>
		                		<li><a data-action="close"></a></li>
		                	</ul>
	                	</div>
					</div>

					<div class="panel-body">
						<div class="row">
							<div class="col-md-6">
								<div class="content-group">
									<h6 class="text-semibold">Switch states</h6>
									<p>By default Bootstrap Switch supports standard attributes for checkboxes such as <code>disabled</code>, <code>checked</code> and <code>readonly</code> or use <code>true</code> or <code>false</code> in plugin options.</p>

									<div class="row">
										<div class="col-md-6">
											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" class="switch" data-on-text="On" data-off-text="Off" checked="checked">
													Checked switch
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-text="On" data-off-text="Off" class="switch" checked="checked" disabled="disabled">
													Checked disabled
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-text="On" data-off-text="Off" class="switch" readonly="readonly" checked="checked">
													Checked readonly
												</label>
											</div>
										</div>

										<div class="col-md-6">
											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-text="On" data-off-text="Off" class="switch">
													Unchecked switch
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-text="On" data-off-text="Off" class="switch" disabled="disabled">
													Unchecked disabled
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-text="On" data-off-text="Off" class="switch" readonly="readonly">
													Unchecked readonly
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="col-md-6">
								<div class="content-group">
									<h6 class="text-semibold">Switch colors</h6>
									<p>You can change the default color of the switch by choosing one of 6 predefined classes and use them in <code>data-on-color</code> and <code>data-off-color</code> attributes.</p>

									<div class="row">
										<div class="col-sm-6">
											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" class="switch" data-on-text="On" data-off-text="Off" data-on-color="default" data-off-color="danger" checked="checked">
													Default color
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" class="switch" data-on-text="On" data-off-text="Off" data-on-color="primary" data-off-color="default" checked="checked">
													Primary color
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" class="switch" data-on-text="On" data-off-text="Off" data-on-color="danger" data-off-color="default" checked="checked">
													Danger color
												</label>
											</div>
										</div>

										<div class="col-sm-6">
											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" class="switch" data-on-text="On" data-off-text="Off" data-on-color="success" data-off-color="default" checked="checked">
													Success color
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" class="switch" data-on-text="On" data-off-text="Off" data-on-color="warning" data-off-color="default" checked="checked">
													Warning color
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" class="switch" data-on-text="On" data-off-text="Off" data-on-color="info" data-off-color="default" checked="checked">
													Info color
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>

						<div class="row">
							<div class="col-md-6">
								<div class="content-group">
									<h6 class="text-semibold">Switch sizes</h6>
									<p>Default height is equal to input field height, but you can also choose one of 4 available sizes (large, small and mini) by changing <code>data-size</code> attribute.</p>

									<div class="row">
										<div class="col-md-6">
											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" class="switch" data-on-text="On" data-off-text="Off" data-size="large" checked="checked">
													Large switch
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-text="On" data-off-text="Off" class="switch" data-size="small" checked="checked">
													Small switch
												</label>
											</div>
										</div>

										<div class="col-md-6">
											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-text="On" data-off-text="Off" class="switch" checked="checked">
													Default switch
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-text="On" data-off-text="Off" class="switch" data-size="mini" checked="checked">
													Mini switch
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>

							<div class="col-md-6">
								<div class="content-group">
									<h6 class="text-semibold">Label options</h6>
									<p>Labels support any text or icon via <code>data-on-text</code> and <code>data-off-text</code> attributes. If no custom text specified, switch will display default on/off text.</p>

									<div class="row">
										<div class="col-md-6">
											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-off-color="danger" data-on-text="Yes" data-off-text="No" class="switch" checked="checked">
													Default text
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-color="warning" data-off-color="info" data-on-text="<i class='icon-link'></i>" data-off-text="<i class='icon-unlink'></i>" class="switch" checked="checked">
													Icons only
												</label>
											</div>
										</div>

										<div class="col-md-6">
											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-color="danger" data-off-color="primary" data-on-text="Enable" data-off-text="Disable" class="switch" checked="checked">
													Enable/Disable
												</label>
											</div>

											<div class="checkbox checkbox-switch">
												<label>
													<input type="checkbox" data-on-color="success" data-off-color="danger" data-on-text="Online" data-off-text="Offline" class="switch" checked="checked">
													Online/Offline
												</label>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!-- /bootstrap switch -->

			</div>
			<!-- /content wrapper -->

		</div>
		<!-- /page content -->


		<!-- Footer -->
		<div class="footer text-muted">
			<?php echo site_footer();?>
		</div>
		<!-- /footer -->

	</div>
	<!-- /page container -->

</body>
</html>
