@extends('template.coin.layouts.base')

@section('title', __('Dashboard'))
@section('css')
<link href="{{getTemplateFiles('coin')}}/assets/user/css/app.css?ver=132" type="text/css" rel="stylesheet"> 
<style>
    .dark-mode .card-stats-data .amount{
        color: #fff;
    }
</style>

@endsection

@section('content')
<div class="nk-content nk-content-fluid">
                        <div class="container-xl wide-lg">
                            <div class="nk-content-body">
                                <div class="nk-block-head">
                                    <div class="nk-block-head-sub"><span>Welcome!</span></div>
                                    <div class="nk-block-between-md g-4">
                                        <div class="nk-block-head-content">
                                            <h2 class="nk-block-title fw-normal" style="text-transform:capitalize">{{$user->get_full_name()}}</h2>
                                            <div class="nk-block-des"><p>At a glance summary of your account. Have fun!</p>
                                            <p>Last login activity at <span>{{__date_parse($user->last_login)}}</span></p>
                                            </div>
                                        </div>
                                        <div class="nk-block-head-content">
                                            <ul class="nk-block-tools gx-3">
                                                <li>
                                                    <a href="{{secure_url('deposits')}}" class="btn btn-primary"><span>Deposit</span> <em class="icon ni ni-arrow-long-right"></em></a>
                                                </li>
                                                <li>
                                                    <a href="{{secure_url('withdrawals')}}" class="btn btn-white btn-light"><span>Withdrawal</span> <em class="icon ni ni-arrow-long-right d-none d-sm-inline-block"></em></a>
                                                </li>
                                               
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                             @if(Session::has('errmessage'))
                    <div class="alert alert-danger alert-thick alert-plain">
                        <div class="alert-cta flex-wrap flex-md-nowrap g-2">
                            <div class="alert-text has-icon">
                                <em class="icon ni ni-info-fill text-danger"></em>
                                <p>{{Session::get('errmessage')}}</p>
                            </div>
                            <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
    <span aria-hidden="true" style="color:#000">&times;</span>
  </button> 
                        </div>
                    </div>
                    @endif
                    
                    @if(Session::has('sucmessage'))
                    <div class="alert alert-success alert-thick alert-plain">
                        <div class="alert-cta flex-wrap flex-md-nowrap g-2">
                            <div class="alert-text has-icon">
                                <em class="icon ni ni-info-fill text-success"></em>
                                <p>{{Session::get('sucmessage')}}</p>
                            </div>
                           <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
    <span aria-hidden="true" style="color:#000">&times;</span>
  </button> 
                        </div>
                    </div>
                    @endif
                                <div class="nk-block">
    <div class="row g-gs">
        <div class="col-md-4">
            <div class="card card-full card-bordered card-wg on-bottom is-primary">
                <div class="card-inner">
                    <div class="card-title-group">
                        <div class="card-title">
                            <h5 class="nk-wgacc-title">Available Balance</h5>
                        </div>
                        <div class="card-tools">
                            <em class="icon ni ni-info fs-13px text-soft nk-tooltip"  data-bs-toggle="tooltip" data-bs-placement="bottom" title="Main and investment account balance without locked or under progress." data-original-title="Main account balance without locked or under progress."></em>
                        </div>
                    </div>
                    <div class="card-amount mt-2 mb-1">
                        <span class="amount">{{__format_number($all_balance->count)}} <span class="currency">{{$user->user_curr()}}</span></span>
                    </div>
                    <div class="card-stats">
                        <div class="card-stats-group g-2">
                            <div class="card-stats-data">
                                <div class="title fw-bold">
                                    Bonus Account
                                    <em class="icon ni ni-info-fill fs-12px text-soft nk-tooltip" title="" data-original-title="Additional balance in your Investment account."></em>
                                </div>
                                <div class="amount fw-bold">{{__format_number($user->bonus)}} <span class="currency fw-normal">{{$user->user_curr()}}</span></div>
                            </div>
                        </div>
                        <div class="card-stats-ck sm"></div>
                    </div>
                    <div class="card-action d-md-none">
                        <ul class="nk-block-tools g-3 flex-wrap flex-sm-nowrap">
                            <li>
                                <a href="{{secure_url('deposits')}}" class="btn btn-primary"><span>Deposit</span> <em class="icon ni ni-arrow-long-right"></em></a>
                            </li>
                            <li>
                                <a href="{{secure_url('withdrawals')}}" class="btn btn-secondary"><span>Withdrawal</span> <em class="icon ni ni-arrow-long-right d-none d-sm-inline-block"></em></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-full card-bordered card-wg on-bottom is-base">
                <div class="card-inner">
                    <div class="card-title-group">
                        <div class="card-title">
                            <h5 class="nk-wgacc-title">Total Deposit</h5>
                        </div>
                        <div class="card-tools">
                            <em class="icon ni ni-info fs-13px text-soft nk-tooltip" data-bs-toggle="tooltip" data-bs-placement="bottom" title="The total Deposit amount already processed." ></em>
                        </div>
                    </div>
                    <div class="card-amount mt-2 mb-1">
                        <span class="amount">{{__format_number($tdeposit)}} <span class="currency">{{$user->user_curr()}}</span></span>
                    </div>
                    <div class="card-stats">
                        <div class="card-stats-group g-2">
                            <div class="card-stats-data">
                                <div class="title fw-bold">
                                    Pending
                                </div>
                                <div class="amount fw-bold">
                                    {{__format_number($pdeposit)}} <span class="currency fw-normal">{{$user->user_curr()}}</span>
                                   
                                </div>
                            </div>
                        </div>
                        <div class="card-stats-ck sm"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card card-full card-bordered card-wg on-bottom is-warning">
                <div class="card-inner">
                    <div class="card-title-group">
                        <div class="card-title">
                            <h5 class="nk-wgacc-title">Total Withdraw</h5>
                        </div>
                        <div class="card-tools">
                            <em class="icon ni ni-info fs-13px text-soft nk-tooltip" data-bs-toggle="tooltip" data-bs-placement="bottom" title="The total Withdraw amount already processed." data-original-title="The total Withdraw amount without under progress."></em>
                        </div>
                    </div>
                    <div class="card-amount mt-2 mb-1">
                        <span class="amount">{{__format_number($twithdraw)}} <span class="currency">{{$user->user_curr()}}</span></span>
                    </div>
                    <div class="card-stats">
                        <div class="card-stats-group g-2">
                            <div class="card-stats-data">
                                <div class="title fw-bold">
                                    Pending
                                </div>
                                <div class="amount fw-bold">
                                    {{__format_number($pwithdraw)}} <span class="currency fw-normal">{{$user->user_curr()}}</span>
                                   
                                </div>
                            </div>
                        </div>
                        <div class="card-stats-ck sm"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="nk-block">
    <div class="card card-bordered card-full">
    <div class="card-inner">
        <div class="card-title-group">
            <div class="card-title">
                <h6 class="title"><span class="me-2">Trading Account</span> </h6>
                
            </div>
           <div class="row">
               <div class="col-md-12">
                   <a href="{{secure_url('dashboard')}}/crypto" class="btn btn-info mt-2">Crypto</a>
                   <a href="{{secure_url('dashboard')}}/forex" class="btn btn-info mt-2">Forex</a>
                   
                   <a href="{{secure_url('dashboard')}}/stock" class="btn btn-info mt-2">Stocks</a>
                   
                   <a href="{{secure_url('dashboard')}}/cfd" class="btn btn-info mt-2">Indice</a>
               </div>
           </div>
        </div>
    </div>
    <div class="card-inner p-0 border-top">
         <div class="row sm-gutters mt-2">
       <div class="col-md-6" id="tv_chart_container">
            <div class="main-chart mb-15 min-hig" style="">
                <!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
  <div id="tradingview_5fa6a"></div>
  
  <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
  <script type="text/javascript">
  new TradingView.widget(
  {
  "width": "100%",
  "height": "575",
  "symbol": "{{$default_sym}}",
  "interval": "60",
  "timezone": "Etc/UTC",
  "theme": "dark",
  "style": "8",
  "locale": "uk",
  "hide_legend":true,
  "toolbar_bg": "#f1f3f6",
  "enable_publishing": false,
  "allow_symbol_change": true,
  "container_id": "tradingview_5fa6a"
}
  );
  </script>
