@extends('admin.layouts.app')
@section('content')
@section('css')
@endsection
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Acute Question
            <small>it all here</small>
        </h1>
        <ol class="breadcrumb">
            <li><a><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Edit</li>
        </ol>
    </section>
    @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
    <div style="margin-top: 10px" class="flash-message">
        @if (Session::has('message'))
            <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('message') }}</p>
        @endif
    </div>
    <!-- Main content -->
    <section class="content">
        <!-- Default box -->
        <div class="box">
            <div class="box-header with-border">
                <div class="col-sm-12">
                    <form action='{{ route('admin.gp.hospital.question.update', $id) }}' id="form"
                        class="form-horizontal" method="post">
                        {{ csrf_field() }}
                        <div class="form-body" id="dvOuterOld">
                            <div class="form-group">
                                <label class="control-label col-md-3">Category
                                </label>
                                <div class="col-md-6">
                                    <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="col-md-6">
                                    <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 Welsh
                                </label>
                                <div class="col-md-6">
                                    <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">
                                <label class="control-label col-md-3">QuestionType
                                </label>
                                <!--  <div class="col-md-6">
                                     <select name="q_type" id="q_type"class="form-control" >
                                         <option value="">--Select Question Type--</option>
                                         <option value="single">Single Selection</option>
                                         <option value="multiple">Multiple Selection</option>
                                     </select>
                                     <label id="QTypeLable" style="color: red" ></label>
                                 </div> -->
                                <div class="col-md-2">
                                    <input 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-md-2">
                                    <input type="radio" id="multiple" name="q_type" value="multiple" class="form-check-input" {{ $question->question_type == 'multiple' ? 'checked' : '' }}>
                                    &nbsp;	&nbsp;
                                    <label for="multiple" class="form-check-label">Multiple Selection</label>
                                </div>-->
                                <div class="col-md-2">
                                    <input 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="col-md-6">

                                        <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 Welsh" value="{{ $value->option_welsh }}">

                                        <label id="AddOptionLablewelsh_{{ $key }}"
                                            style="color: red"></label>
                                    </div>
                                    @if ($key == 0)
                                        <div class="col-md-1">
                                            <div class="plus-icon">
                                                <a class="btn btn-primary"
                                                    title="Add field" id="fnBtnAdd"
                                                    style="border-radius:20px"><i class="fa fa-plus"></i></a>
                                            </div>
                                        </div>
                                    @else
                                        <div class="col-md-1">
                                            <div class="plus-icon">
                                                <a 
                                                    class="remove_button btn btn-danger delete_option"
                                                    title="Add field" style="border-radius:20px"
                                                    data-id="{{ $value->id }}"><i class="fa fa-minus"></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>
            </div>
            <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="col-md-6">
                            <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 Welsh">
                            <label id="AddOptionLablewelsh_{groupId}" style="color: red"></label><br>
                        </div>
                        <div class="col-md-1">
                            <div class="plus-icon">
                                <a class="remove_button btn btn-danger fnRemove" title="Add field"
                                     data-del="{groupId}"style="border-radius:20px"><i
                                        class="fa fa-minus"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
@section('js')
<script nonce="{{ $cspNonce }}">
    $("#fnBtnAdd").click(function(event) {
        var count = $("#hdId").val();
        count++;
        var html = $("#dvOuterMain").html();
        html = html.replace(/{groupId}/g, count);
        $("#dvOuterOld").append(html);
        $("#hdId").val(count);
    })
    $(document).on('click', ".fnRemove", function() {
        var intId = $(this).attr("data-del");
        $("#txtHidden_" + intId).val("N");
        $("#dvMain_" + intId).remove();
    })



    $(".delete_option").click(function() {
        var catid = $(this).attr("data-id");



        var url = '{{ route('admin.gp.hospital.delete.option', ['id' => 'slug']) }}';
        if (catid != "") {
            $.ajax({
                type: 'POST',
                url: url.replace("slug", catid),
                data: {
                    id: catid,
                    _token: '{{ csrf_token() }}'
                },
                success: function(data) {
                    if (data.status_code == "200") {
                        location.reload();
                    }
                },
                error: function() {
                    alert("error");
                }
            });
        }

    });

    // form validation 
    $("#form_btn").click(function(event) {
        // event.preventDefault();        
        $(".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 SelectQuestiontype = document.getElementById('q_type');
        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 Welsh");
            temp = 1;
        } else {
            $("#QuestionLablewelsh").text("");
        }
        // if (SelectQuestiontype.value == "") {
        //     $("#QTypeLable").text("Please Selecte Quetion Type");
        //     temp = 1;
        // } else {
        //     $("#QTypeLable").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 Welsh");
                temp = 1;
            } else if (OptionInputwelsh[i].value != "") {
                $("#AddOptionLablewelsh_" + i).text("");
            }
        }
        if (temp != 1) {
            document.getElementById("form").submit()
        }

    });
</script>
@endsection