@extends('layouts.web_app')
@section('head')
@endsection
@section('content')
	
@endsection
@section('breadcrumb')
<!-- 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script> -->
 <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
 

 
<div class="aboutuspage">
  <div style="border: 0px;" class="card  container">
 
          <div    id="sidebar" class="w3-sidebar w3-light-grey w3-bar-block">
               <h5  style="font-family:lota;font-size:17px" class="w3-bar-item">About Primo</h5>
 					<!-- 		 <div class="fixed-header" ng-controller="headerCtrl"> -->



               <div ng-repeat="(key, data) in about  "   >
                     <a    href="" ng-click="gotoAnchor(key)"    class="w3-bar-item w3-button"> {$data.title$} </a>
                </div>
                <div>
                <a href="" ng-click="resetHref()"  id="sidebaritem"   class="w3-bar-item w3-button">Contact Us</a></div>
          <!-- </div> -->
 </div>

   <div   class="maincontant">
       <div class="vl"> 
          <div  class="container1" ng-init="getabout();">
            <div id="aboutus">
              <div  class="anchor" ng-repeat="(key, data) in about" id="show_{$key$}">
                <h5  style="padding-bottom:0px;margin-top: 30px" class="title" ng-bind="data.title"> </h5>
                
                <div   ng-bind-html="data.content |trustAsHtml" class="contant"></div>

                <hr class="line">
              </div>
            </div>
          </div>
 
       
 
         <div class="container1" id="showdata">
            <div class="card">
                  <h4 id="Contactus" name="Contactus"  style="text-align:center">Contact Us </h4>
 
  
              <form ng-submit="formsubmit()" name="aboutformdata" >
                <div class="row">
                   <div class="col-sm-6">
                     <div class="form-group">
       <input type="text"   class="form-control" id="name" placeholder="FirstName" ng-model="aboutform.name" required>
                             <div class="valid-feedback">Valid.</div>
                              <div class="invalid-feedback">Please fill out this field.</div>
                     <!--    <select  ng-model="aboutform.post_applied"   class="browser-default custom-select">
                        	<option value="" selected disabled>post applied</option>
                             <option value="Assistant Manager">Assistant Manager</option>
                              <option value="Store Manager ">Store Manager</option>
                             <option value="Store Assistant ">Store Assistant</option>
                        </select> -->
 
                           <div class="invalid-feedback">Please fill out this field.</div>
                      </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="form-group">
      
                           <input type="text"   class="form-control" id="name" placeholder="LastName" ng-model="aboutform.last_name" required>
                             <div class="valid-feedback">Valid.</div>
                              <div class="invalid-feedback">Please fill out this field.</div>
                        </div>
                    </div>
                </div>


                <div class="row">
                        <div class="col-sm-6">
                          <div class="form-group"> 
      
                              <input   type="email" class="form-control" id="pwd" 
                             placeholder="Email" ng-model="aboutform.email" required>
     
                             <div class="valid-feedback">Valid.</div>
                              <div class="invalid-feedback">Please fill out this field.</div>
                          </div>
                           <!--  <div class="form-group">
      
                               <input type="text" class="form-control" id="Nationality" placeholder="Nationality" ng-model="aboutform.nationality" required>
     
                                   <div class="invalid-feedback">Please fill out this field.</div>
                            </div> -->
                        </div>
                        <div class="col-sm-6">
                          <div class="form-group"> 
      
                                    <input  margin-right:10px" type="text" class="form-control" id="pwd" placeholder="mobile" ng-model="aboutform.mobile" required>
                                       <div class="valid-feedback">Valid.</div>
                                       <div class="invalid-feedback">Please fill out this field.</div>
                                </div>
                              <!-- <div class="form-group">
      
                                    <select ng-model="aboutform.current_location"  class="browser-default custom-select">
                                            <option value="" selected disabled>Current Location</option>
                                            <option value="Jeddah">Jeddah </option>
                                            <option value="Makkah">Makkah</option>
                                            <option value="madina">madina</option>
                                             <option value="Taif">Taif</option>
                                              <option value="Yanbu">Yanbu</option>
                                             <option value="Riyadh">Riyadh</option>
                                             <option value="Dammam">Dammam</option>
                                             <option value="Qassim"> Qassim</option>
                                             <option value="Abha">Abha</option>
                                    </select>
                                    <div class="valid-feedback">Valid.</div>
                                    <div class="invalid-feedback">Please fill out this field.</div>
                              </div> -->
                        </div>
                </div>


               <!--  <div class="row">
                        <div class="col-sm-6">
                             <div class="row">
                                 <div class="form-group">
                                      <input style="width:100px;margin-right:20px" type="text" class="form-control" id="uname" placeholder="Age" ng-model="aboutform.age" required>
     
                                       <div class="invalid-feedback">Please fill out this field.</div>
                                  </div>
                                  <div class="form-group">
                                      <span class="custom-control custom-radio">
                                           <input style="margin-right:10px"   type="radio" class="custom-control-input" id="defaultGroupExample2" ng-model="aboutform.sex"  name="groupOfDefaultRadios" value="male" checked>
                                           <label style="margin-right:20px"  class="custom-control-label" for="defaultGroupExample2">Male</label>

                                       </span>
                                  </div>
                                  <div class="form-group">
                                      <span class="custom-control custom-radio">
                                         <input style="margin-left:10px" type="radio" ng-model="aboutform.sex"  class="custom-control-input" id="defaultGroupExample3" value="female" name="groupOfDefaultRadios">
                                         <label class="custom-control-label" for="defaultGroupExample3">Female</label>
                                        </span>
                                  </div>
                              </div>
                        </div>
                      <div class="col-sm-6">
                            <div class="row">
                                <div class="form-group"> 
      
                                    <input style="width:185px;margin-right:10px" type="text" class="form-control" id="pwd" placeholder="mobile" ng-model="aboutform.mobile" required>
                                       <div class="valid-feedback">Valid.</div>
                                       <div class="invalid-feedback">Please fill out this field.</div>
                                </div>


                                <div class="form-group"> 
      
                                    <input style="width:185px" type="text" class="form-control" id="pwd" placeholder="Telephone" ng-model="aboutform.telephone" required>
                                    <div class="valid-feedback">Valid.</div>
                                     <div class="invalid-feedback">Please fill out this field.</div>
                                </div>
                            </div>
                      </div>
                </div>

                <div class="row">
                     <div class="col-sm-6">
                          <div class="form-group"> 
      
                              <input   type="email" class="form-control" id="pwd" 
                             placeholder="Email" ng-model="aboutform.email" required>
     
                             <div class="valid-feedback">Valid.</div>
                              <div class="invalid-feedback">Please fill out this field.</div>
                          </div>
                     </div>
 
                     <div class="col-sm-6">
                          <div class="form-group">
                               <div class="custom-file">
                                  <input type="file" ng-model="aboutform.cv">
 
                                </div>
                          </div>
                     </div>
                </div> -->
   
                <!--  <div class="row"> -->
                 <div class="form-group">
   
                       <textarea placeholder="message" ng-model="aboutform.message" class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
                  </div>
 
                  <button    type="submit"  id="formbutton"     class="btn btn-primary">Submit</button>
            </form> 
        </div>
  
      </div>
  
    </div> 
   </div>
  </div>
