@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="alert alert-info">
                                                <i class="fas fa-info-circle"></i> <strong>Perhitungan Otomatis</strong><br>
                                                Point reward akan dihitung otomatis berdasarkan <strong>RRP Price × Point Rate</strong>.<br>
                                                <small>
                                                    • <strong>Points Awarded</strong> = berapa point per 1000 rupiah<br>
                                                    • <strong>Sub-Periode</strong> menggunakan rate khusus untuk periode tertentu
                                                </small>
                                            </div>
                                            
                                            <div class="row">
                                                <div class="form-group col-md-6">
                                                    <label for="points_awarded">Points Awarded (per 1000 rupiah) <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'] ?? 1) }}"
                                                           step="0.1" min="0" required>
                                                    <small class="text-muted">
                                                        Contoh: 1 = 1 point per 1000 rupiah | 2.5 = 2.5 points per 1000 rupiah
                                                    </small>
                                                </div>
                                                <div class="form-group col-md-6">
                                                    <label for="rounding_mode">Rounding Mode <span class="text-danger">*</span></label>
                                                    <select class="form-control" name="configuration[rounding_mode]" id="rounding_mode" required>
                                                        <option value="PHP_ROUND_HALF_UP" {{ old('configuration.rounding_mode', $data->configuration['rounding_mode'] ?? 'PHP_ROUND_HALF_UP') == 'PHP_ROUND_HALF_UP' ? 'selected' : '' }}>
                                                            Round Half Up (0.5 → 1)
                                                        </option>
                                                        <option value="PHP_ROUND_HALF_DOWN" {{ old('configuration.rounding_mode', $data->configuration['rounding_mode'] ?? '') == 'PHP_ROUND_HALF_DOWN' ? 'selected' : '' }}>
                                                            Round Half Down (0.5 → 0)
                                                        </option>
                                                        <!-- <option value="PHP_ROUND_HALF_EVEN" {{ old('configuration.rounding_mode', $data->configuration['rounding_mode'] ?? '') == 'PHP_ROUND_HALF_EVEN' ? 'selected' : '' }}>
                                                            Round Half Even (Banker's Rounding)
                                                        </option>
                                                        <option value="PHP_ROUND_HALF_ODD" {{ old('configuration.rounding_mode', $data->configuration['rounding_mode'] ?? '') == 'PHP_ROUND_HALF_ODD' ? 'selected' : '' }}>
                                                            Round Half Odd
                                                        </option> -->
                                                    </select>
                                                    <small class="text-muted">Metode pembulatan untuk hasil perhitungan</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 menggunakan <strong>Points Awarded khusus</strong> untuk perhitungan point 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 }},
                    {!! json_encode($reward->type ?? '') !!},
                    {!! json_encode($reward->name) !!},
                    {{ $reward->value }},
                    {{ $reward->probability }},
                    {{ $reward->allocated_stock ?? 'null' }},
                    {{ $reward->reward_item_id ?? 'null' }}
                );
            @endforeach
        @endif
    }

    function loadExistingPrizes() {
        @if($data->id && $data->reward_method === 'undian')
            @php
                // Use promotion_rewards table as primary source (more reliable)
                $prizes = $data->rewards->where('type', 'prize');
            @endphp
            @if($prizes->count() > 0)
                @foreach($prizes as $index => $prize)
                    addPrize(
                        {{ $index }},
                        {!! json_encode($prize->name) !!},
                        {{ $prize->allocated_stock ?? 0 }},
                        {{ $prize->value ?? 0 }},
                        {{ $prize->reward_item_id ?? 'null' }}
                    );
                @endforeach
            @elseif(isset($data->configuration['prizes']))
                {{-- Fallback to configuration JSON if no records in promotion_rewards --}}
                @foreach($data->configuration['prizes'] as $index => $prize)
                    addPrize(
                        {{ $index }},
                        {!! json_encode($prize['name'] ?? '') !!},
                        {{ $prize['quantity'] ?? 0 }},
                        {{ $prize['value'] ?? 0 }},
                        {{ $prize['reward_item_id'] ?? 'null' }}
                    );
                @endforeach
            @endif
        @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'] ?? 1 }});
            @endforeach
        @endif
    }

    window.addSubPeriod = function(index = null, startDate = '', endDate = '', points = 0) {
        if (index === null) {
            index = subPeriodIndex++;
        }
        // Get promotion period from header for min/max constraint
        const promoStartDate = $('input[name="start_date"]').val() || '';
        const promoEndDate = $('input[name="end_date"]').val() || '';

        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 <span class="text-danger">*</span></label>
                        <input type="date" class="form-control sub-period-start" name="configuration[sub_periods][${index}][start_date]" value="${startDate}" min="${promoStartDate}" max="${promoEndDate}" required>
                    </div>
                    <div class="col-md-3">
                        <label>End Date <span class="text-danger">*</span></label>
                        <input type="date" class="form-control sub-period-end" name="configuration[sub_periods][${index}][end_date]" value="${endDate}" min="${startDate || promoStartDate}" max="${promoEndDate}" required>
                    </div>
                    <div class="col-md-3">
                        <label>Points Awarded (per 1000 Rupiah) <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" name="configuration[sub_periods][${index}][points_awarded]" value="${points}" step="0.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>
                <small class="text-muted mt-1 d-block">Sub-periode harus dalam rentang periode promosi (${promoStartDate} s/d ${promoEndDate})</small>
            </div>
        `;
        $('#sub-periods-container').append(html);
    };

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

    // Update sub-period date constraints when promotion period changes
    $(document).on('change', 'input[name="start_date"], input[name="end_date"]', function() {
        const promoStart = $('input[name="start_date"]').val();
        const promoEnd = $('input[name="end_date"]').val();
        
        // Update all sub-period date inputs
        $('.sub-period-start').attr('min', promoStart).attr('max', promoEnd);
        $('.sub-period-end').attr('max', promoEnd);
        
        // Update hint text
        $('.sub-period-item small.text-muted').each(function() {
            $(this).text(`Sub-periode harus dalam rentang periode promosi (${promoStart} s/d ${promoEnd})`);
        });
    });

    // Update sub-period end_date min when start_date changes
    $(document).on('change', '.sub-period-start', function() {
        const startVal = $(this).val();
        const $endInput = $(this).closest('.row').find('.sub-period-end');
        $endInput.attr('min', startVal);
        
        // If current end_date is before new start, reset it
        if ($endInput.val() && $endInput.val() < startVal) {
            $endInput.val(startVal);
        }
    });

    window.addReward = function(index = null, type = '', name = '', value = 0, probability = 0, stock = '', rewardItemId = '') {
        if (index === null) {
            index = rewardIndex++;
        }
        const displayValue = value ? Number(value).toLocaleString('id-ID') : '';

        // Build reward item options
        let itemOptions = '<option value="">-- Pilih dari Master Item --</option>';
        @foreach(\App\Models\RewardItem::active()->where(function($q) { $q->whereNull('usage_type')->orWhere('usage_type', 'promotion'); })->orderBy('name')->get() as $ri)
        @php
            $hasMappingAttr = $ri->isDigital() ? ($ri->hasOperatorMapping() ? 'true' : 'false') : 'true';
        @endphp
        itemOptions += `<option value="{{ $ri->id }}"
            data-name="{{ json_encode($ri->name) }}"
            data-reward-type="{{ $ri->reward_type }}"
            data-item-code="{{ $ri->item_code ?? '' }}"
            data-nominal="{{ $ri->nominal ?? '' }}"
            data-has-mapping="{{ $hasMappingAttr }}"
            ${rewardItemId == '{{ $ri->id }}' ? 'selected' : ''}>
            {{ $ri->name }} ({{ ucfirst($ri->reward_type) }}){{ $ri->item_code ? ' [' . $ri->item_code . ']' : '' }}{{ $ri->nominal ? ' — Rp ' . number_format($ri->nominal, 0, ',', '.') : '' }}{{ $ri->isDigital() && !$ri->hasOperatorMapping() ? ' ⚠️ Belum di-mapping' : '' }}
        </option>`;
        @endforeach

        const html = `
            <div class="reward-item border p-3 mb-3" data-index="${index}">
                <div class="row">
                    <div class="col-md-4">
                        <label>Item Reward <span class="text-danger">*</span></label>
                        <select class="form-control reward-item-select" name="configuration[rewards][${index}][reward_item_id]"
                            data-index="${index}" required>
                            ${itemOptions}
                        </select>
                        <small class="text-muted reward-type-info-${index}"></small>
                    </div>
                    <div class="col-md-2">
                        <label>Nama Reward</label>
                        <input type="text" class="form-control reward-name-input bg-light" name="configuration[rewards][${index}][name]"
                            data-index="${index}" value="${name}" required placeholder="Otomatis dari item" readonly>
                    </div>
                    <div class="col-md-2">
                        <label>Nominal (Rp)</label>
                        <input type="text" class="form-control text-right reward-value-display bg-light" data-index="${index}" value="${displayValue}" inputmode="numeric" readonly>
                        <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-1">
                        <label>Stok</label>
                        <input type="number" class="form-control text-right" name="configuration[rewards][${index}][stock]" value="${stock}" min="0" placeholder="∞">
                        <small class="text-muted">Kosong=∞</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);

        // Auto-fill nama & nominal saat pilih item
        $(document).off('change', `.reward-item-select[data-index="${index}"]`)
            .on('change', `.reward-item-select[data-index="${index}"]`, function() {
                const opt = $(this).find('option:selected');
                const itemName   = opt.data('name') || '';
                const rewardType = opt.data('reward-type') || '';
                const itemCode   = opt.data('item-code') || '';
                const nominal    = opt.data('nominal') || '';
                const hasMapping = opt.data('has-mapping');
                
                $(`.reward-name-input[data-index="${index}"]`).val(itemName);
                
                // Auto-fill nominal jika ada
                if (nominal) {
                    const formatted = Number(nominal).toLocaleString('id-ID');
                    $(`.reward-value-display[data-index="${index}"]`).val(formatted);
                    $(`.reward-value-hidden[data-index="${index}"]`).val(nominal);
                }
                
                // Show type info and mapping warning
                const typeLabel = { pickup: 'Pickup', kurir: 'Kurir', digital: 'Digital', 'non-digital': 'Non-Digital' }[rewardType] || '';
                let infoText = typeLabel ? `Tipe: ${typeLabel}${itemCode ? ' | Kode: ' + itemCode : ''}` : '';
                
                if (rewardType === 'digital' && hasMapping === 'false') {
                    infoText += ' ⚠️ <span class="text-danger font-weight-bold">Belum di-mapping dengan operator!</span>';
                }
                
                $(`.reward-type-info-${index}`).html(infoText);
            });

        // Trigger untuk tampilkan info jika sudah ada nilai
        if (rewardItemId) {
            $(`.reward-item-select[data-index="${index}"]`).trigger('change');
        }
    };

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

    window.addPrize = function(index = null, name = '', quantity = 0, value = 0, rewardItemId = '') {
        if (index === null) {
            index = prizeIndex++;
        }
        const displayValue = value ? Number(value).toLocaleString('id-ID') : '';

        // Build reward item options
        let itemOptions = '<option value="">-- Pilih dari Master Item (opsional) --</option>';
        @foreach(\App\Models\RewardItem::active()->where(function($q) { $q->whereNull('usage_type')->orWhere('usage_type', 'promotion'); })->orderBy('name')->get() as $ri)
        @php
            $hasMappingAttr = $ri->isDigital() ? ($ri->hasOperatorMapping() ? 'true' : 'false') : 'true';
        @endphp
        itemOptions += `<option value="{{ $ri->id }}"
            data-name="{{ json_encode($ri->name) }}"
            data-reward-type="{{ $ri->reward_type }}"
            data-item-code="{{ $ri->item_code ?? '' }}"
            data-nominal="{{ $ri->nominal ?? '' }}"
            data-has-mapping="{{ $hasMappingAttr }}"
            ${rewardItemId == '{{ $ri->id }}' ? 'selected' : ''}>
            {{ $ri->name }} ({{ ucfirst($ri->reward_type) }}){{ $ri->item_code ? ' [' . $ri->item_code . ']' : '' }}{{ $ri->nominal ? ' — Rp ' . number_format($ri->nominal, 0, ',', '.') : '' }}{{ $ri->isDigital() && !$ri->hasOperatorMapping() ? ' ⚠️ Belum di-mapping' : '' }}
        </option>`;
        @endforeach

        const html = `
            <div class="prize-item border p-3 mb-3" data-index="${index}">
                <div class="row">
                    <div class="col-md-4">
                        <label>Item Reward (Master)</label>
                        <select class="form-control prize-item-select" name="configuration[prizes][${index}][reward_item_id]"
                            data-index="${index}">
                            ${itemOptions}
                        </select>
                        <small class="text-muted prize-type-info-${index}"></small>
                    </div>
                    <div class="col-md-3">
                        <label>Nama Hadiah <span class="text-danger">*</span></label>
                        <input type="text" class="form-control prize-name-input bg-light" name="configuration[prizes][${index}][name]"
                            data-index="${index}" value="${name}" required placeholder="Otomatis dari item" readonly>
                    </div>
                    <div class="col-md-2">
                        <label>Jumlah <span class="text-danger">*</span></label>
                        <input type="number" class="form-control text-right" name="configuration[prizes][${index}][quantity]" value="${quantity}" min="1" required>
                    </div>
                    <div class="col-md-2">
                        <label>Nominal (Rp)</label>
                        <input type="text" class="form-control text-right prize-value-display bg-light" data-index="${index}" value="${displayValue}" inputmode="numeric" readonly>
                        <input type="hidden" name="configuration[prizes][${index}][value]" class="prize-value-hidden" data-index="${index}" value="${value}">
                    </div>
                    <div class="col-md-1">
                        <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);

        // Auto-fill nama & nominal saat pilih item
        $(document).off('change', `.prize-item-select[data-index="${index}"]`)
            .on('change', `.prize-item-select[data-index="${index}"]`, function() {
                const opt = $(this).find('option:selected');
                const itemName   = opt.data('name') || '';
                const rewardType = opt.data('reward-type') || '';
                const itemCode   = opt.data('item-code') || '';
                const nominal    = opt.data('nominal') || '';
                const hasMapping = opt.data('has-mapping');
                
                if (itemName) $(`.prize-name-input[data-index="${index}"]`).val(itemName);
                
                // Auto-fill nominal jika ada
                if (nominal) {
                    const formatted = Number(nominal).toLocaleString('id-ID');
                    $(`.prize-value-display[data-index="${index}"]`).val(formatted);
                    $(`.prize-value-hidden[data-index="${index}"]`).val(nominal);
                }
                
                // Show type info and mapping warning
                const typeLabel = { pickup: 'Pickup', kurir: 'Kurir', digital: 'Digital', 'non-digital': 'Non-Digital' }[rewardType] || '';
                let infoText = typeLabel ? `Tipe: ${typeLabel}${itemCode ? ' | Kode: ' + itemCode : ''}` : '';
                
                if (rewardType === 'digital' && hasMapping === 'false') {
                    infoText += ' ⚠️ <span class="text-danger font-weight-bold">Belum di-mapping dengan operator!</span>';
                }
                
                $(`.prize-type-info-${index}`).html(infoText);
            });

        if (rewardItemId) {
            $(`.prize-item-select[data-index="${index}"]`).trigger('change');
        }
    };

    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