@extends('layouts.admin')
@section('admin')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">Couple Management</h4>
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createModal">
                            Create New
                        </button>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    @if($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>Level Name</th>
                                <th>Level Target</th>
                                <th>Purchase Bind Coin</th>
                                <th>Level Icon</th>
                                <th>Gifts</th>
                                <th>Level Validity (Days)</th>
                                <th>Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($couples as $svip)
                                @php
                                    $gifts = $svip->gifts;
                                @endphp
                                <tr>
                                    <td>{{$svip->level_name}}</td>
                                    <td>{{$svip->level_target}}</td>
                                    <td>{{$svip->purchase_bind_coin}}</td>
                                    <td>
                                        @if($svip->level_icon)
                                            @php
                                                $file = $svip->level_icon;
                                            @endphp
                                            <div class="text-center">
                                                @if($file)
                                                    @if(file_exists(public_path($file)))
                                                        @php
                                                            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                                                        @endphp
                                                        @if($ext === 'svga')
                                                            <div id="svga-player-level-{{ $svip->id }}"
                                                                 style="width:50px; height:50px; border-radius:4px; overflow:hidden;"
                                                                 data-svga-src="{{ asset($file) }}"
                                                                 title="Level Icon (SVGA)">
                                                            </div>
                                                        @else
                                                            <img src="{{ asset($file) }}"
                                                                 alt="Level Icon"
                                                                 width="50"
                                                                 height="50"
                                                                 style="object-fit:cover; border-radius:4px;"
                                                                 title="Level Icon">
                                                        @endif
                                                    @else
                                                        <div
                                                            style="width:50px; height:50px; background:#f8f9fa; border-radius:4px; display:flex; align-items:center; justify-content:center;">
                                                            <small style="color:#6c757d; font-size:10px;">N/A</small>
                                                        </div>
                                                    @endif
                                                @else
                                                    <div
                                                        style="width:50px; height:50px; background:#f8f9fa; border-radius:4px; display:flex; align-items:center; justify-content:center;">
                                                        <small style="color:#6c757d; font-size:10px;">N/A</small>
                                                    </div>
                                                @endif
                                            </div>
                                        @else
                                            <div
                                                style="width:50px; height:50px; background:#f8f9fa; border-radius:4px; display:flex; align-items:center; justify-content:center;">
                                                <small style="color:#6c757d; font-size:10px;">N/A</small>
                                            </div>
                                        @endif
                                    </td>
                                    <td>
                                        @if($gifts && $gifts->count() > 0)
                                            <div class="d-flex flex-wrap gap-2">
                                                @foreach($gifts as $gift)
                                                    @php
                                                        $file = $gift->gift_file;
                                                    @endphp
                                                    <div class="text-center">
                                                        @if($file)
                                                            @if(file_exists(public_path($file)))
                                                                @php
                                                                    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
                                                                @endphp
                                                                @if($ext === 'svga')
                                                                    <div id="svga-player-{{ $gift->id }}"
                                                                         style="width:40px; height:40px; border-radius:4px; overflow:hidden;"
                                                                         data-svga-src="{{ asset($file) }}"
                                                                         title="{{ ucfirst($gift->gift_type) }} ({{ $gift->validity ?? 'N/A' }} days)">
                                                                    </div>
                                                                @else
                                                                    <img src="{{ asset($file) }}"
                                                                         alt="{{ $gift->gift_type }}"
                                                                         width="40"
                                                                         height="40"
                                                                         style="object-fit:cover; border-radius:4px;"
                                                                         title="{{ ucfirst($gift->gift_type) }} ({{ $gift->validity ?? 'N/A' }} days)">
                                                                @endif
                                                            @else
                                                                <div
                                                                    style="width:40px; height:40px; background:#f8f9fa; border-radius:4px; display:flex; align-items:center; justify-content:center;">
                                                                    <i class="fas fa-exclamation-triangle text-warning"></i>
                                                                </div>
                                                            @endif
                                                        @else
                                                            <div
                                                                style="width:40px; height:40px; background:#f8f9fa; border-radius:4px; display:flex; align-items:center; justify-content:center;">
                                                                <i class="fas fa-gift text-muted"></i>
                                                            </div>
                                                        @endif
                                                        <small
                                                            class="d-block mt-1">{{ ucfirst($gift->gift_type) }}</small>
                                                        @if($gift->validity)
                                                            <small class="text-muted">{{ $gift->validity }} days</small>
                                                        @endif
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            N/A
                                        @endif
                                    </td>
                                    <td>{{$svip->validity}}</td>
                                    <td>
                                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#editModal{{$svip->id}}">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-danger btn-sm" data-bs-toggle="modal"
                                                data-bs-target="#deleteModal{{$svip->id}}">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>

                                <!-- Edit Modal -->
                                <div class="modal fade" id="editModal{{$svip->id}}" tabindex="-1"
                                     aria-labelledby="editModalLabel{{$svip->id}}" aria-hidden="true">
                                    <div class="modal-dialog modal-lg modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="editModalLabel{{$svip->id}}">Edit Couple
                                                    Level</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{route('admin.couple.update')}}" method="post"
                                                  enctype="multipart/form-data">
                                                @csrf
                                                <div class="modal-body">
                                                    <div class="row">
                                                        <div class="col-md-6 mb-3">
                                                            <label>Level Name</label>
                                                            <input type="text" class="form-control" name="level_name"
                                                                   value="{{$svip->level_name}}" required>
                                                            <input type="hidden" class="form-control" name="edit_id"
                                                                   value="{{$svip->id}}" required>
                                                        </div>
                                                        <div class="col-md-6 mb-3">
                                                            <label>Level Target</label>
                                                            <input type="text" class="form-control" name="level_target"
                                                                   value="{{$svip->level_target}}" required>
                                                        </div>
                                                        <div class="col-md-6 mb-3">
                                                            <label>Level Validity (Days)</label>
                                                            <input type="number" class="form-control" name="validity"
                                                                   value="{{$svip->validity}}" required>
                                                        </div>

                                                        <div class="col-md-12 mt-3 mb-2">
                                                            <h6 class="border-bottom pb-2">Level Icon</h6>
                                                        </div>
                                                        <div class="col-md-8 mb-3">
                                                            <label>Level Icon</label>
                                                            <input type="file" class="form-control" name="level_icon">
                                                            @if($svip->level_icon)
                                                                <div class="mt-2">
                                                                    <img src="{{ asset($svip->level_icon) }}"
                                                                         alt="Level Icon" width="50">
                                                                </div>
                                                            @endif
                                                        </div>

                                                        <!-- Gifts Section -->
                                                        <div class="col-md-12 mt-3 mb-2">
                                                            <div
                                                                class="d-flex justify-content-between align-items-center">
                                                                <h6 class="border-bottom pb-2 mb-0">Gifts</h6>
                                                                <button type="button"
                                                                        class="btn btn-sm btn-outline-primary add-gift-btn"
                                                                        data-target="editModal{{$svip->id}}">
                                                                    <i class="fas fa-plus"></i> Add More Gifts
                                                                </button>
                                                            </div>
                                                        </div>

                                                        <!-- Gift Fields Container -->
                                                        <div class="gifts-container col-12"
                                                             id="gifts-container-editModal{{$svip->id}}">
                                                            @php
                                                                $gifts = $svip->gifts;
                                                            @endphp
                                                            @if($gifts && $gifts->count() > 0)
                                                                @foreach($gifts as $index => $gift)
                                                                    <div class="gift-item row border-bottom pb-3 mb-3">
                                                                        <input type="hidden"
                                                                               name="gifts[{{$index}}][gift_id]"
                                                                               value="{{ $gift->id }}">
                                                                        <!-- Hidden Gift Type Name -->
                                                                        <input type="hidden"
                                                                               name="gifts[{{$index}}][gift_type_name]"
                                                                               value="{{ $gift->gift_type }}">
                                                                        <!-- Hidden Gift Category -->
                                                                        <input type="hidden"
                                                                               name="gifts[{{$index}}][gift_category]"
                                                                               value="gift-bag-management">

                                                                        <div class="col-md-4 mb-2">
                                                                            <label>Gift Type</label>
                                                                            <select
                                                                                class="form-control gift-type-select"
                                                                                name="gifts[{{$index}}][type]"
                                                                                required
                                                                                onchange="updateGiftTypeName(this, {{$index}})">
                                                                                <option value="">Select Type</option>
                                                                                <option
                                                                                    value="frame" {{ $gift->gift_type == 'frame' ? 'selected' : '' }}>
                                                                                    Frame
                                                                                </option>
                                                                                <option
                                                                                    value="medal" {{ $gift->gift_type == 'medal' ? 'selected' : '' }}>
                                                                                    Medal
                                                                                </option>
                                                                                <option
                                                                                    value="anti_effect" {{ $gift->gift_type == 'anti-effect' ? 'selected' : '' }}>
                                                                                    Anti Effect
                                                                                </option>
                                                                                <option
                                                                                    value="special_icon" {{ $gift->gift_type == 'special-icon' ? 'selected' : '' }}>
                                                                                    Special Icon
                                                                                </option>
                                                                            </select>
                                                                        </div>
                                                                        <div class="col-md-4 mb-2">
                                                                            <label>Gift Image</label>
                                                                            <input type="file" class="form-control"
                                                                                   name="gifts[{{$index}}][image]">
                                                                            @if($gift->gift_file)
                                                                                <div class="mt-2">
                                                                                    @php
                                                                                        $ext = strtolower(pathinfo($gift->gift_file, PATHINFO_EXTENSION));
                                                                                    @endphp
                                                                                    @if($ext === 'svga')
                                                                                        <div
                                                                                            style="width:50px; height:50px; background:#f8f9fa; display:flex; align-items:center; justify-content:center; border-radius:4px;">
                                                                                            <i class="fas fa-film"
                                                                                               title="SVGA File"></i>
                                                                                        </div>
                                                                                        <small
                                                                                            class="d-block text-muted">SVGA
                                                                                            Animation</small>
                                                                                    @else
                                                                                        <img
                                                                                            src="{{ asset($gift->gift_file) }}"
                                                                                            width="50"
                                                                                            alt="Gift"
                                                                                            style="border-radius:4px;">
                                                                                    @endif
                                                                                    <input type="hidden"
                                                                                           name="gifts[{{$index}}][existing_image]"
                                                                                           value="{{ $gift->gift_file }}">
                                                                                </div>
                                                                            @endif
                                                                        </div>
                                                                        <div class="col-md-3 mb-2">
                                                                            <label>Validity (Days)</label>
                                                                            <input type="number" class="form-control"
                                                                                   name="gifts[{{$index}}][validity]"
                                                                                   value="{{ $gift->validity }}"
                                                                                   placeholder="Enter days">
                                                                        </div>
                                                                        <div
                                                                            class="col-md-1 mb-2 d-flex align-items-end">
                                                                            @if($index > 0)
                                                                                <button type="button"
                                                                                        class="btn btn-sm btn-danger remove-gift-btn">
                                                                                    <i class="fas fa-times"></i>
                                                                                </button>
                                                                            @endif
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @else
                                                                <!-- Default gift -->
                                                                <div class="gift-item row border-bottom pb-3 mb-3">
                                                                    <!-- Hidden Gift Type Name -->
                                                                    <input type="hidden"
                                                                           name="gifts[0][gift_type_name]"
                                                                           value="frame">
                                                                    <!-- Hidden Gift Category -->
                                                                    <input type="hidden"
                                                                           name="gifts[0][gift_category]"
                                                                           value="gift-bag-management">

                                                                    <div class="col-md-4 mb-2">
                                                                        <label>Gift Type</label>
                                                                        <select class="form-control gift-type-select"
                                                                                name="gifts[0][type]" required
                                                                                onchange="updateGiftTypeName(this, 0)">
                                                                            <option value="">Select Type</option>
                                                                            <option value="frame" selected>Frame
                                                                            </option>
                                                                            <option value="medal">Medal</option>
                                                                            <option value="anti_effect">Anti Effect
                                                                            </option>
                                                                            <option value="special_icon">Special Icon
                                                                            </option>
                                                                        </select>
                                                                    </div>
                                                                    <div class="col-md-4 mb-2">
                                                                        <label>Gift Image</label>
                                                                        <input type="file" class="form-control"
                                                                               name="gifts[0][image]" required>
                                                                    </div>
                                                                    <div class="col-md-3 mb-2">
                                                                        <label>Validity (Days)</label>
                                                                        <input type="number" class="form-control"
                                                                               name="gifts[0][validity]"
                                                                               placeholder="Enter days">
                                                                    </div>
                                                                    <div class="col-md-1 mb-2 d-flex align-items-end">
                                                                        <!-- First item cannot be removed -->
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Close
                                                    </button>
                                                    <button type="submit" class="btn btn-primary">Update</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>

                                <!-- Delete Modal -->
                                <div class="modal fade" id="deleteModal{{$svip->id}}" tabindex="-1"
                                     aria-labelledby="deleteModalLabel{{$svip->id}}" aria-hidden="true">
                                    <div class="modal-dialog modal-dialog-centered">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="deleteModalLabel{{$svip->id}}">Confirm
                                                    Delete</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                        aria-label="Close"></button>
                                            </div>
                                            <form action="{{route('admin.couple.delete')}}" method="post">
                                                @csrf
                                                <div class="modal-body">
                                                    <p>Are you sure you want to delete this Couple level?</p>
                                                    <input type="hidden" class="form-control" name="delete_id"
                                                           value="{{$svip->id}}" required>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal">Cancel
                                                    </button>
                                                    <button type="submit" class="btn btn-danger">Delete</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            </tbody>
                        </table>
                    </div>

                    <!-- Pagination -->
                    @if($couples->hasPages())
                        <div class="mt-3">
                            {{ $couples->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!-- Create Modal -->
    <div class="modal fade" id="createModal" tabindex="-1" aria-labelledby="createModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="createModalLabel">Create New Couple Level</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{route('admin.couple.save')}}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label>Level Name</label>
                                <input type="text" class="form-control" name="level_name" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Level Target</label>
                                <input type="text" class="form-control" name="level_target" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label>Level Validity (Days)</label>
                                <input type="number" class="form-control" name="validity" required>
                            </div>

                            <div class="col-md-12 mt-3 mb-2">
                                <h6 class="border-bottom pb-2">Level Icon</h6>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label>Level Icon</label>
                                <input type="file" class="form-control" name="level_icon">
                            </div>

                            <!-- Gifts Section -->
                            <div class="col-md-12 mt-3 mb-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h6 class="border-bottom pb-2 mb-0">Gifts</h6>
                                    <button type="button" class="btn btn-sm btn-outline-primary add-gift-btn"
                                            data-target="createModal">
                                        <i class="fas fa-plus"></i> Add More Gifts
                                    </button>
                                </div>
                            </div>

                            <!-- Gift Fields Container -->
                            <div class="gifts-container col-12" id="gifts-container-createModal">
                                <!-- Default first gift -->
                                <div class="gift-item row border-bottom pb-3 mb-3">
                                    <!-- Hidden Gift Type Name -->
                                    <input type="hidden" name="gifts[0][gift_type_name]" value="frame">
                                    <!-- Hidden Gift Category -->
                                    <input type="hidden" name="gifts[0][gift_category]" value="gift-bag-management">

                                    <div class="col-md-4 mb-2">
                                        <label>Gift Type</label>
                                        <select class="form-control gift-type-select" name="gifts[0][type]" required
                                                onchange="updateGiftTypeName(this, 0)">
                                            <option value="">Select Type</option>
                                            <option value="frame" selected>Frame</option>
                                            <option value="medal">Medal</option>
                                            <option value="anti_effect">Anti Effect</option>
                                            <option value="special_icon">Special Icon</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-2">
                                        <label>Gift Image</label>
                                        <input type="file" class="form-control" name="gifts[0][image]">
                                    </div>
                                    <div class="col-md-3 mb-2">
                                        <label>Validity (Days)</label>
                                        <input type="number" class="form-control" name="gifts[0][validity]"
                                               placeholder="Enter days">
                                    </div>
                                    <div class="col-md-1 mb-2 d-flex align-items-end">
                                        <!-- First item cannot be removed -->
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Create</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- SVGA Library and Initialization -->
    <script src="https://cdn.jsdelivr.net/npm/svgaplayerweb@2.3.1/build/svga.min.js"></script>
    <script>
        // Initialize SVGA players when page loads
        document.addEventListener('DOMContentLoaded', function () {
            initializeSVGAPlayers();

            // Re-initialize SVGA players when modals are shown (for newly added gifts in edit mode)
            document.querySelectorAll('.modal').forEach(modal => {
                modal.addEventListener('shown.bs.modal', function () {
                    setTimeout(() => {
                        initializeSVGAPlayers();
                    }, 100);
                });
            });
        });

        // Function to initialize all SVGA players
        function initializeSVGAPlayers() {
            const svgaElements = document.querySelectorAll('[id^="svga-player-"]');

            svgaElements.forEach(element => {
                const svgaSrc = element.getAttribute('data-svga-src');
                if (svgaSrc && window.SVGA) {
                    try {
                        // Clear existing content
                        element.innerHTML = '';

                        const player = new SVGA.Player(`#${element.id}`);
                        const parser = new SVGA.Parser();

                        parser.load(svgaSrc, (videoItem) => {
                            player.setVideoItem(videoItem);
                            player.startAnimation();
                            // Let the animation loop continuously for better visual appeal
                        });
                    } catch (error) {
                        console.error('SVGA Error:', error);
                        element.innerHTML = '<i class="fas fa-exclamation-triangle text-danger"></i>';
                    }
                }
            });
        }

        // Add More Gift functionality
        document.addEventListener('DOMContentLoaded', function () {
            // Add More Gift functionality
            document.querySelectorAll('.add-gift-btn').forEach(button => {
                button.addEventListener('click', function () {
                    const targetId = this.getAttribute('data-target');
                    const container = document.getElementById(`gifts-container-${targetId}`);
                    const giftCount = container.querySelectorAll('.gift-item').length;

                    // Create new gift item
                    const newGift = document.createElement('div');
                    newGift.className = 'gift-item row border-bottom pb-3 mb-3';
                    newGift.innerHTML = `
                <!-- Hidden Gift Type Name -->
                <input type="hidden" name="gifts[${giftCount}][gift_type_name]" value="frame">
                <!-- Hidden Gift Category -->
                <input type="hidden" name="gifts[${giftCount}][gift_category]" value="gift-bag-management">

                <div class="col-md-4 mb-2">
                    <label>Gift Type</label>
                    <select class="form-control gift-type-select" name="gifts[${giftCount}][type]" required onchange="updateGiftTypeName(this, ${giftCount})">
                        <option value="">Select Type</option>
                        <option value="frame" selected>Frame</option>
                        <option value="medal">Medal</option>
                        <option value="anti_effect">Anti Effect</option>
                        <option value="special_icon">Special Icon</option>
                    </select>
                </div>
                <div class="col-md-4 mb-2">
                    <label>Gift Image</label>
                    <input type="file" class="form-control" name="gifts[${giftCount}][image]" required>
                </div>
                <div class="col-md-3 mb-2">
                    <label>Validity (Days)</label>
                    <input type="number" class="form-control" name="gifts[${giftCount}][validity]" placeholder="Enter days">
                </div>
                <div class="col-md-1 mb-2 d-flex align-items-end">
                    <button type="button" class="btn btn-sm btn-danger remove-gift-btn">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            `;

                    container.appendChild(newGift);

                    // Add remove functionality to the new button
                    newGift.querySelector('.remove-gift-btn').addEventListener('click', function () {
                        this.closest('.gift-item').remove();
                        // Re-index all gifts
                        reindexGifts(container);
                    });
                });
            });

            // Remove Gift functionality (for existing remove buttons)
            document.querySelectorAll('.remove-gift-btn').forEach(button => {
                button.addEventListener('click', function () {
                    const container = this.closest('.gifts-container');
                    this.closest('.gift-item').remove();
                    reindexGifts(container);
                });
            });

            // Function to reindex all gifts
            function reindexGifts(container) {
                const gifts = container.querySelectorAll('.gift-item');
                gifts.forEach((gift, index) => {
                    // Update all inputs and selects with new index
                    const typeSelect = gift.querySelector('select.gift-type-select');
                    const fileInput = gift.querySelector('input[type="file"]');
                    const validityInput = gift.querySelector('input[type="number"]');
                    const giftTypeNameInput = gift.querySelector('input[type="hidden"][name*="gift_type_name"]');
                    const giftCategoryInput = gift.querySelector('input[type="hidden"][name*="gift_category"]');
                    const hiddenGiftId = gift.querySelector('input[type="hidden"][name*="gift_id"]');
                    const existingImageInput = gift.querySelector('input[type="hidden"][name*="existing_image"]');

                    if (typeSelect) {
                        typeSelect.name = `gifts[${index}][type]`;
                        // Update the onchange function with new index
                        typeSelect.setAttribute('onchange', `updateGiftTypeName(this, ${index})`);
                    }
                    if (fileInput) {
                        fileInput.name = `gifts[${index}][image]`;
                    }
                    if (validityInput) {
                        validityInput.name = `gifts[${index}][validity]`;
                    }
                    if (giftTypeNameInput) {
                        giftTypeNameInput.name = `gifts[${index}][gift_type_name]`;
                    }
                    if (giftCategoryInput) {
                        giftCategoryInput.name = `gifts[${index}][gift_category]`;
                    }
                    if (hiddenGiftId) {
                        hiddenGiftId.name = `gifts[${index}][gift_id]`;
                    }
                    if (existingImageInput) {
                        existingImageInput.name = `gifts[${index}][existing_image]`;
                    }
                });
            }

            // Initialize gift type names for existing selects
            document.querySelectorAll('.gift-type-select').forEach((select, index) => {
                updateGiftTypeName(select, index);
            });
        });

        // Function to update hidden gift type name
        function updateGiftTypeName(selectElement, index) {
            const giftTypeNameInput = selectElement.closest('.gift-item')
                .querySelector('input[name*="gift_type_name"]');
            if (giftTypeNameInput && selectElement.value) {
                giftTypeNameInput.value = selectElement.value;
            }
        }
    </script>
@endsection