@if($roleCanReviewDocument && $printableDocuments->isNotEmpty())
    @php
        $defaultPrintDocumentUrl = (string) data_get($printableDocuments->first(), 'url', '#');
    @endphp
    <style>
        #modalPrintDocument .print-document-dialog {
            width: calc(100% - 32px);
            max-width: 720px;
        }

        #modalPrintDocument .modal-content {
            max-height: min(720px, calc(100dvh - 32px));
            border-radius: 16px;
        }

        #modalPrintDocument .modal-header,
        #modalPrintDocument .modal-footer {
            padding: 14px 18px;
        }

        #modalPrintDocument .modal-body {
            max-height: min(54dvh, 500px);
            padding: 14px 18px;
        }

        .print-document-option {
            cursor: pointer;
            transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
        }

        .print-document-option.is-selected {
            border-color: var(--vz-primary) !important;
            background: rgba(var(--vz-primary-rgb), .07);
            box-shadow: 0 0 0 1px rgba(var(--vz-primary-rgb), .12);
        }

        .print-document-thumbnail {
            position: relative;
            width: 64px;
            height: 80px;
            flex: 0 0 64px;
            overflow: hidden;
            border: 1px solid var(--vz-border-color);
            border-radius: 10px;
            background: var(--vz-light);
        }

        .print-document-thumbnail img,
        .print-document-thumbnail iframe {
            width: 100%;
            height: 100%;
            display: block;
            border: 0;
            object-fit: contain;
            background: #fff;
            pointer-events: none;
        }

        .print-document-thumbnail-placeholder {
            height: 100%;
            display: grid;
            place-items: center;
            color: var(--vz-secondary-color);
            font-size: 1.75rem;
        }

        .print-document-thumbnail-overlay {
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            color: #fff;
            background: rgba(15, 23, 42, .58);
            opacity: 0;
            transition: opacity .18s ease;
        }

        .print-document-thumbnail:hover .print-document-thumbnail-overlay,
        .print-document-thumbnail:focus-visible .print-document-thumbnail-overlay {
            opacity: 1;
        }

        @media (max-width: 767.98px) {
            #modalPrintDocument .print-document-dialog {
                width: calc(100% - 20px);
                margin: 10px auto;
            }

            #modalPrintDocument .modal-header,
            #modalPrintDocument .modal-footer {
                padding: 12px 14px;
            }

            #modalPrintDocument .modal-body {
                max-height: calc(100dvh - 190px);
                padding: 12px 14px;
            }

            .print-document-thumbnail {
                width: 56px;
                height: 70px;
                flex-basis: 56px;
            }
        }
    </style>

    <div class="modal fade" id="modalPrintDocument" tabindex="-1" aria-labelledby="modalPrintDocumentLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable print-document-dialog">
            <div class="modal-content">
                <div class="modal-header bg-light p-3">
                    <div>
                        <h5 class="modal-title" id="modalPrintDocumentLabel">
                            <i class="ri-printer-line me-2 text-primary"></i>{{ __('Choose Document to Print') }}
                        </h5>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ __('Close') }}"></button>
                </div>
                <div class="modal-body">
                    <div class="list-group print-document-options">
                        @foreach($printableDocuments as $printableDocument)
                            @php
                                $printExtension = strtolower((string) ($printableDocument['extension'] ?? ''));
                                $printIsImage = in_array($printExtension, ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp'], true);
                                $printIsPdf = $printExtension === 'pdf';
                            @endphp
                            <div class="list-group-item d-flex align-items-center gap-3 py-2 px-3 print-document-option" data-print-document-option>
                                <a
                                    href="{{ $printableDocument['preview_url'] }}"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    class="print-document-thumbnail text-decoration-none"
                                    title="{{ __('Preview Document') }}"
                                    aria-label="{{ __('Preview Document') }}: {{ $printableDocument['name'] }}"
                                >
                                    @if($printIsImage)
                                        <img src="{{ $printableDocument['preview_url'] }}" alt="{{ $printableDocument['name'] }}" loading="lazy">
                                    @elseif($printIsPdf)
                                        <iframe src="{{ $printableDocument['preview_url'] }}#page=1&toolbar=0&navpanes=0&view=FitH" title="{{ $printableDocument['name'] }}" loading="lazy" tabindex="-1"></iframe>
                                    @else
                                        <span class="print-document-thumbnail-placeholder"><i class="ri-file-text-line"></i></span>
                                    @endif
                                    <span class="print-document-thumbnail-overlay"><i class="ri-eye-line fs-22"></i></span>
                                </a>
                                <input
                                    class="form-check-input mt-1"
                                    type="radio"
                                    name="print_document_url"
                                    id="print-document-{{ $printableDocument['key'] }}"
                                    value="{{ $printableDocument['url'] }}"
                                    data-preview-url="{{ $printableDocument['preview_url'] }}"
                                    data-document-name="{{ $printableDocument['name'] }}"
                                    @checked($loop->first)
                                >
                                <label class="flex-grow-1 overflow-hidden mb-0" for="print-document-{{ $printableDocument['key'] }}">
                                    <span class="d-flex align-items-center justify-content-between gap-2 mb-1">
                                        <span class="fw-semibold text-body text-truncate">{{ $printableDocument['name'] }}</span>
                                        <span class="badge bg-primary-subtle text-primary flex-shrink-0">{{ $printableDocument['type'] }}</span>
                                    </span>
                                    @if($printableDocument['meta'] !== '')
                                        <span class="text-muted small d-block">{{ $printableDocument['meta'] }}</span>
                                    @endif
                                    <span class="text-primary small d-block mt-2"><i class="ri-eye-line me-1"></i>{{ __('Preview Document') }}</span>
                                </label>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('Cancel') }}</button>
                    <a href="{{ $defaultPrintDocumentUrl }}"
                       target="_blank"
                       rel="noopener noreferrer"
                       class="btn btn-primary"
                       id="btnPrintSelectedDocument">
                        <i class="ri-printer-line me-1"></i>{{ __('Print Selected Document') }}
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        (function () {
            function updatePrintDocumentSelection(modal, selectedDocument) {
                if (!modal || !selectedDocument) return;

                modal.querySelectorAll('input[name="print_document_url"]').forEach(function (option) {
                    var optionRow = option.closest('[data-print-document-option]');
                    if (optionRow) {
                        optionRow.classList.toggle('is-selected', option === selectedDocument);
                    }
                });

                var printButton = modal.querySelector('#btnPrintSelectedDocument');
                if (printButton && selectedDocument.value) {
                    printButton.href = selectedDocument.value;
                }
            }

            function initializePrintDocumentPicker() {
                var modal = document.getElementById('modalPrintDocument');
                if (!modal) return;

                updatePrintDocumentSelection(
                    modal,
                    modal.querySelector('input[name="print_document_url"]:checked')
                );
            }

            if (!window.__printDocumentPickerEventsBound) {
                window.__printDocumentPickerEventsBound = true;

                document.addEventListener('change', function (event) {
                    if (!event.target.matches('#modalPrintDocument input[name="print_document_url"]')) return;

                    updatePrintDocumentSelection(
                        event.target.closest('#modalPrintDocument'),
                        event.target
                    );
                });

                document.addEventListener('click', function (event) {
                    var optionRow = event.target.closest('#modalPrintDocument [data-print-document-option]');
                    if (!optionRow) return;

                    var option = optionRow.querySelector('input[name="print_document_url"]');
                    if (!option) return;

                    if (event.target.closest('.print-document-thumbnail')) {
                        option.checked = true;
                        updatePrintDocumentSelection(optionRow.closest('#modalPrintDocument'), option);
                        return;
                    }

                    if (event.target.closest('input, label')) return;

                    option.checked = true;
                    updatePrintDocumentSelection(optionRow.closest('#modalPrintDocument'), option);
                });

                document.addEventListener('turbo:load', initializePrintDocumentPicker);
                document.addEventListener('DOMContentLoaded', initializePrintDocumentPicker);
            }

            initializePrintDocumentPicker();
        })();
    </script>
@endif