@push('title')
    Create Variation
@endpush

<x-app-layout>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title mb-3">Add New Variation</h5>

            <form action="{{ route('variations.store') }}" method="POST">
                @csrf
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="name">Variation Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="Enter variation name" 
                            value="{{ old('name') }}"
                            required>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12">
                        <label>Variation Types (e.g., Small, Medium, Large) <span class="text-danger">*</span></label>

                        <div id="variation-types-wrapper">
                            @if(old('types'))
                                @foreach(old('types') as $type)
                                    <div class="input-group mb-2 variation-type-row">
                                        <input type="text" class="form-control" name="types[]"
                                            placeholder="Enter variation type" value="{{ $type }}" required>

                                        <button type="button" class="btn btn-danger remove-type d-none">
                                            Remove
                                        </button>
                                    </div>
                                @endforeach
                            @else
                                <div class="input-group mb-2 variation-type-row">   
                                    <input type="text" class="form-control" name="types[]"
                                        placeholder="Enter variation type" required>

                                    <button type="button" class="btn btn-danger remove-type d-none">
                                        Remove
                                    </button>
                                </div>
                            @endif
                        </div>

                        <button type="button" id="add-type" class="btn btn-sm btn-secondary mt-2">
                            + Add Another Type
                        </button>
                    </div>
                </div>

                <div class="text-end mt-4">
                    <button type="submit" class="btn btn-primary">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-app-layout>

<script>
    $(document).ready(function () {

        // Add new type field
        $('#add-type').click(function () {
            $('#variation-types-wrapper').append(`
                <div class="input-group mb-2 variation-type-row">
                    <input type="text"
                           class="form-control"
                           name="types[]"
                           placeholder="Enter variation type"
                           required>
                    <button type="button" class="btn btn-danger remove-type">
                        Remove
                    </button>
                </div>
            `);

            // Show remove button if more than 1 type exists
            $('.remove-type').removeClass('d-none');
        });

        // Remove type field
        $(document).on('click', '.remove-type', function () {
            $(this).closest('.variation-type-row').remove();

            // Hide remove button if only 1 type remains
            if ($('.variation-type-row').length === 1) {
                $('.remove-type').addClass('d-none');
            }
        });

        // Show remove button on page load if more than 1 type exists
        if ($('.variation-type-row').length > 1) {
            $('.remove-type').removeClass('d-none');
        }
    });
</script>