192 lines
10 KiB
PHP
192 lines
10 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Laporan Kehadiran')
|
|
|
|
@section('content')
|
|
<x-page-header title="Laporan Kehadiran" />
|
|
<x-card>
|
|
<!-- Filter Form (Sembunyikan saat cetak) -->
|
|
<form method="GET" action="{{ route('admin.laporan.kehadiran') }}" class="mb-6 bg-gray-50 p-5 rounded-2xl border border-gray-200/60 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 items-end print:hidden">
|
|
<div>
|
|
<label class="block text-xs font-bold text-gray-700 mb-1.5 uppercase tracking-wide">Bulan</label>
|
|
<select name="bulan" class="w-full bg-white border border-gray-200 text-gray-800 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block p-3 shadow-sm outline-none">
|
|
<option value="">-- Semua Bulan --</option>
|
|
@foreach([
|
|
'1' => 'Januari', '2' => 'Februari', '3' => 'Maret', '4' => 'April',
|
|
'5' => 'Mei', '6' => 'Juni', '7' => 'Juli', '8' => 'Agustus',
|
|
'9' => 'September', '10' => 'Oktober', '11' => 'November', '12' => 'Desember'
|
|
] as $num => $name)
|
|
<option value="{{ $num }}" {{ request('bulan') == $num ? 'selected' : '' }}>{{ $name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-gray-700 mb-1.5 uppercase tracking-wide">Tahun</label>
|
|
<select name="tahun" class="w-full bg-white border border-gray-200 text-gray-800 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block p-3 shadow-sm outline-none">
|
|
<option value="">-- Semua Tahun --</option>
|
|
@for($y = date('Y') + 1; $y >= date('Y') - 4; $y--)
|
|
<option value="{{ $y }}" {{ request('tahun', date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
|
|
@endfor
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-gray-700 mb-1.5 uppercase tracking-wide">Dari Baris</label>
|
|
<input type="number" name="limit_start" value="{{ request('limit_start') }}" min="1" placeholder="Contoh: 1" class="w-full bg-white border border-gray-200 text-gray-800 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block p-3 shadow-sm outline-none">
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-gray-700 mb-1.5 uppercase tracking-wide">Sampai Baris</label>
|
|
<input type="number" name="limit_end" value="{{ request('limit_end') }}" min="1" placeholder="Contoh: 20" class="w-full bg-white border border-gray-200 text-gray-800 text-sm rounded-xl focus:ring-blue-500 focus:border-blue-500 block p-3 shadow-sm outline-none">
|
|
</div>
|
|
|
|
<div class="flex gap-2">
|
|
<button type="submit" class="flex-grow bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-xl shadow-md transition duration-300 text-sm flex items-center justify-center gap-2">
|
|
<i class="fas fa-filter"></i> Filter
|
|
</button>
|
|
@if(request()->anyFilled(['bulan', 'tahun', 'limit_start', 'limit_end']))
|
|
<a href="{{ route('admin.laporan.kehadiran') }}" class="bg-gray-100 hover:bg-red-50 border border-gray-200 text-gray-500 hover:text-red-500 p-3 rounded-xl shadow-sm transition duration-300 flex items-center justify-center" title="Reset Filter">
|
|
<i class="fas fa-times"></i>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mb-4 flex flex-col md:flex-row justify-between items-center gap-4 print:hidden">
|
|
<p class="text-gray-500 text-sm">Berikut adalah daftar rekapitulasi kehadiran pengunjung yang disaring.</p>
|
|
<button onclick="window.print()" class="bg-gray-800 hover:bg-gray-900 text-white px-4 py-2 rounded-lg text-sm font-bold shadow-sm transition-all flex items-center gap-2">
|
|
<i class="fas fa-print"></i> Cetak PDF / Print
|
|
</button>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto print:overflow-visible">
|
|
<!-- Print Header (Hanya terlihat saat cetak/print) -->
|
|
<div class="hidden print:block mb-6 border-b-2 border-gray-800 pb-4 text-center">
|
|
<h1 class="text-2xl font-black uppercase tracking-wide text-gray-900">Laporan Rekapitulasi Kehadiran</h1>
|
|
<h2 class="text-sm font-bold text-gray-700 mt-1">PERPUSTAKAAN DAERAH JEMBER</h2>
|
|
<p class="text-xs text-gray-500 mt-0.5">Jl. Mastrip No. 1, Kabupaten Jember</p>
|
|
<div class="text-[11px] text-gray-600 mt-3 flex flex-wrap justify-center gap-x-4 gap-y-1 font-medium border-t border-gray-100 pt-3">
|
|
@if(request('bulan') || request('tahun'))
|
|
<span>Periode:
|
|
{{ request('bulan') ? Carbon\Carbon::create()->month((int) request('bulan'))->translatedFormat('F') : 'Semua Bulan' }}
|
|
{{ request('tahun') ?? '' }}
|
|
</span>
|
|
@endif
|
|
<span>Dicetak Pada: {{ \Carbon\Carbon::now()->translatedFormat('d F Y H:i') }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<x-table>
|
|
<x-slot name="head">
|
|
<x-th>No</x-th>
|
|
<x-th>Nama Pengunjung</x-th>
|
|
<x-th>Tipe</x-th>
|
|
<x-th>Tujuan</x-th>
|
|
<x-th>Tanggal</x-th>
|
|
</x-slot>
|
|
|
|
@forelse($bukuTamu as $item)
|
|
<tr class="hover:bg-gray-50 transition-colors border-b border-gray-100 last:border-0">
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ (request('limit_start') ? (int)request('limit_start') : 1) + $loop->index }}</td>
|
|
<td class="px-6 py-4">
|
|
@if($item->user)
|
|
{{-- Member path: data dari users --}}
|
|
<div class="font-medium text-gray-900">{{ $item->user->name }}</div>
|
|
<div class="text-xs text-gray-500">{{ $item->user->email }}</div>
|
|
@elseif($item->nama_tamu)
|
|
{{-- Tamu path: data manual --}}
|
|
<div class="font-medium text-gray-900">{{ $item->nama_tamu }}</div>
|
|
<div class="text-xs text-gray-500">{{ $item->asal_instansi ?? '-' }}</div>
|
|
@else
|
|
<div class="text-gray-400">-</div>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
|
@if($item->id_user)
|
|
<x-badge color="blue">Anggota</x-badge>
|
|
@else
|
|
<x-badge color="gray">Pengunjung</x-badge>
|
|
@endif
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ $item->tujuan_kunjungan }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-700">{{ \Carbon\Carbon::parse($item->tanggal_kunjungan)->format('d M Y') }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="text-center text-gray-500 py-8">Belum ada data kehadiran</td>
|
|
</tr>
|
|
@endforelse
|
|
</x-table>
|
|
</div>
|
|
</x-card>
|
|
|
|
<style>
|
|
@media print {
|
|
/* Hide layout elements not needed for print */
|
|
header, aside, .sidebar, nav, footer, button, .print\:hidden, form, .mb-4 {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Reset body, main, and containers to allow natural multi-page flow */
|
|
html, body {
|
|
height: auto !important;
|
|
min-height: auto !important;
|
|
overflow: visible !important;
|
|
background-color: #fff !important;
|
|
color: #000 !important;
|
|
}
|
|
|
|
/* Force the relative layout container to overflow naturally */
|
|
div.flex.flex-1.overflow-hidden.relative {
|
|
display: block !important;
|
|
height: auto !important;
|
|
min-height: auto !important;
|
|
overflow: visible !important;
|
|
position: static !important;
|
|
}
|
|
|
|
main {
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: auto !important;
|
|
min-height: auto !important;
|
|
overflow: visible !important;
|
|
position: static !important;
|
|
display: block !important;
|
|
width: 100% !important;
|
|
}
|
|
|
|
/* Reset card and table parent wrappers */
|
|
.bg-white, .shadow-xl, .rounded-3xl, .p-6, .p-8 {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
height: auto !important;
|
|
min-height: auto !important;
|
|
overflow: visible !important;
|
|
}
|
|
|
|
/* Adjust table styles for print */
|
|
table {
|
|
width: 100% !important;
|
|
border-collapse: collapse !important;
|
|
}
|
|
|
|
th, td {
|
|
padding: 8px 12px !important;
|
|
border: 1px solid #ddd !important;
|
|
font-size: 11px !important;
|
|
color: #000 !important;
|
|
}
|
|
|
|
/* Avoid page breaks inside table rows */
|
|
tr {
|
|
page-break-inside: avoid !important;
|
|
}
|
|
}
|
|
</style>
|
|
@endsection
|