<h5 class="mb-3">{{ __('store.clientarea_domains_management_epp_code_title') }}</h5>

@if($data)
    <div class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i>
        {{ __('store.clientarea_domains_management_epp_code_description') }}
    </div>

    <div class="card">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <label class="form-label">{{ __('store.clientarea_domains_management_epp_code_code_label') }}</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="epp-code-input" value="{{ $data['epp_code'] ?? 'N/A' }}" readonly>
                        <button class="btn btn-outline-secondary" type="button" id="copy-epp-code" title="{{ __('store.clientarea_domains_management_epp_code_copy') }}">
                            <i class="fas fa-copy"></i>
                        </button>
                    </div>
                    <small class="text-muted">{{ __('store.clientarea_domains_management_epp_code_help_text') }}</small>
                </div>
                <div class="col-md-4 text-end">
                    <i class="fas fa-key fa-3x text-primary opacity-50"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="alert alert-warning mt-3">
        <i class="fas fa-exclamation-triangle me-2"></i>
        {{ __('store.clientarea_domains_management_epp_code_warning') }}
    </div>
@else
    <div class="alert alert-info">
        <i class="fas fa-info-circle me-2"></i>{{ __('store.clientarea_domains_management_epp_code_not_available') }}
    </div>
@endif

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const copyBtn = document.getElementById('copy-epp-code');
    const eppCodeInput = document.getElementById('epp-code-input');

    if (copyBtn && eppCodeInput) {
        copyBtn.addEventListener('click', function() {
            eppCodeInput.select();
            document.execCommand('copy');

            // Visual feedback
            const originalHtml = copyBtn.innerHTML;
            copyBtn.innerHTML = '<i class="fas fa-check"></i>';
            copyBtn.classList.remove('btn-outline-secondary');
            copyBtn.classList.add('btn-success');

            setTimeout(function() {
                copyBtn.innerHTML = originalHtml;
                copyBtn.classList.remove('btn-success');
                copyBtn.classList.add('btn-outline-secondary');
            }, 2000);
        });
    }
});
</script>
@endpush
