306 lines
17 KiB
PHP
306 lines
17 KiB
PHP
@extends('layouts.dashboard')
|
|
|
|
@section('title', 'Riwayat Pengumuman - Smart School')
|
|
|
|
@section('content')
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Header Section -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-800">Riwayat Pengumuman</h1>
|
|
<p class="text-sm text-gray-600 mt-1">Daftar lengkap pengumuman yang telah dikirim</p>
|
|
</div>
|
|
<a href="{{ route('admin.announcement.index') }}"
|
|
class="flex items-center mt-4 md:mt-0 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors shadow-sm">
|
|
<i class="fas fa-plus-circle mr-2"></i> Buat Pengumuman Baru
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Enhanced Filter Card -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6 overflow-hidden">
|
|
<div class="p-4 border-b border-gray-200 bg-gradient-to-r from-blue-50 to-gray-50">
|
|
<h2 class="text-lg font-medium text-gray-700 flex items-center">
|
|
<i class="fas fa-filter mr-2 text-blue-600"></i> Filter Riwayat
|
|
</h2>
|
|
</div>
|
|
<div class="p-4">
|
|
<form id="filterForm" method="GET" action="{{ route('admin.announcement.history') }}" class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<label for="mode" class="block text-sm font-medium text-gray-700 mb-1">Mode Pengumuman</label>
|
|
<div class="relative">
|
|
<select id="mode" name="mode" class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md border bg-white">
|
|
<option value="">Semua Mode</option>
|
|
<option value="tts" {{ request('mode') == 'tts' ? 'selected' : '' }}>Text-to-Speech</option>
|
|
<option value="manual" {{ request('mode') == 'manual' ? 'selected' : '' }}>Manual</option>
|
|
</select>
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
|
<i class="fas fa-caret-down text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="start_date" class="block text-sm font-medium text-gray-700 mb-1">Dari Tanggal</label>
|
|
<div class="relative">
|
|
<input type="date" id="start_date" name="start_date" value="{{ request('start_date') }}"
|
|
class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md border bg-white">
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
|
<i class="fas fa-calendar-alt text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label for="end_date" class="block text-sm font-medium text-gray-700 mb-1">Sampai Tanggal</label>
|
|
<div class="relative">
|
|
<input type="date" id="end_date" name="end_date" value="{{ request('end_date') }}"
|
|
class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md border bg-white">
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
|
|
<i class="fas fa-calendar-alt text-gray-400"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-end space-x-3">
|
|
<button type="submit" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 h-[42px] transition-colors">
|
|
<i class="fas fa-search mr-2"></i> Terapkan Filter
|
|
</button>
|
|
@if(request()->has('mode') || request()->has('start_date') || request()->has('end_date'))
|
|
<a href="{{ route('admin.announcement.history') }}" class="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 h-[42px] transition-colors">
|
|
<i class="fas fa-sync-alt mr-2"></i> Reset
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History Table -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gradient-to-r from-blue-50 to-gray-50">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Waktu Pengiriman
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Mode
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Isi Pengumuman
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Ruangan Tujuan
|
|
</th>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Aksi
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
@forelse($announcements as $announcement)
|
|
<tr class="hover:bg-gray-50 transition-colors" data-id="{{ $announcement->id }}">
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="flex-shrink-0 h-10 w-10 flex items-center justify-center rounded-full bg-blue-50 text-blue-600 mr-3">
|
|
<i class="fas fa-bullhorn"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-sm font-semibold text-gray-900">
|
|
{{ $announcement->formatted_sent_at }}
|
|
</div>
|
|
<div class="text-xs text-gray-500">
|
|
{{ $announcement->sent_at->diffForHumans() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
@if($announcement->mode === 'tts')
|
|
<span class="px-2.5 py-0.5 inline-flex items-center text-xs leading-4 font-medium rounded-full bg-green-100 text-green-800">
|
|
<i class="fas fa-robot mr-1.5"></i> TTS
|
|
</span>
|
|
@else
|
|
<span class="px-2.5 py-0.5 inline-flex items-center text-xs leading-4 font-medium rounded-full bg-blue-100 text-blue-800">
|
|
<i class="fas fa-microphone-alt mr-1.5"></i> Manual
|
|
</span>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="text-sm font-medium text-gray-900">{{ $announcement->short_message }}</div>
|
|
<div class="text-xs text-gray-500 mt-1">{{ Str::limit($announcement->message, 80) }}</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-wrap gap-1">
|
|
@foreach($announcement->ruangans as $ruangan)
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
|
|
<span class="w-2 h-2 rounded-full mr-1.5 {{ $announcement->mode === 'tts' ? 'bg-green-500' : 'bg-blue-500' }}"></span>
|
|
{{ $ruangan->nama_ruangan }}
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<div class="flex items-center justify-end space-x-2">
|
|
<!-- Detail Button -->
|
|
<button onclick="showAnnouncementDetails('{{ $announcement->id }}')"
|
|
class="inline-flex items-center px-3 py-1.5 border border-blue-500 text-sm font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors">
|
|
<i class="fas fa-eye mr-1"></i> Detail
|
|
</button>
|
|
|
|
<!-- Delete Button -->
|
|
<button onclick="confirmDelete('{{ $announcement->id }}')"
|
|
class="inline-flex items-center px-3 py-1.5 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors">
|
|
<i class="fas fa-trash-alt mr-1"></i> Hapus
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="px-6 py-8 text-center">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<i class="fas fa-inbox text-4xl text-gray-300 mb-3"></i>
|
|
<p class="text-gray-500 text-sm">Tidak ada riwayat pengumuman</p>
|
|
@if(request()->has('mode') || request()->has('start_date') || request()->has('end_date'))
|
|
<a href="{{ route('admin.announcement.history') }}" class="text-blue-600 hover:text-blue-800 mt-2 text-sm flex items-center">
|
|
<i class="fas fa-sync-alt mr-1"></i> Reset filter
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
@if($announcements->hasPages())
|
|
<div class="bg-gray-50 px-6 py-4 border-t border-gray-200">
|
|
<div class="flex flex-col md:flex-row items-center justify-between">
|
|
<div class="mb-4 md:mb-0">
|
|
<p class="text-sm text-gray-700">
|
|
Menampilkan <span class="font-medium">{{ $announcements->firstItem() }}</span>
|
|
sampai <span class="font-medium">{{ $announcements->lastItem() }}</span>
|
|
dari <span class="font-medium">{{ $announcements->total() }}</span> hasil
|
|
</p>
|
|
</div>
|
|
<div>
|
|
{{ $announcements->appends(request()->query())->links() }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SweetAlert2 -->
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
|
|
<script>
|
|
// Show announcement details in modal
|
|
function showAnnouncementDetails(id) {
|
|
$.get(`/admin/announcement/${id}/details`, function(data) {
|
|
Swal.fire({
|
|
title: 'Detail Pengumuman',
|
|
html: `
|
|
<div class="text-left space-y-3">
|
|
<div class="flex items-center">
|
|
<span class="font-medium w-24">Mode:</span>
|
|
<span class="px-2.5 py-0.5 inline-flex text-xs leading-4 font-medium rounded-full ${data.mode === 'tts' ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800'}">
|
|
<i class="fas ${data.mode === 'tts' ? 'fa-robot' : 'fa-microphone-alt'} mr-1"></i>
|
|
${data.mode === 'tts' ? 'Text-to-Speech' : 'Manual'}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium w-24">Waktu:</span>
|
|
<span>${data.formatted_sent_at}</span>
|
|
</div>
|
|
<div>
|
|
<span class="font-medium w-24">Ruangan:</span>
|
|
<div class="flex flex-wrap gap-1 mt-1">
|
|
${data.ruangans.map(r => `
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
|
|
<span class="w-2 h-2 rounded-full mr-1.5 ${data.mode === 'tts' ? 'bg-green-500' : 'bg-blue-500'}"></span>
|
|
${r.nama_ruangan}
|
|
</span>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 p-3 bg-gray-50 rounded border border-gray-200">
|
|
<p class="font-medium text-sm">Isi Pengumuman:</p>
|
|
<p class="mt-1 text-sm whitespace-pre-line">${data.message}</p>
|
|
</div>
|
|
</div>
|
|
`,
|
|
confirmButtonText: 'Tutup',
|
|
width: '600px',
|
|
customClass: {
|
|
confirmButton: 'px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md text-sm font-medium'
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// Confirm deletion
|
|
function confirmDelete(id) {
|
|
Swal.fire({
|
|
title: 'Hapus Pengumuman?',
|
|
text: "Data yang dihapus tidak dapat dikembalikan!",
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#d33',
|
|
cancelButtonColor: '#3085d6',
|
|
confirmButtonText: 'Ya, Hapus!',
|
|
cancelButtonText: 'Batal',
|
|
reverseButtons: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$.ajax({
|
|
url: `/admin/announcement/${id}`,
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
|
|
},
|
|
success: function() {
|
|
Swal.fire({
|
|
title: 'Terhapus!',
|
|
text: 'Pengumuman telah dihapus.',
|
|
icon: 'success',
|
|
timer: 1500,
|
|
timerProgressBar: true,
|
|
showConfirmButton: false,
|
|
willClose: () => {
|
|
location.reload();
|
|
}
|
|
});
|
|
},
|
|
error: function() {
|
|
Swal.fire({
|
|
title: 'Gagal!',
|
|
text: 'Terjadi kesalahan saat menghapus pengumuman.',
|
|
icon: 'error',
|
|
confirmButtonText: 'Tutup'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
// Date range validation
|
|
document.getElementById('filterForm').addEventListener('submit', function(e) {
|
|
const startDate = new Date(document.getElementById('start_date').value);
|
|
const endDate = new Date(document.getElementById('end_date').value);
|
|
|
|
if (document.getElementById('start_date').value && document.getElementById('end_date').value && startDate > endDate) {
|
|
e.preventDefault();
|
|
Swal.fire({
|
|
title: 'Tanggal Tidak Valid',
|
|
text: 'Tanggal akhir tidak boleh sebelum tanggal awal',
|
|
icon: 'error',
|
|
confirmButtonText: 'Tutup'
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endsection |