<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Add Retailers</title>

    <!-- Bootstrap Core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="../vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<style>
	#tbl{width:100%; text-align:center;}
	#tbl th{padding:5px; background:dodgerblue; color:white; text-align:center;}
	#tbl td{padding:5px; text-align:center;}
	#tbl tr:nth-child(odd){background:#f7f8fe;}
	#tbl tr:nth-child(even){background:white; }
	
	.content{background:#f1f2f6; text-align:center; width:49%; padding:15px; border-radius:3px;}
	.content2{background:#f1f2f6; float:right; text-align:center; width:50%; padding:15px;
	border-radius:3px; overflow:auto;}
	.content2 img{width:100%;}
	@media (max-width: 768px)
	{
		.content{width:100%;}
		.content2{width:100%;}
	}
	
	.input-container {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;
  line-height:100%;
}

.icon {
  padding: 10px;
  background: dodgerblue;
  color: white;
  min-width: 50px;
  text-align: center;
  font-size:25px;
}

.input-field {
  width: 100%;
  padding: 10px;
  outline: none;
}

.input-field:focus {
  border: 2px solid dodgerblue;
}

/* Set a style for the submit button */
.btnForm {
  background-color: dodgerblue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
  font-size:25px;
}

.btnForm:hover {
  opacity: 1;
}

</style>
</head>

<body>

    <div id="wrapper">
        <!-- Navigation -->
		<?php
			include'navigation.php';
		?>
        <!-- Navigation -->
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Add New Retailer</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
				<div class="content2">
					<h2 style="color:dodgerblue;">Recent Added Retailers</h2>
					<table border="1" cellpadding="10" id="tbl">
						<tr>
							<th>Date</th>
							<th>User Id</th>
							<th>Name</th>
							<th>Mobile No.</th>
							<th>E-Mail Id</th>
							<th>City</th>
						</tr>
						<tr>
							<td>04/06/2020</td>
							<td>123456</td>
							<td>User1</td>
							<td>99999999</td>
							<td>user1@gmail.com</td>
							<td>Delhi</td>
						</tr>
						<tr>
							<td>04/06/2020</td>
							<td>123456</td>
							<td>User2</td>
							<td>99999999</td>
							<td>user2@gmail.com</td>
							<td>Calcutta</td>
						</tr>
						<tr>
							<td>04/06/2020</td>
							<td>123456</td>
							<td>User3</td>
							<td>99999999</td>
							<td>user3@gmail.com</td>
							<td>Mumbai</td>
						</tr>
					</table>
				</div>
				<div class="content">
				<form action="/action_page.php" style="max-width:500px;margin:auto">
					<h2 style="color:dodgerblue;">Register Form</h2>
					<div class="input-container">
						<i class="fa fa-user icon"></i>
						<input class="input-field" type="text" placeholder="Username" name="usrnm">
					</div>
					<div class="input-container">
						<i class="fa fa-mobile icon"></i>
						<input class="input-field" type="number" placeholder="Mobile" name="mobile">
					</div>
					<div class="input-container">
						<i class="fa fa-envelope icon"></i>
						<input class="input-field" type="text" placeholder="Email" name="email">
					</div>
					<div class="input-container">
						<i class="fa fa-home icon"></i>
						<textarea class="input-field" placeholder="Address" name="addr"></textarea>
					</div>
					<div class="input-container">
						<i class="fa fa-user icon"></i>
						<select class="input-field" name="parent">
							<option>--Select Distributer--</option>
							<option>First Distributer</option>
							<option>Second Distributer</option>
							<option>Third Distributer</option>
							<option>Fourth Distributer</option>
							<option>Fifth Distributer</option>
						</select>
					</div>

					<button type="submit" class="btnForm">Register</button>
					
				</form>
				</div>
            <!-- /.row -->
            
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->

    <!-- jQuery -->
    <script src="../vendor/jquery/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="../vendor/raphael/raphael.min.js"></script>
    <script src="../vendor/morrisjs/morris.min.js"></script>
    <script src="../data/morris-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>

</body>

</html>
