<!doctype html>
<html lang="{{ app()->getLocale() }}" dir="{{ in_array(app()->getLocale(), ['ar']) ? 'rtl' : 'ltr' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Customer Satisfaction Survey</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <style>
        .vrc-stars { font-size:34px; direction:ltr; }
        .vrc-star { cursor:pointer; color:#ddd; }
        .vrc-star.on { color:#f5a623; }
        .vrc-nps label { display:inline-block; width:34px; text-align:center; margin:2px; }
        .vrc-nps input { margin-right:3px; }
    </style>
</head>
<body class="bg-light">
<div class="container" style="max-width:620px; margin-top:30px;">
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white"><h4 class="mb-0">Customer Satisfaction Survey</h4></div>
        <div class="card-body">
            @if($survey->submitted_at)
                <div class="text-center" style="padding:24px 0;">
                    <div style="font-size:46px; color:#28a745;">&#10003;</div>
                    <h5 class="mt-2">Thank you for your feedback!</h5>
                    <p class="text-muted">Your response has been recorded.</p>
                </div>
            @else
                <form method="POST" action="{{ route('vrc.portal.survey.submit', $survey->token) }}">
                    @csrf

                    <div class="form-group">
                        <label>How satisfied were you with your service?</label>
                        <div class="vrc-stars" id="vrc-stars">
                            @for ($i = 1; $i <= 5; $i++)
                                <span class="vrc-star" data-val="{{ $i }}">&#9733;</span>
                            @endfor
                        </div>
                        <input type="hidden" name="score" id="vrc-score" value="{{ old('score') }}" required>
                        @error('score')<small class="text-danger d-block">{{ $message }}</small>@enderror
                    </div>

                    <div class="form-group vrc-nps">
                        <label>How likely are you to recommend us? (0 = not likely, 10 = very likely)</label>
                        <div>
                            @for ($n = 0; $n <= 10; $n++)
                                <label>
                                    <input type="radio" name="nps" value="{{ $n }}" {{ (string) old('nps') === (string) $n ? 'checked' : '' }}>
                                    {{ $n }}
                                </label>
                            @endfor
                        </div>
                        @error('nps')<small class="text-danger d-block">{{ $message }}</small>@enderror
                    </div>

                    <div class="form-group">
                        <label class="d-block">Would you recommend us?</label>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="would_recommend" id="rec-yes" value="1" {{ old('would_recommend') === '1' ? 'checked' : '' }}>
                            <label class="form-check-label" for="rec-yes">Yes</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="would_recommend" id="rec-no" value="0" {{ old('would_recommend') === '0' ? 'checked' : '' }}>
                            <label class="form-check-label" for="rec-no">No</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="comments">Comments (optional)</label>
                        <textarea name="comments" id="comments" rows="3" class="form-control">{{ old('comments') }}</textarea>
                        @error('comments')<small class="text-danger d-block">{{ $message }}</small>@enderror
                    </div>

                    <button type="submit" class="btn btn-primary btn-block">Submit</button>
                </form>
            @endif
        </div>
    </div>
    <p class="text-center text-muted mt-3" style="font-size:12px;">{{ config('app.name') }}</p>
</div>

@unless($survey->submitted_at)
<script>
(function () {
    var stars = document.querySelectorAll('#vrc-stars .vrc-star');
    var field = document.getElementById('vrc-score');
    function paint(val) {
        stars.forEach(function (s) {
            s.classList.toggle('on', parseInt(s.getAttribute('data-val'), 10) <= val);
        });
    }
    stars.forEach(function (s) {
        s.addEventListener('click', function () {
            var val = parseInt(s.getAttribute('data-val'), 10);
            field.value = val;
            paint(val);
        });
    });
    if (field.value) { paint(parseInt(field.value, 10)); }
})();
</script>
@endunless
</body>
</html>