</div>



 <!-- <div id="showalert" ng-show = "IsVisible" class="alertbox">
  <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
  <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
</div> -->




 
 


<style>
 body{
 	 background:rgb(243, 243, 243) 
 }
.tt-desktop-header.headerunderline {
    background: white;
}

.tt-mobile-header {
    background: white;
}


.w3-sidebar.w3-light-grey.w3-bar-block{
 width:15%;
 margin-left: -10px; 


}

.maincontant{
 margin-left:15%;
 width:85%; 
}



.line{
    margin-top: 15px;
    margin-bottom: 15px;
}
.content{
font-family: "Hind", sans-serif;
color:#777777;	
}


.title{
    font-family: "Hind", sans-serif;
 color:#191919;
}


   .pointer-event{
   	font-size: 20px;
   }

.container1{
	margin-top:20px;
	margin-bottom:20px;
 margin-left: 10px;
}
 
 .w3-sidebar {
    height: 100%;
    width: 200px;
    background-color:white!important;
    position: absolute!important;
    overflow: auto;
}
.vl{
  border-left:0.6px solid #00000061;
 
}
/*.h-line{
      border-bottom: 0.6px solid #00000030;
    margin-top: 30px;
    width: 90%;
    align-items: center;
    margin-left: 40px;
}*/
h5.w3-bar-item{
  color: #096;
    background-color: #E9F0DA;
    display: inline-block;
    width: 150px;
    font-size: 1px;
}

