@include('admin.layouts.header')

<div class="col-sm-9 col-md-10">
    <div class="content">

        <div class="panel panel-default">
            <div class="panel-heading">Create Addon Set & Group</div>
            <div class="panel-body">

                <form method="POST" action="{{ route('admin.addon.store') }}">

                    @csrf

                    <!-- Addon Name -->
                    <div class="form-group">
                        <label for="addon_name">Addon Name</label>
                        <input type="text" class="form-control" id="addon_name" name="addon_name" placeholder="Enter Addon Name" required>
                    </div>

                    <!-- Addon Groups Table -->
                    <div class="form-group">
                        <label>Addon Groups</label>
                        <table class="table table-bordered" id="addonGroupsTable">
                            <thead>
                                <tr>
                                    <th>Group Name</th>
                                    <th>Configuration</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- Dynamic rows will be added here -->
                            </tbody>
                        </table>

                        <button type="button" class="btn btn-success" id="addGroupBtn">
                            <i class="fa fa-plus"></i> Add Group
                        </button>
                    </div>

                    <button type="submit" class="btn btn-primary">Save Addon</button>
                </form>

            </div>
        </div>

    </div>
</div>

@include('admin.layouts.footer')

<!-- JavaScript for dynamic row with nested table -->
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let groupIndex = 0;

        document.getElementById('addGroupBtn').addEventListener('click', function () {
            let tableBody = document.querySelector('#addonGroupsTable tbody');

            let newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td>
                    <input type="text" name="groups[${groupIndex}][name]" class="form-control" placeholder="Group Name" required>
                </td>
                <td>
                    <table class="table table-bordered">
                        <tr>
                            <td>Multi Select</td>
                            <td>
                                <label><input type="radio" name="groups[${groupIndex}][multi_select]" value="yes"> Yes</label>
                                <label><input type="radio" name="groups[${groupIndex}][multi_select]" value="no" checked> No</label>
                            </td>
                        </tr>
                        <tr>
                            <td>Min/Max Selection</td>
                            <td>
                                <label><input type="radio" name="groups[${groupIndex}][minmax_enabled]" value="yes" class="minmax_toggle"> Yes</label>
                                <label><input type="radio" name="groups[${groupIndex}][minmax_enabled]" value="no" checked class="minmax_toggle"> No</label>
                                <label><input type="radio" name="groups[${groupIndex}][minmax_enabled]" value="item_rule" class="minmax_toggle"> Dippents On item</label>
                                <br>
                                Min: <input type="number" name="groups[${groupIndex}][min]" class="form-control minmax_value" style="width:80px; display:inline-block;" disabled>
                                Max: <input type="number" name="groups[${groupIndex}][max]" class="form-control minmax_value" style="width:80px; display:inline-block;" disabled>
                            </td>
                        </tr>
                        <tr>
                            <td>Default Selected</td>
                            <td>
                                <label><input type="radio" name="groups[${groupIndex}][default_selected]" value="yes"> Yes</label>
                                <label><input type="radio" name="groups[${groupIndex}][default_selected]" value="no" checked> No</label>
                            </td>
                        </tr>
                        <tr>
                            <td>Add Same Item Multiple Times</td>
                            <td>
                                <label><input type="radio" name="groups[${groupIndex}][add_multiple]" value="yes"> Yes</label>
                                <label><input type="radio" name="groups[${groupIndex}][add_multiple]" value="no" checked> No</label>
                            </td>
                        </tr>
                        <tr>
                            <td>Pizza Toppings</td>
                            <td>
                                <label><input type="radio" name="groups[${groupIndex}][toppings]" value="yes"> Yes</label>
                                <label><input type="radio" name="groups[${groupIndex}][toppings]" value="no" checked> No</label>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    <button type="button" class="btn btn-danger removeRow"><i class="fa fa-trash"></i></button>
                </td>
            `;

            tableBody.appendChild(newRow);

            // Enable Min/Max fields if Yes is selected
            let minmaxRadios = newRow.querySelectorAll('.minmax_toggle');
            minmaxRadios.forEach(radio => {
                radio.addEventListener('change', function () {
                    let minmaxFields = newRow.querySelectorAll('.minmax_value');
                    if (this.value === 'yes') {
                        minmaxFields.forEach(f => f.removeAttribute('disabled'));
                    } else {
                        minmaxFields.forEach(f => {
                            f.value = '';
                            f.setAttribute('disabled', true);
                        });
                    }
                });
            });

            groupIndex++;

            // Remove row functionality
            newRow.querySelector('.removeRow').addEventListener('click', function () {
                newRow.remove();
            });
        });
    });
</script>