@extends(template() . 'layout.master2')


@section('content2')




<div class="space-y-8">
    <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
        <div>
            <h1 class="text-2xl font-black uppercase italic tracking-tight text-zinc-900 dark:text-white">
                {{ __('Top') }} <span class="text-emerald-500">{{ __('Traders') }}</span>
            </h1>
            <p class="text-[10px] font-bold uppercase tracking-widest text-zinc-500 mt-1 italic">Copy trade the world's best performers</p>
        </div>
        <a href="{{ route('user.dashboard') }}" class="px-5 py-2.5 rounded-xl bg-zinc-200 dark:bg-zinc-900 text-zinc-600 dark:text-zinc-400 text-xs font-black uppercase tracking-widest hover:bg-emerald-500 hover:text-white transition-all flex items-center gap-2">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left">
        <path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>
    </svg> {{ __('Back') }}
        </a>
    </div>

    <div class="bg-amber-500/10 border border-amber-500/20 rounded-[2rem] p-6 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div class="flex items-center gap-4">
         <div class="w-12 h-12 rounded-2xl bg-amber-500 flex items-center justify-center text-white shadow-lg shadow-amber-500/20">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scroll-text">
        <path d="M15 12h-5"/><path d="M15 8h-5"/><path d="M19 17V5a2 2 0 0 0-2-2H4"/><path d="M8 21h12a2 2 0 0 0 2-2v-1a1 1 0 0 0-1-1H11a1 1 0 0 0-1 1v1a2 2 0 1 1-4 0V5a2 2 0 1 0-4 0v2a1 1 0 0 0 1 1h3"/>
    </svg>
</div>
            <div>
                <h4 class="text-xs font-black uppercase tracking-widest text-amber-600 dark:text-amber-400">Trading Disclosure</h4>
                <p class="text-[11px] font-bold text-zinc-500 dark:text-zinc-400">Please review the copy trading terms before proceeding.</p>
            </div>
        </div>
        <button onclick="document.getElementById('agreementModal').classList.remove('hidden')" class="px-6 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 text-[10px] font-black uppercase tracking-[0.15em] rounded-xl hover:scale-105 transition-transform active:scale-95">
            {{ __('View Agreement') }}
        </button>
    </div>

    <form method="post" action="{{ route('traders.search') }}" class="relative group">
        @csrf
        <div class="absolute inset-y-0 left-5 flex items-center pointer-events-none">
         <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search text-zinc-400 group-focus-within:text-emerald-500 transition-colors">
        <circle cx="11" cy="11" r="8"/>
        <path d="m21 21-4.3-4.3"/>
    </svg>
        </div>
        <input type="text" name="trader_name" 
            class="w-full bg-white dark:bg-zinc-900 border-2 border-zinc-100 dark:border-zinc-800 py-5 pl-14 pr-32 rounded-2xl text-sm font-bold text-zinc-600 dark:text-zinc-300 outline-none focus:border-emerald-500 shadow-sm transition-all" 
            placeholder="Search by trader name or strategy..." required>
        <button type="submit" class="absolute inset-y-2 right-2 px-6 bg-emerald-500 text-white text-[10px] font-black uppercase tracking-widest rounded-xl hover:bg-emerald-600 transition-colors">
            {{ __('Find') }}
        </button>
    </form>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($traders as $trader)
        <div class="group bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 rounded-[2.5rem] p-8 shadow-sm hover:border-emerald-500/50 transition-all duration-300">
            <div class="flex flex-col items-center">
                <div class="relative">
                    <div class="absolute -inset-1 bg-gradient-to-tr from-emerald-500 to-sky-500 rounded-full blur opacity-25 group-hover:opacity-100 transition duration-500"></div>
                    <img src="{{ asset('asset/theme5/images/trader/' . $trader->trader_image) }}" 
                        class="relative w-24 h-24 rounded-full object-cover border-4 border-white dark:border-zinc-900 shadow-xl" 
                        alt="{{ $trader->trader_name }}">
                    <div class="absolute bottom-0 right-0 w-6 h-6 bg-emerald-500 border-4 border-white dark:border-zinc-900 rounded-full flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check">
        <path d="M20 6 9 17l-5-5"/>
    </svg>
                    </div>
                </div>

                <h3 class="mt-6 text-lg font-black italic uppercase tracking-tighter text-zinc-900 dark:text-white">
                    {{ $trader->trader_name }}
                </h3>
                
                <div class="grid grid-cols-2 gap-3 w-full mt-8">
                    <div class="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-950/50 border border-zinc-100 dark:border-zinc-800 text-center">
                        <p class="text-[10px] font-black text-emerald-500 uppercase tracking-tighter">{{ $trader->return_rate }}%</p>
                        <p class="text-[8px] font-black text-zinc-400 uppercase tracking-widest">ROI</p>
                    </div>
                    <div class="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-950/50 border border-zinc-100 dark:border-zinc-800 text-center">
                        <p class="text-[10px] font-black text-zinc-900 dark:text-white uppercase tracking-tighter">{{ number_format($trader->Followers) }}</p>
                        <p class="text-[8px] font-black text-zinc-400 uppercase tracking-widest">Followers</p>
                    </div>
                    <div class="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-950/50 border border-zinc-100 dark:border-zinc-800 text-center">
                        <p class="text-[10px] font-black text-zinc-900 dark:text-white uppercase tracking-tighter">{{ number_format($trader->Number_of_copiers) }}</p>
                        <p class="text-[8px] font-black text-zinc-400 uppercase tracking-widest">Copiers</p>
                    </div>
                    <div class="p-4 rounded-2xl bg-zinc-50 dark:bg-zinc-950/50 border border-zinc-100 dark:border-zinc-800 text-center">
                        <p class="text-[10px] font-black text-sky-500 uppercase tracking-tighter">{{ $trader->Accuracy }}%</p>
                        <p class="text-[8px] font-black text-zinc-400 uppercase tracking-widest">Win Rate</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 w-full gap-3 mt-8">
                    @auth
                    <a href="{{ route('copytrader', $trader->id) }}" class="w-full py-4 rounded-xl bg-emerald-500 hover:bg-emerald-600 text-white text-[10px] font-black uppercase tracking-[0.2em] text-center shadow-lg shadow-emerald-500/20 transition-all active:scale-95">
                        {{ __('Copy Strategy') }}
                    </a>
                    @endauth
                    <a href="{{ url('viewtrader/' . $trader->id) }}" class="w-full py-4 rounded-xl bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-[10px] font-black uppercase tracking-[0.2em] text-center hover:bg-zinc-200 dark:hover:bg-zinc-700 transition-all">
                        {{ __('View Performance') }}
                    </a>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <div class="flex justify-center items-center py-12">
        <div class="custom-pagination">
            {{ $traders->links('vendor.pagination.tailwind') }}
        </div>
    </div>
