@extends('layouts.app')
@push('meta')
    @include('components.meta', [
        'title' => __('seo.SURVEY_DETAILS_TITLE'),
        'desc' => __('seo.SURVEY_DETAILS_DESC'),
        'image' => 'img/logo.webp',
    ])
@endpush
@section('content')
    @include('components.surveys.sub-hero',[
        'title' => $surveyCms->survey_details_title,
    ])

    
    <section class="survey-container-details" data-aos="fade-up" data-aos-duration="500"
        data-aos-anchor-placement="center-bottom" data-aos-seq>

        <div class="row mb-4">
            <div class="col-12">
                @include('components.surveys.card-details', ['surveyDetails' => $surveyDetails])
            </div>
        </div>

        <div class="row align-items-stretch g-4">
            <div class="col-lg-6 col-12">
                <div class="card h-100 p-5" data-aos="fade-up" data-aos-duration="500"
                    data-aos-anchor-placement="center-bottom" data-aos-seq>
                    @include('components.surveys.progress-chart', ['surveyDetails' => $surveyDetails])
                </div>
            </div>

            <div class="col-lg-6 col-12">
                <div class="card h-100 p-5" data-aos="fade-up" data-aos-duration="500"
                    data-aos-anchor-placement="center-bottom" data-aos-seq>
                    <h4 class="mb-4 primary-text fw-700 font-size-24" data-aos="fade-up" data-aos-duration="500"
                        data-aos-anchor-placement="center-bottom" data-aos-seq>
                        Response Distribution
                    </h4>

                    <div class="h-100 d-flex align-items-center justify-content-center">
                        @include('components.surveys.donut-chart', ['surveyDetails' => $surveyDetails])
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection