@extends('layouts.app')
@section('title', 'Change Profile Picture')
@section('content')
<div class="container page-content">
    <div class="row justify-content-xl-center page-col">
        <div class="col-12">
            <h1 class="font-weight-bold typography-4 mb-0">Change Profile Picture</h1>
        </div>
    </div><!-- Header -->
    <div class="row justify-content-xl-center page-col">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @csrf
                    <input id="user_id" type="hidden" name="user_id" value="{{ $user->id }}" />
                    <div class="row mb-3">
                        <div class="col-md">
                            <div class="row mb-3">
                                <div class="col-md-6 text-center">
                                    <div id="upload_preview_crop" name="attachment_url"></div>
                                </div>
                                <div class="col-md-6 pt-3">
                                    <label class="pb-2">Upload Profile Picture:</label>
                                    <input type="file" id="upload_input" class="form-control @error('attachment_url') is-invalid @enderror" name="attachment_url" accept="image/*">
                                    @error('attachment_url')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div><!-- Upload Profile Picture -->
                            <div class="row">               
                                <div class="col-12 text-end pt-3 d-flex">
                                    <a class="btn btn-black btn-custom" href="{{ route('user-show', ['user_id' => $user->id]) }}">Back</a>
                                    <button type="submit" id="upload_image" class="ms-3 btn btn-purple">{{ __('Change') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script type="text/javascript">
    $(function() {
        $('#upload_preview_crop').croppie({
            enableExif: true ,
            enableOrientation: true,   
            viewport: {
                width: 200,
                height: 200,
                type: 'circle'
            },
            boundary: {
                width: 300,
                height: 300
            }
        });

        $('#upload_input').on('change', function () { 
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#upload_preview_crop').croppie('bind', {
                    url: e.target.result
                }).then(function(){
                    console.log('jQuery bind complete');
                });
            }
            reader.readAsDataURL(this.files[0]);
        });

        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          }
        });

        $('#upload_image').on('click', function (event) {
            $('#upload_preview_crop').croppie('result', {
                type: 'canvas',
                size: 'viewport',
            }).then(function (img) {
                var user_id = $('#user_id').val();
                $.ajax({
                    url: "{{ route('change-profile-picture') }}",
                    type: "POST",
                    data: {"attachment_url":img, "user_id":user_id},
                    success: function (data) {
                        window.location.href="/user/profile/" + user_id;
                        console.log('Upload success');
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) { 
                        alert("Status: " + textStatus); alert("Error: " + errorThrown); 
                    }
                });
            });
        });
    });
</script>
@endpush