<?php
    session_start();
if(isset($_SESSION['userId'])){

}else{
//header("location: ../../login.php");
echo "
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
 <script>
     let pageUrl=window.location.href;
     let url=new URL(pageUrl);
     let param_authenticate=url.searchParams.get('authenticate');
     
     
       let checkParameterIsEmpty=(param)=>{
           if(param){
               return !$.trim(param);
           }else{
            return true;
           }
     }
      let param_userId=url.searchParams.get('userId');
      let param_userName=url.searchParams.get('userName');
      let param_userMail=url.searchParams.get('userMail');  
      let param_teamLeads=url.searchParams.get('teamLeads');
      
      let parameters=(param_authenticate=='mobileView' && !checkParameterIsEmpty(param_userId) && !checkParameterIsEmpty(param_userName) && !checkParameterIsEmpty(param_userMail) && !checkParameterIsEmpty(param_teamLeads));
     if(parameters){
               $.ajax({
                type: 'POST',
                url: '../../php/logInData.php',
                data: {
                    empid: param_userId,
                    empname: param_userName,
                    empemail: param_userMail,
                    department:param_teamLeads,
                    deviceType:param_authenticate
                    }, // posting values of employe {id,name,department} to logInData.php to store sessions
                success: function (data) {
                        
                            }
                        });
     }else{
      window.location = '../../login.php';
     }
     
     
   
 </script>";

        }

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

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Add site</title>
	<!-- Bootstrap CSS -->
	
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
	<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" ></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" ></script>


	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<style>
		@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

		body {
			font-family: 'Poppins', sans-serif;
			height:100vh;
			font-size: 0.8rem;

		}
		:root{
		    --theme-color:#5664d2;
		}
		.text-theme-color{
                color: var(--theme-color);
        }
         select  option:hover{
            background-color:var(--theme-color)!important;
        }
        .btn-theme-type1{
            color:#fff!important;
            background-color:var(--theme-color)!important;
            border-radius:28px!important;
            font-size:14px!important;
            box-shadow:none!important;
        }
        .btn-theme-type1:hover{
            color:var(--theme-color)!important;
            background-color:#fff!important;
            border-color:var(--theme-color)!important;
        }

		/* Chrome, Safari, Edge, Opera */
		input::-webkit-outer-spin-button,
		input::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}

		/* Firefox */
		input[type=number] {
			-moz-appearance: textfield;
		}

		/*
        .required::after {
            content: " *";
            color: red;
        }
*/


		/*h2 {*/
		/*	line-height: 1.66;*/
		/*	margin: 0;*/
		/*	padding: 0;*/
		/*	font-weight: bold;*/
		/*	color: #222;*/
		/*	font-family: Poppins;*/
		/*	font-size: 36px;*/
		/*}*/

		.site-content {
			padding: 10px 0;
		}


		.row.form-container {
			width: 650px;
			background: #fff;
			margin: 0 auto;
			box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
			-moz-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
			/* -webkit-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05); */
			-o-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
			-ms-box-shadow: 0px 15px 16.83px 0.17px rgba(0, 0, 0, 0.05);
			border-radius: 20px;
			-moz-border-radius: 20px;
			-webkit-border-radius: 20px;
			-o-border-radius: 20px;
			-ms-border-radius: 20px;
		}

		.main {
		    display:flex;
			background: #f8f8f8;
			padding: 10px 0;
            align-items: center;
		}

		.form-group {
			position: relative;
			margin-bottom: 10px;
			overflow: hidden;
		}
		input#poNumber{
		    border:0px!important;
		    border-bottom: 1px solid #9999994f!important;
			padding:2px 10px 2px 44px!important;
			font-size: 13.3333px!important;
			border-radius:0px;
			box-shadow:none!important;
		}

		input,
		select {
			width: 100%;
			height: 50px;
			display: block;
			border: none;
			border-bottom: 1px solid #9999994f;
			/*padding: 2px 33px;*/
			padding:2px 10px 2px 44px;
			font-family: Poppins;
			box-sizing: border-box;
			outline: 0;
			font-size: 13.3333px;
		}

		input:focus,
		select:focus {
			border-bottom: 1px solid #222;

		}

		input:focus::-webkit-input-placeholder {
			color: #222;
			opacity: 1;
			/* Firefox */
		}

		label {
			position: absolute;
			left: 26px;
			top: 50%;
			transform: translateY(-50%);
			-moz-transform: translateY(-50%);
			-webkit-transform: translateY(-50%);
			-o-transform: translateY(-50%);
			-ms-transform: translateY(-50%);
			color: #222;
			font-size: 14px;
		}

		.material-icons-name {
			font-size: 18px;
		}

		label img {
			height: 12px;

		}

		/*.add-site-btn {*/
		/*	width: 20%;*/
		/*	display: inline-block;*/
		/*	background: var(--theme-color);*/
		/*	color: #fff;*/
		/*	border-bottom: none;*/
		/*	width: auto;*/
		/*	padding: 15px 39px;*/
		/*	border-radius: 5px;*/
		/*	-moz-border-radius: 5px;*/
		/*	-webkit-border-radius: 5px;*/
		/*	-o-border-radius: 5px;*/
		/*	-ms-border-radius: 5px;*/
		/*	margin-top: 25px;*/
		/*	cursor: pointer;*/
		/*	border: 0;*/
		/*	box-shadow: 3px 2px 9px 2px #35333329;*/
		/*}*/

		/*.add-site-btn.btn.btn-primary:hover,*/
		/*.add-site-btn.btn.btn-primary:active,*/
		/*.add-site-btn.btn.btn-primary:active:focus {*/
		/*	color: #fff;*/
		/*	background-color: #222222;*/
		/*	border-color: #222222;*/
		/*	box-shadow: 1px 1px 5px #020202;*/

		/*}*/

		.navbar.navbar-expand-lg {
			background-color: #ffffff !important;
			box-shadow: 1px 1px 3px 1px #00000012;
			position: sticky;
			top: 0;
			z-index: 10;
		}


		.navbar a img {
			height: 60px;
			padding-left: 35px;
		}

		.navbar-light .navbar-nav .nav-link {
			color: #000;
		}

		.navbar-light .navbar-nav .nav-link.active {
			color: var(--theme-color);
		}

		.navbar-light .navbar-nav .nav-link:focus,
		.navbar-light .navbar-nav .nav-link:hover {
			color: var(--theme-color);
		}


		#searchText {
			text-align: center;
			border-radius: 19px;
			padding: 7px 20px;
			border-color: var(--theme-color);
			font-size: 14px;
		}

		.btn-outline-primary {
			background: var(--theme-color);
			border-radius: 50px;
			color: #fff;
			padding: 6px 20px;
		}

		/*        */


		.field {
			display: flex;
			flex-flow: column-reverse;
			margin-bottom: 1em;
		}

		label,
		input {
			transition: all 0.2s;
			touch-action: manipulation;
		}



		input:focus {
			outline: 0;
			border-bottom: 1px solid #666;
		}


		.txt {
			top: 2px;
			font-size: 10px;
			left: 20.7%;
			color: var(--theme-color);
		}

		input+label {
			cursor: text;
			overflow: hidden;
			text-overflow: ellipsis;
			transform-origin: left bottom;
			transform: translate(0, 1.125rem) scale(1.5);
		}

		::-webkit-input-placeholder {
			opacity: 0;
			transition: inherit;
		}

		input:focus::-webkit-input-placeholder {
			opacity: 1;
		}

		input:not(:placeholder-shown)+label,
		input:focus+label {
			transform: translate(0, 0) scale(1);
			cursor: pointer;
		}
		.cursor-pointer{
		    cursor:pointer;
		}

		.note {
			PADDING-LEFT: 17px;
			FONT-SIZE: 9px;
			margin-bottom: 10px;
		}

		.note span {
			color: #f10101;
		}

		#circle{
			padding: 2px 15px 2px 44px;
		}
	    #district {
			padding: 2px 15px 2px 30px;
		}

		/*media query*/
		@media only screen and (max-width:991px) {
			.main {
				padding: 20px 0;
			}

			.row.form-container {
				width: auto;
			}

			select {
				padding: 6px 35px;
			}
		}

		@media only screen and (max-width:767px) {
			#addSiteForm h3 {
				text-align: center;
                font-size: 20px;
                padding-top:20px;
                margin-bottom:20px!important;
			}

			.note {
				PADDING-LEFT: 55px;
			}

			.txt {
				left: 16.5% !important;
			}

			#addSiteSubmitBtn {
				margin-left: 51px;
			}

			select {
				padding: 6px 55px;
			}
			#AddBulkSiteLink{
			    margin-left: 51px;
			}
		}

	</style>
