@extends('layouts.app')

@section('form-title')
    {{ __('Roles') }}
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item">{{ __('Roles') }} </li>
@endsection

@section('content')
    <div class="pcoded-inner-content">
        <!-- Main-body start -->
        <div class="main-body">
            <div class="page-wrapper">
                <!-- Page-body start -->
                <div class="page-body">
                    @if(getAuthUser()->can('add roles'))
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>{{ __('New Role') }}</h5>
                                </div>
                                <div class="card-block">
                                    <div class="input-group">
                                        <a class="btn btn-primary" href="{{ route('roles.create') }}">
                                            {{ __('Add new role') }}
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    <div class="row">
                        <div class="col-md-12">
                            <div class="card">
                                <div class="card-header">
                                    <h5>{{ __('Roles') }}</h5>
                                </div>
                                <div class="card-block">
                                    <div class="row mb-3">
                                        <div class="table-responsive">
                                            <table class="table table-striped data-table">
                                                <tbody>
                                                    @foreach ($roles as $role)
                                                        <tr>
                                                            <td width="90%">
                                                                @if(getAuthUser()->can('edit roles'))
                                                                <a class="a-blue"
                                                                    href="{{ route('roles.edit', $role->uuid) }}">
                                                                    {{ ucfirst(__($role->name)) }}
                                                                </a>
                                                                @else
                                                                {{ ucfirst(__($role->name)) }}
                                                                @endif
                                                            <td>
                                                            <td width="10%">
                                                                @if(getAuthUser()->can('edit roles'))
                                                                <a href="{{ route('roles.edit', $role->uuid) }}" class="btn btn-primary btn-sm m-b-0 ms-2">{{ __('Edit') }}</a>
                                                                @endif

                                                                @if(getAuthUser()->can('delete roles'))
                                                                <button data-role-id="{{ $role->uuid }}" class="btn btn-danger btn-sm m-b-0 ms-2 role-delete">{{ __('Delete') }}</button>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <form action="" id="frm_role_delete" method="POST">
                                                @csrf
                                                @method('DELETE')
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('child-scripts')
    <script>
        $('.data-table').footable({
            "paging": {
                "enabled": false,
            },
            "sorting": {
                "enabled": true
            }
        });
    </script>

    <script>
    $(document).ready(function () {
        $(document).on('click', '.role-delete', function(){
            console.log('Button Clicked'); // Debugging

            var $button = $(this);
            var role_id = $button.data('role-id');
            
            swal({
                title: "Are you sure?",
                text: "You won't be able to revert this!",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            },
            function(isConfirmed){
                if(isConfirmed) {
                    let url = "{{ route('roles.destroy', ':id') }}".replace(':id', role_id);
                    $('#frm_role_delete').attr('action', url).submit();
                }
            });
        });
    });
    </script>
@endpush