@props([
    'targetId',
    'title' => 'Detail View',
    // Absoluta: `PrintHelper` escribe este HTML en una ventana nueva, que no puede resolver
    // una ruta relativa. El valor por defecto es la única fuente: las 4 vistas que usan este
    // botón ya no pasan `:logoUrl`.
    'logoUrl' => \App\Support\Media\MainDivisionLogo::absoluteUrl(\App\Support\Media\MainDivisionLogo::SHORT),
    '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 {
                                html, body {
                                    background: #fff !important;
                                    background-color: #fff !important;
                                }
                                body {
                                    font-size: 12pt;
                                }
                                .table th,
                                .table .bg-light,
                                .bg-light {
                                    background-color: #f8f9fa !important;
                                    -webkit-print-color-adjust: exact !important;
                                    print-color-adjust: exact !important;
                                }
                            }
                        `,
                            afterPrint: function() {
                                // Ensure we're back on the detail view
                                window.focus();
                            }
                        });

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