@extends('layouts.merchant')

@section('breadcrumb')
<div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 position-relative gap-3">
    <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">{{ tr('settings') }}</h2>
    <div class="flex-shrink-0">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-end mb-0">
                <li><i class="ri-home-4-line fs-16 me-2 lh-sm text-primary"></i></li>
                <li class="breadcrumb-item"><a href="{{ route('merchant.dashboard') }}">{{ tr('home') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">Profile</li>
            </ol>
        </nav>
    </div>
</div>
@endsection

@section('content')
<div class="col-12">
    <div class="card">

        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">{{ tr('api_settings') }}</h5>

            <div class="d-flex gap-2">
                <form method="POST" action="{{ route('merchant.refresh_keys') }}">
                    @csrf
                    <button type="submit" class="btn btn-primary">
                        {{ tr('refresh_keys') }}
                    </button>
                </form>
            </div>

        </div>

        @php
        function maskKey($key) {
        if(!$key) return tr('na');
        $len = strlen($key);
        return str_repeat('*', max(0, $len - 4)) . substr($key, -4);
        }
        @endphp

        <div class="card-body">
            <div class="row g-4 mt-3">

                <div class="col-12 col-xl-6">
                    <label class="form-label">{{ tr('merchant_id') }}</label>
                    <div class="input-group">
                        <input type="text" class="form-control" readonly
                            value="{{ maskKey(Auth::user()->unique_id) }}">
                        <button class="btn btn-outline-secondary copy-btn" data-type="merchant_id" type="button" onclick="secureCopy(this)">
                            <i class="ri-file-copy-line"></i>
                        </button>
                    </div>
                </div>

                <div class="col-12 col-xl-6">
                    <label class="form-label">{{ tr('api_key') }}</label>
                    <div class="input-group">
                        <input type="text" class="form-control" readonly
                            value="{{ maskKey(Auth::user()->api_key) }}">
                        <button class="btn btn-outline-secondary copy-btn" data-type="api" type="button" onclick="secureCopy(this)">
                            <i class="ri-file-copy-line"></i>
                        </button>
                    </div>
                </div>

                <div class="col-12 col-xl-6">
                    <label class="form-label">{{ tr('salt_key') }}</label>
                    <div class="input-group">
                        <input type="text" class="form-control" readonly
                            value="{{ maskKey('***********') }}">
                        <button class="btn btn-outline-secondary copy-btn" data-type="salt" type="button" onclick="secureCopy(this)">
                            <i class="ri-file-copy-line"></i>
                        </button>
                    </div>
                </div>

                <div class="col-12 col-xl-6">
                    <label class="form-label">{{ tr('private_key') }}</label>
                    <div class="input-group">
                        <input type="text" class="form-control" readonly
                            value="{{ maskKey('***********') }}">
                        <button class="btn btn-outline-secondary copy-btn" data-type="private" type="button" onclick="secureCopy(this)">
                            <i class="ri-file-copy-line"></i>
                        </button>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<div class="col-12">
    <div class="card">

        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">{{ tr('callback_settings') }}</h5>
        </div>

        <div class="card-body">
            <div class="row g-4 mt-3">
                <div class="col-12">
                    <label class="form-label">{{ tr('callback_url') }}</label>
                    <input type="text" class="form-control" id="callback_url" value="{{ Auth::user()->callback_url }}">
                </div>

                <div class="col-12">
                    <button class="btn btn-primary" id="update_callback_url_btn" onclick="updateCallbackUrl()">
                        {{ tr('update_callback_url') }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script>
    function secureCopy(button) {
        const type = button.dataset.type;
        const icon = button.querySelector('i');

        const originalIcon = icon.className;

        icon.className = 'ri-loader-4-line ri-spin';
        button.disabled = true;

        fetch("{{ route('merchant.get_key') }}", {
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    type
                })
            })
            .then(res => res.json())
            .then(data => {
                return navigator.clipboard.writeText(data.key);
            })
            .then(() => {
                showToast("Copied to clipboard", "success");
            })
            .catch(() => {
                showToast("Failed to copy key", "error");
            })
            .finally(() => {
                icon.className = originalIcon;
                button.disabled = false;
            });
    }

    function updateCallbackUrl() {
        const button = document.getElementById('update_callback_url_btn');
        const urlInput = document.getElementById('callback_url');
        const originalText = button.innerHTML;

        button.innerHTML = '<i class="ri-loader-4-line ri-spin"></i>';
        button.disabled = true;

        fetch("{{ route('merchant.update_callback_url') }}", {
                method: "POST",
                headers: {
                    "X-CSRF-TOKEN": "{{ csrf_token() }}",
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    callback_url: urlInput.value
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, "success");
                } else {
                    showToast("Failed to update Callback URL", "error");
                }
            })
            .catch(() => {
                showToast("An error occurred", "error");
            })
            .finally(() => {
                button.innerHTML = originalText;
                button.disabled = false;
            });
    }
</script>