</div>

<style>
    /* Styling for the Laravel pagination generated classes to match theme */
    .custom-pagination nav svg { width: 1.5rem; height: 1.5rem; }
    .custom-pagination span[aria-current="page"] > span { 
        background-color: #10b981 !important; 
        color: white !important; 
        border-radius: 0.75rem;
        border: none;
    }
    .custom-pagination a, .custom-pagination span {
        border-radius: 0.75rem;
        margin: 0 2px;
        font-weight: 800;
        font-size: 0.75rem;
        border-color: rgba(161, 161, 170, 0.2) !important;
    }
</style>

<div id="agreementModal" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" onclick="document.getElementById('agreementModal').classList.add('hidden')"></div>

        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>

        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200 flex justify-between items-center">
                <h3 class="text-lg font-bold text-gray-900" id="modal-title">
                    {{ __('Copy Trading Agreement') }}
                </h3>
                <button type="button" class="text-gray-400 hover:text-gray-500" onclick="document.getElementById('agreementModal').classList.add('hidden')">
                    <span class="text-2xl">&times;</span>
                </button>
            </div>

            <div class="px-6 py-4 max-h-[70vh] overflow-y-auto text-gray-700 text-sm leading-relaxed space-y-4">
                <p class="font-medium">The users including copiers and traders of the copy trading service must read the Copy Trading Service Agreement carefully...</p>
                
                <h4 class="font-bold text-gray-900 mt-4">1. Copiers need to be aware of the following risks:</h4>
                <ul class="list-disc pl-5 space-y-2">
                    <li><strong>a.</strong> Copy trading users may not be able to copy trades during maintenance...</li>
                    <li><strong>b.</strong> Copy trading activities may not be executed simultaneously...</li>
                    <li><strong>c.</strong> The opening price, closing price and PnL ratios may differ...</li>
                    </ul>

                <h4 class="font-bold text-gray-900 mt-4 underline">Traders Agreement</h4>
                <p>1. Traders agree to comply with the platform's restrictions...</p>
                
                <div class="bg-blue-50 p-4 rounded border-l-4 border-blue-500">
                    <strong>Special Note:</strong> The system will monitor accounts and detect violations based on an automatic recognition algorithm.
                </div>

                <!--<p>{!! nl2br(e($full_agreement_text_variable ?? 'Content loaded here...')) !!}</p>-->
                <p class="title-info">
                    
                    The users including copiers and traders of the copy trading service must read the Copy Trading Service Agreement (hereinafter referred to as the Agreement) carefully before accepting the Agreement. By continuing to access or use the copy trading service (hereinafter referred to as the Service), you consent to bear all the risks and the loss incurred as provided in the Agreement. Please do not continue to access or use the Service if you do not accept the Agreement.<br>

