@extends('Admin.components.layout')
@section('title')
    Care Plan
@endsection
@section('subtitle')
    Edit Care Plan
@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.careplan.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">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">
                                    <label class="control-label col-md-3">Placeholder Title in English
                                    </label>
                                    <div class="">
                                        <input type="text" id="placeholdertitle" name="placeholdertitle"
                                            placeholder="Enter Placeholder Title" class="form-control"
                                            value="{{ !empty($question) ? $question->placeholder_title : '' }}">
                                        <label id="QuestionLableeng" style="color: red"></label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="">
                                        <input type="text" id="placeholdertitlewelsh" name="placeholdertitlewelsh"
                                            placeholder="Enter Placeholder Title" class="form-control"
                                            value="{{ !empty($question) ? $question->placeholder_title_welsh : '' }}">
                                        <label id="QuestionLablewelsh" style="color: red"></label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="">
                                        <input type="checkbox" id="is_compulsary" name="is_compulsary" value='1'
                                            {{ $question->is_compulsary == 1 ? 'checked' : '' }}>
                                        <label class="control-label col-md-3"> Is Compulsary ?
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label ">Question Type
                                    </label>
                                    <div class="">
                                        <select class="form-control change_type" name="q_type" id="q_type" disabled>
                                            <option value="">Choose any one</option>
                                            <option value="single"
                                                {{ $question->question_type == 'single' ? 'selected' : '' }}>
                                                Single
                                                Selection
                                            </option>
                                            <option value="multiple"
                                                {{ $question->question_type == 'multiple' ? 'selected' : '' }}>Multiple
                                                Selection</option>
                                            <option value="text"
                                                {{ $question->question_type == 'text' ? 'selected' : '' }}>
                                                Text</option>
                                            <option value="number"
                                                {{ $question->question_type == 'number' ? 'selected' : '' }}>Number
                                            </option>
                                        </select>
                                    </div>
                                    <input type="hidden" name="hdId" id="hdId"
                                        value="{{ count($qus_option) - 1 }}">
                                    @if (
                                        $question->question_type == 'dropdown' ||
                                            $question->question_type == 'single' ||
                                            $question->question_type == 'multiple')
                                        @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>Option</a>

                                                            <a class="fnBtnAddSubOption btn btn-primary" title="Add field"
                                                                data-id="{{ $key }}"
                                                                data-subId="{{ count($qus_sub_option) }}"
                                                                style="border-radius:20px"><i
                                                                    class="bi bi-plus"></i>SubOption</a>
                                                        </div>
                                                    </div>
                                                @else
                                                    <div class="">
                                                        <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="bi bi-dash-lg"></i></a>
                                                            <a class="fnBtnAddSubOption btn btn-primary" title="Add field"
                                                                data-id="{{ $key }}"
                                                                data-subId="{{ count($qus_sub_option) }}"
                                                                style="border-radius:20px"><i
                                                                    class="bi bi-plus"></i>SubOption</a>
                                                        </div>
                                                    </div>
                                                @endif
                                                <input type="hidden" name="hdSubId" id="hdSubId"
                                                    value="{{ count($qus_sub_option) }}">
                                                <input type="hidden" name="newSubId_{{ $key }}"
                                                    id="newSubId_{{ $key }}"
                                                    value="{{ count($qus_sub_option) }}">
                                                    @foreach ($qus_sub_option as $sub)
                                                    @if($value->id == $sub->option_id)
                                                    <div id="dvOuterSubMain_{{ $key }}" class="dvOuterSubMain">
                                                        <div class="form-group">
                                                            <div id="subdiv_{{ $key }}">
                                                                <input type="hidden"
                                                                    id="txtSubHiddenValue_{{ $key }}"
                                                                    name="txtSubHiddenValue_{{ $key }}[]"
                                                                    value="old">
                                                                <input type="hidden"
                                                                    id="txtSubOldid_{{ $key }}"
                                                                    name="txtSubOldid_{{ $key }}[]"
                                                                    value="{{ $sub->id }}">
                                                                <input type="hidden"
                                                                    name="SubHiddenValue_{{ $key }}[]"
                                                                    value="{{ $key }}">
                                                                <div class="">
                                                                    <label class="control-label col-md-3">Add Sub
                                                                        Option</label>
                                                                    <div class="form-group ">
                                                                        <label class="control-label col-md-3">Sub
                                                                            Option Type
                                                                        </label>
                                                                        <div class="">
                                                                            <select class="form-control"
                                                                                name="sub_option_type_{{ $key }}[]"
                                                                                id="sub_option_type_{{ $key }}">
                                                                                <option value="">Choose any one
                                                                                </option>
                                                                                <option
                                                                                    {{ $sub->sub_option_type === 'text' ? 'selected' : '' }}
                                                                                    value="text">Text</option>
                                                                                    
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                    <input type="text"
                                                                        id="txtSubOptioneng_{{ $key }}"
                                                                        name="txtSubOptioneng_{{ $key }}[]"
                                                                        class="form-control"
                                                                        placeholder="SubOption Value in english"
                                                                        value="{{ $sub->sub_option_eng }}">

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

                                                                    <input type="text"
                                                                        id="txtSubOptionwelsh_{{ $key }}"
                                                                        name="txtSubOptionwelsh_{{ $key }}[]"
                                                                        class="form-control"
                                                                        placeholder="SubOption Value in Second Language"
                                                                        value="{{ $sub->sub_option_welsh }}">

                                                                    <label id="AddSubOptionLablewelsh_{{ $key }}"
                                                                        style="color: red"></label>
                                                                </div>
                                                                <div class="removeSub_{{ $key }}">
                                                                    <div class="plus-icon">
                                                                        <a class="remove_button btn btn-danger delete_sub"
                                                                            title="Add field"
                                                                            data-id="{{ $sub->id }}"
                                                                            style="border-radius:20px"><i
                                                                                class="bi bi-dash-lg">Sub
                                                                                Option</i></a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    @endif
                                                @endforeach
                                            </div>
                                        @endforeach
                                    @endif
                                </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">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>option</a>
                                            <a class="fnBtnAddSubOption btn btn-primary" title="Add field"
                                                data-id="{groupId}" data-subId="0" style="border-radius:20px"><i
                                                    class="bi bi-plus"></i>SubOption</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div id="dvOuterSubMain_{groupId}" style="display: none">
                            <div class="form-group" id="dvMainSub">
                                <div id="subdiv_{subGroupId}">
                                    <input type="hidden" id="txtSubHiddenValue_{subGroupId}"
                                        name="txtSubHiddenValue_{groupId}[]" value="new">
                                    <input type="hidden" id="txtSubOldid_{subGroupId}" name="txtSubOldid_{groupId}[]" value="">
                                    <input type="hidden" name="SubHiddenValue_{groupId}[]" value="{groupId}">
                                    <div class="">
                                        <label class="control-label col-md-3">Add Sub Option</label>
                                        <div class="form-group ">
                                            <label class="control-label col-md-3">Sub Option Type
                                            </label>
                                            <div class="">
                                                <select class="form-control" name="sub_option_type_{groupId}[]"
                                                    id="sub_option_type_{subGroupId}">
                                                    <option value="">Choose any one</option>
                                                    <option value="text">Text</option>
                                                </select>
                                            </div>
                                        </div>
                                        <input type="text" id="txtSubOptioneng_{subGroupId}"
                                            name="txtSubOptioneng_{groupId}[]" class="form-control"
                                            placeholder="SubOption Value in english">

                                        <label id="AddSubOptionLableeng_{subGroupId}" style="color: red"></label>

                                        <input type="text" id="txtSubOptionwelsh_{subGroupId}"
                                            name="txtSubOptionwelsh_{groupId}[]" class="form-control"
                                            placeholder="SubOption Value in Second Language">

                                        <label id="AddSubOptionLablewelsh_{subGroupId}" style="color: red"></label>
                                    </div>
                                    <div class="removeSub_{groupId}">
                                        <div class="plus-icon">
                                            <a class="fnRemoveSubOption remove_button btn btn-danger" title="Add field"
                                                data-del="{subGroupId}" style="border-radius:20px"><i
                                                    class="bi bi-dash-lg">Sub Option</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);
        });
        $(document).on('click', ".fnBtnAddSubOption", function() {
            var groupId = $(this).attr('data-id');
            var subId = $(this).attr('data-subId');
            var id = $('#newSubId_' + groupId).val();
            var html = $('#dvMainSub').html();
            html = html.replace(/{subGroupId}/g, subId);
            html = html.replace(/{groupId}/g, groupId);
            subId++;
            id++;
            $('#newSubId_' + groupId).val(subId);
            $('#dvMain_' + groupId).append(html);
            $(this).attr('data-subId', subId);
        });
        //remove sub option
        $(document).on('click', '.fnRemoveSubOption', function() {
            var id = $(this).data("option");
            $("#txtSubHidden_" + id).val("N");
            $('#subdiv_' + id).remove();
            var count = $('#hdSubId').val();
            count--;
            $('#hdSubId').val(count);
        });
        $(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.careplan.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 temp = 0;


            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