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

@section('subhead')
    <title>Atarud MIS - Employees Salary</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection
<link rel="stylesheet" href="{{ asset('dist/persianDatepicker/css/persianDatepicker-default.css') }}" />

@section('subcontent')
<div class="flex items-center mt-8">
    <a href="{{route('emp.advance.payments')}}"class="btn btn-primary w-24 ml-auto">
        <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Advance
    </a>
</div>
<div class="flex flex-col sm:flex-row items-center w-30 mr-4  mt-2 float-right">
    <input name="payableMonth" type="text"  id="month" placeholder="YYYY-0M-0D" class="form-control pdpF2">
</div>
 
    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Employees Salary</h2>
    </div>
    <div class="container box">
        <div class="row">
            <div class="col-12 table-responsive">
                <table class="table table-bordered salary_datatable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Employee Name</th>
                            <th>F/Name</th>
                            <th>Salary</th>
                            <th>Punishment</th>
                            <th>Reward</th>
                            <th>Advance</th>
                            <th>Tax</th>
                            <th>Payable</th>
                            <th>Status</th>
                            <th width="100px">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                       
                    </tbody>
                </table>
            </div>
        </div>
    </div>
 
@endsection
@section('script')
     
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/js/dataTables.min.js') }}"></script>
    <script src="{{ asset('dist/persianDatepicker/js/persianDatepicker.js') }}"></script>
    <script>
                var table = $('.salary_datatable').DataTable({
                    processing: true,
                    serverSide: true,
                    ajax: {
                    url: "{{ url('/employee/salary/') }}",
                    data: function (d) {
                        d.month = $('#month').val()
                    }
                    },
                    columns: [
                    {data: 'id', name: 'id'},
                    {data: 'emp_fname', name: 'emp_fname'},
                    {data: 'emp_father_name', name: 'emp_father_name'},
                    {data: 'emp_salary_amount', name: 'emp_salary_amount'},
                    {data: 'punishment', name: 'punishment'},
                    {data: 'reward', name: 'reward'},
                    {data: 'advance', name: 'advance'},
                    {data: 'tax', name: 'tax'},
                    {data: 'payable', name: 'payable'},
                    {data: 'payment_status', name: 'payment_status'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
                });
            function tableDraw(dataTable){
                dataTable.draw();
            }
        $(function () {
    
            $(".pdpF2").persianDatepicker({
                months: ["حمل", "ثور", "جوزا", "سرطان", "اسد", "سنبله", "میزان", "عقرب", "قوس", "جدی", "دلو", "حوت"],
                dowTitle: ["شنبه", "یکشنبه", "دوشنبه", "سه شنبه", "چهارشنبه", "پنج شنبه", "جمعه"],
                shortDowTitle: ["ش", "ی", "د", "س", "چ", "پ", "ج"],
                showGregorianDate: !1,
                persianNumbers: !0,
                formatDate: "YYYY-MM",
                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 () {tableDraw(table);},
                onRender: function () {}
        });
    
        });
    </script>
    <script type="text/javascript">
   
        function givePayment(e){
            var id = $(e).data('id');
              $.ajax({
                method: 'GET',
                url: "{{ url('/get/teacher/details') }}",
                data: {
                    id: id,
                },

                success: function(response) {
                    console.log(response);
                    jQuery('#teacher_id').val(response[0].id);
                    jQuery('#teacherName').val(response[0].name);
                    jQuery('#salary').val(response[0].salary);
                    jQuery('#payable').val(response[1]);
                    jQuery('#deduction').val(response[2]);
                    jQuery('#reward').val(response[3]);
                }
            });
        }

        // $(function () {
        //     var table = $('.salary_datatable').DataTable({
        //         processing: true,
        //         serverSide: true,
        //         ajax: "{{ url('/employee/salary/') }}",
        //         columns: [
        //             {data: 'id', name: 'id'},
        //             {data: 'emp_fname', name: 'emp_fname'},
        //             {data: 'emp_father_name', name: 'emp_father_name'},
        //             {data: 'emp_salary_amount', name: 'emp_salary_amount'},
        //             {data: 'punishment', name: 'punishment'},
        //             {data: 'reward', name: 'reward'},
        //             {data: 'advance', name: 'advance'},
        //             {data: 'tax', name: 'tax'},
        //             {data: 'payable', name: 'payable'},
        //             {data: 'payment_status', name: 'payment_status'},
        //             {data: 'action', name: 'action', orderable: false, searchable: false},
        //         ]
        //     });
        // });
    </script>
 
@endsection