@extends('layouts.app', ['title' => __('Role')])

@section('admin_title')
{{__('Role')}}
@endsection

@section('content')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
<div class="header bg-gradient-primary pb-6 pt-5 pt-md-6"></div>

<div class="container-fluid mt--6">
    <div class="row">
        <div class="col">
            <div class="card shadow-lg border-0">

                {{-- Card Header --}}
                <div class="card-header bg-white border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h3 class="mb-0 fw-bold text-dark">
                                <i class="bi bi-shield-lock me-2 text-primary"></i>
                                {{ __('Role Management') }}
                            </h3>
                        </div>
                        <div class="col text-end">
                            <a href="{{ route('admin.role.create') }}" 
                               class="btn btn-primary btn-sm shadow-sm">
                                <i class="bi bi-plus-circle me-1"></i>
                                Add New Role
                            </a>
                        </div>
                    </div>
                </div>

                {{-- Flash Message --}}
                <div class="px-4 pt-3">
                    @include('partials.flash')
                </div>

                {{-- Table --}}
                <div class="table-responsive">
                    <table id="example123"
                                    class="table table-bordered dt-responsive nowrap table-striped align-middle"
                                    style="width:100%">
                                    <thead>
                                        <tr>
                                            <th>Role Name</th>
                                            <!-- <th>Permissions</th> -->
                                             <th>Status</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                   <tbody>
@foreach ($roles as $role)
<tr>
    <td>{{ ucfirst($role->name) }}</td>

    <!-- <td>
        @if($role->rights->count())
            @foreach($role->rights as $right)
                <span class="badge bg-secondary">
                    {{ $right->right_name }}
                </span>
            @endforeach
        @else
            <span class="text-muted">No Role Assigned</span>
        @endif
    </td> -->

    <!-- Status -->
    <td>
        @if($role->is_active == 1)
            <span class="badge bg-success">Active</span>
        @else
            <span class="badge bg-danger">Inactive</span>
        @endif
    </td>

    <!-- Actions -->
 <td class="text-center">
                                    <div class="d-flex gap-2">

                                        {{-- Edit Button --}}
                                        <a href="{{ route('admin.role.edit', $role->id) }}" 
                                           class="btn btn-sm btn-outline-primary"
                                           title="Edit">
                                            <i class="bi bi-pencil-square"></i>
                                        </a>

                                        {{-- Delete Form --}}
                                        <form action="{{ route('admin.role.delete', $role->id) }}"
                                              method="POST"
                                              class="delete-role-form d-inline">
                                            @csrf
                                            @method('DELETE')

                                            <button type="button"
                                                    class="btn btn-sm btn-outline-danger delete-role-btn"
                                                    title="Delete">
                                                <i class="bi bi-trash3"></i>
                                            </button>
                                        </form>

                                    </div>
                                </td>
</tr>
@endforeach
</tbody>

                                </table>
                </div>

                {{-- Footer --}}
                <div class="card-footer py-3 bg-white">
                    <div class="d-flex justify-content-end">
                        {{-- Pagination if needed --}}
                        {{ $roles->links() ?? '' }}
                    </div>
                </div>

            </div>
        </div>
    </div>

    @include('layouts.footers.auth')
</div>

{{-- SweetAlert --}}
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

@if(session('success'))
<script>
Swal.fire({
    icon: 'success',
    title: 'Success',
    text: '{{ session("success") }}',
    timer: 2000,
    showConfirmButton: false
});
</script>
@endif

<script>
document.addEventListener("DOMContentLoaded", function () {

    document.querySelectorAll('.delete-role-btn').forEach(function(button) {

        button.addEventListener('click', function () {

            let form = this.closest('.delete-role-form');

            Swal.fire({
                title: 'Are you sure?',
                text: "This Right will be permanently deleted!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d',
                confirmButtonText: 'Yes, delete it!',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.submit();
                }
            });

        });

    });

});
</script>

@endsection