@extends('admin.layouts.master')
@section('content')
    <style>
        .swal2-confirm {
            margin-left: 7px;
        }
    </style>
    {{-- @include('admin.roles.modal') --}}
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-end my-4 page-header-breadcrumb">
        {{-- <h1 class="page-title fw-semibold fs-18 mb-0 urdu-fonts">@lang('lang.supplier_account')</h1> --}}
        <div class="ms-md-1 ms-0">
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item "><a href="javascript:void(0);">Roles</a></li>
                    <li class="breadcrumb-item active " aria-current="page">Role</li>
                </ol>
            </nav>
        </div>
    </div>


    <!-- Start:: row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-header d-flex justify-content-between">
                    <div class="card-title">
                        <h3>
                            Role
                        </h3>

                    </div>
                    <div class="add_role">
                        {{-- <button id="addrole" data-bs-effect="effect-super-scaled" data-bs-toggle="modal"
                            href="#modaldemo8" class="modal-effect btn btn-primary">Add Role +</button> --}}
                        <a href="{{ route('admin.role.add_role') }}" class="btn btn-primary">Add
                            Role +</a>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive">
                        <table id="myTable" class="display table text-nowrap">
                            <thead class="table-primary">
                                <tr>
                                    <th>Name</th>
                                    <th>Action</th>
                                    {{-- <th>Edit permission</th> --}}
                                    {{-- <th>permission</th> --}}
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($roles as $role)
                                    <tr>
                                        <td>{{ $role->name }}</td>
                                        <td>
                                            <div class="hstack gap-2 fs-15">
                                                <a href="{{ route('admin.role.edit_permissions', $role->id) }}"
                                                    class=" btn btn-primary">Edit Roles|Permission <i
                                                        class="fa fa-edit"></i></a>
                                                <a href="javascript:void(0);"
                                                    data-url="{{ route('admin.role.delete', ['id' => $role->id]) }}"
                                                    class="delete-btn btn btn-icon btn-sm btn-danger-transparent rounded-pill"><i
                                                        class="ri-delete-bin-line"></i></a>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="links mt-3 float-end">
                        {{ @$roles->links() }} <h4 class="d-inline urdu-fonts ps-3">:@lang('pagination.Pageno')</h4>
                    </div>
                </div>
                <div class="card-footer d-none border-top-0">
                </div>


            </div>

        </div>

    </div>
    <!-- End:: row-1 -->
    @push('page-script')
        <script type="cd18fe5366954e30a4bc2592-text/javascript">
            $(document).ready(function() {
                // $(document).on('click', '#roleModal', function() {
                //     var role_id = $(this).data('role-id');
                //     $('#modaldemo4').modal('show').addClass('effect-super-scaled');
                //     $('#role_id').val(role_id)
                // })
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                // $(document).on('click', '#addrole', function() {
                //     $('#modaldemo8').find('input').val('');
                // })
                // $(document).on('click', '.editbtn', function() {
                //     var id = $(this).attr('data-id');

                //     $.ajax({
                //         url: "{{ route('admin.role.index') }}",
                //         dataType: 'json',
                //         data: {
                //             id: id
                //         },
                //         success: function(response) {
                //             console.log(response)
                //             // $('#modaldemo8').modal('show')
                //             $('#modaldemo8').modal('show').addClass('effect-super-scaled');
                //             $('#role_name').val(response.name)
                //             $('#update_id').val(response.id)
                //             // $('#role_details').val(response.role_details)
                //             // $('#update_id').val(response.id)
                //             // $('.modal-header h2').text('Edit role')
                //             // $('.modal-footer button[type="submit"]').text('Update')

                //         },
                //         error: function(xhr, textStatus, errorThrown) {

                //             console.log('AJAX Error:', errorThrown);
                //             console.log('Response Body:', xhr.responseText);

                //         }

                //     })
                // })
                // $(document).on('click', '.editbtn', function() {
                //     var id = $(this).attr('data-id');
                //     var url="{{ route('admin.role.index') }}"
                //     $.ajax({
                //         url: url,
                //         dataType: 'json',
                //         type: 'GET',
                //         data: {
                //             id:id
                //         },
                //         success: function(response) {
                //             console.log(response)

                //         },
                //         error: function(response) {
                //             console.log(response)
                //             // if (response.status === 422) {
                //             //     var errors = response.responseJSON.errors;
                //             //     var errorMessages = '';
                //             //     $.each(errors, function(key, value) {
                //             //         errorMessages += value[0] +
                //             //             '\n'; // Assumes the error messages are arrays
                //             //     });
                //             //     Swal.fire(
                //             //         errorMessages,
                //             //         "Error",
                //             //         "error"
                //             //     )
                //             // } else if (response.status === 500) {
                //             //     Swal.fire("Internal Servor Error", "Error", "error");
                //             // } else {
                //             //     Swal.fire(
                //             //         "error",
                //             //         "an error occured",
                //             //         "error"
                //             //     )
                //             // }
                //             // $('button[type="button"]').attr('disabled', false);
                //             // $('.spinner').css('display', 'none');

                //         }
                //     })
                // })
            })
        </script>
    @endpush
@endsection
<script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="cd18fe5366954e30a4bc2592-|49" defer></script>