@extends('admin.admin_app')

@section('content')

<div class="content bg-gray-lighter">
    <div class="row items-push">
        <div class="col-sm-7">
            <h1 class="page-heading">Items in {{ $group->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 href="{{ url('menu/'.$menu_id) }}">Menu {{$menu_id}}</a></li>
                <li class="active">Items List</li>
            </ol>
        </div>
    </div>
</div>

<div class="content">
    <div class="block">
        <div class="block-header">
            <a href="/menu/{{$menu_id}}"  class="btn btn-primary pull-right">
                <i class="fa fa-arrow-left"></i> Back to Groups
            </a>
            <button class="btn btn-success pull-right mr-2" id="add_item_btn">
                <i class="fa fa-plus"></i> Add Item
            </button>
        </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
            <h4>Group: {{ $group->name }}</h4>
            <p>{{ $group->description ?? 'No description available.' }}</p>

            @if($group->items->count())
                <table id='menuTable' class="table table-bordered table-hover table-header-bg table-striped">
                    <thead>
                        <tr>
                            <th>S.No</th>
                            <th>Item Name</th>
                            <th>Description</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($group->items as $index => $item)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $item->name }}</td>
                                <td>{!! $item->description ?? '-' !!}</td>

                                <td>
                                    @if($item->is_active)
                                        <a href="{{ url('/menu/items_group_items/toggle-status/'.$item->id) }}" 
                                        class="badge bg-success text-white">Active</a>
                                    @else
                                        <a href="{{ url('/menu/items_group_items/toggle-status/'.$item->id) }}" 
                                        class="badge bg-danger text-white">Inactive</a>
                                    @endif
                                </td>
                                <td>
                                    <button class="btn btn-xs btn-default edit_item_btn" data-id="{{ $item->id }}">
                                        <i class="fa fa-pencil"></i>
                                    </button>
                                    <a href="{{ url('menu/items_group/remove_item/'.$item->id) }}" 
                                       onclick="return confirm('Are you sure?')" class="btn btn-xs btn-default">
                                       <i class="fa fa-times"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @else
                <div class="alert alert-info">No items found in this group.</div>
            @endif
        </div>
    </div>
</div>

<!-- Modal: Add/Edit Item -->
<div class="modal fade" id="modal-add_item" 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</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                {!! Form::open(['url' => 'menu/items_group/save_item', 'id' => 'item_form']) !!}
                <input type="hidden" name="id" id="item_id" value="">
                <input type="hidden" name="group_id" value="{{ $group->id }}">
                <div class="form-group">
                    <label>Item Name</label>
          
                    <input type="text" class="form-control" name="name" id="item_name" required>
                </div>
                <div class="form-group">
                    <label>Description</label>
                    
                    <!-- <textarea type="text" name="description" class="js-summernote" rows="3" 
                    id="description"
                    ></textarea> -->
                   
                    <textarea type="text" class="form-control" name="description" id="description" >
                        </textarea>
                </div>
             
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
<script>
    // Open Add Item Modal
    $('#add_item_btn').on('click', function() {
        $('#modal-add_item').modal('show');
        $('#item_form')[0].reset();
        $('#item_id').val('');
        $('.modal-title').text('Add Item');
    });



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

        $.get('{{ url("menu/items_group/get_item") }}/' + id, function(data) {
            $('#item_id').val(data.id);
            $('#item_name').val(data.name);
            $('#description').val(data.description);
            //   $('#description').summernote('code', data.description);
        //            setTimeout(function() {
        //     $('#description').summernote('code', data.description || '');
        // }, 100);
            $('#item_status').val(data.is_active);
            $('.modal-title').text('Edit Item');
            $('#modal-add_item').modal('show');
        });
    });
</script>

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


@endsection