@extends('user.layouts.app')

@section('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.css" id="prismTheme">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/api-docs.css') }}">
@endsection

@php
    // Define JSON data as PHP variables/arrays for Fast API
    $headersJson = json_encode(
        [
            'apiToken' => Auth::user()->api_token ?? 'Your_API_Token_Here',
            'Accept' => 'application/json',
        ],
        JSON_PRETTY_PRINT,
    );

    // Products API Response - Success
    $productsJson = json_encode(
        [
            'error' => false,
            'message' => 'Products fetched successfully',
            'data' => [
                'products' => [
                    [
                        'id' => 1,
                        'isActive' => 1,
                        'created_at' => '2025-07-13T19:35:51.000000Z',
                        'price' => '1.9074',
                        'note' => '111',
                        'name' => 'gdfgd',
                        'image' => 'http://127.0.0.1:8000/images/product_images/1752410151.png',
                        'game_id' => 9,
                        'minCount' => 150,
                        'maxCount' => 250000,
                        'currency' => 'ل.س',
                        'gameName' => 'nnnnn',
                        'zerocount' => 2,
                        'daynamicFields' => [
                            [
                                'id' => 14,
                                'name' => 'number',
                                'type' => 'number',
                                'label' => 'number',
                                'placeholder' => 'number',
                                'help_text' => 'number',
                                'required' => true,
                                'options' => [],
                                'default_value' => null,
                            ],
                        ],
                    ],
                    [
                        'id' => 2,
                        'isActive' => 0,
                        'created_at' => '2025-07-14T18:07:23.000000Z',
                        'price' => '1',
                        'note' => '1',
                        'name' => 'يبيقف',
                        'image' => 'http://127.0.0.1:8000/images/product_images/1752491243.png',
                        'game_id' => 9,
                        'minCount' => 1,
                        'maxCount' => 1,
                        'currency' => 'ل.س',
                        'gameName' => 'nnnnn',
                        'zerocount' => 2,
                        'daynamicFields' => [
                            [
                                'id' => 14,
                                'name' => 'number',
                                'type' => 'number',
                                'label' => 'number',
                                'placeholder' => 'number',
                                'help_text' => 'number',
                                'required' => true,
                                'options' => [],
                                'default_value' => null,
                            ],
                        ],
                    ],
                ],
            ],
        ],
        JSON_PRETTY_PRINT,
    );

    // Request Order API Response (Success)
    $requestOrderSuccessJson = json_encode(
        [
            'error' => false,
            'message' => 'تم معالجة الطلب بنجاح',
            'data' => [
                'order_number' => 'ORD-ABC123-1642512345',
                'amount' => 40.8608,
                'status' => 'pending',
                'notes' => null,
                'created_at' => now()->toDateTimeString(),
            ],
        ],
        JSON_PRETTY_PRINT,
    );

    // Request Order API Response (Error)
    $requestOrderErrorJson = json_encode(
        [
            'error' => true,
            'message' => 'الكمية يجب أن تكون بين 1 و 100',
        ],
        JSON_PRETTY_PRINT,
    );

    // Request Order API Response (Duplicate Order)
    $requestOrderDuplicateJson = json_encode(
        [
            'error' => true,
            'message' => 'هذا الطلب موجود بالفعل',
            'data' => [
                'order_number' => 'ORD-ABC123-1642512345',
                'amount' => 40.8608,
                'status' => 'pending',
                'notes' => null,
                'created_at' => now()->toDateTimeString(),
            ],
        ],
        JSON_PRETTY_PRINT,
    );

    // Single Order Check Response
    $singleOrderJson = json_encode(
        [
            'error' => false,
            'message' => 'Order fetched successfully',
            'data' => [
                'order' => [
                    'id' => 'ORD-ABC123-1642512345',
                    'order_number' => 'ORD-ABC123-1642512345',
                    'product_name' => '60uc||Pubg(ID)',
                    'game_name' => 'Pubg(ID)',
                    'price' => 40.8608199,
                    'currency' => 'USD',
                    'status' => 'completed',
                    'note' => 'تم تنفيذ الطلب بنجاح',
                    'created_at' => '2024-12-09 21:56:33',
                    'updated_at' => '2024-12-09 21:58:15',
                ],
            ],
        ],
        JSON_PRETTY_PRINT,
    );

    // Multiple Orders Check Response
    $checkOrdersJson = json_encode(
        [
            'error' => false,
            'message' => 'Orders fetched successfully',
            'data' => [
                'orders' => [
                    [
                        'order_number' => 'ORD-7n1Onuv-1753032957',
                        'price' => '288.02000',
                        'status' => 'processing',
                        'gamer_data' => [
                            'number' => '12',
                        ],
                        'created_at' => '2025-07-20 20:35:57',
                    ],
                ],
            ],
        ],
        JSON_PRETTY_PRINT,
    );

    // Balance API Response
    $balanceJson = json_encode(
        [
            'error' => false,
            'message' => 'Balance fetched successfully',
            'data' => [
                'name' => Auth::user()->name,
                'balance' => Auth::user()->balance,
            ],
        ],
        JSON_PRETTY_PRINT,
    );

    // Error Response Examples
    $unauthorizedJson = json_encode(
        [
            'error' => true,
            'message' => 'API token is required',
        ],
        JSON_PRETTY_PRINT,
    );

    $validationErrorJson = json_encode(
        [
            'error' => true,
            'message' => 'Validation failed',
            'errors' => [
                'product_id' => ['معرف المنتج مطلوب'],
                'qty' => ['الكمية مطلوبة'],
            ],
        ],
        JSON_PRETTY_PRINT,
    );

    $notFoundJson = json_encode(
        [
            'error' => true,
            'message' => 'المورد المطلوب غير موجود',
        ],
        JSON_PRETTY_PRINT,
    );

    $serverErrorJson = json_encode(
        [
            'error' => true,
            'message' => 'خطأ في الخادم',
        ],
        JSON_PRETTY_PRINT,
    );

    $baseUrl = config('app.url', 'https://balance.sw-games.net');

    // Helper function to generate skeleton HTML based on JSON content
    function generateSkeleton($json)
    {
        $lines = count(explode("\n", $json));
        $lineCount = max(5, min($lines, 15)); // Min 5, max 15 lines

        $skeletonHtml = '<div class="code-loading">';
        for ($i = 0; $i < $lineCount; $i++) {
            $skeletonHtml .= '<div class="skeleton-line"></div>';
        }
        $skeletonHtml .= '</div>';

        return $skeletonHtml;
    }

