@extends('Admin.components.layout')
@section('title')
    Medication Resource
@endsection
@section('subtitle')
    Medication Resource- Add
@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.medicationresource.store') }}" method="POST" enctype="multipart/form-data" name="medres" id="medres">
                            {{ csrf_field() }}
                            @if (isset($data))
                                <input type="hidden" name='id' id='id' value="{{ $data->id }}">
                            @endif
                            <div class="form-body" id="dvOuterOld">
                                <div class="form-group">
                                    <label for="website" class="control-label col-md-3">Medication Type:</label>
                                    <div class="">
                                        <select name="medication_type" id="medication_type" class="form-control">
                                            <option value="">--- Select Type ---</option>
                                            @foreach ($medicationCategory as $key => $value)
                                                <option value="{{ $value->id }}">{{ $value->name }}</option>
                                            @endforeach
                                        </select>
                                        <label id="lblselectCatError" class="error"></label>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label for="website" class="control-label col-md-3">Medication Name:</label>
                                    <div class="">
                                        <select name="medication_name" id="medication_name" class="form-control" disabled="">
                                            <option value="">--- Select Medication ---</option>
                                        </select>
                                        <label id="lblselectnameError" class="error"></label>
                                    </div>
                                </div>
                                <input type="hidden" name="hdId" id="hdId" value="0">
                                <div class="form-group classRadioDvz" id="dvMain_0">
                                    <div class="form-group row">
                                        <label class="control-label col-3">Resource Type
                                        </label>
                                        <div class="col-2">
                                            <input class="custom-control-input radioChk" type="checkbox" id="chk_link_0" name="r_type[]" value="link" checked="" data-id="0">
                                            &nbsp; &nbsp;
                                            <label for="chk_link_0" class="custom-control-label">Link</label>
                                            <br>
                                            <label class="error" id="lbl_chk_0"></label>
                                        </div>
                                        <div class="col-2">
                                            <input class="custom-control-input radioChk" type="checkbox" id="chk_pdf_0" name="r_type[]" value="pdf" data-id="0">
                                            &nbsp; &nbsp;
                                            <label for="chk_pdf_0" class="custom-control-label">PDF</label>
                                        </div>
                                        <div class="col-3">
                                            <div class="plus-icon">
                                                <a class="fnBtnAdd add_button btn btn-primary" title="Add field" style="border-radius: 20px"><i class="bi bi-plus"></i></a>
                                            </div>
                                        </div>
                                        <label class="error" id="lbl_chk_0"></label>
                                    </div>
                                    <div class="form-group" id="div_link_0">
                                        <label class="control-label col-md-3">Enter Link
                                        </label>
                                        <div class="">
                                            <input type="text" id="txt_link_eng_0" name="txt_link_eng[]" placeholder="Enter Link English" class="form-control">
                                            <label id="Lbl_link_eng_0" class="error" style="color: red"></label>

                                            <input type="text" id="txt_link_welsh_0" name="txt_link_welsh[]" placeholder="Enter Link Second Language" class="form-control">
                                            <label id="Lbl_link_welsh_0" class="error" style="color: red"></label>

                                        </div>
                                    </div>
                                    <div class="form-group" id="div_pdf_0" style="display: none">
                                        <label class="control-label col-md-3">Select PDF
                                        </label>
                                        <div class="">
                                            <input type="file" accept="application/pdf" id="pdf_eng_0" name="pdf_eng[]" placeholder="Enter Link" class="form-control">
                                            <label id="lbl_eng_pfd_0" class="error" style="color: red"></label>
                                            <input type="file" accept="application/pdf" id="pdf_welsh_0" name="pdf_welsh[]" placeholder="Enter Link" class="form-control">
                                            <label id="lbl_wel_pfd_0" class="error" style="color: red"></label>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label class="control-label col-md-3">Enter Title
                                        </label>
                                        <div class="">
                                            <input type="text" id="txt_title_eng_0" name="txt_title_eng[]" placeholder="Enter Title English" class="form-control">
                                            <label id="Lbl_title_eng_0" class="error" style="color: red"></label>

                                            <input type="text" id="txt_title_welsh_0" name="txt_title_welsh[]" placeholder="Enter Tilte Second Language" class="form-control">
                                            <label id="Lbl_title_welsh_0" class="error" style="color: red"></label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-3">Enter Description
                                        </label>
                                        <div class="">
                                            <input type="text" id="txt_des_eng_0" name="txt_des_eng[]" placeholder="Enter description English" class="form-control">
                                            <label id="Lbl_des_eng_0" class="error" style="color: red"></label>

                                            <input type="text" id="txt_des_welsh_0" name="txt_des_welsh[]" placeholder="Enter description Second Language" class="form-control">
                                            <label id="Lbl_des_welsh_0" class="error" style="color: red"></label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label col-md-3">Select Icon
                                        </label>
                                        <div class="">
                                            <input type="file" accept="image/*" id="icon_0" name="icon[]"  placeholder="Enter Title English" class="form-control">
                                            <label id="Lbl_icon_0" class="error" style="color: red"></label>
                                        </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">Add</button>
                                    </div>
                                </div>
                            </div>
                        </form>

                    </div>
                    <div id="dvOuterMain" style="display: none">
                        <div class="data classRadioDvz" id="dvMain_{groupId}">
                            {{-- <div class="form-group"> --}}
                            <div class="form-group row">
                                <label class="control-label col-3">Resource Type
                                </label>
                                <div class="col-2">
                                    <input class="custom-control-input radioChk" type="checkbox" id="chk_link_{groupId}" name="r_type[]" value="link" checked="" data-id="{groupId}">
                                    &nbsp; &nbsp;
                                    <label for="chk_link_{groupId}" class="custom-control-label">Link</label><br>
                                    <label class="error" id="lbl_chk_{groupId}"></label>
                                </div>
                                <div class="col-2">
                                    <input class="custom-control-input radioChk" type="checkbox" id="chk_pdf_{groupId}" name="r_type[]" value="pdf" data-id="{groupId}">
                                    &nbsp; &nbsp;
                                    <label for="chk_pdf_{groupId}" class="custom-control-label">PDF</label>
                                </div>
                                <div class="col-2">
                                    <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><br>
                            </div>

                            <div class="form-group" id="div_link_{groupId}">
                                <label class="control-label col-md-3">Enter Link
                                </label>
                                <div class="">
                                    <input type="text" id="txt_link_eng_{groupId}" name="txt_link_eng[]" placeholder="Enter Link English" class="form-control">
                                    <label id="Lbl_link_eng_{groupId}" class="error" style="color: red"></label>
                                    <input type="text" id="txt_link_welsh_{groupId}" name="txt_link_welsh[]"  placeholder="Enter Link Second Language" class="form-control">
                                    <label id="Lbl_link_welsh_{groupId}" class="error" style="color: red"></label>
                                </div>
                            </div>

                            <div class="form-group" id="div_pdf_{groupId}" style="display: none">
                                <label class="control-label col-md-3">Select PDF
                                </label>
                                <div class="">
                                    <input type="file" accept="application/pdf" id="pdf_{groupId}" name="pdf_eng[]" placeholder="Enter Link" class="form-control">
                                    <label id="lbl_eng_pfd_0" class="error" style="color: red"></label>
                                    <input type="file" accept="application/pdf" id="pdf_welsh_{groupId}"  name="pdf_welsh[]" placeholder="Enter Link" class="form-control">
                                    <label id="lbl_wel_pfd_0" class="error" style="color: red"></label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="control-label col-md-3">Enter Title
                                </label>
                                <div class="">
                                    <input type="text" id="txt_title_eng_{groupId}" name="txt_title_eng[]"  placeholder="Enter Title English" class="form-control">
                                    <label id="Lbl_title_eng_{groupId}" class="error" style="color: red"></label>

                                    <input type="text" id="txt_title_welsh_{groupId}" name="txt_title_welsh[]"  placeholder="Enter Tilte Second Language" class="form-control">
                                    <label id="Lbl_title_welsh_{groupId}" class="error" style="color: red"></label>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="control-label col-md-3">Enter Description
                                </label>
                                <div class="">
                                    <input type="text" id="txt_des_eng_{groupId}" name="txt_des_eng[]"  placeholder="Enter description English" class="form-control">
                                    <label id="Lbl_des_eng_{groupId}" class="error" style="color: red"></label>

                                    <input type="text" id="txt_des_welsh_{groupId}" name="txt_des_welsh[]"  placeholder="Enter description Second Language" class="form-control">
                                    <label id="Lbl_des_welsh_{groupId}" class="error" style="color: red"></label>
                                </div>
                            </div>


                            <div class="form-group">
                                <label class="control-label col-md-3">Select Icon
                                </label>
                                <div class="">
                                    <input type="file" accept="image/*" id="icon_{groupId}" name="icon[]" placeholder="Enter Title English" class="form-control">
                                    <label id="Lbl_icon_{groupId}" class="error" style="color: red"></label>
                                </div>
                            </div>

                            {{-- </div> --}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script nonce="{{$cspNonce}}">
        // Medication Drop Down
        $('#medication_type').on('change', function() {
            var catid = this.value;
            var url = '{{ route('admin.get.medication', ['id' => 'slug']) }}';
            if (catid != "") {
                $.ajax({
                    type: 'POST',
                    url: url.replace("slug", catid),
                    data: { id: catid, _token: '{{ csrf_token() }}'},
                    success: function(data) {
                        $("#medication_name option").remove();
                        $('#medication_name').empty();
                        var appenddata1 = "<option value = ''>--- Select Medication  ---</option>";
                        if (data.length > 0) {
                            $("#medication_name").prop("disabled", false);
                            for (var i = 0; i < data.length; i++) {
                                appenddata1 += "<option value = '" + data[i].id + " '>" + data[i].name + " </option>";
                            }
                            $("#medication_name").append(appenddata1);
                            // $("#medication_name").val(data.length);
                        } else {
                            $("#medication_name").append(appenddata1);
                            $("#medication_name").val(data.length);
                            $("#medication_name").attr('disabled', true);
                        }
                    },error: function() {
                        alert("error");
                    }
                });
            }
        });
    </script>
    <script nonce="{{$cspNonce}}">
        $(document).on('click', '.radioChk', function() {

            var dataId = $(this).attr("data-id");
            var value = $(this).val();
            if (value == "link") {
                if ($("#chk_link_" + dataId).prop("checked") == true) {
                    $('#chk_pdf_' + dataId).prop('checked', false);
                    $('#chk_link_' + dataId).prop('checked', true);
                    $("#div_pdf_" + dataId).hide();
                    $("#div_link_" + dataId).show();
                } else {
                    $('#chk_link_' + dataId).prop('checked', false);
                    $('#chk_pdf_' + dataId).prop('checked', true);
                    $("#div_link_" + dataId).hide();
                    $("#div_pdf_" + dataId).show();
                }
            } else {
                if ($("#chk_pdf_" + dataId).prop("checked") == true) {
                    $('#chk_link_' + dataId).prop('checked', false);
                    $('#chk_pdf_' + dataId).prop('checked', true);
                    $("#div_link_" + dataId).hide();
                    $("#div_pdf_" + dataId).show();
                } else {
                    $('#chk_pdf_' + dataId).prop('checked', false);
                    $('#chk_link_' + dataId).prop('checked', true);
                    $("#div_pdf_" + dataId).hide();
                    $("#div_link_" + dataId).show();
                }
            }
        });

        // Dynamic add Control
        $("#form_btn").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();
        })
        $('#selectCat').hide();
    </script>

    <script nonce="{{$cspNonce}}">
        // form validation 
        $("#form_btn").click(function(event) {

            var temp = 0;
            $(".error").text("");

            var medication_type = $('#medication_type').val();
            if (medication_type == "") {
                temp = 1;
                $('#lblselectCatError').html("Please Select Medication Type");
            }
            var medication_name = $('#medication_name').val();
            if (medication_name == "") {
                temp = 1;
                $('#lblselectnameError').html("Please Select Medication Name");
            }

            var education_sub_cat_name = $('#education_sub_cat_name').val();
            var eduHidden = $('#education_sub_cat_name_hidden').val();
            if (education_sub_cat_name == "" && parseInt(eduHidden) != 0) {
                temp = 1;
                $('#lblselectSubCatError').html("Please Select Sub Category");
            }

            $(".classRadioDvz").each(function(index) {
                var idzz = $(this).attr('id');
                var idz = idzz.split('_');
                var id = idz[1];
                if (id != "{groupId}") {
                    var firstCheckBox = $("#chk_link_" + id).prop("checked");
                    var secondCheckBox = $("#chk_pdf_" + id).prop("checked");
                    if (firstCheckBox === true) {
                        //var checkValue=$("#chk_link_"+id).val();
                        //    
                        var txt_link_eng = $('#txt_link_eng_' + id).val();
                        if (txt_link_eng == "") {
                            temp = 1;
                            $('#Lbl_link_eng_' + id).html("Please Enter English Link Title");
                        }
                        var txt_link_welsh = $('#txt_link_welsh_' + id).val();
                        if (txt_link_welsh == "") {
                            temp = 1;
                            $('#Lbl_link_welsh_' + id).html("Please Enter Second Language Link Title");
                        }
                    } else if (secondCheckBox === true) {

                        var icon = document.getElementById("pdf_eng_" + id);
                        // Allowing file type 
                        var _validFileExtensions = /(.*?)\.(pdf|PDF)$/;
                        if (icon.files.length != 0) {
                            var filez = icon.value;
                            if (!filez.match(_validFileExtensions)) 
                            {
                                $('#lbl_eng_pfd_' + id).html("Please Select PDF");
                                icon.value = '';
                                temp = 1;
                            }
                        } else {
                            $('#lbl_eng_pfd_' + id).html("Please Select PDF");
                            icon.value = '';
                            temp = 1;
                        }

                        var icon = document.getElementById("pdf_welsh_" + id);
                        if (icon.files.length != 0) {
                            var filez = icon.value;
                            if (!filez.match(_validFileExtensions)) 
                            {
                                $('#lbl_wel_pfd_' + id).html("Please Select PDF");
                                icon.value = '';
                                temp = 1;
                            }
                        } else {
                            $('#lbl_wel_pfd_' + id).html("Please Select PDF");
                            icon.value = '';
                            temp = 1;
                        }
                    } else {
                        //error
                        temp = 1;
                        $('#lbl_chk_' + id).text('Please Select Resaurce Type');
                    }
                    var txt_title_eng = $('#txt_title_eng_' + id).val();
                    if (txt_title_eng == "") {
                        temp = 1;
                        $('#Lbl_title_eng_' + id).html("Please Enter English Title");
                    }
                    var txt_title_welsh = $('#txt_title_welsh_' + id).val();
                    if (txt_title_welsh == "") {
                        temp = 1;
                        $('#Lbl_title_welsh_' + id).html("Please Enter Second Language Title");
                    }

                    var txt_des_eng = $('#txt_des_eng_' + id).val();
                    if (txt_des_eng == "") {
                        temp = 1;
                        $('#Lbl_des_eng_' + id).html("Please Enter English Description");
                    }
                    var txt_des_welsh = $('#txt_des_welsh_' + id).val();
                    if (txt_des_welsh == "") {
                        temp = 1;
                        $('#Lbl_des_welsh_' + id).html("Please Enter Second Language Description");
                    }
                    var icon = document.getElementById("icon_" + id);
                    var _validFileExtensions = /(.*?)\.(jpg|bmp|jpeg|png|JPEG|PNG|JPG)$/;
                    if (icon.files.length != 0) {
                        var filez = icon.value;
                        if (!filez.match(_validFileExtensions)) 
                        {
                            $('#Lbl_icon_' + id).html("Please Select Image");
                            icon.value = '';
                            temp = 1;
                        }
                    } else {
                        $('#Lbl_icon_' + id).html("Please Select Image");
                        icon.value = '';
                        temp = 1;
                    }
                }

            });

            if (temp == 0) {
                document.getElementById("medres").submit()
            }
        });
    </script>
@endsection