133 lines
7.9 KiB
PHP
133 lines
7.9 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
|
|
{{ __('Daftar pembayaran') }}
|
|
</h2>
|
|
</x-slot>
|
|
|
|
<div class="py-12">
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
|
|
<div class="p-6">
|
|
<h1 class="mb-4 text-xl font-bold text-primary">Daftar Pembayaran</h1>
|
|
|
|
<form action="{{ route('pelanggarans.index') }}" method="GET" class="mb-4">
|
|
<input type="text" name="search" placeholder="Cari nama santri..."
|
|
value="{{ request('search') }}" class="border px-3 py-2 rounded-lg">
|
|
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-lg">Cari</button>
|
|
</form>
|
|
|
|
<!-- <a href="{{ route('pembayarans.create') }}" class="btn-primary">Tambah Pembayaran</a> -->
|
|
@if(session('success'))
|
|
<div class="alert-success mb-4">{{ session('success') }}</div>
|
|
@endif
|
|
<div class="overflow-x-auto">
|
|
<table class="table w-full border rounded-lg overflow-hidden">
|
|
<thead>
|
|
<tr class="table-header">
|
|
<th class="px-3 py-2">No</th>
|
|
<th class="px-3 py-2">Santri</th>
|
|
<th class="px-3 py-2">Kelas</th>
|
|
<th class="px-3 py-2">Tanggal</th>
|
|
<th class="px-3 py-2">Jenis Pembayaran</th>
|
|
<th class="px-3 py-2">Jumlah</th>
|
|
<th class="px-3 py-2">Status</th>
|
|
<th class="px-3 py-2">Bukti</th>
|
|
<th class="px-3 py-2">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($pembayarans as $pembayaran)
|
|
<tr class="table-row">
|
|
<td class="px-3 py-2">
|
|
{{ $loop->iteration + ($pembayarans->currentPage() - 1) * $pembayarans->perPage() }}
|
|
</td>
|
|
<td class="px-3 py-2">{{ $pembayaran->santri->nama ?? '-' }}</td>
|
|
<td class="px-3 py-2">{{ $pembayaran->kelas->nama_kelas ?? '-' }}</td>
|
|
<td class="px-3 py-2">{{ $pembayaran->tanggal }}</td>
|
|
<td class="px-3 py-2">{{ $pembayaran->jenis_pembayaran }}</td>
|
|
<td class="px-3 py-2">{{ number_format($pembayaran->jumlah, 0, ',', '.') }}</td>
|
|
<td class="px-3 py-2">
|
|
@php
|
|
$badge = match ($pembayaran->status) {
|
|
'menunggu' => 'bg-yellow-100 text-yellow-800',
|
|
'diterima' => 'bg-green-100 text-green-800',
|
|
'ditolak' => 'bg-red-100 text-red-800',
|
|
default => 'bg-gray-100 text-gray-800',
|
|
};
|
|
@endphp
|
|
<span
|
|
class="inline-block px-3 py-1 text-xs font-semibold rounded-full {{ $badge }}">
|
|
{{ ucfirst($pembayaran->status) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-3 py-2">
|
|
@if($pembayaran->bukti_pembayaran)
|
|
@php
|
|
$ext = pathinfo($pembayaran->bukti_pembayaran, PATHINFO_EXTENSION);
|
|
$buktiUrl = asset('storage/' . str_replace('\\', '/', $pembayaran->bukti_pembayaran));
|
|
@endphp
|
|
@if(in_array(strtolower($ext), ['jpg', 'jpeg', 'png', 'gif', 'webp']))
|
|
<a href="{{ $buktiUrl }}" target="_blank">
|
|
<img src="{{ $buktiUrl }}" alt="Bukti"
|
|
style="max-width:50px;max-height:50px;" class="rounded shadow">
|
|
</a>
|
|
@else
|
|
<a href="{{ $buktiUrl }}" target="_blank">Lihat File</a>
|
|
@endif
|
|
@else
|
|
-
|
|
@endif
|
|
</td>
|
|
<td class="px-3 py-2 space-x-1">
|
|
<a href="{{ route('pembayarans.show', $pembayaran) }}"
|
|
class="btn-accent btn-sm">Detail</a>
|
|
<a href="{{ route('pembayarans.edit', $pembayaran) }}"
|
|
class="btn-accent btn-sm">Edit</a>
|
|
<form action="{{ route('pembayarans.destroy', $pembayaran) }}" method="POST"
|
|
style="display:inline-block;">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="btn-primary btn-sm"
|
|
onclick="return confirm('Yakin hapus?')">Hapus</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{{ $pembayarans->links() }}
|
|
|
|
|
|
</x-app-layout>
|
|
|
|
<script>
|
|
function showBuktiModal(url, filename) {
|
|
let modal = document.getElementById('bukti-modal');
|
|
let modalContent = document.getElementById('bukti-modal-content');
|
|
let ext = filename.split('.').pop().toLowerCase();
|
|
let html = '';
|
|
if (['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
|
|
html = `<img src="${url}" alt="Bukti" style="max-width:100%;max-height:70vh;display:block;margin:auto;">`;
|
|
} else {
|
|
html = `<a href="${url}" target="_blank">Lihat File</a>`;
|
|
}
|
|
modalContent.innerHTML = html;
|
|
modal.style.display = 'block';
|
|
}
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
let modal = document.getElementById('bukti-modal');
|
|
if (modal) {
|
|
modal.onclick = function (e) {
|
|
if (e.target === modal) modal.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<div id="bukti-modal"
|
|
style="display:none;position:fixed;z-index:9999;left:0;top:0;width:100vw;height:100vh;background:rgba(0,0,0,0.6);">
|
|
<div id="bukti-modal-content"
|
|
style="background:#fff;padding:20px;border-radius:8px;max-width:90vw;max-height:80vh;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);">
|
|
</div>
|
|
</div> |