@extends('backend.app')
@section('title',__('messages.role'))
@section('content')
    @can('role.create')
        <div class="add-new-button-hidden">
            <button class="btn add_new_btn" data-bs-toggle="modal" data-bs-target="#roleCreateModal"
            ><i class="plus-ico"></i> {{ __('messages.add_role') }}
            </button>
        </div>
    @endcan
    <h2 class="ms-2 mb-3 card-title">{{ __('messages.role_list') }}</h2>
    <div class="card mt-3 m-lg-2">
        <div class="card-body mt-2 table_card">
            <table id="datatable-buttons" class="table table-bordered dt-responsive w-100"
                   data-table="dataTables">
                <thead>
                <tr>
                    <th width="5%">{{ __('messages.sl') }}</th>
                    <th width="10%">{{ __('messages.name') }}</th>
                    <th width="60%">{{ __('messages.permissions') }}</th>
                    <th width="25%">{{ __('messages.action') }}</th>
                </tr>
                </thead>
                <tbody>
                @forelse ($roles as $key=>$item)
                    <tr>
                        <td>{{++$key}}</td>
                        <td class="text-800">{{ strtoupper($item->name) }}</td>
                        <td>
                            @foreach ($item->permissions as $perm)
                                <span
                                    class="badge permission-list-badge">{{ str_replace('.', ' ', $perm->name) }}</span>
                            @endforeach
                        </td>
                        <td class="center">
                            @can('role.edit')
                                <a class="btn btn-sm role_edit_btn"
                                   data-url="{{route('super-admin.roles.edit',$item->id)}}" data-bs-toggle="modal"
                                   data-bs-target="#roleEditModal">
                                    <i class="edit-ico"></i>
                                </a>
                            @endcan
                            @can('role.delete')
                                <a href="#" class="btn btn-sm" onclick="deletePost({{ $item->id }})">
                                    <i class="delete-ico"></i>
                                    <form id="delete-form-{{ $item->id }}"
                                          action="{{ route('super-admin.roles.destroy', $item->id) }}"
                                          method="POST" style="display: none;">
                                        @csrf
                                        @method('DELETE')
                                    </form>
                                </a>
                            @endcan
                        </td>
                    </tr>
                @empty
                @endforelse
                </tbody>
            </table>
        </div>
    </div>
    <div class="modal fade" id="roleCreateModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content p-5">
                <h4 class="card-title">{{ __('messages.create_role') }}</h4>
                <p class="card-title-desc">{{ __('messages.fill_all_information_below') }}</p>
                <div class="modal-body p-0 mt-3 roleCreateModal">
                    <div class="modal-spinner d-flex flex-column align-items-center">
                        <div class="spinner-border text-secondary" role="status">
                            <span class="sr-only"></span>
                        </div>
                        <h5 class="mt-1">Loading...</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="roleEditModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content p-5">
                <h4 class="card-title">{{ __('messages.edit_role') }}</h4>
                <p class="card-title-desc">{{ __('messages.fill_all_information_below') }}</p>
                <div class="modal-body p-0 mt-3 roleEditModal">
                    <div class="modal-spinner d-flex flex-column align-items-center">
                        <div class="spinner-border text-secondary" role="status">
                            <span class="sr-only"></span>
                        </div>
                        <h5 class="mt-1">Loading...</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script type="text/javascript">
        $(document).on('click', '.role_edit_btn', function () {
            let url = $(this).data('url');
            axios.get(url).then(function (response) {
                $('.roleEditModal').html(response.data);
                $('.modal-spinner').hide();
                $(".modal").on("hidden.bs.modal", function () {
                    $(".roleEditModal").html(` <div class="modal-spinner d-flex flex-column align-items-center">
                        <div class="spinner-border text-secondary" role="status">
                            <span class="sr-only"></span>
                        </div>
                        <h5 class="mt-1">Loading...</h5>
                    </div>`);
                });
            }).catch(function (error) {
                console.log(error)
            })
        })
        $('.add_new_btn').click(function () {
            axios.get("{{ url('system/roles/create') }}").then(function (response) {
                $('.roleCreateModal').html(response.data);
                $('.modal-spinner').hide();
                $(".modal").on("hidden.bs.modal", function () {
                    $(".roleCreateModal").html(` <div class="modal-spinner d-flex flex-column align-items-center">
                        <div class="spinner-border text-secondary" role="status">
                            <span class="sr-only"></span>
                        </div>
                        <h5 class="mt-1">Loading...</h5>
                    </div>`);
                });
                createPageJS();
            }).catch(function (error) {
                console.log(error)
            })
        })

    </script>
@endpush

