@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.add_payroll') }}</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.add_payroll') }}</li>
            </ol>
        </div>
    </div>

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

    <div class="white-box">
        <!--Flash messages at the top -->
        @include('flash::message')

        {{ Form::open(['route' => 'payroll.store', 'data-toggle' => 'validator']) }}

        {{ Form::hidden('patient_id', 0, ['id' => 'patient_id']) }}

        <h3>{{ __('payroll.personal_information') }}</h3>

        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <select class="patient_full_name form-control" style="width:100%;" name="patient_full_name" id="patient_full_name"></select>
                </div>
            </div>
            <div class="col-md-6 text-left" id="patient_info" style="display: none;"></div>
        </div>

        <hr>

        <h3>{{ __('payroll.payroll_information') }}</h3>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    {{ Form::label('nssf_number',__('payroll.social_security_number')) }}
                    {{ Form::text('nssf_number','',['class' => 'form-control']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('tin_number',__('payroll.tin_number')) }}
                    {{ Form::text('tin_number','',['class' => 'form-control']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('salary_scale',__('payroll.salary_scale')) }}
                    {{ Form::select('salary_scale',$salary_scales,'',['class' => 'form-control']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('contract',__('payroll.contract_type')) }}
                    {{ Form::select('contract',['- select -', 1 => 'Permanent', 2 => 'Probation', 3 => 'Contract'],'',['class' => 'form-control']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('contract_start_date', __('payroll.contract_start')) }}
                    {{ Form::text('contract_start_date','',['class' => 'form-control','readonly','id'=>'contract_start_date']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('contract_end_date', __('payroll.contract_end')) }}
                    {{ Form::text('contract_end_date','',['class' => 'form-control','readonly','id'=>'contract_end_date']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('payroll_bank_id',__('payroll.bank')) }}
                    {{ Form::select('payroll_bank_id',$banks,'',['class' => 'form-control compulsory','required']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('bank_account_number',__('payroll.bank_account_number')) }}
                    {{ Form::number('bank_account_number','',['class' => 'form-control compulsory', 'required']) }}
                </div>
            </div>

            <div class="col-sm-6">
                <div class="form-group">
                    {{ Form::label('basic_pay',__('payroll.basic_pay')) }}
                    {{ Form::number('basic_pay','',['class' => 'form-control compulsory', 'required', 'id' => 'basic_pay']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('social_security_amount',__('payroll.social_security_amount')) }}
                    {{ Form::number('social_security_amount',0,['class' => 'form-control', 'id' => 'social_security_amount']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('tax_amount',__('payroll.tax_amount')) }}
                    {{ Form::number('tax_amount',0,['class' => 'form-control', 'id' => 'tax_amount']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('position',__('payroll.position')) }}
                    {{ Form::select('position',$positions,'',['class' => 'form-control compulsory','required']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('department',__('payroll.department')) }}
                    {{ Form::select('department',$departments,'',['class' => 'form-control compulsory','required']) }}
                </div>

                <div class="form-group">
                    {{ Form::label('payroll_category',__('payroll.payroll_categories')) }}
                    {{ Form::select('payroll_category',$payroll_categories,'',['class' => 'form-control compulsory','required']) }}
                </div>
            </div>
        </div>

        {{ 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>
        $('#basic_pay').change(function() {
            let data = 'amount=' + $(this).val();

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

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

        $('#contract_start_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd/mm/yyyy'
        });

        $('#contract_end_date').datepicker({
            autoclose: true,
            todayHighlight: true,
            format: 'dd/mm/yyyy'
        });

        $('.patient_full_name').change(function() {
            let id = $('#patient_full_name').val();
            $('#patient_id').val(id);

            $.ajax({
                method: 'GET',
                url: "/patients/update_patient_info/" + id,
                success: function(response){
                    $('#patient_info').html(response).show();
                },
                error: function (error) {
                    console.log(error);
                }
            });
        }).select2({
            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
            }
        });

        $('.select').select2();
    </script>
@endpush