@extends('layouts.admin.index')

@section('content')
  <div id="main-wrapper">
    <!-- Sidebar -->
    @include('layouts.admin.sidebar')
    <div class="page-wrapper">

      @include('layouts.admin.header')

      <div class="body-wrapper">
        <div class="container-fluid">
          <div class="card w-100">
            <div class="card-body">
              <div class="row">
                <div class="col-12 mb-4">
                  <div id="surveyContainer"></div>
                  <form id="dataForm" method="POST" action="{{ route('survey.fill-store') }}">
                    @csrf
                    <input type="hidden" name="survey_data" id="surveyData">
                    <input type="hidden" name="id" value="{{ $model->id }}">
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
<script type="module">
  $(document).ready(function () {
    // const surveyJson = {
    //   title: "Customer Satisfaction Survey",
    //   showProgressBar: "top",
    //   pages: [
    //     {
    //       questions: [
    //         {
    //           type: "rating",
    //           name: "satisfaction",
    //           title: "How satisfied are you with our service?",
    //           isRequired: true,
    //           minRateDescription: "Not Satisfied",
    //           maxRateDescription: "Completely satisfied"
    //         },
    //         {
    //           type: "comment",
    //           name: "feedback",
    //           title: "What can we do to improve our service?"
    //         }
    //       ]
    //     },
    //     {
    //       questions: [
    //         {
    //           type: "rating",
    //           name: "satisfaction2",
    //           title: "How satisfied are you with our service?",
    //           isRequired: true,
    //           minRateDescription: "Not Satisfied",
    //           maxRateDescription: "Completely satisfied"
    //         },
    //         {
    //           type: "comment",
    //           name: "feedback2",
    //           title: "What can we do to improve our service?"
    //         }
    //       ]
    //     }
    //   ]
    // };
    const surveyJson = JSON.parse({!! json_encode($site->form_survey ?? '{}') !!});
    // console.log(surveyJson)

    const disabled = {{ $disabled ? 'true' : 'false' }};
    const survey = new Survey.Model(surveyJson);
    if (disabled) {
      const surveyData = {!! $surveyData !!};
      survey.mode = "display";
      survey.data = surveyData;
    }
    $("#surveyContainer").Survey({ model: survey });
    // const survey = new Survey.Survey(surveyJson, "#surveyContainer");

    survey.onComplete.add(function (sender) {
      const totalScore = calculateTotalScore(sender);
      const surveyData = {...sender.data, totalScore};
      $("#surveyData").val(JSON.stringify(surveyData));
      $("#dataForm").submit();
    });

    function calculateTotalScore(result) {
      let totalScore = 0;

      // Loop through each answer to extract scores
      const answers = result.data;
      for (const questionName in answers) {
        const question = survey.getQuestionByName(questionName);
        console.log(answers[questionName])

        // For choice-based questions, find the selected choice's score
        if (question && question.choices) {
          if (Array.isArray(answers[questionName])) {
            //multiple choices
            answers[questionName].forEach(answer => {
              console.log('answer', answer)
              const selectedChoice = question.choices.find(
                choice => choice.value === answer
              );
              if (selectedChoice && selectedChoice.jsonObj.score) {
                totalScore += selectedChoice.jsonObj.score;
              }
            });
          } else {
            // radio
            const selectedChoice = question.choices.find(
              choice => choice.value === answers[questionName]
            );
            if (selectedChoice && selectedChoice.jsonObj.score) {
              totalScore += selectedChoice.jsonObj.score;
            }
          }
        } 

        // For rating questions, directly add the rating value
        if (question && question.rateValues) {
          const selectedChoice = question.rateValues.find(
            choice => choice.value === answers[questionName]
          );
          console.log(selectedChoice)
          if (selectedChoice && selectedChoice.jsonObj.score) {
            totalScore += selectedChoice.jsonObj.score;
          }
        }
      }
      return totalScore;
    }
  });
</script>
@endpush