@extends('layouts.survey')

@section('title', $project->name . ' — Feedback')

@section('trail')
    <div class="trail-item done">
        <span class="num"><i class="fas fa-check" style="font-size:.55rem;"></i></span>
        <span>Who Are You?</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item done">
        <span class="num"><i class="fas fa-check" style="font-size:.55rem;"></i></span>
        <span>Language</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item active">
        <span class="num">3</span>
        <span>Feedback</span>
    </div>
    <i class="fas fa-chevron-right trail-chevron"></i>
    <div class="trail-item">
        <span class="num">4</span>
        <span>Thank You</span>
    </div>
@endsection

@push('styles')
<style>
/* ── Progress Bar ───────────────────────────────────────────────── */
.progress-wrap {
    background: #fff; border: 1.5px solid var(--gray-200);
    border-radius: 18px; padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem; box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.progress-header {
    display: flex; justify-content: space-between;
    font-size: .82rem; color: var(--gray-500); margin-bottom: .75rem;
}
.progress-header strong { color: var(--gray-900); font-weight: 800; }
.progress-bar-bg { height: 8px; background: var(--gray-200); border-radius: 20px; overflow: hidden; }
.progress-bar-fill {
    height: 100%; background: linear-gradient(90deg, var(--green), #34d399);
    border-radius: 20px; transition: width .4s ease;
}
.step-dots { display: flex; gap: .4rem; justify-content: center; margin-top: .75rem; }
.step-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gray-200); transition: background .2s, transform .2s; cursor: pointer;
}
.step-dot.active { background: var(--green); transform: scale(1.3); }
.step-dot.done   { background: #34d399; }

/* ── Question Card ──────────────────────────────────────────────── */
.question-slide { display: none; }
.question-slide.active { display: block; animation: slideIn .3s ease; }
.info-slide { display: none; }
.info-slide.active { display: block; animation: slideIn .3s ease; }
@keyframes slideIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

.q-card {
    background: #fff; border: 1.5px solid var(--gray-200);
    border-radius: 18px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.04); margin-bottom: 1.25rem;
}
.q-card-top {
    padding: 1.5rem 1.5rem 0;
    display: flex; align-items: flex-start; gap: 1rem;
}
.q-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--green-lt); color: var(--green);
    font-size: .82rem; font-weight: 800; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.q-type-badge {
    font-size: .68rem; font-weight: 700; padding: .18rem .55rem;
    border-radius: 20px; flex-shrink: 0; margin-top: .1rem;
}
.q-type-radio    { background: #eff6ff; color: #2563eb; }
.q-type-checkbox { background: #f5f3ff; color: #7c3aed; }
.q-type-text     { background: #fff7ed; color: #c2410c; }
.q-type-idea     { background: #f0fdf4; color: #15803d; }
.q-text { font-size: 1rem; font-weight: 700; color: var(--gray-900); line-height: 1.55; flex: 1; }
.q-text-bn { font-size: .88rem; color: var(--gray-500); margin-top: .3rem; line-height: 1.6; }
.q-options { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; }

.opt-item {
    display: flex; align-items: center; gap: .9rem;
    padding: .75rem 1rem; border-radius: 10px;
    border: 1.5px solid var(--gray-200); cursor: pointer;
    transition: border-color .15s, background .15s;
}
.opt-item:hover { border-color: var(--green); background: var(--green-lt); }
.opt-item input[type=radio],
.opt-item input[type=checkbox] { display: none; }
.opt-bullet {
    width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--gray-300); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.opt-check {
    width: 20px; height: 20px; border-radius: 5px;
    border: 2px solid var(--gray-300); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.opt-item.selected .opt-bullet {
    border-color: var(--green); background: var(--green);
    box-shadow: 0 0 0 3px rgba(0,166,81,.15);
}
.opt-item.selected .opt-bullet::after {
    content: ''; width: 8px; height: 8px; background: #fff; border-radius: 50%;
}
.opt-item.selected .opt-check { border-color: var(--green); background: var(--green); }
.opt-item.selected .opt-check::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free';
    font-weight: 900; color: #fff; font-size: .65rem;
}
.opt-item.selected { border-color: var(--green); background: var(--green-lt); }
.opt-label { font-size: .88rem; font-weight: 500; color: var(--gray-700); flex: 1; }

.q-textarea {
    padding: .85rem 1rem; border: 1.5px solid var(--gray-300);
    border-radius: 10px; width: 100%; resize: vertical; min-height: 110px;
    font-family: inherit; font-size: .88rem; color: var(--gray-900);
    background: var(--gray-50); outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.q-textarea:focus {
    border-color: var(--green); background: #fff;
    box-shadow: 0 0 0 3px rgba(0,166,81,.1);
}
.idea-hint {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #bbf7d0; border-radius: 10px;
    padding: .85rem 1rem; margin-bottom: .75rem;
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .8rem; color: #15803d; line-height: 1.6;
}
.idea-hint i { margin-top: 1px; flex-shrink: 0; }

/* ── Navigation ─────────────────────────────────────────────────── */
.q-nav {
    display: flex; justify-content: space-between; align-items: center; padding: 1rem 0;
}
.btn-prev, .btn-next, .btn-submit {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .7rem 1.4rem; border-radius: 10px;
    font-size: .88rem; font-weight: 700; font-family: inherit;
    cursor: pointer; border: none; transition: background .15s, transform .1s;
}
.btn-prev { background: var(--gray-100); color: var(--gray-700); border: 1.5px solid var(--gray-200); }
.btn-prev:hover { background: var(--gray-200); }
.btn-prev:disabled { opacity: .4; cursor: not-allowed; }
.btn-next { background: var(--green); color: #fff; box-shadow: 0 3px 12px rgba(0,166,81,.3); }
.btn-next:hover { background: var(--green-dark); }
.btn-next:disabled { opacity: .5; cursor: not-allowed; }
.btn-submit { background: var(--green); color: #fff; box-shadow: 0 3px 12px rgba(0,166,81,.3); }
.btn-submit:hover { background: var(--green-dark); }
.q-nav-center { font-size: .78rem; color: var(--gray-400); font-weight: 600; }

/* ── User Info Form ──────────────────────────────────────────────── */
.section-divider {
    display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0;
}
.section-divider::before, .section-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--gray-200);
}
.section-divider span {
    font-size: .72rem; font-weight: 700; color: var(--gray-400);
    letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: .8rem; font-weight: 700; color: var(--gray-700); margin-bottom: .35rem; }
.form-label .opt-tag { font-weight: 400; color: var(--gray-400); margin-left: .25rem; }
.form-input, .form-select {
    width: 100%; padding: .65rem .9rem;
    border: 1.5px solid var(--gray-300); border-radius: 9px;
    font-size: .88rem; font-family: inherit; color: var(--gray-900);
    background: var(--gray-50); outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.form-input:focus, .form-select:focus {
    border-color: var(--green); background: #fff;
    box-shadow: 0 0 0 3px rgba(0,166,81,.1);
}
.form-input.is-invalid { border-color: #dc2626; }
.invalid-msg { font-size: .75rem; color: #dc2626; margin-top: .25rem; display: block; }
.form-select { cursor: pointer; }

.consent-row {
    display: flex; align-items: flex-start; gap: .75rem;
    padding: 1rem; background: var(--gray-50); border-radius: 10px;
    border: 1.5px solid var(--gray-200); margin-bottom: .5rem;
    cursor: pointer;
}
.consent-check {
    width: 20px; height: 20px; border-radius: 5px;
    border: 2px solid var(--gray-300); flex-shrink: 0; margin-top: .1rem;
    display: flex; align-items: center; justify-content: center;
    transition: border-color .15s, background .15s;
}
.consent-row.checked .consent-check {
    border-color: var(--green); background: var(--green);
}
.consent-row.checked .consent-check::after {
    content: '\f00c'; font-family: 'Font Awesome 6 Free';
    font-weight: 900; color: #fff; font-size: .65rem;
}
.consent-text { font-size: .82rem; color: var(--gray-700); line-height: 1.6; }

.privacy-note {
    background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 10px;
    padding: .85rem 1rem; margin-bottom: 1.25rem;
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: .8rem; color: #166534; line-height: 1.6;
}
.privacy-note i { flex-shrink: 0; margin-top: .1rem; }

@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
</style>
@endpush

@section('content')
@php
    $totalQ       = count($questions);
    $infoBefore   = $infoPlacement === 'before';
    // Total "slides" = totalQ + 1 (user-info). The user-info index:
    $infoSlideIdx = $infoBefore ? 0 : $totalQ + 1;
@endphp

<form method="POST"
      action="{{ route('public.feedback.store', [$project->slug, $respondentType->slug, $language]) }}"
      id="pubSurveyForm">
@csrf

{{-- ── Progress Bar ─────────────────────────────────────────────── --}}
<div class="progress-wrap">
    <div class="progress-header">
        <span>
            @if($infoBefore)
                Step <strong id="currentNum">Your Info</strong>
            @else
                Question <strong id="currentNum">1</strong> of <strong>{{ $totalQ }}</strong>
            @endif
        </span>
        <span id="progressPct">0% complete</span>
    </div>
    <div class="progress-bar-bg">
        <div class="progress-bar-fill" id="progressFill" style="width:0%;"></div>
    </div>
    <div class="step-dots">
        @if($infoBefore)
            <div class="step-dot active" id="dot-info" onclick="goToInfo()" title="Your Info"></div>
        @endif
        @for($i = 1; $i <= $totalQ; $i++)
            <div class="step-dot {{ (!$infoBefore && $i === 1) ? 'active' : '' }}" id="dot-{{ $i }}"
                 onclick="goToQuestion({{ $i }})"></div>
        @endfor
        @if(!$infoBefore)
            <div class="step-dot" id="dot-info" onclick="goToInfo()" title="Your Info"></div>
        @endif
    </div>
</div>

{{-- ── User Info Slide (BEFORE questions if configured) ────────── --}}
@if($infoBefore)
<div class="info-slide active" id="slide-info">
    @include('public.feedback._user_info_form', ['language' => $language])

    <div class="q-nav">
        <span></span>
        <button type="button" class="btn-next" onclick="goToQuestion(1)">
            {{ $language === 'bn' ? 'পরবর্তী' : 'Next' }}
            <i class="fas fa-arrow-right"></i>
        </button>
    </div>
</div>
@endif

{{-- ── Question Slides ──────────────────────────────────────────── --}}
@foreach($questions as $q)
<div class="question-slide {{ (!$infoBefore && $loop->first) ? 'active' : '' }}"
     id="slide-{{ $loop->iteration }}">
    <div class="q-card">
        <div class="q-card-top">
            <div class="q-num">{{ $q->order }}</div>
            <div style="flex:1">
                <div style="display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;">
                    @php
                        $typeLabels = ['radio'=>'Single Choice','checkbox'=>'Multiple Choice','text'=>'Open Text','idea'=>'Your Idea'];
                        $typeClass  = ['radio'=>'q-type-radio','checkbox'=>'q-type-checkbox','text'=>'q-type-text','idea'=>'q-type-idea'];
                    @endphp
                    <span class="q-type-badge {{ $typeClass[$q->question_type] ?? 'q-type-text' }}">
                        {{ $typeLabels[$q->question_type] ?? 'Text' }}
                    </span>
                    @if($q->is_required)
                        <span style="font-size:.7rem;color:#dc2626;font-weight:700;">Required</span>
                    @endif
                </div>
                <div class="q-text">
                    {{ $language === 'bn' && $q->question_text_bn ? $q->question_text_bn : $q->question_text }}
                </div>
                @if($language === 'bn' && $q->question_text_bn)
                    <div class="q-text-bn">{{ $q->question_text }}</div>
                @endif
            </div>
        </div>

        <div class="q-options">
            @if($q->question_type === 'radio')
                @foreach($q->options ?? [] as $opt)
                <label class="opt-item" for="q{{ $q->id }}_{{ $loop->index }}">
                    <input type="radio" id="q{{ $q->id }}_{{ $loop->index }}"
                           name="q_{{ $q->id }}" value="{{ $opt['value'] }}"
                           onchange="onOptionChange(this)">
                    <span class="opt-bullet"></span>
                    <span class="opt-label">
                        {{ $language === 'bn' && !empty($opt['label_bn']) ? $opt['label_bn'] : $opt['label'] }}
                    </span>
                </label>
                @endforeach

            @elseif($q->question_type === 'checkbox')
                @foreach($q->options ?? [] as $opt)
                <label class="opt-item" for="q{{ $q->id }}_{{ $loop->index }}">
                    <input type="checkbox" id="q{{ $q->id }}_{{ $loop->index }}"
                           name="q_{{ $q->id }}[]" value="{{ $opt['value'] }}"
                           onchange="onCheckChange(this)">
                    <span class="opt-check"></span>
                    <span class="opt-label">
                        {{ $language === 'bn' && !empty($opt['label_bn']) ? $opt['label_bn'] : $opt['label'] }}
                    </span>
                </label>
                @endforeach

            @elseif($q->question_type === 'idea')
                <div class="idea-hint">
                    <i class="fas fa-lightbulb"></i>
                    <span>{{ $language === 'bn' ? 'আপনার সেরা ধারণা শেয়ার করুন — যত বিস্তারিত হবে তত ভালো!' : 'Share your best idea — the more detail, the better!' }}</span>
                </div>
                <textarea name="q_{{ $q->id }}" class="q-textarea" rows="4"
                          placeholder="{{ $language === 'bn' ? 'আপনার ধারণা এখানে লিখুন...' : 'Write your idea here...' }}"
                          oninput="onTextInput(this)"></textarea>
            @else
                <textarea name="q_{{ $q->id }}" class="q-textarea" rows="4"
                          placeholder="{{ $language === 'bn' ? 'আপনার উত্তর এখানে লিখুন...' : 'Write your answer here...' }}"
                          oninput="onTextInput(this)"></textarea>
            @endif
        </div>
    </div>

    {{-- Navigation --}}
    <div class="q-nav">
        <button type="button" class="btn-prev" onclick="prevQuestion()"
                {{ ($loop->first && !$infoBefore) ? 'disabled' : '' }}>
            <i class="fas fa-arrow-left"></i>
            {{ $language === 'bn' ? 'আগে' : 'Previous' }}
        </button>
        <span class="q-nav-center">{{ $loop->iteration }} / {{ $totalQ }}</span>
        @if($loop->last && !$infoBefore)
            <button type="button" class="btn-next" onclick="goToInfo()">
                {{ $language === 'bn' ? 'আপনার তথ্য' : 'Your Info' }}
                <i class="fas fa-arrow-right"></i>
            </button>
        @else
            <button type="button" class="btn-next" onclick="nextQuestion()">
                {{ $language === 'bn' ? 'পরবর্তী' : 'Next' }}
                <i class="fas fa-arrow-right"></i>
            </button>
        @endif
    </div>
</div>
@endforeach

{{-- ── User Info Slide (AFTER questions if configured) ─────────── --}}
@if(!$infoBefore)
<div class="info-slide" id="slide-info">
    @include('public.feedback._user_info_form', ['language' => $language])

    <div class="q-nav">
        <button type="button" class="btn-prev" onclick="goToQuestion({{ $totalQ }})">
            <i class="fas fa-arrow-left"></i>
            {{ $language === 'bn' ? 'প্রশ্নে ফিরুন' : 'Back to Questions' }}
        </button>
        <button type="submit" class="btn-submit" id="submitBtn" onclick="return confirmSubmit()">
            <i class="fas fa-paper-plane"></i>
            {{ $language === 'bn' ? 'জমা দিন' : 'Submit Feedback' }}
        </button>
    </div>
</div>
@else
{{-- When info is BEFORE, submit button lives inside the last question slide --}}
<div style="text-align:right;margin-top:-1rem;margin-bottom:1rem;">
    {{-- The submit nav is part of the last question slide override --}}
</div>
@endif

</form>
@endsection

@push('scripts')
<script>
const TOTAL      = {{ $totalQ }};
const INFO_FIRST = {{ $infoBefore ? 'true' : 'false' }};
let current      = INFO_FIRST ? 0 : 1;  // 0 = info-before, 1..TOTAL = questions, TOTAL+1 = info-after
let answered     = {};

function goToInfo() {
    hideAll();
    current = INFO_FIRST ? 0 : TOTAL + 1;
    document.getElementById('slide-info').classList.add('active');
    updateProgress();
}

function goToQuestion(n) {
    hideAll();
    current = n;
    const slide = document.getElementById('slide-' + n);
    if (slide) { slide.classList.add('active'); }
    updateProgress();
}

function hideAll() {
    document.querySelectorAll('.question-slide,.info-slide').forEach(s => s.classList.remove('active'));
}

function nextQuestion() {
    if (INFO_FIRST && current === 0) {
        goToQuestion(1);
    } else if (current < TOTAL) {
        goToQuestion(current + 1);
    } else if (!INFO_FIRST) {
        goToInfo();
    }
}

function prevQuestion() {
    if (current > 1) {
        goToQuestion(current - 1);
    } else if (INFO_FIRST && current === 1) {
        goToInfo();
    }
}

function updateProgress() {
    const totalSteps = TOTAL + 1;
    let pct;

    if (INFO_FIRST) {
        pct = current === 0 ? 0 : Math.round((current / totalSteps) * 100);
    } else {
        pct = current > TOTAL ? Math.round((TOTAL / totalSteps) * 100)
                               : Math.round(((current - 1) / totalSteps) * 100);
    }

    document.getElementById('progressFill').style.width = pct + '%';
    document.getElementById('progressPct').textContent  = pct + '% complete';

    const numEl = document.getElementById('currentNum');
    if (numEl) {
        if (INFO_FIRST && current === 0) {
            numEl.textContent = '{{ $language === "bn" ? "আপনার তথ্য" : "Your Info" }}';
        } else if (!INFO_FIRST && current > TOTAL) {
            numEl.textContent = '{{ $language === "bn" ? "আপনার তথ্য" : "Your Info" }}';
        } else {
            numEl.textContent = current;
        }
    }

    // Update dots
    for (let i = 1; i <= TOTAL; i++) {
        const dot = document.getElementById('dot-' + i);
        if (!dot) continue;
        dot.className = 'step-dot';
        if (answered[i])    dot.classList.add('done');
        if (i === current)  dot.classList.add('active');
    }
    const iDot = document.getElementById('dot-info');
    if (iDot) {
        iDot.className = 'step-dot';
        const infoActive = INFO_FIRST ? current === 0 : current === TOTAL + 1;
        if (infoActive) iDot.classList.add('active');
    }
}

function onOptionChange(input) {
    const slide = input.closest('.question-slide');
    const idx   = parseInt(slide.id.replace('slide-', ''));
    answered[idx] = true;
    slide.querySelectorAll('.opt-item').forEach(item => item.classList.remove('selected'));
    input.closest('.opt-item').classList.add('selected');
    updateProgress();
    if (input.type === 'radio') { setTimeout(() => nextQuestion(), 350); }
}

function onCheckChange(input) {
    const slide = input.closest('.question-slide');
    const idx   = parseInt(slide.id.replace('slide-', ''));
    const label = input.closest('.opt-item');
    input.checked ? label.classList.add('selected') : label.classList.remove('selected');
    answered[idx] = slide.querySelectorAll('input[type=checkbox]:checked').length > 0;
    updateProgress();
}

function onTextInput(textarea) {
    const slide = textarea.closest('.question-slide');
    if (!slide) return;
    const idx = parseInt(slide.id.replace('slide-', ''));
    answered[idx] = textarea.value.trim().length > 0;
    updateProgress();
}

// Consent toggle
document.addEventListener('DOMContentLoaded', function () {
    const row = document.getElementById('consentRow');
    if (!row) return;
    row.addEventListener('click', function () {
        const cb = document.getElementById('consentCheckbox');
        cb.checked = !cb.checked;
        row.classList.toggle('checked', cb.checked);
    });
});

function confirmSubmit() {
    const cb = document.getElementById('consentCheckbox');
    if (!cb || !cb.checked) {
        alert('{{ $language === "bn" ? "অনুগ্রহ করে সম্মতি বক্সে টিক দিন।" : "Please tick the consent checkbox before submitting." }}');
        return false;
    }
    setTimeout(() => {
        const btn = document.getElementById('submitBtn');
        if (btn) {
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> {{ $language === "bn" ? "জমা হচ্ছে…" : "Submitting…" }}';
        }
    }, 10);
    return true;
}

// Init
updateProgress();
</script>
@endpush