@extends('layouts.web_app')
@section('head')

	
@endsection
@section('breadcrumb')
<!-- CONTENT + SIDEBAR -->
<!-- <div class="tt-breadcrumb">
   <div class="container">
    <ul>
        <li><a href="{{route('frontpage')}}">Home</a></li>
        <li>Profile</li>
    </ul>
  </div>
</div> -->
@endsection
@section('content')

            <div style="margin-top:30px;margin-bottom:30px"  class="container size" ng-init="getcurrentuser('page')" ng-cloak>
                <input type="text" id="customer_id"  hidden>
                <h1 class="tt-title-subpages noborder">PROFILE UPDATE</h1>

                <div class="profile card">
                <div class="row">
                    <div class="center">
                    <img class="image" width="150" height="150" ng-if="loggedinuser.profice_pic_url != undefined" src="{{ asset('assets/users/profile_pic/{$loggedinuser.profice_pic_url$}') }}" alt="badge">

                    <img class="image" width="150" height="150" ng-if="loggedinuser.profice_pic_url == undefined" src="{{ asset('assets/users/profile_pic/0/32676.jpg') }}" alt = "">
                </div>
            </div>

                    <div class="row">
                        <div class="center">
                    <label class="btn btn-success" for="photo" style="cursor: pointer;
                        margin-top: 1.0em;margin-bottom: 1.0em;">Change</label>
                    <input type="file" id="photo" name="photo" style="display:none" ngf-select="selectAvatar(avatarFile)" ng-model="avatarFile">
                </div>
                </div>  
<div class="form-group update  required row">
      <label for="inputUser"  class="col-3 control-label">First Name:</label>
      <div class="col-9  ">
         <div class="input-group mb-3 input-group-sm">
      <input class="form-control" ng-model="loggedinuser.first_name" type="text" placeholder="First Name">
  </div>
      </div>
    </div>
    <div class="form-group update required row">
      <label for="inputUser" class="col-3 control-label">Last Name:</label>
      <div class="col-9">
         <div class="input-group mb-3 input-group-sm">
      <input class="form-control" type="text" ng-model = "loggedinuser.last_name" placeholder="Last Name">
  </div>
      </div>
    </div>
    <div class="form-group update  required row">
      <label for="inputUser" class="col-3 control-label">Email:</label>
      <div class="col-9">
         <div class="input-group mb-3 input-group-sm">
      <input   class="form-control" ng-model="loggedinuser.email" type="email" placeholder="Email">
  </div>
      </div>
    </div>
    <div class="form-group update required row">
      <label   class="col-3  ">Age:</label>
      <div class="col-9">
         <div class="input-group mb-3 input-group-sm">
      <select ng-model="loggedinuser.age" id="age" class="form-control" title="Age">
                            <option value="18-25">18 - 25</option>
                            <option value="26-35">26 - 35</option>
                            <option value="36-50">36 - 50</option>
                            <option value="50+">50 +</option>
                        </select>
                    </div>
      </div>
    </div>

     <div class="form-group update required row">
      <label   class="col-3  ">Gender:</label>
      <div class="col-9">
         <div class="input-group mb-3 input-group-sm">
     <input type="radio" name="gender" ng-model= "loggedinuser.gender" value="male" checked>Male
                        <input type="radio" name="gender" ng-model= "loggedinuser.gender" value="female">Female
                    </div>
      </div>
    </div>
    <div class="form-group update  required row">
      <label for="inputUser" class="col-3 control-label">country:</label>
      <div class="col-9">
         <div class="input-group mb-3 input-group-sm">
     <select style="width:200px !important"
                            class="form-control"  ng-model="loggedinuser.country_shortname"  data-width="100%"
                            data-toggle="tooltip" title="Country" ng-change="editcountrychange()">
                            <option value="" disabled>Select the Country</option>
                            <option ng-repeat="country in countryjson track by $index" value="{$country.code$}">{$country.name$}</option>
                         </select>
                     </div>
      </div>
    </div>
  <div class="form-group update required row">
      <label   class="col-3  ">City:</label>
      <div class="col-9">
         <div class="input-group mb-3 input-group-sm">
      <select 
                            class="form-control" ng-model="loggedinuser.city">
                            <option value="" disabled>Select the City</option>
                            <option ng-repeat="city in cities track by $index" value="{$city.name$}">{$city.name$}</option> 
                        </select>
                    </div>
      </div>
    </div>
    <div class="form-group update required row">
      <label for="inputUser" class="col-3 control-label">Phone: </label>
      <div class="col-9">
            <div class="input-group mb-3 input-group-sm">
          <div class="input-group-prepend">
        <span class="input-group-text">{$loggedinuser.country_code$}</span>
      </div>
      <input style="width:157px !important" class="form-control" type="text" ng-model="loggedinuser.phone_no" placeholder="Phone Number">
  </div>
      </div>
    </div>
     <div class="form-group update required row">
      <label for="inputUser" class="col-3 control-label">District:</label>
      <div class="col-9">
         <div class="input-group mb-3 input-group-sm">
      <input type="text" placeholder="District" ng-model="loggedinuser.district" class="form-control">
  </div>
      </div>
    </div>
