@extends('layouts.app')

@section('pagetitle', 'API keys')

@section('breadcrumbs')
    <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
        <li class="breadcrumb-item active">Admin</li>
        <li class="breadcrumb-item active">@yield('pagetitle')</li>
    </ol>
@endsection

@section('content')
    <section class="content">
        @if(session('plainTextKey'))
            <div class="row">
                <div class="col-12">
                    <div class="alert alert-warning">
                        <h5><i class="icon fas fa-key"></i> {{__('Copy this key now. It will not be shown again.')}}</h5>
                        <code>{{session('plainTextKey')}}</code>
                    </div>
                </div>
            </div>
        @endif
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{__("Here you can find all API keys within ") . config('app.name')}}</h3>
                        <a class="float-right btn-sm btn btn-primary" href="{{route('admin.apikey.create')}}"><i
                                class="fa fa-plus"></i> {{__('Add')}}</a>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table class="datatable-init table table-striped">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>{{__('Name')}}</th>
                                <th>{{__('User')}}</th>
                                <th>{{__('Key')}}</th>
                                <th>{{__('Last used')}}</th>
                                <th data-sortOrder="none"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($apiKeys as $apiKey)
                                <tr>
                                    <td>{{$apiKey->id}}</td>
                                    <td>{{$apiKey->name}}</td>
                                    <td>{{optional($apiKey->User)->name}}</td>
                                    <td>&hellip;{{$apiKey->last_four}}</td>
                                    <td>{{$apiKey->last_used_at ? $apiKey->last_used_at->format('Y-m-d H:i') : __('Never')}}</td>
                                    <td>
                                        <a href="#" data-id="{{$apiKey->id}}"
                                           class="apiKeyDelBtn btn btn-danger"
                                           data-toggle="modal" data-target="#modal-delete-apikey"><i
                                                class="fa fa-times"></i> {{__('Revoke')}}
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="modal fade" id="modal-delete-apikey" aria-modal="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content bg-danger">
                <form id="apiKeyDelForm" action="{{route('admin.apikey.destroy', ['apikey' => "<ID>"])}}" method="POST">
                    @csrf
                    @method('delete')
                    <div class="modal-header">
                        <h4 class="modal-title">{{__('Revoke API key')}}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>{{ __("Are you sure?") }} {{ __("This can not be undone!") }}</p>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-outline-light"
                                data-dismiss="modal">{{__('Cancel')}}</button>
                        <button type="submit" class="btn btn-outline-light">{{__('Revoke')}}</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@section('page_js')

    <script>
        $(document).ready(function () {
            $('.apiKeyDelBtn').click(function () {
                var apiKeyId = $(this).attr('data-id');
                var baseDelUrl = "{{route('admin.apikey.destroy', ['apikey' => "<ID>"])}}"
                var delUrl = baseDelUrl.replace("%3CID%3E", apiKeyId)
                $('#apiKeyDelForm').attr("action", delUrl)
            })
            $('.datatable-init').DataTable(
                {
                    responsive: true,
                    language: {
                        url: '{{asset('/js/datatables_lang/' . app()->getLocale() . '.json')}}'
                    },
                    'columnDefs': [
                        {
                            'targets': [0], /* column index */
                            responsivePriority: 2,
                        },
                        {
                            'targets': [1, 2], /* column index */
                            responsivePriority: 1,
                        },
                        {
                            'targets': [5], /* column index */
                            'orderable': false, /* true or false */
                            responsivePriority: 1,
                        }]

                }
            );

        });
    </script>
@endsection