@extends('admin.base')
@section('title')

   EDUCATIVE | Profile
    
@endsection

@section('meta')
  
@endsection

@section('stylesheet')


    
@endsection

@section('body')

   
<div class="container-fluid">

<!-- row -->
<div class="row column1">
   <div class="col-md-2"></div>
   <div class="col-md-8">
      <div class="white_shd full margin_bottom_30">
         <div class="full graph_head">
            <div class="heading1 margin_0">
               <h2>Mon profil</h2>
            </div>
         </div>
         <div class="full price_table padding_infor_info">
            <div class="row">
               <!-- user profile section --> 
               <!-- profile image -->
               <div class="col-lg-12">
                  <div class="full dis_flex center_text">
                     <div class="profile_img">
                        <!-- <img width="180" class="rounded-circle" src="../../admin/images/layout_img/avatar.png" alt="#" /> -->
                     <form enctype="multipart/form-data" action="{{route('update_profile',Auth::user()->id)}}" method="POST" >
                       @csrf
                        <label for="trainerAvatar" style="cursor: pointer;">
                              <img width="180" class="justify-content-center rounded-circle" src="{{ URL::to('../../admin/images/layout_img/avatar.png') }}"  style="display: block;">
                              <!-- id="coverPreview" -->
                        </label>
                        <!-- id="trainerAvatar" -->
                        <input required type="file"  name="trainerAvatar"  style="z-index: -9999; position: absolute; display: none;visibility: hidden; opacity: 0; ">

                        <!-- <div class="form-row justify-content-center">
                            <div class="col-md-1">
                                <div style="padding-left:0px;">
                                    <input type="submit" id="submitFor" class="btn btn-primary" value="VALIDER">
                                </div>
                            </div>
                            {{ csrf_field() }}
                        </div> --> 
                      <!-- </form>  -->  
                      </div>

                      <div class="profile_contant">
                        <div class="contact_inner">
                           <h3>{{Auth::user()->name}}</h3>
                           <h4><i class="fa fa-envelope-o"></i> : {{Auth::user()->email}}</h4>

                           <h3>Compte créé le :  {{date('d-m-Y',strtotime(Auth::user()->created_at))}}</h3>

                           <h3>Dernier mise à jour : {{date('d-m-Y',strtotime(Auth::user()->updated_at))}}</h3>

                        </div>

                         <!-- <div class="  form-row justify-content-left">
                            <div class="pull-left col-md-3">
                                <div style="margin: 0px 0 0 0px;">
                                    <input type="submit" id="submitFor" class="btn btn-primary" value="VALIDER">
                                </div>
                            </div>
                            {{ csrf_field() }}
                        </div> -->

                      </form>

                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="col-md-2"></div>
   </div>
   <!-- end row -->
</div>
</div>
<!-- end dashboard inner -->


@endsection

@section('javascript')
<!-- jQuery -->

    @if(session()->has('info'))
    <script >

      Swal.fire('{{session('info')}}')
      
    </script>
    @endif  


  <script type="text/javascript">

      $("#trainerAvatar").on('change', function(){
          readPictureURL(this);
      });

      function readPictureURL(input) {
          if (input.files && input.files[0]) {
              if(input.files.length==1){
                  var reader = new FileReader();
                  reader.onload = function (e) {
                      $('#coverPreview').attr('src', e.target.result).fadeIn('slow');
                  }
                  reader.readAsDataURL(input.files[0]);
              }
              else{
                  $('#coverPreview').attr('src', '{{ URL::to("../../admin/images/layout_img/avatar.png") }}').fadeIn('slow');
              }
          }
          else{
              $('#coverPreview').attr('src', '{{ URL::to("../../admin/images/layout_img/avatar.png") }}').fadeIn('slow');
          }
      }

      $('#productForm').on('submit', function(e){
          e.preventDefault();
      })

      $('#submitForm').on('click', function(){
          
       
          var trainerAvatar = $("#trainerAvatar").get(0).files;
          var _token = $('input[name="_token"]').val();

        
            if (trainerAvatar.length == 0) {

                swalWithBootstrapButtons.fire({
                    title: 'Erreur',
                    text: "Veuillez choisir une photo!",
                    type: 'error',
                    showCancelButton: true,
                    showConfirmButton: false,
                    cancelButtonText: 'D\'accord'
                })

            } else{
                showWaitingMask(true);

                var form = $('#productForm')[0];
                var data = new FormData(form);
                //AJAX REQUEST
                $.ajax({
                    type: 'POST',
                    enctype: 'multipart/form-data',
                    url: '',
                    
                    data:data,
                    processData: false,  
                    contentType: false,
                    cache: false,
                    timeout: 600000,

                    success:function(result) {
                        showWaitingMask(false);
                        if(result == '1'){
                            swalWithBootstrapButtons.fire({
                                title: 'Succès',
                                text: 'Photo modifiée avec succès !',
                                type: 'success',
                                showConfirmButton: true,
                                confirmButtonText: 'Super'
                            })
                
                            readPictureURL($('#trainerAvatar'));
                        }
                        else if (result == '-1') {
                            swalWithBootstrapButtons.fire({
                                title: 'Erreur',
                                text: ' existant',
                                type: 'warning',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'D\'accord'
                            })
                        }
                        else{
                            console.log(result)
                            swalWithBootstrapButtons.fire({
                                title: 'Erreur',
                                text: 'Echec de l\'opération',
                                type: 'error',
                                showCancelButton: true,
                                showConfirmButton: false,
                                cancelButtonText: 'Hummmm'
                            })
                        }
                    },

                    error:function(result){
                        showWaitingMask(false);
                        console.log(result)
                        swalWithBootstrapButtons.fire({
                            title: 'Erreur',
                            text: 'Echec de l\'opération',
                            type: 'error',
                            showCancelButton: true,
                            showConfirmButton: false,
                            cancelButtonText: 'Réessayez'
                        })
                    }
                });
            }
                          
      });
  
</script>




@endsection