@extends('layouts.app')
@section('title', 'Surveys')
@section('content')

    <!-- button back -->
    <a href="{{ URL::to('admin/surveys') }}" class="mb-3 badge text-bg-light text-primary">
        <i class="ti ti-arrow-left">&nbsp;</i> Kembali
    </a>

    <!-- Surveys -->
    <div class="row d-flex align-items-strech">
        <div class="col-lg-12 mx-auto">
            <div class="card">
                <div class="card-header text-white bg-primary">
                    <h3 class="form-label mt-2 text-white border-bottom pb-3">{{ $survey->name }}</h3>
                    <pre for="description" class="mt-3 text-wrap">{{ $survey->description }}</pre>
                </div>
            </div>
        </div>
    </div>

    <!-- Questions -->
    <form method="post" action="{{ URL::to('admin/surveys/question-answers') }}">
        @csrf
        @method('POST')
        <div class="row d-flex align-items-strech" id="question_all">
            <input type="hidden" name="survey_id" value="{{ $survey->id }}">
            @foreach ($survey->questionSurveys as $questionSurveys)
                <div class="col-lg-12 mx-auto row" id="question-{{ $questionSurveys->id }}">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-10">
                                    <label class="form-label">{{ $questionSurveys->name }}</label>
                                </div>
                                @if ($questionSurveys->type == 'Iya atau Tidak')
                                    <div class="col-lg-2 row px-4">
                                        <div class="form-check col-lg-6 mb-2">
                                            <input class="form-check-input" type="radio"
                                                name="question[{{ $questionSurveys->id }}][answer]" value="1" required>
                                            <label class="form-check-label" for="answer">
                                                Iya
                                            </label>
                                        </div>
                                        <div class="form-check col-lg-6">
                                            <input class="form-check-input" type="radio"
                                                name="question[{{ $questionSurveys->id }}][answer]" value="0" required>
                                            <label class="form-check-label" for="answer">
                                                Tidak
                                            </label>
                                        </div>
                                    </div>
                                @elseif ($questionSurveys->type == 'Skala')
                                    <div class="col-lg-12 p-2">
                                        <div class="mx-auto text-center">
                                            <label class="form-check-label"
                                                for="answer">{{ json_decode($questionSurveys->questionDetails->question_label)[0] }}</label>
                                            @for ($i = json_decode($questionSurveys->questionDetails->question_value)[0]; $i <= json_decode($questionSurveys->questionDetails->question_value)[1]; $i++)
                                                <input class="form-check-input mx-2" type="radio"
                                                    name="question[{{ $questionSurveys->id }}][answer]"
                                                    value="{{ $i }}" required>
                                            @endfor
                                            <label class="form-check-label"
                                                for="answer">{{ json_decode($questionSurveys->questionDetails->question_label)[1] }}</label>
                                        </div>
                                    </div>
                                @elseif ($questionSurveys->type == 'Jawaban Angka')
                                    <div class="mt-3 col-lg-12">
                                        <input type="number" class="form-control"
                                            name="question[{{ $questionSurveys->id }}][answer]"
                                            placeholder="Jawaban berupa angka" required>
                                    </div>
                                @elseif ($questionSurveys->type == 'Jawaban Singkat')
                                    <div class="mt-3 col-lg-12">
                                        <input type="text" class="form-control"
                                            name="question[{{ $questionSurveys->id }}][answer]"
                                            placeholder="Jawaban berupa teks singkat" required>
                                    </div>
                                @elseif ($questionSurveys->type == 'Esai')
                                    <div class="mt-3 col-lg-12">
                                        <textarea class="form-control" name="question[{{ $questionSurveys->id }}][answer]" rows="3"
                                            placeholder="Jawaban berupa teks atau esai" required></textarea>
                                    </div>
                                @elseif (
                                    $questionSurveys->type == 'Master' &&
                                        json_decode($questionSurveys->questionDetails->question_value)[0] == 'Alamats')
                                    <div class="col-lg-12 row">
                                        <div class="mt-3 col-lg-6">
                                            @php
                                                // $master = 'App\Models\Master\\' . json_decode($questionSurveys->questionDetails->question_value)[0];
                                                $master = json_decode(
                                                    $questionSurveys->questionDetails->question_value,
                                                )[0];
                                                $prov_unique_id =
                                                    'question-' . $questionSurveys->id . '-answer-provinsi';
                                            @endphp
                                            <select class="form-select" id="{{ $prov_unique_id }}"
                                                name="question[{{ $questionSurveys->id }}][answer]" style="width:100%;"
                                                required>
                                            </select>
                                        </div>
                                        <div class="mt-3 col-lg-6">
                                            @php
                                                // $master = 'App\Models\Master\\' . json_decode($questionSurveys->questionDetails->question_value)[0];
                                                $master = json_decode(
                                                    $questionSurveys->questionDetails->question_value,
                                                )[0];
                                                $kab_unique_id =
                                                    'question-' . $questionSurveys->id . '-answer-kabupaten';
                                            @endphp
                                            <select class="form-select" id="{{ $kab_unique_id }}"
                                                name="question[{{ $questionSurveys->id }}][answer]" style="width:100%;"
                                                required>
                                            </select>
                                        </div>
                                        <div class="mt-3 col-lg-6">
                                            @php
                                                // $master = 'App\Models\Master\\' . json_decode($questionSurveys->questionDetails->question_value)[0];
                                                $master = json_decode(
                                                    $questionSurveys->questionDetails->question_value,
                                                )[0];
                                                $kec_unique_id =
                                                    'question-' . $questionSurveys->id . '-answer-kecamatan';
                                            @endphp
                                            <select class="form-select" id="{{ $kec_unique_id }}"
                                                name="question[{{ $questionSurveys->id }}][answer]" style="width:100%;"
                                                required>
                                            </select>
                                        </div>
                                        <div class="mt-3 col-lg-6">
                                            @php
                                                // $master = 'App\Models\Master\\' . json_decode($questionSurveys->questionDetails->question_value)[0];
                                                $master = json_decode(
                                                    $questionSurveys->questionDetails->question_value,
                                                )[0];
                                                $kel_unique_id =
                                                    'question-' . $questionSurveys->id . '-answer-kelurahan';
                                            @endphp
                                            <select class="form-select" id="{{ $kel_unique_id }}"
                                                name="question[{{ $questionSurveys->id }}][answer]" style="width:100%;"
                                                required>
                                            </select>
                                        </div>
                                    </div>
                                    <script>
                                        // Disabled
                                        $('#{{ $kab_unique_id }}').prop('disabled', true).val(null).trigger('change');
                                        $('#{{ $kec_unique_id }}').prop('disabled', true).val(null).trigger('change');
                                        $('#{{ $kel_unique_id }}').prop('disabled', true).val(null).trigger('change');

                                        $('#{{ $prov_unique_id }}').select2({
                                            placeholder: 'Cari Provinsi',
                                            ajax: {
                                                url: '{{ URL::to('admin/surveys/cari/provinsi' . '?q=') }}',
                                                dataType: 'json',
                                                delay: 250,
                                                processResults: function(data) {
                                                    return {
                                                        results: $.map(data, function(item) {
                                                            return {
                                                                text: item.name,
                                                                id: item.id + '-' + item.name
                                                            }
                                                        })
                                                    };
                                                },
                                                cache: true
                                            }
                                        });

                                        $('#{{ $prov_unique_id }}').on('change', function() {
                                            $('#{{ $kab_unique_id }}').prop('disabled', false);
                                            $('#{{ $kab_unique_id }}').val(null).trigger('change');
                                            $('#{{ $kec_unique_id }}').prop('disabled', true).val(null).trigger('change');
                                            $('#{{ $kel_unique_id }}').prop('disabled', true).val(null).trigger('change');
                                        });

                                        $('#{{ $kab_unique_id }}').select2({
                                            placeholder: 'Cari Kabupaten',
                                            ajax: {
                                                url: function() {
                                                    return "{{ route('admin.surveys.cari.kabupaten', ':provId') }}".replace(':provId', $(
                                                        '#{{ $prov_unique_id }}').val().split('-')[0]);
                                                },
                                                dataType: 'json',
                                                delay: 250,
                                                processResults: function(data) {
                                                    return {
                                                        results: $.map(data, function(item) {
                                                            return {
                                                                text: item.name,
                                                                id: item.id + '-' + item.name
                                                            }
                                                        })
                                                    };
                                                },
                                                cache: true
                                            }
                                        });

                                        $('#{{ $kab_unique_id }}').on('change', function() {
                                            $('#{{ $kec_unique_id }}').prop('disabled', false);
                                            $('#{{ $kec_unique_id }}').val(null).trigger('change');
                                            $('#{{ $kel_unique_id }}').prop('disabled', true).val(null).trigger('change');
                                        });

                                        $('#{{ $kec_unique_id }}').select2({
                                            placeholder: 'Cari Kecamatan',
                                            ajax: {
                                                url: function() {
                                                    return "{{ route('admin.surveys.cari.kecamatan', ':kabId') }}".replace(':kabId', $(
                                                        '#{{ $kab_unique_id }}').val().split('-')[0]);
                                                },
                                                dataType: 'json',
                                                delay: 250,
                                                processResults: function(data) {
                                                    return {
                                                        results: $.map(data, function(item) {
                                                            return {
                                                                text: item.name,
                                                                id: item.id + '-' + item.name
                                                            }
                                                        })
                                                    };
                                                },
                                                cache: true
                                            }
                                        });

                                        $('#{{ $kec_unique_id }}').on('change', function() {
                                            $('#{{ $kel_unique_id }}').prop('disabled', false);
                                            $('#{{ $kel_unique_id }}').val(null).trigger('change');
                                        });

                                        $('#{{ $kel_unique_id }}').select2({
                                            placeholder: 'Cari Kelurahan',
                                            ajax: {
                                                url: function() {
                                                    return "{{ route('admin.surveys.cari.kelurahan', ':kecId') }}".replace(':kecId', $(
                                                        '#{{ $kec_unique_id }}').val().split('-')[0]);
                                                },
                                                dataType: 'json',
                                                delay: 250,
                                                processResults: function(data) {
                                                    return {
                                                        results: $.map(data, function(item) {
                                                            return {
                                                                text: item.name,
                                                                id: item.id + '-' + item.name
                                                            }
                                                        })
                                                    };
                                                },
                                                cache: true
                                            }
                                        });
                                    </script>
                                @elseif ($questionSurveys->type == 'Master')
                                    <div class="mt-3 col-lg-12">
                                        @php
                                            $master = json_decode($questionSurveys->questionDetails->question_value)[0];
                                            $unique_id = 'question-' . $questionSurveys->id . '-answer';
                                        @endphp
                                        <select class="form-select" id="{{ $unique_id }}"
                                            name="question[{{ $questionSurveys->id }}][answer]" style="width:100%;"
                                            required>
                                        </select>
                                    </div>
                                    <script>
                                        $('#{{ $unique_id }}').select2({
                                            placeholder: 'Cari Data',
                                            ajax: {
                                                url: '{{ URL::to('admin/surveys/cari-master/' . $master . '?q=') }}',
                                                dataType: 'json',
                                                delay: 250,
                                                processResults: function(data) {
                                                    return {
                                                        results: $.map(data, function(item) {
                                                            return {
                                                                text: item.name,
                                                                id: item.name
                                                            }
                                                        })
                                                    };
                                                },
                                                cache: true
                                            }
                                        });
                                    </script>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            <div class="col-lg-12">
                <button type="submit" class="btn btn-primary">Simpan</button>
            </div>
        </div>
    </form>
@stop
@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/libs/select2/dist/css/select2.min.css') }}" />
@endpush
@push('scripts')
    <script src="{{ asset('assets/libs/select2/dist/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/dist/js/select2.min.js') }}"></script>
@endpush