@extends('Admin.components.layout')
@section('title')
    GP/Hospital Visit
@endsection
@section('subtitle')
    {{-- @if (isset($data))
        Edit Question
    @else --}}
    Add Question
    {{-- @endif --}}
@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.store') }}" 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 ($data as $k => $v)
                                                <option value="{{ $v->id }}">{{ $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">
                                        <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">
                                        <label id="QuestionLablewelsh" style="color: red"></label>
                                    </div>
                                </div>

                                <div class="form-group d-flex">
                                    <label class="control-label col-md-3">Question Type
                                    </label>

                                    <div class="col-3">
                                        <input class="radio" type="radio" id="single" name="q_type" value="single"
                                            class="form-check-input" 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">
                                        &nbsp; &nbsp;
                                        <label for="multiple" class="form-check-label">Date</label>
                                    </div>
                                </div>

                                <input type="hidden" name="hdId" id="hdId" value="0">
                                <div class="form-group" id="dvMain_0">
                                    <input type="hidden" name="txtHiddenValue[]" value="">
                                    <input type="hidden" id="txtHidden_0" name="txtHidden[]" value="Y">
                                    <label class="control-label col-md-3">Add Option</label>
                                    <div class="">

                                        <input type="text" id="txtOptioneng_0" name="txtOptioneng[]" class="form-control"
                                            placeholder="Option Value in english">

                                        <label id="AddOptionLableeng_0" style="color: red"></label>

                                        <input type="text" id="txtOptionwelsh_0" name="txtOptionwelsh[]"
                                            class="form-control" placeholder="Option Value in Second Language">

                                        <label id="AddOptionLablewelsh_0" style="color: red"></label>
                                    </div>
                                    <div class="col-md-1">
                                        <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>
                                </div>
                            </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"><i
                                                class=""></i> Add</button>

                                        {{-- <a href="{{route('admin.gp.hospital.question.list')}}" class="btn  btn-danger" ><i class="fa fa-times"></i> Cancel</a> --}}
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div id="dvOuterMain" style="display: none">
                            <div class="data" id="dvMain_{groupId}">
                                <div class="form-group">
                                    <input type="hidden" name="txtHiddenValue[]" value="">
                                    <input type="hidden" id="txtHidden_{groupId}" name="txtHidden[]" value="Y">
                                    <label class="control-label ">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 }}">
        // radio button code

        $('input[type=radio][name=q_type]').change(function() {
            var type = this.value;
            if (type == "date") {
                $('#dvMain_0').hide();

            } else {
                $('#dvMain_0').show();
            }
        });

        // 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');
            $("#dvMain_" + intId).remove();
        })


        // form validation 
        $("#form_btn").click(function(event) {

            // event.preventDefault();        
            $(".QuestionLableeng").text("");
            $(".QuestionLablewelsh").text("");
            $(".AddOptionLableeng").text("");
            $(".AddOptionLablewelsh").text("");
            $("#CategoryLabl").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 radio = $('input[name="q_type"]:checked').val();
            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("");
            }

            if (radio != "date") {
                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