@extends('admin.layout.master')
@section('home')
    <div class="row">
        <div class="col-xs-12">
        </div>
    </div>
    <div class="card">
        <div class="card-header">Add Deduction</div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-12">
                    <div class="card-box">
                        <form action="#">
                            @csrf
                            <h4 class="card-title"></h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <label class="labels">Deduction  Name</label>
                                        </div>
                                        <div class="col-md-7">
                                            <input type="text" id="name" name="name" class="form-control input-sm" />
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-3">
                                            <label class="labels">Deduction Code</label>
                                        </div>
                                        <div class="col-md-7">
                                            <input type="text" id="code" name="code" class="form-control input-sm" />
                                            <input type="hidden" value="{{ getSessionUserList('ware') }}"
                                            id="wareId" name="ware_id" />
                                        </div>

                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-3">
                                            <label class="labels">Deduction Schedule</label>
                                        </div>
                                        <div class="col-md-7">
                                            <select name="schedule_id" id="schedule_id" class="form-control input-sm ">
                                                @foreach ($schedule as $v_schedule)
                                                    <option value="{{ $v_schedule->id }}">{{ $v_schedule->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="row mt-3">
                                        <div class="col-md-3">
                                            <label class="labels">Deduction Type</label>
                                        </div>
                                        <div class="col-md-7">
                                            <select class="form-control input-sm type" id="type" name="type">
                                                <option value="0">Select </option>
                                                <option value="1">Late</option>
                                                <option value="2">Early Leave</option>
                                                <option value="3">Absent</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="fortypewiseshow" style="display: none">
                                        <div class="row mt-3">
                                            <div class="col-md-3">
                                                <label class="labels">For</label>
                                            </div>
                                            <div class="col-md-4 ">
                                                <input type="number" name="day_count" id="day_count"
                                                    class="form-control input-sm">
                                            </div>
                                            <div class="col-md-4 forlate" style="hidden">
                                                <label class="labels" style>Days Late</label>
                                            </div>
                                            <div class="col-md-4 forearly" style="hidden">
                                                <label class="labels" style>Days Early</label>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="">
                                        <div class="row mt-3">
                                            <div class="col-md-3">
                                                <label class="labels">Deduct</label>
                                            </div>
                                            <div class="col-md-4">
                                                <input type="number" id="deduct_days" name="deduct_days"
                                                    class="form-control input-sm">

                                            </div>
                                            <div class="col-md-4">
                                                <label class="labels" style>Days</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mt-3">
                                        <div class="col-md-3">
                                            <label class="labels">Deduction</label>
                                        </div>
                                        <div class="col-md-7">
                                            <select class="form-control input-sm deduction" onchange="deductionValue(this)" name="deduct_type"
                                                id="deduct_type">
                                                <option value="0">Select </option>
                                                <option value="1">Gross/Basic</option>
                                                {{--<option value="2">Allowance</option>--}}
                                                <option value="3">Fixed</option>
                                            </select>
                                        </div>

                                    </div>

                                    <div class="row mt-3 forGrosBasic" style="display: none">
                                        <div class="col-md-3">
                                            <label class="labels">Deduct From</label>
                                        </div>
                                        <div class="col-md-7">
                                            <select class="form-control input-sm" name="deduction_from" id="deduction_from">
                                                <option value="0">Select </option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mt-3 forFixed" style="display: none">
                                        <div class="col-md-3">
                                            <label class="labels">Amount</label>
                                        </div>
                                        <div class="col-md-7">
                                            <input type="number" name="deduction_amount" id="deduction_amount"
                                                class="form-control input-sm " />
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-md-3">
                                            <label class="labels">Status</label>
                                        </div>
                                        <div class="col-md-7">
                                            <select class="form-control input-sm" name="status" id="status">
                                                <option value="1">Active</option>
                                                <option value="2">Inactive</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="text-center mt-2">
                                <button type="button" onclick="SaveDeductionPolicies()"
                                    class="btn btn-success btn-sm">Submit</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            $(".type").change(function() {
                if ($(this).val() == 1) {
                    $(".fortypewiseshow").show();
                    $(".forlate").show();
                    $(".forearly").hide();
                } else if ($(this).val() == 2) {
                    $(".fortypewiseshow").show();
                    $(".forlate").hide();
                    $(".forearly").show();
                } else if ($(this).val() == 3) {
                    $(".fortypewiseshow").hide();
                } else if ($(this).val() == 0) {
                    $(".fortypewiseshow").hide();
                }
            });
        });
    </script>
    <script src="{{ asset('/') }}payroll_assets/payroll_settings/deduction_policies/deductionPoliciies.js"></script>

@endsection