@extends('buyers_sellers.layout2.master')
@section('title', 'Edit Profile')
@section('content')
<style type="text/css">
.profileimage{
   height: 146px;
   width: 152px;
   object-fit: fill;
   }
.uploadbtn{
  margin-left: -8px !important;
}
.row.upload-photo {
    height: 40px;
    padding: 7px 30px;
    border-radius: 10px;
    margin-left: -10px;
    width: 47%;
    border-color: grey;
    /* border: 1px solid grey; */
    border: 1px solid #ccc;
}
button.bton {
    margin-top: -17px !important;
    background: #efefef !important;
    color: #000 !important;
    border-radius: 30px !important;
    padding: 0px 0px 0px 0px!important;
    border: 1px solid grey !important;
    margin-top: -10px !important;
    width: 100px;
}
.row.upload-photo2 {
    height: 40px;
    padding: 7px 30px;
    border-radius: 10px;
    margin-left: -10px;
    width: 188%;
    border-color: grey;
    /* border: 1px solid grey; */
    border: 1px solid #ccc;
    background: #6d0000;
}
@media only screen and (max-width: 992px) {

       button.bton {
    margin-top: -17px !important;
    background: #efefef !important;
    color: #000 !important;
    border-radius: 30px !important;
    padding: 0px 0px !important;
    border: 1px solid grey !important;
    margin-top: -10px !important;
    /* height: 82px; */
}
.row.upload-photo2 {
    height: 74px;
    padding: 7px 30px;
    border-radius: 10px;
    margin-left: -10px;
    width: 100%;
    border-color: grey;
    /* border: 1px solid grey; */
    border: 1px solid #ccc;
    background: #6d0000;
}
.row.upload-photo {
    height: 74px;
    padding: 7px 30px;
    border-radius: 10px;
    margin-left: 13px;
    width: 100%;
    border-color: grey;
    /* border: 1px solid grey; */
    border: 1px solid #ccc;
    width: 325px;
}
}
</style>

