@extends('dashboard.partials.master')

@section('title')
    Roles & Permissiones
@endsection

@section('css')
@endsection
@section('content')
    <!-- end sidebar Navbar -->
    <main class="home home-section">
        <!-- start breadcrumb -->
        <h1 class="brain-title pt-4 ">Roles & Permissiones </h1>
        <nav aria-label="breadcrumb mb-5">
            <ol class="breadcrumb">
                <li><a href="{{ route('dashboard') }}">Home</a></li>
                <li class="active" aria-current="page">Roles</li>
            </ol>
        </nav>
        <!-- end breadcrumb -->
        <div class="card role-table mt-4 ">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-baseline flex-wrap mt-3 mb-3">
                    <a href="{{ route('roles.create') }}" class="add-role"> <i class="fa-solid fa-file-medical pe-2"></i>
                        Add Role</a>
                    <input type="text" class="form-control w-auto" placeholder="Search" id="search_input_all"
                        onkeyup="FilterkeyWord_all_table()">
                </div>
                <div class="table-responsive wrapper_all">
                    <table class="table" id="menu_item_table_all">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Name</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($roles as $role)
                                <tr>
                                    <td>{{ $loop->iteration }} </td>
                                    <td class="permision"><span>{{ $role->name }}</span></td>
                                    <td>
                                        {{-- <a href="view_role.html" class="btn btn-outline-warning btn-sm"><i
                                                class="fa-solid fa-eye"></i></a> --}}
                                        @if ($role->name !== 'owner')
                                            <a href="{{ route('roles.edit', $role->id) }}"
                                                class="btn btn-outline-info btn-sm"><i class="fa-solid fa-pen"></i></a>
                                            {{-- <a href="{{ route('roles.destroy', $role->id) }}" class="btn btn-outline-danger btn-sm delete-role" id="delete-role"
                                            data-id="{{ $role->id }}"><i class="fa-solid fa-trash"></i></a> --}}
                                            <button class="delete-role btn btn-outline-danger btn-sm" id="delete-role"
                                                data-id="{{ $role->id }}"><i class="fa-solid fa-trash"></i></button>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="pagination-container text-center mt-3 d-flex justify-content-end">
                        <button id="prevPage" class="add-role  me-1">Previous</button>
                        <button id="nextPage" class="add-role me-1">Next</button>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('js')
    <script>
        $(document).on('click', '.delete-role', function(e) {
            e.preventDefault();

            var roleId = $(this).data('id');
            var url = "{{ route('roles.destroy', ':id') }}";
            url = url.replace(':id', roleId);

            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: url,
                        method: 'DELETE',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function(response) {
                            Swal.fire(
                                'Deleted!',
                                response.success,
                                'success'
                            ).then(() => {
                                location.reload();
                            });
                        },
                        error: function(xhr) {
                            Swal.fire(
                                'Error!',
                                'An error occurred while deleting the role.',
                                'error'
                            );
                        }
                    });
                }
            });
        });
    </script>
@endpush