@extends('../layout/' . $layout)

@section('subhead')
    <title>Atarud MIS - Employee Salary Payment</title>
@endsection
<style type="text/css">
    .stu_pro tr td {
        padding: 1px;
    }

    .fileBtn:hover {
        cursor: progress;
        color: red;
    }
</style>
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />

@section('subcontent')
    <div class="intro-y flex items-center mt-8">
        <h2 class="text-lg font-medium mr-auto">Employee Salary Payment</h2>
    </div>
    <div class="box ">

        <div class="col-span-12 lg:col-span-8 2xl:col-span-9 ">


                    <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400"
                        style="background-color: #292727; border-radius: 4px;">
                        <h2 class="font-medium text-base mr-auto" style="font-weight: bold; color:white;">Courses</h2>
                    </div>

                    <div class="p-5 box bg-primary/10">
                        <div class="flex flex-col-reverse xl:flex-row flex-col">
                            <div class="flex-1 mt-6 xl:mt-0">
                                <form id="studentForm" action="{{ url('employee/salary/payment/save') }}" method="post" enctype="multipart/form-data">
                                    @csrf
                                    @method('post')

                                <div class="modal-body p-10 grid grid-cols-12 gap-2">
                                    <input type="hidden" name="employee_id" value="{{$employee->id}}" id="employee_id">
                                    <div class="col-span-6">
                                        <label for="regular-form-1" class="form-label">Employee Name</label>
                                        <input id="empName" value="{{$employee->name}}"  type="text" class="form-control" placeholder="Teacher Name">
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-2" class="form-label">Title</label>
                                        <input id="regular-form-2" name="title" type="text" class="form-control" placeholder="Title">
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-3" class="form-label">Account</label>
                                        <input id="regular-form-3" type="text" class="form-control" placeholder="Teacher Salary" disabled>
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-4" class="form-label">Description</label>
                                        <input id="regular-form-4" name="description" type="text" class="form-control" placeholder="Description">
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-5" class="form-label">Salary</label>
                                        <input id="salary" type="text" value="{{$employee->emp_salary_amount}}" name="salary" onchange="return totalPayable();" class="form-control" placeholder="Disabled" >
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-2" class="form-label">Tax</label>
                                        <input id="tax" name="tax" type="text" class="form-control" placeholder="Tax">
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-2" class="form-label">Payable</label>
                                        <input id="payable" type="text" name="payable_amount" class="form-control" placeholder="Payable Amount">
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-2" class="form-label">Payment</label>
                                        <input id="payment" type="text" name="payment" class="form-control" placeholder="Payment">
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-2" class="form-label">Deduction</label>
                                        <input id="deduction" type="text" value="{{$data['deduction']}}" name="deduction" class="form-control" placeholder="Deduction">
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-2" class="form-label">Reward</label>
                                        <input id="reward" type="text" value="{{$data['reward']}}" name="reward" class="form-control" placeholder="Reward">
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-2" class="form-label">Method</label>
                                          <select class="form-select"name="method" aria-label="Default select example">
                                            <option>Select</option>
                                            <option value="cash">Cash</option>
                                            <option value="bank">Bank</option>
                                        </select>
                                    </div>
                                    <div class="col-span-6">
                                        <label for="regular-form-2" class="form-label">Date</label>
                                        <input name="date" type="text" placeholder="YYYY-0M-0D" class="form-control pdpF2">
                                    </div>

                                    <div class="col-span-6">
                                        <label for="regular-form-2" class="form-label">Currency</label>
                                           <select class="form-select" name="currency" aria-label="Default select example">
                                            <option>Select</option>
                                            <option value="afg">Afghani</option>
                                            <option value="dollar">Dollar</option>
                                            <option value="euro">Euro</option>
                                        </select>
                                    </div>
                                </div>
                                    <button type="submit" class="btn btn-primary mt-5 float-right">Save</button>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
        </div>
    </div>
    </form>
    </div>

@endsection

@section('script')
<script src="{{ asset('dist/js/jquery.js') }}"></script>
<script src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
<script>
           
    $(function () {

        $(".pdpF2").persianDatepicker({
            months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
            dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
            shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
            showGregorianDate: !1,
            persianNumbers: !0,
            formatDate: "YYYY-MM-DD",
            selectedBefore: !1,
            selectedDate: null,
            startDate: null,
            endDate: null,
            prevArrow: '\u25c4',
            nextArrow: '\u25ba',
            theme: 'default',
            alwaysShow: !1,
            selectableYears: null,
            selectableMonths: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            cellWidth: 25, // by px
            cellHeight: 20, // by px
            fontSize: 13, // by px
            isRTL: !1,
            calendarPosition: {
                x: 0,
                y: 0,
            },
            onShow: function () {},
            onHide: function () {},
            onSelect: function () { },
            onRender: function () {}
    });

    });
</script>

    <script>
         $('#payment_status').on('change', function(){
            if(this.value == 'complete'){
                let payable = $('#payable').val();
                $('#payment').val(payable);
            }
        });
          $(document).ready(function(){
            let reward = jQuery('#reward').val();
            let deduction = jQuery('#deduction').val();
            let salary = jQuery('#salary').val();

            let taxValue = 0;
        	let total = salary;

            if (total > 5000  && total <= 12500) {taxValue = (total - 5000) * 2 / 100;}
            if (total > 12500 && total < 100000) {taxValue = ((total - 12500) * 10 / 100) + 150;}
            if (total > 100000) {taxValue = ((total - 100000) * 20 / 100) + 8900;}

            jQuery('#tax').val(taxValue);
            let tax = jQuery('#tax').val();
            let totalToPay = (Number(salary) + Number(reward)) - (Number(deduction) + Number(tax));
            jQuery('#payable').val(totalToPay);
        });

        function totalPayable() {

            let reward = jQuery('#reward').val();
            let deduction = jQuery('#deduction').val();
            let salary = jQuery('#salary').val();

            let taxValue = 0;
        	let total = salary;

            if (total > 5000  && total <= 12500) {taxValue = (total - 5000) * 2 / 100;}
            if (total > 12500 && total < 100000) {taxValue = ((total - 12500) * 10 / 100) + 150;}
            if (total > 100000) {taxValue = ((total - 100000) * 20 / 100) + 8900;}

            jQuery('#tax').val(taxValue);
            let tax = jQuery('#tax').val();
            let totalToPay = (Number(salary) + Number(reward)) - (Number(deduction) + Number(tax));
            jQuery('#payable').val(totalToPay);


        }

    </script>
@endsection