@push('css')
<style>
/* Gallery Item Styles */
/* Gallery Card Styles */
.gallery-item {
    cursor: pointer;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    border-color: var(--bs-primary) !important;
}

.gallery-item:hover .position-absolute.bg-dark {
    opacity: 1 !important;
}

/* Image overlay styles */
.object-fit-cover {
    object-fit: cover;
}

/* Button styles */
.btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .gallery-item {
        max-width: 150px;
    }
}

/* For Bootstrap 5.3+ utility classes */
.object-fit-cover {
    object-fit: cover;
}

/* File List Styles */
.list-group-item {
    transition: all 0.2s ease;
    
    &:hover {
        background-color: var(--bs-light);
        transform: translateX(5px);
    }
}

.file-icon-wrapper {
    .file-icon {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/*  */

</style>
@endpush
@if(isset($assets) && count($assets))
    <div class="card">
        <div class="card-header">
            <h5 class="card-title mb-0">
                <i class="fas fa-cloud-download-alt me-2"></i>{{ __('labels.uploaded_files') }}
            </h5>
        </div>
        <div class="card-body">
            <div class="existing-files-container">
                {{-- <h6 class="mb-3">{{ __('labels.uploaded_files') }}:</h6> --}}

                {{-- Image Gallery Container --}}
                @php
                    $imageAssets = $assets->filter(fn($asset) => str_contains($asset->mime_type, 'image'));
                    $otherAssets = $assets->filter(fn($asset) => !str_contains($asset->mime_type, 'image'));
                @endphp

                {{-- @if($imageAssets->count() > 0)
                    <div class="mb-4">
                        <h6 class="mb-3 text-muted">
                            <i class="fas fa-images me-2"></i>{{ __('labels.images') }} ({{ $imageAssets->count() }})
                        </h6>
                        <div class="lightgallery-container d-flex flex-wrap gap-3 mb-4">
                            @foreach($imageAssets as $asset)
                                <div class="gallery-item" data-src="{{ $asset->file_path_url }}" data-asset-id="{{ $asset->id }}">
                                    <div class="file-preview-wrapper position-relative">
                                        <img src="{{ $asset->file_path_url }}" alt="{{ $asset->title ?? $asset->original_name }}"
                                            class="file-preview rounded shadow-sm"
                                            style="width: 120px; height: 120px; object-fit: cover;">
                                        <div
                                            class="file-overlay position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-50 rounded opacity-0 transition-opacity">
                                            <i class="fas fa-search-plus text-white fa-lg"></i>
                                        </div>
                                    </div>
                                    <div class="file-info mt-2 text-center">
                                        <small class="d-block text-truncate" style="max-width: 120px;">
                                            {{ $asset->title ?? pathinfo($asset->original_name, PATHINFO_FILENAME) }}
                                        </small>
                                        <small class="text-muted">{{ $asset->getFormattedFileSize() }}</small>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif --}}

                @if($imageAssets->count() > 0)
                <div class="mb-4">
                    <h6 class="mb-3 text-muted">
                        <i class="fas fa-images me-2"></i>{{ __('labels.images') }} ({{ $imageAssets->count() }})
                    </h6>
                    <div class="lightgallery-container row row-cols-2 row-cols-sm-3 row-cols-md-4 row-cols-lg-5 g-3">
                        @foreach($imageAssets as $asset)
                        <div class="col">
                            <div class="card gallery-item h-100 shadow-sm border-0" 
                                data-src="{{ $asset->file_path_url }}" 
                                data-asset-id="{{ $asset->id }}"
                                style="transition: all 0.3s ease;">
                                
                                {{-- Image Container with Overlay --}}
                                <div class="position-relative overflow-hidden" style="height: 160px;">
                                    <img src="{{ $asset->file_path_url }}" 
                                        alt="{{ $asset->title ?? $asset->original_name }}"
                                        class="card-img-top h-100 w-100 object-fit-cover">
                                    
                                    {{-- Overlay that shows on hover --}}
                                    <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-75" 
                                        style="opacity: 0; transition: opacity 0.3s ease; cursor: pointer;">
                                        <div class="text-center p-3">
                                            <i class="fas fa-search-plus text-white fa-2x mb-2"></i>
                                            <p class="text-white small mb-0">{{ __('labels.click_to_view_larger') }}</p>
                                        </div>
                                    </div>
                                </div>
                                
                                {{-- Card Body --}}
                                <div class="card-body p-3">
                                    {{-- File Info --}}
                                    <div class="mb-3">
                                        <h6 class="card-title text-truncate mb-1" title="{{ $asset->title ?? $asset->original_name }}">
                                            {{ $asset->title ?? pathinfo($asset->original_name, PATHINFO_FILENAME) }}
                                        </h6>
                                        <div class="d-flex justify-content-between align-items-center small text-muted">
                                            <span>{{ $asset->getFormattedFileSize() }}</span>
                                            <span class="badge bg-light text-dark">{{ $asset->extension }}</span>
                                        </div>
                                    </div>
                                    
                                    {{-- Action Buttons --}}
                                    <div class="d-grid gap-2">
                                        {{-- Download Button --}}
                                        <a href="{{ route('file.download', $asset->id) }}"
                                        class="btn btn-sm btn-outline-primary d-flex align-items-center justify-content-center gap-2"
                                        onclick="event.stopPropagation()">
                                            <i class="fas fa-download"></i>
                                            <span>{{ __('labels.download') }}</span>
                                        </a>
                                        
                                        @if(!isset($readonly) || (isset($readonly) && !$readonly))
                                            <button type="button"
                                                    onclick="removeUploadedFileImage(this); event.stopPropagation();"
                                                    class="btn btn-sm btn-outline-danger remove-asset-btn flex-fill"
                                                    data-asset-id="{{ $asset->id }}"
                                                    title="{{ __('labels.remove') }}">
                                                <i class="fas fa-trash me-1"></i>
                                                {{ __('labels.remove') }}
                                            </button>
                                            {{-- <div class="btn-group" role="group">
                                            <!-- Remove Button -->
                                            <button type="button"
                                                    onclick="removeUploadedFileImage(this); event.stopPropagation();"
                                                    class="btn btn-sm btn-outline-danger remove-asset-btn flex-fill"
                                                    data-asset-id="{{ $asset->id }}"
                                                    title="{{ __('labels.remove') }}">
                                                <i class="fas fa-trash me-1"></i>
                                                {{ __('labels.remove') }}
                                            </button>
                                            
                                            <!-- Restore Button (hidden initially) -->
                                            <button type="button"
                                                    onclick="restoreUploadedFileImage(this); event.stopPropagation();"
                                                    class="btn btn-sm btn-outline-success restore-asset-btn flex-fill"
                                                    data-asset-id="{{ $asset->id }}"
                                                    style="display: none;"
                                                    title="{{ __('labels.restore') }}">
                                                <i class="fas fa-undo me-1"></i>
                                                {{ __('labels.restore') }}
                                            </button>
                                        </div> --}}
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endif


                {{-- Other Files Section --}}
                @if($otherAssets->count() > 0)
                    <div class="other-files-section">
                        <h6 class="mb-3 text-muted">
                            <i class="fas fa-file-alt me-2"></i>{{ __('labels.documents_and_files') }}
                            ({{ $otherAssets->count() }})
                        </h6>
                        <div class="list-group">
                            @foreach($otherAssets as $asset)
                                <div class="list-group-item list-group-item-action d-flex align-items-center gap-3 py-3"
                                    id="asset-{{ $asset->id }}">
                                    {{-- File Icon --}}
                                    <div class="file-icon-wrapper flex-shrink-0">
                                        @if(str_contains($asset->mime_type, 'pdf'))
                                            <div class="file-icon bg-danger-subtle text-danger p-3 rounded">
                                                <i class="fas fa-file-pdf fa-lg"></i>
                                            </div>
                                        @elseif(str_contains($asset->mime_type, 'word') || str_contains($asset->mime_type, 'document'))
                                            <div class="file-icon bg-primary-subtle text-primary p-3 rounded">
                                                <i class="fas fa-file-word fa-lg"></i>
                                            </div>
                                        @elseif(str_contains($asset->mime_type, 'excel') || str_contains($asset->mime_type, 'spreadsheet'))
                                            <div class="file-icon bg-success-subtle text-success p-3 rounded">
                                                <i class="fas fa-file-excel fa-lg"></i>
                                            </div>
                                        @elseif(str_contains($asset->mime_type, 'powerpoint') || str_contains($asset->mime_type, 'presentation'))
                                            <div class="file-icon bg-warning-subtle text-warning p-3 rounded">
                                                <i class="fas fa-file-powerpoint fa-lg"></i>
                                            </div>
                                        @elseif(str_contains($asset->mime_type, 'video'))
                                            <div class="file-icon bg-info-subtle text-info p-3 rounded">
                                                <i class="fas fa-file-video fa-lg"></i>
                                            </div>
                                        @else
                                            <div class="file-icon bg-secondary-subtle text-secondary p-3 rounded">
                                                <i class="fas fa-file fa-lg"></i>
                                            </div>
                                        @endif
                                    </div>

                                    {{-- File Details --}}
                                    <div class="file-details flex-grow-1">
                                        <h6 class="mb-1 fw-semibold">{{ $asset->title ?? $asset->original_name }}</h6>
                                        <div class="text-muted small">
                                            <span class="me-3">
                                                <i class="fas fa-file me-1"></i>
                                                {{ $asset->extension }} • {{ $asset->mime_type }}
                                            </span>
                                            <span>
                                                <i class="fas fa-weight me-1"></i>
                                                {{ $asset->getFormattedFileSize() }}
                                            </span>
                                        </div>
                                        @if($asset->description)
                                            <p class="mb-0 mt-2 small">{{ $asset->description }}</p>
                                        @endif
                                    </div>

                                    {{-- File Actions --}}
                                    <div class="file-actions flex-shrink-0 d-flex align-items-center gap-2">
                                        <a href="{{ route('file.download', $asset->id) }}" class="btn btn-sm btn-outline-primary"
                                            title="{{ __('labels.download') }}">
                                            <i class="fas fa-download"></i>
                                        </a>

                                        @if(!isset($readonly) || (isset($readonly) && !$readonly))
                                            {{-- Remove Button (visible by default) --}}
                                            <button type="button" onclick="removeUploadedFile(this)"
                                                class="btn btn-sm btn-outline-danger remove-asset-btn" data-asset-id="{{ $asset->id }}"
                                                title="{{ __('labels.remove') }}">
                                                <i class="fas fa-trash"></i>
                                            </button>

                                            {{-- Restore Button (hidden by default) --}}
                                            <button type="button" onclick="restoreUploadedFile(this)"
                                                class="btn btn-sm btn-outline-success restore-asset-btn"
                                                data-asset-id="{{ $asset->id }}" style="display: none;"
                                                title="{{ __('labels.restore') }}">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>

            <input type="hidden" name="existing_assets" value="{{ $assets->pluck('id')->implode(',') }}"
                id="existingAssets">
        </div>
    </div>
@endif