@extends('layouts.app')


@section('title', 'All Roles')

{{-- custom css --}}
@push('css')
@endpush

{{-- page connect --}}
@section('content')

<x-content-body>
    
    <x-breadcrumbs :breadcrumbs="$breadcrumbs" />

    <x-row-card>
        <x-slot:title>
            <h4 class="card-title">Manage Roles</h4>
            <a type="button" href="{{ route('settings.user-management.roles.create') }}"
                class="btn btn-rounded btn-primary">New
                Role</a>
        </x-slot:title>

        <div class="table-responsive">
            <table id="example3" class="display">
                <thead>
                    <tr>
                        <th>Role Title</th>
                        <th class="d-flex justify-content-center ">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($roles as $role)
                    <tr>
                            {{-- show only role with _id of the auth user  --}}
                        <td>{{ (strpos($role['name'], '_') !== false) ? strstr($role['name'], '_', true) : $role['name']}}</td>
                        <td class="d-flex justify-content-center">
                            <div class="d-flex">
                                <a href="{{ route('settings.user-management.roles.edit', ['role' => $role['id']]) }}"
                                    class="btn btn-primary shadow btn-xs sharp me-1"><i class="fa fa-pencil"></i></a>

                                <button
                                    class="btn btn-danger shadow btn-xs sharp  @if($role['name'] != 'admin') deleteButton @endif"
                                    data-id="{{ $role['id'] }}" @if($role['name']=='admin' ) onclick="return false;"
                                    @endif>
                                    <i class="fa fa-trash"></i>
                                </button>

                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </x-row-card>
</x-content-body>
@endsection


{{-- custom js --}}
@push('js')
<script>
    $('.deleteButton').on('click', function(event) {
        event.preventDefault();

        let id = $(this).data('id');

        Swal.fire({
            title: "Are you sure?",
            text: "You won't be able to revert this!",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#3085d6",
            cancelButtonColor: "#d33",
            confirmButtonText: "Yes, delete it!"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "{{ route('settings.user-management.roles.destroy', ['role' => "+id+"]) }}",
                    type: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    data: {
                        id: id
                    },
                    success: function(response) {
                        Swal.fire({
                            title: 'Deleted!',
                            text: 'Role has been deleted.',
                            icon: 'success',
                            showConfirmButton: true,
                            customClass: {
                                confirmButton: 'btn btn-primary' // Set your desired CSS class here
                            }
                        }).then(() => {
                            window.location.reload();
                        });
                    },
                    error: function(xhr, status, error) {
                    
                        Swal.fire({
                            title: 'Error! Unable to delete User!',
                            text: 'Unable to delete user.',
                            text: xhr.responseJSON.message,
                            icon: 'error',
                            showConfirmButton: true,
                            customClass: {
                                confirmButton: 'btn btn-primary' // Set your desired CSS class here
                            }
                        });
                    }
                });
            }
        });
    });
</script>
@endpush