@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.edit')
        @endslot
    @endcomponent

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

    <!-- Edit Form -->
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h1 class="card-title mb-0">Edit Digital Assets</h1>
                </div>
                <div class="card-body">
                    <form method="POST" id="update-form" action="{{ url('digital-assets/update/'.$asset->id) }}" enctype="multipart/form-data">
                        @csrf
                        @method('POST')
                        <div class="row">
                            <!-- Asset Name -->
                            <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" value="{{ old('name', $asset->name) }}" id="name" required>
                            </div>
                            <!-- Asset Price -->
                            <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" value="{{ old('price', $asset->price) }}" id="price" step="0.01" required>
                            </div>
                            <!-- Asset Quantity -->
                            <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" value="{{ old('quantity', $asset->quantity) }}" id="quantity" required>
                            </div>
                            <!-- Asset Label -->
                            <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" value="{{ old('label', $asset->label) }}" id="label">
                            </div>
                            <!-- Asset Image -->
                            <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">
                                @if($asset->image)
                                    <img src="{{ url($asset->image) }}" alt="Current Image" width="100">
                                @endif
                            </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="none" {{ $asset->free_item_type == \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}}" {{ $asset->free_item_type == \App\Models\DigitalAsset::FreeItem ? 'checked' : '' }}>
                                    <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}}" {{ $asset->free_item_type == \App\Models\DigitalAsset::FreeItemUserSelect ? 'checked' : '' }}>
                                    <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}}" {{ $asset->free_item_type == \App\Models\DigitalAsset::FreeItemBundle ? 'checked' : '' }}>
                                    <label class="form-check-label" for="freeItemBundle">Free Item Bundle</label>
                                </div>
                            </div>
                        </div>

                        <!-- Free Item Section -->
                        <div id="freeItemSection" class="free-item-section {{ $asset->free_item_type == 'free_item' ? '' : '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_1"
                                           value="{{ old('item_quantity_for_free_item', $asset->item_quantity_for_free_item) ?? 1 }}" min="1">
                                </div>
                            </div>
                            <div id="free-items-wrapper-1">
                                @if($asset->free_item_type == \App\Models\DigitalAsset::FreeItem && !empty($asset->freeItems))
                                    @foreach ($asset->freeItems as $index => $freeItem)
                                        <div class="free-item-entry row mb-3">
                                            <input type="hidden" name="free_items[{{ $index }}][id]" value="{{$freeItem->id}}" required>
                                            <div class="col-md-6">
                                                <select class="form-control" name="free_items[{{ $index }}][asset_id]" required>
                                                    <option value="">Select an asset</option>
                                                    @foreach($assets as $freeAsset)
                                                        <option
                                                            value="{{ $freeAsset->id }}" {{ $freeItem->free_item_id == $freeAsset->id ? 'selected' : '' }}>{{ $freeAsset->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="number" class="form-control" name="free_items[{{ $index }}][quantity]" min="1"
                                                       value="{{ $freeItem->free_item_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="free_items[{{ $index }}][highlight]"
                                                           value="{{ $freeItem->free_item_highlight}}" id="highlight_{{ $index }}"
                                                        {{ $freeItem->free_item_highlight ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="highlight_{{ $index }}">Highlight</label>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <button type="button" class="btn btn-danger remove-free-item">Remove</button>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </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 {{ $asset->free_item_type == 'free_item_user_select' ? '' : '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', $asset->item_quantity_for_free_item) ?? 1 }}" min="1">
                                </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', $asset->redeemable_items) ?? 0 }}"
                                           min="0">
                                    @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">
                                @if($asset->free_item_type == \App\Models\DigitalAsset::FreeItemUserSelect && !empty($asset->freeItems))
                                    @foreach ($asset->freeItems ?? [] as $index => $userSelectItem)
                                        <div class="free-item-entry row mb-3">
                                            <input type="hidden" name="user_select_items[{{ $index }}][id]" value="{{$userSelectItem->id}}" required>
                                            <div class="col-md-6">
                                                <select class="form-control" name="user_select_items[{{ $index }}][asset_id]" required>
                                                    <option value="">Select an asset</option>
                                                    @foreach($assets as $a)
                                                        <option value="{{ $a->id }}" {{ $a->id == $userSelectItem->free_item_id ? 'selected' : '' }}>{{ $a->name }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-2">
                                                <input type="number" class="form-control" name="user_select_items[{{ $index }}][quantity]" min="1"
                                                       value="{{ $userSelectItem->free_item_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="user_select_items[{{ $index }}][highlight]"
                                                           value="{{ $userSelectItem->free_item_highlight}}" id="highlight_{{ $index }}"
                                                        {{ $userSelectItem->free_item_highlight ? 'checked' : '' }}>
                                                    <label class="form-check-label" for="highlight_{{ $index }}">Highlight</label>
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <button type="button" class="btn btn-danger remove-free-item">Remove</button>
                                            </div>
                                        </div>
                                    @endforeach
                                @endif
                            </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 {{ $asset->free_item_type == 'free_item_bundle' ? '' : 'd-none' }}">
                            <div class="row">
                                <div class="col-md-6 form-group mb-3">
                                    <label for="item_quantity_for_free_bundle" 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', $asset->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', $asset->redeemable_items) ?? 0 }}"
                                           min="0">
                                    @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">
                                @if($asset->free_item_type == \App\Models\DigitalAsset::FreeItemBundle && !empty($asset->bundles))
                                    @forelse ($asset->bundles as $bundleIndex => $bundle)
                                        <div class="bundle-entry mb-4">
                                            <div class="row mb-3">
                                                <input type="hidden" name="bundles[{{ $bundleIndex }}][id]" value="{{$bundle->id}}" required>
                                                <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" value="{{ $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 {{ count($asset->bundles ?? []) <= 1 ? 'd-none' : '' }}">
                                                        Remove Bundle
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="bundle-items-wrapper">
                                                @foreach ($bundle->items ?? [] as $itemIndex => $bundleItem)
                                                    <div class="bundle-item row mb-3">
                                                        <input type="hidden" name="bundles[{{ $bundleIndex }}][items][{{ $itemIndex }}][item_id]" value="{{$bundleItem->id}}" required>
                                                        <div class="col-md-6">
                                                            <select class="form-control" name="bundles[{{ $bundleIndex }}][items][{{ $itemIndex }}][asset_id]" required>
                                                                <option value="">Select an asset</option>
                                                                @foreach($assets as $assetItem)
                                                                    <option
                                                                        value="{{ $assetItem->id }}" {{ $bundleItem->digital_asset_id == $assetItem->id ? 'selected' : '' }}>{{ $assetItem->name }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-2">
                                                            <input type="number" class="form-control" name="bundles[{{ $bundleIndex }}][items][{{ $itemIndex }}][quantity]"
                                                                   min="1" value="{{ $bundleItem->quantity }}" 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][{{ $itemIndex }}][highlight]"
                                                                       value="1" id="highlight_{{ $bundleIndex }}_{{ $itemIndex }}"
                                                                    {{ $bundleItem->highlight ? 'checked' : '' }}>
                                                                <label class="form-check-label" for="highlight_{{ $bundleIndex }}_{{ $itemIndex }}">Highlight</label>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-3">
                                                            <button type="button"
                                                                    class="btn btn-danger remove-bundle-item {{ count($bundle->items ?? []) <= 1 ? 'd-none' : '' }}">Remove
                                                                Item
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @empty
                                        <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" 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 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][asset_id]" required>
                                                            <option value="">Select an asset</option>
                                                            @foreach($assets as $assetItem)
                                                                <option value="{{ $assetItem->id }}">{{ $assetItem->name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-3">
                                                        <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>
                                    @endforelse
                                @endif
                            </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', $asset->exchangeable) == 1 ? 'selected' : '' }}>Yes</option>
                                    <option value="0" {{ old('exchangeable', $asset->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', $asset->giftable) == 1 ? 'selected' : '' }}>Yes</option>
                                    <option value="0" {{ old('giftable', $asset->giftable) == 0 ? 'selected' : '' }}>No</option>
                                </select>
                            </div>
                        </div>

                        <hr>
                        <h5>Scheduled Images</h5>
                        <hr>
                        <div id="scheduled-images-wrapper">
                            <!-- Existing scheduled images loaded from the database -->
                            @foreach ($asset->scheduledImages as $index => $scheduledImage)
                                <div class="scheduled-image-entry row mb-3" data-index="{{ $index }}">
                                    <div class="col-md-4">
                                        <label for="scheduled_images[{{ $index }}][date]" class="form-label">Effective Date</label>
                                        <input type="date" class="form-control" name="scheduled_images[{{ $index }}][date]" value="{{ $scheduledImage->effective_date }}">
                                    </div>
                                    <div class="col-md-4">
                                        <label for="scheduled_images[{{ $index }}][image]" class="form-label">Scheduled Image</label>
                                        <input type="file" class="form-control" name="scheduled_images[{{ $index }}][image]">
                                        @if($scheduledImage->image_path)
                                            <img src="{{ url($scheduledImage->image_path) }}" alt="Scheduled Image" width="50">
                                        @endif
                                    </div>
                                    <div class="col-md-4 align-self-center">
                                        <button type="button" class="btn btn-danger remove-scheduled-image">Delete</button>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <button type="button" id="add-scheduled-image" class="btn btn-primary mb-3">Add Scheduled Image</button>

                        <div class="col-md-12 form-group mb-2">
                            <a style="margin-right:3px;" href="{{ route('digital-assets.index') }}" class="btn btn-danger btn-sm">Cancel</a>
                            <input type="submit" class="btn btn-success btn-sm" value="Save Changes">
                        </div>
                    </form>
                </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>
        $(document).ready(function () {

            // Function to check for duplicate dates
            function checkForDuplicateDates() {
                const dates = [];
                let hasDuplicates = false;

                // Iterate over all date inputs in the scheduled images section
                $('input[name^="scheduled_images"][name$="[date]"]').each(function () {
                    const date = $(this).val();
                    console.log('Checking date:', date);
                    if (dates.includes(date)) {
                        hasDuplicates = true;
                    } else {
                        dates.push(date);
                    }
                });

                return hasDuplicates;
            }

            // Handle form submission
            $('#update-form').on('submit', function (event) {
                console.log('Form submit intercepted.');

                // Check for duplicate dates
                if (checkForDuplicateDates()) {
                    console.log('Duplicate dates found.');
                    event.preventDefault(); // Prevent form submission
                    alert('Each scheduled image must have a unique date.');
                } else {
                    console.log('No duplicate dates found.');
                }
            });

            // 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 the nicEdit editors
        $(".nicEdit").each(function (index) {
            $(this).attr("id", "nicEditor" + index);
            new nicEditor({fullPanel: true}).panelInstance('nicEditor' + index, {hasPanel: true});
        });

        // Ensure focus on nicEdit elements when interacted with
        (function ($) {
            $(document).on('mouseover ', '.nicEdit-main,.nicEdit-panelContain', function () {
                $('.nicEdit-main').focus();
            });
        })(jQuery);

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

        // 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 = {{ $asset->freeItems->count() }};
        let freeItemIndex2 = {{ $asset->freeItems->count() }};
        let bundleIndex = {{ $asset->bundles->count() }};

        // Add free item for section 1
        $(document).on('click', '#add-free-item-1', function () {
            console.log('1');
            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}][asset_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="free_items[${freeItemIndex1}][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[${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}][asset_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="user_select_items[${freeItemIndex2}][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[${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();
        });

        // Remove free item for all sections
        $(document).on('click', '.remove-free-item', function () {
            $(this).closest('.free-item-entry').remove();
            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][asset_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}][asset_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);
                });
            });
        });

        // Script to dynamically add and remove scheduled image fields
        let scheduledImageIndex = {{ $asset->scheduledImages->count() }};

        document.getElementById('add-scheduled-image').addEventListener('click', function () {
            let wrapper = document.getElementById('scheduled-images-wrapper');
            let newEntry = document.createElement('div');
            newEntry.classList.add('scheduled-image-entry', 'row', 'mb-3');
            newEntry.setAttribute('data-index', scheduledImageIndex);

            newEntry.innerHTML = `
                <div class="col-md-4">
                    <label for="scheduled_images[${scheduledImageIndex}][date]" class="form-label">Effective Date</label>
                    <input type="date" class="form-control" name="scheduled_images[${scheduledImageIndex}][date]">
                </div>
                <div class="col-md-4">
                    <label for="scheduled_images[${scheduledImageIndex}][image]" class="form-label">Scheduled Image</label>
                    <input type="file" class="form-control" name="scheduled_images[${scheduledImageIndex}][image]">
                </div>
                <div class="col-md-4 align-self-center">
                    <button type="button" class="btn btn-danger remove-scheduled-image">Delete</button>
                </div>
            `;

            wrapper.appendChild(newEntry);
            scheduledImageIndex++;
        });

        document.addEventListener('click', function (event) {
            if (event.target.classList.contains('remove-scheduled-image')) {
                event.target.closest('.scheduled-image-entry').remove();
            }
        });

        // 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');
            // Check which section is active
            let totalFreeItems = 0;
            if (!$('#userSelectSection').hasClass('d-none')) {
                totalFreeItems = document.querySelectorAll('#free-items-wrapper-2 .free-item-entry').length;
            } else {
                totalFreeItems = document.querySelectorAll('#free-items-wrapper .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);
            }

            // Add listeners for adding/removing items to update validation
            // document.addEventListener('click', function (e) {
            //     if (e.target.classList.contains('remove-free-item') ||
            //         e.target.id === 'add-free-item' ||
            //         e.target.id === 'add-free-item-1' ||
            //         e.target.id === 'add-free-item-2') {
            //         setTimeout(updateRedeemableValidation, 100);
            //     }
            //
            //     if (e.target.classList.contains('remove-bundle') ||
            //         e.target.id === 'add-bundle') {
            //         setTimeout(updateBundleValidation, 100);
            //     }
            // });
        });
    </script>
@endsection