@section('title', 'Admin Console')

@section('top-menu-items')
    <div class="menu-item here show menu-lg-down-accordion me-lg-1">
        <a class="menu_link py-3 " style="background: #F3F3F3; color: #F4404B"
            href="/taxes" wire:navigate>
            <span class="menu-title">Organization</span>
        </a>
    </div>
    <x-partials.top-menu-item name="Tour Vessels" route="vessels" />
    <x-partials.top-menu-item name="Team Members" route="users" />
@endsection
@section('sub-menu-items')
    <x-partials.sub-menu-item name=" Availability" route="settings" />
    <x-partials.sub-menu-item name="Special Unavailability" route="special-unavailability" />
    <x-partials.sub-menu-item name="Taxes" route="taxes" />
    <x-partials.sub-menu-item name="Online Bookings" route="online-booking" />
    <x-partials.sub-menu-item name="Airport Settings" route="airport-setting" />
    <x-partials.sub-menu-item name="Booking Settings" route="order-information" />
    <x-partials.sub-menu-item name="APIs" route="auth-token" />
    <x-partials.sub-menu-item name="Integrations" route="stripe-connect" />   
@endsection
<div class="content d-flex flex-column flex-column-fluid mt-12" id="kt_content">
    <div class="d-flex justify-content-between w-50">
        <div id="kt_content_container" class="container-xxl">
            <div class="row">
                <div class="col-4">                    
                    <button class="btn btn-primary" wire:click="createToken">Generate Token</button>
                </div>

                <div class="col-8">
                    @if ($token)
                        <div id="tokenBox">
                            <div class="input-group">
                                <input type="text" id="apiToken" value="{{ $token }}" class="form-control" readonly>
                                <button class="btn btn-secondary btn-outline-secondary" onclick="copyToken()">Copy</button>
                            </div>
                            <small class="text-danger d-block mt-2">
                                ⚠️ This token will be shown only once. Please copy and store it safely.
                            </small>
                            <small class="text-success d-none mt-2" id="copiedMsg">✅ Token copied to clipboard!</small>
                        </div>
                    @endif
                </div>

            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        function copyToken() {
            const apiToken = document.getElementById('apiToken');
            const copiedMsg = document.getElementById('copiedMsg');

            apiToken.select();
            apiToken.setSelectionRange(0, 99999);
            document.execCommand('copy');
            copiedMsg.classList.remove('d-none');
            setTimeout(() => copiedMsg.classList.add('d-none'), 2000);
        }
    </script>
@endpush