@extends('admin.admin_app')

@section('content')
<div class="content">

    <h1 class="page-heading">Add Menu</h1>

    <form action="{{ url('admin/menu/save') }}" method="POST">
        @csrf

        <!-- Basic Details -->
        <div class="row">
            <div class="col-md-6 form-group">
                <label>Name <span class="text-danger">*</span></label>
                <input type="text" name="name" class="form-control" required>
            </div>

            <div class="col-md-6 form-group">
                <label>Price</label>
                <input type="text" name="price" class="form-control">
            </div>

            <div class="col-md-12 form-group">
                <label>Description</label>
                <textarea name="description" class="form-control" rows="3"></textarea>
            </div>
        </div>

        <hr>

        <!-- Select Item Groups -->
        <div class="form-group">
            <label>Add Item Groups</label>
            <div>
                <input type="checkbox" id="selectAllGroups"> <strong>Select / Deselect All</strong>
            </div>
            <div class="border rounded p-2 mt-2" style="max-height: 220px; overflow-y:auto;">
                @foreach($item_groups as $group)
                    <div class="form-check">
                        <input type="checkbox" name="item_groups[]" value="{{ $group->id }}"
                            class="form-check-input item-group-checkbox" id="group{{ $group->id }}">
                        <label for="group{{ $group->id }}" class="form-check-label">{{ $group->name }}</label>
                    </div>
                @endforeach
            </div>
        </div>

        <hr>

       <!-- Dynamic Items Section -->
<div id="group-items-container">
    @foreach($item_groups as $group)
        <div id="group-items-{{ $group->id }}" class="group-items border rounded p-3 mb-4"
            style="display:none; background:#f9f9f9;">
            
            <h5 class="mb-3">Add Items for <strong>{{ $group->name }}</strong></h5>
            <table class="table table-bordered">
                <thead class="table-light">
                    <tr>
                        <th>Select</th>
                        <th>Item Name</th>
                        <th>Cost</th>
                        <th>Pickable</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($group->items as $item)
                        <tr>
                            <td>
                                <input type="checkbox" 
                                    name="items[{{ $group->id }}][]" 
                                    value="{{ $item->id }}">
                            </td>
                            <td>{{ $item->name }}</td>
                            <td>
                                <input type="number" 
                                    name="cost[{{ $item->id }}]" 
                                    class="form-control form-control-sm" 
                                    placeholder="Cost">
                            </td>
                            <td class="text-center">
                                <input type="checkbox" 
                                    name="pickable[{{ $item->id }}]" 
                                    value="1">
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endforeach
</div>


        <div class="text-center mt-4">
            <button type="button" onClick='getDetails()' class="btn btn-primary px-4">Save Menu</button>
        </div>

    </form>
    <script>
    document.addEventListener('DOMContentLoaded', function() {

        // Select / Deselect all groups
        const selectAllGroups = document.getElementById('selectAllGroups');
        const groupCheckboxes = document.querySelectorAll('.item-group-checkbox');

        selectAllGroups.addEventListener('change', function() {
            groupCheckboxes.forEach(chk => {
                chk.checked = selectAllGroups.checked;
                toggleGroupItems(chk);
            });
        });

        // Toggle visibility for each group
        groupCheckboxes.forEach(chk => {
            chk.addEventListener('change', function() {
                toggleGroupItems(chk);
            });
        });

        function toggleGroupItems(checkbox) {
            const groupId = checkbox.value;
            const groupDiv = document.getElementById('group-items-' + groupId);
            if (checkbox.checked) {
                groupDiv.style.display = 'block';
            } else {
                groupDiv.style.display = 'none';
            }
        }
    });
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {

    // Existing code for toggle group visibility
    const selectAllGroups = document.getElementById('selectAllGroups');
    const groupCheckboxes = document.querySelectorAll('.item-group-checkbox');

    selectAllGroups.addEventListener('change', function() {
        groupCheckboxes.forEach(chk => {
            chk.checked = selectAllGroups.checked;
            toggleGroupItems(chk);
        });
    });

    groupCheckboxes.forEach(chk => {
        chk.addEventListener('change', function() {
            toggleGroupItems(chk);
        });
    });

    function toggleGroupItems(checkbox) {
        const groupId = checkbox.value;
        const groupDiv = document.getElementById('group-items-' + groupId);
        groupDiv.style.display = checkbox.checked ? 'block' : 'none';
    }

    // Collect selected items in JS variable
    const getSelectedItems = () => {
        const itemsArray = [];

        document.querySelectorAll('#group-items-container tbody tr').forEach(row => {
            const itemCheckbox = row.querySelector('input[type="checkbox"][name^="items"]');
            if(itemCheckbox && itemCheckbox.checked) {
                const itemId = itemCheckbox.value;
                const groupId = itemCheckbox.closest('.group-items').id.replace('group-items-', '');
                const costInput = row.querySelector('input[name="cost[' + itemId + ']"]');
                const pickableCheckbox = row.querySelector('input[name="pickable[' + itemId + ']"]');

                itemsArray.push({
                    item_id: parseInt(itemId),
                    item_group_id: parseInt(groupId),
                    cost: costInput ? parseFloat(costInput.value || 0) : 0,
                    pickable: pickableCheckbox ? pickableCheckbox.checked : false
                });
            }
        });

        return itemsArray;
    }
      const selectedItems = getSelectedItems();
        console.log('Selected Items:', selectedItems);
    // Example: log selected items on form submit
       window.getDetails = () => {
        const selectedItems = getSelectedItems();
        console.log('Selected Items:', selectedItems);

        // Optionally, submit form here using AJAX or normal submission
        // form.submit();
    }

    const form = document.querySelector('form');
    form.addEventListener('submit', function(e){
        const selectedItems = getSelectedItems();
        console.log('Selected Items:', selectedItems);
        // If you want to prevent form submission to test:
        // e.preventDefault();
    });

});
</script>

</div>

@endsection