<!--<h3 class="title">Copier Agreement</h3><br>-->
1. Copiers need to be aware of the following risks:<br>

a. Copy trading users may not be able to copy trades during maintenance necessitated by unstable services provided by the network operator or third-party partners, excessive system load, and other reasons.<br>

b. Copy trading activities may not be executed simultaneously or even at all, due to time-delayed execution of system instructions, delays in the trading signal from external platforms or other network issues.
<br>
c. The opening price, closing price and PnL ratios of copiers may differ as a result of objective factors such as changes in the market and insufficient market depth. Differences will be more significant under more extreme market conditions.
<br>
d. The opening price, closing price and PnL ratios of traders may differ from copiers as a result of changes in the market and insufficient market depth restrictions. Differences will be more significant under extreme market conditions.
<br>
e. When you use CopyTrade Pro (with Binance traders), you may have a different position ratio and order amount from the trader due to unstable service provided by Binance such as a delay or loss in the trading signal. When traders are using pair trading, grid trading, the Martingale strategy or other strategies that require positions to be strictly aligned, copiers may be unable to copy successfully causing losses.
<br>
f. When using CopyTrade Pro (with Binance traders), due to the differences in liquidation rules of different Exchanges, forced liquidation of your orders may be triggered earlier than the trader when there is a significant loss of the position.
<br>
g. When the TP/SL is set and triggered, due to factors such as unstable network, insufficient market depth, and unstable external service signal, the actual trigger price might be different from the preset value and there is no guarantee that the closing price or PnL ratio of your order is as same as the preset value.
<br>
h. There may be a risk of loss when copying the orders of traders. In the case of improper risk control, you may lose all of your balance.
<br>
i. Before using the Service to copy orders, you should be aware that BingX only provides the copying service of the trading signal, and sends the trading instruction as synchronized with the trader to the market under your authorization to deal with the market counterparty. Limited by factors such as changes in market conditions, changes in market depth, and time-delayed execution of system instructions, there is no guarantee that the copied orders will have the same opening (closing) price, opening (closing) time, and profit/loss (profit/loss ratio). The loss incurred thereby is solely at your risk.
<br>
j. Trading strategies belong to the trader's intellectual property rights. In order to protect traders' rights and interests and to maintain a fair community environment for all traders, the platform may hide some or all of the key information and features of your copy trades.
<br>
k. Traders may be removed due to violations, delisting and other reasons which will end the copy trading relationship. To protect the assets of copiers, the system will automatically cancel all copy trades after the relationship ends.
<br>


2. Copiers agree that the platform has the right to adjust the Copy Trading community rules in accordance with the development direction of the community, including but not limited to:
Adjusting the traders’ profit share from sharing trades or profits from recommending traders.<br>
<!--<h3 class="title">Copy Trading Trader Agreement</h3>-->
1. Traders agree to comply with the platform's restrictions on accessing the Service after starting sharing trades, including but not limited to:<br>
a. You will not be able to copy the orders of other traders<br>
b. Your existing copy orders may be closed<br>
2. Traders agree to comply with the platform's restrictions on the copy trading activities, including but not limited to:<br>
a. Limits on leverage<br>
b. Limits on the number of copiers<br>
c. Limits on the trading volume of your copiers<br>
d. Limits on the trading pair varieties<br>


