@extends('template.coin.layouts.base')

@section('title', __('Profile'))

@section('css')
<style>
.pcoded[layout-type="dark"] .card-white{
background-color:#fff !important;
color: #000;
}
.guttar-15px {
    margin-left: -7.5px !important;
    margin-right: -7.5px !important;
}
.card-title {
    color: #342d6e;
    font-size: 1.3em;
    font-weight: 500;
    margin: 0;
}
.content-area .card-head {
    padding-bottom: 10px;
}


}
.token-currency-choose:not(:last-child), .token-contribute:not(:last-child), .token-overview-wrap:not(:last-child) {
    margin-bottom: 20px;
}
.token-currency-choose, .token-contribute, .token-overview-wrap {
    margin-top: 20px;
}

.token-currency-choose:not(:last-child), .token-contribute:not(:last-child), .token-overview-wrap:not(:last-child) {
    margin-bottom: 20px;
}
.token-currency-choose, .token-contribute, .token-overview-wrap {
    margin-top: 20px;
}
.token-calc {
    display: flex;
    padding-bottom: 10px;
}
.token-pay-amount {
    position: relative;
    align-self: center;
    width: 140px;
}

.input-bordered {
    border-radius: 4px;
    border: 1px solid #d2dde9;
    width: 100%;
    padding: 10px 15px;
    line-height: 20px;
    font-size: 0.9em;
    color: rgba(73, 84, 99, 0.7);
    transition: all 0.4s;
}

.input-with-hint {
    padding-right: 70px;
}
.token-pay-currency {
    position: absolute;
    right: 0;
    top: 9px;
    transform: translate(0);
    z-index: 1;
    padding: 0 10px;
    border-left: 1px solid #d2dde9;
}
.token-pay-currency .input-hint {
    position: static;
    border: 0;
    padding: 2px;
    font-size: 0.8em;
}
.ucap {
    text-transform: uppercase;
}
.pay-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 11px 0;
}
.btn-primary {
    background: #14013e;
    border-color: #14013e;
}
.mgt-1-5x {
    margin-top: 15px;
}

.font-mid {
    font-weight: 500;
}
.modal-content {
  position: relative;
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0px 10px 55px 0px rgba(0, 0, 0, 0.2);
  border: 0;
}
.modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  display: inline-block;
}
.modal-close .ti {
  font-size: 13px;
  height: 32px;
  width: 32px;
  line-height: 32px;
  text-align: center;
  background: #fff;
  border-radius: 50%;
  color: #495463;
  text-shadow: none;
  display: block;
  transition: all 0.4s;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.3);
}
@media (min-width: 576px) {
  .modal-dialog {
    margin: 35px auto;
  }
  .modal-dialog-sm {
    min-width: 500px;
  }
  .modal-dialog-md {
    min-width: 90%;
  }
  .modal-dialog-lg {
    min-width: 540px;
  }
  .modal-dialog-bottom {
    min-height: calc(100% - (1.75rem * 2));
  }
}
@media (min-width: 768px) {
  .modal-dialog-md {
    min-width: 620px;
  }
  .modal-dialog-lg {
    min-width: 740px;
  }
  .modal-close {
    top: -22px;
    right: -22px;
  }
  .modal-close .ti {
    font-size: 20px;
    height: 44px;
    width: 44px;
    line-height: 44px;
  }
}
@media (min-width: 992px) {
  .modal-dialog-lg {
    min-width: 880px;
  }
}

