@extends('Admin.components.layout')
@section('title')
    GP/Hospital Visit
@endsection
@section('subtitle')
    Edit Question
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row mt-2">
            <div class="col-12">
                <div class="card  p-3">
                    <div class="card-body ">
                        @if ($errors->any())
                            <div class="row">
                                <div class="col-sm-6 col-sm-offset-3">
                                    {!! implode('', $errors->all('<div class="alert alert-danger">:message</div>')) !!}
                                </div>
                            </div>
                        @endif
                        <form action="{{ route('admin.GpHospitalVisit.question.update', $id) }}" method="POST" name="form"
                            id="form" enctype="multipart/form-data">
                            {{ csrf_field() }}

                            <div class="form-body" id="dvOuterOld">
                                <div class="form-group">
                                    <label class="control-label col-md-3">Category
                                    </label>
                                    <div class="">
                                        <select class="form-control" name="category" id="category">
                                            <option value="">--- Select Category ---</option>
                                            @foreach ($category as $k => $v)
                                                <option value="{{ $v->id }}"
                                                    {{ $v->id == $question->category_id ? 'selected' : '' }}>
                                                    {{ $v->name_eng }}
                                                </option>
                                            @endforeach
                                        </select>

                                        <label id="CategoryLabl" style="color: red"></label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">Question in English
                                    </label>
                                    <div class="">
                                        <input type="text" id="txtQuestioneng" name="txtQuestioneng"
                                            placeholder="Enter Question" class="form-control"
                                            value="{{ !empty($question) ? $question->question_eng : '' }}">
                                        <label id="QuestionLableeng" style="color: red"></label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label col-md-3">Question in Second Language
                                    </label>
                                    <div class="">
                                        <input type="text" id="txtQuestionwelsh" name="txtQuestionwelsh"
                                            placeholder="Enter Question" class="form-control"
                                            value="{{ !empty($question) ? $question->question_welsh : '' }}">
                                        <label id="QuestionLablewelsh" style="color: red"></label>
                                    </div>
                                </div>
                                <div class="form-group d-flex">
                                    <label class="control-label col-3">QuestionType
                                    </label>

                                    <div class="col-3">
                                        <input class="radio" type="radio" id="single" name="q_type" value="single"
                                            class="form-check-input"
                                            {{ $question->question_type == 'single' ? 'checked' : '' }}>&nbsp; &nbsp;
                                        <label for="single" class="form-check-label">Single Selection</label>
                                    </div>

                                    <div class="col-3">
                                        <input class="radio" type="radio" id="date" name="q_type" value="date"
                                            class="form-check-input"
                                            {{ $question->question_type == 'date' ? 'checked' : '' }}>
                                        &nbsp; &nbsp;
                                        <label for="multiple" class="form-check-label">Date</label>
                                    </div>
                                </div>
                                <input type="hidden" name="hdId" id="hdId" value="{{ count($qus_option) - 1 }}">
                                @foreach ($qus_option as $key => $value)
                                    <div class="form-group" id="dvMain_{{ $key }}">
                                        <input type="hidden" id="txtHidden_{{ $key }}" name="txtHidden[]"
                                            value="old">
                                        <input type="hidden" id="txtoldid_{{ $key }}" name="txtoldid[]"
                                            value="{{ $value->id }}">
                                        <label class="control-label col-md-3">Add Option</label>
                                        <div class="">

                                            <input type="text" id="txtOptioneng_{{ $key }}"
                                                name="txtOptioneng[]" class="form-control"
                                                placeholder="Option Value in english" value="{{ $value->option_eng }}">

                                            <label id="AddOptionLableeng_{{ $key }}" style="color: red"></label>

                                            <input type="text" id="txtOptionwelsh_{{ $key }}"
                                                name="txtOptionwelsh[]" class="form-control"
                                                placeholder="Option Value in Second Language" value="{{ $value->option_welsh }}">

                                            <label id="AddOptionLablewelsh_{{ $key }}" style="color: red"></label>
                                        </div>
                                        @if ($key == 0)
                                            <div class="">
                                                <div class="plus-icon">
                                                    <a  id="fnBtnAdd" class="btn btn-primary"
                                                        title="Add field"
                                                        style="border-radius:20px"><i class="bi bi-plus"></i></a>
                                                </div>
                                            </div>
                                        @else
                                            <div class="">
                                                <div class="plus-icon">
                                                    <a class="fnRemove remove_button btn btn-danger delete_option"
                                                        title="Add field" style="border-radius:20px"
                                                        data-id="{{ $value->id }}"><i class="bi bi-dash-lg"></i></a>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-offset-3 col-md-9">
                                        <button type="button" class="btn  btn-success" id="form_btn">Update</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div id="dvOuterMain" style="display: none">
                            <div class="data" id="dvMain_{groupId}">
                                <div class="form-group">
                                    <input type="hidden" id="txtHidden_{groupId}" name="txtHidden[]" value="new">
                                    <input type="hidden" id="txtoldid_{groupId}" name="txtoldid[]" value="">
                                    <label class="control-label col-md-3">Add Option
                                    </label>
                                    <div class="">
                                        <input type="text" id="txtOptioneng_{groupId}" name="txtOptioneng[]"
                                            class="form-control" placeholder="Option Value in English">
                                        <label id="AddOptionLableeng_{groupId}" style="color: red"></label><br>
                                        <input type="text" id="txtOptionwelsh_{groupId}" name="txtOptionwelsh[]"
                                            class="form-control" placeholder="Option Value in Second Language">
                                        <label id="AddOptionLablewelsh_{groupId}" style="color: red"></label><br>
                                    </div>
                                    <div class="">
                                        <div class="plus-icon">
                                            <a class="fnRemove remove_button btn btn-danger"
                                                title="Add field"  data-del="{groupId}"
                                                style="border-radius:20px"><i class="bi bi-dash-lg"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script nonce="{{$cspNonce}}">
        // Dynamic add Control
        $('#fnBtnAdd').on('click', function() {
            var count = $("#hdId").val();
            count++;
            var html = $("#dvOuterMain").html();
            html = html.replace(/{groupId}/g, count);
            $("#dvOuterOld").append(html);
            $("#hdId").val(count);
        });
        // remove control
        $(document).on('click', ".fnRemove", function() {
            let intId = $(this).data('del');
            $("#txtHidden_" + intId).val("N");
            $("#dvMain_" + intId).remove();
        })

        $(".delete_option").click(function() {
            var catid = $(this).attr("data-id");
           console.log(catid);
            var url = "{{ route('admin.GpHospitalVisit.delete.option', ['id' => 'slug']) }}";
            if (catid != "") {
                $.ajax({
                    type: 'POST',
                    url: url.replace("slug",parseInt(catid)),
                    data: {
                        id: parseInt(catid),
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(data) {
                        // if (data.status_code == "200") {
                            location.reload();
                        // }
                    },
                    error: function(error) {
                        console.log(error);
                        alert("error");
                    }
                });
            }

        });

        // form validation 
        $("#form_btn").click(function(event) {
            $(".QuestionLableeng").text("");
            $(".QuestionLablewelsh").text("");
            $(".AddOptionLableeng").text("");
            $(".AddOptionLablewelsh").text("");



            var OptionInputeng = document.getElementsByName('txtOptioneng[]');
            var OptionInputwelsh = document.getElementsByName('txtOptionwelsh[]');
            var txtQuestioneng = document.getElementById('txtQuestioneng');

            var txtQuestionwelsh = document.getElementById('txtQuestionwelsh');
            var txtcategory = document.getElementById('category');


            var temp = 0;
            if (txtcategory.value == "") {
                $("#CategoryLabl").text("Please Select Category");
                temp = 1;
            } else {
                $("#CategoryLabl").text("");
            }

            if (txtQuestioneng.value == "") {
                $("#QuestionLableeng").text("Please Enter Question in English");
                temp = 1;
            } else {
                $("#QuestionLableeng").text("");
            }
            if (txtQuestionwelsh.value == "") {
                $("#QuestionLablewelsh").text("Please Enter Question in Second Language");
                temp = 1;
            } else {
                $("#QuestionLablewelsh").text("");
            }


            for (i = 0; i < OptionInputeng.length - 1; i++) {
                if (OptionInputeng[i].value == "") {
                    $("#AddOptionLableeng_" + i).text("Please Enter Option Value in English");
                    temp = 1;
                } else if (OptionInputeng[i].value != "") {
                    $("#AddOptionLableeng_" + i).text("");
                }

                if (OptionInputwelsh[i].value == "") {
                    $("#AddOptionLablewelsh_" + i).text("Please Enter Option Value in Second Language");
                    temp = 1;
                } else if (OptionInputwelsh[i].value != "") {
                    $("#AddOptionLablewelsh_" + i).text("");
                }
            }
            if (temp != 1) {
                document.getElementById("form").submit()
            }

        });
    </script>
@endsection