@extends('Admin.Components.layout')
@section('title')
Care Plan
@endsection
@section('subtitle')
Add 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.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">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">

                                <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">
                                <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">
                                    <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">
                                    <label id="QuestionLablewelsh" style="color: red"></label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="">
                                    <input type="checkbox" id="is_compulsary" name="is_compulsary" checked value='1'>
                                    <label class="control-label col-md-3"> Is Compulsary ?
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="my-3">
                                    <label class="control-label col-md-3">Unit
                                    </label>
                                    <div class="">
                                        <input type="text" id="unit" name="unit" placeholder="Enter Unit" class="form-control">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group ">
                                <label class="control-label col-md-3">Question Type
                                </label>
                                <div class="">
                                    <select class="form-control change_type" name="q_type" id="q_type">
                                        <option value="">Choose any one</option>
                                        <option value="single">Single Selection</option>
                                        <option value="multiple">Multiple Selection</option>
                                        <option value="text">Text</option>
                                        <option value="number">Number</option>
                                        <option value="dropdown">Dropdown</option>
                                        <option value="date">Date</option>
                                    </select>
                                </div>
                            </div>

                            <input type="hidden" name="hdId" id="hdId" value="0">
                            <div id="optionDiv ">
                                <div class="form-group row ms-3" 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="col-10">
                                        <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-2">
                                        <div class="plus-icon">
                                            <a class="btn btn-primary fnBtnAdd" title="Add field" style="border-radius:20px"><i class="bi bi-plus"></i>Option</a>
                                            <a class="btn btn-primary suboptionBtn fnBtnAddSubOption" title="Add field" data-id="0" style="border-radius:20px"><i class="bi bi-plus"></i>SubOption</a>
                                        </div>
                                    </div>
                                    <div id="dvOuterSubMain_0">
                                        <input type="hidden" name="hdSubId" id="hdSubId" value="0">
                                        {{-- Sub Options --}}
                                        <div id="dvOuterSubOfSubMain_0">
                                            <input type="hidden" name="hdSubOfSubId" id="hdSubOfSubId" value="0">
                                        </div>
                                    </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>
                                </div>

                            </div>
                        </div>
                    </form>
                    <div id="dvOuterMain" style="display: none">
                        <div class="data" id="dvMain_{groupId}">
                            <hr>
                            <div class="form-group row ms-3">
                                <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="col-10">
                                    <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="col-2">
                                    <div>
                                        <a class="btn btn-primary fnBtnAddSubOption" title="Add field" data-id="{groupId}" style="border-radius:20px"><i class="bi bi-plus"></i>SubOption</a>
                                        <a class="remove_button btn btn-danger fnRemove" title="Add field" data-del="{groupId}" style="border-radius:20px"><i class="bi bi-dash-lg"></i>Option</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="dvOuterSubMain_{groupId}" style="display: none">
                        <div class="form-group" id="dvMainSub">
                            <hr>
                            <div id="subdiv_{subGroupId}" class="ms-5">
                                <input type="hidden" name="txtSubHiddenValue[]" value="">
                                <input type="hidden" id="txtSubHidden_{subGroupId}" name="txtSubHidden[]" value="Y">
                                <div class="parentSub_{subGroupId}">
                                    <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="parent" id="{subGroupId}">
                                            <select class="form-control change_sub_sub_type" name="sub_option_type_{groupId}[]" id="sub_option_type" data-id="{subGroupId}">
                                                <option value="">Choose any one</option>
                                                <option value="single">Single Selection</option>
                                                <option value="multiple">Multiple Selection</option>
                                                <option value="text">Text</option>
                                                <option value="number">Number</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="option_type">
                                        <input type="hidden" name="SubHiddenValue[]" value="{groupId}">
                                        <input type="text" id="txtSubOptioneng_{subGroupId}" name="txtSubOptioneng_{groupId}[]" class="form-control" placeholder="Value in english">

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

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

                                        <label id="AddSubOptionLablewelsh_{subGroupId}" style="color: red"></label>
                                        <div class="plus_sub_of_sub_{subGroupId}" style="display: none">
                                            <div class="plus-icon">
                                                <a class="remove_button btn btn-primary fnBtnAddSubOptionOfSubOption" title="Add field" data-id="{subGroupId}" style="border-radius:20px"><i class="bi bi-plus"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="removeSub_{groupId}">
                                    <div class="plus-icon">
                                        <a class="remove_button btn btn-danger fnRemoveSubOption" title="Add field" data-id="{subGroupId}" style="border-radius:20px"><i class="bi bi-dash-lg">Sub Option</i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="dvOuterSubOfSubMain" style="display: none">
                        <div class="form-group" id="dvMainSubOfSub">
                            <div class="dvOuterSubOfSubMain_{subGroupId} ms-5">
                                <div id="subofsubdiv_{subOfSubGroupId}">
                                    <hr>
                                    <input type="hidden" name="txtSubOfSubHiddenValue[]" value="">
                                    <input type="hidden" id="txtSubOfSubHidden_{subOfSubGroupId}" name="txtSubOfSubHidden[]" value="Y">
                                    <div class="ms-5">
                                        <label class="control-label col-md-3">Add Sub Option of Sub Option</label>
                                        {{-- <div class="form-group ">
                                                <label class="control-label col-md-3">Sub Option of Sub Option Type
                                                </label>
                                                <div class="parent" id="{subGroupId}">
                                                    <select class="form-control change_sub_type"
                                                        name="sub_sub_option_type_{subGroupId}[]"
                                                        id="sub_sub_option_type">
                                                        <option value="">Choose any one</option>
                                                        <option value="text">Text</option>
                                                        <option value="number">Number</option>
                                                    </select>
                                                </div>
                                            </div> --}}
                                        <input type="hidden" name="SubOfSubHiddenValue[]" value="{subGroupId}">
                                        <input type="text" id="txtSubOfSubOptioneng_{subGroupId}" name="txtSubOfSubOptioneng_{subGroupId}[]" class="form-control" placeholder="SubOption Value in english">

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

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

                                        <label id="AddSubOfSubOptionLablewelsh_{subGroupId}" style="color: red"></label>
                                        <div>
                                            <div class="plus-icon">
                                                <a class="remove_button btn btn-danger fnRemoveSubOptionOfSubOption" title="Add field" data-id="{subOfSubGroupId}" style="border-radius:20px"><i class="bi bi-dash-lg"></i></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script nonce="{{ $cspNonce }}">
    // Add sub option of sub option

    $(document).on('click', '.fnBtnAddSubOptionOfSubOption', function() {
        let id = $(this).attr('data-id');
        var count = $('#hdSubOfSubId').val();
        // var id = $(this).closest('.parent').attr('id');
        var html = $('#dvMainSubOfSub').html();
        console.log($('.parentSub_' + id));
        html = html.replace(/{id}/g, count);
        html = html.replace(/{subOfSubGroupId}/g, count);
        html = html.replace(/{subGroupId}/g, id);
        count++;
        $('.parentSub_' + id).append(html);
        $('#hdSubOfSubId').val(count);
    })
    //remove sub option of sub option
    $(document).on('click', '.fnRemoveSubOptionOfSubOption', function() {
        let id = $(this).attr('data-id');
        $("#txtSubOfSubHidden_" + id).val("N");
        $('#subofsubdiv_' + id).remove();
        var count = $('#hdSubOfSubId').val();
        count--;
        $('#hdSubOfSubId').val(count);
    })

    //dropdown select change
    $(document).on('change', '.change_sub_sub_type', function() {
        var val = $(this).val();
        console.log(val);
        var id = $(this).attr('data-id');
        if (val == 'number' || val == 'text') {
            $('.dvOuterSubOfSubMain_' + id).remove();
            console.log($('.dvOuterSubOfSubMain_' + id));
            $('.plus_sub_of_sub_' + id).hide();
        } else {
            $('.plus_sub_of_sub_' + id).show();
            console.log($('.plus_sub_of_sub').show());
        }
    });
    //dropdown select change
    $(document).on('change', '.change_type', function() {
        var val = $(this).val();
        console.log(val);
        if (val == 'date' || val == 'number' || val == 'text') {
            $('#dvMain_0').hide();

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

    // Dynamic add Control
    $(document).on('click', '.fnBtnAdd', 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).attr('data-del');
        $("#txtHidden_" + intId).val("N");
        $("#dvMain_" + intId).remove();
    })
    // add sub option
    $(document).on('click', '.fnBtnAddSubOption', function() {
        let id = $(this).attr('data-id');
        let count = $('#hdSubId').val();
        let html = $('#dvMainSub').html();
        html = html.replace(/{id}/g, count);
        html = html.replace(/{subGroupId}/g, count);
        html = html.replace(/{groupId}/g, id);
        count++;
        $('#dvMain_' + id).append(html);
        $('#hdSubId').val(count);
    })
    //remove sub option
    $(document).on('click', '.fnRemoveSubOption', function() {
        let id = $(this).attr('data-id');
        $("#txtSubHidden_" + id).val("N");
        $('#subdiv_' + id).remove();
        var count = $('#hdSubId').val();
        count--;
        $('#hdSubId').val(count);
    })

    // 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("");
        }

        if (temp != 1) {
            document.getElementById("form").submit()
        }
    });

    //dropdown suboption select change

    $(document).on('change', '.changesub_type', function() {
        var val = $(this).val();
        console.log(val);
        if (val == 'date' || val == 'number' || val == 'text') {
            $('#dvMainSub').hide();

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

</script>
@endsection