@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 Permission</li>
                </ol>
            </nav>
        </div>
        <div class="ms-auto">
            <a href="{{ route('add.permission') }}" class="btn text-white px-4 py-2 shadow rounded-pill add-permission-btn">
                <i class="bx bx-plus-circle" style="font-size: 1.2rem;"></i> Add Permission
            </a>
            &nbsp;&nbsp;
            <!-- Styled Import Button -->
            <a href="{{ route('import.permission') }}" class="btn btn-warning px-4 py-2 shadow rounded-pill import-export-btn">
                <i class="bx bx-upload" style="font-size: 1.2rem;"></i> Import
            </a>  
            &nbsp;&nbsp;
            <!-- Styled Export Button -->
            <a href="{{ route('export') }}" class="btn btn-danger px-4 py-2 shadow rounded-pill import-export-btn">
                <i class="bx bx-download" style="font-size: 1.2rem;"></i> Export
            </a>  
        </div>
    </div>
    <!-- End Breadcrumb -->

    <div class="card shadow-sm border-0">
        <div class="card-body">
            <h4 class="fw-bold text-center text-primary mb-3">Permissions List</h4>
            <div class="table-responsive">
                <table id="example" class="table table-hover align-middle shadow-sm rounded">
                    <thead class="table-primary">
                        <tr>
                            <th>#</th>
                            <th>Permission Name</th>
                            <th>Group Name</th> 
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($permissions as $key => $item) 
                            <tr>
                                <td class="fw-bold">{{ $key + 1 }}</td>
                                <td class="text-dark">{{ $item->name }}</td> 
                                <td class="text-muted">{{ $item->group_name }}</td> 
                                <td class="text-center">
                                    <a href="{{ route('edit.permission', ['id' => $item->id, 'group_name' => $item->group_name]) }}" class="btn btn-sm btn-info rounded-pill px-3 shadow-sm action-btn">
                                        <i class="bx bx-edit"></i> Edit
                                    </a>   
                                    <!-- Delete Button -->
                                    <button class="btn btn-sm btn-danger rounded-pill px-3 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 for Extra Beauty -->
<style>
    .add-permission-btn {
        background: linear-gradient(135deg, #007bff, #0056b3);
        border: none;
        transition: all 0.3s ease-in-out;
    }

    .add-permission-btn:hover {
        transform: scale(1.08);
        box-shadow: 0px 5px 20px rgba(0, 123, 255, 0.4);
    }

    .import-export-btn {
        background: linear-gradient(135deg, #ff9800, #ff5722);
        border: none;
        transition: all 0.3s ease-in-out;
    }

    .import-export-btn:hover {
        transform: scale(1.08);
        box-shadow: 0px 5px 20px rgba(255, 152, 0, 0.4);
    }

    .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-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 permissionId = this.getAttribute('data-id'); // Get the permission ID
            var deleteUrl = "{{ route('delete.permission', ':id') }}".replace(':id', permissionId); // 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;
                }
            });
        });
    });
</script>

@endsection