@extends('dashboard.layouts.app')

<style>
   .ui-card {
    width: 100%;
    border-radius: 1.25rem;
    overflow: hidden;
    padding: 25px !important;
}
</style>  

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title title="Compensations"
                    description="Manage staff bonuses, penalties, custom rules, and payroll-related compensation records for the selected period.">
                    <div class="d-flex align-items-center gap-2 flex-wrap">
                        <span class="ui-pill ui-pill--neutral">
                            Period: {{ $payroll_from }} / {{ $payroll_to }}
                        </span>

                        @if ($payrollRunExists)
                            <span class="ui-pill ui-pill--success">Run</span>
                        @else
                            <span class="ui-pill ui-pill--warn">Not Run</span>
                        @endif
                    </div>
                </x-page-title>

                @if ($user)
                    <div class="stats-grid stats-grid--4">
                        <div class="stat-card">
                            <div class="stat-card__label">Total Salary</div>
                            <div class="stat-card__value stat-card__value--primary">
                                {{ number_format($salary, 2) }}
                            </div>
                            @if ($hourly_rate)
                                <div class="stat-card__meta">
                                    Rate: <strong>{{ number_format($hourly_rate, 2) }}</strong>
                                    <span class="mx-1">|</span>
                                    Hours: <strong>{{ number_format($total_hours, 2) }}</strong>
                                </div>
                            @endif
                        </div>

                        <div class="stat-card">
                            <div class="stat-card__label">Total Bonuses</div>
                            <div class="stat-card__value stat-card__value--success">
                                {{ number_format($bonus_result, 2) }}
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-card__label">Total Penalties</div>
                            <div class="stat-card__value stat-card__value--danger">
                                {{ number_format($penalty_result, 2) }}
                            </div>
                        </div>

                        <div class="stat-card">
                            <div class="stat-card__label">Net Adjustment</div>
                            <div
                                class="stat-card__value {{ $total_adjustments >= 0 ? 'stat-card__value--success' : 'stat-card__value--danger' }}">
                                {{ $total_adjustments >= 0 ? '+' : '' }}{{ number_format($total_adjustments, 2) }}
                            </div>
                        </div>
                    </div>
                @endif

                {{-- <div class="ui-card ui-card--table" style="border-radius: 20px 20px 0px 0px;">
                    <div class="ui-card__header">

                        <div class="d-flex align-items-center gap-3 flex-nowrap">
                            <h6 class="mb-0 font-semibold text-gray-800 whitespace-nowrap me-auto">
                                Filters
                            </h6>

                         
                            <x-table-controls formId="payroll-table-controls" :action="route('compensations.user.index', ['user_id' => $user->id])" searchName="search"
                                searchPlaceholder="search..." : date=True>

                            </x-table-controls>

                        </div>

                    </div>
                </div> --}}

                @if ($user)
                    <div class="ui-card" style="border-radius: 13px;padding: 15px;margin-bottom: 10px;">
                        <div class="ui-card__body">
                            <div class="employee-summary">
                                <div>
                                    <div class="employee-summary__name">
                                      User:  {{ $user->full_name ?? $user->username }}
                                    </div>
                                    <div class="employee-summary__meta">
                                        Position: {{ optional(optional($user->staff)->jobTitle)->name ?? '—' }}
                                    </div>
                                    <div class="employee-summary__meta">
                                        Package Type: {{ $emp_salary_type ?? '—' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-panels-grid" style="margin-bottom: 10px;">
                        @if ($canManageCompensations || $canAddManagerCompensation)
                        <div class="ui-card">
                            <div class="ui-card__header">
                                <h6>Add Penalty</h6>
                            </div>
                            <div class="ui-card__body">
                                <form id="penaltyForm" action="{{ route('compensations.user.store') }}" method="get"
                                    class="space-y-3">
                                    <input type="hidden" name="user_id" value="{{ $user->id }}">

                                    <div>
                                        <label class="asset-label">Penalty Rule</label>
                                        <select name="rule_id" id="penalty_rule_id" class="asset-select" required>
                                            <option value="">-- select penalty --</option>
                                            @foreach ($penaltyRules->groupBy('apply_to') as $group => $rules)
                                                <optgroup label="{{ ucfirst($group) }}">
                                                    @foreach ($rules as $rule)
                                                        <option value="{{ $rule->id }}">
                                                            {{ $rule->name }} - {{ $rule->units }} -
                                                            ({{ $rule->value }})
                                                        </option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div>
                                        <label class="asset-label">Date</label>
                                        <input type="date" name="date" class="asset-input compensation-date-input"
                                            required>
                                    </div>

                                    <div id="penaltyRuleLevelInfo" class="rule-level-box" style="display: none;">
                                        <div class="rule-level-box__title">Next Rule Level to be Applied</div>
                                        <div class="rule-level-box__row"><strong>Level:</strong> <span
                                                id="penaltyLevelNumber">-</span></div>
                                        <div class="rule-level-box__row"><strong>Penalty Type:</strong> <span
                                                id="penaltyPenaltyType">-</span></div>
                                        <div class="rule-level-box__row"><strong>Penalty Value:</strong> <span
                                                id="penaltyPenaltyValue">-</span></div>
                                    </div>

                                    <div class="asset-actions">
                                        <button class="asset-btn asset-btn--danger" type="submit"
                                            {{ $payrollRunExists ? 'disabled' : '' }}>
                                            Add Penalty
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        @endif

                        @if ($canManageCompensations || $canAddManagerCompensation)
                        <div class="ui-card">
                            <div class="ui-card__header">
                                <h6>Add Bonus</h6>
                            </div>
                            <div class="ui-card__body">
                                <form id="bonusForm" action="{{ route('compensations.user.store') }}" method="get"
                                    class="space-y-3">
                                    <input type="hidden" name="user_id" value="{{ $user->id }}">

                                    <div>
                                        <label class="asset-label">Bonus Rule</label>
                                        <select name="rule_id" class="asset-select" required>
                                            <option value="">-- select bonus --</option>
                                            @foreach ($bonusRules->groupBy('apply_to') as $group => $rules)
                                                <optgroup label="{{ ucfirst($group) }}">
                                                    @foreach ($rules as $rule)
                                                        <option value="{{ $rule->id }}">
                                                            {{ $rule->name }} ({{ $rule->value }})
                                                        </option>
                                                    @endforeach
                                                </optgroup>
                                            @endforeach
                                        </select>
                                    </div>

                                    <div>
                                        <label class="asset-label">Date</label>
                                        <input type="date" name="date" class="asset-input compensation-date-input"
                                            required>
                                    </div>

                                    <div class="asset-actions">
                                        <button class="asset-btn asset-btn--success" type="submit"
                                            {{ $payrollRunExists ? 'disabled' : '' }}>
                                            Add Bonus
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        @endif
                    </div>

                    <div class="ui-card ui-card--table">
                        <div class="ui-card__header">
                            <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
                                <h6 class="mb-0 font-semibold text-gray-800">Existing Compensations</h6>

                                @if ($canManageCompensations)
                                    <button type="button" class="asset-btn asset-btn--primary" data-bs-toggle="modal"
                                        data-bs-target="#createRuleModal" {{ $payrollRunExists ? 'disabled' : '' }}>
                                        Add Rule
                                    </button>
                                @endif
                            </div>
                        </div>

                        <x-table :headers="[
                            'Type',
                            'Rule',
                            'Level',
                            'Value',
                            'Unit',
                            'Exceeded Levels',
                            'Payroll Period',
                            'Created At',
                            'Actions',
                        ]" :paginator="$compensations" emptyMessage="No compensations yet.">
                            @forelse($compensations as $c)
                                @php($type = optional($c->rule)->type)
                                <tr>
                                    <td class="text-center">
                                        <span
                                            class="ui-pill {{ $type === 'bonus' || $c->rule_id == null ? 'ui-pill--success' : 'ui-pill--danger' }}">
                                            {{ ucfirst($type ?? '—') }}
                                        </span>
                                    </td>

                                    <td class="ui-title text-center">
                                        {{ optional($c->rule)->name ?? 'Double paid day' }}
                                    </td>

                                    <td class="ui-muted text-center">
                                        {{ $c->rule_level_id ? $c->ruleLevel->level_number : '-' }}
                                    </td>

                                    <td class="ui-muted text-center">
                                        {{ $c->rule_level_id ? $c->ruleLevel->penalty_value : optional($c->rule)->value }}
                                    </td>

                                    <td class="ui-muted text-center">
                                        {{ $c->rule_level_id ? $c->ruleLevel->penalty_type : $c->rule?->units }}
                                    </td>

                                    <td class="text-center">
                                        <span
                                            class="ui-pill {{ $c->is_exceeded_rule_levels_count ? 'ui-pill--danger' : 'ui-pill--success' }}">
                                            {{ $c->is_exceeded_rule_levels_count ? 'Yes' : 'No' }}
                                        </span>
                                    </td>

                                    <td class="ui-muted text-center">
                                        @if ($c->payroll_run)
                                            <div>{{ $c->payroll_run->from_date }}</div>
                                            <div>{{ $c->payroll_run->to_date }}</div>
                                        @else
                                            <span class="ui-pill ui-pill--warn">Not Run</span>
                                        @endif
                                    </td>

                                    <td class="ui-muted text-center">
                                        {{ $c->created_at?->format('Y-m-d H:i') }}
                                    </td>

                                    <td class="text-center">
                                        @if ($canManageCompensations)
                                            <div class="d-flex justify-content-center gap-2 flex-wrap">
                                                <button type="button"
                                                    class="asset-btn asset-btn--secondary btn-sm btn-edit-compensation"
                                                    data-id="{{ $c->id }}"
                                                    {{ $c->is_locked || $payrollRunExists ? 'disabled' : '' }}>
                                                    Edit
                                                </button>

                                                <button type="button"
                                                    class="asset-btn asset-btn--secondary btn-sm btn-delete-compensation"
                                                    data-id="{{ $c->id }}"
                                                    {{ $c->is_locked || $payrollRunExists ? 'disabled' : '' }}>
                                                    Delete
                                                </button>
                                            </div>
                                        @else
                                            <span class="ui-muted">-</span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="9" class="text-center ui-muted">No compensations yet.</td>
                                </tr>
                            @endforelse
                        </x-table>
                    </div>
                @else
                    <div class="ui-card">
                        <div class="ui-card__body">
                            <div class="ui-muted">Please select a user to manage compensations.</div>
                        </div>
                    </div>
                @endif

            </div>
        </div>
    </div>

    <!-- Edit Compensation Modal -->
    <div class="modal fade" id="editCompensationModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-ui">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title">Edit Compensation</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <form id="editCompensationForm" class="space-y-3">
                        <input type="hidden" id="edit_compensation_id">
                        <input type="hidden" id="edit_user_id" value="{{ $user->id }}">

                        <div>
                            <label class="asset-label">Rule</label>
                            <select id="edit_rule_id" class="asset-select" required>
                                <option value="">-- select rule --</option>

                                @foreach ($penaltyRules->groupBy('apply_to') as $group => $rules)
                                    <optgroup label="Penalty - {{ ucfirst($group) }}">
                                        @foreach ($rules as $rule)
                                            <option value="{{ $rule->id }}">
                                                [Penalty] {{ $rule->name }} - {{ $rule->units }} -
                                                ({{ $rule->value }})
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endforeach

                                @foreach ($bonusRules->groupBy('apply_to') as $group => $rules)
                                    <optgroup label="Bonus - {{ ucfirst($group) }}">
                                        @foreach ($rules as $rule)
                                            <option value="{{ $rule->id }}">
                                                [Bonus] {{ $rule->name }} ({{ $rule->value }})
                                            </option>
                                        @endforeach
                                    </optgroup>
                                @endforeach
                            </select>
                        </div>

                        <div>
                            <label class="asset-label">Date</label>
                            <input type="date" id="edit_date" class="asset-input compensation-date-input" required>
                        </div>

                        <div id="editRuleLevelInfo" class="rule-level-box" style="display: none;">
                            <div class="rule-level-box__title">Next Rule Level to be Applied</div>
                            <div class="rule-level-box__row"><strong>Level:</strong> <span id="editLevelNumber">-</span>
                            </div>
                            <div class="rule-level-box__row"><strong>Penalty Type:</strong> <span
                                    id="editPenaltyType">-</span></div>
                            <div class="rule-level-box__row"><strong>Penalty Value:</strong> <span
                                    id="editPenaltyValue">-</span></div>
                        </div>
                    </form>
                </div>

                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="asset-btn asset-btn--primary"
                        id="btnUpdateCompensation">Update</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Create Rule Modal -->
    <div class="modal fade" id="createRuleModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-ui">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title">Add Rule</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <form id="createRuleForm" class="space-y-3">
                        @csrf
                        <input type="hidden" name="user_id" value="{{ $user->id }}">

                        <div>
                            <label class="asset-label">Name</label>
                            <input type="text" name="name" class="asset-input" required maxlength="255">
                        </div>

                        <div>
                            <label class="asset-label">Description</label>
                            <textarea name="description" class="asset-input asset-textarea" required maxlength="1000"></textarea>
                        </div>

                        <div>
                            <label class="asset-label">Type</label>
                            <select name="type" class="asset-select" required>
                                <option value="bonus">Bonus</option>
                                <option value="penalty">Penalty</option>
                            </select>
                        </div>

                        <div>
                            <label class="asset-label">Value</label>
                            <input type="number" name="value" class="asset-input" id="value_input" required>
                        </div>

                        <div>
                            <label class="asset-label">Units</label>
                            <select name="units" id="unit_select" class="asset-select" required>
                                <option value="fixed">Fixed</option>
                                <option value="hour">Hour</option>
                                <option value="day">Day</option>
                                <option value="percentage">Percentage</option>
                            </select>
                        </div>

                        <div>
                            <label class="asset-label">Status</label>
                            <select name="status" class="asset-select" required>
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                            </select>
                        </div>
                    </form>

                    <div class="alert alert-danger d-none mt-3" id="createRuleErrors"></div>
                </div>

                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="asset-btn asset-btn--secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="asset-btn asset-btn--primary" id="btnSaveRule">Save</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .stats-grid {
            display: grid;
            gap: 1rem;
            margin: 10px 0;
        }

        .stats-grid--4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .stat-card {
            border: 1px solid #eef2f7;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
            padding: 1.1rem 1.15rem;
        }

        .stat-card__label {
            color: #6b7280;
            font-size: 0.9rem;
            margin-bottom: 0.45rem;
        }

        .stat-card__value {
            font-size: 1.6rem;
            font-weight: 700;
            line-height: 1.2;
        }

        .stat-card__value--primary {
            color: #2563eb;
        }

        .stat-card__value--success {
            color: #16a34a;
        }

        .stat-card__value--danger {
            color: #dc2626;
        }

        .stat-card__meta {
            margin-top: 0.5rem;
            color: #6b7280;
            font-size: 0.82rem;
        }

        .employee-summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .employee-summary__name {
            font-size: 1.2rem;
            font-weight: 700;
            color: #111827;
        }

        .employee-summary__meta {
            color: #6b7280;
            margin-top: 0.25rem;
            font-size: 0.92rem;
        }

        .form-panels-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 600;
            color: #374151;
            font-size: 0.92rem;
        }

        .asset-input,
        .asset-select,
        .asset-textarea {
            width: 100%;
            min-height: 44px;
            border: 1px solid #dbe2ea;
            border-radius: 12px;
            padding: 0.7rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
        }

        .asset-textarea {
            min-height: 110px;
            resize: vertical;
        }

        .asset-input:focus,
        .asset-select:focus,
        .asset-textarea:focus {
            outline: none;
            border-color: #b8c4d6;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08);
        }

        .asset-input--sm {
            min-height: 40px;
            padding: 0.55rem 0.8rem;
        }

        .asset-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
        }

        .rule-level-box {
            border: 1px solid #dbeafe;
            background: #eff6ff;
            border-radius: 14px;
            padding: 0.9rem 1rem;
        }

        .rule-level-box__title {
            font-size: 0.95rem;
            font-weight: 700;
            color: #1d4ed8;
            margin-bottom: 0.5rem;
        }

        .rule-level-box__row {
            font-size: 0.9rem;
            color: #1f2937;
            margin-bottom: 0.2rem;
        }

        .modal-ui {
            border: 0;
            border-radius: 20px;
            box-shadow: 0 25px 50px rgba(15, 23, 42, 0.18);
        }

        .btn-sm {
            padding: 0.45rem 0.75rem !important;
            font-size: 0.82rem !important;
        }

        @media (max-width: 1199.98px) {
            .stats-grid--4 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }

            .form-panels-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 767.98px) {
            .stats-grid--4 {
                grid-template-columns: 1fr;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        (function() {
            let isLoading = false;

            function ajaxSubmit(formEl, successCb) {
                if (isLoading) return;
                isLoading = true;

                const $form = $(formEl);
                const $btn = $form.find('button[type="submit"]');
                const btnOriginalText = $btn.html();

                $btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-1"></span>Loading...');

                $.ajax({
                    url: $form.attr('action'),
                    type: 'GET',
                    data: $form.serialize(),
                    success: function(response) {
                        toastr.success(response.message);
                        if (typeof successCb === 'function') successCb(response);
                    },
                    error: function(xhr) {
                        const msg = xhr.responseJSON?.error || xhr.responseJSON?.message ||
                            'Something went wrong';
                        toastr.error(msg);
                        $btn.prop('disabled', false).html(btnOriginalText);
                        isLoading = false;
                    }
                });
            }

            function fetchRuleLevel(ruleId, userId, containerPrefix) {
                if (!ruleId || !userId) {
                    $(`#${containerPrefix}RuleLevelInfo`).hide();
                    return;
                }

                $.ajax({
                    url: '{{ route('compensations.get-next-rule-level') }}',
                    type: 'GET',
                    data: {
                        rule_id: ruleId,
                        user_id: userId
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.level) {
                            $(`#${containerPrefix}LevelNumber`).text(response.level.level_number);
                            $(`#${containerPrefix}PenaltyType`).text(
                                response.level.penalty_type.charAt(0).toUpperCase() + response.level
                                .penalty_type.slice(1)
                            );

                            const penaltyValue = response.level.penalty_value !== null && response.level
                                .penalty_value !== undefined ?
                                response.level.penalty_value :
                                'N/A';

                            $(`#${containerPrefix}PenaltyValue`).text(penaltyValue);
                            $(`#${containerPrefix}RuleLevelInfo`).show();
                        } else {
                            $(`#${containerPrefix}RuleLevelInfo`).hide();
                        }
                    },
                    error: function() {
                        $(`#${containerPrefix}RuleLevelInfo`).hide();
                    }
                });
            }

            $('#penaltyForm').on('submit', function(e) {
                e.preventDefault();
                ajaxSubmit(this, function() {
                    window.location.reload();
                });
            });

            $('#bonusForm').on('submit', function(e) {
                e.preventDefault();
                ajaxSubmit(this, function() {
                    window.location.reload();
                });
            });

            $(document).on('click', '.btn-delete-compensation', function() {
                if (isLoading) return;
                isLoading = true;

                const $btn = $(this);
                const btnOriginalText = $btn.html();
                const id = $btn.data('id');

                $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm"></span>');

                $.ajax({
                    url: `{{ url('compensations/delete') }}/${id}`,
                    type: 'GET',
                    dataType: 'json',
                    success: function(response) {
                        toastr.success(response.message);
                        window.location.reload();
                    },
                    error: function(xhr) {
                        const msg = (xhr.responseJSON && (xhr.responseJSON.message || JSON
                            .stringify(xhr.responseJSON))) || 'Delete failed';
                        alert(msg);
                        $btn.prop('disabled', false).html(btnOriginalText);
                        isLoading = false;
                    }
                });
            });

            $(document).on('click', '.btn-edit-compensation', function() {
                const id = $(this).data('id');

                fetch(`{{ url('compensations') }}/${id}`)
                    .then(r => r.json())
                    .then(c => {
                        $('#edit_compensation_id').val(c.id);
                        $('#edit_rule_id').val(c.rule_id);
                        $('#edit_date').val(c.date);

                        const userId = $('#edit_user_id').val();
                        fetchRuleLevel(c.rule_id, userId, 'edit');

                        new bootstrap.Modal(document.getElementById('editCompensationModal')).show();
                    })
                    .catch(() => alert('Failed to load item'));
            });

            $('#edit_rule_id').on('change', function() {
                const ruleId = $(this).val();
                const userId = $('#edit_user_id').val();
                fetchRuleLevel(ruleId, userId, 'edit');
            });

            $('#penalty_rule_id').on('change', function() {
                const ruleId = $(this).val();
                const userId = $('#penaltyForm input[name="user_id"]').val();
                fetchRuleLevel(ruleId, userId, 'penalty');
            });

            $('#btnUpdateCompensation').on('click', function() {
                if (isLoading) return;
                isLoading = true;

                const $btn = $(this);
                const btnOriginalText = $btn.html();
                const id = $('#edit_compensation_id').val();
                const ruleId = $('#edit_rule_id').val();
                const date = $('#edit_date').val();

                $btn.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-1"></span>Updating...');

                $.ajax({
                    url: `{{ url('compensations/update') }}/${id}`,
                    type: 'GET',
                    data: {
                        rule_id: ruleId,
                        date: date
                    },
                    dataType: 'json',
                    success: function(response) {
                        const modalEl = document.getElementById('editCompensationModal');
                        let modalInstance = bootstrap.Modal.getInstance(modalEl) || new bootstrap
                            .Modal(modalEl);
                        modalInstance.hide();
                        toastr.success(response.message);
                        window.location.reload();
                    },
                    error: function(xhr) {
                        const msg = (xhr.responseJSON && (xhr.responseJSON.message || JSON
                            .stringify(xhr.responseJSON))) || 'Update failed';
                        alert(msg);
                        $btn.prop('disabled', false).html(btnOriginalText);
                        isLoading = false;
                    }
                });
            });

            $('#btnSaveRule').on('click', function(e) {
                e.preventDefault();

                const formData = $('#createRuleForm');

                $.ajax({
                    url: "{{ route('rules.store') }}",
                    type: "GET",
                    data: formData.serialize(),
                    success: function(response) {
                        toastr.success(response.message);

                        const modalEl = document.getElementById('createRuleModal');
                        const modalInstance = bootstrap.Modal.getInstance(modalEl);
                        modalInstance.hide();

                        $('#createRuleErrors').empty().addClass('d-none');

                        formData.find('input, select, textarea').each(function() {
                            const type = $(this).attr('type');

                            if (type === 'checkbox' || type === 'radio') {
                                $(this).prop('checked', false);
                            } else if (type === 'file') {
                                $(this).val(null);
                            } else {
                                $(this).val('');
                            }
                        });

                        window.location.reload();
                    },
                    error: function(xhr) {
                        const body = xhr.responseJSON;
                        showErrors('createRuleErrors', body);
                    }
                });
            });

            function showErrors(containerId, body) {
                const el = document.getElementById(containerId);
                let message = 'An error occurred';

                if (body && body.errors) {
                    message = Object.values(body.errors).flat().join("\n");
                } else if (body && body.message) {
                    message = body.message;
                }

                el.classList.remove('d-none');
                el.textContent = message;
            }

            $(document).ready(function() {
                const $fromDate = $('#from_date');
                const $toDate = $('#to_date');

                $fromDate.on('change', function() {
                    const fDate = new Date($(this).val());

                    if (!isNaN(fDate.getTime())) {
                        if (fDate.getDate() !== 15) {
                            alert('Start date must be the 15th.');
                            fDate.setDate(15);
                            $(this).val(fDate.toISOString().split('T')[0]);
                        }

                        const tDate = new Date(fDate);
                        tDate.setMonth(tDate.getMonth() + 1);
                        tDate.setDate(14);

                        $toDate.val(tDate.toISOString().split('T')[0]);
                    }
                });

                $toDate.on('change', function() {
                    const tDate = new Date($(this).val());

                    if (!isNaN(tDate.getTime())) {
                        if (tDate.getDate() !== 14) {
                            alert('End date must be the 14th.');
                            tDate.setDate(14);
                            $(this).val(tDate.toISOString().split('T')[0]);
                        }

                        const fDate = new Date(tDate);
                        fDate.setMonth(fDate.getMonth() - 1);
                        fDate.setDate(15);

                        $fromDate.val(fDate.toISOString().split('T')[0]);
                    }
                });

                function syncCompensationDateRanges() {
                    const min = $fromDate.val();
                    const max = $toDate.val();
                    const today = new Date().toISOString().split('T')[0];

                    $('.compensation-date-input').each(function() {
                        $(this).attr('min', min);
                        $(this).attr('max', max);

                        if ($(this).attr('id') !== 'edit_date') {
                            if (today >= min && today <= max) {
                                $(this).val(today);
                            } else {
                                $(this).val(min);
                            }
                        }
                    });
                }

                syncCompensationDateRanges();
                $fromDate.on('change', syncCompensationDateRanges);
                $toDate.on('change', syncCompensationDateRanges);
            });
        })();
    </script>
@endpush