<div class="page-content-wrapper">
   <div class="page-content">
      <div class="page-bar">
         <div class="page-title-breadcrumb">
             <div class=" pull-left">
                 <div class="page-title">Client Profile Edit</div>
             </div>
             <ol class="breadcrumb page-breadcrumb pull-right">
                 <li><i class="fa fa-home"></i>&nbsp;<a class="parent-item" href="{{ route('buyer.dashboard') }}">Home</a>&nbsp;<i class="fa fa-angle-right"></i>
                 </li>
                 {{-- <li><a class="parent-item" href="">UI Elements</a>&nbsp;<i class="fa fa-angle-right"></i> --}}
                 </li>
                 <li class="active">Profile Edit</li>
             </ol>
         </div>
     </div>
            <div class="py-4">
               <div class="">
               <form method="post" action="{{ route('buyer.profile.update') }}" id="form" enctype='multipart/form-data'>
                  @csrf
                  <div class="row">
                     <!-- Main Content --> 
                     <main class="col-md-12">
                        <div class="border bg-white mb-3">
                           <div class="box-title border-bottom p-3">
                              @if(Session::has('message'))
                              <div class="alert alert-primary" role="alert">
                                 {{ Session::get('message') }}
                               </div>
                              @endif
                              <header class="m-0 bold">Edit Basic Info</header>
                              {{-- <p class="mb-0 mt-0 small">Lorem ipsum dolor sit amet, consecteturs.
                              </p> --}}
                              <div class="alert alert-danger alert-dismissible fade" role="alert" style="color:white">
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                 <span aria-hidden="true">&times;</span>
                              </button>
                              <strong>Error! </strong>
                              </div>
                           </div>
                           <div class="color-border-bottom-edit"></div>
                           <div class="box-body p-3">
                              {{-- <form class="js-validate" novalidate="novalidate"> --}}
                                 <div class="col-md-3">
                                    <div class="col-md-3">
                                       <div class="p-4 d-flex align-items-center">
                                          @if(Auth::user()->profile ==null)
                                          <img src="{{asset('assets/buyers_sellers/img/p13.png')}}" class="img-fluid-circle profileimage" alt="Responsive image">
                                          @else
                                       <img src="{{asset('Buyer/Profile/'.Auth::user()->profile)}}" class="img-fluid-circle profileimage" alt="Responsive image">
                                       @endif
                                       </div>
                                    </div>
                                    <!-- <div class="p-4">
                                       <input class="btn btn-theme" name="profile_image" type="file" >
                                       
                                     </div>  -->
                                     <div class="row upload-photo2" >
                                      

                                        
                                       <div class="col-md-6"> 
                                   <p><button type="button" class="bton" onclick="browseclick2()" >Choose File</button></p>
                                    <input type="file" class="form-control file" name="profile_image" id="getfile2"  style="margin-top: 20px !important;display:none;" 
                                      >
                                   <span class="text-danger" style="color: red;" >{{ $errors->first('proofs') }}</span>
                                 </div>
                                 <div class="col-md-6 ">
                                    <b style="color:white">Upload Profile photo</b>
                                  </div>
                                 </div>
                                 <div class="row">
                                    <div class="col-md-12">
                                       <p id="profileimagename"></p>
                                    </div>
                                 </div>
                                 </div>
                                 <div class="row">
                                    <!-- Input -->
                                       <input type="hidden" name="user_id" value="{{ Auth::user()->id }}">
                                    <div class="col-sm-12 mb-4">
                                       <div class="js-form-message">
                                          <label id="nameLabel" class="form-label bold">
                                          Full Name
                                          <span class="text-danger">*</span>
                                          </label>
                                          <div class="form-group">
                                             <input type="text" class="form-control" name="full_name" value="{{ $data->full_name }}" placeholder="Enter Your name" aria-label="Enter Your name" required="" aria-describedby="nameLabel" data-msg="Please enter Your name." data-error-class="u-has-error" data-success-class="u-has-success">
                                             {{-- <input type="text" class="form-control" name="full_name" value="John Doe" placeholder="Enter Your name" aria-label="Enter Your name" required="" aria-describedby="nameLabel" data-msg="Please enter Your name." data-error-class="u-has-error" data-success-class="u-has-success"> --}}
                                             <small class="form-text text-muted">Displayed on Your public profile, notifications and other places.</small>
                                          </div>
                                       </div>
                                    </div>
                                    <!-- End Input -->
                                 </div>
                                 <div class="row">
                                    <!-- Input -->
                                    <div class="col-sm-12 mb-4">
                                       <div class="js-form-message">
                                          <label id="addressLabel" class="form-label bold">
                                          Address
                                          <span class="text-danger">*</span>
                                          </label>
                                          <div class="form-group">
                                             <input type="text" class="form-control" name="address" value="{{ $data->address }}" placeholder="Enter Address" aria-label="Enter Your name" required="" aria-describedby="nameLabel" data-msg="Please enter Your name." data-error-class="u-has-error" data-success-class="u-has-success">
                                             {{-- <input type="text" class="form-control" name="address" value="Abc street,karachi,pakistan" placeholder="Enter Your name" aria-label="Enter Your name" required="" aria-describedby="nameLabel" data-msg="Please enter Your name." data-error-class="u-has-error" data-success-class="u-has-success"> --}}
                                             <small class="form-text text-muted">Displayed on Your public profile, notifications and other places.</small>
                                          </div>
                                       </div>
                                    </div>
                                    <!-- End Input -->
                                 </div>
                                 <div class="row">
                                    <!-- Input -->
                                    <div class="col-sm-6 mb-2">
                                       <div class="js-form-message">
                                          <label id="emailLabel" class="form-label bold">
                                          Email address
                                          <span class="text-danger">*</span>
                                          </label>
                                          <div class="form-group">
                                             <input type="email" class="form-control" name="email" value="{{ $data->email }}" placeholder="Enter Your email address" aria-label="Enter Your email address"  aria-describedby="emailLabel" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success" readonly>
                                             {{-- <input type="email" class="form-control" name="email" value="johndoe@gmail.com" placeholder="Enter Your email address" aria-label="Enter Your email address"  aria-describedby="emailLabel" data-msg="Please enter a valid email address." data-error-class="u-has-error" data-success-class="u-has-success" readonly> --}}
                                             <small class="form-text text-muted">We'll never share Your email with anyone else.</small>
                                          </div>
                                       </div>
                                    </div>
                                    <!-- End Input -->
                                    <!-- Input -->
                                    <div class="col-sm-6 mb-2">
                                       <div class="js-form-message">
                                          <label id="phoneNumberLabel" class="form-label bold">
                                          Phone number
                                          <span class="text-danger">*</span>
                                          </label>
                                          <div class="form-group">
                                             <input class="form-control" type="tel" name="phone_number" value="{{ $data->phone_number }}" placeholder="Enter Your phone number" aria-label="Enter Your phone number" required="" aria-describedby="phoneNumberLabel" data-msg="Please enter a valid phone number" data-error-class="u-has-error" data-success-class="u-has-success">
                                             {{-- <input class="form-control" type="tel" name="phone_number" value="039857234957849" placeholder="Enter Your phone number" aria-label="Enter Your phone number" required="" aria-describedby="phoneNumberLabel" data-msg="Please enter a valid phone number" data-error-class="u-has-error" data-success-class="u-has-success"> --}}
                                          </div>
                                       </div>
                                       <!-- <a class="d-inline-block u-text-muted" href="#">
                                       <span class="mr-1">+</span>
                                       Add phone number
                                       </a> -->
                                    </div>
                                    <!-- End Input -->
                                 </div>
                                 <!-- <label class="form-label bold">
                                 Birth date
                                 <span class="text-danger">*</span>
                                 </label>
                                 <div class="row"> -->
                                    <!-- Input -->
                                    <!-- <div class="col-md-6 mb-3 mb-sm-6">
                                       <div class="js-form-message">
                                          <div class="form-group">
                                             <input type="date" class="form-control"  name="date_birth" value="{{ $data->birth_date }}">
                                             {{-- <input type="date" name="date_birth" value="12-12-1993"> --}}
                                          </div>
                                       </div>
                                    </div> -->

                                    <div class="row upload-photo" >
                                      

                                        
                                       <div class="col-md-6"> 
                                   <p><button type="button" class="bton" onclick="browseclick();" >Choose File</button></p>
                                    <input type="file" class="form-control file" name="proofs[]" id="getfile"  style="margin-top: 20px !important;display:none;" 
                                     multiple required>
                                   <span class="text-danger" style="color: red;" >{{ $errors->first('proofs') }}</span>
                                 </div>
                                 <div class="col-md-6 ">
                                    <b style="color:#737373"> Upload Photo ID</b>
                                  </div>
                                 </div>
                                 <div class="col-md-12">
                                    <p id="imagename"></p>
                                 </div>

                                    <!-- End Input -->
                                    
                                    <!-- End Input -->
                                    <!-- Input -->
                                    {{-- <div class="col-sm-4 col-md-2 mb-2">
                                       <div class="js-form-message">
                                          <div class="form-group">
                                             <select name="gender" class="form-control custom-select" required="" data-msg="Please select Your gender." data-error-class="u-has-error" data-success-class="u-has-success">
                                                <option value="male">Male</option>
                                                <option value="female">Female</option>
                                             </select>
                                          </div>
                                       </div>
                                    </div> --}}
                                    <!-- End Input -->
                                 </div>
                                 <!-- <div class="row">
                                    <div class="col-md-6">
                                       <div class="form-group">
                                          <label for="exampleFormControlSelect1">How did you hear about us?</label>
                                          <select class="form-control" id="exampleFormControlSelect1">
                                            <option>Houserunsforme Client</option>
                                            <option>Online search</option>
                                            <option> Social media</option>
                                            <option>Other</option>
                                          
                                          </select>
                                        </div>                          
                                    </div>
                                 </div> -->
                                 <div class="row">
                                    <!-- Input -->
                                    <!-- <div class="col-sm-6 mb-2">
                                       <div class="js-form-message">
                                          <label id="nearestTownLabel" class="form-label bold">
                                          Nearest Town
                                          <span class="text-danger">*</span>
                                          </label>
                                          <div class="form-group">
                                             <select name="n_towns" class="form-control custom-select" required="" data-msg="Please select Your gender." data-error-class="u-has-error" data-success-class="u-has-success">
                                                @foreach ($nearest as $towns )
                                                   <option value="{{ $towns->id }}">{{ $towns->name }}</option>
                                                   {{-- <option value="">town one</option>
                                                   <option value="">town two</option> --}}
                                                @endforeach
            
                                             </select>
                                          </div>
                                       </div>
                                    </div> -->
                                    <!-- End Input -->
                                 </div>
                                 {{-- <hr>
                                    <div class="row">
                                    <div class="col-sm-10 mb-6">
                                    </div>
                                    <div class="col-sm-2 mb-2">
                                       <button type="button" class="btn btn-primary btn-sm">ADD NEW <i class="feather-plus"></i></button>
                                    </div>
                                    <!-- End Input -->
                                 </div> --}}
                              {{-- </form> --}}
                           </div>
                        </div>
            
                           <div class="border bg-white mb-3">
                           <div class="box-body px-3 pt-3 pb-0">
                              <div class="row">
                                 <div class="col-md-12 mb-6">
                                    <button type="submit" class="btn btn-theme btn-md " onclick="submitform();">Update</button>
                                 </div>
                                
                                 <!-- End Input -->
                              </div>
                           </div>
                        </div> 
            
                     </main>
                  </form>
                  </div>
               </div>
            </div>
   </div>
</div>
@endsection
@section('scripts')
<script>
   function browseclick(){
    var fileinput = document.getElementById("getfile");  // use input file id here
    fileinput.click(); 
}
$(document).ready(function(){
    $('#getfile').on('change',function(){
        var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
        $('#imagename').text(filename);
    });
    $('#getfile2').on('change',function(){
        var filename2= $(this).val().replace(/C:\\fakepath\\/i, '');
        $('#profileimagename').text(filename2);
    });
});
function browseclick2(){
    var fileinput = document.getElementById("getfile2");  // use input file id here
    fileinput.click(); 
}

// function submitform(){
//    $('#form').submit();
// }
</script>
@endsection