@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 }}">&#9733;</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