@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">
          {{ $disabled ? Breadcrumbs::render('FormSurvey') : ($model->id ? Breadcrumbs::render('FormSurveyEdit', $model->id) : Breadcrumbs::render('FormSurveyAdd')) }}
          <div class="card w-100">
            <div class="card-body">
              <div x-data="dataForm()">
                <form @submit.prevent="submitForm">
                  <div class="mb-3 fv-row">
                    <label class="form-label" for="title">Judul</label>
                    <input class="form-control" id="title" name="title" x-model="title" placeholder="Judul" @readonly($disabled)/>
                    @error('title')
                      <div class="invalid-feedback d-block">
                        {{ $message }}
                      </div>
                    @enderror
                  </div>
                  <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('longText')"><i class="ti ti-plus fs-4 me-2"></i>Long 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>
                      <button type="button" class="btn btn-info" @click="addField('checkbox')"><i class="ti ti-plus fs-4 me-2"></i>Checkbox Field</button>
                      <button type="button" class="btn btn-info" @click="addField('section')"><i class="ti ti-plus fs-4 me-2"></i>Section</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" x-text="title"></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>
                                  <input class="form-control" :type="`${c.inputType}`" :name="`${c.name}`" :id="`${c.name}`" :placeholder="`${c.placeholder ?? ''}`" readonly/>
                                </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}`" :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.label" class="form-check-input" disabled/>
                                      <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 type="checkbox" :id="`${c.name}-${optIdx}`" :name="`${c.name}`" :value="opt.label" class="form-check-input" 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="mb-3 fv-row">
                                  <h5 x-text="c.label"></h5>
                                  <hr class="border-2 text-black" />
                                </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" x-show="json_data.components[selectedComponent].type == 'text'">
                              <label class="form-label" for="input-type">Tipe Input</label>
                              <div class="form-check py-1">
                                <input type="radio" id="text" name="inputType" value="text" class="form-check-input" x-model="json_data.components[selectedComponent].inputType" />
                                <label class="form-check-label" for="text">Teks</label>
                              </div>
                              <div class="form-check py-1">
                                <input type="radio" id="email" name="inputType" value="email" class="form-check-input" x-model="json_data.components[selectedComponent].inputType" />
                                <label class="form-check-label" for="email">Email</label>
                              </div>
                              <div class="form-check py-1">
                                <input type="radio" id="number" name="inputType" value="number" class="form-check-input" x-model="json_data.components[selectedComponent].inputType" />
                                <label class="form-check-label" for="number">Nomor</label>
                              </div>
                              <div class="form-check py-1">
                                <input type="radio" id="date" name="inputType" value="date" class="form-check-input" x-model="json_data.components[selectedComponent].inputType" />
                                <label class="form-check-label" for="date">Tanggal</label>
                              </div>
                              <div class="form-check py-1">
                                <input type="radio" id="tel" name="inputType" value="tel" class="form-check-input" x-model="json_data.components[selectedComponent].inputType" />
                                <label class="form-check-label" for="tel">Nomor Telepon</label>
                              </div>
                            </div>
                            <div
                              class="mb-3 fv-row"
                              x-show="json_data.components[selectedComponent].type != 'radio' && json_data.components[selectedComponent].type != 'checkbox' && json_data.components[selectedComponent].type != 'section'"
                            >
                              <label class="form-label" for="placeholder">Petunjuk</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" x-show="json_data.components[selectedComponent].type != 'section'">
                              <label class="form-label" for="placeholder">Wajib Diisi</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 class="mb-3" x-show="json_data.components[selectedComponent].type == 'checkbox'">
                              <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-12">
                                      <label class="form-label" :for="`value-${optIdx}`">Value</label>
                                      <input class="form-control" x-model="opt.value" :id="`value-${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 {
      title: @json(old('title', $model->title)) || 'Judul Form Survey',
      json_data: JSON.parse({!! json_encode($model->form_survey ?: '{"title":"Judul Form Survey","components":[]}') !!}),
      selectedComponent: null,

      init() {
        if (this.json_data.components.length > 0) {
          this.selectedComponent = 0;
        }
      },
      selectComponent(i) {
        console.log(i)
        this.selectedComponent = i;
      },
      addField(type) {
        const keyName = this.createRandomString(10);
        const tempData = [...this.json_data.components]
        const defaultObj = {
          text: {
            type: 'text',
            inputType: 'text',
            name: keyName,
            label: 'Label Text Field',
            isRequired: false
          },
          longText: {
            type: 'longText',
            name: keyName,
            label: 'Label Long Text Field',
            isRequired: false
          },
          radio: {
            type: 'radio',
            name: keyName,
            label: 'Label Radio Field',
            isRequired: false,
            options: []
          },
          checkbox: {
            type: 'checkbox',
            name: keyName,
            label: 'Label Checkbox Field',
            isRequired: false,
            options: [],
            values: []
          },
          section: {
            type: 'section',
            label: 'Section Label',
          }
        }
        tempData.push(defaultObj[type])
        this.json_data.components = tempData
        this.selectedComponent = tempData.length - 1
      },
      deleteField() {

        // const tempData = [...this.json_data.components]
        // tempData.push(defaultObj[type])
        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 json_data = {
          ...this.json_data,
          title: this.title
        }

        const response = await fetch("{{ route('form-survey.store') }}", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}",
          },
          body: JSON.stringify({
            id: @json($model->id) || null,
            title: this.title,
            json_data: JSON.stringify(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.');
        }
      },
      createRandomString(length) {
        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
        let result = "";
        for (let i = 0; i < length; i++) {
          result += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return result;
      }
    };
  }
</script>
@endpush