@extends('layouts.main')

@section('judul')
    <h1 class="page-heading d-flex flex-column justify-content-center text-dark fw-bold fs-3 m-0">API Client</h1>
@endsection

@section('breadchums')
    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0">
        <li class="breadcrumb-item text-muted">
            <a href="{{ route('home') }}" class="text-muted text-hover-primary">Home</a>
        </li>
        <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
        <li class="breadcrumb-item text-muted">Pengembang</li>
        <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
        <li class="breadcrumb-item text-muted">API Client</li>
    </ul>
@endsection

@section('isi')
    <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
        <div class="d-flex flex-column flex-column-fluid">
            <div id="kt_app_content" class="app-content flex-column-fluid">
                <div id="kt_app_content_container" class="app-container container-fluid">

                    @if (session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    @if (session('warning'))
                        <div class="alert alert-warning">{{ session('warning') }}</div>
                    @endif

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <div class="card shadow-sm">
                        <div class="card-header border-0 pt-6">
                            <div class="card-title fs-4 fw-bold">Daftar API Client</div>
                            @can('create api-client')
                            <div class="card-toolbar">
                                <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalTambahApiClient">
                                    <i class="ki-outline ki-plus fs-4"></i> Bikin Client Baru
                                </button>
                            </div>
                            @endcan
                        </div>
                        <div class="card-body pt-0">
                            <div class="table-responsive">
                                <table class="table align-middle table-row-dashed fs-6 gy-5">
                                    <thead>
                                        <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                            <th>Nama</th>
                                            <th>Status</th>
                                            <th>Ability</th>
                                            <th>Terakhir Dipakai</th>
                                            <th>Dibuat</th>
                                            <th class="text-end">Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody class="fw-semibold text-gray-900">
                                        @forelse ($apiClients as $client)
                                            <tr>
                                                <td>{{ $client->name }}</td>
                                                <td>
                                                    <span class="badge {{ $client->is_active ? 'badge-light-success' : 'badge-light-danger' }}">
                                                        {{ $client->is_active ? 'Aktif' : 'Nonaktif' }}
                                                    </span>
                                                </td>
                                                <td>
                                                    @forelse ($client->abilities as $ability)
                                                        <span class="badge badge-light-primary me-1">{{ $ability->ability }}</span>
                                                    @empty
                                                        <span class="badge badge-light-danger" title="Token ini gak bisa akses endpoint API manapun sampai ability ditambahkan">Belum ada ability</span>
                                                    @endforelse
                                                </td>
                                                <td>{{ $client->last_used_at?->format('d-m-Y H:i') ?? 'Belum pernah' }}</td>
                                                <td>{{ $client->created_at->format('d-m-Y H:i') }}</td>
                                                <td class="text-end">
                                                    @can('read api-client')
                                                    <a href="{{ route('apiclients.logs', $client) }}" class="btn btn-icon btn-active-light-info w-30px h-30px" title="Riwayat Pemanggilan">
                                                        <i class="ki-outline ki-time fs-3"></i>
                                                    </a>
                                                    @endcan
                                                    @can('update api-client')
                                                    <button type="button" class="btn btn-icon btn-active-light-primary w-30px h-30px" title="Kelola Ability" data-bs-toggle="modal" data-bs-target="#abilityModal-{{ $client->id }}">
                                                        <i class="ki-outline ki-shield-tick fs-3"></i>
                                                    </button>
                                                    <form action="{{ route('apiclients.toggle', $client) }}" method="POST" class="d-inline">
                                                        @csrf
                                                        @method('PATCH')
                                                        <button type="submit" class="btn btn-icon btn-active-light-warning w-30px h-30px" title="{{ $client->is_active ? 'Nonaktifkan' : 'Aktifkan' }}">
                                                            <i class="ki-outline {{ $client->is_active ? 'ki-lock' : 'ki-lock-2' }} fs-3"></i>
                                                        </button>
                                                    </form>
                                                    @endcan
                                                    @can('delete api-client')
                                                    <form action="{{ route('apiclients.destroy', $client) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus client ini? Token-nya langsung gak bisa dipake lagi.')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-icon btn-active-light-danger w-30px h-30px" title="Hapus">
                                                            <i class="ki-outline ki-trash fs-3"></i>
                                                        </button>
                                                    </form>
                                                    @endcan
                                                </td>
                                            </tr>

                                            @can('update api-client')
                                            <div class="modal fade" id="abilityModal-{{ $client->id }}" tabindex="-1" aria-hidden="true">
                                                <div class="modal-dialog modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <form action="{{ route('apiclients.abilities.update', $client) }}" method="POST">
                                                            @csrf
                                                            @method('PUT')
                                                            <div class="modal-header">
                                                                <h5 class="modal-title">Kelola Ability — {{ $client->name }}</h5>
                                                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                                                            </div>
                                                            <div class="modal-body">
                                                                @foreach ($knownAbilities as $ability)
                                                                    <label class="form-check form-check-sm form-check-custom form-check-light mb-4">
                                                                        <input class="form-check-input" type="checkbox" name="abilities[]" value="{{ $ability }}" {{ $client->abilities->pluck('ability')->contains($ability) ? 'checked' : '' }}>
                                                                        <span class="form-check-label">{{ $ability }}</span>
                                                                    </label>
                                                                @endforeach
                                                            </div>
                                                            <div class="modal-footer">
                                                                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                                                                <button type="submit" class="btn btn-primary">Simpan</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                            @endcan
                                        @empty
                                            <tr>
                                                <td colspan="6" class="text-center text-muted">Belum ada API client.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>

                            {{ $apiClients->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if (session('new_token'))
    <div class="modal fade" id="modalTokenBaru" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Token Dibuat</h5>
                </div>
                <div class="modal-body">
                    <div class="alert alert-warning">
                        Token buat "<strong>{{ session('new_token_name') }}</strong>" — catet sekarang, gak bakal ditampilin lagi.
                    </div>
                    <label class="form-label fw-semibold">Token</label>
                    <div class="input-group">
                        <input type="text" class="form-control font-monospace" id="newTokenValue" value="{{ session('new_token') }}" readonly>
                        <button class="btn btn-light-primary" type="button" id="btnCopyToken">
                            <i class="ki-outline ki-copy fs-3"></i> Salin
                        </button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btnTokenDicatat" data-bs-dismiss="modal" disabled title="Salin token-nya dulu">Sudah Dicatat</button>
                </div>
            </div>
        </div>
    </div>
    @endif

    @can('create api-client')
    <div class="modal fade" id="modalTambahApiClient" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="POST" action="{{ route('apiclients.store') }}">
                    @csrf
                    <div class="modal-header">
                        <h5 class="modal-title">Bikin Client Baru</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-4">
                            <label class="required form-label">Nama Partner/Sistem</label>
                            <input type="text" name="name" class="form-control" value="{{ old('name') }}" placeholder="Nama partner atau sistem eksternal" required>
                        </div>
                        <div>
                            <label class="fs-6 fw-semibold form-label mb-2">Ability</label>
                            <div class="d-flex flex-wrap">
                                @foreach ($knownAbilities as $ability)
                                    <label class="form-check form-check-sm form-check-custom form-check-light me-5 mb-2">
                                        <input class="form-check-input" type="checkbox" name="abilities[]" value="{{ $ability }}" {{ collect(old('abilities'))->contains($ability) ? 'checked' : '' }}>
                                        <span class="form-check-label">{{ $ability }}</span>
                                    </label>
                                @endforeach
                            </div>
                            <div class="form-text">Kalau gak dicentang sama sekali, token-nya gak bisa akses endpoint API manapun sampai ability ditambahkan lewat "Kelola Ability".</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-primary">Bikin Token</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endcan
@endsection

@push('js-page')
    @if ($errors->any() || old('name'))
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function () {
                new bootstrap.Modal(document.getElementById('modalTambahApiClient')).show();
            });
        </script>
    @endif

    @if (session('new_token'))
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function () {
                new bootstrap.Modal(document.getElementById('modalTokenBaru')).show();

                document.getElementById('btnCopyToken').addEventListener('click', function () {
                    const input = document.getElementById('newTokenValue');
                    navigator.clipboard.writeText(input.value);

                    document.getElementById('btnTokenDicatat').removeAttribute('disabled');
                    document.getElementById('btnTokenDicatat').removeAttribute('title');

                    const original = this.innerHTML;
                    this.innerHTML = '<i class="ki-outline ki-check fs-3"></i> Tersalin';
                    setTimeout(() => { this.innerHTML = original; }, 1500);
                });
            });
        </script>
    @endif
@endpush