@extends('app-new')

@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/select/select2.min.css">
    <style>
        .applicability-form .card {
            border: 0;
            box-shadow: 0 0.35rem 1.5rem rgba(34, 41, 47, 0.08);
        }

        .applicability-form .section-shell {
            border: 1px solid #ebe9f1;
            border-radius: 0.75rem;
            padding: 1rem;
            background: linear-gradient(180deg, #fcfcfd 0%, #f7f7fb 100%);
        }

        .applicability-form .section-title {
            font-size: 1rem;
            font-weight: 600;
            color: #5e5873;
        }

        .applicability-form .section-note {
            font-size: 0.875rem;
            color: #6e6b7b;
        }

        .applicability-form .condition-row {
            margin: 0 0 0.75rem;
            padding: 1rem 0.75rem;
            border: 1px solid #ebe9f1;
            border-radius: 0.75rem;
            background: #fff;
            box-shadow: 0 0.125rem 0.5rem rgba(34, 41, 47, 0.04);
        }

        .applicability-form .condition-row:last-child {
            margin-bottom: 0;
        }

        .applicability-form .condition-row .form-label {
            font-size: 0.8rem;
            font-weight: 600;
            color: #6e6b7b;
            text-transform: uppercase;
            letter-spacing: 0.02em;
        }

        .applicability-form .condition-row .toggle-all-values {
            font-size: 0.8rem;
            font-weight: 600;
        }

        .applicability-form .form-hint {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.35rem 0.6rem;
            border-radius: 999px;
            background: rgba(115, 103, 240, 0.08);
            color: #5e50ee;
            font-size: 0.78rem;
            font-weight: 600;
        }

        .applicability-form .condition-empty-state {
            border: 1px dashed #c9c7d0;
            border-radius: 0.75rem;
            padding: 1.5rem 1rem;
            text-align: center;
            background: rgba(115, 103, 240, 0.03);
            color: #6e6b7b;
        }

        .applicability-form .condition-empty-state strong {
            color: #5e5873;
        }

        .applicability-form .select2-container--default .select2-selection--single,
        .applicability-form .select2-container--default .select2-selection--multiple {
            min-height: 38px;
            border-color: #d8d6de;
        }

        .applicability-form .card-footer {
            background: #fff;
        }
    </style>
@endpush

@php
    $isEdit = isset($ruleApplicability) && $ruleApplicability;
    $selectedModuleType = old('module_type', $isEdit ? $ruleApplicability->module_type : ($selectedModuleType ?? ''));
    $selectedRuleId = old('rule_id', $isEdit ? $ruleApplicability->rule_id : ($selectedRuleId ?? ''));
@endphp

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Rule Applicability</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="{{ url($alias . '/home') }}">Home</a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="{!! route('applicabilities.index', ['alias' => $alias]) !!}">Rule Applicabilities</a>
                    </li>
                    <li class="breadcrumb-item active">{{ $isEdit ? 'Edit' : 'Create' }}</li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@section('content')
    <section>
        <div class="row">
            <div class="col-12">
                @php
                    $initialConditionCount = count($conditionRows);
                @endphp
                <form method="POST"
                    class="applicability-form"
                    action="{{ $isEdit ? route('applicabilities.update', ['alias' => $alias, 'id' => $ruleApplicability->id]) : route('applicabilities.store', ['alias' => $alias]) }}">
                    @csrf
                    @if ($isEdit)
                        @method('PUT')
                    @endif

                    <div class="card">
                        <div class="card-header border-bottom">
                            <div>
                                <h4 class="card-title mb-0">{{ $isEdit ? 'Edit Rule Applicability' : 'Create Rule Applicability' }}</h4>
                                <small class="text-muted">Define when a module rule should apply for employees.</small>
                            </div>
                        </div>
                        <div class="card-body">
                            @if ($errors->any())
                                <div class="alert alert-danger">
                                    <div class="fw-bold mb-50">Please fix the following errors:</div>
                                    <ul class="mb-0 ps-1">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="section-shell mb-2">
                                <div class="d-flex flex-wrap justify-content-between align-items-start gap-1 mb-1">
                                    <div>
                                        <div class="section-title">Applicability Scope</div>
                                        <div class="section-note">Choose the target module first. Rule ID appears only for rule-based modules.</div>
                                    </div>
                                    <span class="form-hint">Required setup</span>
                                </div>

                                <div class="row">
                                    <div class="col-md-4 mb-1">
                                        <label for="module_type" class="form-label">Module <span class="text-danger">*</span></label>
                                        <select name="module_type" id="module_type" class="form-control select2 @error('module_type') is-invalid @enderror">
                                            <option value="">Select Module</option>
                                            @foreach ($moduleTypes as $moduleType)
                                                <option value="{{ $moduleType }}" @if ($selectedModuleType === $moduleType) selected @endif>
                                                    {{ ucfirst($moduleType) }}
                                                </option>
                                            @endforeach
                                        </select>
                                        @error('module_type')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="col-md-4 mb-1" id="rule-id-wrapper">
                                        <label for="rule_id" class="form-label">Rule ID</label>
                                        <select name="rule_id" id="rule_id" class="form-control select2 @error('rule_id') is-invalid @enderror">
                                            <option value="">Select Rule</option>
                                        </select>
                                        <small class="text-muted d-block mt-50">Hidden automatically for module-level penalty access.</small>
                                        @error('rule_id')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>

                            <div class="section-shell">
                                <div class="d-flex flex-wrap justify-content-between align-items-start gap-1 mb-1">
                                    <div>
                                        <div class="section-title">Conditions</div>
                                        <div class="section-note">Create one or more scope rows. Leave this section empty to apply the rule to all employees in the selected module scope.</div>
                                    </div>
                                    <button type="button" class="btn btn-primary btn-sm" id="add-condition">
                                        Add Condition Row
                                    </button>
                                </div>

                                <div id="condition-empty-state" class="condition-empty-state @if ($initialConditionCount > 0) d-none @endif">
                                    <strong>No condition rows added.</strong>
                                    <div class="mt-50">This rule will apply to all employees unless you add a filter row.</div>
                                </div>

                                <div id="condition-rows" class="mt-1">
                                @foreach ($conditionRows as $index => $condition)
                                    @php
                                        $selectedValues = collect($condition['value'] ?? [])
                                            ->filter(function ($value) {
                                                return $value !== null && $value !== '';
                                            })
                                            ->map(function ($value) {
                                                return (string) $value;
                                            })
                                            ->values()
                                            ->all();
                                        $selectedEmployeeType = (string) ($condition['employee_type'] ?? \App\Helpers\ConstantHelper::ALL);
                                        $currentOptions = $fieldValueOptions[$condition['field'] ?? ''] ?? [];
                                    @endphp
                                    <div class="row g-1 align-items-end condition-row mb-1" data-index="{{ $index }}">
                                        <div class="col-md-2">
                                            <label class="form-label">Field</label>
                                            <select name="conditions[{{ $index }}][field]" class="form-control select2 condition-field">
                                                <option value="">Select Field</option>
                                                @foreach ($conditionFields as $field)
                                                    <option value="{{ $field }}" @if (($condition['field'] ?? '') === $field) selected @endif>
                                                        {{ \App\Models\RuleCondition::fieldLabel($field) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <input type="hidden" name="conditions[{{ $index }}][operator]" value="{{ \App\Models\RuleCondition::OPERATOR_IN }}">
                                        <div class="col-md-2">
                                            <label class="form-label">Employee Type</label>
                                            <select name="conditions[{{ $index }}][employee_type]" class="form-control select2 condition-employee-type">
                                                @foreach ($employeeTypeOptions as $employeeTypeOption)
                                                    <option value="{{ $employeeTypeOption }}" @if ($selectedEmployeeType === (string) $employeeTypeOption) selected @endif>
                                                        {{ ucfirst($employeeTypeOption) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <label class="form-label mb-0">Value</label>
                                                <button type="button" class="btn btn-link btn-sm p-0 toggle-all-values">Select All</button>
                                            </div>
                                            <select
                                                name="conditions[{{ $index }}][value][]"
                                                class="form-control select2 condition-value"
                                                data-selected-values='@json($selectedValues)'
                                                multiple>
                                                @foreach ($currentOptions as $option)
                                                    <option value="{{ $option['id'] }}" @if (in_array((string) $option['id'], $selectedValues, true)) selected @endif>
                                                        {{ $option['label'] }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <label class="form-label">Condition Type</label>
                                            <select name="conditions[{{ $index }}][condition_type]" class="form-control select2">
                                                <option value="">Select</option>
                                                @foreach ($conditionTypes as $conditionType)
                                                    <option value="{{ $conditionType }}" @if (($condition['condition_type'] ?? '') === $conditionType) selected @endif>
                                                        {{ ucfirst(strtolower($conditionType)) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <button type="button" class="btn btn-outline-danger w-100 remove-condition">Remove</button>
                                        </div>
                                    </div>
                                @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="card-footer d-flex flex-wrap justify-content-between align-items-center gap-1">
                            <div class="text-muted small">Changes are saved with all condition rows in a single transaction.</div>
                            <div class="d-flex gap-1">
                            <button type="submit" class="btn btn-success">{{ $isEdit ? 'Update Applicability' : 'Save Applicability' }}</button>
                            <a href="{!! route('applicabilities.index', ['alias' => $alias]) !!}" class="btn btn-outline-secondary">Cancel</a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

@push('footer-script')
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script>
        (function () {
            const moduleTypeField = document.getElementById('module_type');
            const ruleIdWrapper = document.getElementById('rule-id-wrapper');
            const ruleIdField = document.getElementById('rule_id');
            const addConditionButton = document.getElementById('add-condition');
            const conditionRows = document.getElementById('condition-rows');
            const conditionEmptyState = document.getElementById('condition-empty-state');
            const ruleOptions = @json($ruleOptions);
            const fieldValueOptions = @json($fieldValueOptions);
            const employeeOptionsUrl = '{{ route('employees-by-type', ['alias' => $alias]) }}';
            const selectedRuleId = @json((string) $selectedRuleId);
            let useInitialRuleId = true;
            const fieldOptions = @json($conditionFields);
            const fieldLabels = @json($conditionFieldLabels ?? []);
            const conditionTypeOptions = @json($conditionTypes);
            const employeeTypeOptions = @json($employeeTypeOptions);

            function initSelect2Element(element) {
                if (!window.jQuery || !window.jQuery.fn.select2) {
                    return;
                }

                const $element = window.jQuery(element);

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

                $element.select2({
                    width: '100%',
                });
            }

            function initSelect2(scope) {
                const context = scope || document;

                context.querySelectorAll('.select2').forEach(function (element) {
                    initSelect2Element(element);
                });
            }

            function fieldLabel(field) {
                if (fieldLabels[field]) {
                    return fieldLabels[field];
                }

                return field.replace(/_id$/i, '').replace(/_/g, ' ').replace(/\b\w/g, function (character) {
                    return character.toUpperCase();
                });
            }

            function normalizeSelectedValues(value) {
                if (Array.isArray(value)) {
                    return value.filter(function (item) {
                        return item !== null && item !== '';
                    }).map(String);
                }

                if (value === null || value === undefined || value === '') {
                    return [];
                }

                return [String(value)];
            }

            function renderRuleOptions() {
                const moduleType = moduleTypeField.value;
                const options = ruleOptions[moduleType] || [];
                const currentValue = useInitialRuleId ? String(selectedRuleId || '') : String(ruleIdField.value || '');
                let html = '<option value="">Select Rule</option>';

                options.forEach(function (option) {
                    const selected = String(currentValue) === String(option.id) ? ' selected' : '';
                    html += '<option value="' + option.id + '"' + selected + '>' + option.label + '</option>';
                });

                ruleIdField.innerHTML = html;
                useInitialRuleId = false;
                initSelect2Element(ruleIdField);
            }

            function getStoredSelectedValues(valueSelect) {
                if (valueSelect.selectedOptions && valueSelect.selectedOptions.length) {
                    return normalizeSelectedValues(Array.from(valueSelect.selectedOptions).map(function (option) {
                        return option.value;
                    }));
                }

                if (!valueSelect.dataset.selectedValues) {
                    return [];
                }

                try {
                    return normalizeSelectedValues(JSON.parse(valueSelect.dataset.selectedValues));
                } catch (error) {
                    return normalizeSelectedValues(valueSelect.dataset.selectedValues);
                }
            }

            function toggleRuleId() {
                const isPenalty = moduleTypeField.value === 'penalty';
                ruleIdWrapper.style.display = isPenalty ? 'none' : '';

                if (isPenalty) {
                    ruleIdField.innerHTML = '<option value="">Select Rule</option>';
                    ruleIdField.value = '';
                    initSelect2Element(ruleIdField);
                    return;
                }

                renderRuleOptions();
            }

            function refreshEmployeeTypeSelect(row) {
                const employeeTypeSelect = row.querySelector('.condition-employee-type');

                if (!employeeTypeSelect) {
                    return;
                }

                if (window.jQuery && window.jQuery.fn.select2 && window.jQuery(employeeTypeSelect).hasClass('select2-hidden-accessible')) {
                    window.jQuery(employeeTypeSelect).select2('destroy');
                }

                if (!employeeTypeSelect.value) {
                    employeeTypeSelect.value = 'all';
                }

                initSelect2Element(employeeTypeSelect);
            }

            function nextIndex() {
                const rows = conditionRows.querySelectorAll('.condition-row');

                if (!rows.length) {
                    return 0;
                }

                return Math.max.apply(null, Array.from(rows).map(function (row) {
                    return parseInt(row.getAttribute('data-index'), 10);
                })) + 1;
            }

            function updateConditionEmptyState() {
                if (!conditionEmptyState) {
                    return;
                }

                const hasRows = conditionRows.querySelectorAll('.condition-row').length > 0;
                conditionEmptyState.classList.toggle('d-none', hasRows);
            }

            function fetchEmployeeOptionsByType(employeeType) {
                return new Promise(function (resolve) {
                    if (!employeeType || employeeType === 'all') {
                        resolve(fieldValueOptions['{{ \App\Models\RuleCondition::FIELD_EMPLOYEE }}'] || []);
                        return;
                    }

                    window.jQuery.ajax({
                        url: employeeOptionsUrl,
                        method: 'GET',
                        data: { employee_type: employeeType },
                        success: function (employees) {
                            const options = (employees || []).map(function (employee) {
                                return {
                                    id: String(employee.id),
                                    label: String(employee.name || '') + (employee.employee_code ? ' (' + employee.employee_code + ')' : ''),
                                };
                            });
                            resolve(options);
                        },
                        error: function () {
                            resolve(fieldValueOptions['{{ \App\Models\RuleCondition::FIELD_EMPLOYEE }}'] || []);
                        },
                    });
                });
            }

            function refreshValueSelect(row, preserveSelectedValues) {
                const fieldSelect = row.querySelector('.condition-field');
                const valueSelect = row.querySelector('.condition-value');
                const employeeTypeSelect = row.querySelector('.condition-employee-type');
                const previousSelected = preserveSelectedValues ? getStoredSelectedValues(valueSelect) : [];

                if (window.jQuery && window.jQuery.fn.select2 && window.jQuery(valueSelect).hasClass('select2-hidden-accessible')) {
                    window.jQuery(valueSelect).select2('destroy');
                }

                valueSelect.innerHTML = '';
                valueSelect.setAttribute('multiple', 'multiple');

                const populateOptions = function (options) {
                    options.forEach(function (option) {
                        const normalizedId = String(option.id);
                        const shouldSelect = previousSelected.indexOf(normalizedId) !== -1;
                        valueSelect.appendChild(new Option(option.label, option.id, shouldSelect, shouldSelect));
                    });

                    valueSelect.dataset.selectedValues = JSON.stringify(normalizeSelectedValues(Array.from(valueSelect.selectedOptions).map(function (option) {
                        return option.value;
                    })));

                    updateToggleAllButton(row);
                    initSelect2Element(valueSelect);
                };

                if (fieldSelect.value === '{{ \App\Models\RuleCondition::FIELD_EMPLOYEE }}' && employeeTypeSelect) {
                    const employeeType = employeeTypeSelect.value || 'all';
                    fetchEmployeeOptionsByType(employeeType).then(function (options) {
                        populateOptions(options);
                    });
                } else {
                    const options = fieldValueOptions[fieldSelect.value] || [];
                    populateOptions(options);
                }
            }

            function updateToggleAllButton(row) {
                const valueSelect = row.querySelector('.condition-value');
                const toggleButton = row.querySelector('.toggle-all-values');

                if (!valueSelect || !toggleButton) {
                    return;
                }

                const totalOptions = valueSelect.options.length;
                const selectedOptions = Array.from(valueSelect.options).filter(function (option) {
                    return option.selected;
                }).length;
                const allSelected = totalOptions > 0 && selectedOptions === totalOptions;

                toggleButton.textContent = allSelected ? 'Unselect All' : 'Select All';
                toggleButton.disabled = totalOptions === 0;
            }

            function toggleAllValues(row) {
                const valueSelect = row.querySelector('.condition-value');

                if (!valueSelect) {
                    return;
                }

                const allSelected = valueSelect.options.length > 0 && Array.from(valueSelect.options).every(function (option) {
                    return option.selected;
                });
                const selectedValues = [];

                Array.from(valueSelect.options).forEach(function (option) {
                    option.selected = !allSelected;

                    if (option.selected) {
                        selectedValues.push(option.value);
                    }
                });

                valueSelect.dataset.selectedValues = JSON.stringify(selectedValues);

                if ($ && $.fn.select2) {
                    $(valueSelect).trigger('change');
                } else {
                    valueSelect.dispatchEvent(new Event('change'));
                }
            }

            function addConditionRow(values) {
                const index = nextIndex();
                const row = document.createElement('div');
                row.className = 'row g-1 align-items-end condition-row mb-1';
                row.setAttribute('data-index', index);

                row.innerHTML = '' +
                    '<div class="col-md-2">' +
                        '<label class="form-label">Field</label>' +
                        '<select name="conditions[' + index + '][field]" class="form-control select2 condition-field">' +
                            '<option value="">Select Field</option>' +
                            fieldOptions.map(function (field) {
                                const selected = values.field === field ? ' selected' : '';
                                return '<option value="' + field + '"' + selected + '>' + fieldLabel(field) + '</option>';
                            }).join('') +
                        '</select>' +
                    '</div>' +
                    '<input type="hidden" name="conditions[' + index + '][operator]" value="IN">' +
                    '<div class="col-md-2">' +
                        '<label class="form-label">Employee Type</label>' +
                        '<select name="conditions[' + index + '][employee_type]" class="form-control select2 condition-employee-type">' +
                            employeeTypeOptions.map(function (employeeType) {
                                const selectedEmployeeType = String(values.employee_type || 'all');
                                const selected = selectedEmployeeType === String(employeeType) ? ' selected' : '';
                                return '<option value="' + employeeType + '"' + selected + '>' + (employeeType.charAt(0).toUpperCase() + employeeType.slice(1)) + '</option>';
                            }).join('') +
                        '</select>' +
                    '</div>' +
                    '<div class="col-md-4">' +
                        '<div class="d-flex justify-content-between align-items-center">' +
                            '<label class="form-label mb-0">Value</label>' +
                            '<button type="button" class="btn btn-link btn-sm p-0 toggle-all-values">Select All</button>' +
                        '</div>' +
                        '<select name="conditions[' + index + '][value][]" class="form-control select2 condition-value" data-selected-values=\'' + JSON.stringify(normalizeSelectedValues(values.value || [])) + '\' multiple></select>' +
                    '</div>' +
                    '<div class="col-md-2">' +
                        '<label class="form-label">Condition Type</label>' +
                        '<select name="conditions[' + index + '][condition_type]" class="form-control select2">' +
                            '<option value="">Select</option>' +
                            conditionTypeOptions.map(function (conditionType) {
                                const selected = values.condition_type === conditionType ? ' selected' : '';
                                return '<option value="' + conditionType + '"' + selected + '>' + (conditionType.charAt(0) + conditionType.slice(1).toLowerCase()) + '</option>';
                            }).join('') +
                        '</select>' +
                    '</div>' +
                    '<div class="col-md-2">' +
                        '<button type="button" class="btn btn-outline-danger w-100 remove-condition">Remove</button>' +
                    '</div>';

                conditionRows.appendChild(row);
                refreshValueSelect(row, true);
                refreshEmployeeTypeSelect(row);
                initSelect2(row);
                updateConditionEmptyState();
            }

            const $ = window.jQuery;

            if ($) {
                $(document).on('change', '#module_type', function () {
                    useInitialRuleId = false;
                    ruleIdField.value = '';
                    toggleRuleId();
                });

                $(document).on('click', '#add-condition', function () {
                    addConditionRow({});
                });

                $(document).on('click', '.remove-condition', function () {
                    const row = this.closest('.condition-row');

                    if (row) {
                        row.remove();
                        updateConditionEmptyState();
                    }
                });

                $(document).on('change', '.condition-field', function () {
                    const row = this.closest('.condition-row');

                    if (row) {
                        refreshValueSelect(row, false);
                    }
                });

                $(document).on('change', '.condition-employee-type', function () {
                    const row = this.closest('.condition-row');

                    if (row) {
                        const fieldSelect = row.querySelector('.condition-field');
                        if (fieldSelect && fieldSelect.value === '{{ \App\Models\RuleCondition::FIELD_EMPLOYEE }}') {
                            refreshValueSelect(row, false);
                        }
                    }
                });

                $(document).on('change', '.condition-value', function () {
                    this.dataset.selectedValues = JSON.stringify(normalizeSelectedValues($(this).val() || []));
                    const row = this.closest('.condition-row');

                    if (row) {
                        updateToggleAllButton(row);
                    }
                });

                $(document).on('click', '.toggle-all-values', function () {
                    const row = this.closest('.condition-row');

                    if (row) {
                        toggleAllValues(row);
                    }
                });
            }

            conditionRows.querySelectorAll('.condition-row').forEach(function (row) {
                refreshValueSelect(row, true);
                refreshEmployeeTypeSelect(row);
            });

            initSelect2(document);
            toggleRuleId();
            updateConditionEmptyState();
        })();
    </script>
@endpush