Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Danh sách sự kiện</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| .tiptap-content { | |
| line-height: 1.6; | |
| color: #374151; | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .tiptap-content p { | |
| margin-bottom: 1rem; | |
| } | |
| .tiptap-content ul, | |
| .tiptap-content ol { | |
| padding-left: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .tiptap-content ul { | |
| list-style-type: disc; | |
| } | |
| .tiptap-content ol { | |
| list-style-type: decimal; | |
| } | |
| .tiptap-content h1 { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| margin: 1.5rem 0 1rem; | |
| } | |
| .tiptap-content h2 { | |
| font-size: 1.25rem; | |
| font-weight: bold; | |
| margin: 1.25rem 0 0.75rem; | |
| } | |
| .tiptap-content h3 { | |
| font-size: 1.125rem; | |
| font-weight: bold; | |
| margin: 1rem 0 0.5rem; | |
| } | |
| .tiptap-content a { | |
| color: #3b82f6; | |
| text-decoration: underline; | |
| } | |
| .tiptap-content blockquote { | |
| padding-left: 1rem; | |
| border-left: 3px solid #e5e7eb; | |
| color: #6b7280; | |
| margin: 1rem 0; | |
| } | |
| .tiptap-content pre { | |
| background: #f3f4f6; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| overflow-x: auto; | |
| margin: 1rem 0; | |
| } | |
| .tiptap-content code { | |
| background: #f3f4f6; | |
| padding: 0.2rem 0.4rem; | |
| border-radius: 0.25rem; | |
| font-family: monospace; | |
| } | |
| /* Vietnam time badge */ | |
| .time-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| background-color: #f0f9ff; | |
| color: #0369a1; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .time-badge i { | |
| font-size: 0.65rem; | |
| } | |
| /* Creator badge */ | |
| .creator-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| background-color: #f5f3ff; | |
| color: #7c3aed; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .admin-badge { | |
| background-color: #fef2f2; | |
| color: #dc2626; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="max-w-4xl mx-auto p-4 sm:p-6"> | |
| <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 gap-4"> | |
| <div> | |
| <h1 class="text-2xl sm:text-3xl font-bold text-gray-800">Danh sách sự kiện</h1> | |
| <div class="time-badge mt-1"> | |
| <i class="fas fa-clock"></i> | |
| <span>Giờ Việt Nam (UTC+7)</span> | |
| </div> | |
| </div> | |
| <a href="/su-kien/create" class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition shadow hover:shadow-md w-full sm:w-auto justify-center"> | |
| <i class="fas fa-plus"></i> | |
| <span>Tạo sự kiện mới</span> | |
| </a> | |
| </div> | |
| @if($posts->isEmpty()) | |
| <div class="text-center py-12 bg-white rounded-xl shadow-sm"> | |
| <div class="mx-auto w-24 h-24 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-calendar-alt text-blue-500 text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-medium text-gray-700 mb-2">Chưa có sự kiện nào</h3> | |
| <p class="text-gray-500 mb-6">Hãy tạo sự kiện đầu tiên của bạn</p> | |
| <a href="/su-kien/create" class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition"> | |
| <i class="fas fa-plus"></i> | |
| <span>Tạo sự kiện mới</span> | |
| </a> | |
| </div> | |
| @else | |
| <div class="space-y-4"> | |
| @foreach($posts as $post) | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> | |
| <!-- Post Header --> | |
| <div class="border-b border-gray-100 p-4 flex justify-between items-start"> | |
| <div class="space-y-2"> | |
| <div class="flex flex-wrap items-center gap-2"> | |
| <div class="creator-badge {{ $post->user->is_admin ? 'admin-badge' : '' }}"> | |
| <i class="fas {{ $post->user->is_admin ? 'fa-shield-alt' : 'fa-user' }}"></i> | |
| <span>{{ $post->user->name }}</span> | |
| @if($post->user->is_admin) | |
| <span class="ml-1">(Admin)</span> | |
| @endif | |
| </div> | |
| <div class="flex items-center gap-2 text-sm text-gray-600"> | |
| <i class="fas fa-map-marker-alt text-blue-500"></i> | |
| <span> | |
| {{ $post->area->name ?? '---' }} / | |
| {{ $post->propertyStreet->full_name ?? '---' }} / | |
| Căn hộ {{ $post->propertyUnit->number ?? '---' }} | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-2 text-sm text-gray-600"> | |
| <i class="far fa-clock text-blue-500"></i> | |
| <span> | |
| {{ $post->created_at->setTimezone('Asia/Ho_Chi_Minh')->format('H:i d/m/Y') }} | |
| <span class="time-badge ml-2">ICT</span> | |
| </span> | |
| </div> | |
| </div> | |
| <!-- Dropdown Menu --> | |
| <div class="relative"> | |
| <button class="text-gray-400 hover:text-gray-600 transition-colors" onclick="toggleDropdown('dropdown-{{ $post->id }}')"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div id="dropdown-{{ $post->id }}" class="hidden absolute right-0 mt-2 w-40 bg-white rounded-md shadow-lg z-10 border border-gray-100"> | |
| <a href="/su-kien/{{ $post->id }}/edit" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"> | |
| <i class="fas fa-edit text-blue-500"></i> | |
| <span>Sửa</span> | |
| </a> | |
| <form method="POST" action="/su-kien/{{ $post->id }}"> | |
| @csrf | |
| @method('DELETE') | |
| <button type="submit" onclick="return confirm('Bạn có chắc muốn xoá?')" class="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-50 flex items-center gap-2"> | |
| <i class="fas fa-trash-alt text-red-500"></i> | |
| <span>Xoá</span> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Post Content --> | |
| <div class="p-4"> | |
| <div class="tiptap-content"> | |
| {!! $post->content !!} | |
| </div> | |
| @if($post->images) | |
| <div class="flex flex-wrap gap-3 mt-4"> | |
| @foreach($post->images as $img) | |
| <div class="relative group"> | |
| <img src="{{ asset('storage/' . $img) }}" | |
| class="w-24 h-24 object-cover rounded-lg border cursor-pointer hover:ring-2 hover:ring-blue-400 transition-all" | |
| onclick="openImageModal('{{ asset('storage/' . $img) }}')"> | |
| <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg transition-all duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100"> | |
| <i class="fas fa-search-plus text-white text-xl"></i> | |
| </div> | |
| </div> | |
| @endforeach | |
| </div> | |
| @endif | |
| </div> | |
| </div> | |
| @endforeach | |
| </div> | |
| @endif | |
| </div> | |
| <!-- Image Modal --> | |
| <div id="imageModal" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden"> | |
| <div class="relative max-w-4xl max-h-screen"> | |
| <button onclick="closeImageModal()" class="absolute -top-10 right-0 text-white hover:text-gray-300"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| <img id="modalImage" src="" class="max-w-full max-h-screen"> | |
| </div> | |
| </div> | |
| <script> | |