@extends('layouts.parent')

@section('title', 'Parent Surveys - Kidscholl')

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

    .survey-card {
        background: #ffffff;
        border: 2px solid #f1f5f9;
        border-radius: 20px;
        padding: 24px;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        margin-bottom: 16px;
    }

    .survey-card:hover {
        transform: translateY(-3px);
        border-color: var(--secondary);
        box-shadow: 0 10px 25px rgba(0,0,0,0.03);
    }

    .survey-status-badge {
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        font-size: 0.85rem;
        padding: 8px 20px;
        border-radius: 20px;
    }

    .badge-completed {
        background-color: #d1fae5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }

    .btn-take-survey {
        font-family: 'Fredoka', sans-serif;
        font-weight: 700;
        border-radius: 20px;
        padding: 8px 20px;
        background-color: var(--accent);
        color: var(--dark);
        border: 2px solid transparent;
        transition: all 0.2s ease;
    }

    .btn-take-survey:hover {
        background-color: #ffd83b;
        color: var(--dark);
        transform: translateY(-2px);
    }
</style>
@endsection

@section('content')
<div class="surveys-header">
    <div class="row align-items-center">
        <div class="col-md-9">
            <h2 class="text-warning mb-1"><i class="bi bi-clipboard2-check-fill me-2"></i> Parent Survey Participation</h2>
            <p class="text-secondary mb-0">Help us improve school facilities and teaching by sharing your valuable feedback.</p>
        </div>
        <div class="col-md-3 text-md-end mt-3 mt-md-0">
            <span class="badge bg-white text-warning border border-2 border-warning rounded-pill px-3 py-2 fw-bold font-monospace">
                Total Surveys: {{ count($surveys) }}
            </span>
        </div>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-lg-10">
        <div class="portal-card" style="border-bottom-color: var(--accent);">
            <div class="d-flex flex-column gap-2">
                @forelse($surveys as $srv)
                    @php
                        $isCompleted = in_array($srv->id, $respondedSurveyIds);
                    @endphp
                    <div class="survey-card d-flex flex-column flex-md-row justify-content-between align-items-md-center">
                        <div class="mb-3 mb-md-0 me-md-4">
                            <h5 class="fw-bold text-dark mb-2">{{ $srv->title }}</h5>
                            <p class="text-secondary small mb-3 lh-base">{{ $srv->description }}</p>
                            <div class="small text-muted fw-bold">
                                <i class="bi bi-calendar-event text-danger me-1"></i> End Date: 
                                <span class="text-danger">{{ $srv->end_date ? \Carbon\Carbon::parse($srv->end_date)->format('d M Y') : 'Ongoing' }}</span>
                            </div>
                        </div>

                        <div class="flex-shrink-0 text-md-end">
                            @if($isCompleted)
                                <span class="survey-status-badge badge-completed d-inline-flex align-items-center">
                                    <i class="bi bi-check-circle-fill me-1.5 fs-6"></i> Responses Submitted
                                </span>
                            @else
                                <a href="{{ route('parent.surveys.form', $srv->id) }}" class="btn btn-take-survey d-inline-flex align-items-center">
                                    <i class="bi bi-pencil-square me-1.5"></i> Fill Survey
                                </a>
                            @endif
                        </div>
                    </div>
                @empty
                    <div class="text-center py-5 text-muted">
                        <i class="bi bi-clipboard2-data fs-1 mb-3 d-block text-secondary opacity-50"></i>
                        <h5 class="fw-bold text-dark mb-1">No Active Surveys</h5>
                        <p class="small text-muted mb-0">No feedback surveys are currently assigned to your child's class.</p>
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
@endsection