@extends('layouts/base_view')
@section('title')
{!! $variables['header_routes'] !!}
@endsection
@section('content')
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card card-secondary">
                    <div class="card-header">
                        <h3 class="card-title">{!! $variables['judul'] !!}</h3>
                    </div>
                    <div class="card-body">
                        <form method="post" action="{{ route('promotions.store', $data->id ?? 0) }}" enctype="multipart/form-data" id="promotion-form">
                            @csrf
                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <input value="{{ old('name', $data->name ?? '') }}" type="text" class="form-control" name="name" placeholder="" required>
                                    <label for="name">Promotion Name</label>
                                    @if ($errors->has('name'))
                                    <span class="text-danger text-left">{{ $errors->first('name') }}</span>
                                    @endif
                                </div>
                                <div class="form-group form-floating mb-3 col-md-6">
                                    <label for="reward_method" style="opacity: .65;transform: scale(.85) translateY(-.5rem) translateX(.15rem);">Reward Method</label>
                                    <select name="reward_method" id="reward_method" class="form-control" required>
                                        <option value="">-- Select Reward Method --</option>
                                        @foreach($rewardMethods as $key => $method)
                                        <option value="{{ $key }}" {{ old('reward_method', $data->reward_method ?? '') == $key ? 'selected' : '' }}>
                                            {{ $method }}
                                        </option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('reward_method'))
                                    <span class="text-danger">{{ $errors->first('reward_method') }}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-12">
                                    <textarea name="description" class="form-control" placeholder="" rows="3">{{ old('description', $data->description ?? '') }}</textarea>
                                    <label for="description">Description</label>
                                    @if ($errors->has('description'))
                                    <span class="text-danger text-left">{{ $errors->first('description') }}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-3">
                                    <input value="{{ old('start_date', $data->start_date ? $data->start_date->format('Y-m-d') : '') }}" type="date" class="form-control" name="start_date" placeholder="" required>
                                    <label for="start_date">Start Date</label>
                                    @if ($errors->has('start_date'))
                                    <span class="text-danger text-left">{{ $errors->first('start_date') }}</span>
                                    @endif
                                </div>
                                <div class="form-group form-floating mb-3 col-md-3">
                                    <input value="{{ old('end_date', $data->end_date ? $data->end_date->format('Y-m-d') : '') }}" type="date" class="form-control" name="end_date" placeholder="" required>
                                    <label for="end_date">End Date</label>
                                    @if ($errors->has('end_date'))
                                    <span class="text-danger text-left">{{ $errors->first('end_date') }}</span>
                                    @endif
                                </div>
                                <div class="form-group form-floating mb-3 col-md-3">
                                    <input value="{{ old('start_time', $data->start_time ?? '') }}" type="time" class="form-control" name="start_time" placeholder="">
                                    <label for="start_time">Start Time (opsional)</label>
                                </div>
                                <div class="form-group form-floating mb-3 col-md-3">
                                    <input value="{{ old('end_time', $data->end_time ?? '') }}" type="time" class="form-control" name="end_time" placeholder="">
                                    <label for="end_time">End Time (opsional)</label>
                                </div>
                                <div class="form-group mb-3 col-md-6">
                                    <label>Device Model</label>
                                    @php
                                        $isAllDevices = $data->id ? $data->deviceModels->isEmpty() : false;
                                        $selectedDeviceIds = $data->id ? $data->deviceModels->pluck('id')->toArray() : [];
                                    @endphp
                                    <div class="mb-2">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="device_scope" id="scope_all" value="all"
                                                {{ $isAllDevices ? 'checked' : '' }}>
                                            <label class="form-check-label" for="scope_all">Semua Device</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="device_scope" id="scope_selected" value="selected"
                                                {{ !$isAllDevices ? 'checked' : '' }}>
                                            <label class="form-check-label" for="scope_selected">Pilih Device</label>
                                        </div>
                                    </div>
                                    <div id="device-select-wrapper" style="{{ $isAllDevices ? 'display:none' : '' }}">
                                        <select name="device_model_ids[]" id="device_model_ids" class="form-control select2" multiple
                                            data-placeholder="-- Pilih satu atau lebih device --">
                                            @foreach($deviceModels as $model)
                                            <option value="{{ $model->id }}"
                                                {{ in_array($model->id, old('device_model_ids', $selectedDeviceIds)) ? 'selected' : '' }}>
                                                {{ $model->brand }} {{ $model->model_name }}
                                            </option>
                                            @endforeach
                                        </select>
                                    </div>
                                    @if ($errors->has('device_model_ids'))
                                    <span class="text-danger">{{ $errors->first('device_model_ids') }}</span>
                                    @endif
                                </div>
                                <div class="form-group form-floating mb-3 col-md-3">
                                    <input value="{{ old('max_claims_per_user', $data->max_claims_per_user ?? '1') }}" type="number" class="form-control" name="max_claims_per_user" placeholder="" min="1" required>
                                    <label for="max_claims_per_user">Max Claims Per User</label>
                                    @if ($errors->has('max_claims_per_user'))
                                    <span class="text-danger text-left">{{ $errors->first('max_claims_per_user') }}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="form-group form-floating mb-3 col-md-6" id="budget-field">
                                    <input value="{{ old('total_budget_display', $data->total_budget ? number_format($data->total_budget, 0, ',', '.') : '') }}" type="text" class="form-control text-right" name="total_budget_display" id="total_budget_display" placeholder="" inputmode="numeric">
                                    <input type="hidden" name="total_budget" id="total_budget_hidden" value="{{ old('total_budget', $data->total_budget ?? '') }}">
                                    <label for="total_budget_display">Total Budget (Rp)</label>
                                    @if ($errors->has('total_budget'))
                                    <span class="text-danger text-left">{{ $errors->first('total_budget') }}</span>
                                    @endif
                                </div>
                                <div class="form-group mb-3 col-md-6">
                                    <label for="banner_image">Banner Image</label>
                                    @if($data->banner_image)
                                        <div class="mb-2">
                                            <img src="{{ asset('storage/' . $data->banner_image) }}" id="banner-preview" alt="Banner" style="max-height:120px;border-radius:6px;display:block;">
                                        </div>
                                    @else
                                        <div class="mb-2">
                                            <img id="banner-preview" src="" alt="Preview" style="max-height:120px;border-radius:6px;display:none;">
                                        </div>
                                    @endif
                                    <input type="file" class="form-control-file" name="banner_image_file" id="banner_image_file" accept="image/jpeg,image/png,image/webp,image/gif">
                                    <small class="text-muted">Format: jpg, png, webp, gif. Maks 2MB. Kosongkan jika tidak ingin mengubah gambar.</small>
                                    @if ($errors->has('banner_image_file'))
                                    <span class="text-danger text-left d-block">{{ $errors->first('banner_image_file') }}</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" name="is_active" id="is_active" value="1" {{ old('is_active', $data->is_active ?? true) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="is_active">Active</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Dynamic Configuration Section -->
                            <div id="configuration-section" style="display: none;">
                                <hr>
                                <h5>Reward Configuration</h5>
                                
                                <!-- Hadiah Langsung Configuration -->
                                <div id="hadiah-langsung-config" class="reward-config" style="display: none;">
                                    <div class="card card-outline card-info">
                                        <div class="card-header">
                                            <h3 class="card-title">Hadiah Langsung Configuration</h3>
                                            <div class="card-tools">
                                                <button type="button" class="btn btn-sm btn-primary" onclick="addReward()">
                                                    <i class="fas fa-plus"></i> Add Reward
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div id="rewards-container">
                                                <!-- Rewards will be added here dynamically -->
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Undian Configuration -->
                                <div id="undian-config" class="reward-config" style="display: none;">
                                    <div class="card card-outline card-warning">
                                        <div class="card-header">
                                            <h3 class="card-title">Undian Configuration</h3>
                                            <div class="card-tools">
                                                <button type="button" class="btn btn-sm btn-primary" onclick="addPrize()">
                                                    <i class="fas fa-plus"></i> Add Prize
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="form-group col-md-4">
                                                    <label for="draw_date">Draw Date</label>
                                                    <input type="date" class="form-control" name="configuration[draw_date]" id="draw_date" 
                                                           value="{{ old('configuration.draw_date', isset($data->configuration['draw_date']) ? $data->configuration['draw_date'] : '') }}">
                                                </div>
                                                <div class="form-group col-md-4">
                                                    <label for="coupon_quota">Kuota Kupon Undian</label>
                                                    <input type="number" class="form-control" name="configuration[coupon_quota]" id="coupon_quota"
                                                           value="{{ old('configuration.coupon_quota', isset($data->configuration['coupon_quota']) ? $data->configuration['coupon_quota'] : '') }}"
                                                           min="1" placeholder="Kosongkan = tidak terbatas">
                                                    <small class="text-muted">Kosongkan jika tidak ada batas kupon</small>
                                                </div>
                                            </div>
                                            <div id="prizes-container">
                                                <!-- Prizes will be added here dynamically -->
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Point Reward Configuration -->
                                <div id="point-reward-config" class="reward-config" style="display: none;">
                                    <div class="card card-outline card-success">
                                        <div class="card-header">
                                            <h3 class="card-title">Point Reward Configuration</h3>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="form-group col-md-4">
                                                    <label for="points_awarded">Points Didapat <span class="text-danger">*</span></label>
                                                    <input type="number" class="form-control" name="configuration[points_awarded]" id="points_awarded"
                                                           value="{{ old('configuration.points_awarded', $data->configuration['points_awarded'] ?? 0) }}"
                                                           step="1" min="0" required>
                                                    <small class="text-muted">Jumlah poin yang diterima end user saat klaim disetujui.</small>
                                                </div>
                                            </div>
                                            <hr>
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <h6 class="mb-0">Sub-Periode (opsional)</h6>
                                                <button type="button" class="btn btn-sm btn-outline-success" onclick="addSubPeriod()">
                                                    <i class="fas fa-plus"></i> Tambah Sub-Periode
                                                </button>
                                            </div>
                                            <small class="text-muted d-block mb-2">Sub-periode akan menggantikan jumlah poin utama selama rentang tanggal tersebut.</small>
                                            <div id="sub-periods-container">
                                                <!-- Sub periods will be added here dynamically -->
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>{{-- end point-reward-config --}}
                            </div>{{-- end configuration-section --}}

                            <button type="submit" class="btn btn-outline-primary"><i class="fa-regular fa-floppy-disk"></i> Save</button>
                            <a href="{{ $data->id ? route('promotions.show',$data->id) : route('promotions.index') }}" class="btn btn-outline-secondary" data='back' onclick="return notificationBeforeBack(event, this);">Back</a>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
