@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Salary Setup'))
@section('content')
    @php
        $decodePresets = function ($key) {
            $raw = get_setting($key);
            if (! is_string($raw)) {
                return [];
            }
            $a = json_decode($raw, true);

            return is_array($a) ? $a : [];
        };
        $presetAllowances = $decodePresets('salary_allowance_presets');
        $presetDeductions = $decodePresets('salary_deduction_presets');
        $allowRows = old('custom_allowances');
        if (! is_array($allowRows) || count($allowRows) === 0) {
            $allowRows = [['label' => '', 'amount' => '']];
        }
        $dedRows = old('custom_deductions');
        if (! is_array($dedRows) || count($dedRows) === 0) {
            $dedRows = [['label' => '', 'amount' => '']];
        }
        $structureEnabled = \App\Services\SalaryStructureService::enabled();
    @endphp
    <div class="row mt-3 mb-3">
        <div class="col-xl-8">
            <div class="card">
                <form action="{{ route('salary.setup.store') }}" method="POST" id="salary-setup-form">
                    @csrf
                    <div class="card-header d-flex flex-wrap justify-content-between align-items-center">
                        <h5 class="mb-0">{{ __('Salary Setup') }}</h5>
                    </div>
                    <div class="card-body">
                        @if($structureEnabled)
                            <div
                                class="alert alert-info small py-2">{{ __('Salary structure rules are on. Enter basic salary; other fields auto-fill from company rules (you can still edit).') }}
                                <a href="{{ route('salary.structure.settings') }}">{{ __('Configure rules') }}</a>
                            </div>
                        @endif
                        {{-- Employee --}}
                        <div class="card border mb-3">
                            <div class="card-header bg-light py-2"><strong>{{ __('Employee') }}</strong></div>
                            <div class="card-body">
                                <div class="form-group mb-0">
                                    <label for="salary_staff_id">{{ __('Staff') }}</label>
                                    <select name="staff_id" id="salary_staff_id" class="form-control"
                                            data-placeholder="{{ __('Select Staff') }}" required>
                                        <option value="">{{ __('Select Staff') }}</option>
                                        @foreach($staffs as $staff)
                                            @if(! \App\Models\SalarySetup::where('staff_id', $staff->id)->first())
                                                <option
                                                    value="{{ $staff->id }}">{{ ($staff->user?->name ?? 'Unknown').'('.$staff->user?->id.')' }}</option>
                                            @endif
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        {{-- Core compensation --}}
                        <div class="card border mb-3">
                            <div class="card-header bg-light py-2"><strong>{{ __('Core Compensation') }}</strong></div>
                            <div class="card-body">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="basic">{{ __('Basic Salary') }}</label>
                                        <input type="text" id="basic" name="basic" class="form-control js-salary-core"
                                               placeholder="{{ __('Basic Salary') }}"
                                               oninput="window.refreshSalaryTotals()" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="medical">{{ __('Medical Allowance') }}</label>
                                        <input type="text" id="medical" name="medical"
                                               class="form-control js-salary-core"
                                               placeholder="{{ __('Medical Allowance') }}"
                                               oninput="window.refreshSalaryTotals()" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="house">{{ __('House Allowance') }}</label>
                                        <input type="text" id="house" name="house" class="form-control js-salary-core"
                                               placeholder="{{ __('House Allowance') }}"
                                               oninput="window.refreshSalaryTotals()" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="food">{{ __('Food Allowance') }}</label>
                                        <input type="text" id="food" name="food" class="form-control js-salary-core"
                                               placeholder="{{ __('Food Allowance') }}"
                                               oninput="window.refreshSalaryTotals()" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="conveyance">{{ __('Conveyance Allowance') }}</label>
                                        <input type="text" id="conveyance" name="conveyance"
                                               class="form-control js-salary-core"
                                               placeholder="{{ __('Conveyance Allowance') }}"
                                               oninput="window.refreshSalaryTotals()" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="utility">{{ __('Utility Allowance') }}</label>
                                        <input type="text" id="utility" name="utility"
                                               class="form-control js-salary-core"
                                               placeholder="{{ __('Utility Allowance') }}"
                                               oninput="window.refreshSalaryTotals()" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="others">{{ __('Others Allowance') }}</label>
                                        <input type="text" id="others" name="others" class="form-control js-salary-core"
                                               placeholder="{{ __('Others Allowance') }}"
                                               oninput="window.refreshSalaryTotals()" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="provident">{{ __('Provident Fund') }}</label>
                                        <input type="text" id="provident" name="provident"
                                               class="form-control js-salary-core"
                                               placeholder="{{ __('Provident Fund') }}"
                                               oninput="window.refreshSalaryTotals()" required>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {{-- Custom allowances --}}
                        <div class="card border mb-3">
                            <div
                                class="card-header bg-light py-2 d-flex flex-wrap justify-content-between align-items-center">
                                <strong>{{ __('Additional Allowances') }}</strong>
                                <div class="d-flex flex-wrap align-items-center" style="gap:.35rem;">
                                    <select id="preset_allowance_pick" class="form-control form-control-sm"
                                            style="width:auto;min-width:10rem;">
                                        <option value="">{{ __('Quick add label') }}</option>
                                        @foreach($presetAllowances as $p)
                                            <option value="{{ $p }}">{{ $p }}</option>
                                        @endforeach
                                    </select>
                                    <button type="button" class="btn btn-sm btn-outline-secondary"
                                            id="btn_add_allowance_row">{{ __('Add Row') }}</button>
                                </div>
                            </div>
                            <div class="card-body p-2">
                                <div class="table-responsive">
                                    <table class="table table-sm mb-0" id="tbl_custom_allowances">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>{{ __('Type / Label') }}</th>
                                            <th class="text-right" style="width:8rem;">{{ __('Amount') }}</th>
                                            <th style="width:2.5rem;"></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($allowRows as $i => $row)
                                            <tr>
                                                <td><input type="text" name="custom_allowances[{{ $i }}][label]"
                                                           class="form-control form-control-sm js-custom-allow-label"
                                                           value="{{ $row['label'] ?? '' }}"></td>
                                                <td><input type="text" name="custom_allowances[{{ $i }}][amount]"
                                                           class="form-control form-control-sm text-right js-custom-allow-amt"
                                                           value="{{ $row['amount'] ?? '' }}"
                                                           oninput="window.refreshSalaryTotals()"></td>
                                                <td class="text-center">
                                                    <button type="button"
                                                            class="btn btn-sm btn-link text-danger btn-remove-row"
                                                            title="{{ __('Remove') }}">&times;
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        {{-- Custom deductions --}}
                        <div class="card border mb-3">
                            <div
                                class="card-header bg-light py-2 d-flex flex-wrap justify-content-between align-items-center">
                                <strong>{{ __('Additional Deductions') }}</strong>
                                <div class="d-flex flex-wrap align-items-center" style="gap:.35rem;">
                                    <select id="preset_deduction_pick" class="form-control form-control-sm"
                                            style="width:auto;min-width:10rem;">
                                        <option value="">{{ __('Quick add label') }}</option>
                                        @foreach($presetDeductions as $p)
                                            <option value="{{ $p }}">{{ $p }}</option>
                                        @endforeach
                                    </select>
                                    <button type="button" class="btn btn-sm btn-outline-secondary"
                                            id="btn_add_deduction_row">{{ __('Add Row') }}</button>
                                </div>
                            </div>
                            <div class="card-body p-2">
                                <div class="table-responsive">
                                    <table class="table table-sm mb-0" id="tbl_custom_deductions">
                                        <thead class="thead-light">
                                        <tr>
                                            <th>{{ __('Type / Label') }}</th>
                                            <th class="text-right" style="width:8rem;">{{ __('Amount') }}</th>
                                            <th style="width:2.5rem;"></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($dedRows as $i => $row)
                                            <tr>
                                                <td><input type="text" name="custom_deductions[{{ $i }}][label]"
                                                           class="form-control form-control-sm js-custom-ded-label"
                                                           value="{{ $row['label'] ?? '' }}"></td>
                                                <td><input type="text" name="custom_deductions[{{ $i }}][amount]"
                                                           class="form-control form-control-sm text-right js-custom-ded-amt"
                                                           value="{{ $row['amount'] ?? '' }}"
                                                           oninput="window.refreshSalaryTotals()"></td>
                                                <td class="text-center">
                                                    <button type="button"
                                                            class="btn btn-sm btn-link text-danger btn-remove-row"
                                                            title="{{ __('Remove') }}">&times;
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        @if((int) get_setting('pf') === 1)
                            <div class="card border mb-3">
                                <div class="card-header bg-light py-2"><strong>{{ __('Provident Fund (PF)') }}</strong>
                                </div>
                                <div class="card-body">
                                    <div class="form-row">
                                        <div class="form-group col-md-4">
                                            <label>{{ __('PF Enrolled') }}</label>
                                            <div>
                                                <label class="toggle-control mb-0">
                                                    <input type="checkbox" name="pf_enrolled" value="1">
                                                    <span class="control"></span>
                                                </label>
                                                <small
                                                    class="text-muted d-block">{{ __('Enable PF for this employee.') }}</small>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>{{ __('PF Employee Rate (%)') }}</label>
                                            <input type="number" step="0.001" min="0" max="100" name="pf_employee_rate"
                                                   class="form-control" placeholder="10">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>{{ __('PF Employer Rate (%)') }}</label>
                                            <input type="number" step="0.001" min="0" max="100" name="pf_employer_rate"
                                                   class="form-control" placeholder="10">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if((int) get_setting('gf') === 1)
                            <div class="card border mb-3">
                                <div class="card-header bg-light py-2"><strong>{{ __('Gratuity Fund (GF)') }}</strong>
                                </div>
                                <div class="card-body">
                                    <div class="form-row">
                                        <div class="form-group col-md-4">
                                            <label>{{ __('GF Enrolled') }}</label>
                                            <div>
                                                <label class="toggle-control mb-0">
                                                    <input type="checkbox" name="gf_enrolled" value="1">
                                                    <span class="control"></span>
                                                </label>
                                                <small
                                                    class="text-muted d-block">{{ __('Enable GF for this employee.') }}</small>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-8">
                                            <label>{{ __('GF Monthly Accrual (% of Basic)') }}</label>
                                            <input type="number" step="0.001" min="0" max="100"
                                                   name="gf_monthly_percent" class="form-control" placeholder="8.333">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if((int) get_setting('swf') === 1)
                            <div class="card border mb-3">
                                <div class="card-header bg-light py-2">
                                    <strong>{{ __('Staff Welfare Fund (SWF)') }}</strong></div>
                                <div class="card-body">
                                    <div class="form-row">
                                        <div class="form-group col-md-4">
                                            <label>{{ __('SWF Enrolled') }}</label>
                                            <div>
                                                <label class="toggle-control mb-0">
                                                    <input type="checkbox" name="swf_enrolled" value="1">
                                                    <span class="control"></span>
                                                </label>
                                                <small
                                                    class="text-muted d-block">{{ __('Enable SWF for this employee.') }}</small>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>{{ __('SWF Employee Rate (%)') }}</label>
                                            <input type="number" step="0.001" min="0" max="100" name="swf_employee_rate"
                                                   class="form-control" placeholder="5">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>{{ __('SWF Employer Rate (%)') }}</label>
                                            <input type="number" step="0.001" min="0" max="100" name="swf_employer_rate"
                                                   class="form-control" placeholder="5">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        @if(\App\Services\PayrollIncomeTaxService::enabled())
                            <div class="card border mb-3">
                                <div class="card-header bg-light py-2">
                                    <strong>{{ \App\Services\PayrollIncomeTaxService::label() }}</strong></div>
                                <div class="card-body">
                                    <div class="form-row">
                                        <div class="form-group col-md-4">
                                            <label>{{ __('TIN / Tax ID') }}</label>
                                            <input type="text" name="tin_number" class="form-control" maxlength="50">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>{{ __('Investment / special rebate (%)') }}</label>
                                            <input type="number" step="0.01" min="0" max="100" name="tax_rebate_percent"
                                                   class="form-control" value="0">
                                        </div>
                                        <div class="form-group col-md-4">
                                            <label>{{ __('Tax exempt employee') }}</label>
                                            <div>
                                                <label class="toggle-control mb-0">
                                                    <input type="checkbox" name="tax_exempt" value="1">
                                                    <span class="control"></span>
                                                </label>
                                                <small class="text-muted d-block"
                                                       style="margin-left: 40px">{{ __('No TDS on payroll.') }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif

                        <div class="card border mb-3">
                            <div class="card-header bg-light py-2"><strong>{{ __('Bulk Payroll Defaults') }}</strong>
                            </div>
                            <div class="card-body">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label>{{ __('Bulk Payroll Bonus (Per Month)') }}</label>
                                        <input type="number" step="0.01" min="0" name="bulk_payroll_bonus"
                                               class="form-control" value="0" placeholder="0">
                                        <small
                                            class="text-muted">{{ __('Added to gross in bulk payslip generation.') }}</small>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label>{{ __('Bulk Payroll Arrear (Per Month)') }}</label>
                                        <input type="number" step="0.01" min="0" name="bulk_payroll_arrear"
                                               class="form-control" value="0" placeholder="0">
                                        <small
                                            class="text-muted">{{ __('Added to gross in bulk payslip generation.') }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card border mb-0">
                            <div class="card-header bg-light py-2"><strong>{{ __('Totals') }}</strong></div>
                            <div class="card-body">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="gross_salary">{{ __('Gross Salary') }}</label>
                                        <input type="text" id="gross_salary" name="gross_salary" class="form-control"
                                               readonly>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="net_salary">{{ __('Net Salary') }}</label>
                                        <input type="text" id="net_salary" name="net_salary" class="form-control"
                                               readonly>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-right mt-3">
                            <button type="submit" class="btn btn-primary">{{ __('Save') }}</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="col-xl-4">
            @include('admin.salary._presets_sidebar', compact('presetAllowances', 'presetDeductions'))
        </div>
    </div>
@endsection

@section('script')
    <script>
        (function ($) {
            function n(v) {
                var x = parseFloat(v);
                return isNaN(x) ? 0 : x;
            }

            window.refreshSalaryTotals = function () {
                var basic = n($('#basic').val());
                var medical = n($('#medical').val());
                var house = n($('#house').val());
                var food = n($('#food').val());
                var conveyance = n($('#conveyance').val());
                var others = n($('#others').val());
                var utility = n($('#utility').val());
                var provident = n($('#provident').val());
                var extraAllow = 0;
                $('.js-custom-allow-amt').each(function () {
                    extraAllow += n($(this).val());
                });
                var extraDed = 0;
                $('.js-custom-ded-amt').each(function () {
                    extraDed += n($(this).val());
                });
                var gross = basic + medical + house + food + conveyance + others + utility + provident + extraAllow;
                var net = gross - provident - extraDed;
                $('#gross_salary').val(Math.round(gross * 100) / 100);
                $('#net_salary').val(Math.round(net * 100) / 100);
            };

            function reindexAllowances() {
                $('#tbl_custom_allowances tbody tr').each(function (i) {
                    $(this).find('input').eq(0).attr('name', 'custom_allowances[' + i + '][label]');
                    $(this).find('input').eq(1).attr('name', 'custom_allowances[' + i + '][amount]');
                });
            }

            function reindexDeductions() {
                $('#tbl_custom_deductions tbody tr').each(function (i) {
                    $(this).find('input').eq(0).attr('name', 'custom_deductions[' + i + '][label]');
                    $(this).find('input').eq(1).attr('name', 'custom_deductions[' + i + '][amount]');
                });
            }

            function addAllowanceRow(label) {
                var $tb = $('#tbl_custom_allowances tbody');
                var idx = $tb.find('tr').length;
                var $tr = $('<tr/>');
                var $l = $('<input type="text" class="form-control form-control-sm js-custom-allow-label"/>').attr('name', 'custom_allowances[' + idx + '][label]').val(label || '');
                var $a = $('<input type="text" class="form-control form-control-sm text-right js-custom-allow-amt"/>').attr('name', 'custom_allowances[' + idx + '][amount]');
                $a.on('input', window.refreshSalaryTotals);
                $tr.append($('<td/>').append($l), $('<td/>').append($a), $('<td class="text-center"/>').append('<button type="button" class="btn btn-sm btn-link text-danger btn-remove-row">&times;</button>'));
                $tb.append($tr);
                reindexAllowances();
                window.refreshSalaryTotals();
            }

            function addDeductionRow(label) {
                var $tb = $('#tbl_custom_deductions tbody');
                var idx = $tb.find('tr').length;
                var $tr = $('<tr/>');
                var $l = $('<input type="text" class="form-control form-control-sm js-custom-ded-label"/>').attr('name', 'custom_deductions[' + idx + '][label]').val(label || '');
                var $a = $('<input type="text" class="form-control form-control-sm text-right js-custom-ded-amt"/>').attr('name', 'custom_deductions[' + idx + '][amount]');
                $a.on('input', window.refreshSalaryTotals);
                $tr.append($('<td/>').append($l), $('<td/>').append($a), $('<td class="text-center"/>').append('<button type="button" class="btn btn-sm btn-link text-danger btn-remove-row">&times;</button>'));
                $tb.append($tr);
                reindexDeductions();
                window.refreshSalaryTotals();
            }

            var structureEnabled = {{ $structureEnabled ? 'true' : 'false' }};
            var structurePreviewUrl = @json(route('salary.structure.preview'));
            var structurePreviewTimer = null;

            function applyStructurePreview() {
                if (!structureEnabled) return;
                var basic = $('#basic').val();
                if (basic === '' || basic === undefined) return;
                clearTimeout(structurePreviewTimer);
                structurePreviewTimer = setTimeout(function () {
                    $.get(structurePreviewUrl, {basic: basic}, function (res) {
                        if (!res || !res.enabled || !res.components) return;
                        $.each(res.components, function (key, val) {
                            var $el = $('#' + key);
                            if ($el.length) $el.val(val);
                        });
                        window.refreshSalaryTotals();
                    });
                }, 350);
            }

            $(function () {
                var $staff = $('#salary_staff_id');
                if ($staff.length && typeof $.fn.select2 === 'function') {
                    $staff.select2({width: '100%', placeholder: $staff.data('placeholder') || ''});
                }
                window.refreshSalaryTotals();
                $('#basic').on('input', applyStructurePreview);

                $('#btn_add_allowance_row').on('click', function () {
                    addAllowanceRow('');
                });
                $('#btn_add_deduction_row').on('click', function () {
                    addDeductionRow('');
                });
                $('#preset_allowance_pick').on('change', function () {
                    var v = $(this).val();
                    if (!v) return;
                    addAllowanceRow(v);
                    $(this).val('');
                });
                $('#preset_deduction_pick').on('change', function () {
                    var v = $(this).val();
                    if (!v) return;
                    addDeductionRow(v);
                    $(this).val('');
                });
                $(document).on('click', '.btn-remove-row', function () {
                    var $tr = $(this).closest('tr');
                    var $tb = $tr.closest('tbody');
                    var isAllow = $tb.closest('#tbl_custom_allowances').length > 0;
                    $tr.remove();
                    if ($tb.find('tr').length === 0) {
                        if (isAllow) addAllowanceRow('');
                        else addDeductionRow('');
                    }
                    reindexAllowances();
                    reindexDeductions();
                    window.refreshSalaryTotals();
                });
            });
        })(window.jQuery);
    </script>
@endsection