3. Traders agree that the platform has the right to adjust the Copy Trading community rules in accordance with the development direction of the community, including but not limited to:<br>
a. Adjusting the traders‘ public trading information<br>
b. Adjusting the traders’ profit share from the share trading or from recommending traders<br>
c. Adjusting the settlement cycle of the traders’ profit share<br>
d. Adjusting the traders' ranking rules<br>
e. Adjusting the trading fees of shared orders/copy orders<br>
f. Hiding some or all key info. of the copy orders on the copier's position page<br>


4. Traders need to be aware of the following risks:<br>

a. You will not be able to share trades during service maintenance necessitated by unstable services provided by the network operator or third parties, excessive system load, and other reasons.<br>

b. Your trading activities of shared accounts may not be copied simultaneously or even cannot be copied by copiers due to time-delayed execution of system instructions, a delay of the trading signal from external platforms, and other network issues.<br>

c. Due to market limitations such as market changes and insufficient market depth, you may have different opening prices, closing prices, and PnL ratios from your copiers. And these differences will widen under extreme market conditions.<br>

d. When you share orders from Binance via API, you may have a different position ratio and order amount from your copiers due to unstable service of Binance such as a delay or loss in the trading signal. You may encounter unsuccessful copy trading and a loss ensued thereby if the trader uses strategies such as hedging, grid trading, martingale trading, etc., that require strict alignment of positions.<br>

e. If you share orders from external platforms via API, due to the differences in liquidation rules of different Exchanges, the forced liquidation of copiers' positions with a significant loss may be triggered earlier than you.<br>

f. Your copiers can set TP/SL for their copy orders. However, due to factors such as unstable network, insufficient market depth, and unstable external service signal, the actual trigger price might be different from their preset value and there is no guarantee that the closing price or PnL ratio of their orders is the same as the preset value.<br>
5. Prohibitions and Penalties:<br>

<!--<h3 class="title">Share Trading Prohibitions</h3><br>-->

Traders are prohibited from using multiple accounts for share trading.<br>
Traders are prohibited from plagiarizing the orders of other traders in any way such as copying other traders' trading strategies.<br>
Traders are not allowed to explicitly or implicitly display their social accounts in the platform's personal profile, avatar, and other places.<br>
Traders are not allowed to express or imply pornographic or reactionary information in the platform's personal profile, avatar, and other places.<br>
Traders are not allowed to increase their copiers or funds by wash trades.<br>
Traders are not allowed to conduct ultra-short-term transactions.<br>
Otherwise, BingX shall impose the following penalties depending on the severity of the cases:<br>

<!--<h3 class="title">Issuing a warning</h3>-->
Reduce the weight of the community rankings<br>
Reduce the max. trading leverage or the max. trading volume of all the copiers
Remove the trader from the trader list<br>
Confiscate the profit share earned from share trading violations<br>
<b>Special Note:</b> The system will monitor accounts and detect violations based on an automatic recognition algorithm. Therefore, there may be misjudgments. If you do not agree with the decision of the platform, you can contact BingX customer support to appeal.
<strong>Basic Copy Trading Agreement</strong><br>
Users' Rights and Obligations<br>
a. You (copiers and traders) must be natural or legal persons who can fully assume legal responsibility.<br>

b. You shall be responsible for the personal data (including documents and other relevant information) provided to the platform and ensure the data's authenticity and reliability, which will be strictly verified and evaluated by BingX. You will be restricted from trading on the platform if the personal information (such as trading experience, trading strategy, etc.) provided is insufficient or fails to pass the review.<br>

c. You shall not submit others' information (such as name, ID number, phone number, or email address) and you will be restricted by the platform from accessing or using its products and services if the information you provide is inaccurate, illegal or invalid.<br>

d. If you want to change your personal information or the account type, you can apply to the platform's online support by submitting a work order, and the platform will process it after reviewing. You are advised to inform the platform of such change in a timely manner, otherwise, you shall solely bear any loss incurred thereby. In order to keep your personal information updated and accurate, you can request the platform to correct or delete the information you consider incorrect.<br>