</div>
<!-- TradingView Widget END -->

            </div>
        </div>
     <div class="col-md-6">
         <div class ="card">
             <div class="card-block table-border-style">
            <div class="market-trade">
                <div class="tab-content">
                    
                <div class="tab-pane fade show active">
    <div class="d-flex justify-content-between">
        <form method="post" action="{{route('order.add')}}" >
                   <input type="hidden" name="_token" value="{{ csrf_token() }}">
                   <p id="pricetext">TRADE {{$newtitle}} - PLACE TRADE ({{$user->twallet()->sym}})</p>
        <div class="row" style="padding: 2px 10px">
           <input type="hidden" name="_token" value="{{ csrf_token() }}" />
       
            <div class="col-md-12">
            <div class="form-group mt-2">
               <label>Amount</label> 
               <input type="number" id="amount_trade" name="amount" class="form-control"  placeholder="Amount"  />
            </div>
        </div>
        
        <div class="col-md-12">
           <div class="form-group mt-2">
                    <label for="">Trading Pairs</label>
                    <select name="traded" id="category" class="form-control">
                        @if(!blank($trades))
                            @foreach($trades as $trade)
                            <option value="{{$trade->id}}">{{$trade->symbol}}</option>
                            @endforeach
                        @endif
                    </select>
                </div> 
        </div>
        
       
        
        
        
        <div class="col-md-12">
            <div class="form-group mt-2">
              <label>Trade Interval</label>  
             <select name="tinterval" id="ttype"  class="form-control">
                <option value="60">1 min</option>
                 <option value="300">5 min</option>
                 <option value="600">10 min</option>
                 <option value="1800">30 min</option>
                 <option value="3600">1 hr</option>
                 <option value="21600">6 hrs</option>
                 <option value="86400">24 hrs</option>
                 
            </select>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group mt-2">
              <label>Trade Type</label>  
             <select name="tbuy" id=""  class="form-control">
                <option value="buy">Buy </option>
                 <option value="sell">Sell</option>
                
                 
            </select>
            </div>
        </div>
        <div class="col-md-12">
            <div class="form-group mt-2">
              <label>Leverage</label>  
             <select name="ttype" id="ttype"  class="form-control">
                <option value="2.0X">2.0X</option>
                 <option value="5X">5X</option>
                 <option value="10X">10X</option>
                
                 
            </select>
            </div>
        </div>
        
         
       
        
        <div class="col-md-12">
            <div class="form-group mt-2">
                <button class="btn btn-block btn-info" name="buynow"  type="submit">Place Trade</button>
            </div>
        </div>
        
        
        
        </div>
        </form>
    </div>
