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

}else{
header("location: ../../login.php");
        }
                                    
?>
<!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" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.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;

        }

        /* 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: 75px 0;
        }


        .row.form-container {
            width: 900px;
            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 {
            background: #f8f8f8;
            padding: 150px 0;
        }

        .form-group {
            position: relative;
            margin-bottom: 25px;
            overflow: hidden;
        }

        input,
        select {
            width: 100%;
            height: 50px;
            display: block;
            border: none;
            border-bottom: 1px solid #9999994f;
            padding: 6px 50px;
            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: #009edb;
            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: #009edb;
        }

        .navbar-light .navbar-nav .nav-link:focus,
        .navbar-light .navbar-nav .nav-link:hover {
            color: rgb(0 158 219);
        }


        #searchText {
            text-align: center;
            border-radius: 19px;
            padding: 7px 20px;
            border-color: #009edb;
            font-size: 14px;
        }

        .btn-outline-primary {
            background: #04a0dc;
            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: 16.7%;
            color: #009edb;
        }

        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;
        }

        #note {
            PADDING-LEFT: 17px;
            FONT-SIZE: 9px;
            margin-bottom: 25px;
        }

        #note span {
            color: #f10101;
        }

        #circle,
        #district {
            padding: 6px 35px;
        }

        /*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 h2 {
                text-align: center;

            }

            #note {
                PADDING-LEFT: 55px;
            }

            .txt {
                left: 16.5% !important;
            }

            #search {
                margin-left: 51px;
            }

            select {
                padding: 6px 55px;
            }
        }

    </style>
</head>

<body>
    <!-- Navbar start -->
    <nav class="navbar navbar-expand-lg bg-dark navbar-light">
        <a class="navbar-brand" href="./index.php">
            <img src="../images/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">
                <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="../">Search FTA<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item pr-2">
                    <a class="nav-link active" href="addSite.php">Add New FTA</a>
                </li>
            </ul>

        </div>
    </nav>

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


            <div class="row form-container justify-content-md-center">
                <div class="col-md-10 col-sm-12 site-content">
                    <form id="addSiteForm">
                        <h2 class="mb-4">Add New FTA Details</h2>


                        <div class="row">
                            <div class="form-group col-md-6 col-10 mx-auto">
                                <label class="required" for="empId"><i class="fa fa-id-card" aria-hidden="true"></i></label>
                                <input type="number" id="empId" name="empId" placeholder=" " required />
                                <label for="empId" class="txt">Emp-Id</label>
                            </div>

                            <div class="form-group col-md-6 col-10 mx-auto">
                                <label class="required" for="empName"><img src="antenna.png" style="height: 17px;" /></label>
                                <input type="text" id="empName" name="empName" placeholder=" " required />
                                <label for="empName" class="txt">Emp Name</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="form-group col-md-6 col-10 mx-auto">
                                <label for="siteId"><i class="fa fa-street-view"></i></label>
                                <input type="text" id="siteId" name="siteId" placeholder=" " required />
                                <label for="siteId" class="txt">Site Id</label>
                                <button id="getLatLong" class="btn position-absolute"  type="button" style="right: 15px;top: 4px;">get Lat-Lon</button>
                            </div>

                            <div class="form-group col-md-6 col-10 mx-auto" style="margin-bottom: 10px;">
                                <label class="required" for="siteVisitDate"><i class="fa fa-calendar"></i></label>
                                <input type="date" id="siteVisitDate" name="siteVisitDate" placeholder=" " required />
                                <label for="siteVisitDate" class="txt">Site Visit Date</label>
                            </div>
                            <!--                            <p id="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="siteLat"><i class="fa fa-map-pin"></i></label>
                                <input type="text" id="siteLat" name="siteLat" placeholder=" " required />
                                <label for="siteLat" class="txt">Site Latitude</label>
                            </div>

                            <div class="form-group col-md-6 col-10 mx-auto">
                                <label for="sitelong"><i class="fa fa-map-pin"></i></label>
                                <input type="text" id="sitelong" name="sitelong" placeholder=" " required />
                                <label for="sitelong" class="txt">Site Longitude</label>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="form-group col-md-6 col-10 mx-auto">
                                <label for="userLat"><i class="fa fa-map-pin"></i></label>
                                <input type="text" id="userLat" name="userLat" placeholder=" " required />
                                <label for="userLat" class="txt">User Latitude</label>
                            </div>

                            <div class="form-group col-md-6 col-10 mx-auto">
                                <label for="userLong"><i class="fa fa-map-pin"></i></label>
                                <input type="text" id="userLong" name="userLong" placeholder=" " required />
                                <label for="userLong" class="txt">User Longitude</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6 col-10 mx-auto" style="margin-bottom: 10px;">
                                <label class="required" for="siteVisitOrder"><i class="fa fa-list-ol"></i></label>
                                <select id="siteVisitOrder" name="siteVisitOrder" placeholder=" " required>
                                    <option value="1" selected>1</option>
                                    <option value="2" >2</option>
                                    <option value="3" >3</option>
                                    <option value="4" >4</option>
                                    <option value="5" >5</option>
                                    <option value="6" >6</option>
                                    <option value="7" >7</option>
                                    <option value="8" >8</option>
                                    <option value="9" >9</option>
                                    <option value="10" >10</option>
                                </select>
                                
                                <label for="siteVisitOrder" class="txt" style="top:5px">Site Visit Order</label>
                            </div>
                            <div class="form-group col-md-6 col-10 mx-auto">
                                <label for="distance"><i class="fa fa-arrows"></i></label>
                                <input type="number" id="distance" name="distance" step="0.0001" placeholder=" " required />
                                <label for="distance" class="txt">Distance</label>
                                  <button id="getKM" class="btn position-absolute" type="button" style="right: 15px;top: 4px;">get KM</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-md-6 col-10 mx-auto">
                                <label for="userLntAddress"><i class="fa fa-address-book"></i></label>
                                <input type="text" id="userLntAddress" name="userLntAddress" placeholder=" " required />
                                <label for="userLntAddress" class="txt">User Location Address</label>
                            </div>

                            <div class="form-group col-md-6 col-10 mx-auto">
                                <label for="FTA"><i class="fa fa-map-marker"></i></label>
                                <select id="FTA" name="FTA" placeholder=" " required>
                                    <option value="0.00" selected>0.00</option>
                                    <option value="100.00">100.00</option>
                                </select>
                                <label for="FTA" class="txt" style="top:5px">FTA</label>
                            </div>
                        </div>
                        <div class="row">
                            <!--<div class="form-group col-md-6 col-10 mx-auto">
                                <label for="siteLogoutCompleted"><i class="fa fa-sign-out"></i></label>
                                <select id="siteLogoutCompleted" name="siteLogoutCompleted" placeholder=" " required>
                                    <option value="0">0</option>
                                    <option value="1" selected>1</option>
                                </select>
                                                                <input type="text" />
                                <label for="siteLogoutCompleted" class="txt" style="top:5px">Site Logout Completed</label>
                            </div>
-->
                            <div class="form-group col-md-12 col-10 mx-auto">
                                <label for="uniqueId"><i class="fa fa-bolt"></i></label>
                                <input type="text" id="uniqueId" name="uniqueId" placeholder=" " required />
                                <label for="uniqueId" class="txt" style="left: 8.3%;">Unique Id</label>
                                <button id="getUniqueid" class="btn position-absolute" type="button" style="right: 15px;top: 4px;">get UniqueId</button>
                            </div>
                        </div>
                        <div>
                            <!--                          <input type="submit" value="Add site" class=" add-site-btn btn btn-primary" />-->
                            <button type="submit" id="search" class="add-site-btn btn btn-primary">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>
            </div>
        </div>
    </div>

    <script src="../../js/constants.js"></script>
    <script src="../js/common.js"></script>
    <script src="../js/addSite.js"></script>
    <script src="../js/checkSessionState.js"></script>
</body>

</html>
