321 lines
16 KiB
PHP
321 lines
16 KiB
PHP
{{-- resources/views/santri/pelanggaran/index.blade.php --}}
|
|
@extends('layouts.app')
|
|
|
|
@section('title', 'Riwayat Pelanggaran')
|
|
|
|
@section('content')
|
|
<div class="page-header">
|
|
<h2><i class="fas fa-exclamation-circle"></i> Riwayat Pelanggaran Saya</h2>
|
|
</div>
|
|
|
|
{{-- ===== ALERT PERINGATAN ===== --}}
|
|
@php
|
|
$tingkatPoin = '';
|
|
$warnaPoin = '';
|
|
if ($totalPoin >= 50) {
|
|
$tingkatPoin = 'Berat';
|
|
$warnaPoin = 'var(--danger-color)';
|
|
} elseif ($totalPoin >= 20) {
|
|
$tingkatPoin = 'Sedang';
|
|
$warnaPoin = '#e67e22';
|
|
} elseif ($totalPoin > 0) {
|
|
$tingkatPoin = 'Ringan';
|
|
$warnaPoin = 'var(--warning-color)';
|
|
}
|
|
@endphp
|
|
|
|
@if($totalPoin >= 50)
|
|
<div style="background: linear-gradient(135deg, #dc3545 0%, #a71d2a 100%); color: white; padding: 16px 20px; border-radius: var(--border-radius); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 4px 15px rgba(220,53,69,0.3);">
|
|
<i class="fas fa-exclamation-triangle" style="font-size: 2em; opacity: 0.9;"></i>
|
|
<div>
|
|
<strong style="font-size: 1.05em;">âš ï¸ Perhatian! Akumulasi poin Anda sudah tinggi ({{ $totalPoin }} poin)</strong><br>
|
|
<span style="opacity: 0.9; font-size: 0.9em;">Harap segera hubungi pengurus pondok untuk konsultasi dan penyelesaian kafaroh yang ada.</span>
|
|
</div>
|
|
</div>
|
|
@elseif($totalPoin >= 20)
|
|
<div style="background: linear-gradient(135deg, #e67e22 0%, #ca6f1e 100%); color: white; padding: 16px 20px; border-radius: var(--border-radius); margin-bottom: 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 4px 15px rgba(230,126,34,0.3);">
|
|
<i class="fas fa-exclamation-circle" style="font-size: 2em; opacity: 0.9;"></i>
|
|
<div>
|
|
<strong style="font-size: 1.05em;">Catatan: Poin pelanggaran Anda mulai bertambah ({{ $totalPoin }} poin)</strong><br>
|
|
<span style="opacity: 0.9; font-size: 0.9em;">Jaga perilaku dan taati peraturan pondok agar poin tidak terus bertambah.</span>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ===== STATISTIK CARDS ===== --}}
|
|
<div class="row-cards">
|
|
<div class="card card-danger">
|
|
<h3>Total Pelanggaran</h3>
|
|
<div class="card-value">{{ $totalPelanggaran }}</div>
|
|
<p style="margin: 4px 0 0; color: var(--text-light); font-size: 0.85em;">Sepanjang waktu</p>
|
|
<i class="fas fa-clipboard-list card-icon"></i>
|
|
</div>
|
|
|
|
<div class="card card-warning">
|
|
<h3>Total Poin</h3>
|
|
<div class="card-value">{{ $totalPoin }}</div>
|
|
<p style="margin: 4px 0 0; color: var(--text-light); font-size: 0.85em;">
|
|
@if($tingkatPoin)
|
|
Tingkat: <strong>{{ $tingkatPoin }}</strong>
|
|
@else
|
|
Belum ada poin
|
|
@endif
|
|
</p>
|
|
<i class="fas fa-star card-icon"></i>
|
|
</div>
|
|
|
|
<div class="card card-info">
|
|
<h3>Bulan Ini</h3>
|
|
<div class="card-value">{{ $pelanggaranBulanIni }}</div>
|
|
<p style="margin: 4px 0 0; color: var(--text-light); font-size: 0.85em;">{{ \Carbon\Carbon::now()->isoFormat('MMMM YYYY') }}</p>
|
|
<i class="fas fa-calendar-alt card-icon"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== VISUALISASI POIN ===== --}}
|
|
@if($totalPoin > 0)
|
|
<div class="content-box" style="margin-bottom: 18px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
|
<h4 style="margin: 0; color: var(--primary-color);">
|
|
<i class="fas fa-chart-bar"></i> Akumulasi Poin Pelanggaran
|
|
</h4>
|
|
<span style="font-size: 0.85em; color: var(--text-light);">Batas perhatian: 20 poin | Batas berat: 50 poin</span>
|
|
</div>
|
|
|
|
{{-- Progress Bar Poin --}}
|
|
@php
|
|
$maxPoin = max(50, $totalPoin); // skala dinamis
|
|
$persenBar = min(100, round(($totalPoin / $maxPoin) * 100));
|
|
if ($totalPoin < 20) {
|
|
$colorBar = 'var(--success-color)';
|
|
} elseif ($totalPoin < 50) {
|
|
$colorBar = '#e67e22';
|
|
} else {
|
|
$colorBar = 'var(--danger-color)';
|
|
}
|
|
@endphp
|
|
|
|
<div style="background: #f0f0f0; border-radius: 50px; height: 22px; overflow: hidden; position: relative; margin-bottom: 8px;">
|
|
{{-- Marker 20 poin --}}
|
|
<div style="position: absolute; left: {{ round((20 / $maxPoin) * 100) }}%; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,0.2); z-index: 1;"></div>
|
|
{{-- Marker 50 poin --}}
|
|
@if($maxPoin >= 50)
|
|
<div style="position: absolute; left: {{ round((50 / $maxPoin) * 100) }}%; top: 0; bottom: 0; width: 2px; background: rgba(0,0,0,0.2); z-index: 1;"></div>
|
|
@endif
|
|
<div style="height: 100%; width: {{ $persenBar }}%; background: {{ $colorBar }}; border-radius: 50px; transition: width 0.8s ease; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px;">
|
|
<span style="color: white; font-size: 0.78em; font-weight: 700; white-space: nowrap;">{{ $totalPoin }} poin</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; justify-content: space-between; font-size: 0.78em; color: var(--text-light);">
|
|
<span>0</span>
|
|
<span style="margin-left: {{ round((20/$maxPoin)*100) }}%">20</span>
|
|
@if($maxPoin >= 50)<span>50+</span>@endif
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- ===== FILTER ===== --}}
|
|
<div class="content-box" style="margin-bottom: 14px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 11px;">
|
|
<form method="GET" action="{{ route('santri.pelanggaran.index') }}" style="display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;">
|
|
<div>
|
|
<label style="font-size: 0.82em; color: var(--text-light); display: block; margin-bottom: 4px;">
|
|
<i class="fas fa-calendar-day"></i> Tanggal Mulai
|
|
</label>
|
|
<input type="date" name="tanggal_mulai" class="form-control" style="width: auto;"
|
|
value="{{ request('tanggal_mulai') }}">
|
|
</div>
|
|
<div>
|
|
<label style="font-size: 0.82em; color: var(--text-light); display: block; margin-bottom: 4px;">
|
|
<i class="fas fa-calendar-check"></i> Tanggal Selesai
|
|
</label>
|
|
<input type="date" name="tanggal_selesai" class="form-control" style="width: auto;"
|
|
value="{{ request('tanggal_selesai') }}">
|
|
</div>
|
|
<div style="display: flex; gap: 8px; padding-top: 2px;">
|
|
<button type="submit" class="btn btn-primary btn-sm">
|
|
<i class="fas fa-filter"></i> Filter
|
|
</button>
|
|
<a href="{{ route('santri.pelanggaran.index') }}" class="btn btn-secondary btn-sm">
|
|
<i class="fas fa-redo"></i> Reset
|
|
</a>
|
|
<a href="{{ route('santri.pelanggaran.index', ['bulan_ini' => 1]) }}"
|
|
class="btn btn-sm {{ request('bulan_ini') ? 'btn-info' : 'btn-secondary' }}"
|
|
style="{{ request('bulan_ini') ? '' : 'border: 1px solid var(--primary-color); color: var(--primary-color); background: transparent;' }}">
|
|
<i class="fas fa-calendar-check"></i> Bulan Ini
|
|
</a>
|
|
</div>
|
|
</form>
|
|
|
|
<div style="display: flex; gap: 8px; flex-wrap: wrap;">
|
|
<a href="{{ route('santri.pelanggaran.kategori') }}" class="btn btn-warning btn-sm">
|
|
<i class="fas fa-list-ul"></i> Kategori & Poin
|
|
</a>
|
|
<a href="{{ route('santri.pembinaan.index') }}" class="btn btn-sm"
|
|
style="background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark, #1a4980) 100%);
|
|
color: white; border: none;">
|
|
<i class="fas fa-book-open"></i> Pembinaan & Sanksi
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== TABEL RIWAYAT ===== --}}
|
|
<div class="content-box">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px;">
|
|
<h3 style="margin: 0; color: var(--primary-color);">
|
|
<i class="fas fa-history"></i> Daftar Riwayat Pelanggaran
|
|
</h3>
|
|
@if(request()->hasAny(['tanggal_mulai', 'tanggal_selesai', 'bulan_ini']))
|
|
<span class="badge badge-info" style="font-size: 0.85em;">
|
|
<i class="fas fa-filter"></i> Filter aktif — {{ $riwayat->total() }} data
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
@if($riwayat->count() > 0)
|
|
<div style="overflow-x: auto;">
|
|
<div class="table-wrapper">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 5%;">No</th>
|
|
<th style="width: 10%;">ID</th>
|
|
<th style="width: 13%;">Tanggal</th>
|
|
<th style="width: 28%;">Jenis Pelanggaran</th>
|
|
<th style="width: 9%; text-align: center;">Poin</th>
|
|
<th style="width: 25%;">Keterangan</th>
|
|
<th style="width: 10%; text-align: center;">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($riwayat as $index => $item)
|
|
<tr style="transition: background 0.2s;">
|
|
<td>{{ $riwayat->firstItem() + $index }}</td>
|
|
<td>
|
|
<span class="badge badge-secondary" style="font-size: 0.8em;">
|
|
{{ $item->id_riwayat }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<div style="white-space: nowrap;">
|
|
<i class="fas fa-calendar-day" style="color: var(--text-light); font-size: 0.85em;"></i>
|
|
<span style="font-size: 0.9em;">{{ \Carbon\Carbon::parse($item->tanggal)->isoFormat('D MMM YYYY') }}</span>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<strong>{{ $item->kategori->nama_pelanggaran ?? '-' }}</strong>
|
|
@if($item->kategori && $item->kategori->id_kategori)
|
|
<br><small style="color: var(--text-light);">
|
|
<i class="fas fa-tag"></i> {{ $item->kategori->id_kategori }}
|
|
</small>
|
|
@endif
|
|
</td>
|
|
<td style="text-align: center;">
|
|
@php $poin = $item->poin; @endphp
|
|
<span class="badge badge-danger"
|
|
style="font-size: 0.9em; padding: 5px 10px;
|
|
{{ $poin >= 20 ? 'background: linear-gradient(135deg, #dc3545, #a71d2a);' : '' }}">
|
|
<i class="fas fa-fire"></i> {{ $poin }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
@if($item->keterangan)
|
|
<div style="max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
font-size: 0.88em; color: var(--text-color);"
|
|
title="{{ $item->keterangan }}">
|
|
{{ $item->keterangan }}
|
|
</div>
|
|
@else
|
|
<span style="color: var(--text-light); font-size: 0.85em; font-style: italic;">Tidak ada keterangan</span>
|
|
@endif
|
|
</td>
|
|
<td style="text-align: center;">
|
|
<a href="{{ route('santri.pelanggaran.show', $item->id) }}"
|
|
class="btn btn-info btn-sm"
|
|
title="Lihat Detail">
|
|
<i class="fas fa-eye"></i> Detail
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Pagination --}}
|
|
<div style="margin-top: 14px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;">
|
|
<p style="margin: 0; color: var(--text-light); font-size: 0.88em;">
|
|
Menampilkan {{ $riwayat->firstItem() }}-{{ $riwayat->lastItem() }} dari {{ $riwayat->total() }} data
|
|
</p>
|
|
{{ $riwayat->links() }}
|
|
</div>
|
|
@else
|
|
<div class="empty-state">
|
|
<i class="fas fa-check-circle" style="color: var(--success-color);"></i>
|
|
<h3>Tidak Ada Riwayat Pelanggaran</h3>
|
|
@if(request()->hasAny(['tanggal_mulai', 'tanggal_selesai', 'bulan_ini']))
|
|
<p>Tidak ditemukan data dengan filter yang dipilih.</p>
|
|
<a href="{{ route('santri.pelanggaran.index') }}" class="btn btn-secondary">
|
|
<i class="fas fa-redo"></i> Hapus Filter
|
|
</a>
|
|
@else
|
|
<p>Alhamdulillah, Anda belum memiliki catatan pelanggaran. Pertahankan!</p>
|
|
@endif
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- ===== INFO ANALISIS JIKA ADA DATA ===== --}}
|
|
@if($totalPelanggaran > 0)
|
|
<div class="content-box" style="margin-top: 18px;">
|
|
<h3 style="margin-bottom: 18px; color: var(--primary-color);">
|
|
<i class="fas fa-chart-pie"></i> Ringkasan Analisis
|
|
</h3>
|
|
<div class="grid-auto-fill">
|
|
|
|
<div style="background: var(--primary-light); padding: 16px; border-radius: var(--border-radius-sm); text-align: center;">
|
|
<i class="fas fa-calculator" style="font-size: 1.8em; color: var(--primary-color); margin-bottom: 8px;"></i>
|
|
<div style="font-size: 1.6em; font-weight: 700; color: var(--primary-dark);">
|
|
{{ $totalPelanggaran > 0 ? number_format($totalPoin / $totalPelanggaran, 1) : 0 }}
|
|
</div>
|
|
<p style="margin: 4px 0 0; color: var(--text-light); font-size: 0.85em;">Rata-rata Poin/Pelanggaran</p>
|
|
</div>
|
|
|
|
<div style="background: {{ $totalPoin >= 50 ? 'var(--danger-color)' : ($totalPoin >= 20 ? '#fdebd0' : '#eafaf1') }};
|
|
padding: 16px; border-radius: var(--border-radius-sm); text-align: center;">
|
|
<i class="fas fa-signal" style="font-size: 1.8em; color: {{ $totalPoin >= 50 ? 'white' : ($totalPoin >= 20 ? '#ca6f1e' : 'var(--success-color)') }}; margin-bottom: 8px;"></i>
|
|
<div style="font-size: 1.4em; font-weight: 700; color: {{ $totalPoin >= 50 ? 'white' : ($totalPoin >= 20 ? '#ca6f1e' : 'var(--success-color)') }};">
|
|
@if($totalPoin >= 50) Berat
|
|
@elseif($totalPoin >= 20) Sedang
|
|
@else Ringan
|
|
@endif
|
|
</div>
|
|
<p style="margin: 4px 0 0; color: {{ $totalPoin >= 50 ? 'rgba(255,255,255,0.8)' : 'var(--text-light)' }}; font-size: 0.85em;">Tingkat Pelanggaran</p>
|
|
</div>
|
|
|
|
<div style="background: #f8f9fa; padding: 16px; border-radius: var(--border-radius-sm); text-align: center;">
|
|
<i class="fas fa-calendar-day" style="font-size: 1.8em; color: var(--primary-color); margin-bottom: 8px;"></i>
|
|
<div style="font-size: 1em; font-weight: 600; color: var(--text-color);">
|
|
@if($riwayat->first())
|
|
{{ \Carbon\Carbon::parse($riwayat->first()->tanggal)->isoFormat('D MMM YYYY') }}
|
|
@else
|
|
—
|
|
@endif
|
|
</div>
|
|
<p style="margin: 4px 0 0; color: var(--text-light); font-size: 0.85em;">Pelanggaran Terakhir</p>
|
|
</div>
|
|
|
|
<div style="background: #fff3cd; padding: 16px; border-radius: var(--border-radius-sm); text-align: center;">
|
|
<i class="fas fa-calendar-check" style="font-size: 1.8em; color: #856404; margin-bottom: 8px;"></i>
|
|
<div style="font-size: 1.6em; font-weight: 700; color: #856404;">
|
|
{{ $pelanggaranBulanIni }}
|
|
</div>
|
|
<p style="margin: 4px 0 0; color: #856404; font-size: 0.85em;">Pelanggaran Bulan Ini</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@endsection |