@extends('admin.layout.app')
@section('content')
    <div class="container-fluid pt-4 px-4">
        <div class="row g-4">
            <div class="col-sm-12 col-xl-12">
                <div class="bg-light rounded h-100 p-4">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h6>Menu Items Table</h6>
                        <a href="{{route('admin.item.create')}}" class="btn btn-success">Add New Item</a>
                    </div>
                    <table class="table table-striped" id="example">
                        <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($items 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 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 () {
            // Initialize DataTables with responsive design
            $('#example').DataTable({
                responsive: true
            });

        });


    </script>
@endpush