@extends('layouts.customer_template')

@section('title')
    Bitbance Wallet
@endsection

@section('style')

    <link rel="stylesheet" href="{{asset('customer/assets/css/wallet.css')}}" />
    <link rel="stylesheet" href="{{asset('customer/assets/css/wallet-responsive.css')}}" />
    <style>

        .dashboard table {
            width: 100%;
            border-collapse: collapse;
        }

        .dashboard th,
        .dashboard td {
            text-align: center;  /* Centers text in all table cells */
            padding: 12px;       /* Adds some spacing */
        }

    </style>
@endsection

@section('content')
   
    <div class="container content-section">
        <div class="wallet-wrapper">
            <div class="balance-card">
                <div class="stats">
                    <p class="label">Estimated Balance</p>
                    <h2 class="balance" style="font-size: 23px">${{$balance_in_usd ?? 0}}</h2>
                    <p class="pnl">
                        PNL <span class="pnl-amount"> @if($lossPercentage > 0)-@elseif($profitPercentage >= 0 )+@endif $
                            @if($balance_in_usd > 0)
                               {{ abs($PNL)?? 0 }}
                            @else 0
                            @endif
                        </span>
                        <span class="pnl-percent">
                            @if($balance_in_usd > 0)
                                @if($PNL > 0)
                                    (+{{$profitPercentage}}%)
                                @else
                                    (-{{$lossPercentage}}%)
                                @endif
                            @else
                                 (0 %)
                            @endif
                        </span>
                    </p>
                </div>

                <div class="buttons">
                    <a href="{{ route('deposits') }}">
                        <button class="btn-main">Deposit</button>
                    </a>
                    <a href="{{ route('withdraw') }}">
                        <button class="btn-main">Withdraw</button>
                    </a>
                    <a href="{{ route('trades_wallet') }}">
                        <button class="btn-main">Exchange</button>
                    </a>
                    <a href="{{ route('transaction') }}">
                        <button class="btn-main">Transactions</button>
                    </a>
                </div>
            </div>

            <div class="dashboard">
                <table>
                    <thead>
                    <tr>
                        <th class="text-disabled pb-6">Coin View</th>
                        <th class="text-disabled pb-2">Amount</th>
                        <th class="text-disabled pb-6">Coin Price/Cost Price</th>
                        <th class="text-disabled pb-2" style="padding-left: 120px !important">PNL</th>
                    </tr>
                    </thead>
                    <tbody>
                    @if(isset($currency_wallet_balances))
                        @foreach($currency_wallet_balances as $wallet)
                            @if($wallet['wallet_balance'] && $wallet['wallet_balance'] > 0)
                            <tr>
                                <td class="pb-4" style="text-align: left; padding-left: 20px !important" >
                                    <img src="{{asset($wallet['img_url'])}}" class="coin-img" alt="" /> {{$wallet['currency'] ?? ""}}
                                    <span class="secondary-text"> {{$wallet['currency_name'] ?? ""}} </span>
                                </td>
                                @if($wallet['currency_name'] == "USDT" || $wallet['currency_name'] == "USDC" )
                                    <td class="pb-4" style="text-align: center;"> {{round($wallet['wallet_balance'],2) ?? 0}}</td>

                                @else
                                    <td class="pb-4" style="text-align: center;"> {{round($wallet['wallet_balance'],6) ?? 0}}</td>

                                @endif

                                <td class="pb-4" style=""> @if($wallet['wallet_balance'] > 0) $ {{round(($wallet['wallet_balance'] * $wallet['currency_rate']),2)}} @else $ 0 @endif</td>
                                <td class="profit pb-4" style="padding-left: 110px !important">
                                    @if($wallet['pnl'] >= 0) + @else - @endif $ {{abs($wallet['pnl']) ?? 0}}
                                </td>
                            </tr>
                            @endif
                        @endforeach
                     @else

                    @endif
                    </tbody>
                </table>
            </div>
        </div>
        @include('layouts.includes.footer')
    </div>


@endsection


@section('script')
    <script>
    function toggleSidebar() {
        var sidebar = document.getElementById("sm-sidebar");
        var burgerMenu = document.querySelector(".burger-menu");

        if (sidebar.style.left === "0px") {
            sidebar.style.left = "-40%";
            burgerMenu.innerHTML = "&#9776;";
        } else {
            sidebar.style.left = "0px";
        }
    }
    </script>


@endsection