$(document).ready(function () {
        loadSubjectList();

    $('#btn-add').on('click',
    function (e) {
        e.preventDefault();

    var subject = $("#NewSubject").val().trim();

    if (subject != '')
    {
        $.ajax({
            async: false,
            dataType: 'json',
            type: 'POST',
            url: CreateTaskSubjectAjax,
            headers: { "RequestVerificationToken": antiForgeryToken },
            data: { subject: subject },
            success: function (response) {
                if (response.isSuccess) {
                    loadSubjectList();
                    $("#NewSubject").val('');
                }
            },
            error: function (err) {
                console.log(err);
            }
        });

                }
            });


    $('#NewSubject').on('keyup keypress', function (e) {
            if ($('#NewSubject').val() != '') {
                //کلید دمکه اینتر 13
                var keyCode = e.keyCode || e.which;
    if (keyCode === 13) {
        $('#btn-add').click();
                }
            }
        });

    });

    function loadSubjectList() {

        var htmlItem = '';

    $.ajax({
        url: listTaskSubjectAjax,
    type: 'GET',
    success: function (response) {
                var items = response.result;

    items.forEach(function (item) {
        htmlItem += `<div class="items" id="item">
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <div class="from-group w-100">
                                                        <span class="searchItem" id="editSubjectSpan_${item.id}">${item.subject}</span>
                                                        <input type="text" value="${item.subject}" class="form-control editSubject" id="editSubject_${item.id}" style="display:none;">
                                                    </div>

                                                    <div  id="editOperation_${item.id}" style="display: flex;">
                                                        <button permission="90316" class="btn-edit-subject" onclick="editOperation(${item.id})">
                                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
                                                                <path d="M12.5 7.5L5.92819 14.0718C5.71566 14.2843 5.60939 14.3906 5.53953 14.5212C5.46966 14.6517 5.44019 14.7991 5.38124 15.0938L4.64709 18.7646C4.58057 19.0972 4.5473 19.2635 4.64191 19.3581C4.73652 19.4527 4.90283 19.4194 5.23544 19.3529L8.90621 18.6188C9.20093 18.5598 9.3483 18.5303 9.47885 18.4605C9.60939 18.3906 9.71566 18.2843 9.92819 18.0718L16.5 11.5L12.5 7.5Z" fill="#7E869E" fill-opacity="0.25"/>
                                                                <path d="M5.95396 19.38L5.95397 19.38L5.9801 19.3734L5.98012 19.3734L8.60809 18.7164C8.62428 18.7124 8.64043 18.7084 8.65654 18.7044C8.87531 18.65 9.08562 18.5978 9.27707 18.4894C9.46852 18.381 9.62153 18.2275 9.7807 18.0679C9.79242 18.0561 9.80418 18.0444 9.81598 18.0325L17.0101 10.8385L17.0101 10.8385L17.0369 10.8117C17.3472 10.5014 17.6215 10.2272 17.8128 9.97638C18.0202 9.70457 18.1858 9.39104 18.1858 9C18.1858 8.60896 18.0202 8.29543 17.8128 8.02361C17.6215 7.77285 17.3472 7.49863 17.0369 7.18835L17.01 7.16152L16.8385 6.98995L16.8117 6.96314C16.5014 6.6528 16.2272 6.37853 15.9764 6.1872C15.7046 5.97981 15.391 5.81421 15 5.81421C14.609 5.81421 14.2954 5.97981 14.0236 6.1872C13.7729 6.37853 13.4986 6.65278 13.1884 6.96311L13.1615 6.98995L5.96745 14.184C5.95565 14.1958 5.94386 14.2076 5.93211 14.2193C5.77249 14.3785 5.61904 14.5315 5.51064 14.7229C5.40225 14.9144 5.34999 15.1247 5.29562 15.3435C5.29162 15.3596 5.28761 15.3757 5.28356 15.3919L4.62003 18.046C4.61762 18.0557 4.61518 18.0654 4.61272 18.0752C4.57411 18.2293 4.53044 18.4035 4.51593 18.5518C4.49978 18.7169 4.50127 19.0162 4.74255 19.2574C4.98383 19.4987 5.28307 19.5002 5.44819 19.4841C5.59646 19.4696 5.77072 19.4259 5.92479 19.3873C5.9346 19.3848 5.94433 19.3824 5.95396 19.38Z" stroke-width="1.2"/>
                                                                <path d="M12.5 7.5L16.5 11.5" stroke-width="1.2"/>
                                                            </svg>
                                                        </button>
                                                        <button permission="90315" class="btn-remove-subject" onclick="removeSubject(${item.id})">
                                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
                                                                <path d="M10 15L10 12" stroke-width="2" stroke-linecap="round"/>
                                                                <path d="M14 15L14 12" stroke-width="2" stroke-linecap="round"/>
                                                                <path d="M3 7H21V7C20.0681 7 19.6022 7 19.2346 7.15224C18.7446 7.35523 18.3552 7.74458 18.1522 8.23463C18 8.60218 18 9.06812 18 10V16C18 17.8856 18 18.8284 17.4142 19.4142C16.8284 20 15.8856 20 14 20H10C8.11438 20 7.17157 20 6.58579 19.4142C6 18.8284 6 17.8856 6 16V10C6 9.06812 6 8.60218 5.84776 8.23463C5.64477 7.74458 5.25542 7.35523 4.76537 7.15224C4.39782 7 3.93188 7 3 7V7Z" stroke-width="2" stroke-linecap="round"/>
                                                                <path d="M10.0681 3.37059C10.1821 3.26427 10.4332 3.17033 10.7825 3.10332C11.1318 3.03632 11.5597 3 12 3C12.4403 3 12.8682 3.03632 13.2175 3.10332C13.5668 3.17033 13.8179 3.26427 13.9319 3.37059" stroke-width="2" stroke-linecap="round"/>
                                                            </svg>
                                                        </button>
                                                    </div>

                                                    <div id="editConfirm_${item.id}" style="display: none;">
                                                        <button class="btn-edit-subject" onclick="editSubject(${item.id})">
                                                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor">
                                                                <path d="M5 14L9 17L18 6" stroke-width="2"/>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>`;
                });

    $('#loadSubjectList').html(htmlItem);
            },
    error: function (xhr, status, error) {
        console.error(xhr.responseText);
            }
        });
    }


    // $(".editSubject").on('keyup keypress', function (e) {
        // 	if (this.val() != '') {
        // 		//کلید دمکه اینتر 13
        // 		var keyCode = e.keyCode || e.which;
        // 		if (keyCode === 13) {
        // 			editSubject(id);
        // 		}
        // 	}
        // });

        function editSubject(id) {

            var subjectTitle = $("#editSubject_" + id).val();

            if (subjectTitle.trim() != '') {
                $.ajax({
                    async: false,
                    dataType: 'json',
                    type: 'POST',
                    url: editTaskSubjectAjax,
                    headers: { "RequestVerificationToken": antiForgeryToken },
                    data: { id: Number(id), subject: subjectTitle },
                    success: function (response) {
                        if (response.isSuccess) {
                            loadSubjectList();
                        }
                    },
                    error: function (err) {
                        console.log(err);
                    }
                });
            }

            loadSubjectList();
        }

    function removeSubject(id) {
        swal({
            title: "آیا از حذف این عنوان اطمینان دارید؟",
            text: "",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "بله",
            cancelButtonText: "خیر",
            closeOnConfirm: true,
            closeOnCancel: true
        }, function (isConfirm) {
            if (isConfirm) {
                deleteSubject(id);
            }
        });
    }

    function deleteSubject(id) {
        var ID = Number(id);

    $.ajax({
        async: false,
    dataType: 'json',
    type: 'POST',
        url: RemoveTaskSubjectAjax,
        headers: { "RequestVerificationToken": antiForgeryToken },
    data: {id: Number(ID) },
    success: function (response) {
        console.log(response);
    if (response.isSuccess) {
        loadSubjectList();
                }
            },
    error: function (err) {
        console.log(err);
            }
        });
    }


    function searchSubjectTask() {

        var input, filter, tbody, tr, a, i;
    input = document.getElementById("SearchSubject");


    filter = input.value.toUpperCase();
    tbody = document.getElementById("loadSubjectList");
    tr = tbody.getElementsByClassName("items");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByClassName("searchItem")[0];
            if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
            } else {
        tr[i].style.display = "none";
            }
        }
    }


    function editOperation(id) {
        $("#editOperation_" + id).css('display', 'none');
    $("#editConfirm_" + id).css('display', 'flex');

    var subjectTitleSpan = $("#editSubjectSpan_" + id);
    subjectTitleSpan.css('display', 'none');

    var subjectTitle = $("#editSubject_" + id);
    subjectTitle.css('display', 'block');
    subjectTitle.focus();
    }