@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>401k-allocations</h6>
                        <a href="{{route('admin.allocation.create')}}" class="btn btn-success" >Add New 401k-allocations</a>
                    </div>
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Description</th>
                            <th scope="col">Status</th>

                            <th scope="col">Action</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach($allocations as $investment)
                            <tr>
                                <th scope="row">{{$investment->id ?? ''}}</th>
                                <td>{{$investment->name ?? ''}}</td>
                                <td>{{ implode(', ', json_decode($investment->description)) }}</td>

                                <td>
                                     <span class="{{$investment->status === 1 ? 'badge rounded-pill bg-success' : 'badge rounded-pill bg-danger'}}">
                                                {{$investment->status === 1 ? 'Approve' : 'Not Approve'}}</span>
                                </td>
                                <td>
                                    <a href="{{route('admin.allocation.edit',$investment->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="{{$investment->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 category, Deleting the Category will also delete all the items associated with this category?
                </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.allocation.destroy', ':id') }}`.replace(':id', categoryId);

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

    </script>
    @endpush