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

@section('title', __('Trading Orders'))

@section('css')
<link href="{{getTemplateFiles('coin')}}/assets/user/css/app.css?ver=132" type="text/css" rel="stylesheet"> 
@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>Orders</span></div>
                <div class="nk-block-between-md g-4">
                    <div class="nk-block-head-content">
                        <h2 class="nk-block-title fw-normal">Trading Orders</h2>
                        <div class="nk-block-des"><p>List of orders in your account.</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-dim btn-outline-light"><span>Withdraw</span> <em class="icon ni ni-arrow-long-right"></em></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <ul class="nk-nav nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link {{ __active_class($type , 'open') }}" href="{{secure_url('trade_history')}}">Open Orders</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link  {{ __active_class($type , 'pending') }}" href="{{secure_url('trade_history')}}?type=pending">Pending Orders</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link  {{ __active_class($type , 'close') }}" href="{{secure_url('trade_history')}}?type=close">Closed Orders</a>
                </li>
            </ul>
            
           
            
            <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>
</div>





        </div>
        </div>
           
        </div>
    </div>
</div>

@endsection