@extends('admin.layouts.app')
@section('title', 'Education Resource Add')
@section('content')
@section('css')
    <style>
        .error {
            color: red;
        }
    </style>

@endsection
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Education Resource
            <small>it all here</small>
        </h1>
        <ol class="breadcrumb">
            <li><a><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Add</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.education.resource.store') }}" id="form" class="form-horizontal"
                        method="post" enctype="multipart/form-data">
                        {{ csrf_field() }}
                        <div class="form-body" id="dvOuterOld">
                            <div class="form-group">
                                <label for="website" class="control-label col-md-3">Education Resource
                                    Category:</label>
                                <div class="col-md-6">
                                    <select name="education_cat_name" id="education_cat_name" class="form-control">
                                        <option value="">--- Select Category ---</option>
                                        @foreach ($data as $key => $value)
                                            <option value="{{ $value->id }}">{{ $value->name_eng }}</option>
                                        @endforeach
                                    </select>
                                    <label id="lblselectCatError" class="error"></label>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="website" class="control-label col-md-3">Education Resource Sub Category
                                    :</label>
                                <div class="col-md-6">
                                    <select name="education_sub_cat_name" id="education_sub_cat_name"
                                        class="form-control" disabled="">
                                        <option value="">--- Select Sub Category ---</option>
                                    </select>
                                    <label id="lblselectSubCatError" class="error"></label>
                                </div>
                                <input type="hidden" id="education_sub_cat_name_hidden" value="0">
                            </div>

                            <input type="hidden" name="hdId" id="hdId" value="0">
                            <div class="form-group classRadioDvz" id="dvMain_0">
                                <div class="form-group">
                                    <label class="control-label col-md-3">Resource Type
                                    </label>
                                    <div class="col-md-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-md-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-md-1">
                                        <div class="plus-icon">
                                            <a class="add_button btn btn-primary" title="Add field" id="fnBtnAdd"
                                                style="border-radius: 20px"><i class="fa fa-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="col-md-6">
                                        <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 welsh" 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="col-md-6">
                                        <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="col-md-6">
                                        <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  welsh" 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="col-md-6">
                                        <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  welsh" 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="col-md-6">
                                        <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>
            <div id="dvOuterMain" style="display: none">
                <div class="data classRadioDvz" id="dvMain_{groupId}">
                    <div class="form-group">
                        <div class="form-group">
                            <label class="control-label col-md-3">Resource Type
                            </label>
                            <div class="col-md-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-md-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-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><br>

                        </div>
                        <div class="form-group" id="div_link_{groupId}">
                            <label class="control-label col-md-3">Enter Link
                            </label>
                            <div class="col-md-6">
                                <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 welsh" class="form-control">
                                <label id="Lbl_link_welsh_{groupId}" class="error" style="color: red"></label>

                                <!--                                <label id="0" class="error" style="color: red" ></label>
<label id="0"  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="col-md-6">
                                <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="col-md-6">
                                <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  welsh" 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="col-md-6">
                                <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  welsh" 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="col-md-6">
                                <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>
    </section>
</div>
@endsection
@section('js')

<script nonce="{{ $cspNonce }}">
    // sub category drop down 
    $('#education_cat_name').on('change', function() {
        var catid = this.value;

        var url = '{{ route('get.subcategory', ['id' => 'slug']) }}';
        if (catid != "") {
            $.ajax({
                type: 'POST',
                url: url.replace("slug", catid),
                data: {
                    id: catid,
                    _token: '{{ csrf_token() }}'
                },
                success: function(data) {
                    $("#education_sub_cat_name option").remove();
                    $('#education_sub_cat_name').empty();
                    var appenddata1 = "<option value = ''>--- Select Sub Category --- </option>";
                    if (data.length > 0) {
                        $("#education_sub_cat_name").prop("disabled", false);
                        for (var i = 0; i < data.length; i++) {
                            appenddata1 += "<option value = '" + data[i].id + " '>" + data[i]
                                .name_eng + " </option>";
                        }
                        $("#education_sub_cat_name").append(appenddata1);
                        $("#education_sub_cat_name_hidden").val(data.length);
                    } else {
                        $("#education_sub_cat_name").append(appenddata1);
                        $("#education_sub_cat_name_hidden").val(data.length);
                        $("#education_sub_cat_name").attr('disabled', true);
                    }
                },
                error: function(e) {
                    console.log(e.responseJSON);
                    alert("Error");
                }
            });
        }
    });



    $(document).on('click', '.radioChk', function() {
        //        var valCheck = $(this).prop('checked');
        //        var val = $(this).val();
        //        if(valCheck === false){
        //             alert(val);
        //        }
        //            
        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
    $("#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);
    })
    // remove control
    $(document).on('click', ".fnRemove", function() {
        var intId = $(this).attr("data-del");
        $("#dvMain_" + intId).remove();
    })
    $('#selectCat').hide();

    // form validation 
    $("#form_btn").click(function(event) {
        var temp = 0;
        $(".error").text("");

        var education_cat_name = $('#education_cat_name').val();
        if (education_cat_name == "") {
            temp = 1;
            $('#lblselectCatError').html("Please Select Category");
        }

        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 Welsh 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 Welsh 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 Welsh 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("form").submit()
            //           alert('succss');
        }
    });
</script>
@endsection