787 lines
58 KiB
PHP
787 lines
58 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Detail Pelanggaran')
|
|
|
|
@push('styles')
|
|
<style>
|
|
.evidence-grid img { transition: transform 0.3s ease; }
|
|
.evidence-grid a:hover img { transform: scale(1.05); }
|
|
.evidence-grid a:hover .evidence-overlay { opacity: 1; }
|
|
.detail-row:last-of-type { border-bottom: none !important; }
|
|
.status-dot { position: absolute; left: 0; top: 4px; }
|
|
.handling-timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 23px;
|
|
top: 16px;
|
|
bottom: 16px;
|
|
width: 3px;
|
|
background: linear-gradient(to bottom, #f59e0b, #f97316, #fbbf24);
|
|
border-radius: 999px;
|
|
opacity: 0.35;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
@php
|
|
$handleColors = [
|
|
'unhandled' => ['from' => '#dc2626', 'to' => '#b91c1c'],
|
|
'in_progress' => ['from' => '#d97706', 'to' => '#b45309'],
|
|
'resolved' => ['from' => '#16a34a', 'to' => '#15803d'],
|
|
];
|
|
$handleLabels = [
|
|
'unhandled' => 'Belum Ditangani',
|
|
'in_progress' => 'Dalam Proses',
|
|
'resolved' => 'Selesai',
|
|
];
|
|
$hcolor = $handleColors[$violation->handling_status] ?? ['from' => '#6b7280', 'to' => '#4b5563'];
|
|
@endphp
|
|
<div>
|
|
{{-- ===== HEADER HERO ===== --}}
|
|
<div class="relative overflow-hidden rounded-3xl bg-gradient-to-br from-blue-600 via-blue-500 to-sky-400 p-6 sm:p-8 text-white shadow-lg shadow-blue-200/60 mb-6">
|
|
<div class="pointer-events-none absolute -top-20 -right-16 h-64 w-64 rounded-full bg-white/10 blur-2xl"></div>
|
|
<div class="pointer-events-none absolute -bottom-24 -left-12 h-72 w-72 rounded-full bg-sky-300/20 blur-3xl"></div>
|
|
<div class="pointer-events-none absolute inset-0 opacity-[0.06]"
|
|
style="background-image: radial-gradient(circle at 25% 40%, #fff 1.5px, transparent 1.5px); background-size: 22px 22px;"></div>
|
|
|
|
<div class="relative z-10 flex flex-col gap-5 lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex h-16 w-16 sm:h-20 sm:w-20 items-center justify-center rounded-2xl bg-white/15 text-2xl sm:text-3xl font-black backdrop-blur-sm ring-1 ring-white/25 shadow-inner">
|
|
{{ strtoupper(substr($violation->student->full_name ?? '?', 0, 1)) }}
|
|
</div>
|
|
<div class="min-w-0">
|
|
<nav class="flex items-center gap-1.5 text-xs text-white/60 mb-1.5">
|
|
<a href="{{ route('violations.index') }}" class="hover:text-white transition">Data Pelanggaran</a>
|
|
<span>/</span>
|
|
<span class="text-white/80 font-medium truncate max-w-[160px]">Detail Pelanggaran</span>
|
|
</nav>
|
|
<h1 class="text-xl sm:text-2xl font-black tracking-tight truncate">{{ $violation->student->full_name ?? '-' }}</h1>
|
|
<div class="flex flex-wrap items-center gap-2 mt-2">
|
|
<span class="inline-flex items-center px-2.5 py-1 text-[11px] font-mono font-semibold bg-white/15 rounded-lg ring-1 ring-white/20 backdrop-blur-sm">{{ $violation->student->nisn ?? '—' }}</span>
|
|
<span class="inline-flex items-center px-2.5 py-1 text-[11px] font-semibold bg-emerald-400/20 text-emerald-100 rounded-lg ring-1 ring-emerald-300/30">{{ $violation->student->class_name ?? '—' }}</span>
|
|
@if($violation->student->department_name)
|
|
<span class="inline-flex items-center px-2.5 py-1 text-[11px] font-semibold bg-purple-400/20 text-purple-100 rounded-lg ring-1 ring-purple-300/30">{{ $violation->student->department_name }}</span>
|
|
@endif
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] font-bold rounded-lg ring-1 backdrop-blur-sm
|
|
{{ $violation->handling_status === 'resolved' ? 'bg-emerald-400/20 text-emerald-100 ring-emerald-300/30' : ($violation->handling_status === 'in_progress' ? 'bg-yellow-400/20 text-yellow-100 ring-yellow-300/30' : 'bg-red-400/20 text-red-100 ring-red-300/30') }}">
|
|
<span class="w-1.5 h-1.5 rounded-full {{ $violation->handling_status === 'resolved' ? 'bg-emerald-300' : ($violation->handling_status === 'in_progress' ? 'bg-yellow-300' : 'bg-red-300') }}"></span>
|
|
{{ $handleLabels[$violation->handling_status] ?? ucfirst($violation->handling_status ?? 'unhandled') }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2 shrink-0">
|
|
@if(!$violation->is_verified)
|
|
<form action="{{ route('violations.verify', $violation->id) }}" method="POST">
|
|
@csrf
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-1.5 px-4 py-2.5 text-sm font-bold text-white bg-emerald-500 rounded-xl hover:bg-emerald-600 transition shadow-md shadow-emerald-900/20 active:scale-95">
|
|
<i class="fa-solid fa-check-circle text-xs"></i>
|
|
Verifikasi
|
|
</button>
|
|
</form>
|
|
@endif
|
|
<form action="{{ route('violations.destroy', $violation->id) }}" method="POST" x-data x-on:submit.prevent="if(await window.confirmSwal({text:'Hapus pelanggaran ini?'})) $el.submit()">
|
|
@csrf @method('DELETE')
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-1.5 px-3.5 py-2.5 text-sm font-semibold text-white bg-red-500 ring-1 ring-red-400/40 rounded-xl hover:bg-red-600 active:scale-95 transition shadow-lg shadow-red-900/30">
|
|
<i class="fa-solid fa-trash-can text-xs"></i>
|
|
<span class="hidden sm:inline">Hapus</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== NOTIFIKASI ORANG TUA/WALI ===== --}}
|
|
@php
|
|
$lastNotif = $violation->notifications()->latest('id')->first();
|
|
@endphp
|
|
<div class="mt-6 overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-gray-100">
|
|
<div class="flex flex-wrap items-center justify-between gap-3 px-5 py-4 border-b border-gray-100">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-500 to-green-400 flex items-center justify-center text-white shadow-sm">
|
|
<i class="fa-brands fa-whatsapp"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-bold text-gray-800">Notifikasi Orang Tua/Wali</h3>
|
|
<p class="text-[11px] text-gray-400">Kabarkan pelanggaran ini via WhatsApp — pesan otomatis terisi</p>
|
|
</div>
|
|
</div>
|
|
@if ($lastNotif)
|
|
<span class="inline-flex items-center gap-1.5 text-[11px] font-bold px-3 py-1.5 rounded-full bg-emerald-50 text-emerald-600 ring-1 ring-emerald-200">
|
|
<i class="fa-solid fa-circle-check"></i> Sudah dikirim {{ $lastNotif->created_at->format('d M Y H:i') }} oleh {{ $lastNotif->user?->name ?? '-' }}
|
|
</span>
|
|
@endif
|
|
</div>
|
|
<div class="p-5 flex flex-wrap items-center justify-between gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-11 h-11 rounded-2xl bg-gray-50 border border-gray-200 flex items-center justify-center text-gray-400">
|
|
<i class="fa-solid fa-phone"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-gray-400 font-medium">No. HP Orang Tua/Wali</p>
|
|
@if ($violation->student?->parent_phone)
|
|
<p class="text-sm font-bold text-gray-800">{{ $violation->student->parent_phone }}</p>
|
|
@else
|
|
<p class="text-sm font-bold text-amber-600">Belum diisi</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@if ($violation->student?->parent_phone)
|
|
<a href="{{ route('violations.notify-wa', $violation->id) }}" target="_blank" rel="noopener"
|
|
class="inline-flex items-center gap-2 px-5 py-3 text-sm font-bold text-white bg-gradient-to-r from-emerald-500 to-green-500 rounded-2xl hover:from-emerald-600 hover:to-green-600 active:scale-95 transition shadow-lg shadow-emerald-500/25">
|
|
<i class="fa-brands fa-whatsapp text-base"></i> {{ $lastNotif ? 'Kirim Ulang' : 'Kirim WA ke Orang Tua' }}
|
|
</a>
|
|
@else
|
|
<a href="{{ route('students.show', $violation->student_id) }}"
|
|
class="inline-flex items-center gap-2 px-5 py-3 text-sm font-bold text-amber-700 bg-amber-50 border border-amber-200 rounded-2xl hover:bg-amber-100 transition">
|
|
<i class="fa-solid fa-pen"></i> Isi HP Orang Tua
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{{-- ===== KOLOM KIRI ===== --}}
|
|
<div class="lg:col-span-2 space-y-6">
|
|
|
|
{{-- Stat Row --}}
|
|
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
|
{{-- Total Poin --}}
|
|
<div class="relative overflow-hidden rounded-2xl bg-gradient-to-br from-orange-500 to-red-600 p-4 shadow-md shadow-orange-200/50">
|
|
<div class="absolute right-0 top-0 w-16 h-16 opacity-20">
|
|
<svg class="w-full h-full text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
|
|
</div>
|
|
<p class="text-[10px] font-bold text-white/70 uppercase tracking-wider">Total Poin</p>
|
|
<p class="text-3xl font-black text-white mt-1">{{ $violation->student->total_points }}</p>
|
|
<p class="text-[10px] text-white/50 mt-0.5">akumulasi siswa</p>
|
|
</div>
|
|
{{-- Poin Pelanggaran --}}
|
|
<div class="relative overflow-hidden rounded-2xl p-4 shadow-md"
|
|
style="background: linear-gradient(135deg, {{ $violation->points >= 50 ? '#dc2626' : ($violation->points >= 15 ? '#d97706' : '#2563eb') }}, {{ $violation->points >= 50 ? '#b91c1c' : ($violation->points >= 15 ? '#b45309' : '#1d4ed8') }});">
|
|
<div class="absolute right-0 top-0 w-16 h-16 opacity-10">
|
|
<svg class="w-full h-full text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
|
|
</div>
|
|
<p class="text-[10px] font-bold text-white/70 uppercase tracking-wider">Poin Pelanggaran</p>
|
|
<p class="text-2xl font-black text-white mt-1">+{{ $violation->points }}</p>
|
|
<p class="text-[10px] text-white/50 mt-0.5">pelanggaran ini</p>
|
|
</div>
|
|
{{-- Kategori --}}
|
|
<div class="relative overflow-hidden rounded-2xl p-4 shadow-md"
|
|
style="background: linear-gradient(135deg, {{ $violation->violationType?->category?->color ?? '#6b7280' }}, {{ $violation->violationType?->category?->color ?? '#6b7280' }}dd);">
|
|
<div class="absolute right-0 top-0 w-16 h-16 opacity-10">
|
|
<svg class="w-full h-full text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/></svg>
|
|
</div>
|
|
<p class="text-[10px] font-bold text-white/70 uppercase tracking-wider">Kategori</p>
|
|
<p class="text-base font-black text-white mt-1 truncate">{{ $violation->violationType?->category?->name ?? '-' }}</p>
|
|
<p class="text-[10px] text-white/50 mt-0.5">tingkat pelanggaran</p>
|
|
</div>
|
|
{{-- Status Penanganan --}}
|
|
<div class="relative overflow-hidden rounded-2xl p-4 shadow-md"
|
|
style="background: linear-gradient(135deg, {{ $hcolor['from'] }}, {{ $hcolor['to'] }});">
|
|
<div class="absolute right-0 top-0 w-16 h-16 opacity-10">
|
|
<i class="fa-solid fa-hand-holding-heart text-white text-4xl"></i>
|
|
</div>
|
|
<p class="text-[10px] font-bold text-white/70 uppercase tracking-wider">Penanganan</p>
|
|
<p class="text-base font-black text-white mt-1">{{ $handleLabels[$violation->handling_status] ?? '-' }}</p>
|
|
<p class="text-[10px] text-white/50 mt-0.5">
|
|
{{ $violation->handlings->count() }} catatan
|
|
@if($violation->handled_at)
|
|
• {{ $violation->handled_at->format('d/m') }}
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ===== PENANGANAN (fitur utama) ===== --}}
|
|
<div x-data="{ showHandlingModal: false }" class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
|
|
{{-- Header kartu --}}
|
|
<div class="bg-gradient-to-r from-amber-500 via-orange-500 to-orange-600 px-6 py-5 flex flex-wrap items-center justify-between gap-3">
|
|
<div class="flex items-center gap-3.5">
|
|
<div class="w-11 h-11 rounded-2xl bg-white/15 flex items-center justify-center ring-1 ring-white/25 backdrop-blur-sm">
|
|
<i class="fa-solid fa-hand-holding-heart text-white text-lg"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-base font-black text-white">Riwayat Penanganan</h3>
|
|
<p class="text-xs text-white/75">Alur tindak lanjut pelanggaran siswa</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
@if($violation->handlings->count() > 0 && $violation->isInProgress())
|
|
<form action="{{ route('violations.resolve', $violation->id) }}" method="POST">
|
|
@csrf
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-bold text-emerald-700 bg-white rounded-xl hover:bg-emerald-50 transition shadow-sm active:scale-95">
|
|
<i class="fa-solid fa-check-circle text-xs"></i>
|
|
Tandai Selesai
|
|
</button>
|
|
</form>
|
|
@endif
|
|
<button @click="showHandlingModal = true"
|
|
class="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-bold text-orange-700 bg-white rounded-xl hover:bg-orange-50 transition shadow-md shadow-orange-900/20 active:scale-95">
|
|
<i class="fa-solid fa-plus text-xs"></i>
|
|
Tambah Penanganan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Timeline --}}
|
|
<div class="p-5 sm:p-6">
|
|
@forelse($violation->handlings as $h)
|
|
@php
|
|
$ht = $handlingTypeMap[$h->handling_type] ?? null;
|
|
$htColor = $ht->color ?? '#f59e0b';
|
|
$htIcon = $ht->icon ?? 'fa-clipboard-list';
|
|
@endphp
|
|
<div class="relative pl-16 pb-6 {{ !$loop->last ? 'border-l-2 border-dashed border-orange-200 ml-[23px]' : '' }}">
|
|
{{-- Dot ikon --}}
|
|
<div class="absolute left-0 top-0 w-[46px]">
|
|
<div class="w-12 h-12 rounded-2xl flex items-center justify-center shadow-md ring-4 ring-orange-50"
|
|
style="background: linear-gradient(135deg, {{ $htColor }}, {{ $htColor }}bb);">
|
|
<i class="fa-solid {{ $htIcon }} text-white text-base"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-gray-50/80 to-gray-100/40 rounded-2xl border border-gray-100 p-4 hover:shadow-md transition-shadow duration-200">
|
|
{{-- Header --}}
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<p class="text-sm font-black text-gray-900">{{ $h->handling_type }}</p>
|
|
<span class="inline-flex items-center gap-1 px-2 py-0.5 text-[10px] font-bold rounded-md"
|
|
style="background-color: {{ $htColor }}18; color: {{ $htColor }}">
|
|
<i class="fa-regular fa-calendar"></i>
|
|
{{ $h->handling_date->format('d M Y') }}
|
|
</span>
|
|
</div>
|
|
<p class="text-[11px] text-gray-400 mt-1">
|
|
@if($h->location)<i class="fa-solid fa-location-dot mr-1 text-orange-400"></i>{{ $h->location }}@endif
|
|
@if($h->location && $h->creator) <span class="text-gray-300">•</span> @endif
|
|
@if($h->creator)oleh <span class="font-semibold text-gray-500">{{ $h->creator->name }}</span>@endif
|
|
</p>
|
|
</div>
|
|
<form action="{{ route('violations.handling.destroy', [$violation->id, $h->id]) }}" method="POST"
|
|
x-data x-on:submit.prevent="if(await window.confirmSwal({text:'Hapus catatan penanganan ini?'})) $el.submit()">
|
|
@csrf @method('DELETE')
|
|
<button type="submit"
|
|
class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-300 hover:text-red-500 hover:bg-red-50 transition flex-shrink-0">
|
|
<i class="fa-solid fa-trash-can text-xs"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
{{-- Deskripsi --}}
|
|
@if($h->description)
|
|
<div class="mt-3 bg-white rounded-xl border border-gray-100 p-3.5">
|
|
<p class="text-xs text-gray-700 leading-relaxed whitespace-pre-line">{{ $h->description }}</p>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Peserta --}}
|
|
@if($h->participants->count() > 0)
|
|
<div class="mt-3">
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1.5">Yang Menangani</p>
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach($h->participants as $p)
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] bg-white border border-gray-200 rounded-full shadow-sm">
|
|
<span class="w-4 h-4 rounded-full bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center flex-shrink-0">
|
|
<span class="text-[7px] font-bold text-white">{{ strtoupper(substr($p->user->name ?? '?', 0, 1)) }}</span>
|
|
</span>
|
|
<span class="font-semibold text-gray-700">{{ $p->user->name ?? '-' }}</span>
|
|
@if($p->role)
|
|
<span class="text-[10px] text-gray-500 bg-gray-50 px-1.5 py-0.5 rounded border border-gray-100">{{ $p->role }}</span>
|
|
@endif
|
|
</span>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Footer row --}}
|
|
<div class="mt-3 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
@if($h->evidence)
|
|
<a href="{{ \Storage::url($h->evidence) }}" target="_blank"
|
|
class="inline-flex items-center gap-1.5 text-[11px] font-bold text-blue-600 bg-blue-50/80 px-3 py-1.5 rounded-lg border border-blue-100 hover:bg-blue-100 transition shadow-sm">
|
|
<i class="fa-solid fa-paperclip text-[10px]"></i>
|
|
Lihat Bukti
|
|
<i class="fa-solid fa-arrow-up-right-from-square text-[9px] text-blue-400"></i>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
<p class="text-[10px] text-gray-300">
|
|
@if($h->created_at != $h->updated_at)
|
|
Diubah {{ $h->updated_at->diffForHumans() }}
|
|
@else
|
|
{{ $h->created_at->diffForHumans() }}
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="py-12 text-center">
|
|
<div class="relative w-24 h-24 mx-auto mb-4">
|
|
<div class="absolute inset-0 rounded-3xl bg-gradient-to-br from-amber-100 to-orange-100 rotate-6"></div>
|
|
<div class="absolute inset-0 rounded-3xl bg-gradient-to-br from-amber-200 to-orange-200 -rotate-3"></div>
|
|
<div class="absolute inset-2 rounded-2xl bg-white flex items-center justify-center">
|
|
<i class="fa-solid fa-hand-holding-heart text-3xl text-amber-400"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-base font-bold text-gray-700">Belum Ada Penanganan</p>
|
|
<p class="text-sm text-gray-400 mt-1">Mulai tindak lanjut pelanggaran ini dengan menekan tombol di atas</p>
|
|
<button @click="showHandlingModal = true"
|
|
class="mt-5 inline-flex items-center gap-2 px-5 py-2.5 text-sm font-bold text-white bg-gradient-to-r from-amber-500 to-orange-600 rounded-xl shadow-md shadow-orange-200 hover:-translate-y-0.5 transition-all active:scale-95">
|
|
<i class="fa-solid fa-plus"></i> Tambah Penanganan Pertama
|
|
</button>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Modal Tambah Penanganan --}}
|
|
<script>
|
|
window.handlingTypeOptions = @json($handlingTypes->map(fn($t) => ['name' => $t->name, 'icon' => $t->icon, 'color' => $t->color]));
|
|
</script>
|
|
<div x-show="showHandlingModal"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
|
|
<div class="flex items-center justify-center min-h-screen px-4 py-6">
|
|
<div class="fixed inset-0 bg-gray-900/50 backdrop-blur-sm"></div>
|
|
<div class="relative bg-white rounded-3xl shadow-2xl w-full max-w-2xl mx-4 max-h-[92vh] overflow-y-auto">
|
|
{{-- Header hero --}}
|
|
<div class="relative overflow-hidden bg-gradient-to-r from-amber-500 via-orange-500 to-orange-600 px-7 py-6 sticky top-0 z-10">
|
|
<div class="pointer-events-none absolute -top-10 -right-10 w-44 h-44 rounded-full bg-white/10 blur-2xl"></div>
|
|
<div class="pointer-events-none absolute -bottom-14 -left-8 w-40 h-40 rounded-full bg-orange-300/20 blur-3xl"></div>
|
|
<div class="pointer-events-none absolute inset-0 opacity-[0.06]"
|
|
style="background-image: radial-gradient(circle at 25% 40%, #fff 1.5px, transparent 1.5px); background-size: 20px 20px;"></div>
|
|
<div class="relative z-10 flex items-center justify-between gap-4">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-12 h-12 rounded-2xl bg-white/15 flex items-center justify-center ring-1 ring-white/25 backdrop-blur-sm">
|
|
<i class="fa-solid fa-hand-holding-heart text-white text-xl"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-base font-black text-white">Tambah Penanganan</h3>
|
|
<p class="text-xs text-white/75">{{ $violation->student->full_name ?? '-' }} • {{ $violation->student->class_name ?? '' }}</p>
|
|
</div>
|
|
</div>
|
|
<button @click="showHandlingModal = false"
|
|
class="w-9 h-9 rounded-xl bg-white/10 ring-1 ring-white/25 flex items-center justify-center text-white hover:bg-white/25 transition flex-shrink-0">
|
|
<i class="fa-solid fa-xmark"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="{{ route('violations.handling.store', $violation->id) }}" method="POST" enctype="multipart/form-data" class="p-7"
|
|
x-data="{
|
|
participants: [],
|
|
selectedType: '',
|
|
evidenceName: '',
|
|
handlingTypes: window.handlingTypeOptions || [],
|
|
get selectedMeta() {
|
|
return this.handlingTypes.find(t => t.name === this.selectedType) || null;
|
|
}
|
|
}">
|
|
@csrf
|
|
|
|
<div class="space-y-6">
|
|
{{-- Jenis Penanganan --}}
|
|
<div>
|
|
<label class="block text-sm font-bold text-gray-700 mb-2">Jenis Penanganan <span class="text-red-500">*</span></label>
|
|
<div class="flex items-center gap-3.5">
|
|
<div class="w-12 h-12 rounded-2xl flex items-center justify-center shadow-md ring-4 ring-amber-50 shrink-0 transition-all duration-300"
|
|
:style="selectedMeta ? 'background: linear-gradient(135deg, ' + selectedMeta.color + ', ' + selectedMeta.color + 'bb);' : 'background: linear-gradient(135deg, #d1d5db, #9ca3af);'">
|
|
<i :class="'fa-solid ' + (selectedMeta ? selectedMeta.icon : 'fa-hand-holding-heart')" class="text-white text-lg"></i>
|
|
</div>
|
|
<select name="handling_type" x-model="selectedType" required
|
|
class="flex-1 px-4 py-3 border-2 border-gray-200 rounded-2xl text-sm font-semibold bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition">
|
|
<option value="">— Pilih jenis penanganan —</option>
|
|
@foreach($handlingTypes as $htOpt)
|
|
<option value="{{ $htOpt->name }}">{{ $htOpt->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<p class="mt-1.5 text-[11px] text-gray-400">Ikon & warna menyesuaikan jenis yang dipilih</p>
|
|
</div>
|
|
|
|
{{-- Tanggal + Lokasi --}}
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
|
|
<div>
|
|
<label class="block text-sm font-bold text-gray-700 mb-2">Tanggal Penanganan <span class="text-red-500">*</span></label>
|
|
<div class="relative">
|
|
<i class="fa-solid fa-calendar-day absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
|
|
<input type="date" name="handling_date" value="{{ date('Y-m-d') }}" required
|
|
class="w-full pl-11 pr-4 py-3 border-2 border-gray-200 rounded-2xl text-sm font-semibold bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition">
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-bold text-gray-700 mb-2">Lokasi</label>
|
|
<div class="relative">
|
|
<i class="fa-solid fa-location-dot absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
|
|
<input type="text" name="location" placeholder="Ruang BK, Ruang Guru, dll"
|
|
class="w-full pl-11 pr-4 py-3 border-2 border-gray-200 rounded-2xl text-sm font-semibold bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Deskripsi --}}
|
|
<div>
|
|
<label class="block text-sm font-bold text-gray-700 mb-2">Catatan / Deskripsi</label>
|
|
<textarea name="description" rows="4" placeholder="Tuliskan detail penanganan yang dilakukan..."
|
|
class="w-full px-4 py-3 border-2 border-gray-200 rounded-2xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition resize-none"></textarea>
|
|
</div>
|
|
|
|
{{-- Bukti --}}
|
|
<div>
|
|
<label class="block text-sm font-bold text-gray-700 mb-2">Bukti Pendukung <span class="font-normal text-gray-400">(opsional)</span></label>
|
|
<label class="flex flex-col items-center justify-center gap-2 px-6 py-7 rounded-2xl border-2 border-dashed border-gray-300 bg-gray-50/50 cursor-pointer hover:border-amber-400 hover:bg-amber-50/40 transition group">
|
|
<div class="w-12 h-12 rounded-2xl bg-white shadow-sm border border-gray-200 flex items-center justify-center group-hover:scale-110 transition-transform">
|
|
<i class="fa-solid fa-cloud-arrow-up text-amber-500 text-lg"></i>
|
|
</div>
|
|
<p class="text-sm font-bold text-gray-600" x-text="evidenceName || 'Klik untuk unggah bukti'"></p>
|
|
<p class="text-[11px] text-gray-400">JPG, PNG, PDF, DOC — maks 10 MB</p>
|
|
<input type="file" name="evidence" accept="image/*,.pdf,.doc,.docx" class="hidden"
|
|
@change="evidenceName = $event.target.files[0]?.name || ''">
|
|
</label>
|
|
</div>
|
|
|
|
{{-- Participants --}}
|
|
<div>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<label class="block text-sm font-bold text-gray-700">Yang Menangani</label>
|
|
<button type="button" @click="participants.push({user_id: '', role: ''})"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold text-amber-600 bg-amber-50 border border-amber-200 rounded-xl hover:bg-amber-100 transition">
|
|
<i class="fa-solid fa-plus"></i> Tambah Penanggungjawab
|
|
</button>
|
|
</div>
|
|
<div class="space-y-2.5">
|
|
<template x-for="(p, i) in participants" :key="i">
|
|
<div class="flex items-center gap-2.5 rounded-2xl border border-gray-200 bg-gray-50/50 p-2.5">
|
|
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center text-white shrink-0">
|
|
<i class="fa-solid fa-user text-xs"></i>
|
|
</div>
|
|
<select :name="'participants['+i+'][user_id]'" x-model="p.user_id"
|
|
class="flex-1 px-3 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
|
|
<option value="">Pilih petugas...</option>
|
|
@foreach($users as $user)
|
|
<option value="{{ $user->id }}">{{ $user->name }} ({{ $user->role }})</option>
|
|
@endforeach
|
|
</select>
|
|
<select :name="'participants['+i+'][role]'" x-model="p.role"
|
|
class="w-[130px] px-3 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
|
|
<option value="">Peran</option>
|
|
@foreach($handlingRoles as $roleOpt)
|
|
<option value="{{ $roleOpt }}">{{ $roleOpt }}</option>
|
|
@endforeach
|
|
</select>
|
|
<button type="button" @click="participants.splice(i, 1)"
|
|
class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-300 hover:text-red-500 hover:bg-red-50 transition shrink-0">
|
|
<i class="fa-solid fa-trash-can text-xs"></i>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
<p x-show="participants.length === 0" class="text-[11px] text-gray-400 pl-1">
|
|
Belum ada — tambahkan petugas yang menangani (opsional)
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Footer --}}
|
|
<div class="flex items-center justify-end gap-3 mt-8 pt-5 border-t border-gray-100">
|
|
<button type="button" @click="showHandlingModal = false"
|
|
class="px-6 py-3 text-sm font-bold text-gray-600 bg-white border-2 border-gray-200 rounded-2xl hover:bg-gray-50 transition">
|
|
Batal
|
|
</button>
|
|
<button type="submit"
|
|
class="px-7 py-3 text-sm font-black text-white bg-gradient-to-r from-amber-500 to-orange-600 rounded-2xl shadow-lg shadow-orange-200 hover:-translate-y-0.5 hover:brightness-105 transition-all inline-flex items-center gap-2 active:scale-95">
|
|
<i class="fa-solid fa-floppy-disk"></i>
|
|
Simpan Penanganan
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{-- Detail Info Card --}}
|
|
<div class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
|
|
{{-- Header --}}
|
|
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between gap-3">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
|
|
<i class="fa-solid fa-gavel text-white text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-black text-gray-900">Informasi Pelanggaran</h3>
|
|
<p class="text-xs text-gray-400">Detail lengkap pelanggaran yang tercatat</p>
|
|
</div>
|
|
</div>
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-bold rounded-full"
|
|
style="background-color: {{ $violation->violationType?->category?->color ?? '#6b7280' }}15; color: {{ $violation->violationType?->category?->color ?? '#6b7280' }}">
|
|
<span class="w-2 h-2 rounded-full" style="background-color: {{ $violation->violationType?->category?->color ?? '#6b7280' }}"></span>
|
|
{{ $violation->violationType?->category?->name ?? '-' }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100/50 rounded-xl border border-gray-100 p-4">
|
|
<div class="flex items-center gap-2.5 mb-2">
|
|
<div class="w-7 h-7 rounded-lg bg-blue-50 flex items-center justify-center">
|
|
<i class="fa-solid fa-gavel text-blue-500 text-xs"></i>
|
|
</div>
|
|
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Jenis Pelanggaran</span>
|
|
</div>
|
|
<p class="text-sm font-bold text-gray-900">{{ $violation->violationType->name ?? '-' }}</p>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100/50 rounded-xl border border-gray-100 p-4">
|
|
<div class="flex items-center gap-2.5 mb-2">
|
|
<div class="w-7 h-7 rounded-lg flex items-center justify-center {{ $violation->points >= 50 ? 'bg-red-50' : ($violation->points >= 15 ? 'bg-yellow-50' : 'bg-blue-50') }}">
|
|
<i class="fa-solid fa-star {{ $violation->points >= 50 ? 'text-red-500' : ($violation->points >= 15 ? 'text-yellow-500' : 'text-blue-500') }} text-xs"></i>
|
|
</div>
|
|
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Poin Pelanggaran</span>
|
|
</div>
|
|
<p class="text-sm font-black {{ $violation->points >= 50 ? 'text-red-600' : ($violation->points >= 15 ? 'text-yellow-600' : 'text-blue-600') }}">
|
|
+{{ $violation->points }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100/50 rounded-xl border border-gray-100 p-4">
|
|
<div class="flex items-center gap-2.5 mb-2">
|
|
<div class="w-7 h-7 rounded-lg bg-blue-50 flex items-center justify-center">
|
|
<i class="fa-solid fa-calendar text-blue-500 text-xs"></i>
|
|
</div>
|
|
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Tanggal</span>
|
|
</div>
|
|
<p class="text-sm font-bold text-gray-900">
|
|
{{ $violation->violation_date->format('d M Y') }}
|
|
@if($violation->violation_time)
|
|
<span class="text-gray-400">• {{ \Carbon\Carbon::parse($violation->violation_time)->format('H:i') }}</span>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100/50 rounded-xl border border-gray-100 p-4">
|
|
<div class="flex items-center gap-2.5 mb-2">
|
|
<div class="w-7 h-7 rounded-lg bg-blue-50 flex items-center justify-center">
|
|
<i class="fa-solid fa-scale-balanced text-blue-500 text-xs"></i>
|
|
</div>
|
|
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Sanksi</span>
|
|
</div>
|
|
<p class="text-sm font-semibold text-gray-900">{{ $violation->sanction ?? '—' }}</p>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100/50 rounded-xl border border-gray-100 p-4">
|
|
<div class="flex items-center gap-2.5 mb-2">
|
|
<div class="w-7 h-7 rounded-lg bg-blue-50 flex items-center justify-center">
|
|
<i class="fa-solid fa-location-dot text-blue-500 text-xs"></i>
|
|
</div>
|
|
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Lokasi</span>
|
|
</div>
|
|
<p class="text-sm font-semibold text-gray-900">{{ $violation->location ?? '—' }}</p>
|
|
</div>
|
|
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100/50 rounded-xl border border-gray-100 p-4">
|
|
<div class="flex items-center gap-2.5 mb-2">
|
|
<div class="w-7 h-7 rounded-lg bg-blue-50 flex items-center justify-center">
|
|
<i class="fa-solid fa-user-pen text-blue-500 text-xs"></i>
|
|
</div>
|
|
<span class="text-[11px] font-bold text-gray-400 uppercase tracking-wider">Dicatat Oleh</span>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
@if($violation->recorder)
|
|
<div class="w-7 h-7 rounded-full bg-gray-200 flex items-center justify-center">
|
|
<span class="text-[10px] font-bold text-gray-500">{{ strtoupper(substr($violation->recorder->name, 0, 1)) }}</span>
|
|
</div>
|
|
<p class="text-sm font-semibold text-gray-900">{{ $violation->recorder->name }}</p>
|
|
@else
|
|
<div class="w-7 h-7 rounded-full bg-blue-100 flex items-center justify-center">
|
|
<i class="fa-solid fa-rotate text-[10px] text-blue-500"></i>
|
|
</div>
|
|
<p class="text-sm font-semibold text-blue-600">E-Jurnal (Sinkron Otomatis)</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Deskripsi --}}
|
|
@if($violation->description)
|
|
<div class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-gray-100">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center shadow-sm">
|
|
<i class="fa-solid fa-note-sticky text-white text-sm"></i>
|
|
</div>
|
|
<h3 class="text-sm font-black text-gray-900">Catatan / Deskripsi</h3>
|
|
</div>
|
|
</div>
|
|
<div class="px-6 py-5">
|
|
<div class="bg-gray-50 rounded-xl border border-gray-100 p-4 sm:p-5">
|
|
<p class="text-sm text-gray-700 leading-relaxed whitespace-pre-line">{{ $violation->description }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- ===== KOLOM KANAN ===== --}}
|
|
<div class="space-y-5">
|
|
|
|
{{-- Status Card --}}
|
|
<div class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-gray-100">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
|
|
<i class="fa-solid fa-circle-info text-white text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-black text-gray-900">Status</h3>
|
|
<p class="text-xs text-gray-400">Riwayat siklus pelanggaran</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="mb-5 p-4 rounded-2xl {{ $violation->is_verified ? 'bg-gradient-to-br from-green-50 to-emerald-50/50 border border-green-200' : 'bg-gradient-to-br from-yellow-50 to-amber-50/50 border border-yellow-200' }}">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-xl {{ $violation->is_verified ? 'bg-green-100' : 'bg-yellow-100' }} flex items-center justify-center flex-shrink-0">
|
|
@if($violation->is_verified)
|
|
<i class="fa-solid fa-check-circle text-green-600 text-lg"></i>
|
|
@else
|
|
<i class="fa-solid fa-clock text-yellow-600 text-lg"></i>
|
|
@endif
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-black {{ $violation->is_verified ? 'text-green-800' : 'text-yellow-800' }}">
|
|
{{ $violation->is_verified ? 'Terverifikasi' : 'Menunggu Verifikasi' }}
|
|
</p>
|
|
@if($violation->is_verified)
|
|
<p class="text-xs text-green-600 mt-0.5">
|
|
oleh <span class="font-semibold">{{ $violation->verifier->name ?? '-' }}</span>
|
|
@if($violation->verified_at)
|
|
<span class="text-green-400">• {{ $violation->verified_at->format('d M Y H:i') }}</span>
|
|
@endif
|
|
</p>
|
|
@else
|
|
<p class="text-xs text-yellow-600 mt-0.5">Belum diverifikasi oleh petugas BK</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<div class="absolute left-[15px] top-3 bottom-3 w-0.5 bg-gray-200"></div>
|
|
<div class="space-y-5">
|
|
<div class="relative pl-9">
|
|
<div class="absolute left-0 top-[3px] w-[30px] flex justify-center">
|
|
<div class="w-[13px] h-[13px] rounded-full border-[3px] flex items-center justify-center"
|
|
style="border-color: {{ $violation->is_verified ? '#22c55e' : '#eab308' }}; background: white;">
|
|
<span class="w-[5px] h-[5px] rounded-full" style="background-color: {{ $violation->is_verified ? '#22c55e' : '#eab308' }}"></span>
|
|
</div>
|
|
</div>
|
|
<p class="text-sm font-bold {{ $violation->is_verified ? 'text-green-600' : 'text-yellow-600' }}">
|
|
{{ $violation->is_verified ? 'Diverifikasi' : 'Menunggu Verifikasi' }}
|
|
</p>
|
|
@if($violation->is_verified)
|
|
<p class="text-xs text-gray-400">{{ $violation->verified_at ? $violation->verified_at->format('d M Y H:i') : '' }}</p>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="relative pl-9">
|
|
<div class="absolute left-0 top-[3px] w-[30px] flex justify-center">
|
|
<div class="w-[13px] h-[13px] rounded-full border-[3px] border-blue-500 bg-white"></div>
|
|
</div>
|
|
<p class="text-sm font-bold text-gray-800">Dibuat</p>
|
|
<p class="text-xs text-gray-400">{{ $violation->created_at->format('d M Y H:i') }}</p>
|
|
</div>
|
|
|
|
@if($violation->updated_at != $violation->created_at)
|
|
<div class="relative pl-9">
|
|
<div class="absolute left-0 top-[3px] w-[30px] flex justify-center">
|
|
<div class="w-[13px] h-[13px] rounded-full border-[3px] border-gray-300 bg-white"></div>
|
|
</div>
|
|
<p class="text-sm font-bold text-gray-500">Terakhir Diubah</p>
|
|
<p class="text-xs text-gray-400">{{ $violation->updated_at->format('d M Y H:i') }}</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Evidence Photos --}}
|
|
@if($violation->evidences->count() > 0)
|
|
<div class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between gap-3">
|
|
<div class="flex items-center gap-2.5 min-w-0">
|
|
<div class="w-9 h-9 rounded-2xl bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center flex-shrink-0">
|
|
<i class="fa-solid fa-camera text-white text-sm"></i>
|
|
</div>
|
|
<h3 class="text-sm font-black text-gray-900 truncate">Bukti Foto</h3>
|
|
</div>
|
|
<span class="inline-flex items-center px-2 py-0.5 text-[11px] font-bold bg-gray-100 text-gray-500 rounded-full whitespace-nowrap flex-shrink-0">
|
|
<i class="fa-solid fa-image mr-1"></i>
|
|
{{ $violation->evidences->count() }}
|
|
</span>
|
|
</div>
|
|
<div class="p-4 sm:p-5">
|
|
<div class="evidence-grid grid grid-cols-2 gap-2.5">
|
|
@foreach($violation->evidences as $evidence)
|
|
<a href="{{ $evidence->url }}" target="_blank" rel="noopener noreferrer"
|
|
class="group relative block aspect-square rounded-xl overflow-hidden border border-gray-200 bg-gray-50 shadow-sm">
|
|
<img src="{{ $evidence->url }}"
|
|
class="w-full h-full object-cover"
|
|
alt="{{ $evidence->original_name }}">
|
|
<div class="evidence-overlay absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center opacity-0 group-hover:opacity-100">
|
|
<span class="inline-flex items-center gap-1 text-white text-[11px] font-medium bg-black/50 px-3 py-1.5 rounded-lg backdrop-blur-sm">
|
|
<i class="fa-solid fa-expand"></i>
|
|
Perbesar
|
|
</span>
|
|
</div>
|
|
@if($loop->first && $violation->evidences->count() > 1)
|
|
<span class="absolute top-2 left-2 text-[10px] font-medium text-white bg-black/40 px-2 py-0.5 rounded-md backdrop-blur-sm">{{ $loop->iteration }} of {{ $violation->evidences->count() }}</span>
|
|
@endif
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Link to Student Profile --}}
|
|
<a href="{{ route('students.show', $violation->student_id) }}"
|
|
class="flex items-center justify-between gap-3 p-4 bg-blue-50/60 border border-blue-100 rounded-3xl hover:bg-blue-50 transition group">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<div class="w-10 h-10 rounded-2xl bg-blue-100 flex items-center justify-center flex-shrink-0">
|
|
<i class="fa-solid fa-user-graduate text-blue-600 text-sm"></i>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-black text-blue-700">Lihat Profil Siswa</p>
|
|
<p class="text-[11px] text-blue-500 mt-0.5 truncate">{{ $violation->student->full_name ?? '' }}</p>
|
|
</div>
|
|
</div>
|
|
<i class="fa-solid fa-arrow-right text-blue-400 group-hover:text-blue-600 transition flex-shrink-0"></i>
|
|
</a>
|
|
|
|
{{-- Back to List --}}
|
|
<a href="{{ route('violations.index') }}"
|
|
class="flex items-center justify-center gap-2 p-3.5 text-sm font-semibold text-gray-500 bg-white border border-gray-200 rounded-3xl hover:bg-gray-50 hover:text-gray-700 transition group">
|
|
<i class="fa-solid fa-arrow-left text-xs"></i>
|
|
Kembali ke Data Pelanggaran
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|