@extends("admin.admin_app")

@section("content")
<!-- Page Header -->
<div class="content bg-gray-lighter">
    <div class="row items-push">
        <div class="col-sm-7">
            <h1 class="page-heading">Menu ->{{$menu->name}}</h1>
        </div>
        <div class="col-sm-5 text-right hidden-xs">
            <ol class="breadcrumb push-10-t">
                <li><a href="{{ URL::to('admin/hotel-list') }}">Hotels</a></li>
                <li>
                    <a class="link-effect" href="">
                        Menu 
                    </a>
                </li>
            </ol>
        </div>
    </div>
</div>

<!-- ✅ Assign Groups Button -->
 
  
                                
                 
                                
                                 <div class="block-content">
            <!-- Errors -->
            @if ($errors->any())
                <div class="alert alert-danger">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Flash message -->
            @if (Session::has('flash_message'))
                <div class="alert alert-success">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    {{ Session::get('flash_message') }}
                </div>
            @endif

              <div class="d-flex justify-content-end w-100" style='margin:5px;width: 100%;justify-content: flex-end;display: flex;'>
    <button 
        class="assign_groups_btn btn btn-primary" 
        data-id="{{ $menu->id }}" 
        data-item-groups='@json(json_decode($menu->item_group_ids ?? "[]", true))'>
        Assign Groups
    </button>
</div>
            <!-- Table -->
            <table id="menuTable" class="table table-hover table-header-bg dataTable-full">
                <thead>
                    <tr>
                        <th>SNo.</th>
                        <th>Group Name</th>
                        <th>Group Type</th>
                        <th>Description</th>
                        <th>Total Items</th>
                        <th>Item Used</th>
                        <th>Status</th>
                        <th class="text-center" style="width:15%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($groupsused as $i => $group)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{ $group->name }}</td>
                            <td>{{ $group->type_data['name'] ?? '—' }}</td>
                            <td>{{ $group->description ?? '-' }}</td>
                            <td>
                                @if($group->items->count() > 0)
                                    {{ $group->items->count() }}
                                @else
                                    <span>No items</span>
                                @endif
                            </td>
                            <td>{{$group->total_items_used}}</td>
                            <td>
                                @if($group->is_active)
                                    <a href="{{ url('/menu/items_group/toggle-status/'.$group->id) }}" class="badge bg-success text-white">Active</a>
                                @else
                                    <a href="{{ url('/menu/items_group/toggle-status/'.$group->id) }}" class="badge bg-danger text-white">Inactive</a>
                                @endif
                            </td>
                            <td class="text-center">
                                <div class="btn-group">
                                    <a href="{{ url('admin/menu/items_group/items_list_for_menu/'.$group->id.'/'.$menu->id.'/'.$menu->hotel_id) }}" 
                                       title="View Items" 
                                       class="btn btn-xs btn-default">
                                        <i class="fa fa-eye"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center">No item groups found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

<!-- 🧩 Dependencies -->
<!-- 🟢 Modal: Add/Edit Menu -->
<div class="modal fade" id="modal-add-menu" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-popout">
        <div class="modal-content">
            <div class="modal-header bg-primary-dark">
                <h4 class="modal-title text-white">Add Menu</h4>
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                {!! Form::open(['url' => '/menus/save', 'id' => 'menu_form']) !!}
                    <input type="hidden" name="id" id="menu_id">

                    <div class="form-group">
                        <label for="menu_name">Menu Name</label>
                        <input type="text" name="name" id="menu_name" class="form-control" placeholder="Enter menu name" required>
                    </div>

                    <!-- Menu Category Select -->
                    <div class="form-group">
                        <label for="category_id">Category</label>
                        <select name="category_id" id="category_id" class="form-control" style="width:100%" >
                            <option value="">-- Select Category --</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                        <small class="form-text text-muted">You can type a new category and press Enter to add.</small>
                    </div>

                    <div class="text-right">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>


<!-- 🟢 Modal: Add/Edit Item Group -->
<div class="modal fade" id="modal-add_item_group" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-popout">
        <div class="modal-content">
            <div class="modal-header bg-primary-dark">
                <h4 class="modal-title text-white">Add Item Group</h4>
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                {!! Form::open(['url' => 'menu/items_group/add', 'id'=>'item_group_form']) !!}
                    <input type="hidden" name="id" id="group_id" value="">
                    <input type="hidden" name="menu_id" id="menu_id" value="{{ $menu->id ?? '' }}">

                    <div class="form-group">
                        <label>Group Name</label>
                        <input type="text" class="form-control" id="group_name" name="name" required>
                    </div>

                    <!-- 🟢 Group Type (Select2) -->
                    <div class="form-group">
                        <!-- <label for="group_type_id">Group Type</label> -->
                        <select name="group_type_id" id="group_type_id" class="form-control" style="width:100%">
                            <option value="">-- Select Group Type --</option>
                            @foreach($group_types as $type)
                                <option value="{{ $type->id }}">{{ $type->name }}</option>
                            @endforeach
                        </select>
                        <small class="form-text text-muted">You can type a new type and press Enter to add.</small>
                    </div>

                    <div class="form-group">
                        <label>Description</label>
                        <textarea class="form-control" id="group_description" name="description"></textarea>
                    </div>

                    <div class="text-right">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>
