@extends('backendTools.layouts.backend')

@section('title', 'Socket Connection Check')
@section('header', 'Socket Connection Check')

@push('styles')
<style>
    .status-indicator {
        padding: 2rem;
        border-radius: .75rem;
        text-align: center;
        transition: all 0.3s ease-in-out;
        margin-top: 1.5rem;
    }

    .status-indicator .icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        display: inline-block;
    }

    .status-indicator .status-text {
        font-size: 1.5rem;
        font-weight: 500;
    }

    .status-checking {
        background-color: #f0f4f8;
        border: 1px solid #d6e0ea;
        color: #345172;
    }

    .status-success {
        background-color: #e6f9f0;
        border: 1px solid #b8e9d1;
        color: #1b8755;
    }

    .status-failed {
        background-color: #fdf0f1;
        border: 1px solid #f5c6cb;
        color: #d9534f;
    }

    .status-closed {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        color: #6c757d;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .spinner-icon {
        animation: spin 1s linear infinite;
    }
</style>
@endpush

@section('content')

@php
$activeTab = session('tab', $platforms[0] ?? '');
@endphp

@php
$defaultCurrency = env('DEFAULT_CURRENCY');
@endphp

<div class="pt-4 mb-2">
    <strong>目前預設幣別：</strong>
    @if(!empty($defaultCurrency))
    <span class="badge bg-success">{{ $defaultCurrency }} (請確認幣別是否正確，如果有錯誤請在env修改DEFAULT_CURRENCY)</span>
    @else
    <span class="badge bg-danger">目前未設置幣別，請在env設置DEFAULT_CURRENCY</span>
    @endif
</div>

<ul class="nav nav-tabs" id="platformTabs" role="tablist">
    @foreach($platforms as $i => $platform)
    <li class="nav-item" role="presentation">
        <button
            class="nav-link {{ $platform === $activeTab ? 'active' : '' }}"
            id="{{ $platform }}-tab"
            data-bs-toggle="tab"
            data-bs-target="#{{ $platform }}"
            type="button"
            role="tab"
            aria-selected="{{ $platform === $activeTab ? 'true' : 'false' }}">
            {{ strtoupper($platform) }}
        </button>
    </li>
    @endforeach
</ul>

<div class="tab-content" id="platformTabsContent">
    @foreach($platforms as $platform)
    <div
        class="tab-pane fade {{ $platform === $activeTab ? 'show active' : '' }}"
        id="{{ $platform }}"
        role="tabpanel">
        <form method="POST" id="{{ $platform }}" class="platform-form" data-platform="{{ $platform }}">
            @csrf
            <input type="hidden" name="tab" value="{{ $platform }}">
            <x-platforms.settings :platform="$platform" :settings="($settings[$platform] ?? [])" />
            <button type="button" class="btn btn-primary mt-3 btn-submit" data-action="update" data-platform="{{ $platform }}">儲存 {{ strtoupper($platform) }} 設定</button>
            <button type="button" class="btn btn-secondary mt-3 btn-submit" data-action="decrypt" data-platform="{{ $platform }}">解密</button>
            <button type="button" class="btn btn-warning mt-3 btn-submit" data-action="encrypt" data-platform="{{ $platform }}">加密</button>

            <button type="button" class="btn btn-info mt-3 btn-submit" data-action="test-link" data-platform="{{ $platform }}">
                遊戲連結測試
            </button>

        </form>

        {{-- ✅ 回調資訊 --}}
        <div class="api-whitelist-info mt-4 p-3 border rounded bg-white">
            <label class="form-label">新系統 回調資訊（{{ strtoupper($platform) }}）</label>
            <div class="text-muted">


                <li class="list-group-item d-flex flex-column">
                    {{ config('apiUrl.gameIntegration.nocf_url_new') }}/api/{{$defaultCurrency}}/{{ env('DB_DATABASE') }}/{{ strtoupper($platform) }}
                </li>




            </div>
        </div>

        <div class="api-whitelist-info mt-4 p-3 border rounded bg-white">
            <label class="form-label">舊系統回調資訊（{{ strtoupper($platform) }}）</label>
            <div class="text-muted">




                <li class="list-group-item d-flex flex-column">
                    {{ config('apiUrl.gameIntegration.nocf_url') }}/Singlemultiple/{{$defaultCurrency}}/{{ env('DB_DATABASE') }}/{{ strtoupper($platform) }}system
                </li>


            </div>
        </div>

        {{-- ✅ API 加白資訊 --}}
        <div class="api-whitelist-info mt-4 p-3 border rounded bg-white">
            <label class="form-label">API 加白資訊（{{ strtoupper($platform) }}）</label>
            @if (!empty($apiWhitelist[$platform]))
            <ul class="list-group">
                @foreach ($apiWhitelist[$platform]['ip'] as $entry)
                <li class="list-group-item d-flex flex-column">
                    <!-- <strong>名稱：</strong> {{ $entry['name'] ?? '未命名' }} -->
                    <strong>IP：</strong> {{ $entry ?? '-' }}
                    <!-- <strong>備註：</strong> {{ $entry['note'] ?? '-' }} -->
                </li>
                @endforeach
            </ul>
            @else
            <div class="text-muted"><em>目前沒有加白的 IP。</em></div>
            @endif
        </div>

    </div>



    @endforeach
