@section('optional_css')
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="{{ asset('plugins/sweetalert2-theme-bootstrap-4/bootstrap-4.min.css') }}">
@endsection
@section('optional_js')
    <!-- SweetAlert2 -->
    <script src="{{ asset('plugins/sweetalert2/sweetalert2.min.js') }}"></script>
    
    <script>
        $(document).ready(function () {
            $('.delete-row').on('click', function() {
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.isConfirmed) {
                        event.preventDefault();
                        Swal.fire(
                            'Deleted!',
                            'Your file has been deleted.',
                            'success'
                            )
                        this.closest('form').submit();
                    }
                })
            })
        })
    </script>
@endsection

<x-app-layout>
    <x-slot name="header">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">{{ __('Permission') }}</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
            </div><!-- /.col -->
        </div><!-- /.row -->
    </x-slot>
    @if(session('success'))
        <x-alert-success>
            {{ session('success') }}
        </x-alert-success>
    @endif
    @if(session('delete'))
        <x-alert-danger>
            {{ session('delete') }}
        </x-alert-danger>
    @endif
    <x-card>
        <x-slot name="title">{{ __('Permission') }}</x-slot>
        <x-slot name="tools">
            <x-button-link href="{{ route('admin.permission.create') }}">{{ __('Create') }} {{ __('Permission') }}</x-button>
        </x-slot>
        <div class="col-12 table-responsive">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>{{ __('Name') }}</th>
                        <th>{{ __('Action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($permissions as $permission)
                        <tr>
                            <td>{{ $permission->name }}</td>
                            <td>
                                <form method="POST" action="{{ route('admin.permission.destroy', $permission->id) }}">
                                    @csrf
                                    @method('delete')
                                    <x-button-link class="btn-danger delete-row">
                                        {{ __('Delete') }}
                                    </x-button-link>
                                </form>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="2">{{ __('Empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{ $permissions->links('vendor.pagination.bootstrap-4') }}
    </x-card>
</x-app-layout>