@extends('layouts.main')

@push('styles')
    <link href="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css"/>
    <link href="{{ asset('elite/bower_components/select2/select2.min.css') }}" rel="stylesheet" />
@endpush

@section('content')
    <div class="row bg-title">
        <div class="col-lg-3 col-md-4 col-sm-4 col-xs-12">
            <h4 class="page-title">{{ __('payroll.create_multiple_employees') }}</h4>
        </div>
        <div class="col-lg-9 col-sm-8 col-md-8 col-xs-12">
            <ol class="breadcrumb">
                <li><a href="{{ route('home') }}"><i class="fa fa-home"></i> {{ __('payroll.home') }}</a></li>
                <li><a href="{{ route('finance') }}"><i class="fa fa-money"></i> {{ __('payroll.finance_home') }}</a></li>
                <li><a href="{{ route('payroll.index') }}"><i class="fa fa-eye"></i> {{ __('payroll.view_payrolls') }}</a></li>
                <li class="active"><i class="fa fa-plus"></i> {{ __('payroll.create_multiple_employees') }}</li>
            </ol>
        </div>
    </div>

    @include('payroll::payroll.menu')

    <div class="white-box">
        @include('flash::message')

        {{ Form::open(['route' => ['payroll.bulk_store']]) }}

        <div class="table-responsive">
            <table class="table table-hover color-table success-table table-bordered">
                <thead>
                <tr>
                    <th class="text-center">{{ __('payroll.staff_member') }}</th>
                    <th class="text-center">{{ __('payroll.position') }}</th>
                    <th class="text-center">{{ __('payroll.department') }}</th>
                    <th class="text-center">{{ __('payroll.payroll_categories') }}</th>
                    <th class="text-center">{{ __('payroll.social_security_number') }}</th>
                    <th class="text-center">{{ __('payroll.tin_number') }}</th>
                    <th class="text-center">{{ __('payroll.salary_scale') }}</th>
                    <th class="text-center">{{ __('payroll.contract_type') }}</th>
                    <th class="text-center">{{ __('payroll.contract_start') }}</th>
                    <th class="text-center">{{ __('payroll.contract_end') }}</th>
                    <th class="text-center">{{ __('payroll.bank') }}</th>
                    <th class="text-center">{{ __('payroll.bank_account_number') }}</th>
                    <th class="text-center">{{ __('payroll.basic_pay') }}</th>
                    <th></th>
                </tr>
                </thead>
                <tbody class='input_fields_body'>
                    @php
                        $option_positions = "";
                        foreach ($positions as $key => $value){
                            $option_positions .= "<option value='$key'>$value</option>";
                        }

                        $option_departments = "";
                        foreach ($departments as $key => $value){
                            $option_departments .= "<option value='$key'>$value</option>";
                        }

                        $option_contracts = "";
                        foreach ($contracts as $key => $value){
                            $option_contracts .= "<option value='$key'>$value</option>";
                        }

                        $option_banks = "";
                        foreach ($banks as $key => $value){
                            $option_banks .= "<option value='$key'>$value</option>";
                        }

                        $option_payroll_categories = "";
                        foreach ($payroll_categories as $key => $value){
                            $option_payroll_categories .= "<option value='$key'>$value</option>";
                        }

                        $option_salary_scales = "";
                        foreach ($salary_scales as $key => $value){
                            $option_salary_scales .= "<option value='$key'>$value</option>";
                        }
                    @endphp
                    <tr>
                        <td>
                            <select class='patient_full_name form-control' name='patient_id[]' id='patient_full_name_0'></select>
                        </td>
                        <td>
                            <select name='position[]' class='form-control compulsory' required>@php echo $option_positions; @endphp</select>
                        </td>
                        <td>
                            <select name='department[]' class='form-control compulsory' required>@php echo $option_departments; @endphp</select>
                        </td>
                        <td>
                            <select name='payroll_category[]' class='form-control compulsory' required>@php echo $option_payroll_categories; @endphp</select>
                        </td>
                        <td>
                            <input type='text' name='nssf_number[]' class='form-control'>
                        </td>
                        <td>
                            <input type='text' name='tin_number[]' class='form-control'>
                        </td>
                        <td>
                            <select name='salary_scale[]' class='form-control' required>@php echo $option_salary_scales; @endphp</select>
                        </td>
                        <td>
                            <select name='contract[]' class='form-control compulsory' required>@php echo $option_contracts; @endphp</select>
                        </td>
                        <td><input type='text' name='contract_start_date[]' class='form-control start_date' readonly></td>
                        <td><input type='text' name='contract_end_date[]' class='form-control end_date' readonly></td>
                        <td>
                            <select name='payroll_bank_id[]' class='form-control compulsory' required>@php echo $option_banks; @endphp</select>
                        </td>
                        <td>
                            <input type='number' name='bank_account_number[]' class='form-control compulsory' required>
                        </td>
                        <td>
                            <input type='number' name='basic_pay[]' id='basic_pay_0' class='form-control compulsory' required onchange='check_basic_pay(0)'>

                            <br><br>
                            <label for='social_security_amount'>{{ __('payroll.social_security_amount') }}</label>
                            <input type='number' name='social_security_amount[]' class='form-control compulsory' required id='social_security_amount_0'>

                            <br><br>
                            <label for='tax_amount'>{{ __('payroll.tax_amount') }}</label>
                            <input type='number' name='tax_amount[]' class='form-control compulsory' required id='tax_amount_0'>
                        </td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <a class="btn btn-success btn-xs" onclick="add_new_row()">{{ __('triage.add_row') }}</a>

            <hr>

            {{ Form::button(__('payroll.submit'),['type'=>'submit','class'=>'btn btn-success waves-effect waves-light m-r-10']) }}
            {{ Form::button(__('payroll.cancel'),['type'=>'reset','class'=>'btn btn-default waves-effect waves-light']) }}

            {{ Form::close() }}
        </div>
    @endsection

    @push('scripts')
        <script src="{{ asset('elite/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
        <script src="{{ asset('elite/bower_components/select2/select2.min.js') }}"></script>

        <script>
            function check_basic_pay(id) {
                let data = 'amount=' + $('#basic_pay_' + id).val();

                $.ajax({
                    type: "get",
                    url: "/payroll/calculate_paye",
                    data: data,
                    cache: false,
                    success: function (result) {
                        $('#tax_amount_' + id).val(result);
                    }
                });

                $.ajax({
                    type: "get",
                    url: "/payroll/calculate_nssf",
                    data: data,
                    cache: false,
                    success: function (result) {
                        $('#social_security_amount_' + id).val(result);
                    }
                });
            }

            initialize_dates();
            generalSelect2Set('patient_full_name_0');

            let max_rows = 20;
            let wrapper = $(".input_fields_body");
            let x = 1;

            $(wrapper).on("click", ".remove_field", function (e) {
                e.preventDefault();
                $(this).parent('td').parent('tr').remove();
                x--;
            });

            function add_new_row() {
                if (x < max_rows) {
                    $(wrapper).append("<tr>\
                        <td><select class='patient_full_name form-control' name='patient_id[]' id='patient_full_name_" + x + "'></select></td>\
                    <td><select name='position[]' class='form-control compulsory' required>@php echo $option_positions; @endphp</select></td>\
                    <td><select name='department[]' class='form-control compulsory' required>@php echo $option_departments; @endphp</select></td>\
                    <td><select name='payroll_category[]' class='form-control compulsory' required>@php echo $option_payroll_categories; @endphp</select></td>\
                    <td><input type='text' name='nssf_number[]' class='form-control'></td>\
                    <td><input type='text' name='tin_number[]' class='form-control'></td>\
                    <td><select name='salary_scale[]' class='form-control' required>@php echo $option_salary_scales; @endphp</select></td>\
                    <td><select name='contract[]' class='form-control compulsory' required>@php echo $option_contracts; @endphp</select></td>\
                    <td><input type='text' name='contract_start_date[]' class='form-control start_date' readonly></td>\
                    <td><input type='text' name='contract_end_date[]' class='form-control end_date' readonly></td>\
                    <td><select name='payroll_bank_id[]' class='form-control compulsory' required>@php echo $option_banks; @endphp</select></td>\
                    <td><input type='number' name='bank_account_number[]' class='form-control compulsory' required></td>\
                    <td><input type='number' name='basic_pay[]' class='form-control compulsory' id='basic_pay_" + x + "' required onchange='check_basic_pay(" + x + ")'>\
                    <br><br>\
                    <label for='social_security_amount'>Social Security Amount</label>\
                    <input type='number' name='social_security_amount[]' class='form-control compulsory' required id='social_security_amount_" + x + "'>\
                    <br><br>\
                    <label for='tax_amount'>Tax Amount</label>\
                    <input type='number' name='tax_amount[]' class='form-control compulsory' required id='tax_amount_" + x + "'></td>\
                    <td style='width: 1%;'><a class='remove_field btn btn-sm btn-rounded btn-danger' style='color: white;'><i class='fa fa-trash'></i></a></td></tr>");

                    generalSelect2Set('patient_full_name_'+x);
                    initialize_dates();

                    x++;
            }
        }

        function generalSelect2Set(id) {
            $('#'+id).select2({
                width: "100%",
                placeholder: "<?php echo "Patient's Full Name" ?>",
                ajax: {
                    url: '/patients/search_patient_by_name_number',
                    dataType: 'json',
                    delay: 250,
                    processResults: function (data) {
                        return {
                            results:  $.map(data, function (item) {
                                return {
                                    text: item.first_name + " " + item.last_name + " ("+ item.number + ") " + item.phone,
                                    id: item.id
                                }
                            })
                        };
                    },
                    cache: true
                }
            });
        }

        function initialize_dates() {
            $('.start_date').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: 'dd/mm/yyyy'
            });

            $('.end_date').datepicker({
                autoclose: true,
                todayHighlight: true,
                format: 'dd/mm/yyyy'
            });
        }
    </script>
@endpush