@extends('users.layout.header_footer')
@section('content')
    <title>Add Location</title>
    <link href="{!! asset('theme/user_theme/css/sb-admin-2.min.css') !!}" rel="stylesheet">
    <link href="{!! asset('theme/user_theme/css/main.css') !!}" rel="stylesheet">

<style>
    .fadeInRight {
        -webkit-animation-name: fadeInRight;
        animation-name: fadeInRight;
    }

    @keyframes fadeInRight {
        from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        }

        to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        }
    }

    @-webkit-keyframes fadeInRight {
        from {
        opacity: 0;
        -webkit-transform: translate3d(100%, 0, 0);
        transform: translate3d(100%, 0, 0);
        }

        to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        }
    }

    .modal-dialog {
        /* margin: 0; */
        margin: -10px;
        float: right;
        width: 300px;
    }

    .animated {
        -webkit-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .modal-header {
        border-radius: 0;
        background-color: #f7f7f7;
        border-color: #d4d2d2;
        align-items: center;
        padding: 1.2rem;
    }

    .modal-content {
        border-radius: 0;
        border: 0;
        -webkit-box-shadow: -12px 0 38px -14px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: -12px 0 38px -14px rgba(0, 0, 0, 0.25);
        box-shadow: -12px 0 6px -14px rgba(0, 0, 0, 0.25);
        background-clip: padding-box;
        border-color: #d7d7d7;
    }

    .modal-backdrop {
        background-color: transparent;
    }

    .modal-button-container {
        margin: 0 auto;
        width: 90%;
        max-width: 500px;
    }

    .btn {
        border-radius: 0;
    }

    .autosidemodalarea {
        float: right;
    }
    h5.redsback {
        background: #ee4049;
        color: white;
        text-align: center;
        font-size: 11px;
        padding: 2px;
        border-radius: 5px;
        /* margin-bottom: -5px; */
    }
    h6.greensback {
        background: #8dbd5c;
        color: white;
        text-align: center;
        font-size: 10px;
        padding: 2px;
        border-radius: 5px;
    }
    .mobbord {
        border: 1px solid #d7d7d7;
        width: inherit;
    }
    .col-sm-12.mobbordarea {
        display: flex;
        text-align: center;
    }
    .mobinp {
        width: 115%;
        border: 1px solid #d7d7d7;
        border-radius: 1px;
    }
    .entnumb {
        width: 100%;
        border: 1px solid #d7d7d7;
        border-radius: 1px;
        margin-top: 11px;
        padding: 12px;
    }
    .mobbord span {
        color: #8dbd5c;
        font-size: 12px;
    }
    .mobbord {
        font-size: 18px;
        padding-top: 2px;
    }
    .calldialclick {
        background: #8dbd5c;
        border-color: #8dbd5c;
        width: 107%;
    }
    .backdialclick {
        float: right;
        border-color: #d7d7d7;
        background: transparent;
        color: #ababab;
        width: 50px;
    }
    .sidemodallastcli {
        margin-top: 10px;
    }
    .modalopclick {
        background: #515252;
        color: white !important;
        border: 0px solid;
        /* margin-top: 125%; */
        padding: 0px 7px;
    }
    .modalopclick a {
        color: white;
        font-size: 14px;
        font-weight: 800;
        background: #515252;
        border: none;
        padding-top: 0px;
    }
    .mobbord:hover {
        background: #00000008;
        cursor: pointer;
    }
    .calldialclick:hover {
        background: #8dbd5cc2;
        border-color: #8dbd5cc2;
    }
    .backdialclick:hover {
        background: #8dbd5c;
        border-color: #8dbd5c;
        color: white;
    }
    .mobilmodabod {
        margin-top: 168px;
    }
    .crossmobile {
        float: left;
        background: #383838;
        height: 25px;
        width: 22px;
        color: #ffffff !important;
    }
</style>


<div id="content">
    <nav
      class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow"
    >
      <button
        id="sidebarToggleTop"
        class="btn btn-link d-md-none rounded-circle mr-3"
      >
        <i class="fa fa-bars"></i>
      </button>

      <div
        class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search"
      >
      <h1 class="pegheading">Create Location</h1>
      </div>

    

      <!-- Topbar Navbar -->
      <ul class="navbar-nav ml-auto">
        <!-- Nav Item - Search Dropdown (Visible Only XS) -->
        <li class="nav-item dropdown no-arrow d-sm-none">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="searchDropdown"
            role="button"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <i class="fas fa-search fa-fw"></i>
          </a>
          <!-- Dropdown - Messages -->
          <div
            class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in"
            aria-labelledby="searchDropdown"
          >
            <form class="form-inline mr-auto w-100 navbar-search">
              <div class="input-group">
                <input
                  type="text"
                  class="form-control bg-light border-0 small"
                  placeholder="Search for..."
                  aria-label="Search"
                  aria-describedby="basic-addon2"
                />
                <div class="input-group-append">
                  <button class="btn btn-primary" type="button">
                    <i class="fas fa-search fa-sm"></i>
                  </button>
                </div>
              </div>
            </form>
          </div>
        </li>


        <!-- Nav Item - User Information -->
        
      </ul>
    </nav>
    <!-- End of Topbar -->

    <!-- Begin Page Content -->

    <div class="container-fluid">
      <!-- Page Heading -->
      <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <!-- <h1 class="pegheading">Assets</h1> -->
        <!-- <button type="button" class="btn btn-primary backdash">
          <i class="fa fa-arrow-left" aria-hidden="true"></i> Back to
          Construction V3 Dashboard
        </button> -->
        <div class="maintpsmall">
         
        </div>
        <!-- <a
          href="#"
          class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"
          > <i class="fas fa-download fa-sm text-white-50"> </i>  add Module</a
        > -->
      </div>
      <div class="row">
        <div class="col-sm-12">             
          <form>
            <div class="row">
              <div class="col-sm-8 fghfle">                     

              </div>
              <div class="col-sm-4">
                <div class="topribtn">                        
                  <button type="button" class="btn btn-primary ghty">Cancel</button>
                  <button type="button" class="btn btn-primary ghty"><i class="fa fa-check" aria-hidden="true"></i> Done</i></button>
                </div>
              </div>
             
            </div>
          </form>
        </div>
      </div>  
      
      

      <div class="row">
        <div class="col-sm-12">
          <div class="locionformdata">
            <form>
                <div class="form-check duto">
                    <input class="form-check-input bull" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" checked>
                    <label class="form-check-label" for="exampleRadios1">
                        Provide coordinates of this location
                    </label>
                  </div>                       
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Name*</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail1" placeholder="Name">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Identification Number*</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Identification Number">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Address Line 1*</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Address Line 1">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Address Line 2*</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Address Line 2">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">City*</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="City">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">State*</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="State">
                    </div>
                </div>                
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Zip Code*</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Zip Code">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Country*</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="inputEmail3" placeholder="Country">
                    </div>
                </div>
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Next Location under*</label>
                    <div class="col-sm-10">
                      <input type="email" class="form-control" id="inputEmail3" placeholder="Next Location under">
                    </div>
                </div>                     
                <div class="form-group row">
                    <label for="inputEmail3" class="col-sm-2 col-form-label">Description*</label>
                    <div class="col-sm-10">
                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="5" placeholder="Description..."></textarea>
                    </div>
                </div>                     
            </form>                                                    
          </div>
        </div>
      </div>
  
      <!-- Write your content here -->
    </div>

  
   


  
    <!-- /.container-fluid -->
</div>

                
@endsection