@props([
    'photo' => null,
    'name' => 'profile_photo_file',
    'id' => 'profile_photo_input',
])

<figure class="text-center mx-auto mb-0" style="width: 9.375em;">
    <img src="{{ $photo ? $photo : asset('img/photo_placeholder.png') }}" id="userPhoto" alt="Foto de perfil" class="img-thumbnail" style="height: 12.5em; width: 9.375em; object-fit: cover;">
    <figcaption class="mt-0">
        <div class="btn-group d-flex" id="noPhoto">
            <label for="{{ $id }}" class="btn btn-primary btn-sm flex-grow-1 mb-0" id="btnPhotoLbl">
                Adicionar foto
            </label>
            <input type="file" name="{{ $name }}" id="{{ $id }}" class="d-none" accept="image/*">
            <button type="button" class="btn btn-sm btn-danger px-0 d-none" id="btnPhotoDelete" >
                <i class="fas fa-trash"></i>
            </button>
        </div>
		<input type="hidden" name="image_base64" id="image_base64" />
    </figcaption>
</figure>

<div class="modal fade" id="cropModal" tabindex="-1" role="dialog" aria-labelledby="cropModalLabel" aria-hidden="true"
    data-input-id="{{ $id }}" data-placeholder-path="{{ asset('img/photo_placeholder.png') }}">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cropModalLabel">Recortar Foto</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="img-container">
                    <img id="imageToCrop" src="" alt="Picture" style="max-width: 100%;">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="cropAndSaveButton">Salvar</button>
            </div>
        </div>
    </div>
</div>


@section('styles')
@parent 
<style>

	/* Fix bug do bootstrap q deixa btn-group com um só membro quadrado */
	.rounded-button {
	border-radius: 0.25rem !important;
	}

    .cropper-view-box,
    .cropper-face {
        border-radius: 5%;
    }
	#imageToCrop {
        max-width: 100%;
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css" />
@endsection

@section('scripts')
@parent
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
@vite(['resources/js/componentes-form-profile-photo.js'])
@endsection