<div id="{{(string) $attribute->getKey()}}"
     class="entity-attribute entity-attribute-paybylink {!! $attribute->getStyleClass() !!}   @if($errors->has((string)$attribute->getKey())) error @endif {!!$attribute->getStyleClass()!!}"
     {{--{{ dd($errors->get((string)$attribute->getKey())) }}--}}
     data-uk-tooltip="{pos:'bottom-right'}"
     title="{{ $errors->get((string)$attribute->getKey()) != [] ? $errors->get((string)$attribute->getKey())[0] : ''}}"
>


    <div class="generate-link-container" id="{{$attribute->getKey()}}Generate-link-container">
        <label for="{{$attribute->getKey()}}">{{$attribute->getLabelText()}}</label>
        <div class="button-placeholder">
            <img class="icepay" alt="icepay logo" src="/img/kms/PayByLinkLogo.png" style="max-height: 50px;"/>
            <button class="generate-link" id="{{ (string)$attribute->getKey() }}GenerateButton">Verzend betaalmail</button>
        </div>
        @if($attribute->getExplanation())
            <span class="explanation">
                {!! $attribute->getExplanation() !!}
            </span>
        @endif
    </div>

    <div class="payment-link" id="{{$attribute->getKey()}}LinkContainer">
        <span class="label">{{$attribute->getLabelText()}}</span>
        <span class="link" id="{{$attribute->getKey()}}Link">Er is een e-mail verzonden met de link: {{ ($attribute->getValue() !== '') ? last(explode(',', $attribute->getValue())) : '' }}</span>
    </div>

</div>

<script>
    document.addEventListener("DOMContentLoaded", function (event) {
        let prefixText = "Er is een e-mail verzonden met de link: ";
        let generateLink = document.getElementById("{{ (string)$attribute->getKey() }}Generate-link-container");
        let button = document.getElementById("{{ (string)$attribute->getKey() }}GenerateButton");
        let linkContainer = document.getElementById("{{$attribute->getKey()}}LinkContainer");
        let linkSpan = document.getElementById("{{ (string)$attribute->getKey() }}Link");
        let generateUrl = "{{ $attribute->getGenerateUrl() }}";
        let linkedAttributeKey = "{{ $attribute->getLinkedAttributeKey() }}";
        let readOnly = {{ $attribute->getReadOnly() ? 1 : 0  }};

        if (!generateUrl) {
            console.error('No generate url set. Please set it using the setGenerateUrl method on the pay by link attribute');
            return;
        }

        button.addEventListener('click', function (event) {
            event.preventDefault();

            if (!confirm("{{__("icepay.paybymail.generate_link_confirmation")}}")) return;

            $.ajax({
                type: "GET",
                url: generateUrl,
                success: function (response, textStatus, xhr) {
                    generatingPaymentUrlWasSuccessFull(response);
                },
                error: function (message) {
                    generatingPaymentUrlCausedError(message);
                },
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json'
            });
        });

        function generatingPaymentUrlCausedError(message) {
            console.error('could not generate payment url.');
            console.error(message);

        }

        function generatingPaymentUrlWasSuccessFull(response) {
            // console.log('received payment url object.');
            // console.log(response);
            linkSpan.textContent = prefixText+response.url;
            showLink();
        }

        function showLink(hideButton = true) {
            if (hideButton) generateLink.style.display = "none";
            linkContainer.style.display = "block";
            disableLinkedAttribute();
        }

        function disableLinkedAttribute() {
            if (linkedAttributeKey === undefined || linkedAttributeKey === '') return;
            let linkedAttributeControllerName = linkedAttributeKey + "_controller";
            window[linkedAttributeControllerName].enableListeners(false);
        }

        function showButton(hideLink = true) {
            if (hideLink) linkContainer.style.display = "none";
            generateLink.style.display = "block";
        }

        //Initialize
        if (linkSpan.textContent !== prefixText || readOnly) {
            // console.log('showing link');
            showLink();
        }
    });
</script>