@extends('layouts.contentLayoutMaster')

@section('title','Role')

@section('vendor-styles')
    <link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/datatables.min.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('css/pages/data-list-view.css')}}">
@endsection

@section('page-styles')

@endsection

@section('content')
   {{-- Data list view starts --}}
    <section id="data-list-view" class="data-list-view-header">
        {{-- DataTable starts --}}
        <div class="table-responsive">
        <table class="table data-list-view" id="roles-table">
            <thead>
            <tr>
                <th width="100px">NO</th>
                <th>ROLE</th>
                <th>PERMISSION</th>
                <th>AKSI</th>
            </tr>
            </thead>
            <tbody>
            @php $i = 1 @endphp
            @foreach ($roles as $role)
                <tr>
                <td class="role-id">{{ $i++ }}</td>
                <td class="role-name">{{ $role->name }}</td>
                <td class="role-permission">
                    @foreach($role->permissions as $permission)
                        <div class="chip chip-danger">
                            <div class="chip-body">
                                <div class="chip-text" title="{{ $permission->name }}">{{ $permission->name }}</div>
                            </div>
                        </div>
                    @endforeach
                </td>
                <td class="role-action">
                    @can ('edit role')
                        <a type="button" href="{{ route('role.edit', [$role->id]) }}" class="btn btn-icon rounded-circle btn-light-primary" title="Edit"><i class="bx bx-edit-alt"></i></a>
                    @endcan
                    <!--@can ('hapus role')-->
                    <!--    <a type="button" href="#" name="delete" id="{{ $role->id }}" class="delete btn btn-icon rounded-circle btn-light-danger" title="Hapus"><i class="bx bx-trash"></i></a>-->
                    <!--@endcan-->
                </td>
                </tr>
            @endforeach
            </tbody>
        </table>
        </div>
        {{-- DataTable ends --}}  
    </section>
  {{-- Data list view end --}}
    <div id="confirmModal" class="modal fade text-left" id="danger" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel120" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger">              
                    <h5 class="modal-title white">Konfirmasi</h5>
                    <button type="button" class="close btn btn-sm" data-dismiss="modal" aria-label="Close">
                        <i class="bx bx-x"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <h5 align="center" style="margin:0;">Apakah Anda yakin akan <span class="text-danger"> menghapus </span> data ini?</h5>
                </div>
                <div class="modal-footer">
                    <button type="button" name="ok_button" id="ok_button" class="btn btn-sm btn-danger">OK</button>
                    <button type="button" class="btn btn-sm btn-light-secondary" data-dismiss="modal">Batal</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('vendor-scripts')
{{-- vendor files --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="{{asset('vendors/js/tables/datatable/datatables.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/buttons.html5.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/buttons.print.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/buttons.bootstrap.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/pdfmake.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/vfs_fonts.js')}}"></script>
@endsection
@section('page-scripts')
    <script src="{{asset('js/scripts/datatables/datatable.js')}}"></script>
    <script>
        $(document).ready(function() {
        var role_id;
    
        $(document).on('click', '.delete', function(){
            role_id = $(this).attr('id');
            $('#confirmModal').modal('show');
        });
    
        $('#ok_button').click(function(){
            $.ajax({
            url:"role/destroy/"+role_id,
            beforeSend:function(){
            $('#ok_button').text('Menghapus data...');
            },
            success:function(data)
            {
                setTimeout(function(){
                $('#confirmModal').modal('hide');
                $('#ok_button').text('OK');
                Swal.fire('Berhasil','Data berhasil dihapus!', 'success');
                }, 1500);

                setTimeout(function(){
                    window.location.href = "{{URL::to('role')}}"
                } , 3000);   
            }
            })
        });
        });
    </script>
    {{-- Page js files --}}
@endsection