.navbar-toggle .button-label {
    display: inline-block;
    float: left;
    font-weight: bold;
    line-height: 14px;
    padding-right: 10px;
}
.button-bars {
    display: inline-block;
    float: left;
}


textarea.form-control {
    height: auto;
    width: 96%;
    margin-left: 10px;
}

/*h5.w3-bar-item {
background-color:#E9F0DA;
color: #096;
}*/


.w3-bar-block .w3-bar-item {
    width: 100%;
    display: block;
    padding: 7px 6px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0;
}
 
.w3-button:hover {
    color: green!important;
    background-color: white!important;
    
}
.row{
 margin: 0px 0px;
}

a.w3-bar-item.w3-button {
    font-size: 16px;
    font-family: "Hind", sans-serif;
       padding-left: 14px;
}
a#sidebaritem{
    font-size: 18px;
    font-family: "Hind", sans-serif;
    margin-left: 0px;
     padding-left: 4px;
}
div p{
  font-family: "Hind", sans-serif;
    color: #777777;
    font-size:18px;

}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex; /* Safari */
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    
  flex-wrap: wrap;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;

}
 

  

.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e);
    background-color: #30a030;
    border-radius: 50%;
}
button.btn.btn-primary{
  margin-left:45%;
}

@media only screen and (max-width: 1024px){
	.card.container{
max-width: 80%;
	

}
a.w3-bar-item.w3-button {
    font-size: 13px;
    font-family: "Hind", sans-serif;
    padding-left: 14px;
}
a#sidebaritem{
    font-size: 18px;
    font-family: "Hind", sans-serif;
    margin-left: 0px;
     padding-left: 4px;
}
.w3-bar-block .w3-bar-item {
    width: 100%;
    display: block;
    padding: 6px 2px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0;
}
div p {
    font-family: "Hind", sans-serif;
    color: #777777;
    font-size: 15px;
}

}





 @media only screen and (max-width: 780px){

 		.card.container{
max-width: 80%;
 
}
button#formbutton{
  margin-left:35%;

}
a#sidebaritem{
    font-size: 14px;
    font-family: "Hind", sans-serif;
}
.content{
 font-family: "Hind", sans-serif;	
font-size: 12px;
}
div p{
 font-family: "Hind", sans-serif;
     color: #777777;
   font-size: 15px; 

}

a.w3-bar-item.w3-button {
    font-size: 11px;
    margin-left: 0px;
}
.title{
 font-family: "Hind", sans-serif;
  color:#191919;
 font-size:15px;
}
}
 
 @media only screen and (max-width: 600px) {
 
 .card.container{
max-width: 100%;
	

}

 button#formbutton{
  margin-left:30%;
}
a.w3-bar-item.w3-button {
    font-size: 11px;
       padding-left: 6px;
}
h5.w3-bar-item {
	font-size: 15px;
}

.w3-sidebar.w3-light-grey.w3-bar-block{
 width:20%;
 margin-left: -10px; 


}

.maincontant{
 margin-left:20%;
 width:80%; 
}

 }
 
</style>


@endsection
@section('content')
@include('customer.footer')

	@endsection

    @section('js')  
                        
@endsection