</div>

@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {


        $('.btn-submit').on('click', function() {
            let button = $(this);
            let action = button.data('action'); // update / decrypt / encrypt / test-link
            let platform = button.data('platform');
            let form = button.closest('form');
            let formData = form.serialize();
            let url = `/api/backend-tools/list/platform-settings/${platform}/${action}`;

            const sendAjax = () => {
                $('#loading-modal').show();

                $.ajax({
                    url: url,
                    method: 'POST',
                    data: formData,
                    success: function(response) {
                        $('#loading-modal').hide();

                        if (action === 'decrypt' || action === 'encrypt') {
                            // 更新 textarea 內容
                            for (const [key, value] of Object.entries(response.data)) {
                                form.find(`textarea[name="${key}"]`).val(value);
                            }
                        } else if (action === 'test-link') {
                            window.open(response.data.url, '_blank');
                        } else {
                            Swal.fire({
                                icon: 'success',
                                title: action.toUpperCase() + ' 成功！',
                                showConfirmButton: true
                            });
                        }
                    },
                    error: function(xhr) {
                        $('#loading-modal').hide();
                        Swal.fire({
                            icon: 'error',
                            title: '操作失敗',
                            text: '錯誤代碼：' + xhr.status + ' - ' + xhr.statusText
                        });
                    }
                });
            };

            if (action === 'update') {
                Swal.fire({
                    title: '確定要儲存設定嗎？',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonText: '確定',
                    cancelButtonText: '取消'
                }).then((result) => {
                    if (result.isConfirmed) {
                        sendAjax();
                    }
                });
            } else {
                sendAjax();
            }
        });


        // 當使用者點擊 tab 時才發送 AJAX
        $('#platformTabs').on('click', 'button[data-bs-toggle="tab"]', function() {

            let platform = $(this).data('bsTarget').replace('#', '');
            let form = $('#' + platform);

            // 顯示 loading
            $('#loading-modal').show();

            // 發送 AJAX 請求
            $.ajax({
                url: `/api/backend-tools/list/platform-settings/${platform}/show`,
                method: 'GET',
                success: function(response) {
                    $('#loading-modal').hide();
                    for (const [key, value] of Object.entries(response.data)) {
                        form.find(`textarea[name="${key}"]`).val(value);
                    }
                },
                error: function(xhr) {

                    Swal.fire({
                        icon: 'error',
                        title: '載入失敗',
                        text: '錯誤代碼：' + xhr.status + ' - ' + xhr.statusText
                    });

                    $('#loading-modal').hide();
                }
            });
        });


    });
</script>
@endpush