@extends('layouts.app')
  <!-- / .main-navbar -->
@section('content')
<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"
  />
  <style type="text/css">
    .change-password .rounded-circle{
      border:1px solid #000;
      border-radius: 25% !important;
    }
    .circle {
        width: 120px;
        height: 120px;
        position: relative;
    }
    .loader {
        /* content: ''; */
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: transparent;
        border-radius: 50%;
        border: 5px solid #f3f3f3;
        border-top: 6px solid  #008be8;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 2s linear infinite;
    }
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}



@keyframes fadein {
from{

    height: 100%;
    width: 100%;
}
to{
    display: none;
    height: 0%;
    width: 100%;
}

}
    /* .loader {
        border: 6px solid #f3f3f3;
        border-radius: 50%;
        border-top: 6px solid #3498db;
        width: 120px;
        height: 120px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    } */

    /* Safari
    @-webkit-keyframes spin {
        0% { -webkit-transform: rotate(0deg); }
        100% { -webkit-transform: rotate(360deg); }
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    } */
  </style>
  <div class="main-content-container container-fluid px-4">
    <!-- Page Header -->
    <div class="page-header row no-gutters py-4">
      <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
        <span class="text-uppercase page-subtitle">Overview</span>
        <h3 class="page-title">User Profile</h3>
      </div>
    </div>
    <!-- End Page Header -->
    <!-- Default Light Table -->
    <div class="row">
      <div class="col-lg-4">
        <div class="card card-small mb-4 pt-3">
          <div class="card-header border-bottom text-center">
                <div class="mb-2 mx-auto">
                    <form id="changePhotoForm" action="{{route('change_profile_image')}}" method="post" onsubmit="changePhoto(event, this)" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <input id="photo" class="row d-none" type="file" style="" name="photo">
                    </form>
                    <div class="d-flex justify-content-center align-content-center">
                        <div class="circle text-center">
                            <div class="loader d-none"></div>
                            <img id="photoFrame" class="rounded-circle text-center stop" src="{{ asset(Auth::user()->hasMedia()?Auth::user()->getFirstMediaUrl():'images/avatars/1.jpg') }}" alt="User Avatar" width="120" height="120px" style="object-fit:cover">
                        </div>
                    </div>
                </div>
                <div id="success" class="mx-auto justify-content-center align-content-center badge badge-success alert-dismissible mb-3 mt-2 d-none animate__animated" style="width:35%">
                    Photo has been uploaded.
                    <button type="button" class="close d-none" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                </div>
                <span id="retry" class="d-none mb-2 badge badge-danger mx-auto" style="width:35%"> Upload Failed.
                    {{-- <small> --}}
                        <a class="text text-white ml-2" href=""  style="text-decoration:underline" onclick="changePhoto(event,$('#changePhotoForm'))">Retry</a>
                    {{-- </small> --}}
                </span>
                <button id="changePhotoButton" type="button" class="mb-2 btn btn-sm btn-pill btn-outline-primary mr-1">
                <i class="material-icons mr-1">add_a_photo</i>Change Photo
                </button>
                <h4 class="mb-0">{{Auth::user()->name}}</h4>
                <span class="text-muted d-block mb-2">{{Auth::user()->email}}</span>
                <span class="text-muted d-block mb-1">{{Auth::user()->getRoleNames()[0]}}</span>
          </div>
          <ul class="list-group list-group-flush">
            <!-- <li class="list-group-item px-4">
              <div class="progress-wrapper">
                <strong class="text-muted d-block mb-2">Workload</strong>
                <div class="progress progress-sm">
                  <div class="progress-bar bg-primary" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%;">
                    <span class="progress-value">74%</span>
                  </div>
                </div>
              </div>
            </li> -->
            <li class="list-group-item p-4">
              <strong class="text-muted d-block mb-2">Description</strong>
            <span>{{auth()->user()->description}}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-8">
        <div class="card card-small mb-4">
          <div class="card-header border-bottom">
            <h6 class="m-0"><i class="fa fa-user"></i> User Details</h6>
          </div>
          <ul class="list-group list-group-flush">
            <li class="list-group-item p-3">
              <div class="row">
                <div class="col">
                  @if(Session::has('update-success'))
                      <div class="alert alert-success text-center">{{Session::get('update-success')}}</div>
                    @endif
                  <form method="POST" action="{{route('auth.update-profile')}}">
                    {{csrf_field()}}
                    <div class="form-row">
                      <div class="form-group col-md-6">
                        <label for="name">Your Name</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Your Name" value="{{Auth::user()->name}}">
                        @if($errors->has('name'))
                          <span class="text text-danger">** {{ $errors->first('name') }}</span>
                        @endif
                      </div>
                      <div class="form-group col-md-6">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" placeholder="Email" name="email" value="{{Auth::user()->email}}">
                        @if($errors->has('email'))
                          <span class="text text-danger">** {{ $errors->first('email') }}</span>
                        @endif
                      </div>
                    </div>
                    {{-- <div class="form-row">
                      <div class="form-group col-md-12">
                        <label for="description">Description</label>
                        <textarea class="form-control" name="description" rows="5">{{Auth::user()->description}}</textarea>
                        @if($errors->has('description'))
                          <span class="text text-danger">** {{ $errors->first('description') }}</span>
                        @endif
                      </div>
                    </div> --}}
                    <button type="submit" class="btn btn-accent mt-2 ">Update Account</button>
                  </form>
                </div>
              </div>
              <br>
            </li>
            <li class="list-group-item p-3">
              <div class="row change-password">
                <div class="col-md-4 text-center">
                  <div class="mb-3 mx-auto mt-4">
                    <img class="rounded-circle" src="{{ asset('images/key.png')}}" alt="User Avatar" width="150">
                  </div>
                  <h5 class="m-0 mb-3">Change Password</h5>
                </div>
                <div class="col-md-8 col">
                  @if(Session::has('success'))
                    <div class="alert alert-success text-center">{{Session::get('success')}}</div>
                  @endif
                <form method="POST" action="{{route('auth.change-password')}}">
                    {{csrf_field()}}
                    <div class="form-row">
                      <div class="form-group col-md-12">
                        <label for="old_password">Old Password</label>
                        <input type="password" class="form-control" id="old_password" name="old_password" placeholder="Old Password" value="">
                        @if($errors->has('old_password'))
                          <span class="text text-danger">** {{ $errors->first('old_password') }}</span>
                        @endif
                      </div>
                      <div class="form-group col-md-12">
                        <label for="new_password">New Password</label>
                        <input type="password" class="form-control" id="new_password" name="new_password" placeholder="New Password" value="">
                        @if($errors->has('confirm_password'))
                        <div class="alert text-danger">** {{ $errors->first('confirm_password') }}</div>
                        @endif
                      </div>
                      <div class="form-group col-md-12">
                        <label for="confirm_password">Confirm Password</label>
                        <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password" value="">
                        @if($errors->has('confirm_password'))
                        <div class="alert text-danger">** {{ $errors->first('confirm_password') }}</div>
                        @endif
                      </div>
                    </div>
                    <button type="submit" class="btn btn-accent">Change Password</button>
                  </form>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <!-- End Default Light Table -->
  </div>
  <script>
      $('#changePhotoButton').on('click',function(){
          $("input[type=file]").trigger("click");
        });
        function readURL(input) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#photoFrame')
                    .attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    function changePhoto(e,form){
        e.preventDefault();
        $('#photoFrame').css('opacity','0.4')
        $('#retry').removeClass('d-block')
        $('.loader').removeClass('d-none');
        var formData = new FormData($(form)[0]);
        setTimeout(function(){
            $.ajax({
            url: '\change-profile-photo',
            type: 'POST',
            data: formData,
            async: false,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function (response) {
                $('div#success').removeClass('d-none').addClass('d-flex');
                closeAlert();
                $('#retry').removeClass('d-block')
                $('#photoFrame').css('opacity','1')
                $('.loader').addClass('d-none');
                $('.nav-item img').attr('src', $('#photoFrame').attr('src'))
            },
            error: function (error) {
                $('#retry').addClass('d-block')
                $('#photoFrame').attr('src', $('.nav-item img').attr('src'))
                $('#photoFrame').css('opacity','1')
                $('.loader').addClass('d-none');
            }
        });
        }, 1000)

    }
    function closeAlert(){
        $('#success').addClass('animate__fadeIn').css('animation-duration', '0.5s')
        setTimeout(function() {
            $('#success').removeClass('animate__fadeIn').addClass('animate__fadeOut').css('animation-duration', '3s')
            }, 2000);
            setTimeout(function() {
                $('div#success').removeClass('d-flex').addClass('d-none');
            }, 4000);
    }

    $(function () {
        $('#photo').on('change', function () {
            var input = document.getElementById( 'photo' );
            // console.log($('#photo'))
            readURL(input);
            $('#changePhotoForm').submit();
        });
    });
  </script>
@endsection