@extends('layouts.admin')
@section('content')
<div class="main-content-wrap sidenav-open d-flex flex-column">
<!-- ============ Body content start ============= -->
<div class="main-content">
   <div class="row">
      <div class="col-sm-11">
         <ul class="breadcrumb">
            <li><a href="{{ url('admin/home') }}">Dashboard</a></li>
            <li>Profile</li>
         </ul>
      </div>
   </div>
   <div class="row">
      <div class="col-md-3 content-container">
         <!-- left-sidebar -->
         @include('admin.accounts.left-sidebar')
      </div>
      <div class="col-md-9">
         <div class="card">
            <form action="{{route('admin.profile.update')}}" method="post" id="updateProfileForm">
               @csrf
               <div class="card-body">
                  <div class="row mb-20">
                     <div class="col-md-12">
                        <h4 class="heading-data text-blue">Profile Information</h4>
                        <div class="bg-white pad-15" style="margin-top:32px;">
                        <div class="row">
                            <div class="col-sm-12 upload-photo">
                              <div class="form-group">
                                 <div class="media align-items-center">
                                   <div class="media-head me-5">
                                     <div class="avatar avatar-xxl edit-profile-img">
                                       <img @if($profile->profile_image != '') src="{{asset('uploads/profile/')}}/{{$profile->profile_image}}" @else src="{{ asset('admin/images/profile-default-avtar.jpg')}}" @endif alt="user" class="avatar-img img-thumbnail" id="courseimg1">
                                       <div class="btn btn-soft-primary btn-file mb-1 update-photo">
                                      Update Photo
                                       <input type="file" class="upload" id="fileupload1" name="profile_image" accept=".png,.jpg,.jpeg">
                                     </div>
                                     </div>
                                   </div>
                                 </div>
                              </div>
                           </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="Fname" class="form-label">First Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control ignoreFirstSpace" name="first_name" id="first_name"  value="{{$profile->first_name}}">
                                    <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-first_name"></p>
                                 </div>
                               </div>
                               <div class="col-md-6">
                                <div class="form-group">
                                    <label for="Lname" class="form-label">Last Name</label>
                                    <input type="text" class="form-control ignoreFirstSpace" name="last_name" id="last_name"  placeholder="Last Name" value="{{$profile->last_name}}">
                                 </div>
                                 <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-last_name"></p>
                               </div>
                               <div class="col-md-6">
                                 <div class="form-group">
                                    <label for="phone" class="form-label">Phone Number <span class="text-danger">*</span></label>
                                    <input type="hidden" name="phone_code" id="code" value="61">
                                    <input type="hidden" name="phone_iso" id="iso" value="AU">
                                    <div class="phone1">
                                        <div class="dropdown">
                                            <button class="btn btn-success dropdown-toggle setField flaginput" type="button"
                                            id="dropdownMenuButton"
                                            data-toggle="dropdown"
                                            aria-haspopup="true"
                                            aria-expanded="false">
                                            <img src="{{ asset('front/image/au.png') }}" width="20" height="15" class="flag12"> +61
                                            </button>
                                        </div>
                                        <input type="text" name="phone_number" class="form-control phoneflag numberonly" placeholder="Phone Number" maxlength="10" value="{{ $profile->phone }}">
                                     </div>
                                    <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-phone_number"></p>
                                 </div>
                             </div>
                             <div class="col-md-6">
                                <div class="form-group">
                                   <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                                   <input type="email" class="form-control emptyonly" id="email" placeholder="Enter email..." value="{{$profile->email}}" disabled>
                                   <p style="margin-bottom: 2px;" class="text-danger error_container" id="error-email"></p>
                                </div>
                             </div>
                        </div>
                         <button type="submit" class="btn btn-blue text-white bg-blue update-admin-profile">Update</button>
                        </div>
                     </div>
                  </div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
</div>
<script>
   $(function(){
    //
      fileupload1.onchange = evt => {
        const [file] = fileupload1.files
        if (file) {
            courseimg1.src = URL.createObjectURL(file)
        }
      }
    //
    $('.update-admin-profile').on('click', function() {
      var $this = $(this);
      var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> loading...';
      if ($(this).html() !== loadingText) {
        $this.data('original-text', $(this).html());
        $this.html(loadingText);
      }
   });

   //
   $(document).on('submit', 'form#updateProfileForm', function (event) {
   event.preventDefault();
   //clearing the error msg
   $('p.error_container').html("");
   $('.error-control').removeClass('border-danger');
   $('.update-admin-profile').attr('disabled',true);

   var form = $(this);
   var data = new FormData($(this)[0]);
   var url = form.attr("action");

    $.ajax({
        type: form.attr('method'),
        url: url,
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        success: function (response) {
            if(response.success==true  ) {

                //notify
               toastr.success("Profile updated successfully");
                // redirect to google after 5 seconds
                window.setTimeout(function() {
                    window.location.reload();
                }, 2000);

            }
            //show the form validates error
            if(response.success==false ) {
              $('.update-admin-profile').attr('disabled',false);
                var loadingText = 'Update';
                $('.update-admin-profile').html(loadingText);
                for (control in response.errors) {
                    $('#error-' + control).html(response.errors[control]);
                }

               if( response.error_type == 'something_wrong' )
               {
                   toastr.error("Sorry, something went wrong. Please try again later.");
                    window.setTimeout(function() {
                   window.location.reload();
                   $("#updateProfileForm").trigger('reset');
                   }, 4000);
               }
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            // alert("Error: " + errorThrown);
        }
    });
    return false;
   });
   });

</script>
@endsection