@props([
    'targetId',
    'title' => 'Detail View',
    'logoUrl' => '/images/main/logo-short.png',
    'logoHeight' => '50px'
])

<button
    {{ $attributes->merge(['class' => 'btn btn-primary print-btn']) }}
    type="button"
    data-target="{{ $targetId }}"
    data-title="{{ $title }}"
    data-logo-url="{{ $logoUrl }}"
    data-logo-height="{{ $logoHeight }}"
>
    <i class="fas fa-print me-2"></i>{{ __('Print') }}
</button>

@once
    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                document.querySelectorAll('.print-btn').forEach(button => {
                    button.addEventListener('click', function() {
                        const printer = new PrintHelper({
                            title: this.dataset.title,
                            logoUrl: this.dataset.logoUrl,
                            logoHeight: this.dataset.logoHeight,
                            customStyles: `
                            @media print {
                                body {
                                    font-size: 12pt;
                                }
                                .table th {
                                    background-color: #f8f9fa !important;
                                }
                            }
                        `,
                            afterPrint: function() {
                                // Ensure we're back on the detail view
                                window.focus();
                            }
                        });

                        printer.print(this.dataset.target);
                    });
                });
            });
        </script>
    @endpush
@endonce