@extends('admin.layouts.app')
@section('title', get_setting('site_name').' | '.__('Salary Structure Rules'))
@section('content')
    @php
        $scopedRulesOn = (int) get_setting('salary_structure_scoped_rules') === 1;
        $rules = old('rules', $row->rules ?? []);
        if (! is_array($rules) || count($rules) === 0) {
            $rules = [\App\Services\SalaryStructureService::normalizeRule([
                'id' => 'new_1',
                'label' => '',
                'type' => \App\Services\SalaryStructureService::TYPE_PERCENT_OF_BASIC,
                'apply_at' => \App\Services\SalaryStructureService::APPLY_SETUP,
                'percent' => 0,
                'target' => 'house_rent',
                'enabled' => true,
                'sort' => 10,
                'scope_mode' => 'all',
                'scope_ids' => [],
            ])];
        }
        $targetLabels = [
            'basic_salary' => __('Basic Salary'),
            'house_rent' => __('House Rent'),
            'medical' => __('Medical'),
            'food' => __('Food / Lunch'),
            'conveyance' => __('Conveyance / Travel'),
            'utility' => __('Utility / Mobile'),
            'Others' => __('Others'),
            'provident_fund' => __('Provident Fund'),
        ];
    @endphp
    <style>
        .ss-wrap .rule-scope-cell { min-width: 12rem; }
        .ss-wrap .rule-scope-cell .select2-container { width: 100% !important; }
        .ss-wrap #rulesTable { font-size: 13px; }
        .ss-wrap #rulesTable th { white-space: nowrap; vertical-align: middle; }
    </style>
    <div class="row mt-3 mb-3 ss-wrap">
        <div class="col-md-12 col-lg-12 col-xl-11 mx-auto">
            <div class="card">
                <div class="card-header d-flex flex-wrap align-items-center justify-content-between">
                    <h5 class="mb-0">{{ __('Salary Structure Rules') }}</h5>
                    <div class="d-flex flex-wrap gap-1">
                        @if((int) get_setting('salary_structure_rules') !== 1)
                            <span class="badge badge-warning">{{ __('Rules feature OFF') }}</span>
                        @else
                            <span class="badge badge-success">{{ __('Rules ON') }}</span>
                        @endif
                        @if($scopedRulesOn)
                            <span class="badge badge-info">{{ __('Scoped rules ON') }}</span>
                        @else
                            <span class="badge badge-secondary">{{ __('Scoped rules OFF — all employees') }}</span>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted small mb-2">
                        {{ __('Company-wide allowance formulas. Enter basic on salary setup; rules fill components. Lunch and bill overrides apply at payroll.') }}
                    </p>
                    @if($scopedRulesOn)
                        <p class="alert alert-info small py-2">
                            {{ __('Scoped rules enabled. Each rule can target all staff, selected branches, departments, or employees. When several rules match the same slot, priority is: employee → department → branch → all.') }}
                            <a href="{{ route('website.settings') }}">{{ __('Change in Website Settings') }}</a>
                        </p>
                    @else
                        <p class="alert alert-light border small py-2 mb-3">
                            {{ __('All rules currently apply to every employee. Enable') }}
                            <strong>{{ __('Salary Structure Scoped Rules') }}</strong>
                            {{ __('in Website Settings to limit lunch and other allowances by branch, department, or employee.') }}
                        </p>
                    @endif

                    <form action="{{ route('salary.structure.example_preset') }}" method="POST" class="mb-3">
                        @csrf
                        <button type="submit" class="btn btn-outline-secondary btn-sm" @disabled((int) get_setting('salary_structure_rules') !== 1)>
                            {{ __('Load example (50% house, 10% medical, 250 lunch, mobile, travel)') }}
                        </button>
                    </form>

                    <form method="post" action="{{ route('salary.structure.settings.update') }}" id="structureRulesForm">
                        @csrf
                        <div class="table-responsive">
                            <table class="table table-bordered table-sm" id="rulesTable">
                                <thead class="thead-light">
                                <tr>
                                    <th>{{ __('On') }}</th>
                                    <th>{{ __('Label') }}</th>
                                    <th>{{ __('Type') }}</th>
                                    <th>{{ __('% / Amount / Rate') }}</th>
                                    <th>{{ __('Apply at') }}</th>
                                    <th>{{ __('Target') }}</th>
                                    @if($scopedRulesOn)
                                        <th>{{ __('Scope') }}</th>
                                    @endif
                                    <th>{{ __('Payroll override') }}</th>
                                    <th>{{ __('Sort') }}</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach($rules as $i => $rule)
                                    @php
                                        $rule = is_array($rule) ? $rule : [];
                                        $scopeMode = $rule['scope_mode'] ?? 'all';
                                        $scopeIds = $rule['scope_ids'] ?? [];
                                    @endphp
                                    <tr class="rule-row">
                                        <td class="align-middle text-center">
                                            <input type="hidden" name="rules[{{ $i }}][enabled]" value="0">
                                            <input type="checkbox" name="rules[{{ $i }}][enabled]" value="1" {{ !empty($rule['enabled']) ? 'checked' : '' }}>
                                        </td>
                                        <td>
                                            <input type="hidden" name="rules[{{ $i }}][id]" value="{{ $rule['id'] ?? 'rule_'.$i }}">
                                            <input type="text" class="form-control form-control-sm" name="rules[{{ $i }}][label]" value="{{ $rule['label'] ?? '' }}" required>
                                        </td>
                                        <td>
                                            <select class="form-control form-control-sm js-rule-type" name="rules[{{ $i }}][type]">
                                                @foreach($types as $tk => $tl)
                                                    <option value="{{ $tk }}" @selected(($rule['type'] ?? '') === $tk)>{{ $tl }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        <td class="rule-value-cell">
                                            <input type="number" step="0.01" min="0" class="form-control form-control-sm js-val-percent" name="rules[{{ $i }}][percent]" value="{{ $rule['percent'] ?? 0 }}" placeholder="%">
                                            <input type="number" step="0.01" min="0" class="form-control form-control-sm js-val-amount mt-1" name="rules[{{ $i }}][amount]" value="{{ $rule['amount'] ?? 0 }}" placeholder="{{ __('Amount') }}">
                                            <input type="number" step="0.01" min="0" class="form-control form-control-sm js-val-rate mt-1" name="rules[{{ $i }}][rate]" value="{{ $rule['rate'] ?? 0 }}" placeholder="{{ __('Per day') }}">
                                        </td>
                                        <td>
                                            <select class="form-control form-control-sm" name="rules[{{ $i }}][apply_at]">
                                                <option value="setup" @selected(($rule['apply_at'] ?? '') === 'setup')>{{ __('Salary setup') }}</option>
                                                <option value="payroll" @selected(($rule['apply_at'] ?? '') === 'payroll')>{{ __('Payroll') }}</option>
                                            </select>
                                        </td>
                                        <td>
                                            <select class="form-control form-control-sm" name="rules[{{ $i }}][target]">
                                                @foreach($targets as $tk => $tc)
                                                    <option value="{{ $tk }}" @selected(($rule['target'] ?? '') === $tk)>{{ $targetLabels[$tk] ?? $tk }}</option>
                                                @endforeach
                                            </select>
                                        </td>
                                        @if($scopedRulesOn)
                                            <td class="rule-scope-cell">
                                                <select class="form-control form-control-sm js-scope-mode" name="rules[{{ $i }}][scope_mode]">
                                                    @foreach($scopeModes as $sk => $sl)
                                                        <option value="{{ $sk }}" @selected($scopeMode === $sk)>{{ $sl }}</option>
                                                    @endforeach
                                                </select>
                                                <select class="form-control form-control-sm js-scope-ids mt-1" name="rules[{{ $i }}][scope_ids][]" multiple
                                                        data-selected="{{ json_encode(array_map('strval', $scopeIds)) }}">
                                                </select>
                                            </td>
                                        @else
                                            <input type="hidden" name="rules[{{ $i }}][scope_mode]" value="all">
                                        @endif
                                        <td class="align-middle text-center">
                                            <input type="hidden" name="rules[{{ $i }}][payroll_overridable]" value="0">
                                            <input type="checkbox" name="rules[{{ $i }}][payroll_overridable]" value="1" {{ !empty($rule['payroll_overridable']) ? 'checked' : '' }}>
                                        </td>
                                        <td>
                                            <input type="number" class="form-control form-control-sm" name="rules[{{ $i }}][sort]" value="{{ $rule['sort'] ?? ($i + 1) * 10 }}">
                                        </td>
                                        <td class="align-middle">
                                            <button type="button" class="btn btn-sm btn-danger js-remove-rule">&times;</button>
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm mb-3 mt-3" id="btnAddRule">{{ __('Add rule') }}</button>
                        <div>
                            <button type="submit" class="btn btn-primary" @disabled((int) get_setting('salary_structure_rules') !== 1)>{{ __('Save rules') }}</button>
                            <a href="{{ route('salary.setup') }}" class="btn btn-light">{{ __('Salary Setup') }}</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <template id="ruleRowTemplate">
        <tr class="rule-row">
            <td class="align-middle text-center">
                <input type="hidden" name="rules[__IDX__][enabled]" value="0">
                <input type="checkbox" name="rules[__IDX__][enabled]" value="1" checked>
            </td>
            <td>
                <input type="hidden" name="rules[__IDX__][id]" value="">
                <input type="text" class="form-control form-control-sm" name="rules[__IDX__][label]" value="" required>
            </td>
            <td>
                <select class="form-control form-control-sm js-rule-type" name="rules[__IDX__][type]">
                    @foreach($types as $tk => $tl)
                        <option value="{{ $tk }}">{{ $tl }}</option>
                    @endforeach
                </select>
            </td>
            <td class="rule-value-cell">
                <input type="number" step="0.01" min="0" class="form-control form-control-sm js-val-percent" name="rules[__IDX__][percent]" value="0">
                <input type="number" step="0.01" min="0" class="form-control form-control-sm js-val-amount mt-1" name="rules[__IDX__][amount]" value="0">
                <input type="number" step="0.01" min="0" class="form-control form-control-sm js-val-rate mt-1" name="rules[__IDX__][rate]" value="0">
            </td>
            <td>
                <select class="form-control form-control-sm" name="rules[__IDX__][apply_at]">
                    <option value="setup">{{ __('Salary setup') }}</option>
                    <option value="payroll">{{ __('Payroll') }}</option>
                </select>
            </td>
            <td>
                <select class="form-control form-control-sm" name="rules[__IDX__][target]">
                    @foreach($targets as $tk => $tc)
                        <option value="{{ $tk }}">{{ $targetLabels[$tk] ?? $tk }}</option>
                    @endforeach
                </select>
            </td>
            @if($scopedRulesOn)
                <td class="rule-scope-cell">
                    <select class="form-control form-control-sm js-scope-mode" name="rules[__IDX__][scope_mode]">
                        @foreach($scopeModes as $sk => $sl)
                            <option value="{{ $sk }}">{{ $sl }}</option>
                        @endforeach
                    </select>
                    <select class="form-control form-control-sm js-scope-ids mt-1" name="rules[__IDX__][scope_ids][]" multiple data-selected="[]"></select>
                </td>
            @else
                <input type="hidden" name="rules[__IDX__][scope_mode]" value="all">
            @endif
            <td class="align-middle text-center">
                <input type="hidden" name="rules[__IDX__][payroll_overridable]" value="0">
                <input type="checkbox" name="rules[__IDX__][payroll_overridable]" value="1">
            </td>
            <td>
                <input type="number" class="form-control form-control-sm" name="rules[__IDX__][sort]" value="100">
            </td>
            <td class="align-middle">
                <button type="button" class="btn btn-sm btn-danger js-remove-rule">&times;</button>
            </td>
        </tr>
    </template>
@endsection

@section('script')
    <script>
        (function () {
            var scopedRulesOn = @json($scopedRulesOn);
            var scopeOptions = {
                branch: @json($warehouses->map(fn ($w) => ['id' => (string) $w->id, 'text' => $w->name])->values()),
                department: @json($departments->map(fn ($d) => ['id' => (string) $d->id, 'text' => $d->name])->values()),
                staff: @json($staffList->map(fn ($s) => ['id' => (string) $s->id, 'text' => ($s->user?->name ?? 'Staff').' ('.$s->user_id.')'])->values())
            };

            function toggleValueInputs($row) {
                var type = $row.find('.js-rule-type').val();
                $row.find('.js-val-percent').toggle(type === 'percent_of_basic');
                $row.find('.js-val-amount').toggle(type === 'fixed_monthly');
                $row.find('.js-val-rate').toggle(type === 'per_attendance_day');
            }

            function populateScopeIds($row) {
                if (!scopedRulesOn) return;
                var $mode = $row.find('.js-scope-mode');
                var $ids = $row.find('.js-scope-ids');
                if (!$ids.length) return;

                var mode = $mode.val() || 'all';
                var selected = [];
                try {
                    selected = JSON.parse($ids.attr('data-selected') || '[]');
                } catch (e) {
                    selected = [];
                }

                if ($ids.hasClass('select2-hidden-accessible')) {
                    $ids.select2('destroy');
                }

                $ids.empty();
                if (mode === 'all') {
                    $ids.prop('disabled', true).hide();
                    return;
                }

                $ids.prop('disabled', false).show();
                var list = scopeOptions[mode] || [];
                list.forEach(function (opt) {
                    var isSel = selected.indexOf(String(opt.id)) !== -1 || selected.indexOf(opt.id) !== -1;
                    $ids.append(new Option(opt.text, opt.id, isSel, isSel));
                });

                $ids.select2({ width: '100%', placeholder: '{{ __('Select…') }}' });
            }

            function initScopeRow($row) {
                populateScopeIds($row);
            }

            function reindexRows() {
                $('#rulesTable tbody tr.rule-row').each(function (i) {
                    $(this).find('[name]').each(function () {
                        var n = $(this).attr('name');
                        if (n) {
                            $(this).attr('name', n.replace(/rules\[\d+\]/, 'rules[' + i + ']'));
                        }
                    });
                });
            }

            $('#rulesTable').on('change', '.js-rule-type', function () {
                toggleValueInputs($(this).closest('tr'));
            });

            $('#rulesTable').on('change', '.js-scope-mode', function () {
                var $row = $(this).closest('tr');
                $row.find('.js-scope-ids').attr('data-selected', '[]');
                populateScopeIds($row);
            });

            $('#rulesTable .rule-row').each(function () {
                toggleValueInputs($(this));
                initScopeRow($(this));
            });

            $('#btnAddRule').on('click', function () {
                var idx = $('#rulesTable tbody tr').length;
                var html = $('#ruleRowTemplate').html().replace(/__IDX__/g, idx);
                var $row = $(html);
                $('#rulesTable tbody').append($row);
                $row.find('input[name*="[id]"]').val('rule_' + Date.now());
                toggleValueInputs($row);
                initScopeRow($row);
            });

            $('#rulesTable').on('click', '.js-remove-rule', function () {
                if ($('#rulesTable tbody tr').length <= 1) {
                    return;
                }
                $(this).closest('tr').remove();
                reindexRows();
            });
        })();
    </script>
@endsection