@extends('admin.admin_dashboard')
@section('admin')

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-flex align-items-center mb-4" style="background: linear-gradient(45deg, #007bff, #0056b3); border-radius: 10px; color: white;"> 
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="javascript:;" style="color: white;"><i class="bx bx-home-alt"></i></a></li>
                    <li class="breadcrumb-item active" aria-current="page" style="color: white;">All Roles in Permission</li>
                </ol>
            </nav>
        </div>
        <div class="ms-auto">
            <a href="{{ route('add.roles.permission') }}" class="btn btn-primary px-4 py-2 shadow rounded-pill">Add Roles Permission</a>  
        </div>
    </div>
    <!-- End Breadcrumb -->

    <div class="card shadow-sm border-0">
        <div class="card-body">
            <div class="table-responsive">
                <table id="example" class="table table-striped table-bordered" style="width:100%">
                    <thead class="table-primary">
                        <tr>
                            <th>Sl</th>
                            <th>Action</th>
                            <th>Roles Name</th>
                            <th>Permissions</th>   
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($roles as $key => $item) 
                        <tr>
                            <td>{{ $key + 1 }}</td>
                             <td>
                                <a href="{{ route('admin.edit.roles', $item->id) }}" class="btn btn-warning px-4 py-2 shadow rounded-pill">Edit</a>   
                                <a href="javascript:void(0);" class="btn btn-danger px-4 py-2 shadow rounded-pill delete-role" data-id="{{ $item->id }}">Delete</a>                    
                            </td>
                            <td>{{ $item->name }}</td>  
                            <td>
                                @foreach ($item->permissions as $prem)
                                    <span class="badge bg-info custom-badge">{{ $prem->name }}</span>
                                @endforeach            
                            </td>
                           
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<!-- Include SweetAlert & jQuery -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<!-- SweetAlert Delete Confirmation -->
<script>
    $(document).ready(function () {
        $('.delete-role').click(function (e) {
            e.preventDefault();
            var roleId = $(this).data('id');

            Swal.fire({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#d33",
                cancelButtonColor: "#3085d6",
                confirmButtonText: "Yes, delete it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: "{{ route('admin.delete.roles', '') }}/" + roleId,
                        type: "GET",
                        success: function (response) {
                            Swal.fire(
                                "Deleted!",
                                "The role has been deleted.",
                                "success"
                            ).then(() => {
                                location.reload(); // Reload page after deletion
                            });
                        },
                        error: function () {
                            Swal.fire(
                                "Error!",
                                "Something went wrong.",
                                "error"
                            );
                        }
                    });
                }
            });
        });
    });
</script>

<!-- Custom Styles -->
<style>
    .page-breadcrumb {
        background: linear-gradient(45deg, #007bff, #0056b3);
        color: white;
        border-radius: 10px;
        padding: 10px 20px;
    }

   .custom-badge {
        font-size: 0.7rem; /* Smaller font size */
        padding: 0.2rem 0.5rem; /* Reduced padding */
        line-height: 1; /* Adjust line height for a more compact appearance */
    }

    .btn-primary {
        background: linear-gradient(135deg, #28a745, #218838);
        border: none;
        transition: all 0.3s ease-in-out;
    }

    .btn-primary:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
    }

    .btn-warning {
        background: linear-gradient(135deg, #ffac33, #ff8000);
        border: none;
        transition: all 0.3s ease-in-out;
    }

    .btn-warning:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(255, 172, 51, 0.3);
    }

    .btn-danger {
        background: linear-gradient(135deg, #e33d4a, #c0392b);
        border: none;
        transition: all 0.3s ease-in-out;
    }

    .btn-danger:hover {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(227, 61, 74, 0.3);
    }

    .table-primary {
        background: #f7f7f7;
        color: #333;
    }

    .badge {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }
</style>

@endsection