e. You shall be responsible for the custody of your account ID and passwords, and assume legal responsibility for any trading activities in your account.<br>

f. You need to read the relevant terms carefully on the platform's official website, understand the applicable laws and regulations, and bear all the risks incurred by your trading or copy trading activities. The platform does not provide any specific investment advice and does not express any relevant opinions.<br>

g. You must comply with the relevant laws and regulations when posting information on the platform and using the Service. You must not maliciously publish or spread harmful information against laws and social ethics, including text, pictures, audio, video, etc, nor can you publish any defamatory and harmful comments that damage the reputation of the platform.<br>

h. You should check your account information regularly and report to the platform in time if there is an error. If such error is not reported to the platform within 72 hours after the trading instruction is executed, you shall bear any losses and damages incurred thereby.<br>

i. Traders need to keep their trading status updated and accurate so that their copiers can catch up with their trading activities and strategies.<br>

j. Traders must ensure an accurate description of their trading strategies on the platform so that the copiers can make investment decisions based on the description. Traders need to ensure that their trading activities are consistent with the strategy description. Otherwise, the platform will not approve their strategies. In the case of serious loss caused by traders' trading activities, the platform will take actions to interfere with their trading, such as suspending the traders' account or cutting off the share trading with copiers.<br>
<strong>The Platform's Rights and Obligations</strong><br>
a. The platform has the right to use the information you publish on the platform (such as text, pictures, etc., excluding ID cards, bank cards, and personal and private information) for other legal purposes, such as copying, modifying, adapting, translating, promoting, and analysis.<br>

b. All graphic information on the platform is for the purpose of disseminating useful information to the masses and does not mean that the platform agrees with its message.<br>

c. The platform will not provide or express any advice or opinions on investment. You need to exercise independent thinking and trading.<br>

d. To safeguard the interests and rights of both parties, the platform has the right to evaluate your expertise, experience and adaptability based on the information you provide. The platform will reject information that is unreliable or inaccurate.<br>

e. The platform will not bear any loss incurred by any unauthorized disclosure of the trading data or related information to the platform by any natural or legal persons.<br>

f. On a regular, pre-determined basis (at the sole discretion of the platform), the platform will calculate the Total Amount owing by the platform to the trader. This Total Amount will be derived after netting off all losses against profits for all copy trading transactions carried out by his/her copiers during the relevant period for settling the outstanding Total Amount to the trader (the Settlement Period). In the event of any dispute as to the Total Amount owing by the platform to the trader for any given Settlement Period, both parties hereby agree that the calculation methodology employed by the platform is proprietary, final and non-negotiable. The trader is entitled to request a list of the transactions used in deriving the Total Amount and may produce evidence that the platform has not taken into account a transaction or transactions in calculating the Total Amount for the Settlement Period (which the platform (in its sole discretion) may decide to incorporate and revise the Total Amount accordingly). However, the trader is not entitled to question or demand the production of any information relating to the calculation of the Total Amount, including but not limited to computer code, applications, spreadsheets, formulas, equations, or any other database or program used by the platform in this regard.<br>
<strong>Effectiveness, Amendment and Termination of the Agreement</strong><br>
a. The Agreement shall take effect upon users becoming a copier or a trader on the platform until the termination of this Agreement or breach of contract. Either party can terminate this Agreement at any time. Users need to issue a notice in writing or by mail in advance to terminate the Agreement. The platform will notify you in writing or by email within 7 working days after the receipt of the notice to confirm the termination of the Agreement.<br>

b. The platform reserves the right to modify the relevant terms and the final interpretation of the Agreement in order to safeguard its legal rights and interests and improve the Agreement. The platform will issue a notice on the website (or via email and other messaging channels) before modifying the terms of this Agreement. Users are advised to keep updated with these amendments while using or accessing the Service, and abide by the Agreement and related service agreements. The Agreement shall still be effective regardless of any modification made by the platform of any trading conditions and execution rules.<br>
                    
                    
                </p>
                
            </div>

            <div class="bg-gray-50 px-6 py-3 flex flex-row-reverse border-t border-gray-200">
                <button type="button" class="w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm" 
                        onclick="document.getElementById('agreementModal').classList.add('hidden')">
                    {{ __('Close') }}
                </button>
            </div>
        </div>
    </div>
</div>

    
    

        @endsection