@extends('layouts.admin-layout')
@section('title', 'Edit Bundle')
@section('content')
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card card-primary card-box-shadow">
                            <div class="card-body">
                                <h2>Edit Bundle</h2>

                                <form action="{{ route('admin.bundle.update', $bundle->id) }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    @method('PUT')

                                    <div class="row">
                                        <!-- Bundle Name -->
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="name">Bundle Name *</label>
                                                <input type="text" class="form-control" required name="name" value="{{ old('name', $bundle->name) }}">
                                            </div>
                                            <small class="text-danger">@error('name') {{ $message }} @enderror</small>
                                        </div>

                                        <!-- Bundle Price -->
                                        <div class="col-md-6">
                                            <div class="form-group">
                                                <label for="price">Price ($) *</label>
                                                <input type="number" class="form-control" required name="price" value="{{ old('price', $bundle->price) }}" step="0.01">
                                            </div>
                                            <small class="text-danger">@error('price') {{ $message }} @enderror</small>
                                        </div>

                                        <!-- Bundle Image -->
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label for="image">Bundle Image</label>
                                                <input type="file" class="form-control" name="image" onchange="showImagePreview(this, 'imagePreview')">
                                            </div>
                                            <small class="text-danger">@error('image') {{ $message }} @enderror</small>

                                            @if($bundle->getFirstMediaUrl('bundle_images'))
                                                <div>
                                                    <label>Current Image:</label>
                                                    <img id="imagePreview" src="{{ $bundle->getFirstMediaUrl('bundle_images') }}" alt="Bundle Image" style="width: 100px; height: auto;">
                                                </div>
                                            @else
                                                <span>No Image Uploaded</span>
                                            @endif
                                        </div>
                                    </div>

                                    <h4 class="mt-4">Bundle Variants</h4>
                                    <div id="variants-wrapper">
                                        @foreach ($bundle->variants as $index => $variant)
                                            <div class="variant-group row mt-2">
                                                <div class="col-md-12">
                                                    <input type="text" name="variants[{{ $index }}][description]" class="form-control mb-2"
                                                           value="{{ old('variants.' . $index . '.description', $variant->description) }}" placeholder="Variant description" required>
                                                </div>
                                                @if($index > 0)
                                                    <button type="button" class="btn btn-danger remove-variant">Remove</button>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>

                                    <button type="button" class="btn btn-secondary mt-3" id="add-variant">Add Variant</button>

                                    <div class="mx-auto mt-5">
                                        <div class="form-group">
                                            <input type="submit" class="form-control btn btn-primary btn-sm" value="Update Bundle">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

@endsection

@section('script')
    <script>
        let variantIndex = {{ count($bundle->variants) }};

        // Add new variant input
        document.getElementById('add-variant').addEventListener('click', function () {
            let variantWrapper = document.getElementById('variants-wrapper');
            let newVariant = document.createElement('div');
            newVariant.classList.add('variant-group', 'row', 'mt-2');
            newVariant.innerHTML = `
                <div class="col-md-12">
                    <input type="text" name="variants[${variantIndex}][description]" class="form-control mb-2" placeholder="Variant description" required>
                </div>
                <button type="button" class="btn btn-danger remove-variant">Remove</button>
            `;
            variantWrapper.appendChild(newVariant);
            variantIndex++;
        });

        // Remove variant input
        document.addEventListener('click', function (event) {
            if (event.target && event.target.classList.contains('remove-variant')) {
                event.target.closest('.variant-group').remove();
            }
        });

        // Image preview
        function showImagePreview(input, previewId) {
            const preview = document.getElementById(previewId);
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.src = e.target.result;
                    preview.style.display = 'block';
                };
                reader.readAsDataURL(input.files[0]);
            }
        }
    </script>
@endsection