@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('admin/dashboard') }}">Dashboard</a></li>
                <li><a class="link-effect" href="#">Menu Item Groups</a></li>
            </ol>
        </div>
    </div>
</div>
<!-- END Page Header -->

<div class="content">
    <div class="block">
        <div class="block-header">
            <a class="btn btn-success pull-right" id="add_item_group"><i class="fa fa-plus"></i> Add Item Group</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 dataTable-full">
                <thead>
                    <tr>
                        <th>SNo.</th>
                        <th>Group Name</th>
                        <th>Group Type</th>
                        <th>Description</th>
                        <th>Items</th>
                        <th>Status</th>
                        <th class="text-center" style="width:15%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($groups 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() }} items
                                @else
                                    <span>No items</span>
                                @endif
                            </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">
                                    <button class="btn btn-xs btn-default open_modal_item_group" 
                                            data-id="{{ $group->id }}" title="Edit">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <a href="{{ url('menu/items_group/removed/'.$group->id) }}" 
                                       class="btn btn-xs btn-default" 
                                       onclick="return confirm('Are you sure?')">
                                        <i class="fa fa-times"></i>
                                    </a>
                                    <a href="{{ url('menu/items_group/items_list/'.$group->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>
    </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>

<!-- 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
    $('#group_type_id').select2({
        tags: true,
        placeholder: "-- Select Group Type --",
        width: 'resolve',
        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 Item Group" modal
    $('#add_item_group').on('click', function() {
        $('#modal-add_item_group').modal('show');
        $('.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.');
            }
        });
    });

    // 🟢 DataTable setup
    $('#menuTable').DataTable({
        pageLength: 10,
        ordering: true,
        searching: true,
        language: {
            searchPlaceholder: "Search item groups...",
            search: "",
        },
        columnDefs: [
            { orderable: false, targets: [5, 6] } // disable sorting for Status & Actions
        ]
    });
});
</script>

@endsection