116 lines
5.0 KiB
PHP
116 lines
5.0 KiB
PHP
@extends('layouts.dashboard')
|
||
|
||
@section('content')
|
||
<div class="container py-5">
|
||
<div class="text-center mb-4">
|
||
<h3 class="fw-bold text-primary">Penilaian Pelayanan Perpustakaan</h3>
|
||
<p class="text-muted">Terima kasih telah meminjam buku. Silakan beri penilaian terhadap pelayanan kami 😊</p>
|
||
</div>
|
||
|
||
<div class="row justify-content-center">
|
||
<div class="col-lg-6 col-md-8 col-sm-10">
|
||
<div class="card shadow border-0 rounded-4">
|
||
<div class="card-body p-4">
|
||
|
||
@if (session('success'))
|
||
<div class="alert alert-success">{{ session('success') }}</div>
|
||
@endif
|
||
@if (session('error'))
|
||
<div class="alert alert-danger">{{ session('error') }}</div>
|
||
@endif
|
||
@if ($errors->any())
|
||
<div class="alert alert-danger">
|
||
<ul class="mb-0">
|
||
@foreach ($errors->all() as $error)
|
||
<li>{{ $error }}</li>
|
||
@endforeach
|
||
</ul>
|
||
</div>
|
||
@endif
|
||
|
||
<div class="mb-4 text-center">
|
||
<h5 class="fw-bold">{{ $transaction->koleksi->title ?? '-' }}</h5>
|
||
<p class="text-muted mb-0">Tanggal Pinjam: {{ date('d M Y', strtotime($transaction->tanggal_pinjam)) }}</p>
|
||
<p class="text-muted">Tanggal Kembali: {{ date('d M Y', strtotime($transaction->tanggal_kembali)) }}</p>
|
||
</div>
|
||
|
||
@if(isset($existingRating) && $existingRating)
|
||
<div class="alert alert-info text-center">
|
||
Anda sudah memberi penilaian untuk transaksi ini. Terima kasih!<br>
|
||
<strong>Rating Anda:</strong> {{ $existingRating->rating }} ★<br>
|
||
<strong>Feedback:</strong> {{ $existingRating->feedback ?? '-' }}
|
||
</div>
|
||
@else
|
||
<form action="{{ route('user.rating.store', $transaction->id) }}" method="POST">
|
||
@csrf
|
||
|
||
<div class="mb-4 text-center">
|
||
<label class="form-label fw-semibold d-block mb-2">Beri Rating Anda:</label>
|
||
<div class="star-rating-modern d-flex justify-content-center" style="gap:0.5rem;">
|
||
@for($i = 5; $i >= 1; $i--)
|
||
<span class="star" data-value="{{ $i }}">★</span>
|
||
@endfor
|
||
</div>
|
||
<input type="hidden" name="rating" id="rating" value="{{ old('rating') }}">
|
||
<small class="text-muted d-block mt-2">Klik bintang untuk memberi nilai (1–5)</small>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<label for="feedback" class="form-label fw-semibold">Feedback Anda (Opsional):</label>
|
||
<textarea name="feedback" id="feedback" rows="4" class="form-control"
|
||
placeholder="Tulis saran, kritik, atau kesan Anda...">{{ old('feedback') }}</textarea>
|
||
</div>
|
||
|
||
<div class="d-flex justify-content-between">
|
||
<a href="{{ route('user.peminjaman.index') }}" class="btn btn-outline-secondary">← Kembali</a>
|
||
<button type="submit" class="btn btn-primary">Kirim Penilaian</button>
|
||
</div>
|
||
</form>
|
||
@endif
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
const stars = document.querySelectorAll('.star-rating-modern .star');
|
||
const ratingInput = document.getElementById('rating');
|
||
|
||
function highlightStars(rating) {
|
||
stars.forEach(star => {
|
||
star.style.color = star.dataset.value <= rating ? '#FF6600' : '#ddd';
|
||
});
|
||
}
|
||
|
||
stars.forEach(star => {
|
||
star.addEventListener('mouseover', () => highlightStars(star.dataset.value));
|
||
star.addEventListener('mouseout', () => highlightStars(ratingInput.value || 0));
|
||
star.addEventListener('click', () => {
|
||
ratingInput.value = star.dataset.value;
|
||
highlightStars(ratingInput.value);
|
||
});
|
||
});
|
||
|
||
const oldRating = ratingInput.value;
|
||
if(oldRating) highlightStars(oldRating);
|
||
</script>
|
||
|
||
<style>
|
||
.star-rating-modern .star {
|
||
font-size: 2.5rem;
|
||
cursor: pointer;
|
||
transition: transform 0.2s, color 0.2s;
|
||
color: #ddd;
|
||
}
|
||
.star-rating-modern .star:hover {
|
||
transform: scale(1.4);
|
||
color: #FF6600;
|
||
}
|
||
@media (max-width: 576px) {
|
||
.star-rating-modern .star { font-size: 2rem; }
|
||
}
|
||
</style>
|
||
@endsection
|