@extends('client.layouts.main')

@section('title', 'Skrining')

@push('styles')
<style>
    #loading-section {
        transition: all 2s;
        z-index: 9999;
        display: grid;
        place-items: center;
        position: absolute;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        background-color: rgb(66, 197, 123);
        color: white
    }

    #loading-section img {
        width: 50px;
        height: 50px;

    }

</style>
@endpush

@section('content')


<form action="{{route('client.skrining.count')}}" method="POST" class="pb-100">
    @csrf



    <section class="p-relative">
        <div id="loading-section" class=" d-none">
            <div>
                <img src="{{asset('img/pertanyaan/loading.gif')}}" alt="Loading Icon">
                <small>Menyimpan jawaban</small>
            </div>
        </div>

        <!-- faq-area -->
        <div class="faq-area p-relative pt-50 pb-50 fix w-75 mx-auto"
            style="background-image: url(img/shape/header-sape6.html); background-position: right center; background-size: auto;background-repeat: no-repeat;">


            <div class="container">
                <div class="section-title  mb-50 text-center">
                    <h2>Jawab pertanyaan sesuai kondisi anda</h2>
                </div>
                <div class="faq-wrap">
                    @foreach ($data['pertanyaan'] as $index => $item)
                    <div id="question-{{$index + 1}}"
                        class=" {{ $index + 1 == 1 ? '' : 'd-none'}} mx-auto text-center question ">
                        <div class="row">
                            <img src="{{asset($item->gambar)}}" style="width 400px; height: 400px"
                                class="col-lg-6 rounded" alt="Gambar Pertanyaan">

                            <div class="col-lg-6">
                                <div class="card ">
                                    <div class="card-header w-100" style="width: 100% !important;" id="headingThree">
                                        <h2 class="mb-0">
                                            <button class="faq-btn" type="button">
                                                {{$index + 1}}. {{$item->nama}}
                                            </button>
                                        </h2>
                                    </div>
                                    <div class="card-body text-left mt-3">
                                        <div class="form-check-custom mr-3">
                                            <label for="jawaban-ya-{{$index + 1}}">
                                                Ya
                                            </label>
                                            <input onclick="checkAnswer('jawaban-ya-'+{{$index + 1}})" type="radio" name="jawaban[{{$index+1}}]"
                                                value="ya" id="jawaban-ya-{{$index + 1}}">
                                        </div>

                                        <div class="form-check-custom">
                                            <label for="jawaban-tidak-{{$index + 1}}">
                                                Tidak
                                            </label>
                                            <input onclick="checkAnswer('jawaban-tidak-'+{{$index + 1}})" type="radio" name="jawaban[{{$index+1}}]"
                                                value="tidak" id="jawaban-tidak-{{$index + 1}}">
                                        </div>
                                    </div>

                                    <div class=" slider-btn btn-disable prev-btn mb-4 mt-0 ms-auto">
                                        <p class="btn ss-btn" data-animation="fadeInRight" data-delay=".8s">
                                            <i class="fas fa-chevron-left"></i>
                                            Sebelumnya
                                        </p>
                                    </div>
                                </div>

                            </div>


                        </div>

                    </div>
                    @endforeach

                    <div id="question-{{count($data['pertanyaan']) + 1}}" class=" d-none mx-auto text-center question ">
                        <div class="row">
                            {{-- <img src="{{asset($item->gambar)}}" style="width 400px; height: 400px"
                            class="col-lg-6 rounded" alt="Gambar Pertanyaan"> --}}

                            <div class="col-lg-6 mx-auto">
                                <div class="card ">
                                    <div class="card-header w-100" style="width: 100% !important;" id="headingThree">
                                        <h2 class="mb-0">
                                            <button class="faq-btn" type="button">
                                                {{count($data['pertanyaan']) + 1}}. Usia
                                            </button>
                                        </h2>
                                    </div>
                                    <div class="card-body text-left mt-3">
                                        <div class="form-check-custom mr-3">
                                            <label for="usia-1">41-45 Tahun</label>
                                            <input onclick="checkAnswer('usia-1')" type="radio" name="usia" value="41-45 Tahun"
                                                id="usia-1">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="usia-2">46-50 Tahun</label>
                                            <input onclick="checkAnswer('usia-2')" type="radio" name="usia" value="46-50 Tahun"
                                                id="usia-2">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="usia-3">51-55 Tahun</label>
                                            <input onclick="checkAnswer('usia-3')" type="radio" name="usia" value="51-55 Tahun"
                                                id="usia-3">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="usia-4">56-60 Tahun</label>
                                            <input onclick="checkAnswer('usia-4')" type="radio" name="usia" value="56-60 Tahun"
                                                id="usia-4">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="usia-5">>60 Tahun</label>
                                            <input onclick="checkAnswer('usia-5')" type="radio" name="usia" value=">60 Tahun"
                                                id="usia-5">
                                        </div>

                                    </div>

                                    <div class=" slider-btn btn-disable prev-btn mb-4 mt-0 ms-auto">
                                        <p class="btn ss-btn" data-animation="fadeInRight" data-delay=".8s">
                                            <i class="fas fa-chevron-left"></i>
                                            Sebelumnya
                                        </p>
                                    </div>
                                </div>

                            </div>


                        </div>

                    </div>

                    <div id="question-{{count($data['pertanyaan']) + 2}}" class=" d-none mx-auto text-center question ">
                        <div class="row">
                            {{-- <img src="{{asset($item->gambar)}}" style="width 400px; height: 400px"
                            class="col-lg-6 mx-auto rounded" alt="Gambar Pertanyaan"> --}}

                            <div class="col-lg-6 mx-auto">
                                <div class="card ">
                                    <div class="card-header w-100" style="width: 100% !important;" id="headingThree">
                                        <h2 class="mb-0">
                                            <button class="faq-btn" type="button">
                                                {{count($data['pertanyaan']) + 2}}. Tingkat Pendidikan
                                            </button>
                                        </h2>
                                    </div>
                                    <div class="card-body text-left mt-3">
                                        <div class="form-check-custom mr-3">
                                            <label for="tingkat_pendidikan-1">SD</label>
                                            <input onclick="checkAnswer('tingkat_pendidikan-1')" type="radio" name="tingkat_pendidikan"
                                                value="SD" id="tingkat_pendidikan-1">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="tingkat_pendidikan-2">SMP</label>
                                            <input onclick="checkAnswer('tingkat_pendidikan-2')" type="radio" name="tingkat_pendidikan"
                                                value="SMP" id="tingkat_pendidikan-2">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="tingkat_pendidikan-3">SMA</label>
                                            <input onclick="checkAnswer('tingkat_pendidikan-3')" type="radio" name="tingkat_pendidikan"
                                                value="SMA" id="tingkat_pendidikan-3">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="tingkat_pendidikan-4">PT</label>
                                            <input onclick="checkAnswer('tingkat_pendidikan-4')" type="radio" name="tingkat_pendidikan"
                                                value="PT" id="tingkat_pendidikan-4">
                                        </div>
                                    </div>

                                    <div class=" slider-btn btn-disable prev-btn mb-4 mt-0 ms-auto">
                                        <p class="btn ss-btn" data-animation="fadeInRight" data-delay=".8s">
                                            <i class="fas fa-chevron-left"></i>
                                            Sebelumnya
                                        </p>
                                    </div>
                                </div>

                            </div>


                        </div>

                    </div>

                    <div id="question-{{count($data['pertanyaan']) + 3}}" class=" d-none mx-auto text-center question ">
                        <div class="row">
                            {{-- <img src="{{asset($item->gambar)}}" style="width 400px; height: 400px"
                            class="col-lg-6 mx-auto rounded" alt="Gambar Pertanyaan"> --}}

                            <div class="col-lg-6 mx-auto">
                                <div class="card ">
                                    <div class="card-header w-100" style="width: 100% !important;" id="headingThree">
                                        <h2 class="mb-0">
                                            <button class="faq-btn" type="button">
                                                {{count($data['pertanyaan']) + 3}}. Status Pernikahan
                                            </button>
                                        </h2>
                                    </div>
                                    <div class="card-body text-left mt-3">
                                        <div class="form-check-custom mr-3">
                                            <label for="status_pernikahan-1">Belum Menikah</label>
                                            <input onclick="checkAnswer('status_pernikahan-1')" type="radio" name="status_pernikahan"
                                                value="Belum Menikah" id="status_pernikahan-1">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="status_pernikahan-2">< 16 Tahun</label>
                                            <input onclick="checkAnswer('status_pernikahan-2')" type="radio" name="status_pernikahan"
                                                value="< 16 Tahun" id="status_pernikahan-2">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="status_pernikahan-3">16-20 Tahun</label>
                                            <input onclick="checkAnswer('status_pernikahan-3')" type="radio" name="status_pernikahan"
                                                value="16-20 Tahun" id="status_pernikahan-3">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="status_pernikahan-4">21-25 Tahun</label>
                                            <input onclick="checkAnswer('status_pernikahan-4')" type="radio" name="status_pernikahan"
                                                value="21-25 Tahun" id="status_pernikahan-4">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="status_pernikahan-5">26-30 Tahun</label>
                                            <input onclick="checkAnswer('status_pernikahan-5')" type="radio" name="status_pernikahan"
                                                value="26-30 Tahun" id="status_pernikahan-5">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="status_pernikahan-6">> 30 Tahun</label>
                                            <input onclick="checkAnswer('status_pernikahan-6')" type="radio" name="status_pernikahan"
                                                value="> 30 Tahun" id="status_pernikahan-6">
                                        </div>
                                    </div>

                                    <div class=" slider-btn btn-disable prev-btn mb-4 mt-0 ms-auto">
                                        <p class="btn ss-btn" data-animation="fadeInRight" data-delay=".8s">
                                            <i class="fas fa-chevron-left"></i>
                                            Sebelumnya
                                        </p>
                                    </div>
                                </div>

                            </div>


                        </div>

                    </div>

                    <div id="question-{{count($data['pertanyaan']) + 4}}" class=" d-none mx-auto text-center question ">
                        <div class="row">
                            {{-- <img src="{{asset($item->gambar)}}" style="width 400px; height: 400px"
                            class="col-lg-6 mx-auto rounded" alt="Gambar Pertanyaan"> --}}

                            <div class="col-lg-6 mx-auto">
                                <div class="card ">
                                    <div class="card-header w-100" style="width: 100% !important;" id="headingThree">
                                        <h2 class="mb-0">
                                            <button class="faq-btn" type="button">
                                                {{count($data['pertanyaan']) + 4}}. Penghasilan per Bulan
                                            </button>
                                        </h2>
                                    </div>
                                    <div class="card-body text-left mt-3">
                                        <div class="form-check-custom mr-3">
                                            <label for="penghasilan-1">< Rp. 500.000</label>
                                            <input onclick="checkAnswer('penghasilan-1')" type="radio" name="penghasilan"
                                                value="< Rp. 500.000" id="penghasilan-1">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="penghasilan-2">Rp. 500.000 - 1.000.000</label>
                                            <input onclick="checkAnswer('penghasilan-2')" type="radio" name="penghasilan"
                                                value="Rp. 500.000 - 1.000.000" id="penghasilan-2">
                                        </div>
                                        <div class="form-check-custom mr-3">
                                            <label for="penghasilan-3">> Rp. 2.500.000</label>
                                            <input onclick="checkAnswer('penghasilan-3')" type="radio" name="penghasilan"
                                                value="> Rp. 2.500.000" id="penghasilan-3">
                                        </div>
                                    </div>

                                    <div class=" slider-btn btn-disable prev-btn mb-4 mt-0 ms-auto">
                                        <p class="btn ss-btn" data-animation="fadeInRight" data-delay=".8s">
                                            <i class="fas fa-chevron-left"></i>
                                            Sebelumnya
                                        </p>
                                    </div>
                                </div>

                            </div>


                        </div>

                    </div>

                    <div id="question-data" class="d-none">
                        <div class="card mb-5">
                            <div class="card-header">
                                <h2 class="mb-0">
                                    <button class="faq-btn" type="button" data-toggle="collapse"
                                        data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                                        Jawab pertanyaan berikut untuk melihat hasil skrining
                                    </button>
                                </h2>
                            </div>
                            <div class="card-body mt-5" style="overflow: auto">
                                <div class="row">
                                    <div class="col-lg-12">
                                        <div class="contact-field p-relative c-name mb-3">
                                            <label for="kebiasaan_merokok" class="mb-2">Kebiasaan Merokok</label>
                                            <select id="kebiasaan_merokok" name="kebiasaan_merokok"
                                                class="form-select w-100" style="width: 100%" required>
                                                <option selected disabled>Pilih Kebiasaan Merokok</option>
                                                <option value="Tidak Merokok">Tidak Merokok</option>
                                                <option value="Merokok">Merokok</option>
                                                <option value="Vape">Vape</option>
                                            </select>
                                        </div>

                                    </div>

                                    <div class="col-lg-12 d-none" id="merokok-section">
                                        <div class="contact-field p-relative c-name mb-3">
                                            <label for="jumlah_merokok" id="merokok-label" class="mb-2"></label>
                                            <input type="phone" id="merokok-input" name="jumlah_merokok"
                                                id="jumlah_merokok" placeholder="">
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="contact-field p-relative c-name mb-3">
                                            <label for="no_hp" class="mb-2">No. HP</label>
                                            <input type="phone" name="no_hp" id="no_hp"
                                                placeholder="Masukkan no hp aktif kamu" required>
                                        </div>
                                    </div>
                                    <div class="col-lg-12">
                                        <div class="contact-field p-relative c-message mb-3">
                                            <label for="alamat" class="mb-2">Alamat</label>
                                            <textarea name="alamat" id="alamat" cols="30" rows="10"
                                                placeholder="Masukkan alamat kamu" required></textarea>
                                        </div>
                                    </div>

                                    <div class="col-lg-12">
                                        <div class="contact-field p-relative c-name mb-3">
                                            <label for="kota_uuid" class="mb-2">Kota</label>
                                            <select id="kota_uuid" name="kota_uuid" class="custom-select w-100"
                                                style="width: 100%" id="inputGroupSelect04" required>
                                                <option selected disabled>Pilih Kota</option>
                                                @foreach ($data['kota'] as $item)
                                                <option value="{{$item->uuid}}">{{$item->nama}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="d-flex justify-content-between">
                                    <div class="slider-btn mt-3  prev-btn">
                                        <p class="btn ss-btn">
                                            <i class="fas fa-chevron-left"></i>
                                            Sebelumnya
                                        </p>
                                    </div>

                                    <div class="slider-btn mt-3">
                                        <button type="submit" class="btn ss-btn">
                                            <i class="fas fa-chevron-right"></i>
                                            Skrining
                                        </button>
                                    </div>
                                </div>

                            </div>


                        </div>


                    </div>

                </div>

            </div>
        </div>
        <!-- faq-aread-end -->
    </section>


</form>
@endsection

@push('scripts')
<script>
    let no = 1;
    let submit = false;

    // $('#kebiasaan_merokok').change(() => {
    //     switch ($('#kebiasaan_merokok').val()) {
    //         case 'Tidak Merokok':
    //             $('#jumlah_merokok').removeClass('d-none');
    //             $('#jumlah_merokok').setAttr('placeholder', 'Masukkan jumlah berapa batang/hari');
    //             break;
    //         case 'Vape':
    //         $('#jumlah_merokok').removeClass('d-none');
    //             $('#jumlah_merokok').setAttr('placeholder', 'Masukkan jumlah berapa ml/hari');
    //             break;
    //         default
    //         $('#jumlah_merokok').addClass('d-none');


    //     }
    // })

    $('#kebiasaan_merokok').change(() => {
        if ($('#kebiasaan_merokok').val() == 'Tidak Merokok') {
            $('#merokok-section').addClass('d-none');
        }

        if ($('#kebiasaan_merokok').val() == 'Merokok') {
            $('#merokok-section').removeClass('d-none');
            $('#merokok-label').text('Batang Rokok/Hari');
            $('#merokok-input').attr('placeholder', 'Masukkan jumlah berapa batang/hari');
        }

        if ($('#kebiasaan_merokok').val() == 'Vape') {
            $('#merokok-section').removeClass('d-none');
            $('#merokok-label').text('ml/Hari');
            $('#merokok-input').attr('placeholder', 'Masukkan jumlah berapa ml/hari');
        }
    })

    const checkAnswer = (element = '') => {
        if (document.getElementById(element) && document.getElementById(element).checked) {
            $('#loading-section').removeClass('d-none');
            setTimeout(() => {
                no++;
                $('.question').addClass('d-none');
                $('#question-' + no).removeClass('d-none');
                if (no > 1) {
                    $('.prev-btn').removeClass('btn-disable');
                } else {
                    $('.prev-btn').addClass('btn-disable');
                }

                if (no > 14) {
                    $('#question-data').removeClass('d-none');
                } else {
                    $('#question-data').addClass('d-none');
                }
                $('#loading-section').addClass('d-none');

            }, 500);
        }


    }

    checkAnswer()

    const setQuestion = () => {
        $('.question').addClass('d-none');
        $('#question-' + no).removeClass('d-none');
    }

    $('.prev-btn').click(() => {
        if (!$('.prev-btn').hasClass('btn-disable')) {
            no--;
            if (no > 1) {
                $('.prev-btn').removeClass('btn-disable');
            } else {
                $('.prev-btn').addClass('btn-disable');
            }
            setQuestion();
            if (no > 14) {
                $('#question-data').removeClass('d-none');
            } else {
                $('#question-data').addClass('d-none');
            }
        }

    })

</script>
@endpush