@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Payroll Additional Payments</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/home' }}">Home</a></li>
                    <li class="breadcrumb-item"><a
                            href="{{ $orgUrl . '/payroll-additional-payments' }}">{{ trans('payrollAdditionalPayments/index.payroll_additional_payments') }}</a>
                    </li>
                    <li class="breadcrumb-item active">Add Payroll Payment</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <form method="POST" action="{{ $orgUrl . (@$payrollAdditionalPayment->id ? "/payroll-additional-payment/$payrollAdditionalPayment->id/edit" : '/payroll-additional-payment/create') }}">
        {{ csrf_field() }}
        <section id="multiple-column-form">
            <div class="row">
                <div class="col-md-12">
                    <div class="card new-cardbox p-1">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card-header newheader border-bottom mb-1 px-0">
                                    <h4 class="card-title">For swap please fill the given below</h4>
                                </div>
                                <div class="card-body px-0">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-1">
                                                <label class="form-label">Employee <span
                                                        class="text-danger">*</span></label>
                                                <select class="form-control select2" name="employee_id">
                                                    <option value="">Select Employee</option>
                                                    @foreach ($employees as $employee)
                                                        <option value="{{ $employee->id }}"
                                                            {{ old('employee_id', @$payrollAdditionalPayment->employee_id) == $employee->id ? 'selected' : '' }}>
                                                            {{ $employee->name }} - {{ $employee->employee_code }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                                {!! $errors->first('employee_id', '<label class="error" for="employee_id">:message</label>') !!}
                                            </div>
                                        </div>

                                        <div class="mb-1 form-password-toggle col-md-4">
                                            <label class="form-label" for="attendance_date">Attendance Date <span
                                                    class="text-danger">*</span></label>
                                            <input type="date" name="attendance_date" id="attendance_date"
                                                class="form-control {{ $errors->has('attendance_date') ? 'error' : '' }}"
                                                value="{{ old('attendance_date', @$payrollAdditionalPayment->attendance_date) }}" />
                                            {!! $errors->first('attendance_date', '<label class="error" for="attendance_date">:message</label>') !!}
                                        </div>
                                                                            
                                        <div class="col-md-4">
                                            <div class="mb-1">
                                                <label class="form-label" for="hours">Hours <span
                                                    class="text-danger">*</span></label>
                                                <input  type="time" id="hours" name="hours" class="form-control" placeholder="Enter Hours" value="{{ old('hours', @$payrollAdditionalPayment->hours) }}" min="0"
                                                />
                                                {!! $errors->first('hours', '<label id="basic-default-error" for="machine" class="error">:message</label>') !!}
                                            </div>
                                        </div>
                                    
                                        <div class="col-md-4">
                                            <div class="mb-1">
                                                <label class="form-label" for="machine">From Machine <span
                                                    class="text-danger">*</span></label>
                                                <select id="from-machine" name="from_machine"
                                                    class="form-control">
                                                    <option value="">Select Machine</option>
                                                    @foreach ($machineRateArray as $grade=>$rate)
                                                            <option value="{{ $grade }}" data-rate="{{ $rate }}" {{ old('from_machine', @$payrollAdditionalPayment->from_machine) === $grade ? 'selected' : '' }}>{{ $grade }}</option>
                
                                                    @endforeach
                                                </select>
                                                {!! $errors->first('from_machine', '<label id="basic-default-error" for="machine" class="error">:message</label>') !!}
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-1">
                                                <label class="form-label" for="machine">To Machine <span
                                                    class="text-danger">*</span></label>
                                                <select id="to-machine" name="to_machine"
                                                    class="form-control">
                                                    <option value="">Select Machine</option>
                                                    @foreach ($machineRateArray as $grade=>$rate)
                                                            <option value="{{ $grade }}" data-rate="{{ $rate }}"  {{ old('to_machine', @$payrollAdditionalPayment->to_machine) === $grade ? 'selected' : '' }}>{{ $grade }}</option>
                
                                                    @endforeach
                                                </select>
                                                {!! $errors->first('to_machine', '<label id="basic-default-error" for="machine" class="error">:message</label>') !!}
                                            </div>
                                        </div>
                                        
                                    
                                        <div class="col-md-4">
                                            <div class="mb-1">
                                                <label class="form-label" for="payable_amount">Payable Amount <span
                                                    class="text-danger">*</span></label>
                                                <input
                                                    type="number"
                                                    id="payable_amount"
                                                    name="payable_amount"
                                                    class="form-control {{ $errors->has('payable_amount') ? 'error' : '' }}"
                                                    placeholder="Auto-calculated Amount"
                                                    value="{{ old('payable_amount', @$payrollAdditionalPayment->payable_amount) }}"
                                                    step="0.01"
                                                    readonly
                                                />
                                                {{-- {{dd($errors)}} --}}
                                                {!! $errors->first('payable_amount', '<label id="basic-default-error" for="payable_amount" class="error">:message</label>') !!}
                                            </div>
                                        </div>

                                        <div class="col-md-12">
                                            <div class="mb-1">
                                            <label class="form-label" for="remarks">Remarks</label>
                                            <textarea id="remarks" name="remarks" class="form-control {{{$errors->has('remarks') ? 'error' : ''}}}" placeholder="Enter Remarks" rows="3" style="resize: none;">{{old('remarks', @$payrollAdditionalPayment->remarks) }}</textarea>
                                            {!! $errors->first('remarks','<label id="basic-default-error" for="remarks" class="error">:message</label>')!!}
                                            </div>
                                        </div>

                                        <div class="col-12 text-end mt-2">
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </form>
@endsection

@push('footer-script')
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
    <script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
    <!-- END: Page Vendor JS-->

    <!-- BEGIN: Page JS-->
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
    <script src="/app-assets/js/scripts/forms/form-validation.js"></script>
    <script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
    <!-- END: Page JS-->

    <script src="{{ asset('js/common-script.js') }}"></script>
    <script src="{{ asset('js/sweetalert.js') }}"></script>

    <script>
       $(document).ready(function() {
            $('#from-machine, #to-machine, #hours').on('change', function() {
                let fromMachine = $('#from-machine').val();
                let toMachine = $('#to-machine').val();
                let hours = $('#hours').val();

                if (fromMachine !== '' && toMachine !== '' && hours !== '') {
                    $.ajax({
                        type: 'POST',
                        url: "{!! route('ajax.payroll-additional-payment-calculate', ['alias' => $alias]) !!}",
                        data: {
                            from_machine: fromMachine,
                            to_machine: toMachine,
                            hours: hours,
                            _token: '{{ csrf_token() }}' // Make sure this is inside a Blade view
                        },
                        success: function(data) {
                            $('#payable_amount').val(data.amount);
                        },
                        error: function(err) {
                            console.error('Error:', err);
                        }
                    });
                }
            });
        });
 
    </script>
    
@endpush