@php
    $postId = data_get($post, 'id');
    $isSaved = !empty(data_get($post, 'savedByLoggedUser'));
    $tooltip = auth()->check() ? ($isSaved ? t('Remove favorite') : t('Save listing')) : t('Save listing');
    $iconClass = auth()->check() ? ($isSaved ? 'fas fa-bookmark' : 'far fa-bookmark') : 'far fa-bookmark';
    // fallback width if not passed
    $btnWidth = $width ?? 'auto';
@endphp

<a class="btn btn-default" id="{{ $postId }}" href="javascript:void(0)" onclick="toggleFavorite(this)"
    style="width: {{ $btnWidth }}; margin-bottom: 0px;">
    <span data-bs-toggle="tooltip" title="{{ $tooltip }}">
        <i class="{{ $iconClass }}"></i>
        <span class="favorite-label">{{ $tooltip }}</span>
    </span>
</a>

<script>
    function toggleFavorite(element) {
        const postId = $(element).attr("id");
        if (!postId) return false;

        const buttons = $(`a[id='${postId}']`);
        const clickedIcon = $(element).find("i");

        const url = "{{ url('/ajax/save/post') }}";
        const token = $("input[name=_token]").val();

        clickedIcon
            .removeClass("fas fa-bookmark far fa-bookmark")
            .addClass("spinner-border spinner-border-sm")
            .css({
                "vertical-align": "middle"
            })
            .attr({
                role: "status",
                "aria-hidden": "true"
            });

        $.ajax({
                method: "POST",
                url: url,
                data: {
                    post_id: postId,
                    _token: token
                },
            })
            .done(function(response) {
                if (!response.isLogged) {
                    openLoginModal();
                    clickedIcon
                        .removeClass("spinner-border spinner-border-sm")
                        .addClass("fas fa-bookmark")
                        .css({
                            "vertical-align": ""
                        })
                        .removeAttr("role aria-hidden");
                    return false;
                }

                const isSaved = response.isSaved;
                const tooltip = isSaved ? "{{ t('Remove favorite') }}" : "{{ t('Save listing') }}";
                const iconClass = isSaved ? "fas fa-bookmark" : "far fa-bookmark";

                buttons.each(function() {
                    $(this).html(`
                <span data-bs-toggle="tooltip" title="${tooltip}">
                    <i class="${iconClass}"></i>
                    <span class="favorite-label">${tooltip}</span>
                </span>
            `);
                });

                jsAlert(response.message, "success");
            })
            .fail(function(xhr) {
                clickedIcon
                    .removeClass("spinner-border spinner-border-sm")
                    .addClass("fas fa-bookmark")
                    .css({
                        "vertical-align": ""
                    })
                    .removeAttr("role aria-hidden");

                if (xhr.status === 401 && !isLogged) {
                    openLoginModal();
                } else {
                    const error = getJqueryAjaxError(xhr);
                    if (error !== null) jsAlert(error, "error", false);
                }
            });

        return false;
    }
</script>