</head>

<body>
	<!-- Navbar start -->
	<nav class="navbar navbar-expand-lg bg-dark navbar-light">
		<a class="navbar-brand" href="./index.php">
			<img src="../public/pacslogo.jpg" alt="Navbar" />
		</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent">
			<ul class="navbar-nav ml-auto pr-5">
                <?php
                    if($_SESSION['deviceType']=='PC'){
                    echo '<li class="nav-item pr-2">'
                            .'<a class="nav-link" href="../../">Home<span class="sr-only">(current)</span></a>'
                         .'</li>';
                    }
                ?>
				<li class="nav-item pr-2">
					<a class="nav-link" href="../">All Sites <span class="sr-only">(current)</span></a>
				</li>
				<li class="nav-item pr-2">
					<a class="nav-link active" href="addSite.php">Add Site</a>
				</li>
			</ul>

		</div>
	</nav>

	<!-- Navbar end -->
	<div class="main">
		<div class="container">


			<div class="row form-container justify-content-md-center my-5">
				<div class="col-md-10 col-sm-12 site-content py-4">
					<form id="addSiteForm">
						<h3 class="mb-4 font-weight-bold">Add New Site Details</h3>


						<div class="row">
							<div class="form-group col-md-6 col-10 mx-auto mb-0">
								<label for="siteId"><i class="fa fa-id-card" aria-hidden="true"></i></label>
								<input type="text" id="siteId" name="siteId" placeholder=" " maxlength="30" required />
								<label for="siteId" class="txt">Site Id</label>
							</div>

							<div class="form-group col-md-6 col-10 mx-auto mb-0">
								<label for="siteName"><img src="antenna.png" style="height: 17px;" /></label>
								<input type="text" id="siteName" name="siteName" placeholder=" " required />
								<label for="siteName" class="txt">Site name</label>
							</div>
							<p class="note"><span>NOTE:-</span>Max 30 characters allowed.</p>
						</div>

						<div class="row">
							<div class="form-group col-md-6 col-10 mx-auto" style="margin-bottom: 10px;">
								<label for="latitude"><i class="fa fa-map-marker"></i></label>
								<input type="text" id="latitude" name="latitude" placeholder=" " required />
								<label for="latitude" class="txt">Latitude</label>
							</div>

							<div class="form-group col-md-6 col-10 mx-auto" style="margin-bottom: 10px;">
								<label for="longitude"><i class="fa fa-map-marker"></i></label>
								<input type="text" id="longitude" name="longitude" placeholder=" " required />
								<label for="longitude" class="txt">Longitude</label>
							</div>
							<p class="note"><span>NOTE:-</span> If Latitude Or Longitude values not available enter 0(zero).</p>
						</div>
						<div class="row">
							<div class="form-group col-md-6 col-10 mx-auto">
								<label for="circle"><i class="fa fa-street-view"></i></label>
								<select id="circle" name="circle" placeholder=" " required></select>
								<label for="circle" class="txt" style="left: 22%;top:6px">Circle</label>

							</div>

							<div class="form-group  col-md-6 col-10 mx-auto">
								<label for="customerName"><img src="user.png" /></label>
								<select id="customerName" name="customerName" placeholder=" " required>
								</select>
								<label for="customerName" class="txt" style="top: 6px;left: 22%;">Customer Name</label>
							</div>
						</div>
						<div class="form-group col-md-12 col-10 mx-auto">
							<label for="district" style="left: 12px;"><i class="fa fa-map-pin"></i></label>
							<input type="text" id="district" name="district" placeholder=" " />
							<label for="district" class="txt" style="left: 8.1%;">District</label>
						</div>
					

						<div>
							<!--                          <input type="submit" value="Add site" class=" add-site-btn btn btn-primary" />-->
							<button type="submit" id="addSiteSubmitBtn" class="btn btn-theme-type1 px-4">Add site<i id="addSiteSpinner" class='fa fa-spinner d-none fa-spin ' aria-hidden='true'></i></button>
						</div>
					</form>
					<div id="msgPanel" class="panel mt-3"></div>
					<div id="AddBulkSiteLink" class="font-weight-bold" style="font-size: 10px;">Click here to add Bulk site Details<a href="../convert%20Excel%20to%20HTML/" class="ml-2 font-weight-light text-theme-color" target="_blank">clik here</a></div>
				</div>
			</div>
			<div class="text-center">
			    <?php
			        session_start();
			        include_once dirname(__FILE__) .'/../../php/constants.php';
			         if($_SESSION["teamLeads"]==TL_DEPARTMENT){
			            echo '<button id="assignEmployeeModalPopBtn" class="btn btn-theme-type1 px-4 d-none" data-toggle="modal" data-target="#commonModalPopup">Assign Engineer +</button>';
			        }
			    ?>
			   
			</div>
		</div>
	</div>
	<div id="commonModalPopup" class="modal fade">
	    <div class="modal-dialog modal-xl">
	        <div class="modal-content">
	        </div>
	    </div>
	</div>
	<div class="container">
	    <table id="sitePo_and_empDetailsTable" class="table d-none" style="background: #fff;">
         <thead>
             <tr>
                 <th>S.No</th>
                 <th>SiteId</th>
                 <th>PO Number</th>
                 <th>Project</th>
                 <th>Stage Of Audit</th>
                 <th>EmpId</th>
                 <th>EmpName</th>
                 <th>Site AssignedDate</th>
                 <th>Site Visit Status</th>
                 <!--<th>Operations</th>-->
             </tr>
         </thead>
         <tbody></tbody>
     </table>
	</div>
    <script>
        var loggedUserId=<?php session_start(); echo json_encode($_SESSION["userId"]) ?>;
        var loggedUserName=<?php session_start(); echo json_encode($_SESSION["userName"])?>;
    </script>
	<script src="../../js/constants.js?version= 1.8"></script>
	<script src="../../js/checkInternet_connection.js?version= 1.5"></script>
	<script src="../../js/dynamicDropdown_of_project_&_stageOfAudit.js?version=1.0"></script>
	<script src="../js/httpRequest.js?version= 1.4"></script>
	<script src="../js/addSite.js?version= 1.5"></script>
	<script src="../js/sitePODetails.js?version=0.1"></script>
</body>

</html>
