@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">
              <h3 class="mb-4">Edit Form Survey</h3>
              <div x-data="dataForm()">
                <form @submit.prevent="submitForm">
                  <div class="row">
                    <div class="col-12 d-flex gap-2">
                      <button type="button" class="btn btn-info" @click="addField('text')"><i class="ti ti-plus fs-4 me-2"></i>Text Field</button>
                      <button type="button" class="btn btn-info" @click="addField('radio')"><i class="ti ti-plus fs-4 me-2"></i>Radio Field</button>
                    </div>
                    <div class="col-12 mt-4">
                      <div class="row">
                        <div class="col-8" style="max-height: 60vh; overflow: auto">
                          <h4 class="mb-4">Survey Kepuasan Pengguna</h4>
                          <template x-for="(c, i) in json_data.components" :key="i">
                            <div class="form-component mb-2" :class="selectedComponent === i ? 'active' : ''" :id="`${c.name}`" @click="selectComponent(i)">
                              <div x-show="selectedComponent == i" class="mb-2 d-flex justify-content-end">
                                <button type="button" class="btn btn-danger btn-sm" @click="deleteField()"><i class="ti ti-trash me-2"></i>Hapus Field</button>
                              </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>
                                  <textarea class="form-control" :name="`${c.name}`" :id="`${c.name}`" :placeholder="`${c.placeholder ?? ''}`" readonly></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.value" class="form-check-input" disabled/>
                                      <label class="form-check-label" :for="`${c.name}-${optIdx}`" x-text="opt.label"></label>
                                    </div>
                                  </template>
                                </div>
                              </template>
                            </div>
                          </template>
                        </div>
                        <div class="col-4" style="max-height: 60vh; overflow: auto">
                          <div x-show="selectedComponent != null" :class="selectedComponent == null ? 'd-none' : ''">
                            <div class="mb-3 fv-row">
                              <label class="form-label" for="label">Label</label>
                              <input class="form-control" x-model="json_data.components[selectedComponent].label" id="label" name="label" type="text" />
                            </div>
                            <div class="mb-3 fv-row">
                              <label class="form-label" for="name">Nama</label>
                              <input class="form-control" x-model="json_data.components[selectedComponent].name" id="name" name="name" type="text" />
                            </div>
                            <div class="mb-3 fv-row" x-show="json_data.components[selectedComponent].type != 'radio'">
                              <label class="form-label" for="placeholder">Placeholder</label>
                              <input class="form-control" x-model="json_data.components[selectedComponent].placeholder" id="placeholder" name="placeholder" type="text" />
                            </div>
                            <div class="mb-3 fv-row">
                              <label class="form-label" for="placeholder">Is Required</label>
                              <input type="checkbox" class="form-check-input" x-model="json_data.components[selectedComponent].isRequired" :checked="json_data.components[selectedComponent].isRequired" />
                            </div>
                            <div class="mb-3" x-show="json_data.components[selectedComponent].type == 'radio'">
                              <div class="mb-2 d-flex justify-content-between">
                                <h6>Options</h6>
                                <button type="button" class="btn btn-primary btn-sm" @click="addOption()"><i class="ti ti-plus"></i></button>
                              </div>
                              <template x-for="(opt, optIdx) in json_data.components[selectedComponent].options" :key="`${optIdx}`">
                                <div class="card border p-2">
                                  <div class="mb-2 d-flex justify-content-between">
                                    <h6 x-text="`Option-${optIdx+1}`"></h6>
                                    <button type="button" class="btn btn-danger btn-sm" @click="deleteOption(optIdx)"><i class="ti ti-trash"></i></button>
                                  </div>
                                  <div class="row g-2">
                                    <div class="col-12">
                                      <label class="form-label" :for="`label-${optIdx}`">Label</label>
                                      <input class="form-control" x-model="opt.label" :id="`label-${optIdx}`" type="text" />
                                    </div>
                                    <div class="col-8">
                                      <label class="form-label" :for="`value-${optIdx}`">Value</label>
                                      <input class="form-control" x-model="opt.value" :id="`value-${optIdx}`" type="text" />
                                    </div>
                                    <div class="col-4">
                                      <label class="form-label" :for="`score-${optIdx}`">Score</label>
                                      <input class="form-control" x-model="opt.score" :id="`score-${optIdx}`" type="text" />
                                    </div>
                                  </div>
                                </div>
                              </template>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <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>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scripts')
<script>
  function dataForm() {
    return {
      json_data: JSON.parse({!! json_encode($formSurveyJson ?: '{"title":"Survey Kepuasan","components":[]}') !!}),
      selectedComponent: null,

      init() {
        console.log(this.selectedComponent);
        if (this.json_data.components.length > 0) {
          this.selectedComponent = 0;
        }
      },
      selectComponent(i) {
        console.log(i)
        this.selectedComponent = i;
      },
      addField(type) {
        const textObj = {
          type: 'text',
          name: '',
          label: 'Label Text Field',
          isRequired: false
        }
        const radioObj = {
          type: 'radio',
          name: '',
          label: 'Label Radio Field',
          isRequired: false,
          options: []
        }
        const tempData = [...this.json_data.components]
        if (type === 'text') {
          tempData.push(textObj)
        }
        if (type === 'radio') {
          tempData.push(radioObj)
        }
        this.json_data.components = tempData
        this.selectedComponent = tempData.length - 1
      },
      deleteField() {
        const tempData = [...this.json_data.components]
        tempData.splice(this.selectedComponent, 1)
        this.json_data.components = tempData
      },
      addOption() {
        const template = {
          value: '',
          label: '',
          score: 0
        }
        const tempData = [...this.json_data.components[this.selectedComponent].options]
        tempData.push(template)
        this.json_data.components[this.selectedComponent].options = tempData
      },
      deleteOption(idx) {
        const tempData = [...this.json_data.components[this.selectedComponent].options]
        tempData.splice(idx, 1)
        this.json_data.components[this.selectedComponent].options = tempData
      },
      async submitForm() {
        console.log(this.json_data)
        const response = await fetch("{{ route('survey.form-survey-store') }}", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}",
          },
          body: JSON.stringify({
            json_data: JSON.stringify(this.json_data)
          }),
        });
        const result = await response.json();
        if (response.ok && result.redirect) {
          setTimeout(() => window.location.href = result.redirect, 200);
        } else {
          alert('An error occurred. Please try again.');
        }
      },
    };
  }
</script>
@endpush