@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('title', $title_menu ?? 'WhatsApp API Clients')

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        @if (session('message'))
            <div class="alert alert-{{ session('class', 'info') }} alert-dismissible fade show">
                {{ session('message') }}

                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

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

        @if (isset($authorize) && (string) $authorize->add === '1')
            <div class="card mb-4">
                <div class="card-header">
                    <h6 class="mb-0">Tambah Aplikasi Eksternal</h6>
                </div>

                <div class="card-body">
                    <form method="POST" action="{{ url($url_menu) }}">
                        @csrf

                        <input type="hidden" name="action" value="generate">

                        <div class="row g-3">
                            <div class="col-md-3">
                                <label class="form-label">
                                    Client Code
                                </label>

                                <input type="text" name="client_code" value="{{ old('client_code') }}"
                                    class="form-control @error('client_code') is-invalid @enderror" placeholder="msjhris"
                                    required>

                                <div class="form-text">
                                    Huruf, angka, underscore, atau strip.
                                </div>

                                @error('client_code')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-3">
                                <label class="form-label">
                                    Nama Aplikasi
                                </label>

                                <input type="text" name="client_name" value="{{ old('client_name') }}"
                                    class="form-control @error('client_name') is-invalid @enderror" placeholder="MSJ HRIS"
                                    required>

                                @error('client_name')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">
                                    Rate Limit/Menit
                                </label>

                                <input type="number" name="rate_limit"
                                    value="{{ old('rate_limit', config('whatsapp-gateway.public.default_rate_limit', 60)) }}"
                                    class="form-control @error('rate_limit') is-invalid @enderror" min="1"
                                    max="100000" required>

                                @error('rate_limit')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-2">
                                <label class="form-label">
                                    Kedaluwarsa
                                </label>

                                <input type="datetime-local" name="expires_at" value="{{ old('expires_at') }}"
                                    class="form-control @error('expires_at') is-invalid @enderror">

                                @error('expires_at')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-md-12">
                                <label class="form-label">
                                    Allowed IPs
                                </label>

                                <textarea name="allowed_ips" class="form-control @error('allowed_ips') is-invalid @enderror" rows="2"
                                    placeholder="10.10.10.5, 36.85.10.20">{{ old('allowed_ips') }}</textarea>

                                <div class="form-text">
                                    Kosong berarti semua IP diizinkan. Pisahkan dengan koma atau spasi.
                                </div>

                                @error('allowed_ips')
                                    <div class="invalid-feedback">
                                        {{ $message }}
                                    </div>
                                @enderror
                            </div>

                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    Generate API Key
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        @endif

        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    Daftar API Client
                </h6>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table id="list_{{ $dmenu }}" class="table table-hover align-middle mb-0">
                        <thead class="text-center align-middle">
                            <tr>
                                <th>Aplikasi</th>
                                <th>API Key</th>
                                <th>Rate Limit</th>
                                <th>Allowed IP</th>
                                <th>Terakhir Digunakan</th>
                                <th>Status</th>
                                <th style="min-width: 320px;">Aksi</th>
                            </tr>
                        </thead>

                        <tbody>
                            @forelse ($clients as $client)
                                <tr>
                                    <td>
                                        <strong>{{ $client->client_name }}</strong>

                                        <div class="small text-muted font-monospace">
                                            {{ $client->client_code }}
                                        </div>
                                    </td>

                                    <td>
                                        @if ($client->plain_api_key)
                                            <div class="wa-api-key-group">
                                                <input type="password"
                                                    class="form-control form-control-sm font-monospace wa-api-key-input"
                                                    id="apiKeyClient{{ $client->id }}"
                                                    value="{{ $client->plain_api_key }}" readonly>

                                                <button type="button"
                                                    class="btn btn-sm btn-outline-secondary wa-api-key-eye"
                                                    onclick="toggleClientApiKey({{ $client->id }}, this)"
                                                    title="Tampilkan atau sembunyikan API key">
                                                    <i class="fas fa-eye"></i>
                                                </button>

                                                <button type="button"
                                                    class="btn btn-sm btn-outline-primary wa-api-key-copy"
                                                    onclick="copyClientApiKey({{ $client->id }}, this)">
                                                    <i class="fas fa-copy"></i>
                                                    <span>Copy</span>
                                                </button>
                                            </div>
                                        @else
                                            <code>{{ $client->api_key_prefix }}...</code>

                                            <div class="small text-muted mt-1">
                                                Regenerate API key untuk menyimpan key terenkripsi.
                                            </div>
                                        @endif
                                    </td>

                                    <td>
                                        {{ number_format($client->rate_limit) }}/menit
                                    </td>

                                    <td>
                                        @if (($client->allowed_ips ?? []) === [])
                                            <span class="text-muted">
                                                Semua IP
                                            </span>
                                        @else
                                            @foreach ($client->allowed_ips as $ip)
                                                <span class="badge bg-secondary">
                                                    {{ $ip }}
                                                </span>
                                            @endforeach
                                        @endif
                                    </td>

                                    <td>
                                        @if ($client->last_used_at)
                                            {{ $client->last_used_at->format('d-m-Y H:i:s') }}

                                            <div class="small text-muted">
                                                {{ $client->last_used_ip }}
                                            </div>
                                        @else
                                            <span class="text-muted">
                                                Belum pernah
                                            </span>
                                        @endif
                                    </td>

                                    <td>
                                        @if ($client->expires_at && $client->expires_at->isPast())
                                            <span class="badge bg-danger">
                                                Expired
                                            </span>
                                        @elseif ($client->isactive)
                                            <span class="badge bg-success">
                                                Aktif
                                            </span>
                                        @else
                                            <span class="badge bg-secondary">
                                                Nonaktif
                                            </span>
                                        @endif

                                        @if ($client->expires_at)
                                            <div class="small text-muted mt-1">
                                                s.d. {{ $client->expires_at->format('d-m-Y H:i') }}
                                            </div>
                                        @endif
                                    </td>

                                    <td>
                                        <div class="d-flex flex-wrap gap-2">
                                            @if (isset($authorize) && (string) $authorize->edit === '1')
                                                <button class="btn btn-sm btn-outline-primary" type="button"
                                                    data-bs-toggle="collapse"
                                                    data-bs-target="#editClient{{ $client->id }}">
                                                    Edit
                                                </button>

                                                <form method="POST" action="{{ url($url_menu) }}"
                                                    onsubmit="return confirm('Regenerasi key akan langsung menonaktifkan key lama. Lanjutkan?')">
                                                    @csrf

                                                    <input type="hidden" name="action" value="regenerate">

                                                    <input type="hidden" name="id"
                                                        value="{{ encrypt($client->id) }}">

                                                    <button type="submit" class="btn btn-sm btn-outline-warning">
                                                        Regenerate Key
                                                    </button>
                                                </form>
                                            @endif

                                            @if (isset($authorize) && (string) $authorize->delete === '1')
                                                <form method="POST" action="{{ url($url_menu) }}"
                                                    onsubmit="return confirm('Ubah status API client ini?')">
                                                    @csrf

                                                    <input type="hidden" name="action" value="toggle">

                                                    <input type="hidden" name="id"
                                                        value="{{ encrypt($client->id) }}">

                                                    <button type="submit"
                                                        class="btn btn-sm {{ $client->isactive ? 'btn-outline-danger' : 'btn-outline-success' }}">
                                                        {{ $client->isactive ? 'Nonaktifkan' : 'Aktifkan' }}
                                                    </button>
                                                </form>
                                            @endif
                                        </div>

                                        @if (isset($authorize) && (string) $authorize->edit === '1')
                                            <div class="collapse mt-3" id="editClient{{ $client->id }}">
                                                <form method="POST" action="{{ url($url_menu) }}"
                                                    class="border rounded p-3">
                                                    @csrf

                                                    <input type="hidden" name="action" value="update">

                                                    <input type="hidden" name="id"
                                                        value="{{ encrypt($client->id) }}">

                                                    <div class="row g-2">
                                                        <div class="col-md-6">
                                                            <label class="form-label">
                                                                Nama
                                                            </label>

                                                            <input type="text" name="client_name"
                                                                value="{{ $client->client_name }}"
                                                                class="form-control form-control-sm" required>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <label class="form-label">
                                                                Rate
                                                            </label>

                                                            <input type="number" name="rate_limit"
                                                                value="{{ $client->rate_limit }}" min="1"
                                                                max="100000" class="form-control form-control-sm"
                                                                required>
                                                        </div>

                                                        <div class="col-md-3">
                                                            <label class="form-label">
                                                                Expired
                                                            </label>

                                                            <input type="datetime-local" name="expires_at"
                                                                value="{{ optional($client->expires_at)->format('Y-m-d\TH:i') }}"
                                                                class="form-control form-control-sm">
                                                        </div>

                                                        <div class="col-12">
                                                            <label class="form-label">
                                                                Allowed IPs
                                                            </label>

                                                            <textarea name="allowed_ips" rows="2" class="form-control form-control-sm">{{ implode(', ', $client->allowed_ips ?? []) }}</textarea>
                                                        </div>

                                                        <div class="col-12">
                                                            <button type="submit" class="btn btn-sm btn-primary">
                                                                Simpan
                                                            </button>
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center text-muted py-4">
                                        Belum ada API client.
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <style>
        .wa-api-key-group {
            display: flex;
            align-items: stretch;
            width: 420px;
            max-width: 100%;
            height: 34px;
        }

        .wa-api-key-group .wa-api-key-input {
            min-width: 0;
            height: 34px;
            border-radius: 6px 0 0 6px !important;
        }

        .wa-api-key-group .wa-api-key-eye,
        .wa-api-key-group .wa-api-key-copy {
            height: 34px;
            margin-left: -1px;
            border-radius: 0 !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            box-shadow: none !important;
        }

        .wa-api-key-group .wa-api-key-eye {
            width: 42px;
            min-width: 42px;
            padding: 0;
        }

        .wa-api-key-group .wa-api-key-copy {
            min-width: 76px;
            padding: 0 12px;
            gap: 6px;
            border-radius: 0 6px 6px 0 !important;
        }

        .wa-api-key-group .btn:focus,
        .wa-api-key-group .form-control:focus {
            position: relative;
            z-index: 2;
        }

        .wa-api-key-group-generated {
            width: 100%;
            max-width: 100%;
        }
    </style>
    <script>
        function toggleGeneratedApiKey(button) {
            const input = document.getElementById('generatedApiKey');

            if (!input) {
                return;
            }

            const isHidden = input.type === 'password';

            input.type = isHidden ? 'text' : 'password';

            button.innerHTML = isHidden ?
                '<i class="fas fa-eye-slash"></i>' :
                '<i class="fas fa-eye"></i>';
        }

        function copyGeneratedApiKey(button) {
            const input = document.getElementById(
                'generatedApiKey'
            );

            if (!input) {
                return;
            }

            copyApiKeyValue(input, button);
        }

        function copyClientApiKey(clientId, button) {
            const input = document.getElementById(
                `apiKeyClient${clientId}`
            );

            if (!input) {
                return;
            }

            copyApiKeyValue(input, button);
        }

        function copyApiKeyValue(input, button) {
            const originalHtml = button.innerHTML;

            const showCopied = function() {
                button.innerHTML =
                    '<i class="fas fa-check me-1"></i>Copied';

                button.classList.remove(
                    'btn-dark',
                    'btn-outline-dark'
                );

                button.classList.add('btn-success');

                setTimeout(function() {
                    button.innerHTML = originalHtml;
                    button.classList.remove('btn-success');

                    if (button.closest('.alert')) {
                        button.classList.add('btn-dark');
                    } else {
                        button.classList.add(
                            'btn-outline-dark'
                        );
                    }
                }, 2000);
            };

            if (
                navigator.clipboard &&
                window.isSecureContext
            ) {
                navigator.clipboard
                    .writeText(input.value)
                    .then(showCopied)
                    .catch(function() {
                        fallbackCopyApiKey(input);
                        showCopied();
                    });

                return;
            }

            fallbackCopyApiKey(input);
            showCopied();
        }

        function toggleClientApiKey(clientId, button) {
            const input = document.getElementById(
                `apiKeyClient${clientId}`
            );

            if (!input) {
                return;
            }

            const isHidden = input.type === 'password';

            input.type = isHidden ? 'text' : 'password';

            button.innerHTML = isHidden ?
                '<i class="fas fa-eye-slash"></i>' :
                '<i class="fas fa-eye"></i>';
        }

        function fallbackCopyApiKey(input) {
            const wasReadonly = input.hasAttribute(
                'readonly'
            );

            if (wasReadonly) {
                input.removeAttribute('readonly');
            }

            input.select();
            input.setSelectionRange(
                0,
                input.value.length
            );

            document.execCommand('copy');

            if (wasReadonly) {
                input.setAttribute(
                    'readonly',
                    'readonly'
                );
            }
        }
    </script>
@endsection