{{-- Close your eyes. Count to one. That is how long forever feels. --}}
<form wire:submit.prevent="save">
    <div class="row">
        {{-- main question --}}
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label>
                    <small class="text-danger">[{{ $data['question_code'] }}]</small>
                    {{ $data['question'] }}
                </label>
                <div wire:loading wire:target="loadData">

                </div>
                @foreach ($data['answer'] as $key => $item)
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="{{ $data['question_code'] . $key }}"
                        value="{{ $item['option_code'] . '||' . $item['option'] . '||' . json_encode($item['questionnares']) }}"
                        wire:model.debounce.500ms="firstOption" wire:click="loadData">
                    <label class="form-check-label" for="{{ $data['question_code'] . $key }}">
                        {{ $item['option'] }}
                    </label>
                </div>
                @endforeach
            </div>
        </div>
        {{-- question --}}
        @if ($questionnares)
        @foreach ($questionnares as $questionKey => $question)
        <hr>
        @if ($question['question_type'] == 'Pilihan ganda')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label>
                    <small class="text-danger">[{{ $question['question_code'] }}]</small>
                    {{ $question['question'] }}
                </label>
                @foreach ($question['answers'] as $answerKey => $answer)
                @if ($answer['isian'] == 'isian[on]')
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="{{ $question['question_code'] . $answerKey }}"
                        value="{{ json_encode($answer) }}"
                        wire:model.debounce.500ms="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] . '.1' }}">
                    <label class="form-check-label" for="{{ $question['question_code'] . $answerKey }}">
                        {{ $answer['option'] }}
                    </label>
                </div>
                <div class="form-group">
                    <input @if ($question['answer_rules']=='is_date' ) type="date" @else type="text" @endif
                        class="form-control @if($question['answer_rules'] == 'integer') xn @endif"
                        wire:model.debounce.500ms="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] . '.' . ($answerKey+10) . '.' . $answer['isian_code'] }}"
                        id="{{ $question['question_code'] . $answer['isian_code'] }}">
                </div>
                @else
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="{{ $question['question_code'] . $answerKey }}"
                        value="{{ json_encode($answer) }}"
                        wire:model.debounce.500ms="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] }}">
                    <label class="form-check-label" for="{{ $question['question_code'] . $answerKey }}">
                        {{ $answer['option'] }}
                    </label>
                </div>
                @endif
                @endforeach
            </div>
        </div>
        @elseif ($question['question_type'] == 'Jawaban singkat')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label for="{{ $question['question_code'] }}">
                    <small class="text-danger">[{{ $question['question_code'] }}]</small>
                    {{ $question['question'] }}
                </label>
                <input @if ($question['answer_rules']=='is_date' ) type="date" @else type="text" @endif
                    class="form-control @if($question['answer_rules'] == 'integer') xn @endif"
                    wire:model="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] }}"
                    id="{{ $question['question_code'] }}">
            </div>
        </div>
        @elseif ($question['question_type'] == 'Tanpa Jawaban')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label for="{{ $question['question_code'] }}" class="fw-bold">
                    <small class="text-danger">[{{ $question['question_code'] }}]</small>
                    {{ $question['question'] }}
                </label>
                <input type="hidden" wire:model="answers.{{ $question['question_code'] }}"
                    id="{{ $question['question_code'] }}" value="">
            </div>
        </div>
        @elseif ($question['question_type'] == 'Dropdown')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label for="{{ $question['question_code'] }}">
                    <small class="text-danger">[{{ $question['question_code'] }}]</small>
                    {{ $question['question'] }}
                </label>
                <select class="form-control"
                    wire:model="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] }}"
                    id="{{ $question['question_code'] }}">
                    <option value="">- Pilih -</option>
                    @foreach ($question['answers'] as $item)
                    <option value="{{ json_encode($item) }}">{{ $item['option'] }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        @elseif ($question['question_type'] == 'Kotak centang')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label for="{{ $question['question_code'] }}">
                    <small class="text-danger">[{{ $question['question_code'] }}]</small>
                    {{ $question['question'] }}
                </label>
                @php $totalQuestion = count($question['answers']); @endphp
                @foreach ($question['answers'] as $key => $answer)
                <div class="form-check">
                    <input class="form-check-input" type="checkbox"
                        wire:model="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] . '||' . $totalQuestion . '.' . $key }}"
                        value="{{ json_encode($answer) }}" id="{{ $answer['option_code'] . $key }}">
                    <label class="form-check-label" for="{{ $answer['option_code'] . $key }}">
                        {{ $answer['option'] }}
                    </label>
                </div>
                @if ($answer['isian'] == 'isian[on]')
                <div class="form-group">
                    <input type="text" class="form-control"
                        wire:model.500ms="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] . '||' . $totalQuestion . '.' . $key . '.' . $answer['option_code'] . '.' . $answer['isian_code'] }}"
                        id="{{ $answer['option_code'] . $answerKey }}">
                </div>
                @endif
                @endforeach
            </div>
        </div>
        @elseif ($question['question_type'] == 'Skala likert')
        <div class="col-md-6">
            <label for="">
                <small class="text-danger">[{{ $question['question_code'] }}]</small>
                {{ $question['question'] }}
            </label>
            <input type="hidden"
                wire:model="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] }}"
                value="">
        </div>
        <div class="col-md-6">
            @foreach ($question['answers'] as $key => $answer)
            <div class="form-group mb-3">
                <label for="{{ $answer['likert_code'] }}" class="mb-2">
                    {{ ucwords(base_convert($key+10, 10, 36)) . '. ' . $answer['likert'] }}
                </label>
                @foreach ( $answer['is_horizontal'] == "0" ?
                $verticalLikertOptions : $horizontalLikertOptions as $likertKey => $likertOption)
                @if ($answer['is_horizontal'] == '0')
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="{{ $answer['likert_code'] . '.' . $likertKey }}"
                        value="{{ $likertOption['key'] }}"
                        wire:model.debounce.500ms="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] . '.' . $answer['likert_code'] }}">
                    <label class="form-check-label" for="{{ $answer['likert_code'] . '.' . $likertKey }}">
                        {{ $likertOption['value'] }}
                    </label>
                </div>
                @else
                @if($likertKey == 0) <br> @endif
                {{-- <div class=""> --}}
                    <input class="form-check-input" type="radio" id="{{ $answer['likert_code'] . '.' . $likertKey }}"
                        value="{{ $likertOption['key'] }}"
                        wire:model.debounce.500ms="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] . '.' . $answer['likert_code'] }}">
                    <label class="form-check-label me-2" for="{{ $answer['likert_code'] . '.' . $likertKey }}">
                        {{ $likertOption['value'] }}
                    </label>
                    {{--
                </div> --}}
                @endif
                @endforeach
            </div>
            @endforeach
        </div>
        @elseif ($question['question_type'] == 'Lokasi')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label for="{{ $question['question_code'] }}">
                    <small class="text-danger">[{{ $question['question_code'] }}]</small>
                    {{ $question['question'] }}
                </label>
                @if ($question['others'] == 'provinsi')
                <select class="form-control"
                    wire:model="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] }}"
                    id="{{ $question['question_code'] }}">
                    <option value="">- Pilih provinsi -</option>
                    @foreach ($provinces as $province)
                    <option value="{{ json_encode($province) }}">
                        {{ $province['province_name'] }}
                    </option>
                    @endforeach
                </select>
                @elseif ($question['others'] == 'kabupaten')
                <select class="form-control"
                    wire:model="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] }}"
                    id="{{ $question['question_code'] }}">
                    <option value="">- Pilih kabupaten/kota -</option>
                    @if ($cities)
                    @foreach ($cities as $city)
                    <option value="{{ json_encode($city) }}">{{ $city['city_name'] }}</option>
                    @endforeach
                    @endif
                </select>
                @elseif ($question['others'] == 'kecamatan')
                <select class="form-control"
                    wire:model="answers.{{ $question['question_code'] . '||' . $question['question_type'] . '||' . $question['answer_rules'] }}"
                    id="{{ $question['question_code'] }}">
                    <option value="">- Pilih kecamatan -</option>
                    @if ($subdistricts)
                    @foreach ($subdistricts as $city)
                    <option value="{{ json_encode($city) }}">{{ $city['subdistrict_name'] }}</option>
                    @endforeach
                    @endif
                </select>
                @endif
            </div>
        </div>
        @endif
        {{-- sub question --}}
        @if(isset($question['sub_question']))
        @foreach ($question['sub_question'] as $sub_question)
        @if ($sub_question['question_type'] == 'Pilihan ganda')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label>
                    <small class="text-danger">[{{ $sub_question['question_code'] }}]</small>
                    {{ $sub_question['question'] }}
                </label>
                @foreach ($sub_question['answers'] as $answerKey => $answer)
                <div class="form-check">
                    <input class="form-check-input" type="radio" id="{{ $sub_question['question_code'] . $answerKey }}"
                        value="{{ json_encode($answer) }}"
                        wire:model.debounce.500ms="answers.{{ $sub_question['question_code'] . '||' . $sub_question['question_type'] . '||' . $sub_question['answer_rules'] }}">
                    <label class="form-check-label" for="{{ $sub_question['question_code'] . $answerKey }}">
                        {{ $answer['option'] }}
                    </label>
                </div>
                @endforeach
            </div>
        </div>
        @elseif ($sub_question['question_type'] == 'Jawaban singkat')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label for="{{ $sub_question['question_code'] }}">
                    <small class="text-danger">[{{ $sub_question['question_code'] }}]</small>
                    {{ $sub_question['question'] }}
                </label>
                <input @if ($sub_question['answer_rules']=='is_date' ) type="date" @else type="text" @endif
                    class="form-control @if($sub_question['answer_rules'] == 'integer') xn @endif"
                    wire:model="answers.{{ $sub_question['question_code'] . '||' . $sub_question['question_type'] . '||' . $sub_question['answer_rules'] }}"
                    id="{{ $sub_question['question_code'] }}">
            </div>
        </div>
        @elseif ($sub_question['question_type'] == 'Tanpa Jawaban')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label for="{{ $sub_question['question_code'] }}">
                    <small class="text-danger">[{{ $sub_question['question_code'] }}]</small>
                    {{ $sub_question['question'] }}
                </label>
                <input type="hidden"
                    wire:model="answers.{{ $sub_question['question_code'] . '||' . $sub_question['question_type'] . '||' . $sub_question['answer_rules'] }}"
                    id="{{ $sub_question['question_code'] }}" value="">

            </div>
        </div>
        @elseif ($sub_question['question_type'] == 'Lokasi')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label for="{{ $sub_question['question_code'] }}">
                    <small class="text-danger">[{{ $sub_question['question_code'] }}]</small>
                    {{ $sub_question['question'] }}
                </label>
                @if ($sub_question['others'] == 'provinsi')
                <select class="form-control"
                    wire:model="answers.{{ $sub_question['question_code'] . '||' . $sub_question['question_type'] . '||' . $sub_question['answer_rules'] }}"
                    id="{{ $sub_question['question_code'] }}">
                    <option value="">- Pilih provinsi -</option>
                    @foreach ($provinces as $province)
                    <option value="{{ json_encode($province) }}">
                        {{ $province['province_name'] }}
                    </option>
                    @endforeach
                </select>
                @elseif ($sub_question['others'] == 'kabupaten')
                <select class="form-control"
                    wire:model="answers.{{ $sub_question['question_code'] . '||' . $sub_question['question_type'] . '||' . $sub_question['answer_rules'] }}"
                    id="{{ $sub_question['question_code'] }}">
                    <option value="">- Pilih kabupaten/kota -</option>
                    @if ($cities)
                    @foreach ($cities as $city)
                    <option value="{{ json_encode($city) }}">{{ $city['city_name'] }}</option>
                    @endforeach
                    @endif
                </select>
                @endif
            </div>
        </div>
        @elseif ($sub_question['question_type'] == 'Dropdown')
        <div class="col-md-12">
            <div class="form-group mb-3">
                <label for="{{ $sub_question['question_code'] }}">
                    <small class="text-danger">[{{ $sub_question['question_code'] }}]</small>
                    {{ $sub_question['question'] }}
                </label>
                <select class="form-control"
                    wire:model="answers.{{ $sub_question['question_code'] . '||' . $sub_question['question_type'] . '||' . $sub_question['answer_rules'] }}"
                    id="{{ $sub_question['question_code'] }}">
                    <option value="">- Pilih -</option>
                    @foreach ($sub_question['answers'] as $item)
                    <option value="{{ json_encode($item) }}">{{ $item['option'] }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        @endif
        @endforeach
        @endif
        @endforeach
        @endif
    </div>
    <div class="row">
        <div class="col-md-12">
            <button type="submit" class="btn btn-primary">
                <i class="fa fa-save me-1"></i> Simpan
            </button>
        </div>
    </div>
</form>

<script>
    window.addEventListener('loadXn', event => {
        $(".xn").bind("keypress", function (e) {
            var keyCode = e.which ? e.which : e.keyCode;
            if (!(keyCode >= 48 && keyCode <= 57)) {
                return false; 
            } 
                return true;
        });
    });
</script>