{{-- resources/views/admin/pages/menus.blade.php --}}
@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</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>
                @else
                <li><a href="{{ url('admin/dashboard') }}">Dashboard</a></li>
                @endif
                <li><a class="link-effect" href="#">Menu</a></li>
            </ol>
        </div>
    </div>
</div>
<!-- Content -->
<div class="content">
    <div class="block">
        	<!-- Tab Navigation -->  
                  @if(isset($hotels)) 
				                    @include('admin.navigation-tabs')
                  @endif
                                    <!-- Tab Navigation -->
        <div class="block-header">
            <a class="btn btn-success pull-right" id="add_menu_btn">
                <i class="fa fa-plus"></i> Add Menu
            </a>
        </div>

        <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

            <!-- Table -->
            <table id='menuTable' class="table table-hover table-header-bg menu-dataTable-full">
                <thead>
                    <tr>
                        <th>SNo.</th>
                        <th>Menu Name</th>
                         <th>Type</th>
                        <th class="text-center" style="width: 15%;">Total Groups</th>
                       
                        <th class="text-center" style="width: 15%;">View / Assign</th>
                        <th class="text-center" style="width: 15%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($menus as $i => $menu)
                        <tr>
                            <td>{{ $i + 1 }}</td>
                            <td>{{ $menu->name }}</td>
                            <td>{{ $menu->occasion_type_data['name'] ?? '—' }}</td>
                            <td class="text-center">
                                @if($menu->item_group_ids)
                                    {{ count(json_decode($menu->item_group_ids, true)) }} groups
                                @else
                                    0 groups
                                @endif
                            </td>
                            <td class="text-center">
                                <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>    
                                <br/>
                               
                            </td>
                            <td class="text-center">
                                <div class="btn-group">
                                    <button class="btn btn-xs btn-default open_modal_menu" 
                                            data-id="{{ $menu->id }}" title="Edit">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <a href="{{ url('menus/delete/'.$menu->id) }}" 
                                       class="btn btn-xs btn-default" 
                                       onclick="return confirm('Are you sure?')">
                                        <i class="fa fa-times"></i>
                                    </a> 
                                    <!-- if $hotel_id then hide this -->
       @if(!empty($hotel_id))
    <!-- Show this if hotel_id is present -->
    <a href="{{ url('admin/hotel/menu/'.$hotel_id.'/'.$menu->id) }}" class="btn btn-xs btn-default">
        <i class="fa fa-eye"></i>
    </a>
@else
    <!-- Show this if hotel_id is NOT present -->
    <a  href="{{ url('admin/hotel/menu/0/'.$menu->id) }}" class="btn btn-xs btn-default">
        <i class="fa fa-eye"></i>
    </a>
@endif
  </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center">No menus found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 🟢 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>
                      <input type="hidden" name="hotel_id" value="{{ $hotel_id }}">

                    </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: 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-- 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">

                    <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: 300px; overflow-y: auto;" id="groups_list">
                        @foreach($total_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">
                        <button type="submit" class="btn btn-primary">Save</button>
                        <a class="btn btn-success pull-right" id="add_item_group"><i class="fa fa-plus"></i> Add Item Group</a>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Back</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>
<!-- Select2 and jQuery -->
<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 src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {
    // Initialize Select2 inside modal (fixed)
    $('#category_id').select2({
        tags: true,
        placeholder: "-- Select Category --",
        width: 'resolve',
        dropdownParent: $('#modal-add-menu'), // ✅ Fix misalignment issue
        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
    $('#add_menu_btn').on('click', function() {
        $('#modal-add-menu').modal('show');
        $('.modal-title').text('Add Menu');
        $('#menu_id').val('');
        $('#menu_name').val('');
        $('#category_id').val(null).trigger('change');
    });

    // 🟡 Open Edit Menu Modal
    $(document).on('click', '.open_modal_menu', function() {
        var id = $(this).data('id');

        $.ajax({
            url: '{{ url("menus/get") }}/' + id,
            type: 'GET',
            success: function(data) {
                if (data) {
                    $('#modal-add-menu').modal('show');
                    $('.modal-title').text('Edit Menu');
                    $('#menu_id').val(data.id);
                    $('#menu_name').val(data.name);
                    $('#category_id').val(data.occasion_type).trigger('change');
                } else {
                    alert('Menu not found.');
                }
            },
            error: function() {
                alert('Failed to fetch menu 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');
    });

    // 🔍 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);
        });
    });
    // Add Item grouppopup
       $('#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');
    });
      $('#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;
        }
    });
});
</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