@endphp

@section('content')
    <div class="content-wrapper" dir="ltr">
        <div class="page-header">
            <x-lucide-code width="24" height="24" />
            <div class="page-header--title">
                <h1>Fast API Documentation</h1>
                <p class="text-muted" dir="rtl">توثيق شامل لـ Fast API endpoints</p>
            </div>
        </div>
        <div class="container-fluid mb-3">
            <!-- API Token Section -->
            <div class="row item">
                <div class="col-12">
                    <div class="page-subheader">
                        @svg('lucide-key-round', ['width' => '18', 'height' => '18'])
                        <h2>API Token</h2>
                        <p class="text-muted">يجب إرسال هذا التوكن في كل طلب API في الـ Headers</p>
                    </div>
                </div>
                <div class="input-group prefix max-w-md mx-auto">
                    <label for="token" class="form-label">API TOKEN</label>
                    <div class="input-wrapper prefix copyable-container" data-tooltip-position="left"
                        data-copy-value="{{ Auth::user()->api_token }}" role="button">
                        @svg('lucide-clipboard', ['class' => 'input-prefix', 'width' => '16', 'height' => '16'])
                        <input type="text" id="token" disabled value="{{ Auth::user()->api_token }}">
                    </div>
                </div>
            </div>

            <!-- Headers Section -->
            <div class="row item">
                <div class="justify-content-center">
                    <div class="col-12">
                        <div class="page-subheader">
                            @svg('lucide-credit-card', ['width' => '18', 'height' => '18'])
                            <h2>Headers</h2>
                            <p class="text-muted">الـ Headers المطلوبة في كل API request</p>
                        </div>
                    </div>
                </div>

                <div class="max-w-md mx-auto">
                    <div class="code-container">
                        <span class="code-label">Required Headers</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $headersJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($headersJson) !!}
                        <pre><code class="language-json">{{ $headersJson }}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Products API Section -->
            <div class="row item">
                <div class="justify-content-center">
                    <div class="col-12">
                        <div class="page-subheader">
                            @svg('lucide-package', ['width' => '18', 'height' => '18'])
                            <h2>Products API</h2>
                            <p class="text-muted">جلب قائمة بجميع المنتجات المتاحة</p>
                        </div>
                    </div>
                </div>

                <div class="max-w-md mx-auto">
                    <div class="input-group prefix">
                        <label for="products" class="form-label">API Endpoint - GET</label>
                        <div class="input-wrapper prefix copyable-container" data-tooltip-position="left"
                            data-copy-value="{{ $baseUrl }}/api/fastapi/products" role="button">
                            @svg('lucide-clipboard', ['class' => 'input-prefix', 'width' => '16', 'height' => '16'])
                            <input type="text" id="products" disabled value="{{ $baseUrl }}/api/fastapi/products">
                        </div>
                    </div>

                    <div class="code-container">
                        <span class="code-label">Success Response (200)</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $productsJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($productsJson) !!}
                        <pre><code class="language-json">{{ $productsJson }}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Request Order API Section -->
            <div class="row item">
                <div class="justify-content-center">
                    <div class="col-12">
                        <div class="page-subheader">
                            @svg('lucide-shopping-cart', ['width' => '18', 'height' => '18'])
                            <h2>Request Order API</h2>
                            <p class="text-muted">إنشاء طلب جديد</p>
                        </div>
                    </div>
                </div>
                <div class="max-w-md mx-auto">
                    <div class="input-group prefix">
                        <label for="requestorder" class="form-label">API Endpoint - GET</label>
                        <div class="input-wrapper prefix copyable-container" data-tooltip-position="left"
                            data-copy-value="{{ $baseUrl }}/api/fastapi/requestorder/{product_id}/params?qty={quantity}&{dynamic_fields}&uuid={optional_uuid}"
                            role="button">
                            @svg('lucide-clipboard', ['class' => 'input-prefix', 'width' => '16', 'height' => '16'])
                            <input type="text" id="requestorder" disabled
                                value="{{ $baseUrl }}/api/fastapi/requestorder/{product_id}/params?qty={quantity}&{dynamic_fields}&uuid={optional_uuid}">
                        </div>
                    </div>

                    <div class="api-description info">
                        <div class="api-description-header">
                            @svg('lucide-info', ['width' => '18', 'height' => '18'])
                            <h5>Parameters</h5>
                        </div>
                        <div class="api-description-content">
                            <ul>
                                <li><strong>product_id</strong>: معرف المنتج (من Products API)</li>
                                <li><strong>qty</strong>: الكمية المطلوبة</li>
                                <li><strong>dynamic_fields</strong>: بيانات اللاعب المطلوبة (تختلف حسب نوع اللعبة)</li>
                                <li><strong>uuid</strong>: معرف فريد للطلب (اختياري لتجنب التكرار)</li>
                            </ul>
                            <strong>أمثلة على البيانات المطلوبة:</strong><br>
                            <ul>
                                <li>PUBG: <code>Player_ID=123456789</code></li>
                                <li>Free Fire: <code>Player_ID=123456789</code></li>
                            </ul>
                        </div>
                    </div>

                    <div class="code-container">
                        <span class="code-label">Success Response (201)</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $requestOrderSuccessJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($requestOrderSuccessJson) !!}
                        <pre><code class="language-json">{{ $requestOrderSuccessJson }}</code></pre>
                    </div>

                    <div class="code-container">
                        <span class="code-label">Error Response (400)</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $requestOrderErrorJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($requestOrderErrorJson) !!}
                        <pre><code class="language-json">{{ $requestOrderErrorJson }}</code></pre>
                    </div>

                    <div class="code-container">
                        <span class="code-label">Duplicate Order Response (201)</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $requestOrderDuplicateJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($requestOrderDuplicateJson) !!}
                        <pre><code class="language-json">{{ $requestOrderDuplicateJson }}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Check Orders API Section -->
            <div class="row item">
                <div class="justify-content-center">
                    <div class="col-12">
                        <div class="page-subheader">
                            @svg('lucide-search', ['width' => '18', 'height' => '18'])
                            <h2>Check Orders API</h2>
                            <p class="text-muted">فحص حالة طلبات متعددة</p>
                        </div>
                    </div>
                </div>
                <div class="max-w-md mx-auto">
                    <div class="input-group prefix">
                        <label for="checkorders" class="form-label">API Endpoint - GET</label>
                        <div class="input-wrapper prefix copyable-container" data-tooltip-position="left"
                            data-copy-value="{{ $baseUrl }}/api/fastapi/checkorders?order_ids=123,456,789"
                            role="button">
                            @svg('lucide-clipboard', ['class' => 'input-prefix', 'width' => '16', 'height' => '16'])
                            <input type="text" id="checkorders" disabled
                                value="{{ $baseUrl }}/api/fastapi/checkorders?order_ids=123,456,789">
                        </div>
                    </div>

                    <div class="api-description info compact">
                        <div class="api-description-header">
                            @svg('lucide-settings', ['width' => '18', 'height' => '18'])
                            <h5>Parameters</h5>
                        </div>
                        <div class="api-description-content">
                            <ul>
                                <li><strong>order_ids</strong>: قائمة بمعرفات الطلبات مفصولة بفاصلة (حد أقصى 100 طلب)</li>
                            </ul>
                        </div>
                    </div>

                    <div class="code-container">
                        <span class="code-label">Success Response (200)</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $checkOrdersJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($checkOrdersJson) !!}
                        <pre><code class="language-json">{{ $checkOrdersJson }}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Balance API Section -->
            <div class="row item">
                <div class="justify-content-center">
                    <div class="col-12">
                        <div class="page-subheader">
                            @svg('lucide-wallet', ['width' => '18', 'height' => '18'])
                            <h2>Balance API</h2>
                            <p class="text-muted">جلب رصيد المستخدم الحالي</p>
                        </div>
                    </div>
                </div>
                <div class="max-w-md mx-auto">
                    <div class="input-group prefix">
                        <label for="balance" class="form-label">API Endpoint - GET</label>
                        <div class="input-wrapper prefix copyable-container" data-tooltip-position="left"
                            data-copy-value="{{ $baseUrl }}/api/fastapi/balance" role="button">
                            @svg('lucide-clipboard', ['class' => 'input-prefix', 'width' => '16', 'height' => '16'])
                            <input type="text" id="balance" disabled
                                value="{{ $baseUrl }}/api/fastapi/balance">
                        </div>
                    </div>

                    <div class="code-container">
                        <span class="code-label">Success Response (200)</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $balanceJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($balanceJson) !!}
                        <pre><code class="language-json">{{ $balanceJson }}</code></pre>
                    </div>
                </div>
            </div>

            <!-- Error Responses Section -->
            <div class="row item">
                <div class="justify-content-center">
                    <div class="col-12">
                        <div class="page-subheader">
                            @svg('lucide-triangle-alert', ['width' => '18', 'height' => '18'])
                            <h2>Common Error Responses</h2>
                            <p class="text-muted">الأخطاء الشائعة التي قد تواجهك</p>
                        </div>
                    </div>
                </div>
                <div class="max-w-md mx-auto">
                    <div class="code-container">
                        <span class="code-label">Unauthorized Error (401)</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $unauthorizedJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($unauthorizedJson) !!}
                        <pre><code class="language-json">{{ $unauthorizedJson }}</code></pre>
                    </div>

                    <div class="code-container">
                        <span class="code-label">Validation Error (422)</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $validationErrorJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($validationErrorJson) !!}
                        <pre><code class="language-json">{{ $validationErrorJson }}</code></pre>
                    </div>

                    <div class="code-container">
                        <span class="code-label">Not Found Error (404)</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $notFoundJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($notFoundJson) !!}
                        <pre><code class="language-json">{{ $notFoundJson }}</code></pre>
                    </div>

                    <div class="code-container">
                        <span class="code-label">Server Error (500)</span>
                        <button class="btn-custom-secondary btn-copy-code copyable-container"
                            data-copy-value="{{ $serverErrorJson }}">
                            @svg('lucide-clipboard', ['width' => '14', 'height' => '14'])
                            <span>copy</span>
                        </button>
                        {!! generateSkeleton($serverErrorJson) !!}
                        <pre><code class="language-json">{{ $serverErrorJson }}</code></pre>
                    </div>
                </div>
            </div>



            <!-- Status Codes Section -->
            <div class="row item">
                <div class="justify-content-center">
                    <div class="col-12">
                        <div class="page-subheader">
                            @svg('lucide-info', ['width' => '18', 'height' => '18'])
                            <h2>Status Codes</h2>
                            <p class="text-muted">أكواد الحالة المستخدمة في API</p>
                        </div>
                    </div>
                </div>
                <div class="max-w-md mx-auto">
                    <div class="api-table-responsive">
                        <table class="api-status-table">
                            <thead>
                                <tr>
                                    <th>Code</th>
                                    <th>Status</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td data-label="Code"><span class="status-badge success">200</span></td>
                                    <td data-label="Status">Success</td>
                                    <td data-label="Description">طلب ناجح</td>
                                </tr>
                                <tr>
                                    <td data-label="Code"><span class="status-badge success">201</span></td>
                                    <td data-label="Status">Created</td>
                                    <td data-label="Description">تم إنشاء طلب جديد</td>
                                </tr>
                                <tr>
                                    <td data-label="Code"><span class="status-badge warning">400</span></td>
                                    <td data-label="Status">Bad Request</td>
                                    <td data-label="Description">خطأ في البيانات المرسلة</td>
                                </tr>
                                <tr>
                                    <td data-label="Code"><span class="status-badge danger">401</span></td>
                                    <td data-label="Status">Unauthorized</td>
                                    <td data-label="Description">غير مصرح بالوصول</td>
                                </tr>
                                <tr>
                                    <td data-label="Code"><span class="status-badge warning">404</span></td>
                                    <td data-label="Status">Not Found</td>
                                    <td data-label="Description">المورد غير موجود</td>
                                </tr>
                                <tr>
                                    <td data-label="Code"><span class="status-badge warning">422</span></td>
                                    <td data-label="Status">Validation Error</td>
                                    <td data-label="Description">خطأ في التحقق من البيانات</td>
                                </tr>
                                <tr>
                                    <td data-label="Code"><span class="status-badge danger">500</span></td>
                                    <td data-label="Status">Server Error</td>
                                    <td data-label="Description">خطأ في الخادم</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Important Notes Section -->
            <div class="row item">
                <div class="justify-content-center">
                    <div class="col-12">
                        <div class="page-subheader">
                            @svg('lucide-alert-circle', ['width' => '18', 'height' => '18'])
                            <h2>Important Notes</h2>
                            <p class="text-muted">ملاحظات مهمة عند استخدام API</p>
                        </div>
                    </div>
                </div>
                <div class="max-w-md mx-auto">
                    <div class="api-description warning">
                        <div class="api-description-header">
                            @svg('lucide-lightbulb', ['width' => '18', 'height' => '18'])
                            <h5>ملاحظات مهمة</h5>
                        </div>
                        <div class="api-description-content">
                            <ul>
                                <li><strong>API Token:</strong> يجب إرسال التوكن في الـ headers مع كل طلب</li>
                                <li><strong>Rate Limiting:</strong> يوجد حد أقصى للطلبات في الدقيقة الواحدة</li>
                                <li><strong>UUID:</strong> استخدم معرف فريد لتجنب تكرار الطلبات</li>
                                <li><strong>Dynamic Fields:</strong> كل لعبة لها متطلبات مختلفة للبيانات</li>
                                <li><strong>Order Status:</strong> تحقق من حالة الطلب باستخدام Check Orders API</li>
                                <li><strong>Error Handling:</strong> تأكد من معالجة جميع أنواع الأخطاء</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
