@extends('layouts.master')
@section('title')
    @lang('translation.manage-digital-assets')
@endsection

@section('css')
    <!-- Select2 css-->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" href="{{ URL::asset('/assets/css/datepicker.min.css') }}">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
@endsection

@section('content')
    <!-- Breadcrumb Trail -->
    @component('components.breadcrumb')
        @slot('li_1')
            @lang('translation.manage-digital-assets')
        @endslot
        @slot('title')
            @lang('translation.add')
        @endslot
    @endcomponent

    <!-- Session Messages -->
    @include('partials.session')

    <!-- Add Form -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title mb-0">Add Digital Assets</h1>
                </div>
                <div class="card-body">
                    <div class="row">
                        <form method="POST" action="{{ url('digital-assets/store') }}" enctype="multipart/form-data">
                            @csrf
                            <div class="row">
                                <div class="col-md-6 form-group mb-3">
                                    <label for="name" class="form-label">Name</label>
                                    <input type="text" class="form-control" name="name" id="name" value="{{ old('name') }}" required>
                                </div>
                                <div class="col-md-6 form-group mb-3">
                                    <label for="price" class="form-label">Price</label>
                                    <input type="number" class="form-control" name="price" id="price" value="{{ old('price') }}" step="0.01" required>
                                </div>
                                <div class="col-md-6 form-group mb-3">
                                    <label for="quantity" class="form-label">Quantity</label>
                                    <input type="number" class="form-control" name="quantity" id="quantity" value="{{ old('quantity') }}" required>
                                </div>
                                <div class="col-md-6 form-group mb-3">
                                    <label for="label" class="form-label">Label</label>
                                    <input type="text" class="form-control" name="label" id="label" value="{{ old('label') }}">
                                </div>
                                <div class="col-md-12 form-group mb-3">
                                    <label for="image" class="form-label">Image</label>
                                    <input type="file" class="form-control" name="image" required>
                                </div>
                            </div>
                            <hr>
                            <h5>Free Item Details</h5>
                            <hr>
                            <div class="row">
                                <div class="col-md-6 form-group mb-3">
                                    <label for="free_item_type" class="form-label">Select Digital Asset Type</label>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="free_item_type" id="freeItemNone" value="{{\App\Models\DigitalAsset::FreeItemNone}}" checked>
                                        <label class="form-check-label" for="freeItemNone">None</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="free_item_type" id="freeItem" value="{{\App\Models\DigitalAsset::FreeItem}}">
                                        <label class="form-check-label" for="freeItem">Free Item</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="free_item_type" id="freeItemUserSelect" value="{{\App\Models\DigitalAsset::FreeItemUserSelect}}">
                                        <label class="form-check-label" for="freeItemUserSelect">Free Item User Select</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="free_item_type" id="freeItemBundle" value="{{\App\Models\DigitalAsset::FreeItemBundle}}">
                                        <label class="form-check-label" for="freeItemBundle">Free Item Bundle</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Free Item Section -->
                            <div id="freeItemSection" class="free-item-section d-none">
                                {{-- Your first block --}}
                                <div class="row">
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="item_quantity_for_free_item" class="form-label">Quantity of the product required to receive free items</label>
                                        <input type="number" class="form-control" name="item_quantity_for_free_item" id="item_quantity_for_free_item_1"
                                               value="{{ old('item_quantity_for_free_item') ?? 1 }}" min="1">
                                    </div>
                                </div>
                                <div id="free-items-wrapper-1">
                                    <div class="free-item-entry row mb-3">
                                        <div class="col-md-6">
                                            <select class="form-control" name="free_items[0][id]">
                                                <option value="">Select an asset</option>
                                                @foreach($assets as $asset)
                                                    <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <input type="number" class="form-control" name="free_items[0][quantity]" min="1" value="1" required>
                                        </div>
                                        <div class="col-md-1 d-flex align-items-center">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="free_items[0][highlight]" value="1" id="highlight_0">
                                                <label class="form-check-label" for="highlight_0">Highlight</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <button type="button" class="btn btn-danger remove-free-item">Remove</button>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" id="add-free-item-1" class="btn btn-primary">Add Another Free Item</button>
                            </div>

                            <!-- Free Item User Select Section -->
                            <div id="userSelectSection" class="free-item-section d-none">
                                <div class="row">
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="item_quantity_for_free_item" class="form-label">Quantity of the product required to receive free items</label>
                                        <input type="number" class="form-control" name="item_quantity_for_free_item" id="item_quantity_for_free_item_2"
                                               value="{{ old('item_quantity_for_free_item') ?? 1 }}" min="1" required>
                                    </div>
                                    <div class="col-md-3 form-group mb-3">
                                        <label for="redeemable_items" class="form-label">Redeemable Items</label>
                                        <input type="number" class="form-control" name="redeemable_items" id="redeemable_items" value="{{ old('redeemable_items') ?? 0 }}"
                                               min="0" required>
                                        @if($errors->has('redeemable_items'))
                                            <div class="text-danger">{{ $errors->first('redeemable_items') }}</div>
                                        @endif
                                        <div id="redeemable_items_error" class="text-danger d-none"></div>
                                    </div>
                                </div>
                                <div id="free-items-wrapper-2">
                                    <div class="free-item-entry row mb-3">
                                        <div class="col-md-6">
                                            <select class="form-control" name="user_select_items[0][id]">
                                                <option value="">Select an asset</option>
                                                @foreach($assets as $asset)
                                                    <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-2">
                                            <input type="number" class="form-control" name="user_select_items[0][quantity]" min="1" value="1" required>
                                        </div>
                                        <div class="col-md-1 d-flex align-items-center">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="user_select_items[0][highlight]" value="1" id="highlight_0">
                                                <label class="form-check-label" for="highlight_0">Highlight</label>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <button type="button" class="btn btn-danger remove-free-item">Remove</button>
                                        </div>
                                    </div>

                                </div>
                                <button type="button" id="add-free-item-2" class="btn btn-primary">Add Another Free Item</button>
                            </div>

                            <!-- Free Item Bundle Section -->
                            <div id="bundleSection" class="free-item-section d-none">
                                <div class="row">
                                    <div class="col-md-6 form-group mb-3">
                                        <label for="item_quantity_for_free_item" class="form-label">Quantity of the product required to receive free bundles</label>
                                        <input type="number" class="form-control" name="item_quantity_for_free_bundle" id="item_quantity_for_free_bundle"
                                               value="{{ old('item_quantity_for_free_bundle') ?? 1 }}" min="1">
                                    </div>
                                    <div class="col-md-3 form-group mb-3">
                                        <label for="redeemable_bundles" class="form-label">Redeemable Bundles</label>
                                        <input type="number" class="form-control" name="redeemable_bundles" id="redeemable_bundles" value="{{ old('redeemable_bundles') ?? 0 }}"
                                               min="0" required>
                                        @if($errors->has('redeemable_bundles'))
                                            <div class="text-danger">{{ $errors->first('redeemable_bundles') }}</div>
                                        @endif
                                        <div id="redeemable_bundles_error" class="text-danger d-none"></div>
                                    </div>
                                </div>

                                <div id="bundles-wrapper">
                                    <div class="bundle-entry mb-4">
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label for="bundle_name_0" class="form-label">Bundle Name</label>
                                                <input type="text" class="form-control" name="bundles[0][name]" id="bundle_name_0" placeholder="Enter bundle name">
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label">&nbsp;</label>
                                                <button type="button" class="btn btn-success d-block add-bundle-item">Add Item to Bundle</button>
                                            </div>
                                            <div class="col-md-3">
                                                <label class="form-label">&nbsp;</label>
                                                <button type="button" class="btn btn-danger d-block remove-bundle d-none">Remove Bundle</button>
                                            </div>
                                        </div>
                                        <div class="bundle-items-wrapper">
                                            <div class="bundle-item row mb-3">
                                                <div class="col-md-6">
                                                    <select class="form-control" name="bundles[0][items][0][id]">
                                                        <option value="">Select an asset</option>
                                                        @foreach($assets as $asset)
                                                            <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-2">
                                                    <input type="number" class="form-control" name="bundles[0][items][0][quantity]" min="1" value="1" placeholder="Quantity" required>
                                                </div>
                                                <div class="col-md-1 d-flex align-items-center">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="bundles[0][items][0][highlight]" value="1" id="highlight_0">
                                                        <label class="form-check-label" for="highlight_0">Highlight</label>
                                                    </div>
                                                </div>
                                                <div class="col-md-3">
                                                    <button type="button" class="btn btn-danger remove-bundle-item d-none">Remove Item</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <button type="button" id="add-bundle" class="btn btn-primary">Add Another Bundle</button>
                            </div>
                            <hr>
                            <h5>Additional Options</h5>
                            <hr>
                            <div class="row">
                                <div class="col-md-6 form-group mb-3">
                                    <label for="exchangeable" class="form-label">Exchangeable</label>
                                    <select name="exchangeable" class="form-control" id="exchangeable">
                                        <option value="1" {{ old('exchangeable') == '1' ? 'selected' : '' }}>Yes</option>
                                        <option value="0" {{ old('exchangeable') == '0' ? 'selected' : '' }}>No</option>
                                    </select>
                                </div>
                                <div class="col-md-6 form-group mb-3">
                                    <label for="giftable" class="form-label">Giftable</label>
                                    <select name="giftable" class="form-control" id="giftable">
                                        <option value="1" {{ old('giftable') == '1' ? 'selected' : '' }}>Yes</option>
                                        <option value="0" {{ old('giftable') == '0' ? 'selected' : '' }}>No</option>
                                    </select>
                                </div>
                                <div class="col-md-12 form-group mb-2">
                                    <a style="margin-right:3px;" href="{{ url('digital-assets/list') }}" class="btn btn-danger btn-sm">Cancel</a>
                                    <input type="submit" class="btn btn-success btn-sm">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- Select2 cdn -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="{{ URL::asset('assets/js/pages/select2.init.js') }}"></script>
    <!-- Input Mask -->
    <script src="{{ URL::asset('assets/libs/cleave.js/cleave.js.min.js') }}"></script>
    <script src="{{ URL::asset('assets/js/pages/form-masks.init.js') }}"></script>
    <!-- App JS -->
    <script src="{{ URL::asset('/assets/js/app.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/nicEdit.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/datepicker.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/datepicker.en.js') }}"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
    <script>
        // bkLib.onDomLoaded(function() {
        $(".nicEdit").each(function (index) {
            $(this).attr("id", "nicEditor" + index);
            new nicEditor({fullPanel: true}).panelInstance('nicEditor' + index, {hasPanel: true});
        });
        // });
        (function ($) {
            $(document).on('mouseover ', '.nicEdit-main,.nicEdit-panelContain', function () {
                $('.nicEdit-main').focus();
            });
        })(jQuery);

        $(document).ready(function () {
            // Initialize datepicker if not already set
            if (!$('.datepicker-here').val()) {
                $('.datepicker-here').datepicker();
            }

            // Initialize free item type radio buttons
            $('input[name="free_item_type"]').on('change', function () {
                let selected = $(this).val();

                // Hide all sections first
                $('.free-item-section').addClass('d-none');

                // Show the appropriate section based on selection
                if (selected === 'free_item') {
                    $('#freeItemSection').removeClass('d-none');
                    $('#userSelectSection, #bundleSection').addClass('d-none');

                    $('#userSelectSection :input, #bundleSection :input').removeAttr('required');
                } else if (selected === 'free_item_user_select') {
                    $('#userSelectSection').removeClass('d-none');
                    $('#freeItemSection, #bundleSection').addClass('d-none');

                    $('#freeItemSection :input, #bundleSection :input').removeAttr('required');
                } else if (selected === 'free_item_bundle') {
                    $('#bundleSection').removeClass('d-none');
                    $('#freeItemSection, #userSelectSection').addClass('d-none');

                    $('#bundleSection :input').not('[id^="highlight"]').attr('required', true);
                    $('#freeItemSection :input, #userSelectSection :input').removeAttr('required');
                } else {
                    $('#freeItemSection, #userSelectSection, #bundleSection').addClass('d-none');
                    $('#freeItemSection :input, #userSelectSection :input, #bundleSection :input').removeAttr('required');
                }
            });
        });

        // Initialize timepicker
        $('.timepicker').timepicker({
            timeFormat: 'h:mm p',
            interval: 30,
            dynamic: false,
            dropdown: true,
            scrollbar: false
        });

        // Track free item indices for different sections
        let freeItemIndex1 = 1;
        let freeItemIndex2 = 1;
        let bundleIndex = 1;

        // Add free item for section 1
        $(document).on('click', '#add-free-item-1', function () {
            let $wrapper = $('#free-items-wrapper-1');
            let newEntry = `
        <div class="free-item-entry row mb-3">
            <div class="col-md-6">
                <select class="form-control" name="free_items[${freeItemIndex1}][id]">
                    <option value="">Select an asset</option>
                    @foreach($assets as $asset)
            <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                    @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <input type="number" class="form-control" name="free_items[${freeItemIndex1}][quantity]" min="1" value="1">
            </div>
            <div class="col-md-1 d-flex align-items-center">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="free_items[${freeItemIndex1}][highlight]" value="1" id="highlight_${freeItemIndex1}">
                                                <label class="form-check-label" for="highlight_${freeItemIndex1}">Highlight</label>
                                            </div>
                                        </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-danger remove-free-item">Remove</button>
            </div>
        </div>`;
            $wrapper.append(newEntry);
            freeItemIndex1++;
            updateRedeemableValidation();
        });

        // Add free item for section 2
        $(document).on('click', '#add-free-item-2', function () {
            let $wrapper = $('#free-items-wrapper-2');
            let newEntry = `
        <div class="free-item-entry row mb-3">
            <div class="col-md-6">
                <select class="form-control" name="user_select_items[${freeItemIndex2}][id]">
                    <option value="">Select an asset</option>
                    @foreach($assets as $asset)
            <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                    @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <input type="number" class="form-control" name="user_select_items[${freeItemIndex2}][quantity]" min="1" value="1">
            </div>
            <div class="col-md-1 d-flex align-items-center">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" name="user_select_items[${freeItemIndex2}][highlight]" value="1" id="highlight_${freeItemIndex2}">
                                                <label class="form-check-label" for="highlight_${freeItemIndex2}">Highlight</label>
                                            </div>
                                        </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-danger remove-free-item">Remove</button>
            </div>
        </div>`;
            $wrapper.append(newEntry);
            freeItemIndex2++;
            updateRedeemableValidation();
        });

        // Bundle functionality
        // Add a new bundle
        $(document).on('click', '#add-bundle', function() {
            let $wrapper = $('#bundles-wrapper');
            let newBundle = `
        <div class="bundle-entry mb-4">
            <div class="row mb-3">
                <div class="col-md-6">
                    <label for="bundle_name_${bundleIndex}" class="form-label">Bundle Name</label>
                    <input type="text" class="form-control" name="bundles[${bundleIndex}][name]" id="bundle_name_${bundleIndex}" placeholder="Enter bundle name" required>
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <button type="button" class="btn btn-success d-block add-bundle-item">Add Item to Bundle</button>
                </div>
                <div class="col-md-3">
                    <label class="form-label">&nbsp;</label>
                    <button type="button" class="btn btn-danger d-block remove-bundle">Remove Bundle</button>
                </div>
            </div>
            <div class="bundle-items-wrapper">
                <div class="bundle-item row mb-3">
                    <div class="col-md-6">
                        <select class="form-control" name="bundles[${bundleIndex}][items][0][id]" required>
                            <option value="">Select an asset</option>
                            @foreach($assets as $asset)
            <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                            @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <input type="number" class="form-control" name="bundles[${bundleIndex}][items][0][quantity]" min="1" value="1" placeholder="Quantity" required>
                    </div>
                    <div class="col-md-1 d-flex align-items-center">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="bundles[${bundleIndex}][items][0][highlight]" value="1" id="highlight_${bundleIndex}">
                                                        <label class="form-check-label" for="highlight_${bundleIndex}">Highlight</label>
                                                    </div>
                                                </div>
                    <div class="col-md-3">
                        <button type="button" class="btn btn-danger remove-bundle-item d-none">Remove Item</button>
                    </div>
                </div>
            </div>
        </div>`;
            $wrapper.append(newBundle);
            bundleIndex++;

            // Show all remove bundle buttons when there's more than one bundle
            if ($('.bundle-entry').length > 1) {
                $('.remove-bundle').removeClass('d-none');
            }

            updateBundleValidation();
        });

        // Add item to a bundle
        $(document).on('click', '.add-bundle-item', function() {
            let $bundleEntry = $(this).closest('.bundle-entry');
            let $itemsWrapper = $bundleEntry.find('.bundle-items-wrapper');
            let bundleIdx = $('.bundle-entry').index($bundleEntry);
            let itemIdx = $itemsWrapper.find('.bundle-item').length;

            let newItem = `
        <div class="bundle-item row mb-3">
            <div class="col-md-6">
                <select class="form-control" name="bundles[${bundleIdx}][items][${itemIdx}][id]" required>
                    <option value="">Select an asset</option>
                    @foreach($assets as $asset)
            <option value="{{ $asset->id }}">{{ $asset->name }}</option>
                    @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <input type="number" class="form-control" name="bundles[${bundleIdx}][items][${itemIdx}][quantity]" min="1" value="1" placeholder="Quantity" required>
            </div>
            <div class="col-md-1 d-flex align-items-center">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="bundles[${bundleIdx}][items][${itemIdx}][highlight]" value="1" id="highlight_${itemIdx}">
                                                        <label class="form-check-label" for="highlight_${itemIdx}">Highlight</label>
                                                    </div>
                                                </div>
            <div class="col-md-3">
                <button type="button" class="btn btn-danger remove-bundle-item">Remove Item</button>
            </div>
        </div>`;

            $itemsWrapper.append(newItem);

            // Show all remove item buttons when there's more than one item
            if ($itemsWrapper.find('.bundle-item').length > 1) {
                $itemsWrapper.find('.remove-bundle-item').removeClass('d-none');
            }
        });

        // Remove a bundle
        $(document).on('click', '.remove-bundle', function() {
            $(this).closest('.bundle-entry').remove();

            // Hide remove buttons if only one bundle remains
            if ($('.bundle-entry').length <= 1) {
                $('.remove-bundle').addClass('d-none');
            }

            // Update bundle indices
            $('.bundle-entry').each(function(idx) {
                let $entry = $(this);
                $entry.find('[name^="bundles["]').each(function() {
                    let name = $(this).attr('name');
                    let newName = name.replace(/bundles\[\d+\]/, `bundles[${idx}]`);
                    $(this).attr('name', newName);
                });
            });

            updateBundleValidation();
        });

        // Remove an item from a bundle
        $(document).on('click', '.remove-bundle-item', function() {
            let $bundleItem = $(this).closest('.bundle-item');
            let $bundleItemsWrapper = $bundleItem.closest('.bundle-items-wrapper');

            $bundleItem.remove();

            // Hide remove buttons if only one item remains
            if ($bundleItemsWrapper.find('.bundle-item').length <= 1) {
                $bundleItemsWrapper.find('.remove-bundle-item').addClass('d-none');
            }

            // Update item indices
            let $bundleEntry = $bundleItemsWrapper.closest('.bundle-entry');
            let bundleIdx = $('.bundle-entry').index($bundleEntry);

            $bundleItemsWrapper.find('.bundle-item').each(function(itemIdx) {
                $(this).find('[name^="bundles["]').each(function() {
                    let name = $(this).attr('name');
                    let newName = name.replace(/bundles\[\d+\]\[items\]\[\d+\]/, `bundles[${bundleIdx}][items][${itemIdx}]`);
                    $(this).attr('name', newName);
                });
            });
        });

        // Remove free item (works for both sections)
        $(document).on('click', '.remove-free-item', function () {
            $(this).closest('.free-item-entry').remove();
            updateRedeemableValidation();
        });

        // Update validation for redeemable items
        function updateRedeemableValidation() {
            const redeemableInput = document.getElementById('redeemable_items');
            if (!redeemableInput) return; // Only run this if the element exists

            const errorDiv = document.getElementById('redeemable_items_error');
            const totalFreeItems = document.querySelectorAll('#free-items-wrapper-2 .free-item-entry').length;

            if (parseInt(redeemableInput.value) > totalFreeItems) {
                errorDiv.textContent = 'Redeemable items cannot be greater than the number of free items.';
                errorDiv.classList.remove('d-none');
            } else {
                errorDiv.textContent = '';
                errorDiv.classList.add('d-none');
            }
        }

        // Update validation for redeemable bundles
        function updateBundleValidation() {
            const redeemableBundlesInput = document.getElementById('redeemable_bundles');
            if (!redeemableBundlesInput) return; // Only run this if the element exists

            const errorDiv = document.getElementById('redeemable_bundles_error');
            const totalBundles = document.querySelectorAll('#bundles-wrapper .bundle-entry').length;

            if (parseInt(redeemableBundlesInput.value) > totalBundles) {
                errorDiv.textContent = 'Redeemable bundles cannot be greater than the number of available bundles.';
                errorDiv.classList.remove('d-none');
            } else {
                errorDiv.textContent = '';
                errorDiv.classList.add('d-none');
            }
        }

        // Add input event listeners
        $(document).ready(function() {
            if (document.getElementById('redeemable_items')) {
                document.getElementById('redeemable_items').addEventListener('input', updateRedeemableValidation);
            }

            if (document.getElementById('redeemable_bundles')) {
                document.getElementById('redeemable_bundles').addEventListener('input', updateBundleValidation);
            }
        });
    </script>

@endsection