@extends("admin.admin_app")

@section("content")
<!-- Page Header -->
 <style>
     .edit_group_label{
        font-size:14px;
           font-weight: 800;
     }
    </style>
<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">
                  @if(isset($hotel_id) && !empty($hotel_id))
                    {{-- When editing an existing hotel --}}
                    <li><a href="{{ url('admin/hotels/addhotel/' . $hotel_id) }}">Edit Hotel</a></li>
                @elseif(isset($hotel_id)&& $hotel_id !=0)
                <li><a href="{{ URL::to('admin/hotel-list') }}">Menu</a></li>
                @endif
                <li>
                    <a class="link-effect" href="/menu">
                        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>Note </th>
                         <th>Service Type</th>
                        <th>Status</th>
                        <th class="text-center" style="width:15%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($menu_item_group as $i => $group)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{$group->subname ?? $group->itemGroup->name}}</td>
                            <td>{{ $group->itemGroup->type->name?? '—' }}</td>
                            <td>{{ $group->des ?? $group->itemGroup->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 style='maxWidth:200px'>
                                {{$group->note}}
                            </td>
                            <td>
                                {{$group->selection_type}}
                            </td>
                            <td>
                                @if($group->itemGroup->is_active)
                                    <a href="{{ url('/menu/items_group/toggle-status/'.$group->itemGroup->id) }}" class="badge bg-success text-white">Active</a>
                                @else
                                    <a href="{{ url('/menu/items_group/toggle-status/'.$group->itemGroup->id) }}" class="badge bg-danger text-white">Inactive</a>
                                @endif
                            </td>
                            <td class="text-center">
                                <button class="btn btn-xs btn-default open_modal_menu"  id='menu_item_group'
                                            data-id="{{ $group->id }}" title="Edit">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                <div class="btn-group">

                                    <a href="{{ url('admin/menu/items_group/items_list_for_menu/'.$group->itemGroup->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_groupByID/update', 'id'=>'item_group_form']) !!}
    <input type="hidden" name="id" id="group_id" value="">

    <!-- 🔹 Row 1: Main Course Name -->
    <div class="form-group row align-items-center">
        <div class="col-md-12">
            <label class='edit_group_label' ><b>Group Name</b></label>
            <input type="text" class="form-control" name="main_course" id="main_course" disabled>
        </div>
    </div>

    <!-- 🔹 Row 2: Subname, Number, Select (Radio) -->
    <div class="form-group row align-items-center">
        <div class="col-md-8">
            <label  class='edit_group_label' >Display Group Name</label>
            <input type="text" class="form-control" name="subname" id="subname">
        </div>

        <div class="col-md-4">
            <label  class='edit_group_label' >No.</label>
            <input type="number" class="form-control" name="number_of_items_provided" id="number_of_items_provided">
        </div>
  </div>
   <div class="form-group row align-items-center">
        <div class="col-md-12">
            <label class="d-block mb-2 edit_group_label">Select</label>
            <div class="d-flex gap-3" style='flex-direction: row; display:flex; gap:20px'>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="group_service_type" id="pickup" value="pick-up">
                    <label class="form-check-label" for="pickup">Pick & Choose Items</label>
                </div>

                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="group_service_type" id="selected" value="selected">
                    <label class="form-check-label" for="selected">Selected Items</label>
                </div>
            </div>
        </div>
    </div>

    <!-- 🔹 Row 3: Time and Duration -->
    <div class="form-group row align-items-center">
        <div class="col-md-4">
            <label  class='edit_group_label' > Start Time</label>
            <input type="time" class="form-control" name="pick_from" id="pick_from">
        </div>

        <div class="col-md-4">
            <label  class='edit_group_label' >End Time </label>
            <input type="time" class="form-control" name="pick_to" id="pick_to">
        </div>

        <div class="col-md-4">
            <label  class='edit_group_label' >Duration</label>
            <input type="text" class="form-control" name="duration" id="duration" placeholder="e.g., 2 HR 8">
        </div>
    </div>

    <!-- 🔹 Row 4: Note -->
    <div class="form-group row align-items-center">
        <div class="col-md-12">
            <label  class='edit_group_label' >Note</label>
            <textarea class="form-control" id="group_note" name="note" rows="1"></textarea>
        </div>
    </div>

    <div class="text-right mt-3">
        <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: Edit Menu Item Group -->
<div class="modal fade" id="modal-edit_menu_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">Update 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">
                    <input type="hidden" name="deleted_group_ids[]" id="deleted_group_ids">
                    <!-- 🔍 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 }} ({{ optional($group->type_data)->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');
    });
   
    //  $('#menu_item_group').on('click', function() {
    //     $('#modal-edit_menu_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');
    // });

       $(document).on('click', '#menu_item_group', function() {
        var id = $(this).data('id');
        // $.ajax({
        //     url: '{{ url("menu/items_groupByID") }}/' + id,
        //     type: 'GET',
        //     success: function(data) {
        //         if (data) {
        //             $('#modal-add_item_group').modal('show');
        //             $('.modal-title').text('Edit Item Group Detailes');
        //             $('#group_id').val(data.id);
        //             $('#main_course').val(data.name);
        //             $('#group_name').val(data.name);
        //             $('#group_note').val(data.note);
        //             $('#number_of_items_provided').val(data.number_of_items_provided);
        //             $('#group_description').val(data.description);
        //             $('#group_service_type').val(data.selection_type);
        //             $('#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.');
        //     }
        // });
          $.ajax({
                url: '{{ url("menu/items_groupByID") }}/' + id,
                type: 'GET',
                    success: function(data) {
                        if (data) {
                            $('#modal-add_item_group').modal('show');
                            $('.modal-title').text('Edit Item Group Details');

                            // Basic fields
                            $('#group_id').val(data.id);
                            $('#main_course').val(data.name);
                            $('#subname').val(data.subname);
                            $('#group_note').val(data.note);
                            $('#number_of_items_provided').val(data.number_of_items_provided);
                            $('#group_description').val(data.description);

                            // Time fields
                            $('#pick_from').val(data.servicefrom);
                            $('#pick_to').val(data.serviceto);
                            $('#duration').val(data.timingOfServie);

                            // Radio selection
                            if (data.selection_type === 'pick-up') {
                                $('#pickup').prop('checked', true);
                            } else if (data.selection_type === 'selected') {
                                $('#selected').prop('checked', true);
                            }
                        } else {
                            alert('No data found for this group.');
                        }
                    },
                    error: function() {
                        alert('Failed to fetch item group details.');
                    }
                });
    });


    $('#assign_groups_form').on('submit', function(e) {
    const unchecked = [];

    // loop over all checkboxes
    $('#groups_list .group_checkbox').each(function() {
        if (!$(this).is(':checked')) {
            unchecked.push($(this).val());
        }
    });

    // clear any old hidden inputs (to avoid duplicates)
    $(this).find("input[name='deleted_group_ids[]']").remove();

    // append new hidden inputs for unchecked items
    unchecked.forEach(id => {
        $('<input>').attr({
            type: 'hidden',
            name: 'deleted_group_ids[]',
            value: id
        }).appendTo('#assign_groups_form');
    });

    console.log('Unchecked item IDs:', unchecked); // for debugging
});
    // 🟢 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