Backend-Api/ServiceHost/Areas/Client/Pages/PaymentToPersonnelCreate.cshtml

@using Version = _0_Framework.Application.Version
@model CompanyManagment.App.Contracts.PaymentToEmployee.CreatePaymentToEmployee

@{
    <link href="~/AssetsClient/css/select2.css?ver=@Version.StyleVersion" rel="stylesheet" />
    <style>
        .errored {
            color: #FF3A3A !important;
            border: 1px solid #FF3A3A !important
        }

        #printSection {
            display: none;
        }
    </style>
}


<form role="form" method="post" name="create-leave-form" id="create-payment-to-employee-form" autocomplete="off">

    <div class="modal-content">
        <div class="modal-header d-block text-center position-relative">
            <button type="button" class="btn-close position-absolute text-start" data-bs-dismiss="modal" aria-label="Close"></button>
            <h5 class="modal-title">ثبت پرداخت مبلغ به پرسنل</h5>
        </div>

        <div class="modal-body">
            <div class="container-fluid">
                <div class="row form-morakhasi-estehghaghi">
                    <div class="container-fluid">
                        <div class="row mb-3">
                            <div class="col-lg-6 col-12">
                                <select class="form-select select2Option" aria-label="انتخاب کارگاه ..." asp-for="WorkshopId" id="workshopSelect">
                                    <option value="">انتخاب کارگاه ...</option>
                                </select>
                            </div>
                            <div class="col-lg-6 col-12">
                                <select class="form-select select2Option" aria-label="انتخاب پرسنل ..." asp-for="EmployeeId" id="employeeSelect">
                                    <option value="">ابتدا کارگاه را انتخاب کنید ...</option>
                                </select>
                            </div>
                        </div>

                        <div id="cardSectionLeave" class="card border blur">
                            <div class="container-fluid d-none d-md-block p-0">
                                <div class="row">
                                    <div class="search-box">
                                        <div class="row">
                                            <div class="col-9">
                                                <div class="d-grid grid-cols-4 gap-2">
                                                    <input type="text" class="date" id="date" asp-for="CreatePaymentToEmployeeItem.PayDateFa" placeholder="تاریخ">
                                                    <input type="text" placeholder="شماره سند حسابداری">
                                                    <input type="text" asp-for="CreatePaymentToEmployeeItem.SourceBankName" placeholder="بانک مبدا">
                                                    <input type="text" asp-for="CreatePaymentToEmployeeItem.DestinationBankName" placeholder="بانک مقصد">
                                                </div>
                                                <div class="gap-2 mt-2" id="payment_input_change" style="display: none;">
                                                </div>
                                            </div>

                                            <div class="col-3">
                                                <div class="d-flex gap-2 justify-content-end">
                                                    <input type="text" asp-for="CreatePaymentToEmployeeItem.PaymentFa" placeholder="مبلغ (ريال)">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal-footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 text-center">
                        <div class="d-flex justify-content-center">
                            <a class="btn-cancel text-white w-25 mx-2" data-bs-dismiss="modal" aria-label="Close">انصراف</a>
                            <a href="#" id="save" class="btn-primary text-white w-25 mx-2">ثبت</a>
                            <button style="display: none;" type="submit" id="saveFinaly"></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</form>

@section Script {

}
<script src="~/admintheme/js/jquery.mask_1.14.16.min.js"></script>
<style>
    .validTime {
        color: #4d7c0f !important;
    }

    .invalidTime {
        color: #b91c1c !important;
    }
</style>
<script>
    $(document).ready(function () {
        document.getElementById("MainModal").style.visibility = "visible";

        $(".select2Option").select2({
            language: "fa",
            dir: "rtl",
            //dropdownParent: $('#MainModal'),
            templateResult: function (data, container) {
	            if (data.element) {
		            $(container).addClass($(data.element).attr("class"));
	            }
	            return data.text;
            }
        });
    });
    
    // Fetch workshops on page load
    $.ajax({
        url: '@Url.Page("/Index", "WorkshopList")',
        type: 'GET',
        success: function (response) {
            var workshops = response.workshops;
            var workshopOptionsHtml = '<option value="">انتخاب کارگاه ...</option>';
            workshops.forEach(function (workshop) {
                workshopOptionsHtml += '<option value="' + workshop.id + '">' + workshop.workshopFullName + '</option>';
            });
            $('#workshopSelect').html(workshopOptionsHtml);
        },
        error: function (xhr, status, error) {
            console.error(xhr.responseText);
        }
    });

    // Handle workshop selection
    $('#workshopSelect').change(function () {
        var workshopId = $(this).val();
        if (workshopId) {
            $.ajax({
                url: '@Url.Page("Index", "EmployeeList")',
                type: 'GET',
                data: { workshopId: workshopId },
                success: function (response) {
                    $('#cardSectionLeave').removeClass('blur');
                    $("#cardSectionLeave div *").prop('disabled', false);
                    var employees = response.employees.connectedPersonnelViewModels;
                    var employeeOptionsHtml = '';
                    employees.forEach(function (employee) {
                        var black = employee.black ? "blackSelect" : "";
                        employeeOptionsHtml += `<option class="${black}" value="${employee.id}">${employee.employeeFullName}</option>`;
                    });
                    $('#employeeSelect').html(employeeOptionsHtml);
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                }
            });
        }
    });

    $(".date").mask("0000/00/00");
    $('.date').on('input', function () {
        let Date = this.value;
        if (Date.length == 10) {
            let submitcheck = dateValidcheck(this);
            if (submitcheck) {
                $(this).removeClass('errored');
            } else {
                $(this).addClass('errored');
            }
        } else {
            $(this).addClass('errored');
        }
    });

    $('#date').on("keyup", function () {
        var isValid = /^([2][0-3]|[1][0-9]|[0-9]|[0][0-9])([:][0-5][0-9])$/.test($(this).val());
        if (isValid) {
            $(this).addClass("validTime");
            $(this).removeClass("invalidTime");
        } else {
            $(this).removeClass("validTime");
            $(this).addClass("invalidTime");
        }
    });

    $('#save').on('click', function () {
        if ($('.errored').length < 1) {
            $.ajax({
                async: false,
                dataType: 'json',
                type: 'POST',
                url: '@Url.Page("/Index", "PaymentToPersonnelSave")',
                headers: { "RequestVerificationToken": $('@Html.AntiForgeryToken()').val() },
                data: $('#create-payment-to-employee-form').serialize(),
                success: function (response) {
                    if (response.isSuccedded) {
                        $('.alert-success-msg').show();
                        $('.alert-success-msg p').text(response.message);
                        setTimeout(function () {
                            $('.alert-success-msg').hide();
                            $('.alert-success-msg p').text('');
                        }, 3500);
                    } else {
                        $('.alert-msg').show();
                        $('.alert-msg p').text(response.message);
                        setTimeout(function () {
                            $('.alert-msg').hide();
                            $('.alert-msg p').text('');
                        }, 3500);
                    }
                },
                error: function (err) {
                    console.log(err);
                }
            });
        } else {
            $('.alert-msg').show();
            $('.alert-msg p').text('لطفا خطاها را برطرف کنید.');
            setTimeout(function () {
                $('.alert-msg').hide();
                $('.alert-msg p').text('');
            }, 3500);
        }
    });

</script>