</div>

                </div>
            </div>
            </div>
            </div>
        </div>
        
        
        </div>
        
        <div class="row sm-gutters mt-4">
            <div class=" col-md-12" style="">
            
            
            <div class="" id="tradehistory" style="padding:20px">
                <div class="table-responsive">
    <h4 class="my-3 h4" style="color:white; font-size:1.2rem">Live Trade History</h4>
 <style>
     .progress {
    display: flex;
    height: auto;
    font-size: 0.65625rem;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
}
.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: center;
    background-color: #fb9678;
    transition: width 0.6s ease;
}
.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: auto auto;
}
.progress-bar-animated {
    animation: progress-bar-stripes 1s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none;
    }
    .progress-bar-animated {
        animation: none;
    }
}

 </style>
    <table class="table">
        <thead>
          <tr>
                                                
                                                    <th scope="col">Trade Type</th>
                                                    <th scope="col">Trade Time</th>
                                                   
                                                    <th scope="col">Symbol Traded</th>
                                                    
                                                    <th scope="col">Amount Traded</th>
                                                    <th scope="col">Expected Payout</th>
                                                    <th scope="col">Leverage</th>
                                                    <th scope="col">End Price</th>
                                                     <th scope="col">End Time</th>
                                                     <th scope="col">Trade Status</th>
                                                    
                                                </tr>
        </thead>
        <tbody>
                                                        @if(!blank($orders))
                                                      
                                                      @for($i = 0; $i < count($orders); $i++)
                    <tr   class="@if($i % 2 == 0 ) trr-black  @endif">
                      <td>{{$orders[$i]->order_num}}</td>
                      <td>{{__date_parse($orders[$i]->trade_time)}}</td>
                    
                      <td>{{$orders[$i]->symbols()->symbol}}</td>
                     
                      <td>${{__format_number($orders[$i]->volume)}}</td>
                      <td>@if($orders[$i]->type == 'buy') 
            <i class="fa-solid fa-arrow-up" style="color:green"></i>
            @elseif($orders[$i]->type == 'sell')
            <i class="fa-solid fa-arrow-down" style="color:red"></i>
            @endif  ${{__format_number($orders[$i]->profit)}}</td>
                      <td>{{$orders[$i]->leverage}}</td>
                      <td> {{$orders[$i]->closing}} </td>
                      <td>@if(!blank($orders[$i]->closed_at)) {{__date_parse($orders[$i]->closed_at)}} @else - @endif</td>
                      <td><span style="" class="badge @if($orders[$i]->status == "won") badge-success @elseif($orders[$i]->status == "lost") badge-danger @else badge-info  @endif">{{ucfirst($orders[$i]->status)}}</span></td>
                     
                 
                    </tr>
                    
                    @endfor
                                 @endif                   </tbody>
    </table>
    <div><a href="{{secure_url('trade_history')}}" style="color:#0091c7">View More</a></div>