<!-- 🟢 Modal: Assign Item/Service Groups -->
<div class="modal fade" id="modal-assign-groups" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-popout">
        <div class="modal-content">
            <div class="modal-header bg-primary-dark">
                <h4 class="modal-title text-white">Assign Item/Service Groups</h4>
                <button type="button" class="close text-white" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                {!! Form::open(['url' => '/menus/assign-groups', 'id' => 'assign_groups_form']) !!}
                    <input type="hidden" name="menu_id" id="assign_menu_id">

                    <!-- 🔍 Search and Assign Existing Groups -->
                    <div class="form-group">
                        <label>Search Groups</label>
                        <input type="text" id="search_groups" class="form-control" placeholder="Search groups...">
                    </div>

                    <div class="form-group" style="max-height: 250px; overflow-y: auto;" id="groups_list">
                        @foreach($groups as $group)
                        <div class="form-check mb-1">
                            <input type="checkbox" name="item_group_ids[]" value="{{ $group->id }}" class="form-check-input group_checkbox" id="group{{ $group->id }}">
                            <label class="form-check-label" for="group{{ $group->id }}">{{ $group->name }}</label>
                        </div>
                        @endforeach
                    </div>

                    <div class="text-right mt-2">
                        <a class="btn btn-success pull-right" id="add_item_group"><i class="fa fa-plus"></i> Add Item Group</a>
  
                        <button type="submit" class="btn btn-primary">Save</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Back</button>
                    </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
</div>


<!-- Select2 and jQuery -->
 <!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize Select2 inside modal (fixed)
    $('#group_type_id').select2({
        tags: true,
        placeholder: "-- Select Category --",
        width: 'resolve',
        // dropdownParent: $('#modal-add-menu'), // ✅ Fix misalignment issue
            dropdownParent: $('#modal-add_item_group'),
        createTag: function(params) {
            return {
                id: params.term,
                text: params.term,
                newOption: true
            }
        },
        templateResult: function(data) {
            var $result = $('<span></span>').text(data.text);
            if (data.newOption) $result.append(' <em>(new)</em>');
            return $result;
        }
    });

    // 🟢 Open Add Menu Modal
  
    // 🟢 Open "Add Item Group" modal
    $('#add_item_group').on('click', function() {
        $('#modal-add_item_group').modal('show');
        $('#modal-assign-groups').modal('hide');
        $('.modal-title').text('Add Item Group');
        $('#group_id').val('');
        $('#group_name').val('');
        $('#group_description').val('');
        $('#group_type_id').val(null).trigger('change');
    });

    // 🟡 Open modal for editing existing group
    $(document).on('click', '.open_modal_item_group', function() {
        var id = $(this).data('id');
        $.ajax({
            url: '{{ url("menu/items_group/get") }}/' + id,
            type: 'GET',
            success: function(data) {
                if (data) {
                    $('#modal-add_item_group').modal('show');
                  
                    $('.modal-title').text('Edit Item Group');
                    $('#group_id').val(data.id);
                    $('#group_name').val(data.name);
                    $('#group_description').val(data.description);
                    $('#group_type_id').val(data.type_id).trigger('change');
                } else {
                    alert('No data found for this group.');
                }
            },
            error: function() {
                alert('Failed to fetch item group details.');
            }
        });
    });


    // 🟢 Open Assign Groups Modal
    // $(document).on('click', '.assign_groups_btn', function() {
    //     var menuId = $(this).data('id');
    //     $('#assign_menu_id').val(menuId);

    //     $('.group_checkbox').prop('checked', false);

    //     var assigned = $(this).data('item-groups') || [];
    //     assigned.forEach(function(id) {
    //         $('#group' + id).prop('checked', true);
    //     });

    //     $('#modal-assign-groups').modal('show');
    // });
    $(document).on('click', '.assign_groups_btn', function() {
    var menuId = $(this).data('id');
    $('#assign_menu_id').val(menuId);

    // Uncheck all first
    $('.group_checkbox').prop('checked', false);

    var assigned = $(this).data('item-groups') || [];

    // Re-check the assigned ones
    assigned.forEach(function(id) {
        $('#group' + id).prop('checked', true);
    });

    // 🟢 Move checked checkboxes to the top
    var $groupsList = $('#groups_list');
    var $checked = $groupsList.find('.form-check').has('input:checked');
    var $unchecked = $groupsList.find('.form-check').has('input:not(:checked)');

    $groupsList.empty().append($checked).append($unchecked);

    // Finally, show modal
    $('#modal-assign-groups').modal('show');
});


    // 🔍 Filter groups
    $('#search_groups').on('keyup', function() {
        var value = $(this).val().toLowerCase();
        $('#groups_list .form-check').filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
        });
    });
});
</script>

<script>
$(document).ready(function() {
    $('#menuTable').DataTable({
        pageLength: 10,
        ordering: true,
        searching: true,
        language: {
            searchPlaceholder: "Search menus...",
            search: "",
        },
        columnDefs: [
            { orderable: false, targets: [3, 4] } // disable sorting for View/Assign & Actions
        ]
    });
});
</script>
@endsection