@extends('layouts.superadmin') {{-- Your existing layout file name might differ --}}

@section('title', 'Restore API Token')
@section('page-title', 'Restore API Token')

@section('breadcrumb')
    <li class="breadcrumb-item active">Restore API Token</li>
@endsection

@section('content')
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Restore API Token</h5>
    </div>
    <div class="card-body">
        <p>Click the button below to refresh your Zoho API access token using the stored refresh token.</p>
        <button id="restoreTokenBtn" class="btn btn-primary">
            <i class="fas fa-sync-alt me-2"></i> Restore Token
        </button>

        <div id="tokenResult" class="mt-3" style="display:none;">
            <h6>New Access Token:</h6>
            <pre class="bg-light p-2 rounded" id="accessTokenText"></pre>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
$(document).ready(function(){
    $('#restoreTokenBtn').click(function(){
        $('#restoreTokenBtn').prop('disabled', true).text('Restoring...');
        $('#tokenResult').hide();

        $.ajax({
            url: "{{ route('superadmin.api-token.restore.call') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(data) {
                $('#restoreTokenBtn').prop('disabled', false).text('Restore Token');
                $('#accessTokenText').text(data.access_token || 'No token returned');
                $('#tokenResult').show();
            },
            error: function(xhr) {
                $('#restoreTokenBtn').prop('disabled', false).text('Restore Token');
                alert('Failed to restore token: ' + xhr.responseText);
            }
        });
    });
});
</script>
@endsection