{{-- csat/survey.blade.php --}}
<!DOCTYPE html>
<html lang="id">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Penilaian Layanan</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<style>body{background:linear-gradient(135deg,#1e2a3b,#1a56db);min-height:100vh;display:flex;align-items:center;justify-content:center}.star-btn{font-size:40px;background:none;border:none;cursor:pointer;transition:.2s;filter:grayscale(1)}.star-btn.active,.star-btn:hover{filter:none;transform:scale(1.15)}</style>
</head>
<body>
<div class="bg-white rounded-4 p-4 shadow-lg" style="max-width:480px;width:100%">
  <div class="text-center mb-4">
    <div style="width:60px;height:60px;background:#1a56db;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:700;margin:0 auto 12px">J</div>
    <h5 class="fw-bold">Penilaian Layanan</h5>
    <p class="text-muted small">Tiket #{{ $survey->ticket->ticket_number }}: {{ $survey->ticket->subject }}</p>
  </div>
  <form action="{{ route('csat.submit',$survey->token) }}" method="POST">@csrf
    <div class="text-center mb-4">
      <p class="fw-semibold mb-3">Seberapa puas Anda dengan layanan kami?</p>
      <div class="d-flex justify-content-center gap-1" id="starContainer">
        @for($i=1;$i<=5;$i++)
        <button type="button" class="star-btn" data-val="{{ $i }}" onclick="selectStar({{ $i }})">⭐</button>
        @endfor
      </div>
      <input type="hidden" name="rating" id="ratingInput" required>
      <div id="ratingLabel" class="text-muted small mt-2"></div>
    </div>
    <div class="mb-3">
      <label class="form-label fw-semibold">Feedback (opsional)</label>
      <textarea name="feedback" class="form-control" rows="3" placeholder="Ceritakan pengalaman Anda..."></textarea>
    </div>
    <button type="submit" class="btn btn-primary w-100 fw-semibold" id="submitBtn" disabled>Kirim Penilaian</button>
  </form>
</div>
<script>
const labels = {1:'Sangat Tidak Puas',2:'Tidak Puas',3:'Cukup',4:'Puas',5:'Sangat Puas'};
function selectStar(val) {
  document.getElementById('ratingInput').value = val;
  document.getElementById('submitBtn').disabled = false;
  document.getElementById('ratingLabel').textContent = labels[val];
  document.querySelectorAll('.star-btn').forEach((btn,i) => btn.classList.toggle('active', i < val));
}
</script>
</body></html>
