<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Sss Suppliers | Register</title>
	<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
	<link href="<?php echo base_url(); ?>assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" /> -->
	<link href="<?php echo base_url(); ?>assets/dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
	<link href="<?php echo base_url(); ?>assets/css/custom.css" rel="stylesheet" type="text/css" />
	<link href="<?php echo base_url(); ?>assets/css/register.css" rel="stylesheet" type="text/css" />
	<!-- Favicons -->
    <link href="<?php echo base_url(); ?>assets/images/logo/favicon.png" rel="icon">
    <link href="<?php echo base_url(); ?>assets/images/logo/favicon.png" rel="icon">
    <!-- Fonts Ubuntu -->
	<link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
		rel="stylesheet">
	<!-- Fonts Nunito -->
	<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap"
		rel="stylesheet">

	<link href="<?php echo base_url(); ?>assets/css/select2new.min.css" rel="stylesheet" type="text/css" />

</head>
<style type="text/css">
.span_err{
	color: red;
}
/*.container-checkbox {
	padding-left: 35px;
	padding-top: 7px;
	font: normal normal normal 16px/31px Nunito;
	letter-spacing: 0px;
	color: #333333;
	margin-bottom: 0px;
}*/
/*.checkmark {
	position: absolute;
	left: 15px;
	height: 25px;
	width: 25px;
	border: 2px solid #BBC6C8;
}*/
.fa-trash{
    color: red;
    font-size: 23px;
        margin-right: 10px;
}
.header-nav a.logo {
    font-size: 25px;
    font-weight: bold;
    padding-left: 20px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove 
{
	top: -24px;
}
.field_icon.toggle-password{
	position: absolute;
    top: 42px;
    right: 25px;
}
</style>

<?php 

// echo'<pre>'; print_r($country_data);
// echo'<pre>'; print_r($state_data);
// echo'<pre>'; print_r($store_types);

?>

<body class="login-page">
	<div class="header-nav"> 
		<div class="col-md-4"><a href="#" class="logo"><img src="<?php echo base_url();?>assets/images/logo/logo-white.svg" alt="Sss logo" class=""/></a></div>
	</div>
	
	<div class="container">
		<div class="row">
			<div class="signup">
				<div class="row">
					<div class="col-md-9">
						<h2 class="mt-0">Become a Seller</h2>
						<p class="sub-content">Complete form below to register as a seller.</p>
					</div>
					<div class="col-md-3">
					    <!--<p class="skip">Skip <img src="assets/images/icons/skip-icon.svg" alt="skip-icon"></p>-->
						<a class="" href="<?php  echo base_url();?>" style="font-size:12px"><i class="fa fa-angle-double-left" aria-hidden="true"></i> &nbsp;&nbsp;Back To Login</a>
					</div>
					<div class="col-md-12">
						<form id="regForm" action="" method="post">
							<!-- One "tab" for each step in the form: -->
							<div class="tab" id="tab1">
								<div class="row">
									<div class="row w-100 pl-4">
										<div class="col-md-2 hidden">
											<select name="select_type" id="select_type" class="select-mr">
												<option value="">Mr.</option>
												<option value="">Mrs.</option>
												<option value="">Ms.</option>
												<!--<option value="">Miss.</option>-->
											</select>
										</div>
										<div class="col-md-12">
											<div class="form-group">
												<label for="firstname">First Name</label>
												<input type="text" class="form-control" name="fname" id="fname"
													placeholder="Enter here">
												<span class="span_err" id="fname_err"></span>
											</div>
										</div>
										<div class="col-md-12">
											<div class="form-group">
												<label for="lastname">Last Name</label>
												<input type="text" class="form-control" name="lname" id="lname"
													placeholder="Enter here">
												<span class="span_err" id="lname_err"></span>
											</div>
										</div>
									</div>

									<div class="row w-100 pl-4 hidden">
										<div class="col-md-6 ">
											<div class="form-group">
												<label for="position">Position</label>
												<input type="text" class="form-control" name="pos" id="pos"
													placeholder="Enter here">
												<span class="span_err" id="pos_err"></span>
											</div>
										</div>
										<div class="col-md-12">
											<div class="form-group">
												<label for="company">Company</label>
												<input type="text" class="form-control" name="cname" id="cname"
													placeholder="Enter here">
												<span class="span_err" id="cname_err"></span>
											</div>
										</div>
									</div>

									<div class="row w-100 pl-4">
										<div class="col-md-12">
											<div class="form-group">
												<label for="phonenumber">Phone Number</label>
												<div class="row">
													<!--<div class="col-md-3 col-3">-->
													<!--	<select name="select_type" id="select_type" class="m-0">-->
													<!--		<option value="">+91</option>-->
													<!--	</select>-->
													<!--</div>-->
													<div class="col-md-12 col-9 pl-3">
														<input type="text" class="form-control" name="tel"
															id="tel" placeholder="Enter number">
														<span class="span_err" id="tel_err"></span>
													</div>
												</div>


											</div>
										</div>
										<div class="col-md-12">
											<div class="form-group">
												<label for="emailid">Email ID</label>
												<input type="email" class="form-control" name="email_add" id="email_add"
													placeholder="Enter Email ID">
											<span class="span_err" id="email_add_err"></span>
											</div>
										</div>
										
										<div class="col-md-12">
											<div class="form-group">
												<label for="username">Username</label>
												<input type="text" class="form-control" name="user_name" id="user_name"
													placeholder="Enter Username">
											<span class="span_err" id="email_add_err"></span>
											</div>
										</div>
										
										<div class="col-md-12">
											<div class="form-group">
												<label for="username">Password</label>
												<input type="password" class="form-control" name="pwd" id="pwd"
													placeholder="Enter Password">
											<span class="span_err" id="email_add_err"></span>
											</div>
											<label>Password Strength: </label><strong id="password_strength"></strong>
										</div>
									</div>

									<!-- div class="row w-100 pl-4 ">
										<div class="col-md-6">
											<div class="form-group">
												<label for="address">Address</label>
												<input type="text" class="form-control" name="address" id="address"
													placeholder="Address Line 1">
												<span class="span_err" id="address_err"></span>
											</div>
										</div>
										<div class="col-md-6 ">
											<div class="form-group">
												<input type="text" class="form-control input-mt" name="add_address"
													id="add_address" placeholder="Address Line 2">
												<span class="span_err" id="add_address_err"></span>
											</div>
										</div>
									</div -->

									<!-- div class="row w-100 pl-4">
										<div class="col-md-3">
											<div class="form-group">
												<label for="city">City</label>
												<input maxlength="32" pattern="[A-Za-z]{1,32}" type="text" class="form-control" name="city" id="city"
													placeholder="Enter here">
											<span class="span_err" id="city_err"></span>

											</div>
										</div>
										<div class="col-md-3">
											<div class="form-group">
												<label for="postalcode">Postal Code</label>
												<input type="text" class="form-control" name="post_code" id="post_code"
													placeholder="Enter here">
												<span class="span_err" id="post_code_err"></span>
											</div>
										</div>
										
										<div class="col-md-3">
											<div class="form-group">
												<label for="country">Country</label>
												<select name="country" id="country" class="mt-0">
													<option value="">Select Country</option>
												
													<?php if(!empty($country_data)){ 
                										foreach ($country_data as $key => $value) { ?>
                									    <option value="<?= $value['id'] ?>" <?php echo($value['id'] == 101 )?"selected":""; ?> ><?= $value['name'] ?></option>
                									<?php } } ?>
												</select>
												<span class="span_err" id="country_err"></span>
											</div>
										</div>
										
										<div class="col-md-3">
											<div class="form-group">
												<label for="state">State</label>
												<select name="state" id="state" class="mt-0">
													<option value="">Select State</option>
													<?php if(!empty($state_data)){ 
                									foreach ($state_data as $key => $value) { ?>
                									<option value="<?= $value['id'] ?>"  ><?= $value['name'] ?></option>
                									<?php } } ?>
												
												</select>
												<span class="span_err" id="state_err"></span>
											</div>
										</div> 
										
									</div -->

								</div>
							</div>
							<div class="tab" id="tab2">
								<div class="row">

									<!-- Ship Owner/ Manager -->
									<div class="row w-100 pl-4 ">
										<div class="col-md-5 pr-0">
											<div class="form-group">
												<label for="country">Country</label>
												<!-- <select name="select_country" id="select_country" class="mt-0">
													<option value="">Select Country</option>
													<option value="">India</option>
													<option value="">Usa</option>
												</select> -->
												<select id="port_country_first" name="port_country_first[]"  class="mt-0">
												<option  selected value="">Select Country</option>
												<?php if(!empty($country_data)){ 
													foreach ($country_data as $key => $value) { ?>
												<option value="<?= $value['id'] ?>"  ><?= $value['name'] ?></option>
												<?php } } ?>
											</select>
											<span class="span_err" id="port_country_first_err"></span>
											</div>
										</div>
										<div class="col-md-5 pr-0">
											<div class="form-group">
												<label for="port">Port</label>
												<select id="port_first" name="port_first[]" class="mt-0 selectpicker" multiple>
													<option  selected value="">Select Port</option>
												</select>
												<span class="span_err" id="port_first_err"></span>
											</div>
										</div>
										<!-- <span class="span_err" id="ports_err"></span> -->
										<div class="col-md-2 pl-0 text-center">
											<a href="#">
												<img src="assets/images/icons/add-button.svg" alt="add button"
													class="add-button fa fa-plus-circle fa-2x add_port">
											</a>
										</div>
										
										<div class="col-md-12 added_ports"></div>
										
										<div class="row w-100 pl-4 ">
										<div class="col-md-6">
											<div class="form-group">
												<label for="usename">Username</label>
												<input type="text" class="form-control" name="usename" id="usename"
													placeholder="Enter Username">
												<span class="span_err" id="usename_err"></span>
											</div>
										</div>
										<div class="col-md-6">
											<div class="form-group">
												<label for="password">Password</label>
												<input type="password" class="form-control" name="password"
													id="password" placeholder="Enter Password">
												<span toggle="#password-field" class="fa fa-fw fa-eye field_icon toggle-password"></span>
												<span class="span_err" id="password_err"></span>
											</div>
										</div>
									</div>
										<div class="col-md-12">
										    <p class="type-store">Type of stores & spares you may like to sell (Click at least 1 or more)</p>
										</div>
										<div class="col-md-12">
										
										    <label class="container-checkbox">Select All
                                              <input type="checkbox" id="sel_all">
                                              <span class="checkmark"></span>
                                            </label>
										</div>
										<div class="col-md-6">
										  <!--<label class="container-checkbox">Deck & Engine Stores-->
            <!--                              <input type="checkbox">-->
            <!--                              <span class="checkmark"></span>-->
            <!--                            </label>-->
                                            <label class="container-checkbox">&nbsp;&nbsp;Deck & Engine Stores
                                            <input type="checkbox" id="deck" name="store_type" value="1" class="wd-0 test">
                                            <span class="checkmark"></span>
									        </label>
									        <label class="container-checkbox">&nbsp;&nbsp;LSA,FFA,Safety Equipment
                                            <input type="checkbox" id="equipment" name="store_type" value="2" class="wd-0 test">
                                            <span class="checkmark"></span>
									        </label>
									        <label class="container-checkbox" >&nbsp;&nbsp;Electrical Tools & Equipment
                                            <input type="checkbox" id="electrical" name="store_type" value="3" class="wd-0 test">
                                            <span class="checkmark"></span>
									        </label>
									        <label class="container-checkbox" >&nbsp;&nbsp;Machinery & Machinery Spares
                                            <input type="checkbox" id="machinery" name="store_type" value="4" class="wd-0 test">
                                            <span class="checkmark"></span>
									        </label>
									        <label class="container-checkbox" >&nbsp;&nbsp;Port Machinery & Spares
                                            <input type="checkbox" id="port_machinery" name="store_type" value="5" class="wd-0 test" >
                                            <span class="checkmark"></span>
									        </label>
									        
										</div>
										<div class="col-md-6">
										    <!--<label class="container-checkbox">Saloon & Cabin Stores-->
              <!--                                <input type="checkbox">-->
              <!--                                <span class="checkmark"></span>-->
              <!--                              </label>-->
                                         <label class="container-checkbox" >&nbsp;&nbsp;Saloon & Cabin Stores
                                            <input type="checkbox" id="saloon" name="store_type" value="7" class="wd-0 test">
                                            <span class="checkmark"></span>
									        </label>
									         <label class="container-checkbox" >&nbsp;&nbsp;Marine Paints
                                            <input type="checkbox" id="marine" name="store_type" value="8" class="wd-0 test">
                                            <span class="checkmark"></span>
									        </label>
									         <label class="container-checkbox" >&nbsp;&nbsp;Navigation & Radio Equipment
                                            <input type="checkbox" id="navigation" name="store_type" value="9" class="wd-0 test">
                                            <span class="checkmark"></span>
									        </label>
									         <label class="container-checkbox" >&nbsp;&nbsp;Food Provisions & Slop Chest
                                            <input type="checkbox" id="food" name="store_type" value="10" class="wd-0 test">
                                            <span class="checkmark"></span>
									        </label>
									        <label class="container-checkbox" >&nbsp;&nbsp;Others
                                            <input type="checkbox" id="others" name="store_type" value="6" class="wd-0 test">
                                            <span class="checkmark"></span>
									        </label>
									        <br>
										</div>
										<span class="span_err" id="store_type_err"></span>
									</div>
								</div>
							</div>
							<div class="col-md-12 text-right pt-2 pb-3">
								<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous </button>
								<button type="button" id="nextBtn" onclick="nextPrev(1)">Next <i
								class="fas fa-arrow-right"></i></button>
							</div>
							<div class="alert alert-danger alert-dismissable " id="error_box" style="display: none;">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <p class="error_text"></p>
                            </div>
							<!-- Circles which indicates the steps of the form: -->
							<div class="d-none">
								<span class="step"></span>
								<span class="step"></span>
							</div>
						</form>
					</div>

				</div>
			</div>
		</div>
	</div>
	<!-- /.login-box -->

	<script type="text/javascript">
		var baseURL = "<?php echo base_url(); ?>";
	</script>
	<script src="<?php echo base_url(); ?>assets/js/jQuery-2.1.4.min.js"></script>
	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
	<script src="<?php echo base_url(); ?>assets/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="<?php echo base_url(); ?>assets/js/select2new.min.js" type="text/javascript"></script>
	<script src="<?php echo base_url()  ?>assets/js/script.js?v=210315"></script>
	<script>
    $(document).ready(function() {
	    $('#port_first').select2({
	      allowClear: true,
	      width: 270,
	      placeholder: "Select ports"
	  	});
    });
    
    // Password Strength
    function CheckPasswordStrength(password) {
var password_strength = document.getElementById("password_strength");

        //TextBox left blank.
        if (password.length == 0) {
            password_strength.innerHTML = "";
            return;
        }

        //Regular Expressions.
        var regex = new Array();
        regex.push("[A-Z]"); //Uppercase Alphabet.
        regex.push("[a-z]"); //Lowercase Alphabet.
        regex.push("[0-9]"); //Digit.
        regex.push("[$@$!%*#?&]"); //Special Character.

        var passed = 0;

        //Validate for each Regular Expression.
        for (var i = 0; i < regex.length; i++) {
            if (new RegExp(regex[i]).test(password)) {
                passed++;
            }
        }

        //Display status.
        var color = "";
        var strength = "";
        switch (passed) {
            case 0:
            case 1:
            case 2:
                strength = "Weak";
                color = "red";
                break;
            case 3:
                 strength = "Medium";
                color = "orange";
                break;
            case 4:
                 strength = "Strong";
                color = "green";
                break;
               
        }
        password_strength.innerHTML = strength;
        password_strength.style.color = color;

if(passed <= 2){
         document.getElementById('show').disabled = true;
        }else{
            document.getElementById('show').disabled = false;
        }

    }
	</script>
</body>

</html>
