@extends('admin.layout.app')
@section('content')
    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-12">
                <div class="bg-light rounded h-100 p-4">
                    <h6 class="mb-4">{{$category->name}} Items</h6>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Price</th>
                                <th scope="col">Action</th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($menuItems as $item)
                                <tr>
                                    <th scope="row">{{$item->id ?? ''}}</th>
                                    <td>{{$item->name ?? ''}}</td>
                                    <td>{{$item->price ?? ''}}</td>
                                    <td>
                                        <a href="{{route('admin.item.edit',$item->id)}}" class="btn btn-primary m-2">Edit</a>
                                        <a href="#" class="btn btn-danger m-2" data-bs-toggle="modal"
                                           data-bs-target="#deleteModal" data-id="{{$item->id}}">Delete</a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Are you sure you want to delete this item?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <a id="confirmDeleteBtn" href="#" class="btn btn-danger">Delete</a>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        document.querySelectorAll('.btn-danger[data-bs-toggle="modal"]').forEach(button => {
            button.addEventListener('click', function () {
                // Get the category ID from the data-id attribute
                const categoryId = this.getAttribute('data-id');

                // Construct the delete URL using the category ID and Laravel's route helper
                const deleteUrl = `{{ route('admin.item.destroy', ':id') }}`.replace(':id', categoryId);

                // Update the modal's delete button with the new URL
                document.getElementById('confirmDeleteBtn').setAttribute('href', deleteUrl);
            });
        });

        $(document).ready(function () {
            $('#example').DataTable({
                responsive: true
            });

        });


    </script>
@endpush