@endsection

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Highlight code and remove loaders when Prism is done
            Prism.highlightAll();

            // Need to wait for highlighting to complete
            setTimeout(() => {
                document.querySelectorAll('.code-container').forEach(container => {
                    // Remove loading elements
                    const loader = container.querySelector('.code-loading');
                    if (loader) {
                        loader.style.opacity = '0';
                        setTimeout(() => {
                            loader.remove();
                            container.classList.add('loaded');
                        }, 300);
                    }
                });
            }, 500);

            // Enhanced copy functionality with feedback
            document.querySelectorAll('.copyable-container').forEach(element => {
                element.addEventListener('click', function() {
                    const textToCopy = this.getAttribute('data-copy-value');
                    navigator.clipboard.writeText(textToCopy).then(() => {
                        // Visual feedback
                        const originalText = this.querySelector('span')?.textContent ||
                            'copy';
                        const icon = this.querySelector('i');

                        if (this.querySelector('span')) {
                            this.querySelector('span').textContent = 'copied!';
                        }
                        if (icon) {
                            icon.className = 'bi bi-check';
                        }

                        // Reset after 2 seconds
                        setTimeout(() => {
                            if (this.querySelector('span')) {
                                this.querySelector('span').textContent =
                                    originalText;
                            }
                            if (icon) {
                                icon.className = 'bi bi-clipboard';
                            }
                        }, 2000);
                    });
                });
            });
        });
    </script>
@endsection