@extends('layout.frontend.master')

@section('meta-title', 'My Account - LEREVE')

@push('asset-top')
   <style type="text/css">
      .addon-text{
         width: 100%;
         display: flex;
         flex-wrap: nowrap;
      }
      .addon-text .pre-text{
         background-color: transparent;
         border-radius: 0;
         border: 1px solid #51342D;
      }
      .addon-text .pre-text input{
         width: 100%;
         background-color: transparent;
      }
   </style>
@endpush

@section('content')
   <section class="page-content inner-block">
      <div class="account-container">
         <div class="container-fluid">
            <div class="row myaccount">
               <div class="col-lg-3">
                  <div class="account-left-block">
                     <div class="account-left-head">
                        <div class="account-name">{{__('Hi')}} {{$user['user']->name}}</div>
                        <p>{{$user['user']->email}}</p>
                        <p>{{($user['user']['profile'])?$user['user']['profile']->phone:''}}</p>
                     </div>
                     <div class="account-menu-block">
                        <ul class="account-nav">
                           <li><a  href="{{route('user.dashboard')}}"><div class="account-icon"> <i class="bi bi-grid"></i></div>{{__('My Dashboard')}} </a></li>
                           <li class="active"><a  href="{{route('my.account')}}"><div class="account-icon"> <i class="bi bi-person"></i></div> {{__('My Account')}} </a></li>
                           <li><a  href="{{route('address.book')}}"><div class="account-icon"> <i class="bi bi-geo-alt"></i></div>{{__('Address Book')}}</a></li>
                           <li><a  href="{{route('my.orders')}}"><div class="account-icon"> <i class="bi bi-cart2"></i></div> {{__('My Orders')}}</a></li>
                           <li><a  href="{{route('logout')}}"> <div class="account-icon"> <i class="bi bi-box-arrow-right"></i></div>{{__('Logout')}}</a></li>
                        </ul>
                     </div>
                  </div>
               </div>
               <div class="col-lg-9">
                  <div class="account-right-block">
                     <div class="account-head"><h3>{{__('My Account')}}</h3></div>
                     <div class="personal-info">
                        <div class=" row">
                           <div class="col-lg-12">
                              <h5>{{__('Your personal information')}}</h5>

                              <form method="post" action="{{route('update.profile')}}">
                                 @csrf
                                 <ul class="info-list" id="tbNamee">
                                    <li >
                                       <div class="name-label">{{__('Full Name')}}</div>
                                       <div class="name-dtls">
                                          <input type="text" class="custom-field" name="full_name" value="{{old('full_name', $user['user']->name)}}" > 
                                       </div>
                                    </li>
                                    <li>
                                       <div class="name-label">{{__('Phone Number')}}</div>
                                       <div class="name-dtls">
                                          <div class="input-group addon-text">
                                             <span class="input-group-addon input-group-text pre-text">+965</span>
                                             <input type="text" class="custom-field" name="phone" value="{{old('phone', ($user['user']['profile'])?$user['user']['profile']->phone:'')}}" > 
                                          </div>
                                       </div>
                                    </li>
                                    <li>
                                       <div class="name-label">{{__('Email Address')}}</div>
                                       <div class="name-dtls"><input type="email" class="custom-field" name="email" value="{{old('email', $user['user']->email)}}" > </div>
                                    </li>
                                    <li>
                                       <div class="name-label">{{__('Date Of Birth')}}</div>
                                       <div class="dob">
                                          <div class="input-group  date" >
                                             <input type='text' class="custom-field" placeholder="Select Date" name="date_of_birth" value="{{old('date_of_birth', ($user['user']['profile'])?$user['user']['profile']->dob:'')}}" />
                                             <span class="input-group-addon input-group-text"><img src="{{asset('images/calendar.svg')}}"></span>
                                          </div> 
                                       </div>
                                    </li>
                                    <li>
                                       <div class="account-btn-block">
                                          <div class="edit-part">
                                             <div class="edit-btn">
                                                <button type="button" id="edit-submit"><i class="bi bi-pencil-fill"></i></button>
                                             </div>
                                          </div>
                                          <div class="save-btn">
                                             <button class="save" id="save-field">{{__('Save')}}</button>
                                          </div>
                                       </div>
                                    </li>
                                 </ul>
                              </form>
                           </div>            
                        </div>
                     </div>
                     <!-- <div class="personal-info">
                        <div class=" row">
                           <div class="col-lg-12">
                              <h5>Password</h5>
                              <ul class="info-list">
                                 <li>
                                    <div class="name-label">Password</div>
                                 </li>
                                 <li>
                                    <div class="account-btn-block">
                                       <div class="edit-part">
                                          <div class="edit-btn">
                                             <a href="#" data-bs-toggle="modal" data-bs-target="#changePassword">
                                                <i class="bi bi-pencil-fill"></i>
                                             </a>
                                          </div>
                                       </div>
                                    </div>
                                 </li>
                              </ul>
                           </div>
                        </div>
                     </div> -->
                  </div>
               </div>
            </div>
         </div>
      </div>

      <!-- Start change password-->
      <div class="modal right fade login-popup" id="changePassword" tabindex="-1" role="dialog"  aria-labelledby="myModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
               <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               <div class="modal-body"  aria-labelledby="changeLabel">
                  <div class="login-block">
                     <div class="login-right">
                        <div class="login-form">
                           <div class="row mb-5 form-area register ">
                              <h3>{{__('Change Password')}}</h3>
                              <div class="col-lg-12 form-field">
                                 <div class="form-group">
                                    <input class="form-control custom-field " placeholder=" Current Password"  type="password" required="">
                                 </div>
                              </div>
                              <div class="col-lg-12 form-field">
                                 <div class="form-group">
                                    <input class="form-control custom-field " placeholder="New Password"  type="password" required="">
                                 </div>
                              </div>
                              <div class="col-lg-12 form-field">
                                 <div class="form-group">
                                    <input class="form-control custom-field " placeholder="Confrim Password"  type="password" required="">
                                 </div>
                              </div>
                              <div class="col-lg-12 form-field ">
                                 <a href="#" class="btn w-100 line-button-light" data-bs-toggle="modal" data-bs-target="#guestPopup">{{__('Change Password')}}</a>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- End Login-->
   </section>

   <script src="{{asset('js/bootstrap-datepicker.js')}}"></script>
   <script>
      $('.dob .date').datepicker({});

      jQuery(document).ready(function(e){
         jQuery('#tbNamee').find('input').prop('readonly', true);
      });
      jQuery('#edit-submit').click(function(e){
         e.preventDefault();
         jQuery('#tbNamee').find('input').prop('readonly', false);
      });
   </script>
@endsection