@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 : mix('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">
    <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-bs-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-bs-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>
var urlBase;
$(document).ready(function () {
    "use strict";

    urlBase = $('body').data('base-url');

	var placeholderImagePath = "{{ mix('img/photo_placeholder.png') }}"
    var modal = $('#cropModal');
	var btnLabel = $('#btnPhotoLbl');
	var btnDelete = $('#btnPhotoDelete');
    var image = $('#userPhoto')[0];	
	var imageToCrop = $('#imageToCrop')[0];
    var cropper;

	// fix rounded button se só tiver 1 botão no btn-group
	var hasImage = (image.src.indexOf(placeholderImagePath) === -1);
	if (!hasImage) {
		btnLabel.addClass('rounded-button');
	}
	else {
		btnLabel.removeClass('rounded-button');
		btnLabel.text("Mudar foto");
		btnDelete.removeClass('d-none');
	}

	$('#{{$id}}').on('change', function (e) {
        var files = e.target.files;
        if (files && files.length > 0) {
            var file = files[0];
            var done = function (url) {
                imageToCrop.src = url;
                modal.modal('show');
            };

            if (URL) {
                done(URL.createObjectURL(file));
            } else if (FileReader) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    done(reader.result);
                };
                reader.readAsDataURL(file);
            }
        }
    });

    modal.on('shown.bs.modal', function () {
        cropper = new Cropper(imageToCrop, {
            aspectRatio: 3 / 4,
            viewMode: 1,
            dragMode: 'move',
            autoCropArea: 0.8,
            movable: true,
            zoomable: true,
            cropBoxMovable: true,
            cropBoxResizable: true,
            background: false,
        });
    }).on('hidden.bs.modal', function () {
        if (cropper) {
            cropper.destroy();
            cropper = null;
        }
        $('#{{$id}}').val('');
    });

    $('#cropAndSaveButton').click(function () {
        if (!cropper) {
            return;
        }
        var canvas = cropper.getCroppedCanvas({
            width: 240,
            height: 320,
            imageSmoothingEnabled: true,
            imageSmoothingQuality: 'high'
        });

        canvas.toBlob(function (blob) {
            var reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function () {
                var base64data = reader.result;
                $("#image_base64").val(base64data);
                image.src = base64data;
                modal.modal('hide');
			};
        });

		// ajusta UI para mudar/excluir
		hasImage = true;
		btnLabel.removeClass('rounded-button');
		btnLabel.text("Mudar foto");
		btnDelete.removeClass('d-none');
    });

	// Lógica para o botão de exclusão
	btnDelete.on('click', function() {
		// Define a imagem de volta para o placeholder
		image.src = placeholderImagePath;
		// Limpa o campo hidden de base64
		$("#image_base64").val('__DELETE__');
		// Ajusta a UI
		hasImage = false;
		btnLabel.addClass('rounded-button');
		btnLabel.text("Adicionar foto");
		btnDelete.addClass('d-none');
    });
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>

@endsection