@extends('layouts.parent')

@section('title', 'Fill Survey - Kidscholl')

@section('styles')
<style>
    .survey-form-header {
        background: linear-gradient(135deg, #FEF3C7 0%, #FFFDF9 100%);
        border-radius: 24px;
        padding: 30px;
        margin-bottom: 25px;
        border-bottom: 4px solid var(--accent);
    }

    .question-card {
        background: #ffffff;
        border: 2px solid #f1f5f9;
        border-radius: 22px;
        padding: 25px;
        margin-bottom: 25px;
        transition: border-color 0.3s ease;
    }

    .question-card:focus-within {
        border-color: var(--secondary);
    }

    .option-wrapper {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 15px;
    }

    .option-item {
        border: 2px solid #e2e8f0;
        border-radius: 12px;
        padding: 14px 18px;
        transition: all 0.2s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        margin-bottom: 0;
    }

    .option-item:hover {
        border-color: var(--secondary);
        background-color: #f0fdf4;
    }

    .option-item input[type="radio"]:checked + label {
        color: #166534 !important;
    }

    .option-item input[type="radio"]:checked {
        background-color: var(--secondary);
        border-color: var(--secondary);
    }

    .rating-container {
        display: flex;
        justify-content: space-around;
        padding: 20px;
        background-color: #f8fafc;
        border-radius: 16px;
        border: 2px dashed #e2e8f0;
        margin-top: 15px;
    }

    .rating-item {
        cursor: pointer;
        transition: transform 0.2s ease;
    }

    .rating-item:hover {
        transform: scale(1.15);
    }

    .form-textarea {
        border-radius: 14px;
        padding: 15px;
        border: 2px solid #e2e8f0;
        font-weight: 600;
        color: var(--dark);
        transition: all 0.2s ease;
    }

    .form-textarea:focus {
        border-color: var(--secondary);
        box-shadow: 0 0 0 4px rgba(78, 205, 196, 0.15);
    }
</style>
@endsection

@section('content')
<div class="row mb-3">
    <div class="col-12">
        <a href="{{ route('parent.surveys') }}" class="btn btn-link text-decoration-none text-secondary fw-bold px-0">
            <i class="bi bi-arrow-left me-1"></i> Back to Surveys List
        </a>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="survey-form-header text-center">
            <span class="badge bg-warning text-dark px-3 py-1.5 rounded-pill fw-bold mb-2 small"><i class="bi bi-clipboard2-check me-1"></i> Feedback Form</span>
            <h3 class="text-dark fw-bold mb-2">{{ $survey->title }}</h3>
            <p class="text-secondary small mb-0">{{ $survey->description }}</p>
        </div>

        <form action="{{ route('parent.surveys.submit', $survey->id) }}" method="POST">
            @csrf
            
            @foreach($survey->questions as $idx => $q)
                <div class="question-card">
                    <h5 class="fw-bold text-dark mb-3">
                        <span class="text-primary me-2">Q{{ $idx + 1 }}.</span>
                        {{ $q->question_text }}
                    </h5>

                    @if($q->type == 'MCQ')
                        <!-- MCQ Options -->
                        <div class="option-wrapper">
                            @foreach($q->options as $optIdx => $option)
                                <div class="option-item" onclick="document.getElementById('q-{{ $q->id }}-opt-{{ $optIdx }}').click();">
                                    <input class="form-check-input me-3" type="radio" name="answers[{{ $q->id }}]" id="q-{{ $q->id }}-opt-{{ $optIdx }}" value="{{ $option }}" required>
                                    <label class="form-check-label fw-bold text-secondary mb-0 w-100" style="cursor: pointer;" for="q-{{ $q->id }}-opt-{{ $optIdx }}">
                                        {{ $option }}
                                    </label>
                                </div>
                            @endforeach
                        </div>

                    @elseif($q->type == 'Rating')
                        <!-- Rating Scale -->
                        <div class="rating-container">
                            @for($r = 1; $r <= 5; $r++)
                                <div class="text-center rating-item" onclick="document.getElementById('q-{{ $q->id }}-rate-{{ $r }}').click();">
                                    <input class="form-check-input d-block mx-auto mb-2" type="radio" name="answers[{{ $q->id }}]" id="q-{{ $q->id }}-rate-{{ $r }}" value="{{ $r }}" required style="transform: scale(1.3); cursor: pointer;">
                                    <label class="form-check-label fw-bold text-warning" for="q-{{ $q->id }}-rate-{{ $r }}" style="cursor: pointer;">
                                        {{ $r }} <i class="bi bi-star-fill"></i>
                                    </label>
                                </div>
                            @endfor
                        </div>
                        <div class="d-flex justify-content-between text-muted px-2 mt-2 small font-monospace">
                            <span><i class="bi bi-emoji-frown"></i> Very Unsatisfied</span>
                            <span>Extremely Satisfied <i class="bi bi-emoji-laughing"></i></span>
                        </div>

                    @else
                        <!-- Free Text Answer -->
                        <textarea name="answers[{{ $q->id }}]" rows="4" class="form-control form-textarea" placeholder="Please write your detailed thoughts here..." required></textarea>
                    @endif
                </div>
            @endforeach

            <div class="mt-4 mb-5">
                <button type="submit" class="btn btn-warning rounded-pill w-100 py-3 fw-bold text-dark fs-5 shadow-sm transition-all hover-shadow" style="border: 2px solid transparent;">
                    <i class="bi bi-send-check-fill me-1"></i> Submit Survey Response
                </button>
            </div>
        </form>
    </div>
</div>
@endsection