@extends('layouts.mobile')

@section('contents')
    @include('partials.mobile.navbar')
    <main class="form-signin w-100 m-auto py-5">
        <div class="min-h-100 d-flex w-100 align-items-center">
            <div class="w-100">
                <div class="text-center">
                    <img class="mb-4 img-fluid" src="{{ asset('assets/mobile/img/logo.png') }}" alt="" />
                </div>
                <div class="card login bg-glass mb-5">
                    <div class="card-body">
                        <form method="post">
                            @csrf
                            <h1 class="h5 text-center mb-3 fw-normal">Form Survey</h1>
                            <ul>
                                <li class="ask" id="q1">
                                    Apakah pernah menggunakan Koyo sebelumnya?
                                    <input type="hidden" name="question[1]"
                                        value="Apakah pernah menggunakan Koyo sebelumnya?" />
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_a1" name="jawaban[1]"
                                            value="Pernah" onchange="chAsk('q2')">
                                        <label class="form-check-label" for="opt_a1">
                                            Pernah
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_b1" name="jawaban[1]"
                                            value="Tidak Pernah" onchange="chAsk('q8')">
                                        <label class="form-check-label" for="opt_b1">
                                            Tidak Pernah
                                        </label>
                                    </div>
                                </li>

                                <li class="ask d-none" id="q2">
                                    Apa merek koyo yang digunakan?
                                    <input type="hidden" name="question[2]" value="Apa merek koyo yang digunakan?" />
                                    <div class="form-check">
                                        <input class="form-check-input" onchange="chAsk('q3')" type="radio" id="opt_a2"
                                            name="jawaban[2]" value="Salonpas Reg">
                                        <label class="form-check-label" for="opt_a2">
                                            Salonpas Reg
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/salonpas_reg.png') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" onchange="chAsk('q3')" type="radio" id="opt_b2"
                                            name="jawaban[2]" value="Salonpas Hot">
                                        <label class="form-check-label" for="opt_b2">
                                            Salonpas Hot
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/salonpas_reg.png') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" onchange="chAsk('q3')" type="radio" id="opt_c2"
                                            name="jawaban[2]" value="Salonpas Extra Hot">
                                        <label class="form-check-label" for="opt_c2">
                                            Salonpas Extra Hot
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/salonpas_reg.png') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" onchange="chAsk('q6')" type="radio" id="opt_d2"
                                            name="jawaban[2]" value="Koyo Cabe">
                                        <label class="form-check-label" for="opt_d2">
                                            Koyo Cabe
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/koyo_cabe.png') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" onchange="chAsk('q4')" type="radio" id="opt_e2"
                                            name="jawaban[2]" value="Hansaplast Hangat">
                                        <label class="form-check-label" for="opt_e2">
                                            Hansaplast Hangat
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/hansaplast_hangat.png') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" onchange="chAsk('q4')" type="radio" id="opt_f2"
                                            name="jawaban[2]" value="Hansaplast Panas">
                                        <label class="form-check-label" for="opt_f2">
                                            Hansaplast Panas
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/hansaplast_hangat.png') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" onchange="chAsk('q5')" type="radio"
                                            onchange="chAsk('q4')" id="opt_g2" name="jawaban[2]" value="Takahi Hangat">
                                        <label class="form-check-label" for="opt_g2">
                                            Takahi Hangat
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/tkh.png') }}" class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" onchange="chAsk('q5')" type="radio"
                                            onchange="chAsk('q4')" id="opt_h2" name="jawaban[2]" value="Takahi Panas">
                                        <label class="form-check-label" for="opt_h2">
                                            Takahi Panas
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/tkh.png') }}" class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" onchange="chAsk('q5')" type="radio"
                                            onchange="chAsk('q4')" id="opt_i2" name="jawaban[2]" value="Hot in koyo">
                                        <label class="form-check-label" for="opt_i2">
                                            Hot in koyo
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/tkh.png') }}" class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_e2" name="jawaban[2]"
                                            value="Lainnya" onchange="_shwtxt('txt_e2')">
                                        <label class="form-check-label" for="opt_e2">
                                            Lainnya
                                        </label>
                                        <div class="txt-other d-none txt_e2">
                                            <input type="text" class="form-control" id="opt_e2t"
                                                onkeyup="_chvl('opt_e2t', 'opt_e2')" onblur="_end()" />
                                        </div>
                                    </div>
                                </li>

                                <li class="ask d-none" id="q3">
                                    Varian yang mana?
                                    <input type="hidden" name="question[3]" value="Varian yang mana?" />
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_a3" name="jawaban[3]"
                                            value="Salonpas Biasa" onchange="_end()">
                                        <label class="form-check-label" for="opt_a3">
                                            Salonpas Biasa / Putih
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/salonpas_reg.png') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_b3" name="jawaban[3]"
                                            value="Salonpas Hot" onchange="_end()">
                                        <label class="form-check-label" for="opt_b3">
                                            Salonpas Hot / Merah
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/salonpas_hot.png') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_c3" name="jawaban[3]"
                                            value="Salonpas Extra Hot" onchange="chAsk('q9')">
                                        <label class="form-check-label" for="opt_c3">
                                            Salonpas Extra Hot / hitam
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/salonpas_extra_hot.png') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                </li>

                                <li class="ask d-none" id="q4">
                                    Varian yang mana?
                                    <input type="hidden" name="question[4]" value="Varian yang mana?" />
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_a4" name="jawaban[4]"
                                            value="Hansaplast Hangat" onchange="_end()">
                                        <label class="form-check-label" for="opt_a4">
                                            Hansaplast Hangat
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/hansaplast_hangat.png') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_b4" name="jawaban[4]"
                                            value="Hansaplast Panas" onchange="_end()">
                                        <label class="form-check-label" for="opt_b4">
                                            Hansaplast Panas
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/hansaplast_panas.jpg') }}"
                                                class="img-fluid w-50" />
                                        </label>
                                    </div>
                                </li>

                                <li class="ask d-none" id="q5">
                                    Varian yang mana?
                                    <input type="hidden" name="question[5]" value="Varian yang mana?" />
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_a5" name="jawaban[5]"
                                            value="Takahi Hangat" onchange="_end()">
                                        <label class="form-check-label" for="opt_a5">
                                            Takahi Hangat
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/tkh.png') }}" class="img-fluid w-50" />
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_b5" name="jawaban[5]"
                                            value="Takahi Panas" onchange="_end()">
                                        <label class="form-check-label" for="opt_b5">
                                            Takahi Panas
                                            <br />
                                            <img src="{{ asset('assets/mobile/img/tkp.png') }}" class="img-fluid w-50" />
                                        </label>
                                    </div>
                                </li>

                                <li class="ask d-none" id="q6">
                                    <input type="hidden" name="question[6]"
                                        value="Kenapa lebih suka koyo pakai koyo cabe dibading koyo lainnya?" />
                                    Kenapa lebih suka koyo pakai koyo cabe dibading koyo lainnya?
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_a6" name="jawaban[6]"
                                            value="Lebih panas dibanding koyo lainnya / lebih nendang"
                                            onchange="chAsk('q7')">
                                        <label class="form-check-label" for="opt_a6">
                                            Lebih panas dibanding koyo lainnya / lebih nendang
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_b6" name="jawaban[6]"
                                            value="Cocok klo lagi pegal banget" onchange="chAsk('q7')">
                                        <label class="form-check-label" for="opt_b6">
                                            Cocok klo lagi pegal banget
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_c6" name="jawaban[6]"
                                            value="Ga gatal / ga bikin kulit merah / ga iritasi" onchange="chAsk('q7')">
                                        <label class="form-check-label" for="opt_c6">
                                            Ga gatal / ga bikin kulit merah / ga iritasi
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_d6" name="jawaban[6]"
                                            value="Nempelnya bagus" onchange="chAsk('q7')">
                                        <label class="form-check-label" for="opt_d6">
                                            Nempelnya bagus
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_e6" name="jawaban[6]"
                                            value="Setiap beli koyo diwarung dikasihnya ini" onchange="chAsk('q7')">
                                        <label class="form-check-label" for="opt_e6">
                                            Setiap beli koyo diwarung dikasihnya ini
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_f6" name="jawaban[6]"
                                            value="Lainnya" onchange="_shwtxt('txt_e6')">
                                        <label class="form-check-label" for="opt_f6">
                                            Lainnya
                                        </label>
                                        <div class="txt-other d-none txt_e6">
                                            <input type="text" class="form-control" id="opt_f6t"
                                                onkeyup="_chvl('opt_f6t', 'opt_f6')" onblur="chAsk('q7')" />
                                        </div>
                                    </div>
                                </li>

                                <li class="ask d-none" id="q7">
                                    <input type="hidden" name="question[7]" value="Biasanya kapan pakainya?" />
                                    Biasanya kapan pakainya?
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_a7" name="jawaban[7]"
                                            value="Sebelum Kerja" onchange="_end()">
                                        <label class="form-check-label" for="opt_a7">
                                            Sebelum kerja
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_b7" name="jawaban[7]"
                                            value="Setelah kerja" onchange="_end()">
                                        <label class="form-check-label" for="opt_b7">
                                            Setelah kerja
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_c7" name="jawaban[7]"
                                            value="Pas kerja" onchange="_end()">
                                        <label class="form-check-label" for="opt_c7">
                                            Pas kerja
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_d7" name="jawaban[7]"
                                            value="Kadang-kadang klo pegal banget" onchange="_end()">
                                        <label class="form-check-label" for="opt_d7">
                                            Kadang-kadang klo pegal banget
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_e7" name="jawaban[7]"
                                            value="Lainnya" onchange="_shwtxt('txt_e7')">
                                        <label class="form-check-label" for="opt_e7">
                                            Lainnya
                                        </label>
                                        <div class="txt-other d-none txt_e7">
                                            <input type="text" class="form-control" id="opt_e7t"
                                                onkeyup="_chvl('opt_e7t', 'opt_e7')" onblur="_end()" />
                                        </div>
                                    </div>

                                </li>
                                <li class="ask d-none" id="q8">
                                    Jika pegal / nyeri otot , apa yang dilakukan atau product apa yang digunakan selain koyo
                                    <input type="hidden" name="question[8]"
                                        value="Jika pegal / nyeri otot , apa yang dilakukan atau product apa yang digunakan selain koyo" />
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_a8" name="jawaban[8]"
                                            value="dipijat" onchange="_end()">
                                        <label class="form-check-label" for="opt_a8">
                                            dipijat
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_b8" name="jawaban[8]"
                                            value="Tidak pakai apa-apa  / istirahat aja" onchange="_end()">
                                        <label class="form-check-label" for="opt_b8">
                                            Tidak pakai apa-apa / istirahat aja
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_c8" name="jawaban[8]"
                                            value="Pakai produk oles seperti  krim gel balsam atau minyak urut"
                                            onchange="_end()">
                                        <label class="form-check-label" for="opt_c8">
                                            Pakai produk oles seperti krim gel balsam atau minyak urut
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_d8" name="jawaban[8]"
                                            value="Minum Jamu" onchange="_end()">
                                        <label class="form-check-label" for="opt_d8">
                                            Minum Jamu
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_e8" name="jawaban[8]"
                                            value="Lainnya" onchange="_shwtxt('txt_e8')">
                                        <label class="form-check-label" for="opt_e8">
                                            Lainnya
                                        </label>
                                        <div class="txt-other d-none txt_e8">
                                            <input type="text" class="form-control" id="opt_e8t"
                                                onkeyup="_chvl('opt_e8t', 'opt_e8')" onblur="_end()" />
                                        </div>
                                    </div>
                                </li>

                                <li class="ask d-none" id="q9">
                                    Kenapa memilih salonpas extra HOT?
                                    <input type="hidden" name="question[9]"
                                        value="Kenapa memilih salonpas extra HOT?" />
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" id="opt_a9" name="jawaban[9]"
                                            onchange="_end()"
                                            value="Karena lebih panas dibanding koyo lainnya/ suka koyo yang panas">
                                        <label class="form-check-label" for="opt_a9">
                                            Karena lebih panas dibanding koyo lainnya / suka koyo yang panas
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="jawaban[9]"
                                            onchange="_end()"
                                            value="Tidak berasa panas pakai salonpas variant lain / koyo lain"
                                            id="opt_b9">
                                        <label class="form-check-label" for="opt_b9">
                                            Tidak berasa panas pakai salonpas variant lain /koyo lain
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="jawaban[9]"
                                            value="Direkomendasikan warung" id="opt_c9" onchange="_end()">
                                        <label class="form-check-label" for="opt_c9">
                                            Direkomendasikan warung
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="jawaban[9]"
                                            value="Pernah dapat samplenya dan dicoba enak" id="opt_d9"
                                            onchange="_end()">
                                        <label class="form-check-label" for="opt_d9">
                                            Pernah dapat samplenya dan dicoba enak
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="jawaban[9]"
                                            value="Cocok kalau lagi pegal sekali" id="opt_e9" onchange="_end()">
                                        <label class="form-check-label" for="opt_e9">
                                            Cocok kalau lagi pegal sekali
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="jawaban[9]" id="opt_f9"
                                            value="Lainnya" onchange="_shwtxt('txt_e9')">
                                        <label class="form-check-label" for="opt_f9">
                                            Lainnya
                                        </label>
                                        <div class="txt-other d-none txt_e9">
                                            <input type="text" class="form-control" id="opt_f9t"
                                                onkeyup="_chvl('opt_f9t', 'opt_f9')" onblur="_end()" />
                                        </div>
                                    </div>
                                </li>
                            </ul>

                            <div class="mb-4">
                                <button class="btn btn-default w-100 py-2" id="submit" disabled="true"
                                    type="submit">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
    <style>
        .form-check {
            display: block;
            padding: 10px 0px 10px 0;
            margin-bottom: 10px;
        }
    </style>
    <script>
        function chAsk(id) {
            const t = [].slice.call(
                document.querySelectorAll('.ask')
            )
            if (t) {
                const l = t.map((e) => {
                    e.classList.add('d-none');
                })
            }
            document.querySelector('#' + id).classList.remove('d-none');
        }

        function _end() {
            document.querySelector('#submit').classList.add('btn-purple');
            document.querySelector('#submit').removeAttribute('disabled');
        }

        function _shwtxt(c) {
            const t = [].slice.call(
                document.querySelectorAll('.txt-other')
            )
            if (t) {
                const l = t.map((e) => {
                    e.classList.add('d-none');
                })
            }
            document.querySelector('.' + c).classList.remove('d-none');
        }

        function _chvl(me, id) {
            document.querySelector('#' + id).value = document.querySelector('#' + me).value;
        }
    </script>
@endpush