.popup-header {
  padding: 10px 18px 25px;
  border-bottom: 1px solid #e6effb;
}
.popup-body {
  padding: 15px 20px 16px;
  font-size: 13px;
}
.popup-body-innr {
  padding-left: 18px;
  padding-right: 18px;
}
.popup-body-full {
  padding-left: 0;
  padding-right: 0;
}
.popup-body-lg {
  padding: 14px 18px 7px;
}
.popup-body p {
  font-weight: 400;
}
.popup-body .lead strong,
.popup-body .lead span {
  color: #5e55b8;
}
.popup-body form:last-child {
  margin-bottom: 0;
}
.popup-body .copy-address {
  font-size: 13px;
}
.popup-title {
  color: #342d6e;
  font-weight: 500;
  padding-right: 40px;
  margin-bottom: 12px;
  font-size: 1.3em;
}
.popup-title .ti {
  font-size: 70%;
  color: #6e81a9;
}
.popup-title small {
  color: #758698;
}
.popup-title-action {
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: 2px;
  transform: translateY(-50%);
}
.popup-subtitle {
  text-transform: uppercase;
  font-weight: 500;
  color: #6e81a9;
  letter-spacing: 0.1em;
  margin-bottom: 0;
  font-size: 12px;
  margin-bottom: 10px;
}
.popup-subtitle-s2 {
  color: #495463;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
}
.popup-footer {
  padding: 15px 18px 0;
}
@media (min-width: 480px) {
  .popup-title-action {
    margin-top: 0;
  }
  .popup-header {
    padding: 30px 40px 25px;
  }
  .popup-body {
    padding: 34px 45px 38px;
  }
  .popup-body-innr {
    padding-left: 40px;
    padding-right: 40px;
  }
  .popup-body-lg {
    padding: 40px 55px;
  }
  .popup-body-md {
    padding: 30px 30px 34px;
  }
  .popup-footer {
    padding: 30px 40px;
  }
}
@media (min-width: 768px) {
  .popup-body {
    font-size: 14px;
  }
  .popup-body-lg {
    padding: 40px 55px;
  }
  .popup-body .copy-address {
    font-size: 13px;
  }
}
.guttar-12px {
    margin-left: -6px !important;
    margin-right: -6px !important;
}
.guttar-12px > li, .guttar-12px > div {
    padding-left: 6px !important;
    padding-right: 6px !important;
}
.pay-list {
    display: flex;
    flex-wrap: wrap;
}
.popup-body .lead strong, .popup-body .lead span {
    color: #5e55b8;
}
.popup-body p {
    font-weight: 400;
}
.mgb-1-5x {
    margin-bottom: 15px;
}
.text-light {
    color: #758698 !important;
}
.font-italic {
    font-style: italic!important;
}
.pay-option-label {
  width: 100%;
  background: #e6effb;
  border: 2px solid #e6effb;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.4s ease;
  text-align: center;
  margin-bottom: 15px;
}
.pay-option-label:after {
  position: absolute;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #7668fe;
  content: "";
  top: 0;
  right: -5px;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.4s ease;
}
.pay-option-check {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0;
}
.pay-option-check:checked ~ label {
  border-color: #7668fe;
}
.pay-option-check:checked ~ label:after {
  transform: translate(-50%, -50%) scale(1);
}
.pay-list {
  display: flex;
  flex-wrap: wrap;
}
.pay-item {
  width: 100%;
}
.pay-check {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0;
}
.pay-check-label {
  position: relative;
  padding: 15px 50px 15px 46px;
  border: 1px solid #d2dde9;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 8px;
  width: 100%;
  height: calc(100% - 8px);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
}
.pay-check-label:before {
  position: absolute;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  border: 2px solid #d2dde9;
  content: "";
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.4s ease;
}
.pay-check-label:after {
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: #7668fe;
  content: "";
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.4s ease;
}
.pay-check-text {
  font-weight: 700;
  font-size: 13px;
  color: #495463;
}
.pay-check-img {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  height: 24px;
}
.pay-check.error ~ .error {
  position: absolute;
  right: 8px;
  top: -26px;
  bottom: auto;
  background: #ff6868 !important;
  color: #fff !important;
  font-size: 11px;
  line-height: 18px;
  padding: 2px 10px;
  border-radius: 2px;
  transform: translate(0, 0);
}
.pay-check.error ~ .error:after {
  position: absolute;
  content: "";
  height: 0;
  width: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid #ff6868;
  border-bottom: 5px solid transparent;
  bottom: -5px;
  right: 6px;
}
.pay-check.error ~ .error:before {
  display: none;
}
.pay-check:checked ~ label {
  border-color: #7668fe;
}
.pay-check:checked ~ label:before {
  border-color: #7668fe;
}
.pay-check:checked ~ label:after {
  opacity: 1;
}
.pay-amount {
  display: block;
}
.pay-icon {
  padding-right: 10px;
  font-size: 11px;
  line-height: 30px;
  width: 40px;
  text-align: center;
}
.pay-icon.cf-ltc {
  font-size: 18px;
}
.pay-icon.ikon {
  font-size: 30px;
}
.pay-icon.ikon:before {
  margin-left: -5px;
  margin-right: -5px;
}
.pay-title {
  display: inline-flex;
  align-items: center;
}
.pay-cur {
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
}
.pay-info-list li {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pay-info-list li span {
  color: #758698;
}
.pay-status .ti {
  display: inline-block;
  height: 90px;
  width: 90px;
  line-height: 82px;
  text-align: center;
  border: 2px solid;
  border-radius: 50%;
  font-size: 36px;
}
.pay-status-success .ti {
  border-color: #00d285;
  color: #00d285;
}
.pay-status-warning .ti {
  border-color: #ffc100;
  color: #ffc100;
}
.pay-status-error .ti {
  border-color: #ff6868;
  color: #ff6868;
}
.pay-button {
  width: 100%;
  padding: 10px 0;
}
.pay-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 11px 0;
}
.pay-button:first-child {
  padding-left: 0;
}
.pay-button:last-child {
  padding-right: 0;
}
.pay-button-sap {
  width: 100%;
  text-align: center;
  font-weight: 500;
  color: #758698;
  text-transform: uppercase;
}
.pay-notes {
  margin-top: 14px;
  padding-top: 30px;
  border-top: 1px solid #eef2f8;
  line-height: 1.5;
  padding-bottom: 5px;
}
@media (min-width: 480px) {
  .pay-option-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
  }
}
@media (min-width: 620px) {
  .pay-item {
    width: 50%;
  }
  .pay-item:only-child {
    width: 100%;
  }
  .pay-item:last-child:not(:nth-child(even)) {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .pay-button {
    width: auto;
    padding: 10px 20px;
  }
  .pay-button:first-child {
    padding-left: 0;
  }
  .pay-button:last-child {
    padding-right: 0;
  }
  .pay-button-sap {
    width: auto;
  }
}

</style>
<style>
    .gaps-1x {
    height: 10px;
}
.pcoded[layout-type="dark"] .nav-tabs {
  border-bottom: none;
  margin: 0 -15px;
  margin-bottom: 10px;
}
.pcoded[layout-type="dark"] .nav-tabs .nav-link {
  border: none;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #758698;
  padding: 6px 15px;
}
.pcoded[layout-type="dark"] .nav-tabs-line {
    margin: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #d3e0f3 !important;
}

.pcoded[layout-type="dark"] .nav-tabs-line .nav-item {
    padding: 0 40px 0 0;
}


.pcoded[layout-type="dark"] .nav-tabs .nav-item {
    width: auto;
}


.pcoded[layout-type="dark"] .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

.pcoded[layout-type="dark"] .nav-tabs .nav-link {
    font-size: 14px;
}

.pcoded[layout-type="dark"] .nav-tabs-line .nav-link.active {
    cursor: default;
    color: #7668fe;
}
.pcoded[layout-type="dark"] .nav-tabs .nav-link.active {
    color: #7668fe;
}
.pcoded[layout-type="dark"] .nav-tabs-line .nav-link:after {
    position: absolute;
    left: 0;
    bottom: -2px;
    content: "";
    width: 0;
    height: 2px;
    background: #7668fe;
    transition: all 0.4s;
}
@media (min-width: 480px) {
  .nav-tabs-line .nav-item {
    padding: 0 30px 0 0;
  }
  .nav-tabs-line .nav-link {
    font-size: 13px;
  }
  .nav-tabs-vr .nav-item {
    padding: 0;
  }
  .nav-tabs-bordered .nav-item {
    width: auto;
  }
}
@media (min-width: 576px) {
  .nav-tabs .nav-item {
    width: auto;
  }
  .nav-tabs .nav-link {
    font-size: 13px;
  }
  .nav-tabs-bordered .nav-item {
    padding: 0 15px;
    margin-bottom: 25px;
  }
  .nav-tabs-bordered .nav-link {
    font-size: 14px;
  }
  .nav-tabs-vr .nav-item {
    padding: 0;
    width: 100%;
  }
}
@media (min-width: 768px) {
  .nav-tabs-line .nav-item {
    padding: 0 40px 0 0;
  }
  .nav-tabs-line .nav-link {
    font-size: 14px;
  }
  .nav-tabs-vr .nav-item {
    padding: 0;
  }
}
@media (min-width: 992px) {
  .nav-tabs .nav-link {
    font-size: 14px;
  }
}
.input-item {
    position: relative;
    padding-bottom: 20px;
}
.input-item-label {
    font-size: 14px;
    font-weight: 500;
    color: #495463;
    line-height: 1.1;
    margin-bottom: 12px;
    display: inline-block;
}
.input-wrap {
    position: relative;
}
.input-bordered {
    border-radius: 4px;
    border: 1px solid #d2dde9;
    width: 100%;
    padding: 10px 15px;
    line-height: 20px;
    font-size: 0.9em;
    color: rgba(73, 84, 99, 0.7);
    transition: all 0.4s;
}

 select {
    width: 100%;
    line-height: 20px;
    padding: 10px 20px 10px 15px;
    border: none;
    border-radius: 4px;
    height: 42px !important;
    font-size: 14px;
    color: #6e81a9;
    border-radius: 4px;
    border: 1px solid #d2dde9;
    background: transparent;
    vertical-align: top;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.pdb-1x {
    padding-bottom: 10px;
}
.note-info {
    background: #e6f6ff;
}


.note {
    padding: 15px 15px 15px 45px;
    border-radius: 4px;
    position: relative;
    line-height: 1.4;
}

.note-plane {
    padding: 0 0 0 18px;
    background: transparent !important;
}
.note-danger p, .note-danger .note-text {
    color: rgba(255, 104, 104, 0.9) !important;
}

.note-info p, .note-info .note-text {
    color: rgba(27, 171, 254, 0.9) !important;
}
.note p, .note .note-text {
    font-size: 11px !important;
    line-height: inherit;
    display: block;
}

.note p, .note .note-text {
    font-size: 12px !important;
}

.select2-container {
    box-sizing: border-box;
    display: inline-block;
    margin: 0;
    position: relative;
    vertical-align: middle;
}

.select-block ~ .select2-container.select2 {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none;
}

.select2-container .select2-selection--single {
    height: 42px;
}

.select2-container--flat .select2-selection--single, .select2-container--flat .select2-selection--multiple {
    background: #fff;
    color: #495463;
    border: 1px solid #fff;
    border-radius: 4px;
    transition: all 0.2s;
    box-shadow: 0px 2px 18px 2px rgb(73 84 99 / 25%);
}

.select-bordered ~ .select2-container--flat .select2-selection--single, .select-bordered ~ .select2-container--flat .select2-selection--multiple {
    box-shadow: none;
    border-color: #d2dde9;
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.select2-container .select2-selection--single .select2-selection__rendered, .select2-container .select2-selection--multiple .select2-selection__rendered {
    line-height: 20px;
    font-size: 0.9em;
    padding: 10px 40px 10px 15px;
    font-weight: 400;
}
.select2-container--flat .select2-selection--single .select2-selection__rendered, .select2-container--flat .select2-selection--multiple .select2-selection__rendered {
    color: #495463;
}

.select2-selection--single .select2-selection__arrow, .select2-selection--multiple .select2-selection__arrow {
    position: absolute;
    height: 44px;
    width: 40px;
    top: 0;
    right: 0;
    transition: all 0.3s ease;
}

.select2-selection--single .select2-selection__arrow b, .select2-selection--multiple .select2-selection__arrow b {
    display: none;
}

.select2-selection--single .select2-selection__arrow:after, .select2-selection--multiple .select2-selection__arrow:after {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: "themify";
    transform: translate(-50%, -50%);
    content: "\e64b";
    font-size: 10px;
    color: #758698;
}
</style>
@section('content')
<div class="page-header card">
                              <div class="row align-items-end">
                                  <div class="col-lg-8">
                                      <div class="page-header-title">
                                          <i class="feather icon-credit-card bg-c-blue"></i>
                                          <div class="d-inline">
                                              <h5>Profile</h5>
                                             
                                          </div>
                                      </div>
                                  </div>
                                  <div class="col-lg-4">
                                      <div class="page-header-breadcrumb">
                                          <ul class=" breadcrumb breadcrumb-title">
                                              <li class="breadcrumb-item">
                                                  <a href="/dashboard"><i class="feather icon-home"></i></a>
                                              </li>
                                             
                                              <li class="breadcrumb-item">
                                                  <a href="#">Profile</a>
                                              </li>
                                          </ul>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          
                           <div class="pcoded-inner-content">
                        <!-- Main-body start -->
                        <div class="main-body">
                            <div class="page-wrapper">
                                <!-- Page-body start -->
                                <div class="page-body">
                                    <div class="row d-flex justify-content-center">
                                       <div class="col-md-8 ">
                                           
                                         <div class="content-area card card-white">
                    <div class="card-innr">
                        <div class="card-head">
                            <h4 class="card-title">Profile Details</h4>
                        </div>
                        <ul class="nav nav-tabs nav-tabs-line" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#personal-data">Personal Data</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#settings">Settings</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#password">Password</a>
                            </li>
                        </ul>
                        <div class="tab-content" id="profile-details">
                            <div class="tab-pane fade show active" id="personal-data">
                                <form class="validate-modern" action="{{ route('editprofile')}}" method="POST" id="nio-user-personal" autocomplete="off" novalidate="novalidate">
                                    @csrf
                                    @if(Session::has('errormsg'))
                                    
                                  <p style="color:red">{{Session::get('errormsg')}}</p>  
                                    @endif
                                    
                                    @if(Session::has('succmsg'))
                                    
                                  <p style="color:green">{{Session::get('succmsg')}}</p>  
                                    @endif
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="input-item input-with-label">
                                                <label for="full-name" class="input-item-label">First Name</label>
                                                <div class="input-wrap">
                                                    <input class="input-bordered" type="text" id="full-name" name="fname" required="required" placeholder="Enter Full Name" minlength="3" value="{{$user->fname}}" aria-required="true" />
                                                </div>
                                            </div>
                                        </div>
                                        
                                         <div class="col-md-6">
                                            <div class="input-item input-with-label">
                                                <label for="full-name" class="input-item-label">Last Name</label>
                                                <div class="input-wrap">
                                                    <input class="input-bordered" type="text" id="full-name" name="lname" required="required" placeholder="Enter Last Name" minlength="3" value="{{$user->lname}}" aria-required="true" />
                                                </div>
                                            </div>
                                        </div>
                                        
                                        <div class="col-md-6">
                                            <div class="input-item input-with-label">
                                                <label for="email-address" class="input-item-label">Email Address</label>
                                                <div class="input-wrap">
                                                    <input
                                                        class="input-bordered"
                                                        type="text"
                                                        id="email-address"
                                                       
                                                        placeholder="Enter Email Address"
                                                        value="{{$user->email}}"
                                                        readonly=""
                                                        aria-required="true"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-item input-with-label">
                                                <label for="mobile-number" class="input-item-label">Mobile Number</label>
                                                <div class="input-wrap">
                                                    <input class="input-bordered" type="text" id="mobile-number" name="mobile" placeholder="Enter Mobile Number" value="{{$user->phone}}" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-item input-with-label">
                                                <label for="date-of-birth" class="input-item-label">Date of Birth</label>
                                                <div class="input-wrap">
                                                    <input class="input-bordered date-picker-dob" type="text" id="date-of-birth" name="dateOfBirth" required="required" placeholder="mm/dd/yyyy" value="{{$user->dob}}" aria-required="true" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-item input-with-label">
                                                <label for="nationality" class="input-item-label">Nationality</label>
                                                <div class="input-wrap">
                                                    <select
                                                        class="select-bordered select-block select2-hidden-accessible"
                                                        name="nationality"
                                                        id="nationality"
                                                        required="required"
                                                        data-dd-class="search-on"
                                                        tabindex="-1"
                                                        aria-hidden="true"
                                                        aria-required="true"
                                                    >
                                                        @if(!empty($user->country))
                                                        <option value="{{$user->country}}">{{$user->country}}</option>
                                                        @endif
                                                        <option value="">Select Country</option>
                                                        <option value="Afghanistan">Afghanistan</option>
                                                        <option value="Albania">Albania</option>
                                                        <option value="Algeria">Algeria</option>
                                                        <option value="American Samoa">American Samoa</option>
                                                        <option value="Andorra">Andorra</option>
                                                        <option value="Angola">Angola</option>
                                                        <option value="Anguilla">Anguilla</option>
                                                        <option value="Antarctica">Antarctica</option>
                                                        <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                                                        <option value="Argentina">Argentina</option>
                                                        <option value="Armenia">Armenia</option>
                                                        <option value="Aruba">Aruba</option>
                                                        <option value="Australia">Australia</option>
                                                        <option value="Austria">Austria</option>
                                                        <option value="Azerbaijan">Azerbaijan</option>
                                                        <option value="Bahamas">Bahamas</option>
                                                        <option value="Bahrain">Bahrain</option>
                                                        <option value="Bangladesh">Bangladesh</option>
                                                        <option value="Barbados">Barbados</option>
                                                        <option value="Belarus">Belarus</option>
                                                        <option value="Belgium">Belgium</option>
                                                        <option value="Belize">Belize</option>
                                                        <option value="Benin">Benin</option>
                                                        <option value="Bermuda">Bermuda</option>
                                                        <option value="Bhutan">Bhutan</option>
                                                        <option value="Bolivia">Bolivia</option>
                                                        <option value="Bosnia and Herzegowina">Bosnia and Herzegowina</option>
                                                        <option value="Botswana">Botswana</option>
                                                        <option value="Bouvet Island">Bouvet Island</option>
                                                        <option value="Brazil">Brazil</option>
                                                        <option value="British Indian Ocean Territory">British Indian Ocean Territory</option>
                                                        <option value="Brunei Darussalam">Brunei Darussalam</option>
                                                        <option value="Bulgaria">Bulgaria</option>
                                                        <option value="Burkina Faso">Burkina Faso</option>
                                                        <option value="Burundi">Burundi</option>
                                                        <option value="Cambodia">Cambodia</option>
                                                        <option value="Cameroon">Cameroon</option>
                                                        <option value="Canada">Canada</option>
                                                        <option value="Cape Verde">Cape Verde</option>
                                                        <option value="Cayman Islands">Cayman Islands</option>
                                                        <option value="Central African Republic">Central African Republic</option>
                                                        <option value="Chad">Chad</option>
                                                        <option value="Chile">Chile</option>
                                                        <option value="China">China</option>
                                                        <option value="Christmas Island">Christmas Island</option>
                                                        <option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
                                                        <option value="Colombia">Colombia</option>
                                                        <option value="Comoros">Comoros</option>
                                                        <option value="Congo">Congo</option>
                                                        <option value="Congo, the Democratic Republic of the">Congo, the Democratic Republic of the</option>
                                                        <option value="Cook Islands">Cook Islands</option>
                                                        <option value="Costa Rica">Costa Rica</option>
                                                        <option value="Cote d'Ivoire">Cote d'Ivoire</option>
                                                        <option value="Croatia (Hrvatska)">Croatia (Hrvatska)</option>
                                                        <option value="Cuba">Cuba</option>
                                                        <option value="Cyprus">Cyprus</option>
                                                        <option value="Czech Republic">Czech Republic</option>
                                                        <option value="Denmark">Denmark</option>
                                                        <option value="Djibouti">Djibouti</option>
                                                        <option value="Dominica">Dominica</option>
                                                        <option value="Dominican Republic">Dominican Republic</option>
                                                        <option value="East Timor">East Timor</option>
                                                        <option value="Ecuador">Ecuador</option>
                                                        <option value="Egypt">Egypt</option>
                                                        <option value="El Salvador">El Salvador</option>
                                                        <option value="Equatorial Guinea">Equatorial Guinea</option>
                                                        <option value="Eritrea">Eritrea</option>
                                                        <option value="Estonia">Estonia</option>
                                                        <option value="Ethiopia">Ethiopia</option>
                                                        <option value="Falkland Islands (Malvinas)">Falkland Islands (Malvinas)</option>
                                                        <option value="Faroe Islands">Faroe Islands</option>
                                                        <option value="Fiji">Fiji</option>
                                                        <option value="Finland">Finland</option>
                                                        <option value="France">France</option>
                                                        <option value="France Metropolitan">France Metropolitan</option>
                                                        <option value="French Guiana">French Guiana</option>
                                                        <option value="French Polynesia">French Polynesia</option>
                                                        <option value="French Southern Territories">French Southern Territories</option>
                                                        <option value="Gabon">Gabon</option>
                                                        <option value="Gambia">Gambia</option>
                                                        <option value="Georgia">Georgia</option>
                                                        <option value="Germany">Germany</option>
                                                        <option value="Ghana">Ghana</option>
                                                        <option value="Gibraltar">Gibraltar</option>
                                                        <option value="Greece">Greece</option>
                                                        <option value="Greenland">Greenland</option>
                                                        <option value="Grenada">Grenada</option>
                                                        <option value="Guadeloupe">Guadeloupe</option>
                                                        <option value="Guam">Guam</option>
                                                        <option value="Guatemala">Guatemala</option>
                                                        <option value="Guinea">Guinea</option>
                                                        <option value="Guinea-Bissau">Guinea-Bissau</option>
                                                        <option value="Guyana">Guyana</option>
                                                        <option value="Haiti">Haiti</option>
                                                        <option value="Heard and Mc Donald Islands">Heard and Mc Donald Islands</option>
                                                        <option value="Holy See (Vatican City State)">Holy See (Vatican City State)</option>
                                                        <option value="Honduras">Honduras</option>
                                                        <option value="Hong Kong">Hong Kong</option>
                                                        <option value="Hungary">Hungary</option>
                                                        <option value="Iceland">Iceland</option>
                                                        <option value="India">India</option>
                                                        <option value="Indonesia">Indonesia</option>
                                                        <option value="Iran (Islamic Republic of)">Iran (Islamic Republic of)</option>
                                                        <option value="Iraq">Iraq</option>
                                                        <option value="Ireland">Ireland</option>
                                                        <option value="Israel">Israel</option>
                                                        <option value="Italy">Italy</option>
                                                        <option value="Jamaica">Jamaica</option>
                                                        <option value="Japan">Japan</option>
                                                        <option value="Jordan">Jordan</option>
                                                        <option value="Kazakhstan">Kazakhstan</option>
                                                        <option value="Kenya">Kenya</option>
                                                        <option value="Kiribati">Kiribati</option>
                                                        <option value="Korea, Democratic People's Republic of">Korea, Democratic People's Republic of</option>
                                                        <option value="Korea, Republic of">Korea, Republic of</option>
                                                        <option value="Kuwait">Kuwait</option>
                                                        <option value="Kyrgyzstan">Kyrgyzstan</option>
                                                        <option value="Lao, People's Democratic Republic">Lao, People's Democratic Republic</option>
                                                        <option value="Latvia">Latvia</option>
                                                        <option value="Lebanon">Lebanon</option>
                                                        <option value="Lesotho">Lesotho</option>
                                                        <option value="Liberia">Liberia</option>
                                                        <option value="Libyan Arab Jamahiriya">Libyan Arab Jamahiriya</option>
                                                        <option value="Liechtenstein">Liechtenstein</option>
                                                        <option value="Lithuania">Lithuania</option>
                                                        <option value="Luxembourg">Luxembourg</option>
                                                        <option value="Macau">Macau</option>
                                                        <option value="Macedonia, The Former Yugoslav Republic of">Macedonia, The Former Yugoslav Republic of</option>
                                                        <option value="Madagascar">Madagascar</option>
                                                        <option value="Malawi">Malawi</option>
                                                        <option value="Malaysia">Malaysia</option>
                                                        <option value="Maldives">Maldives</option>
                                                        <option value="Mali">Mali</option>
                                                        <option value="Malta">Malta</option>
                                                        <option value="Marshall Islands">Marshall Islands</option>
                                                        <option value="Martinique">Martinique</option>
                                                        <option value="Mauritania">Mauritania</option>
                                                        <option value="Mauritius">Mauritius</option>
                                                        <option value="Mayotte">Mayotte</option>
                                                        <option value="Mexico">Mexico</option>
                                                        <option value="Micronesia, Federated States of">Micronesia, Federated States of</option>
                                                        <option value="Moldova, Republic of">Moldova, Republic of</option>
                                                        <option value="Monaco">Monaco</option>
                                                        <option value="Mongolia">Mongolia</option>
                                                        <option value="Montserrat">Montserrat</option>
                                                        <option value="Morocco">Morocco</option>
                                                        <option value="Mozambique">Mozambique</option>
                                                        <option value="Myanmar">Myanmar</option>
                                                        <option value="Namibia">Namibia</option>
                                                        <option value="Nauru">Nauru</option>
                                                        <option value="Nepal">Nepal</option>
                                                        <option value="Netherlands">Netherlands</option>
                                                        <option value="Netherlands Antilles">Netherlands Antilles</option>
                                                        <option value="New Caledonia">New Caledonia</option>
                                                        <option value="New Zealand">New Zealand</option>
                                                        <option value="Nicaragua">Nicaragua</option>
                                                        <option value="Niger">Niger</option>
                                                        <option value="Nigeria">Nigeria</option>
                                                        <option value="Niue">Niue</option>
                                                        <option value="Norfolk Island">Norfolk Island</option>
                                                        <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                                                        <option value="Norway">Norway</option>
                                                        <option value="Oman">Oman</option>
                                                        <option value="Pakistan">Pakistan</option>
                                                        <option value="Palau">Palau</option>
                                                        <option value="Panama">Panama</option>
                                                        <option value="Papua New Guinea">Papua New Guinea</option>
                                                        <option value="Paraguay">Paraguay</option>
                                                        <option value="Peru">Peru</option>
                                                        <option value="Philippines">Philippines</option>
                                                        <option value="Pitcairn">Pitcairn</option>
                                                        <option value="Poland">Poland</option>
                                                        <option value="Portugal">Portugal</option>
                                                        <option value="Puerto Rico">Puerto Rico</option>
                                                        <option value="Qatar">Qatar</option>
                                                        <option value="Reunion">Reunion</option>
                                                        <option value="Romania">Romania</option>
                                                        <option value="Russian Federation">Russian Federation</option>
                                                        <option value="Rwanda">Rwanda</option>
                                                        <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                                                        <option value="Saint Lucia">Saint Lucia</option>
                                                        <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
                                                        <option value="Samoa">Samoa</option>
                                                        <option value="San Marino">San Marino</option>
                                                        <option value="Sao Tome and Principe">Sao Tome and Principe</option>
                                                        <option value="Saudi Arabia">Saudi Arabia</option>
                                                        <option value="Senegal">Senegal</option>
                                                        <option value="Seychelles">Seychelles</option>
                                                        <option value="Sierra Leone">Sierra Leone</option>
                                                        <option value="Singapore">Singapore</option>
                                                        <option value="Slovakia (Slovak Republic)">Slovakia (Slovak Republic)</option>
                                                        <option value="Slovenia">Slovenia</option>
                                                        <option value="Solomon Islands">Solomon Islands</option>
                                                        <option value="Somalia">Somalia</option>
                                                        <option value="South Africa">South Africa</option>
                                                        <option value="South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option>
                                                        <option value="Spain">Spain</option>
                                                        <option value="Sri Lanka">Sri Lanka</option>
                                                        <option value="St. Helena">St. Helena</option>
                                                        <option value="St. Pierre and Miquelon">St. Pierre and Miquelon</option>
                                                        <option value="Sudan">Sudan</option>
                                                        <option value="Suriname">Suriname</option>
                                                        <option value="Svalbard and Jan Mayen Islands">Svalbard and Jan Mayen Islands</option>
                                                        <option value="Swaziland">Swaziland</option>
                                                        <option value="Sweden">Sweden</option>
                                                        <option value="Switzerland">Switzerland</option>
                                                        <option value="Syrian Arab Republic">Syrian Arab Republic</option>
                                                        <option value="Taiwan, Province of China">Taiwan, Province of China</option>
                                                        <option value="Tajikistan">Tajikistan</option>
                                                        <option value="Tanzania, United Republic of">Tanzania, United Republic of</option>
                                                        <option value="Thailand">Thailand</option>
                                                        <option value="Togo">Togo</option>
                                                        <option value="Tokelau">Tokelau</option>
                                                        <option value="Tonga">Tonga</option>
                                                        <option value="Trinidad and Tobago">Trinidad and Tobago</option>
                                                        <option value="Tunisia">Tunisia</option>
                                                        <option value="Turkey">Turkey</option>
                                                        <option value="Turkmenistan">Turkmenistan</option>
                                                        <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
                                                        <option value="Tuvalu">Tuvalu</option>
                                                        <option value="Uganda">Uganda</option>
                                                        <option value="Ukraine">Ukraine</option>
                                                        <option value="United Arab Emirates">United Arab Emirates</option>
                                                        <option value="United Kingdom">United Kingdom</option>
                                                        <option value="United States">United States</option>
                                                        <option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
                                                        <option value="Uruguay">Uruguay</option>
                                                        <option value="Uzbekistan">Uzbekistan</option>
                                                        <option value="Vanuatu">Vanuatu</option>
                                                        <option value="Venezuela">Venezuela</option>
                                                        <option value="Vietnam">Vietnam</option>
                                                        <option value="Virgin Islands (British)">Virgin Islands (British)</option>
                                                        <option value="Virgin Islands (U.S.)">Virgin Islands (U.S.)</option>
                                                        <option value="Wallis and Futuna Islands">Wallis and Futuna Islands</option>
                                                        <option value="Western Sahara">Western Sahara</option>
                                                        <option value="Yemen">Yemen</option>
                                                        <option value="Yugoslavia">Yugoslavia</option>
                                                        <option value="Zambia">Zambia</option>
                                                        <option value="Zimbabwe">Zimbabwe</option>
                                                    </select>
                                                    
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="gaps-1x"></div>
                                    <div class="d-sm-flex justify-content-between align-items-center">
                                        <button type="submit" class="btn btn-primary">Update Profile</button>
                                        <div class="gaps-2x d-sm-none"></div>
                                    </div>
                                </form>
                            </div>
                            <div class="tab-pane fade" id="settings">
                                <form class="validate-modern" action="https://cde.lunaone.com/user/ajax/account/update" method="POST" id="nio-user-settings" novalidate="novalidate">
                                    <input type="hidden" name="_token" value="CXb3wAHprEYqMwDKuDICqLmkBWyGHhdqP5h6syOb" /> <input type="hidden" name="action_type" value="account_setting" />
                                    <div class="pdb-1-5x">
                                        <h5 class="card-title card-title-sm text-dark">Security Settings</h5>
                                    </div>
                                    <div class="input-item">
                                        <input name="save_activity" class="input-switch input-switch-sm" type="checkbox" checked="" id="activitylog" />
                                        <label for="activitylog">Save my activities log</label>
                                    </div>
                                    <div class="input-item">
                                        <input class="input-switch input-switch-sm" type="checkbox" checked="" name="unusual" id="unuact" />
                                        <label for="unuact">Alert me by email in case of unusual activity in my account</label>
                                    </div>
                                    <div class="gaps-1x"></div>
                                    <div class="d-sm-flex justify-content-between align-items-center">
                                        <button type="submit" class="btn btn-primary">Update</button>
                                        <div class="gaps-2x d-sm-none"></div>
                                    </div>
                                </form>
                            </div>

                            <div class="tab-pane fade" id="password">
                                <form class="validate-modern" action="{{ route('updatepass')}}" method="POST" id="nio-user-password" novalidate="novalidate">
                                    @csrf
                                 
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="input-item input-with-label">
                                                <label for="old-pass" class="input-item-label">Old Password</label>
                                                <div class="input-wrap">
                                                    <input class="input-bordered" type="password" name="oldpass" id="old-pass" required="required" aria-required="true" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="input-item input-with-label">
                                                <label for="new-pass" class="input-item-label">New Password</label>
                                                <div class="input-wrap">
                                                    <input class="input-bordered" id="new-pass" type="password" name="newpass" required="required" minlength="6" aria-required="true" />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="input-item input-with-label">
                                                <label for="confirm-pass" class="input-item-label">Confirm New Password</label>
                                                <div class="input-wrap">
                                                    <input
                                                        id="confirm-pass"
                                                        class="input-bordered"
                                                        type="password"
                                                        name="repassword"
                                                        data-rule-equalto="#new-pass"
                                                        data-msg-equalto="Password not match."
                                                        required="required"
                                                        minlength="6"
                                                        aria-required="true"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="note note-plane note-info pdb-1x">
                                        <em class="fas fa-info-circle"></em>
                                        <p>Password should be a minimum of 6 digits and include lower and uppercase letter.</p>
                                    </div>
                                    <div class="note note-plane note-danger pdb-2x">
                                        <em class="fas fa-info-circle"></em>
                                        <p>Your password will only change after your confirmation by email.</p>
                                    </div>
                                    <div class="gaps-1x"></div>
                                    <div class="d-sm-flex justify-content-between align-items-center">
                                        <button type="submit" class="btn btn-primary">Update</button>
                                        <div class="gaps-2x d-sm-none"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                                       </div> 
                                    </div>
                                     
                                     </div>
                                <!-- Page-body end -->
                            </div>
                        </div>
                        <!-- Main-body end -->

                       
                    </div>
@endsection