@extends('layouts.admin.master')

@section('admin_main_body')


<!--CDN support JQuery from w3 schools TK-- To show images-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


            <!-- Content -->
            <div class="container-xxl flex-grow-1 container-p-y">
                <h4 class="py-3 breadcrumb-wrapper mb-4">
                    <span class="text-muted fw-light">Settings /</span> Change Profile Picture
                  </h4>
              <!-- Header -->
              <div class="row">
                <div class="col-12">
                  <div class="card mb-6">



      </div>


        <div class="card mb-6">


             <div class="flex-grow-1 mt-3 mt-lg-5">
               <!--User Profile Content -->
                     {{-- <h6 class="fw-medium mb-3 p-2" > Photo Preview: </h6> --}}
    <p class="h6 mb-2 fw-semibold">Preview Profile Picture</p>
        <div class="card custom-card overflow-hidden">
             <div class="card-body p-0">
                 <ul class="list-group list-group-flush">




                    <li class="list-group-item p-4">

             <div class="tab-pane show active" id="personal-info" role="tabpanel">
                  <div class="p-sm-3 p-0"> <h6 class="fw-medium mb-3"> Click on camera to change picture: </h6>
                        <div class="mb-4 d-sm-flex align-items-center">
                          <div class="mb-0 me-5"> <span class="avatar avatar-xxl avatar-rounded">
                               <img id="showImage2"  src="{{asset('backend/assets/images/faces/9.jpg')}}" alt="">
                                <span class="badge rounded-pill bg-primary avatar-badge">
                                   <input type="file" name="photo" class="position-absolute w-100 h-100 op-0" id="image2"> <i class="fe fe-camera"></i> </span> </span>
                          </div>
                <div class="btn-group">
                    <button class="btn btn-primary">Save Change</button>
                 <button class="btn btn-light">Remove</button>
                </div>


                            </div>
                            </div>


                    </div>

                    </li>

                </ul>


            </div>



                                    <li class="list-group-item p-4">
                                        <div class="row">


                                                {{-- <div class="d-md-flex d-grid align-items-center gap-3">
                                                    <button type="submit" class="btn btn-primary px-4" name="submit2">Save Changes</button>
                                                    <a  href="" class ="btn btn-primary px-4" type = "button">Back/Cancel</a>
                                                </div> --}}

                                        </div>

                                    </li>


                                </div>

              <!--/ User Profile Content -->
            </div>
            <!-- / Content -->
        </div>







{{-- <!-- JAVASCRIPT --> --}}
<script type ="text/javascript">
    $(document).ready(function(){
       $('#image').change(function(e){
           var reader = new FileReader();
           reader.onload= function(e){

              $('#showImage').attr('src', e.target.result);
           }
           reader.readAsDataURL(e.target.files['0']);
       });
    });
   </script>


{{-- <!-- JAVASCRIPT --> --}}
<script type ="text/javascript">
    $(document).ready(function(){
       $('#image2').change(function(e){
           var reader = new FileReader();
           reader.onload= function(e){

              $('#showImage2').attr('src', e.target.result);
           }
           reader.readAsDataURL(e.target.files['0']);
       });
    });
   </script>



@endsection