@extends('layouts.landing.index')
@vite([
  // 'resources/less/home.less',
  // 'resources/js/test.js'
])
@section('content')
<!-- Navigation Bar -->
@include('layouts.landing.nav')

<!-- Content -->
<div class="container-xl mt-5 mb-5">
  <div class="row d-flex justify-content-center">
    <div class="col-12 col-lg-8">
      <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' && c.inputType !== 'tel'">
                            <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 ?? 'text'}`"
                                :name="`${c.name}`"
                                :id="`${c.name}`"
                                x-model="c.value"
                                :placeholder="`${c.placeholder ?? ''}`"
                                x-bind:required="c.isRequired"
                              />
                            </div>
                          </template>
                          <template x-if="c.type === 'text' && c.inputType === 'tel'">
                            <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 ?? 'text'}`"
                                :name="`${c.name}`"
                                :id="`${c.name}`"
                                x-model="c.value"
                                :placeholder="`${c.placeholder ?? ''}`"
                                x-bind:required="c.isRequired"
                                pattern="[0-9]{10,16}"
                                title="Nomor telepon harus terdiri antara 10 dan 16 digit."
                              />
                            </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 ?? ''}`" 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" 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)" />
                                  <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>
{{--              <div id="captcha" class="mb-3"></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 class="modal fade" id="guide"  tabindex="-1" >
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header">
        Panduan Aktifasi Fitur Location
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-4">
            1. Klik menu pengaturan pada <strong>Address Bar</strong>.
            <img src="{{ asset('assets/images/survey/chrome 1.png') }}" class="w-100" alt="step 1"/>
          </div>
          <div class="col-4">
            2. Pastikan fitur <strong>Location</strong> sudah aktif.
            <img src="{{ asset('assets/images/survey/chrome 2.png') }}" class="w-100" alt="step 1"/>
          </div>
          <div class="col-4">
            3. Klik tombol <strong>Reload</strong> untuk memperbarui pengaturan pada browser anda.
            <img src="{{ asset('assets/images/survey/chorme 3.png') }}" class="w-100" alt="step 1"/>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" type="button" data-bs-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>

<!-- Footer -->
@include('layouts.landing.footer')
@endsection
@push('scripts')
<script>
  function dataForm() {
    return {
      json_data: JSON.parse({!! json_encode($model->form_survey ?: '{"title":"Survey Kepuasan","components":[]}') !!}),
      latitude: '',
      longitude: '',
      address: '',
      captchaStatus: false,
      showButtonPermission: false,
      init() {

      },


      async submitForm() {
        // const token = grecaptcha.getResponse();
        // console.log(token)
        // const score = this.getScore(this.json_data.components)

        const response = await fetch("{{ route('fill-survey-store') }}", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}",
          },
          body: JSON.stringify({
            survey_data: JSON.stringify({
              ...this.json_data,
              // totalScore: score,
            }),
            form_survey_id: @json($model->id),
            latitude: this.latitude,
            longitude: this.longitude,
            address: this.address,
            // token,
          }),
        });
        const result = await response.json();
        if (response.ok && result.redirect) {
          setTimeout(() => window.location.href = result.redirect, 200);
        } else {
          Swal.fire({
            title: "Error",
            text: 'An error occurred. Please try again.',
            icon: "error"
          });
        }
      },
    };
  };
</script>
@endpush