@extends('user.layouts.app')

@section('content')
<div class="max-w-3xl mx-auto survey-take-page space-y-5">

    {{-- ── Hero ── --}}
    <div class="survey-hero rounded-2xl p-6 sm:p-7 text-white shadow-xl relative overflow-hidden">
        <span class="survey-hero-glow"></span>

        <div class="relative flex items-start justify-between gap-3">
            <div>
                @if($survey->category)
                    <span class="text-xs uppercase tracking-widest font-bold text-white/80">{{ $survey->category }}</span>
                @endif
                <h2 class="text-2xl font-extrabold mt-1">{{ $survey->title }}</h2>
                @if($survey->description)
                    <p class="text-sm text-white/85 mt-2 max-w-xl">{{ $survey->description }}</p>
                @endif
                <div class="flex items-center gap-4 mt-3 text-xs">
                    <span class="inline-flex items-center gap-1.5 text-white/90 font-semibold">
                        <i class="mgc_gift_2_line text-sm"></i>
                        {{ format_currency($survey->reward) }} reward
                    </span>
                    <span class="opacity-50">•</span>
                    <span class="inline-flex items-center gap-1.5 text-white/90 font-semibold">
                        <i class="mgc_time_line text-sm"></i>
                        ~{{ $survey->estimated_minutes }} min
                    </span>
                </div>
            </div>
            <a href="{{ route('user.surveys.index') }}" title="Exit"
               class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/15 hover:bg-white/25 transition">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"
                     stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
                    <path d="M18 6 6 18M6 6l12 12"></path>
                </svg>
            </a>
        </div>

        {{-- Progress bar --}}
        <div class="relative mt-6">
            <div class="flex items-center justify-between text-xs mb-2">
                <span class="text-white/80">Progress</span>
                <span class="text-white/80"><span id="answered">0</span> of {{ $survey->questions->count() }} answered</span>
            </div>
            <div class="h-2 rounded-full bg-white/20 overflow-hidden">
                <div id="progressBar" class="h-full rounded-full bg-white transition-all duration-300" style="width: 0%;"></div>
            </div>
        </div>
    </div>

    @if($errors->any())
        <div class="rounded-lg border border-rose-200 bg-rose-50 dark:bg-rose-500/10 dark:border-rose-500/20 p-4">
            <p class="text-sm font-semibold text-rose-700 dark:text-rose-300 mb-1">Please fix the highlighted questions below.</p>
            <p class="text-xs text-rose-600 dark:text-rose-400">{{ count($errors->messages()) }} {{ \Illuminate\Support\Str::plural('issue', count($errors->messages())) }} to address.</p>
        </div>
    @endif

    {{-- ── Form ── --}}
    <form id="surveyForm" method="POST" action="{{ route('user.surveys.submit', $survey->id) }}" class="space-y-4">
        @csrf

        @foreach($survey->questions as $i => $q)
            @php
                $key       = 'q_'.$q->id;
                $hasError  = $errors->has($key);
                $oldValue  = old($key);
            @endphp
            <div class="card question-card" data-key="{{ $key }}" data-type="{{ $q->type }}" data-required="{{ $q->required ? '1' : '0' }}">
                <div class="card-body p-5 sm:p-6">

                    {{-- Question header --}}
                    <div class="flex items-start gap-3 mb-4">
                        <span class="shrink-0 w-8 h-8 rounded-full bg-fuchsia-100 dark:bg-fuchsia-500/15 text-fuchsia-600 font-bold flex items-center justify-center text-sm">
                            {{ $i + 1 }}
                        </span>
                        <div class="flex-1 min-w-0">
                            <p class="font-semibold text-gray-800 dark:text-gray-100 leading-snug">
                                {{ $q->question }}
                                @if($q->required)
                                    <span class="text-rose-500">*</span>
                                @endif
                            </p>
                            @if($q->type === 'checkbox')
                                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Select all that apply</p>
                            @endif
                        </div>
                    </div>

                    {{-- Input by type --}}
                    @switch($q->type)

                        @case('radio')
                            <div class="space-y-2">
                                @foreach($q->options ?? [] as $opt)
                                    <label class="opt-choice flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition
                                                  {{ $oldValue === $opt ? 'border-fuchsia-500 bg-fuchsia-50 dark:bg-fuchsia-500/10' : 'border-gray-200 dark:border-gray-700 hover:border-fuchsia-300' }}">
                                        <input type="radio" name="{{ $key }}" value="{{ $opt }}"
                                               class="w-4 h-4 text-fuchsia-500 focus:ring-fuchsia-500"
                                               {{ $oldValue === $opt ? 'checked' : '' }}>
                                        <span class="text-sm text-gray-800 dark:text-gray-100">{{ $opt }}</span>
                                    </label>
                                @endforeach
                            </div>
                            @break

                        @case('checkbox')
                            @php $oldArr = is_array($oldValue) ? $oldValue : []; @endphp
                            <div class="space-y-2">
                                @foreach($q->options ?? [] as $opt)
                                    @php $checked = in_array($opt, $oldArr, true); @endphp
                                    <label class="opt-choice flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition
                                                  {{ $checked ? 'border-fuchsia-500 bg-fuchsia-50 dark:bg-fuchsia-500/10' : 'border-gray-200 dark:border-gray-700 hover:border-fuchsia-300' }}">
                                        <input type="checkbox" name="{{ $key }}[]" value="{{ $opt }}"
                                               class="w-4 h-4 text-fuchsia-500 rounded focus:ring-fuchsia-500"
                                               {{ $checked ? 'checked' : '' }}>
                                        <span class="text-sm text-gray-800 dark:text-gray-100">{{ $opt }}</span>
                                    </label>
                                @endforeach
                            </div>
                            @break

                        @case('select')
                            <select name="{{ $key }}"
                                    class="w-full h-11 px-4 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40 focus:border-fuchsia-500 transition">
                                <option value="" {{ !$oldValue ? 'selected' : '' }}>Choose an option…</option>
                                @foreach($q->options ?? [] as $opt)
                                    <option value="{{ $opt }}" {{ $oldValue === $opt ? 'selected' : '' }}>{{ $opt }}</option>
                                @endforeach
                            </select>
                            @break

                        @case('text')
                            <input type="text" name="{{ $key }}" maxlength="500"
                                   value="{{ $oldValue }}"
                                   placeholder="{{ $q->placeholder ?? 'Your answer…' }}"
                                   class="w-full h-11 px-4 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40 focus:border-fuchsia-500 transition">
                            @break

                        @case('textarea')
                            <textarea name="{{ $key }}" rows="4" maxlength="5000"
                                      placeholder="{{ $q->placeholder ?? 'Share your thoughts…' }}"
                                      class="w-full px-4 py-3 rounded-lg border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-fuchsia-500/40 focus:border-fuchsia-500 transition resize-none">{{ $oldValue }}</textarea>
                            @break

                        @case('rating')
                            <div class="rating-group flex items-center gap-2" data-key="{{ $key }}">
                                @for($s = 1; $s <= 5; $s++)
                                    <button type="button"
                                            data-value="{{ $s }}"
                                            class="star-btn flex items-center justify-center w-12 h-12 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-amber-400 transition text-gray-300 hover:text-amber-400"
                                            aria-label="Rate {{ $s }} of 5">
                                        <svg viewBox="0 0 24 24" fill="currentColor" class="w-7 h-7">
                                            <polygon points="12 2 15 8.5 22 9.3 17 14 18.2 21 12 17.8 5.8 21 7 14 2 9.3 9 8.5 12 2"/>
                                        </svg>
                                    </button>
                                @endfor
                                <input type="hidden" name="{{ $key }}" value="{{ $oldValue }}">
                                <span class="ml-3 text-sm text-gray-500 dark:text-gray-400">
                                    <span class="rating-label">Tap a star to rate</span>
                                </span>
                            </div>
                            @break

                        @case('scale')
                            <div class="scale-group" data-key="{{ $key }}">
                                <div class="flex flex-wrap gap-2">
                                    @for($n = 1; $n <= 10; $n++)
                                        <button type="button"
                                                data-value="{{ $n }}"
                                                class="scale-btn flex-1 min-w-[40px] h-11 rounded-lg border-2 border-gray-200 dark:border-gray-700 hover:border-fuchsia-500 text-gray-700 dark:text-gray-200 font-semibold transition">
                                            {{ $n }}
                                        </button>
                                    @endfor
                                </div>
                                <div class="flex justify-between text-[11px] text-gray-400 mt-2 px-1">
                                    <span>Not at all likely</span>
                                    <span>Extremely likely</span>
                                </div>
                                <input type="hidden" name="{{ $key }}" value="{{ $oldValue }}">
                            </div>
                            @break

                    @endswitch

                    @if($hasError)
                        <p class="mt-3 text-sm text-rose-600 dark:text-rose-400 font-medium">
                            <i class="mgc_alert_circle_line"></i> {{ $errors->first($key) }}
                        </p>
                    @endif
                </div>
            </div>
        @endforeach

        {{-- Submit --}}
        <div class="card sticky bottom-4 z-10 shadow-2xl">
            <div class="card-body p-5 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">Reward on completion</p>
                    <p class="text-xl font-extrabold text-fuchsia-600 dark:text-fuchsia-400">{{ format_currency($survey->reward) }}</p>
                </div>
                <button type="submit"
                        class="inline-flex items-center justify-center gap-2 px-7 py-3 px-3 rounded-xl bg-primary hover:bg-primary text-white font-bold shadow-lg shadow-fuchsia-500/25 transition">
                    <i class="mgc_check_circle_line text-base"></i>
                    Submit &amp; Get Paid
                </button>
            </div>
        </div>
    </form>

