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

<!-- SweetAlert2 CDN -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="page-content">
    <!-- Breadcrumb -->
    <div class="page-breadcrumb d-flex align-items-center mb-4"> 
        <div class="ps-3">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0">
                    <li class="breadcrumb-item"><a href="javascript:;"><i class="bx bx-home-alt text-primary"></i></a></li>
                    <li class="breadcrumb-item active text-muted" aria-current="page">All Roles</li>
                </ol>
            </nav>
        </div>
        <div class="ms-auto">
            <div class="btn-group">
                <a href="{{ route('add.roles') }}" class="btn btn-primary px-4 py-2 shadow rounded-pill add-role-btn">
                    <i class="bx bx-plus-circle" style="font-size: 1.2rem;"></i> Add Roles
                </a>  
            </div>
        </div>
    </div>
    <!-- End Breadcrumb -->

    <div class="card shadow-sm border-0">
        <div class="card-body">
            <h4 class="fw-bold text-center text-primary mb-4">Roles List</h4>
            <div class="table-responsive">
                <table id="example" class="table table-striped table-bordered align-middle shadow-sm rounded">
                    <thead class="table-primary">
                        <tr>
                            <th>#</th>
                            <th>Roles Name</th> 
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($roles as $key => $item)
                            <tr>
                                <td>{{ $key + 1 }}</td>
                                <td>{{ $item->name }}</td>
                                <td class="text-center">
                                    <a href="{{ route('edit.roles',$item->id) }}" class="btn btn-sm btn-info rounded-pill px-4 shadow-sm action-btn">
                                        <i class="bx bx-edit"></i> Edit
                                    </a>   
                                    <button class="btn btn-sm btn-danger rounded-pill px-4 shadow-sm action-btn delete-btn" data-id="{{ $item->id }}">
                                        <i class="bx bx-trash"></i> Delete
                                    </button>                    
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Custom Styles -->
<style>
    /* Add Role Button */
    .add-role-btn {
        background: linear-gradient(135deg, #28a745, #218838);
        border: none;
        transition: all 0.3s ease-in-out;
    }

    .add-role-btn:hover {
        transform: scale(1.08);
        box-shadow: 0px 5px 20px rgba(40, 167, 69, 0.4);
    }

    /* Table Styling */
    .table-hover tbody tr:hover {
        background: rgba(0, 123, 255, 0.1);
        transition: background 0.3s ease-in-out;
    }

    .table thead th {
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
    }

    /* Action Buttons */
    .action-btn {
        transition: all 0.2s ease-in-out;
    }

    .action-btn:hover {
        transform: scale(1.1);
    }
</style>

<!-- SweetAlert2 Script for Delete Confirmation -->
<script>
    // Attach a click event to all delete buttons
    document.querySelectorAll('.delete-btn').forEach(button => {
        button.addEventListener('click', function() {
            var roleId = this.getAttribute('data-id'); // Get the role ID
            var deleteUrl = "{{ route('delete.roles', ':id') }}".replace(':id', roleId); // Replace placeholder with actual ID

            // SweetAlert2 confirmation dialog
            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) {
                    // If the user confirms, redirect to the delete URL
                    window.location.href = deleteUrl;

                    // Show a second alert after the deletion has happened
                    Swal.fire({
                        title: 'Deleted!',
                        text: 'Your file has been deleted.',
                        icon: 'success',
                        confirmButtonColor: '#3085d6'
                    });
                }
            });
        });
    });
</script>

@endsection