@extends('fronted.layout.main')
@section('adcontent')
<style>
    #AdduserRolePage h5 {
        font-size: 1rem;
        padding: 5px 4px;
    }

    #AdduserRolePage .form-control:focus,
    #AdduserRolePage .form-select:focus,
    #AdduserRolePage .form-check-input:focus {
        box-shadow: none;
    }

    #AdduserRolePage .form-control,
    #AdduserRolePage .form-select,
    #AdduserRolePage .form-check-input #AdduserRolePage .form-label {
        font-size: 0.8rem;
    }

    .textValidation,
    .checkBoxvalidetion,
    .EditcheckBoxvalidetion {
        font-size: 0.6rem;
        padding: 0px;
        margin: 0;
        text-align: right;
    }

    .textValidation.true {
        color: green;
    }

    .textValidation.false {
        color: red;
    }

    .ValidationText {
        font-size: 0.6rem;
        color: red;
    }

    .form-control-sm.is-invalid {
        border: 1px solid red !important;
    }

    .result img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .cropper-crop-box {
        width: 100px;
        height: 100px;
    }

    .review-form {
        max-width: 100%;
        margin: 0 auto;
    }

    .review-form .form-control:focus {
        box-shadow: none;
    }

    .review-form .form-label {
        font-size: 0.8rem;
    }

    .review-form .form-control {
        font-size: 0.8rem
    }

    .star-rating {
        display: flex;
        align-items: center;
    }

    .star {
        font-size: 24px;
        cursor: pointer;
        color: #ccc;
        transition: color 0.3s;
    }

    .star:hover,
    .star.selected {
        color: gold;
    }

    .flex-div {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .review-box .modal-heading {
        margin-top: 10px;
        font-size: 1rem;
        color: black;
    }

    .ReviewCheck {
        font-size: 0.6rem;
    }

    .golden-star {
        color: gold;
        font-size: 1.2em;
        /* Adjust the size as needed */
    }

    .empty-star {
        color: gray;
        /* Color for empty stars */
        font-size: 1.2em;
        /* Adjust the size as needed */
    }

    .text-show {
        font-size: 0.8rem;
        padding: 3px;
        text-align: start;
        margin: 0;
        text-transform: capitalize;
    }

    .Ratingdata h1 {
        background-color: #000;
        padding: 5px;
        text-transform: capitalize;
        font-size: 1rem;
        color: #fff;
    }

    .Ratingdata .text-show {
        text-align: start;
    }

    .Ratingdata .RatingValueShow {
        text-align: end;
        margin-left: 55%;
        font-size: 1rem;
    }

    .emp-item {
        min-width: 100px;
    }
</style>
@if($errors->any())
<script>
    $(document).ready(function() {
        var form = sessionStorage.getItem('empform');
        $(form).modal("show");
        sessionStorage.removeItem('empform');
    });
</script>
@endif
<div class="container-fluid mt-2" id="AdduserRolePage">
    @if($message = Session::get("EmpSuccess"))
    <script>
        swal({
            icon: "success",
            title: "Employee Register",
            text: "{{$message}}"
        });
    </script>
    @php session()->forget('EmpSuccess') @endphp
    @endif
    @if($message = Session::get("EmpError"))
    <script>
        swal({
            icon: "warning",
            title: "User Register",
            text: "{{$message}}"
        });
        $("#UserRegisterModal").modal("show");
    </script>
    @php session()->forget('EmpError') @endphp
    @endif
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <p class="modal-title" id="deleteModalLabel">Confirm Delete</p>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="review-form">
                    <form action="{{route('delete.employes')}}" id="DeleteEmpRegistration" method="post" enctype="multipart/data">
                        @csrf
                        <div class="modal-body">
                            <div class="form-group mb-1">
                                <input type="hidden" id="condidateId" name="condidateId" class="form-control">
                            </div>
                            <div class="input-group mb-2">
                                <label for="emp_leave_date" class="input-group-text">Leave Date</label>
                                <input type="date" name="leave_date" class="form-control" id="emp_leave_date" required>
                            </div>
                            <div class="row review-box" id="ReviewBox">
                                <div class="col-lg-12">
                                    <p class="modal-heading">Add Review</p>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group FormGroup flex-div ">
                                        <label class="form-label" for="payment_terms">Payment Terms</label>
                                        <div class="star-rating d-inline-block">
                                            <span class="star" data-value="1">&#9733;</span>
                                            <span class="star" data-value="2">&#9733;</span>
                                            <span class="star" data-value="3">&#9733;</span>
                                            <span class="star" data-value="4">&#9733;</span>
                                            <span class="star" data-value="5">&#9733;</span>
                                            <p class="ValidationText"></p>
                                        </div>
                                        <input type="hidden" id="PaymentTerms" name="payment_terms_rating" value="0">
                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group FormGroup flex-div ">
                                        <label class="form-label" for="tenant_behavior">Behavior of the Tenant</label>
                                        <div class="star-rating d-inline-block">
                                            <span class="star" data-value="1">&#9733;</span>
                                            <span class="star" data-value="2">&#9733;</span>
                                            <span class="star" data-value="3">&#9733;</span>
                                            <span class="star" data-value="4">&#9733;</span>
                                            <span class="star" data-value="5">&#9733;</span>
                                            <p class="ValidationText"></p>
                                        </div>

                                        <input type="hidden" id="TenantBehavior" name="tenant_behavior_rating" value="0">

                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group FormGroup flex-div ">
                                        <label class="form-label" for="responsibilities">Responsible for Their Duties</label>
                                        <div class="star-rating d-inline-block">
                                            <span class="star" data-value="1">&#9733;</span>
                                            <span class="star" data-value="2">&#9733;</span>
                                            <span class="star" data-value="3">&#9733;</span>
                                            <span class="star" data-value="4">&#9733;</span>
                                            <span class="star" data-value="5">&#9733;</span>
                                            <p class="ValidationText"></p>
                                        </div>
                                        <input type="hidden" id="responsibilities" name="responsibilities_rating" value="0">

                                    </div>
                                </div>
                                <div class="col-lg-12">
                                    <div class="form-group">
                                        <label class="form-label" for="additional_comments">Additional Comments</label>
                                        <textarea class="form-control" name="additional_comments" id="additional_comments" rows="2"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-warning">Delete</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="d-flex justify-content-between align-items-center flex-wrap">
            <div>
                <a href="{{route('emp.registration.form')}}" class="btn btn-warning" style="font-size:1rem;"><i class="fa-solid fa-user-plus me-1"></i>Employee</a>
            </div>
            <div class="emp-item shadow bg-white text-black rounded p-1 my-2">
                <h5 class="text-center mb-0" style="font-size:1rem;">Total Registration : {{$totalReg}}</h5>
            </div>
            <div class="emp-item shadow bg-white text-black rounded p-1 my-2">
                <h5 class="text-center mb-0" style="font-size:1rem;">Current Registration: {{$runningReg}}</h5>
            </div>
            <div class="emp-item shadow bg-white text-black rounded p-1 my-2">
                <a href="{{ route('old.employee.show') }}" class="btn btn-sm m-0 p-0" style="font-size:1rem;"> Old Registration : {{$oldReg}} </a>
            </div>
            <div class="">
                <a href="{{ route('emp_attendance.view') }}" class="btn btn-warning" style="font-size:1rem;"><i class="fa-solid fa-calendar-days me-1"></i>Attendance</a>
            </div>
        </div>
        <div class="table-responsive dataTable">
            <table class="table align-middle roomSeats roomSeatTable text-center text-capitalize">
                <thead class="text-uppercase">
                    <tr>
                        <th>S.No</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Mobile</th>
                        <th>Designation</th>
                        <th>Present Count</th>
                        <th>Employee Id</th>
                        <th>Role</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    $employeCount = 1;
                    @endphp
                    @foreach($allEmployees as $employe)
                    <tr>
                        <td>{{$employeCount}}</td>
                        <td>{{strtolower($employe->candidate_name)}}</td>
                        <td>{{$employe->email}}</td>
                        <td>{{$employe->mobile}}</td>
                        <td>{{strtolower($employe->current_designation)}}</td>
                        <td>
                            {{$employe->attendanceForCurrentMonth['totalPresent']}}
                        </td>
                        <td>
                            {{ $employe->employee_id }}
                        </td>
                        <td>
                            {{ $employe->user_roll }}
                        </td>
                        <td>
                            <div class="d-flex gap-1 justify-content-center">
                                <button class="btn m-0 p-0 mx-2 deleteUserProfle" data-user="{{$employe->id}}" type="button" title="Delete" data-bs-toggle="tooltip" data-bs-placement="top"><i class="fa-solid fa-trash text-danger"></i></button>
                                <a class="btn m-0 p-0 ViewUserProfile" href="{{ route('emp.registrationform.edit',['empId'=>$employe->id]) }}" data-user="{{$employe->id}}" title="View User" data-bs-toggle="tooltip" data-bs-placement="top"><i class="fa-solid fa-eye text-warning"></i></a>
                                <a href="{{ route('emp_attendacne_view.view', ['id' => $employe->id]) }}" class="btn m-0 p-0 ms-2" type="button" title="Attendance " data-bs-toggle="tooltip" data-bs-placement="top"><i class="fa-solid fa-calendar-days"></i></a>
                                <a href="{{route('EmployeRegister')}}" class="btn m-0 p-0 ms-1" type="button" title="Add Roll" data-bs-toggle="tooltip" data-bs-placement="top"><i class="fa-solid fa-user"></i></a>
                            </div>
                        </td>
                    </tr>
                    @php
                    $employeCount++;
                    @endphp
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <!-- add payment modal -->
    <div class="modal fade" id="showPaymentDetails" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="showPaymentDetailsLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title flex-fill bg-black text-white text-center" id="showPaymentDetailsLabel">Payment Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <form id="updateSalarayForm" action="" method="post">
                            @csrf
                            <input type="hidden" name="emp_id" id="editUserId">

                            <div class=" input-group mb-3">
                                <label for="paymentMonth" class="input-group-text">For Month</label>
                                <input type="month" class="form-control" id="paymentMonth" name="salary_month" readonly>
                            </div>
                            <!-- Select Date -->
                            <div class=" input-group mb-3">
                                <label for="PayDate" class="input-group-text">Payment Date</label>
                                <input type="date" class="form-control" id="PayDate" name="pay_date" readonly>
                            </div>
                            <!-- Total Present -->
                            <div class=" input-group mb-3">
                                <label for="present" class="input-group-text">Total Present</label>
                                <input type="number" class="form-control" value="" id="present" name="total_present" readonly>
                            </div>
                            <!-- total salary -->
                            <div class="input-group mb-3">
                                <label for="amount" class="input-group-text">Amount</label>
                                <input type="number" id="amount" class="form-control" name="amount" readonly>
                            </div>
                            <!-- Bonus -->
                            <div class=" input-group mb-3">
                                <label for="userBonus" class="input-group-text">Bonus</label>
                                <input type="number" class="form-control" min="0" value="0" id="userBonus" name="bonus" readonly>
                            </div>
                            <!-- Penalty -->
                            <div class=" input-group mb-3">
                                <label for="userPenalty" class="input-group-text">Penalty</label>
                                <input type="number" class="form-control" min="0" value="0" id="userPenalty" name="penalty" readonly>
                            </div>
                            <!-- Total Payable Amount -->
                            <div class=" input-group mb-3">
                                <label for="totalAmount" class="input-group-text">Payable Amount</label>
                                <input type="number" class="form-control" id="totalAmount" name="total_amount" readonly>
                            </div>
                            <!-- Payment Mode -->
                            <div class="input-group mb-3">
                                <label for="paymentType" class="input-group-text">Payment Mode</label>
                                <select class="form-select" id="paymentType" name="payment_type">
                                    <option value="" selected disabled>Select</option>
                                    <option value="Cash">Cash</option>
                                    <option value="Online">Online</option>
                                    <option value="Cheque">Cheque</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="deleteSalaryBtn" class="btn btn-danger">Delete</button>
                    <button type="button" id="updateSalaryFormEditBtn" class="btn btn-success">Edit</button>
                    <button type="buttom" id="updateSalarayFormBtn" class="btn btn-warning" disabled>Update</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="addUserPaymentModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="addUserPaymentModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title flex-fill bg-black text-white text-center" id="addUserPaymentModalLabel">Payment Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <form id="addSalaryForm" action="" method="post">
                            @csrf
                            <!-- Selected Month -->
                            <input type="hidden" id="userId">
                            <div class=" input-group">
                                <label for="selectedMonth" class="input-group-text">For Month</label>
                                <input type="month" class="form-control" id="selectedMonth" name="salary_month" required>
                            </div>
                            <h6 id="paymentAlreadyDoneMessage" class="text-danger" style="font-size:0.6rem;">Payment Already created for this month.</h6>

                            <!-- Select Date -->
                            <div class=" input-group my-3">
                                <label for="selectDate" class="input-group-text">Payment Date</label>
                                <input type="date" class="form-control" value="{{Carbon\Carbon::now()->format('Y-m-d')}}" id="selectDate" name="pay_date">
                            </div>
                            <!-- Total Present -->
                            <div class=" input-group mb-3">
                                <label for="totalPresent" class="input-group-text">Total Present</label>
                                <input type="number" class="form-control" value="" id="totalPresent" name="total_present" readonly>
                            </div>
                            <!-- total salary -->
                            <div class="input-group mb-3">
                                <label for="totalSalary" class="input-group-text">Amount</label>
                                <input type="number" id="totalSalary" class="form-control" name="amount" readonly>
                            </div>
                            <!-- Bonus -->
                            <div id="bonusDiv" class=" input-group mb-3">
                                <label for="bonus" class="input-group-text">Bonus</label>
                                <input type="number" class="form-control" min="0" value="0" id="bonus" name="bonus">
                            </div>
                            <!-- Penalty -->
                            <div id="panaltyDiv" class=" input-group mb-3">
                                <label for="penalty" class="input-group-text">Penalty</label>
                                <input type="number" class="form-control" min="0" value="0" id="penalty" name="penalty">
                            </div>
                            <!-- Total Payable Amount -->
                            <div class=" input-group mb-3">
                                <label for="totalPayable" class="input-group-text">Payable Amount</label>
                                <input type="number" class="form-control" id="totalPayable" name="total_amount">
                            </div>
                            <!-- Payment Mode -->
                            <div class="input-group mb-3">
                                <label for="paymentMode" class="input-group-text">Payment Mode</label>
                                <select class="form-select" id="paymentMode" name="payment_type">
                                    <option value="" selected disabled>Select</option>
                                    <option value="Cash">Cash</option>
                                    <option value="Online">Online</option>
                                    <option value="Cheque">Cheque</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="addSalaryFormBtn" type="button" class="btn btn-warning">Submit</button>
                    <button id="showSalaryBtn" type="button" class="btn btn-warning" style="display:none;">Show</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        const formGroups = $(".FormGroup");
        const deleteForm = $("#DeleteEmpRegistration");

        deleteForm.on("submit", function(event) {
            formGroups.each(function() {
                let isValid = true;
                const formGroup = $(this);
                const input = formGroup.find("input[type='hidden']");
                const validationText = formGroup.find(".ValidationText");
                const leaveDate = formGroup.find('#emp_leave_date');

                if (input.val() === "0") {
                    isValid = false;
                    validationText.text("Please Add Review.");
                } else if (leaveDate.val() === "") {
                    isValid = false;
                    leaveDate.addClass('is-invalid');
                } else {
                    validationText.text(""); // Clear validation message
                }

                if (!isValid) {
                    event.preventDefault();
                }
            });
        });

        formGroups.each(function() {
            const formGroup = $(this);
            const stars = formGroup.find(".star");
            const input = formGroup.find("input[type='hidden']");

            stars.on("mouseover", function() {
                const value = $(this).data("value");
                stars.each(function(index) {
                    if (index < value) {
                        $(this).addClass("selected");
                    } else {
                        $(this).removeClass("selected");
                    }
                });
            });

            stars.on("click", function() {
                const value = $(this).data("value");
                input.val(value);
            });

            stars.on("mouseout", function() {
                stars.removeClass("selected");
                for (let i = 0; i < input.val(); i++) {
                    stars.eq(i).addClass("selected");
                }
            });
        });
    });