</div>

<style>
    .survey-take-page .survey-hero {
        background: linear-gradient(135deg, #a21caf 0%, #c026d3 55%, #ec4899 100%);
    }
    .survey-take-page .survey-hero-glow {
        position: absolute; top: -80px; right: -80px;
        width: 260px; height: 260px; border-radius: 9999px; pointer-events: none;
        background: radial-gradient(circle, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 70%);
    }
    .survey-take-page .opt-choice:has(input:checked) {
        border-color: #d946ef; background: rgba(217,70,239,.06);
    }
    .dark .survey-take-page .opt-choice:has(input:checked) { background: rgba(217,70,239,.12); }

    /* Rating + Scale active state */
    .survey-take-page .star-btn.active,
    .survey-take-page .star-btn:hover { color: #f59e0b; border-color: #f59e0b; background: rgba(245,158,11,.05); }
    .survey-take-page .scale-btn.active { background: #d946ef; border-color: #d946ef; color: #fff; }
</style>

<script>
(function () {
    const form     = document.getElementById('surveyForm');
    const answered = document.getElementById('answered');
    const progress = document.getElementById('progressBar');
    const cards    = Array.from(document.querySelectorAll('.question-card'));

    function isAnswered(card) {
        const type = card.dataset.type;
        if (type === 'radio')    return !!card.querySelector('input[type="radio"]:checked');
        if (type === 'checkbox') return !!card.querySelector('input[type="checkbox"]:checked');
        if (type === 'select')   {
            const v = card.querySelector('select');
            return v && v.value !== '';
        }
        if (type === 'text' || type === 'textarea') {
            const v = card.querySelector('[name]');
            return v && v.value.trim() !== '';
        }
        if (type === 'rating' || type === 'scale') {
            const v = card.querySelector('input[type="hidden"]');
            return v && v.value !== '';
        }
        return false;
    }

    function updateProgress() {
        const done = cards.filter(isAnswered).length;
        answered.textContent = done;
        progress.style.width = (done / cards.length * 100) + '%';
    }

    // Highlight selected option on change for radio/checkbox
    form.addEventListener('change', updateProgress);
    form.addEventListener('input',  updateProgress);

    // Rating widget
    document.querySelectorAll('.rating-group').forEach(grp => {
        const stars  = grp.querySelectorAll('.star-btn');
        const hidden = grp.querySelector('input[type="hidden"]');
        const label  = grp.querySelector('.rating-label');
        const captions = { 1: 'Poor', 2: 'Fair', 3: 'Good', 4: 'Great', 5: 'Excellent' };

        function paint(value) {
            stars.forEach(s => {
                const n = parseInt(s.dataset.value, 10);
                s.classList.toggle('active', n <= value);
            });
            label.textContent = captions[value] || 'Tap a star to rate';
        }

        if (hidden.value) paint(parseInt(hidden.value, 10));

        stars.forEach(s => {
            s.addEventListener('click', () => {
                hidden.value = s.dataset.value;
                paint(parseInt(s.dataset.value, 10));
                updateProgress();
            });
        });
    });

    // Scale widget
    document.querySelectorAll('.scale-group').forEach(grp => {
        const btns   = grp.querySelectorAll('.scale-btn');
        const hidden = grp.querySelector('input[type="hidden"]');

        function paint(value) {
            btns.forEach(b => {
                b.classList.toggle('active', parseInt(b.dataset.value, 10) === value);
            });
        }
        if (hidden.value) paint(parseInt(hidden.value, 10));

        btns.forEach(b => {
            b.addEventListener('click', () => {
                hidden.value = b.dataset.value;
                paint(parseInt(b.dataset.value, 10));
                updateProgress();
            });
        });
    });

    updateProgress();
})();
</script>
@endsection