@php
    $user = auth()->user();
@endphp
<div class="toast-container" style="top: 5%;right: 1rem;">
    <div class="toast fade hide" role="alert" data-bs-delay="2000" id="copied">
        <div class="toast-header"><strong class="me-auto">Copied</strong><small>1s ago</small><button
                class="btn-close ms-2 mb-1 close" data-bs-dismiss="toast"></button></div>
        <div class="toast-body" role="alert">
            <p>Referral link copied</p>
        </div>
    </div>
</div>

@if (!$user->active_kyc)
    <div class="toast-container position-fixed end-0 p-3" style="bottom: 15%;">
        <div class="toast fade hide" role="alert" data-bs-autohide="false" data-bs-delay="2000" id="kyc-warning">
            <div class="toast-header">
            <strong class="me-auto">Complete KYC</strong>
            <button class="btn-close ms-2 mb-1 close" data-bs-dismiss="toast"></button></div>
            <div class="toast-body" role="alert">
                <p>You have not completed your KYC 1.</p>
                @if($user->requires_kyc2_upload())
                <p>You have not completed your KYC 2.</p>
                @endif
                <a class="text-decoration-none" href="{{ route('user_kyc') }}">
                Get Started
                <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1">
                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
                </svg>
                </a>
            </div>
        </div>
    </div>
@else
    @if($user->requires_kyc2_upload())
        <div class="toast-container position-fixed bottom-0 end-0 p-3">
            <div class="toast fade hide" role="alert" data-bs-autohide="false" data-bs-delay="2000" id="kyc-warning">
                <div class="toast-header">
                <strong class="me-auto">Complete KYC 2</strong>
                <button class="btn-close ms-2 mb-1 close" data-bs-dismiss="toast"></button></div>
                <div class="toast-body" role="alert">
                    <p>You have not completed your KYC 2.</p>
                    <a class="text-decoration-none" href="{{ route('user_kyc') }}">
                    Get Started
                    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16" class="bi bi-arrow-right ms-1">
                        <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"></path>
                    </svg>
                    </a>
                </div>
            </div>
        </div>
    @endif
@endif

<div class="modal fade" role="dialog" tabindex="-1" id="share-referral">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header border-0">
                <h4 class="modal-title">Referral Link</h4><button type="button" class="btn-close"
                    data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="input-group">
                    <input id="referral_link" class="form-control me-2" type="text" value="{{ referral_link($user) }}" onclick="this.select()" readonly />
                    <a class="alt-btn" onclick="copyText()">Copy</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    function copyText() {
        navigator.clipboard.writeText(document.getElementById('referral_link').value).then(() => {
            const toast = new bootstrap.Toast(copied)
            toast.show()
        });
    }
</script>