@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">
          {{ \Diglactic\Breadcrumbs\Breadcrumbs::render('FormSurveyResultDetail',$formSurvey->id,'Hasil '.$formSurvey->title) }}
          <div class="card w-100">
            <div class="card-body">
              <div x-data="dataForm()">
                <form @submit.prevent="submitForm">
                  <div class="row">
                    <div class="col-12 mt-4">
                      <div class="row">
                        <div class="col-12">
                          <h4 class="mb-4 fw-bold" x-text="json_data.title"></h4>
                          <template x-for="(c, i) in json_data.components" :key="i">
                            <div>
                              <template x-if="c.type === 'text'">
                                <div class="mb-3 fv-row">
                                  <label class="form-label" :for="`${c.name}`" x-html="c.isRequired ? `${c.label}<span class='text-danger'>*</span>` : `${c.label}`"></label>
                                  <input class="form-control" :name="`${c.name}`" :id="`${c.name}`" x-model="c.value" :placeholder="`${c.placeholder ?? ''}`" @readonly($disabled) x-bind:required="c.isRequired"/>
                                </div>
                              </template>
                              <template x-if="c.type === 'longText'">
                                <div class="mb-3 fv-row">
                                  <label class="form-label" :for="`${c.name}`" x-html="c.isRequired ? `${c.label}<span class='text-danger'>*</span>` : `${c.label}`"></label>
                                  <textarea class="form-control" :name="`${c.name}`" :id="`${c.name}`" x-model="c.value" :placeholder="`${c.placeholder ?? ''}`" @readonly($disabled) x-bind:required="c.isRequired"></textarea>
                                </div>
                              </template>
                              <template x-if="c.type === 'radio'">
                                <div class="mb-3 fv-row">
                                  <label class="form-label py-1" x-html="c.isRequired ? `${c.label}<span class='text-danger'>*</span>` : `${c.label}`"></label>
                                  <template x-for="(opt, optIdx) in c.options" :key="`${i}-${optIdx}`">
                                    <div class="form-check py-1">
                                      <input type="radio" :id="`${c.name}-${optIdx}`" :name="`${c.name}`" :value="opt.label" class="form-check-input" x-model="c.value" @disabled($disabled) x-bind:required="c.isRequired" />
                                      <label class="form-check-label" :for="`${c.name}-${optIdx}`" x-text="opt.label"></label>
                                    </div>
                                  </template>
                                </div>
                              </template>
                              <template x-if="c.type === 'checkbox'">
                                <div class="mb-3 fv-row">
                                  <label class="form-label py-1" x-html="c.isRequired ? `${c.label}<span class='text-danger'>*</span>` : `${c.label}`"></label>
                                  <template x-for="(opt, optIdx) in c.options" :key="`${i}-${optIdx}`">
                                    <div class="form-check py-1">
                                      <input class="form-check-input" type="checkbox" :id="`${c.name}-${optIdx}`" :name="c.name" :value="opt.label" x-model="c.values" :checked="c.values.includes(opt.value)" @disabled($disabled) />
                                      <label class="form-check-label" :for="`${c.name}-${optIdx}`" x-text="opt.label"></label>
                                    </div>
                                  </template>
                                </div>
                              </template>
                              <template x-if="c.type === 'section'">
                                <div class="mt-4 mb-3">
                                  <h5 x-text="c.label" class="fw-bold"></h5>
                                  <hr class="border-2 text-black" />
                                </div>
                              </template>
                            </div>
                          </template>
                        </div>
                      </div>
                    </div>
                  </div>
                  @if(!$disabled)
                    <div class="d-flex w-100 justify-content-end">
                      <button type="submit" class="btn btn-primary"><i class="ti ti-device-floppy me-2"></i>Simpan</button>
                    </div>
                  @endif
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
<script>
  function dataForm() {
    return {
      json_data: JSON.parse({!! json_encode($site->form_survey ?: '{"title":"Survey Kepuasan","components":[]}') !!}),
      survey_data: JSON.parse({!! json_encode($surveyData ?: '{"title":"Survey Kepuasan","components":[]}') !!}),
      disabled: @json($disabled),


      init() {
        if (this.disabled) {
          this.json_data = this.survey_data
        }
      },
      async submitForm() {
        const score = this.getScore(this.json_data.components)
        console.log(this.json_data)
        console.log(JSON.stringify({
          survey_data: JSON.stringify({
            ...this.json_data,
            totalScore: score
          })
        }))
      },
      getScore(components) {
        let totalScore = 0
        components.forEach(e => {
          if (e.type === 'radio' && e?.value) {
            const selectedChoice = e.options.find(
              opt => opt.value === e?.value
            )
            if (selectedChoice && selectedChoice.score) {
              console.log(selectedChoice)
              totalScore += parseInt(selectedChoice.score)
            }
          }
        })

        return totalScore
      }
    };
  }
</script>
@endpush