<div class="form-group update required row">
      <label for="inputUser" class="col-3 control-label">Location:</label>
      <div class="col-9">
         <div class="input-group mb-3 input-group-sm">
      <input type="text" placeholder="Location" ng-model = "loggedinuser.location" class="form-control">
  </div>
      </div>
    </div>
 


                <!-- <div class="row">
                    <div  class="col-12 col-sm-6 col-lg-6">
                        <label>First Name</label>
                        <input class="form-control" ng-model="loggedinuser.first_name" type="text" placeholder="First Name">
                    </div>
                    <div class="col-12 col-sm-6 col-lg-6">
                        <label>Last Name</label>
                        <input class="form-control" type="text" ng-model = "loggedinuser.last_name" placeholder="Last Name">
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-6 col-lg-6">
                        <label>Email</label>
                        <input class="form-control" ng-model="loggedinuser.email" type="email" placeholder="Email">
                    </div>
                    <div class="col-12 col-sm-6 col-lg-6">
                        <label>Age</label>
                        <select ng-model="loggedinuser.age" id="age" class="form-control" title="Age">
                            <option value="18-25">18 - 25</option>
                            <option value="26-35">26 - 35</option>
                            <option value="36-50">36 - 50</option>
                            <option value="50+">50 +</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-6 col-lg-6">
                        <label>Gender</label><br>
                        <input type="radio" name="gender" ng-model= "loggedinuser.gender" value="male" checked>Male
                        <input type="radio" name="gender" ng-model= "loggedinuser.gender" value="female">Female
                    </div>
                    <div class="col-12 col-sm-6 col-lg-6">
                        <label>Country</label>
                         <select
                            class="form-control"  ng-model="loggedinuser.country_shortname"  data-width="100%"
                            data-toggle="tooltip" title="Country" ng-change="editcountrychange()">
                            <option value="" disabled>Select the Country</option>
                            <option ng-repeat="country in countryjson track by $index" value="{$country.code$}">{$country.name$}</option>
                         </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 col-sm-6 col-lg-6">
                        <label>State</label>
                        <select
                            class="form-control" ng-model="loggedinuser.city">
                            <option value="" disabled>Select the State</option>
                            <option ng-repeat="city in cities track by $index" value="{$city.name$}">{$city.name$}</option> 
                        </select>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-6">
                        <label>Phone</label>
                        <div class="row">
                          <div class="col-2 col-lg-2">
                            {$loggedinuser.country_code$}
                          </div>
                          <div class="col-10 col-lg-10">
                            <input class="form-control" type="text" ng-model="loggedinuser.phone_no" placeholder="Phone Number">
                          </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-6 col-lg-6">
                        <label>District</label>
                        <input type="text" placeholder="District" ng-model="loggedinuser.district" class="form-control">
                    </div>
                    <div class="col-6 col-lg-6">
                        <label>Location</label>
                        <input type="text" placeholder="Location" ng-model = "loggedinuser.location" class="form-control">
                    </div> 
                </div> -->
                <div style="margin: auto;margin-top: 15px" class="row ">
 
                    <button class="btn" ng-click="updateprofile()"><i class="icon-f-39"></i>Update</button>&nbsp;
                    <button class="btn"><i class="icon-f-39"></i><a href="{{route('frontpage')}}">Cancel</a></button>
                </div>
            </div>
            </div>

        <!-- / CONTENT + SIDEBAR -->

  



  






<style>
.image{
    border-radius: 50%;
}
.form-group.required .control-label:after {
  content:"*";
     color: red;
    font-size: 11px;
}
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.profile.card{
    box-shadow: 0px 7px 15px -9px inset;
    padding: 15px;

}


 .input-group > .form-control, .input-group > .custom-select, .input-group > .custom-file {
    position: relative;
    flex: 0;
    width: 1%;
    margin-bottom: 0;
}
 

 

.form-group {
  margin-bottom:0rem;
}

.row {
  display: flex;
  flex-wrap: wrap;
 /* align-items: center;*/
}

.col-3 {
  flex: 0 0 100%;
  max-width: 100%;
}

.col-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

label {
  display: inline-block;
  margin-bottom: .5rem;
}
 
.form-text {
  color: #555;
  margin-bottom: 0;
}

 

/* Change Style when screen width is 768px or more */

 
.form-control  {
    display:inline !important;
    width:220px !important;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0px !important ;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
     margin-bottom: 5px;
}


@media (min-width: 1024px) {
 .form-group.update{
    
    margin-left: 32%;
} 
  .container.size{
    width:75%;
}
}
@media (max-width:1024px) {
 .form-group.update {
 
    margin-left: 30%;
} 
.container.size{
    width:80%;
}
  
}



@media (min-width: 768px) {
  .col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  label {
    margin-bottom: 0;
  }
  
}
@media (max-width:768px) {
 .form-group.update {
     
    margin-left: 9%;
} 
.container.size{
    width:100%;
}
  
}
@media (max-width:768px) {
 .form-group.update {
    
    margin-left: 11%;
} 
  
}


</style>

        
 @include('customer.footer')

	@endsection

    @section('js')  
    
@endsection