@extends('layouts.app')
@section('title', 'Upload Signature')
@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">Upload Signature</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-12 col-xl-6 text-center">
                                    <div id="upload_preview_crop" name="signature"></div>
                                </div>
                                <div class="col-12 col-xl-6 pt-3">
                                    <div class="d-flex align-items-xl-center mb-2">
                                        <label>Upload Signature:</label>
                                        <span class="fa-layers fa-fw fs-3 ms-2" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="<div class='text-start m-3'><p>Make sure the signature background has been removed.</p></div>" tabindex="0">
                                            <i class="fas fa-circle text-main"></i>
                                            <i class="fas fa-info fa-inverse text-white" data-fa-transform="shrink-8"></i>
                                        </span>
                                    </div>
                                    <input type="file" id="upload_input" class="form-control @error('signature') is-invalid @enderror" name="signature" accept="image/*">
                                    @error('signature')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                    @if ($user->details->signature)
                                        <div class="disabled form-control mt-3 h-auto w-auto p-4 d-flex justify-content-center" >
                                            <img id="thumbnail" class="bg-light" style="border-radius:20px" src="{{ Storage::disk('public')->url($user->details->signature) }}" alt="" title="">
                                        </div> 
                                    @endif
                                </div>
                            </div><!-- Upload Signature -->
                            <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">{{ __('Upload') }}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('js')
<script type="text/javascript">
    $(document).ready(function() {
        $('#upload_preview_crop').croppie({
            enableExif: true ,
            enableOrientation: true,   
            viewport: {
                width: 250,
                height: 150,
                type: 'square'
            },
            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]);
        });

        $('#upload_image').on('click', function (event) {
            event.preventDefault(); 

            if ($('#upload_input')[0].files.length) {
                $('#upload_preview_crop').croppie('result', {
                    type: 'canvas',
                    size: 'viewport',
                }).then(function (img) {
                    var user_id = $('#user_id').val();
                    $.ajax({
                        url: "{{ route('upload-user-signature') }}",
                        type: "POST",
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        data: {"signature":img, "user_id":user_id},
                        success: function (response) {
                            window.location.href="/user/profile/" + user_id;
                            alert(response.success); 
                        },
                    });
                });
            }else{
                alert("Signature required."); 
                return; 
            }
        });
    });
</script>
@endpush