</div>
</div>





        </div>
        </div>
    </div>
    <div class="card-inner-sm border-top text-center d-sm-none"><a href="#" class="btn btn-link btn-block">See History</a></div>
</div>

</div>




        

                                 <div class="nk-block">
                                    <div class="card card-bordered">
                                        <div class="nk-refwg">
                                            <div class="nk-refwg-invite card-inner">
                                                <div class="nk-refwg-head g-3">
                                                    <div class="nk-refwg-title">
                                                        <h5 class="title">Refer Us & Earn</h5>
                                                        <div class="title-sub">Use the below link to invite your friends.</div>
                                                    </div>
                                                    <div class="nk-refwg-action"><a href="#" class="btn btn-primary">Invite</a></div>
                                                </div>
                                                <div class="nk-refwg-url">
                                                    <div class="form-control-wrap">
                                                        <div class="form-clip clipboard-init" data-clipboard-target="#refUrl" data-success="Copied" data-text="Copy Link">
                                                            <em class="clipboard-icon icon ni ni-copy"></em> <span class="clipboard-text">Copy Link</span>
                                                        </div>
                                                        <div class="form-icon"><em class="icon ni ni-link-alt"></em></div>
                                                        <input type="text" class="form-control copy-text" id="refUrl" value="{{secure_url('invite')}}/{{$user->username}}" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="nk-refwg-stats card-inner bg-lighter">
                                                <div class="nk-refwg-group g-3">
                                                    <div class="nk-refwg-name">
                                                        <h6 class="title">My Referral(1 month) <em class="icon ni ni-info" data-bs-toggle="tooltip" data-bs-placement="right" title="Referral Informations"></em></h6>
                                                    </div>
                                                    <div class="nk-refwg-info g-3">
                                                        <div class="nk-refwg-sub">
                                                            <div class="title">{{$total_ref}}</div>
                                                            <div class="sub-text">Total Joined</div>
                                                        </div>
                                                        <div class="nk-refwg-sub">
                                                            <div class="title">{{__format_number($ref_amt)}}</div>
                                                            <div class="sub-text">Referral Earn</div>
                                                        </div>
                                                    </div>
                                                    <div class="nk-refwg-more dropdown mt-n1 me-n1">
                                                        <a href="#" class="btn btn-icon btn-trigger" data-bs-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
                                                        <div class="dropdown-menu dropdown-menu-xs dropdown-menu-end">
                                                            <ul class="link-list-plain sm">
                                                                <li><a href="#">7 days</a></li>
                                                                <li><a href="#">15 Days</a></li>
                                                                <li><a href="#">30 Days</a></li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="nk-refwg-ck"><canvas class="chart-refer-stats" id="refBarChart"></canvas></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="nk-block">
                                    <div class="card card-bordered">
                                        <div class="card-inner card-inner-lg">
                                            <div class="align-center flex-wrap flex-md-nowrap g-4">
                                                <div class="nk-block-image w-120px flex-shrink-0">
                                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 118">
                                                        <path
                                                            d="M8.916,94.745C-.318,79.153-2.164,58.569,2.382,40.578,7.155,21.69,19.045,9.451,35.162,4.32,46.609.676,58.716.331,70.456,1.845,84.683,3.68,99.57,8.694,108.892,21.408c10.03,13.679,12.071,34.71,10.747,52.054-1.173,15.359-7.441,27.489-19.231,34.494-10.689,6.351-22.92,8.733-34.715,10.331-16.181,2.192-34.195-.336-47.6-12.281A47.243,47.243,0,0,1,8.916,94.745Z"
                                                            transform="translate(0 -1)"
                                                            fill="#f6faff"
                                                        />
                                                        <rect x="18" y="32" width="84" height="50" rx="4" ry="4" fill="#fff" />
                                                        <rect x="26" y="44" width="20" height="12" rx="1" ry="1" fill="#e5effe" />
                                                        <rect x="50" y="44" width="20" height="12" rx="1" ry="1" fill="#e5effe" />
                                                        <rect x="74" y="44" width="20" height="12" rx="1" ry="1" fill="#e5effe" />
                                                        <rect x="38" y="60" width="20" height="12" rx="1" ry="1" fill="#e5effe" />
                                                        <rect x="62" y="60" width="20" height="12" rx="1" ry="1" fill="#e5effe" />
                                                        <path
                                                            d="M98,32H22a5.006,5.006,0,0,0-5,5V79a5.006,5.006,0,0,0,5,5H52v8H45a2,2,0,0,0-2,2v4a2,2,0,0,0,2,2H73a2,2,0,0,0,2-2V94a2,2,0,0,0-2-2H66V84H98a5.006,5.006,0,0,0,5-5V37A5.006,5.006,0,0,0,98,32ZM73,94v4H45V94Zm-9-2H54V84H64Zm37-13a3,3,0,0,1-3,3H22a3,3,0,0,1-3-3V37a3,3,0,0,1,3-3H98a3,3,0,0,1,3,3Z"
                                                            transform="translate(0 -1)"
                                                            fill="#798bff"
                                                        />
                                                        <path d="M61.444,41H40.111L33,48.143V19.7A3.632,3.632,0,0,1,36.556,16H61.444A3.632,3.632,0,0,1,65,19.7V37.3A3.632,3.632,0,0,1,61.444,41Z" transform="translate(0 -1)" fill="#6576ff" />
                                                        <path
                                                            d="M61.444,41H40.111L33,48.143V19.7A3.632,3.632,0,0,1,36.556,16H61.444A3.632,3.632,0,0,1,65,19.7V37.3A3.632,3.632,0,0,1,61.444,41Z"
                                                            transform="translate(0 -1)"
                                                            fill="none"
                                                            stroke="#6576ff"
                                                            stroke-miterlimit="10"
                                                            stroke-width="2"
                                                        />
                                                        <line x1="40" y1="22" x2="57" y2="22" fill="none" stroke="#fffffe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                                                        <line x1="40" y1="27" x2="57" y2="27" fill="none" stroke="#fffffe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                                                        <line x1="40" y1="32" x2="50" y2="32" fill="none" stroke="#fffffe" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
                                                        <line x1="30.5" y1="87.5" x2="30.5" y2="91.5" fill="none" stroke="#9cabff" stroke-linecap="round" stroke-linejoin="round" />
                                                        <line x1="28.5" y1="89.5" x2="32.5" y2="89.5" fill="none" stroke="#9cabff" stroke-linecap="round" stroke-linejoin="round" />
                                                        <line x1="79.5" y1="22.5" x2="79.5" y2="26.5" fill="none" stroke="#9cabff" stroke-linecap="round" stroke-linejoin="round" />
                                                        <line x1="77.5" y1="24.5" x2="81.5" y2="24.5" fill="none" stroke="#9cabff" stroke-linecap="round" stroke-linejoin="round" />
                                                        <circle cx="90.5" cy="97.5" r="3" fill="none" stroke="#9cabff" stroke-miterlimit="10" />
                                                        <circle cx="24" cy="23" r="2.5" fill="none" stroke="#9cabff" stroke-miterlimit="10" />
                                                    </svg>
                                                </div>
                                                <div class="nk-block-content">
                                                    <div class="nk-block-content-head px-lg-4">
                                                        <h5>We’re here to help you!</h5>
                                                        <p class="text-soft">Ask a question or file a support ticket, manage request, report an issues. Our team support team will get back to you by email.</p>
                                                        <p>You can also contact live support</p>
                                                    </div>
                                                </div>
                                                <div class="nk-block-content flex-shrink-0"><a href="{{secure_url('support')}}" class="btn btn-lg btn-outline-primary">Get Support Now</a></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
@endsection

@section('js')
<script>
    $("#category").on('change' , function(){
        var value = $(this).val();
        var url = "{{secure_url('chart')}}\\" + value;
                 
        $('#tv_chart_container').load(url);
    })
</script>
@endsection