$(document).ready(function() {
    var isSubmitting = false;

    // ── Device scope toggle ─────────────────────────────────────
    $('input[name="device_scope"]').on('change', function() {
        if ($(this).val() === 'all') {
            $('#device-select-wrapper').hide();
            $('#device_model_ids').val(null).trigger('change');
        } else {
            $('#device-select-wrapper').show();
        }
    });

    // Init Select2 multi for device models
    $('#device_model_ids').select2({
        placeholder: '-- Pilih satu atau lebih device --',
        allowClear: true,
        width: '100%',
    });

    // ── Thousand separator helpers ──────────────────────────────
    function formatRibuan(val) {
        val = String(val).replace(/\D/g, '');
        return val.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
    }
    function stripFormat(val) {
        return String(val).replace(/\./g, '');
    }

    // Total Budget masking
    $('#total_budget_display').on('input', function() {
        var raw = stripFormat($(this).val());
        $(this).val(formatRibuan(raw));
        $('#total_budget_hidden').val(raw);
    });

    // Dynamic reward value masking (event delegation)
    $(document).on('input', '.reward-value-display', function() {
        var raw = stripFormat($(this).val());
        $(this).val(formatRibuan(raw));
        var idx = $(this).data('index');
        $('.reward-value-hidden[data-index="' + idx + '"]').val(raw);
    });

    // Dynamic prize value masking (event delegation)
    $(document).on('input', '.prize-value-display', function() {
        var raw = stripFormat($(this).val());
        $(this).val(formatRibuan(raw));
        var idx = $(this).data('index');
        $('.prize-value-hidden[data-index="' + idx + '"]').val(raw);
    });

    // Sync all hidden fields before submit
    function syncAllHidden() {
        $('#total_budget_hidden').val(stripFormat($('#total_budget_display').val()));
        $('.reward-value-display').each(function() {
            var idx = $(this).data('index');
            $('.reward-value-hidden[data-index="' + idx + '"]').val(stripFormat($(this).val()));
        });
        $('.prize-value-display').each(function() {
            var idx = $(this).data('index');
            $('.prize-value-hidden[data-index="' + idx + '"]').val(stripFormat($(this).val()));
        });
    }

    // Banner image preview
    $('#banner_image_file').on('change', function() {
        var file = this.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#banner-preview').attr('src', e.target.result).show();
            };
            reader.readAsDataURL(file);
        }
    });

    // AJAX form submit
    $('#promotion-form').on('submit', function(e) {
        e.preventDefault();
        if (isSubmitting) return;

        // ── Validasi date/time ──────────────────────────────────
        var startDate = $('input[name="start_date"]').val();
        var endDate   = $('input[name="end_date"]').val();
        var startTime = $('input[name="start_time"]').val();
        var endTime   = $('input[name="end_time"]').val();

        if (startDate && endDate && endDate < startDate) {
            Swal.fire({ icon: 'warning', title: 'Validasi Gagal', text: 'End Date tidak boleh kurang dari Start Date.' });
            return;
        }

        if (startTime && endTime && endTime < startTime) {
            Swal.fire({ icon: 'warning', title: 'Validasi Gagal', text: 'End Time tidak boleh kurang dari Start Time.' });
            return;
        }

        isSubmitting = true;
        $('#loaderaditdinda').show();
        syncAllHidden();
        var form = $(this);
        var formData = new FormData(form[0]);
        $.ajax({
            type: 'POST',
            url: form.attr('action'),
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json'
        }).done(function(data) {
            Swal.fire({
                icon: data[0],
                text: data[1],
                showCancelButton: false,
                confirmButtonColor: '#6c757d',
                confirmButtonText: 'OK',
                allowOutsideClick: false
            }).then(function(result) {
                if (result.isConfirmed && data[0] === 'success') {
                    @if($data->id)
                        window.location.href = "{{ route('promotions.show', $data->id) }}";
                    @else
                        window.location.href = "{{ route('promotions.index') }}";
                    @endif
                }
            });
        }).fail(function(xhr) {
            var errorText = 'Terjadi kesalahan. Silakan coba lagi.';
            if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                var errors = xhr.responseJSON.errors;
                errorText = Object.values(errors).map(function(e){ return e[0]; }).join('\n');
            } else if (xhr.responseJSON && xhr.responseJSON.message) {
                errorText = xhr.responseJSON.message;
            }
            Swal.fire({ icon: 'error', title: 'Validasi Gagal', text: errorText });
        }).always(function() {
            isSubmitting = false;
            $('#loaderaditdinda').hide();
        });
    });

    let rewardIndex = 0;
    let prizeIndex = 0;

    // Handle reward method change
    $('#reward_method').change(function() {
        const method = $(this).val();
        $('.reward-config').hide();

        // Budget hanya wajib untuk hadiah_langsung
        if (method === 'point_reward' || method === 'undian' || method === 'hadiah_langsung') {
            $('#budget-field').hide();
            $('#total_budget_hidden').val('0');
            $('#total_budget_display').val('');
        } else {
            $('#budget-field').show();
        }

        if (method) {
            $('#configuration-section').show();

            if (method === 'hadiah_langsung') {
                $('#hadiah-langsung-config').show();
                loadExistingRewards();
            } else if (method === 'undian') {
                $('#undian-config').show();
                loadExistingPrizes();
            } else if (method === 'point_reward') {
                $('#point-reward-config').show();
                loadExistingSubPeriods();
            }
        } else {
            $('#configuration-section').hide();
        }
    });

    // Trigger change on page load if method is already selected
    // NOTE: moved to end of ready() so addReward/addPrize are defined first
    // (see bottom of this script block)

    // Check overlap when dates or device model change
    $('#start_date, #end_date, #device_model_id').change(function() {
        checkOverlap();
    });

    function checkOverlap() {
        const deviceModelId = $('#device_model_id').val();
        const startDate = $('#start_date').val();
        const endDate = $('#end_date').val();
        const excludeId = {{ $data->id ?: 'null' }};

        if (deviceModelId && startDate && endDate) {
            $.post('{{ route("promotions.check-overlap") }}', {
                device_model_id: deviceModelId,
                start_date: startDate,
                end_date: endDate,
                exclude_id: excludeId,
                _token: '{{ csrf_token() }}'
            }).done(function(response) {
                if (response.has_overlap) {
                    alert('Warning: ' + response.message);
                }
            });
        }
    }

    function loadExistingRewards() {
        $('#rewards-container').empty();
        rewardIndex = 0;
        @if($data->id && $data->reward_method === 'hadiah_langsung')
            @foreach($data->rewards as $index => $reward)
                addReward(
                    {{ $index }},
                    '{{ addslashes($reward->type) }}',
                    '{{ addslashes($reward->name) }}',
                    {{ $reward->value }},
                    {{ $reward->probability }},
                    {{ $reward->allocated_stock ?? "''" }}
                );
            @endforeach
        @endif
    }

    function loadExistingPrizes() {
        @if(isset($data->configuration['prizes']))
            @foreach($data->configuration['prizes'] as $index => $prize)
                addPrize({{ $index }}, '{{ $prize['name'] ?? '' }}', {{ $prize['quantity'] ?? 0 }}, {{ $prize['value'] ?? 0 }});
            @endforeach
        @endif
    }

    let subPeriodIndex = 0;

    function loadExistingSubPeriods() {
        @if(isset($data->configuration['sub_periods']))
            @foreach($data->configuration['sub_periods'] as $index => $sp)
                addSubPeriod({{ $index }}, '{{ $sp['start_date'] ?? '' }}', '{{ $sp['end_date'] ?? '' }}', {{ $sp['points_awarded'] ?? 0 }});
            @endforeach
        @endif
    }

    window.addSubPeriod = function(index = null, startDate = '', endDate = '', points = 0) {
        if (index === null) {
            index = subPeriodIndex++;
        }
        const html = `
            <div class="sub-period-item border p-3 mb-2 bg-light" data-index="${index}">
                <div class="row align-items-end">
                    <div class="col-md-3">
                        <label>Start Date</label>
                        <input type="date" class="form-control" name="configuration[sub_periods][${index}][start_date]" value="${startDate}" required>
                    </div>
                    <div class="col-md-3">
                        <label>End Date</label>
                        <input type="date" class="form-control" name="configuration[sub_periods][${index}][end_date]" value="${endDate}" required>
                    </div>
                    <div class="col-md-3">
                        <label>Points Didapat</label>
                        <input type="number" class="form-control" name="configuration[sub_periods][${index}][points_awarded]" value="${points}" step="1" min="0" required>
                    </div>
                    <div class="col-md-3">
                        <button type="button" class="btn btn-danger btn-block" onclick="removeSubPeriod(${index})">
                            <i class="fas fa-trash"></i> Hapus
                        </button>
                    </div>
                </div>
            </div>
        `;
        $('#sub-periods-container').append(html);
    };

    window.removeSubPeriod = function(index) {
        $(`.sub-period-item[data-index="${index}"]`).remove();
    };

    window.addReward = function(index = null, type = '', name = '', value = 0, probability = 0, stock = '') {
        if (index === null) {
            index = rewardIndex++;
        }
        const displayValue = value ? Number(value).toLocaleString('id-ID') : '';
        const html = `
            <div class="reward-item border p-3 mb-3" data-index="${index}">
                <div class="row">
                    <div class="col-md-2">
                        <label>Tipe Reward</label>
                        <input type="text" class="form-control" name="configuration[rewards][${index}][type]" value="${type}" placeholder="instant" required>
                    </div>
                    <div class="col-md-3">
                        <label>Nama Reward</label>
                        <input type="text" class="form-control" name="configuration[rewards][${index}][name]" value="${name}" required>
                    </div>
                    <div class="col-md-2">
                        <label>Nilai (Rp)</label>
                        <input type="text" class="form-control text-right reward-value-display" data-index="${index}" value="${displayValue}" inputmode="numeric" required>
                        <input type="hidden" name="configuration[rewards][${index}][value]" class="reward-value-hidden" data-index="${index}" value="${value}">
                    </div>
                    <div class="col-md-2">
                        <label>Probabilitas (%)</label>
                        <input type="number" class="form-control text-right" name="configuration[rewards][${index}][probability]" value="${probability}" step="0.01" min="0" max="100" required
                            oninput="this.value = Math.min(100, Math.max(0, parseFloat(this.value) || 0))">
                    </div>
                    <div class="col-md-2">
                        <label>Alokasi Stok</label>
                        <input type="number" class="form-control text-right" name="configuration[rewards][${index}][stock]" value="${stock}" min="0" placeholder="∞ Tidak terbatas">
                        <small class="text-muted">Kosong = tidak terbatas</small>
                    </div>
                    <div class="col-md-1">
                        <label>&nbsp;</label>
                        <button type="button" class="btn btn-danger btn-block" onclick="removeReward(${index})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
        $('#rewards-container').append(html);
    };

    window.removeReward = function(index) {
        $(`.reward-item[data-index="${index}"]`).remove();
    };

    window.addPrize = function(index = null, name = '', quantity = 0, value = 0) {
        if (index === null) {
            index = prizeIndex++;
        }
        const displayValue = value ? Number(value).toLocaleString('id-ID') : '';
        const html = `
            <div class="prize-item border p-3 mb-3" data-index="${index}">
                <div class="row">
                    <div class="col-md-4">
                        <label>Prize Name</label>
                        <input type="text" class="form-control" name="configuration[prizes][${index}][name]" value="${name}" required>
                    </div>
                    <div class="col-md-3">
                        <label>Quantity</label>
                        <input type="number" class="form-control text-right" name="configuration[prizes][${index}][quantity]" value="${quantity}" min="1" required>
                    </div>
                    <div class="col-md-3">
                        <label>Value (Rp)</label>
                        <input type="text" class="form-control text-right prize-value-display" data-index="${index}" value="${displayValue}" inputmode="numeric" required>
                        <input type="hidden" name="configuration[prizes][${index}][value]" class="prize-value-hidden" data-index="${index}" value="${value}">
                    </div>
                    <div class="col-md-2">
                        <label>&nbsp;</label>
                        <button type="button" class="btn btn-danger btn-block" onclick="removePrize(${index})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        `;
        $('#prizes-container').append(html);
    };

    window.removePrize = function(index) {
        $(`.prize-item[data-index="${index}"]`).remove();
    };

    // Trigger change on page load AFTER all functions are defined
    if ($('#reward_method').val()) {
        $('#reward_method').trigger('change');
    }
});
</script>
@endsection