@extends('admin.main')

@section('content')



            <div class="w-lg-80  py-4">
                <div class="container-fluid Surveys">
                    <div class="row">
                        <div class="col-12">
                            <div class="surveysone p-4">
                                <div class="row ">
                                    <div class="col-lg-4">
                                        <div class="">
                                            <h6 class="font-18 inter font-600 colorblack">{{ $survey->q_name }}</h6>
                                        </div>
                                        <div class="d-flex  justify-content-between align-items-center ">
                                            <div>
                                                <p class="font-12 inter font-600 colorgray mb-0">Date
                                                    Created</p>
                                                <h6 class="font-14 inter font-600 colorblack mt-3">{{ $survey->created_at }}</h6>
                                            </div>

                                        <div>
                                            <p class="font-12 inter font-600 colorgray mb-0">Completed
                                                by:</p>
                                            <h6 class="font-14 inter font-600 colorblack mt-3">{{ $userCount }} </h6>
                                        </div>
                                        </div>
                                        <hr>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="col-12 mt-4">
                            <button class="btn-Question px-5 py-2 rounded-5"><strong>Question:</strong> {{ $survey->question }} </button>
                            <div class="surveysone p-4 mt-3">
                                <div class="row ">
                                    <div class="">
                                        <h6 class="font-18 inter font-600 colorblack">Responses</h6>
                                        <p class="font-12 inter font-600 colorgray mb-0">This is a list of latest Responses.</p>
                                    </div>
                                    <div class="col-12 Choices">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div>
                                                    <p class="font-12 inter font-600 colorgray mt-3">Answer Choices</p>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div>
                                                    <p class="font-12 inter font-600 colorgray mt-3">Responses</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @foreach ($answerCounts as $answer => $count)


                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div>
                                                    <p class="font-14 inter font-600 colorblack mt-3">{{ $answer }} </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="row">

                                                    <div class="col-6">
                                                        <p class="font-14 inter font-600 colorblack mt-3">{{ number_format(($count / $userCount) * 100, 2) }}%</p>
                                                    </div>

                                                    <div class="col-6">
                                                        <p class="font-14 inter font-600 colorblack mt-3">{{ $count  }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach


                              
                                    <div class="col-12">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div>
                                                    <p class="font-14 inter font-600 colorblack mt-3">Total </p>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="row">

                                                    <div class="col-6">
                                                        <p class="font-14 inter font-600 colorblack mt-3"></p>
                                                    </div>

                                                    <div class="col-6">
                                                        <p class="font-14 inter font-600 colorblack mt-3">{{ $userCount }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

            </div>

    <!-- ------------bootstrap---------js--------- -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>

    <!-- Include your custom scripts -->
    <script src="scripts/script.js"></script>
    @endsection