@extends('layouts.dashboard.app')

@section('content')
<div class="container-fulied">
    <nav aria-label="breadcrumb" >
        <ol class="breadcrumb @lang('theme.breadcrumb')">
            <!-- <li class="breadcrumb-item"><a href="{{ url('/') }}">@lang('breadcrumb.home')</a></li> -->
            <li class="breadcrumb-item"><a href="{{config('app.url')}}/roles/">Roles</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{$name}}</li>
        </ol>
        <ol class="breadcrumb py-0 my-0">
            @if (Auth::user()->can('edit', $role))
                <a class="btn btn-sm @lang('theme.btn_edit') btn-x py-1 px-3 mb-2 font-weight-bolder mr-2" href="{{ route('role.edit',[$role]) }}">@lang('common.btn_edit')</a>
            @endif
            @if (Auth::user()->can('delete', $role))
                <button id="del_role" type="button" class="btn btn-sm @lang('theme.btn_delete') btn-x mb-2 px-3 py-1 font-weight-bold mr-2">@lang('common.btn_delete')</button>
            @endif
        </ol>
    </nav>
    @includeIf('dashboard.role.form', ['mode' => 'VIEW', 'editable' => false])
    @if (Auth::user()->can('delete', $role))
        @includeIf('dashboard.role.delete')
    @endif
</div>
<script>
    $("#del_role").click(function(){
        Swal.fire({
            title: 'Are you sure?',
            text: "You want to remove this role!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes'
            }).then((result) => {
            if (result.isConfirmed) {
                $('#frm_del_role').submit();
            }
        })
    });
    $(function () {
        var t = $('#tbl_role_permission').DataTable({
            "order": [],
            "paging": false,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": false,
            "autoWidth": false,
            "responsive": false,
            "columnDefs": [
                { orderable: true, className: 'reorder', targets: [1,2] },
                { orderable: false, targets: '_all' },
                { searchable: false, targets: 0 }
            ],
        });
        t.on( 'order.dt search.dt', function () {
            t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                if(cell.nodeName == 'TD' || cell.nodeName == 'td' ){
                    cell.innerHTML = i+1;
                }
            } );
        }).draw();
    });
</script>
@endsection