@extends('layouts.admin-layout')

@section('title')
    Add Bundle
@endsection

@section('content')
    <div class="content-wrapper">
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card card-box-shadow mt-5">
                            <div class="card-header">
                                <h3 class="card-title">Add Bundle</h3>
                                <a href="{{ route('admin.bundle.create') }}" class="btn btn-primary btn-sm float-right">
                                    Back
                                </a>
                            </div>

                            <div class="card-body">
                                <form action="{{ route('admin.bundle.store') }}" method="POST" enctype="multipart/form-data">
                                    @csrf
                                    <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') }}">
                                            </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') }}" 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" required name="image">
                                            </div>
                                            <small class="text-danger">@error('image') {{ $message }} @enderror</small>
                                        </div>
                                    </div>

                                    <h4 class="mt-4">Bundle Variants</h4>
                                    <div id="variants-wrapper">
                                        <div class="variant-group row">
                                            <div class="col-md-12">
                                                <input type="text" name="variants[0][description]" class="form-control mb-2"
                                                       placeholder="(1) 2.5 GALLON JUG OF FASSTLIME" required>
                                            </div>
                                        </div>
                                    </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="Submit">
                                        </div>
                                    </div>
                                </form>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        let variantIndex = 1;

        // Add new variant
        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 d-flex">
                <input type="text" name="variants[${variantIndex}][description]" class="form-control mb-2"
                       placeholder="(1) Description" required>
                <button type="button" class="btn btn-danger btn-sm ml-2 remove-variant" style="display:none;">Remove</button>
            </div>
        `;
            variantWrapper.appendChild(newVariant);
            variantIndex++;

            // Show remove button for the newly added variant
            const removeButton = newVariant.querySelector('.remove-variant');
            removeButton.style.display = 'inline-block';

            // Remove variant when clicked
            removeButton.addEventListener('click', function () {
                newVariant.remove();
            });
        });

        // Handle remove button visibility on page load
        const variantGroups = document.querySelectorAll('.variant-group');
        variantGroups.forEach(function (variant, index) {
            if (index > 0) {
                const removeButton = variant.querySelector('.remove-variant');
                removeButton.style.display = 'inline-block';
            }
        });
    </script>
@endsection