</script>

<script>
    $(document).ready(function() {
        let selectDateInput = $("#selectDate");
        let totalPresentInput = $("#totalPresent");
        let totalSalaryInput = $("#totalSalary");
        let bonusInput = $("#bonus");
        let penaltyInput = $("#penalty");
        let totalPayable = $("#totalPayable");
        let paymentMode = $("#paymentMode");
        let bonusDiv = $("#bonusDiv");
        let penaltyDiv = $("#panaltyDiv");
        let paymentAlreadyDoneMessage = $("#paymentAlreadyDoneMessage");

        function disabledInputFilled() {
            selectDateInput.attr('readonly', true);
            totalPresentInput.attr('readonly', true);
            totalSalaryInput.attr('readonly', true);
            bonusDiv.hide();
            penaltyDiv.hide();
            totalPayable.attr('readonly', true);
            paymentMode.attr('readonly', true);
            paymentAlreadyDoneMessage.show();
        }

        function enabledInputEmpty() {
            selectDateInput.attr('readonly', false);
            totalPresentInput.attr('readonly', false);
            totalSalaryInput.attr('readonly', false);
            bonusDiv.show();
            penaltyDiv.show();
            totalPayable.attr('readonly', false);
            paymentMode.attr('readonly', false);
            paymentAlreadyDoneMessage.hide();
        }

        $('.deleteUserProfle').on('click', function() {
            const id = $(this).data('user');
            $("#deleteModal").on('show.bs.modal', function() {
                $("#condidateId").val(id);
            }).modal('show');
        });
        $(".makePaymentBtn").on('click', function() {
            const userId = $(this).data('user');
            const salary = $(this).data('salary');
            const currentMonthTotalPrensent = $(this).data('present');
            let selectedMonth = $("#selectedMonth").val();
            // check before the modal is oppend salary already pain or not
            $.ajax({
                type: "get",
                url: "{{route('check.salary.already.paid')}}",
                data: {
                    'userId': userId,
                    'selectedMonth': selectedMonth
                },
                success: function(response) {
                    $('#addUserPaymentModal').on('show.bs.modal', function() {
                        let url = "{{route('emp.payment.monthly',['userId' => ':userId'])}}";
                        url = url.replace(':userId', userId);
                        let salarayAddBtn = $("#addSalaryFormBtn");
                        let showSalaryBtn = $("#showSalaryBtn");
                        $("#addSalaryForm").attr('action', url);
                        $("#totalPresent").val(currentMonthTotalPrensent);
                        $("#totalSalary").val(salary);
                        $("#totalPayable").val(salary);
                        $("#userId").val(userId);

                        // paymentStatus
                        const data = JSON.stringify(response.data);
                        if (response.paymentStatus == "Paid") {
                            salarayAddBtn.hide();
                            showSalaryBtn.data('salarydata', data);
                            showSalaryBtn.show();
                            disabledInputFilled();
                        } else {
                            salarayAddBtn.show();
                            showSalaryBtn.hide();
                            enabledInputEmpty();
                        }
                    }).modal('show');
                },
                error: function(error) {
                    Swal.fire({
                        icon: 'error',
                        text: 'Something went wrong!',
                        timer: 3000,
                        timerProgressBar: true,
                    });
                }
            });


        });
        $("#bonus").on('input', function() {
            let bonus = parseFloat($(this).val()) || 0;
            let penalty = parseFloat(($("#penalty").val()) || 0);
            let currentAmout = parseFloat($("#totalSalary").val()) || 0;
            var totalPayable = (currentAmout + bonus) - panalty;
            $("#totalPayable").val(totalPayable.toFixed(2));
        })
        $("#penalty").on('input', function() {
            let panalty = parseFloat($(this).val()) || 0;
            let bonus = parseFloat($("#bonus").val()) || 0;
            let currentAmout = parseFloat($("#totalSalary").val()) || 0;
            var totalPayable = (currentAmout + bonus) - panalty;
            $("#totalPayable").val(totalPayable.toFixed(2));
        });
        $("#showSalaryBtn").on('click', function() {
            var data = $(this).data("salarydata");
            if (typeof(data) === "string") {
                data = JSON.parse(data);
            }
            $("#addUserPaymentModal").modal('hide');
            $("#showPaymentDetails").on('show.bs.modal', function() {
                const dateObj = new Date(data['salary_month']);
                const year = dateObj.getFullYear();
                const month = String(dateObj.getMonth() + 1).padStart(2, '0');
                let url = "{{ route('salary.update',['empId'=>':id'])}}";
                url = url.replace(':id', data["id"]);
                $("#updateSalarayForm").attr('action', url);
                $("#paymentMonth").val(`${year}-${month}`);
                $("#PayDate").val(data['pay_date']);
                $("#present").val(data["total_present"]);
                $("#amount").val(data['amount']);
                $("#userBonus").val(data['bonus']);
                $("#userPenalty").val(data['penalty']);
                $("#totalAmount").val(data['total_amount']);
                $("#paymentType").val(data['payment_type']);
                $("#editUserId").val(data['emp_id']);
                $("#deleteSalaryBtn").data('user', data['id']);
            }).modal('show');
        });
        $("#selectedMonth").on('change', function() {
            var selectedDate = $(this).val();
            var userId = $("#userId").val();
            $.ajax({
                type: "GET",
                url: "{{ route('get.monthly.payment', ['empId' => ':id']) }}".replace(':id', userId),
                data: {
                    'changeDate': selectedDate,
                },
                success: function(response) {
                    const totalPresent = response.totalPresent;
                    const totalSalary = response.totalSalary;
                    const paymentDetails = response.paymentDetails;
                    let salarayAddBtn = $("#addSalaryFormBtn");
                    let showSalaryBtn = $("#showSalaryBtn");
                    $("#totalPresent").val(totalPresent);
                    $("#totalSalary").val(totalSalary);
                    $("#totalPayable").val(totalSalary);
                    $("#bonus").val(0);
                    $('#penalty').val(0);
                    if (paymentDetails.paymentStatus == "Paid") {
                        salarayAddBtn.hide();
                        showSalaryBtn.data('salarydata', paymentDetails.data);
                        showSalaryBtn.show();
                        disabledInputFilled();
                    } else {
                        salarayAddBtn.show();
                        showSalaryBtn.hide();
                        enabledInputEmpty();
                    }
                },
                error: function(xhr, status, error) {
                    Swal.fire({
                        icon: 'error',
                        'text': 'Something went wrong!',
                        timer: 3000,
                        timerProgressBar: true,
                    });
                }
            });
        });

        $("#addSalaryFormBtn").on('click', function() {
            $("#addSalaryForm").submit();
        });

        $("#updateSalaryFormEditBtn").on("click", function() {
            const selectedMonth = $("#paymentMonth");
            const PayDate = $("#PayDate");
            const userBonus = $("#userBonus");
            const userPenalty = $("#userPenalty");
            const updateSalarayFormBtn = $("#updateSalarayFormBtn");

            // selectedMonth.attr('readonly', false);
            PayDate.attr('readonly', false);
            userBonus.attr('readonly', false);
            userPenalty.attr('readonly', false);
            updateSalarayFormBtn.attr('disabled', false);
        });

        $("#userBonus").on('input', function() {
            let bonus = parseFloat($(this).val()) || 0;
            let penalty = parseFloat(($("#userPenalty").val()) || 0);
            let currentAmout = parseFloat($("#amount").val()) || 0;
            $("#totalAmount").val((bonus + currentAmout) - penalty);
        })
        $("#userPenalty").on('input', function() {
            let panalty = parseFloat($(this).val()) || 0;
            let bonus = parseFloat($("#userBonus").val()) || 0;
            let currentAmout = parseFloat($("#amount").val()) || 0;
            $("#totalAmount").val((currentAmout + bonus) - panalty);
        });

        $("#deleteSalaryBtn").on('click', function() {
            const userId = $(this).data('user');

            // Confirmation dialog using SweetAlert
            Swal.fire({
                title: 'Are you sure?',
                text: 'Once deleted, you will not be able to recover!',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Delete',
                cancelButtonText: 'Cancel',
                allowOutsideClick: false,
            }).then((result) => {
                if (result.isConfirmed) {
                    const token = $('meta[name="csrf-token"]').attr('content');
                    $.ajax({
                        type: "delete",
                        url: "{{route('delete.salary.records',['empId'=>':id'])}}".replace(':id', userId),
                        headers: {
                            'X-CSRF-TOKEN': token
                        },
                        dataType: "json",
                        success: function(response) {
                            Swal.fire({
                                'icon': 'success',
                                'text': 'Payment Records Deleted Successfully',
                                timer: 3000,
                                timerProgressBar: true,
                            });
                            location.reload();
                        },
                        error: function(xhr) {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON.message,
                                toast: true,
                                timer: 3000,
                                timerProgressBar: true,
                            });
                        }
                    });
                }
            });

        });

        $("#updateSalarayFormBtn").on('click', function() {
            $("#updateSalarayForm").submit();
        });

    });
    $(document).ready(function() {
        const selectedMonthInput = $('#selectedMonth');

        // Get the current year and month
        const currentDate = new Date();
        const currentYear = currentDate.getFullYear();
        const currentMonth = currentDate.getMonth() + 1;

        // Set the value of the input to the current year and month
        selectedMonthInput.val(`${currentYear}-${String(currentMonth).padStart(2, '0')}`);

        // Set the minimum and maximum values for the input
        const minDate = `${currentYear}-01`;
        const maxDate = `${currentYear}-${String(currentMonth).padStart(2, '0')}`;
        selectedMonthInput.attr('min', minDate);
        selectedMonthInput.attr('max', maxDate);
    });
</script>
@endsection