@props(['record'])

<div class="flex items-center" x-data="{ 
    showDocuments: false,
    documentCount: {{ $record->documents()->count() + ($record->media ? $record->media()->count() : 0) }},
    singleDocument: {{ $record->documents()->first() ? $record->documents()->first()->id : 'null' }}
}">
    <button 
        @click="showDocuments = true"
        title="{{ ($record->documents()->count() + ($record->media ? $record->media()->count() : 0)) > 1 ? 'View attachments' : 'View attachment' }}" 
        class="btn sm whitespace-nowrap !leading-3 !px-2 text-gray-900 dark:text-white"
    >
        <i class="fas fa-paperclip"></i>
        <span class="sr-only">{{ ($record->documents()->count() + ($record->media ? $record->media()->count() : 0)) > 1 ? 'View attachments' : 'View attachment' }}</span>
    </button>                        
    <div
        x-show="showDocuments"
        x-cloak
        class="fixed inset-0 z-50 overflow-y-auto"
        aria-labelledby="modal-title"
        role="dialog"
        aria-modal="true"
    >
        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
            <!-- Background overlay -->
            <div
                x-show="showDocuments"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"
                class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
                @click="showDocuments = false"
                aria-hidden="true"
            ></div>

            <!-- Modal panel -->
            <div
                x-show="showDocuments"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full sm:p-6 dark:bg-gray-800"
            >
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white">
                        Attachments ({{ $record->documents()->count() + ($record->media ? $record->media()->count() : 0) }})
                    </h3>
                    <button
                        @click="showDocuments = false"
                        class="text-gray-400 hover:text-gray-500"
                    >
                        <span class="sr-only">Close</span>
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="mt-2">
                    <ul class="divide-y divide-gray-200 dark:divide-gray-700">
                        @foreach($record->documents as $document)
                            <li class="py-3">
                                <a 
                                    href="{{ route('document.show', ['document' => $document->id]) }}"
                                    target="_blank"
                                    class="flex items-center space-x-3 text-gray-900 dark:text-white hover:text-gray-600 dark:hover:text-gray-300"
                                >
                                    @if($document->document_type == 'document')
                                        <svg class="h-6 text-blue-400" viewBox="0 0 500 600" stroke-width="1.5" fill="currentColor">
                                            <path d="M64 464c-8.8 0-16-7.2-16-16L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm56 256c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0zm0 96c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-144 0z" />
                                        </svg>
                                    @elseif($document->document_type == 'sheet')
                                        <svg class="h-6 text-green-400" viewBox="0 0 500 600" stroke-width="1.5" fill="currentColor">
                                            <path d="M48 448L48 64c0-8.8 7.2-16 16-16l160 0 0 80c0 17.7 14.3 32 32 32l80 0 0 288c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16zM64 0C28.7 0 0 28.7 0 64L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-293.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0L64 0zm90.9 233.3c-8.1-10.5-23.2-12.3-33.7-4.2s-12.3 23.2-4.2 33.7L161.6 320l-44.5 57.3c-8.1 10.5-6.3 25.5 4.2 33.7s25.5 6.3 33.7-4.2L192 359.1l37.1 47.6c8.1 10.5 23.2 12.3 33.7 4.2s12.3-23.2 4.2-33.7L222.4 320l44.5-57.3c8.1-10.5 6.3-25.5-4.2-33.7s-25.5-6.3-33.7 4.2L192 280.9l-37.1-47.6z"/>
                                        </svg>
                                    @else
                                        <i class="fas fa-file"></i>
                                    @endif
                                    <span>{{ $document->name ?? 'Document ' . $document->id }}</span>
                                </a>
                            </li>
                        @endforeach

                        @if(method_exists($record, 'media') && $record->media)
                            @foreach($record->media as $media)
                                <li class="py-3">
                                    <a 
                                        href="{{ route('file.download', ['media' => $media->id]) }}"
                                        download="{{ $media->file_name }}"
                                        target="_blank"
                                        class="flex items-center space-x-3 text-gray-900 dark:text-white hover:text-gray-600 dark:hover:text-gray-300"
                                    >
                                        <i class="fas fa-download"></i>
                                        <span>{{ $media->file_name }}</span>
                                    </a>
                                </li>
                            @endforeach
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>