144 lines
8.3 KiB
PHP
144 lines
8.3 KiB
PHP
<div>
|
|
<!-- Report Button -->
|
|
<button
|
|
wire:click="openModal"
|
|
type="button"
|
|
class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 text-sm flex items-center"
|
|
title="Report this message"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
|
|
<line x1="12" y1="9" x2="12" y2="13"/>
|
|
<line x1="12" y1="17" x2="12.01" y2="17"/>
|
|
</svg>
|
|
Report
|
|
</button>
|
|
|
|
<!-- Report Modal -->
|
|
@if($showModal)
|
|
<div class="fixed inset-0 z-50 overflow-y-auto flex items-center justify-center p-4" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
|
<!-- Background overlay -->
|
|
<div
|
|
class="fixed inset-0 bg-black/60 backdrop-blur-sm transition-opacity"
|
|
wire:click="closeModal"
|
|
></div>
|
|
|
|
<!-- Modal panel -->
|
|
<div class="relative bg-gray-800/90 backdrop-blur-sm border border-gray-700/50 rounded-2xl p-8 shadow-2xl w-full max-w-lg z-10">
|
|
<!-- Header -->
|
|
<div class="flex items-center mb-6">
|
|
<div class="p-3 bg-red-600/20 rounded-xl mr-4">
|
|
<svg class="w-6 h-6 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-2xl font-bold text-white">Report Message</h3>
|
|
<p class="text-gray-400 text-sm">Help us maintain a safe community</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form wire:submit.prevent="submitReport">
|
|
<!-- Reason Selection -->
|
|
<div class="mb-6">
|
|
<label for="reason" class="block text-sm font-semibold text-gray-200 mb-3">
|
|
Reason for Report <span class="text-red-400">*</span>
|
|
</label>
|
|
<select
|
|
wire:model="reason"
|
|
id="reason"
|
|
class="w-full px-4 py-3 bg-gray-900/50 border border-gray-600/50 rounded-xl text-white focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500/50 transition-all"
|
|
>
|
|
<option value="spam">Spam</option>
|
|
<option value="harassment">Harassment</option>
|
|
<option value="inappropriate">Inappropriate Content</option>
|
|
<option value="scam">Scam/Phishing</option>
|
|
<option value="other">Other</option>
|
|
</select>
|
|
@error('reason')
|
|
<p class="text-red-400 text-sm mt-2">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="mb-6">
|
|
<label for="description" class="block text-sm font-semibold text-gray-200 mb-3">
|
|
Additional Details (Optional)
|
|
</label>
|
|
<textarea
|
|
wire:model.live="description"
|
|
id="description"
|
|
rows="4"
|
|
maxlength="500"
|
|
placeholder="Provide any additional context that might help our moderation team..."
|
|
class="w-full px-4 py-3 bg-gray-900/50 border border-gray-600/50 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500/50 focus:border-red-500/50 transition-all resize-none"
|
|
></textarea>
|
|
|
|
<div class="flex justify-between items-center mt-2">
|
|
@error('description')
|
|
<p class="text-red-400 text-sm">{{ $message }}</p>
|
|
@else
|
|
<p class="text-gray-500 text-sm">Help us understand the issue</p>
|
|
@enderror
|
|
<p class="text-gray-500 text-xs">{{ strlen($description ?? '') }}/500</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Warning Notice -->
|
|
<div class="mb-6 p-4 bg-yellow-600/10 border border-yellow-500/30 rounded-xl">
|
|
<div class="flex items-start">
|
|
<svg class="w-5 h-5 text-yellow-400 mr-3 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
|
|
</svg>
|
|
<div class="text-sm">
|
|
<p class="text-yellow-300 font-medium mb-1">Important</p>
|
|
<p class="text-yellow-200/80">False reports may result in action against your account. Please only report legitimate violations of our community guidelines.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info Notice -->
|
|
<div class="mb-6 p-4 bg-gray-900/30 border border-gray-700/50 rounded-xl">
|
|
<div class="flex items-start">
|
|
<svg class="w-5 h-5 text-blue-400 mr-3 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<p class="text-gray-300 text-sm">Our moderation team will review your report. You'll receive a notification once action has been taken.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buttons -->
|
|
<div class="flex justify-end space-x-3">
|
|
<button
|
|
wire:click="closeModal"
|
|
type="button"
|
|
class="px-6 py-2.5 bg-gray-700 hover:bg-gray-600 text-gray-200 font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-gray-500/50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="px-6 py-2.5 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white font-semibold rounded-xl transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-red-500/50 transform hover:scale-105"
|
|
wire:loading.attr="disabled"
|
|
>
|
|
<span wire:loading.remove class="flex items-center">
|
|
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
|
|
</svg>
|
|
Submit Report
|
|
</span>
|
|
<span wire:loading class="flex items-center">
|
|
<svg class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
Submitting...
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|