@extends('layouts.frontend-member')
@section('title', __('message.order report'))
@section('content')
<div id="app" class="bgBalck">
    <div class="header plr15 flex alcenter bgHeader white fixed between">
        <div class="flex alcenter">
            <img src="{{ asset('frontend/assets/img/back.png') }}" class="pointer h15 wt15 mr10" onclick="goback()"> 
            <img src="{{ asset('frontend/assets/img/lists.png') }}" style="width: 20px;"> <span
                class="white ft18 bold pl10">{{ $product->name ?? '' }}/USDT</span></div>
        <div onclick="goback()" title="{{ __('message.go back') }}" class="pointer text-light flex alcenter" >
            {{-- <span id="recordSpan">Position list</span> --}}
            <img id="recordImg"
                src="{{ asset('frontend/assets/img/datamap.png') }}" style="width: 20px;">
        </div>
    </div>
    <div>

        <div class="order-list pt60" style="">
            <div class="flex order-list-header between">
                <p class="pointer tablinks tc text-center tabs-active " onclick="openTabs(event, 'positions')">{{ __('message.position list') }} </p>
                <p class="pointer tablinks tc " onclick="openTabs(event, 'orders')"> {{ __('message.order record') }}</p>
            </div>
            <ul class="lists tabcontent" id="positions">
                <li class="flex between ft10" style="font-size: 100%;">
                    <p data-localize="assets.num">{{ __('message.quantity') }}</p>
                    <p data-localize="contract.purchasePrice">{{ __('message.purchase price') }}</p>
                    <p data-localize="contract.estimated">{{ __('message.estimated profit and loss') }}</p>
                    <p data-localize="contract.countDown">{{ __('message.count down') }}</p>
                </li>
                @foreach ($buySellReports as $buySellReport)

                <li class="flex between ft10">
                    <p>{{ number_format(abs($buySellReport->amount), 2) }}</p>
                    <p> 
                        {{ number_format($buySellReport->opening_point ?? 0, 6) }}

                        {{-- <img width="10" src="./image/buy.png" alt=""> --}}
                    </p> <!----> <!---->
                    <p>{{ number_format($buySellReport->closing_point ?? 0, 6) }}</p> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!---->
                    <p class="green">
                        {{ $buySellReport->seconds ?? '' }} s                   
                    </p>
                </li>
                @endforeach
                
            </ul> <!---->
            <ul class="lists tabcontent " id="orders" style="display: none;">
                <li class="flex between ft10" style="font-size: 100%;">
                    <p > 
                        {{ __('message.quantity') }}
                    </p>
                    <p >{{ __('message.purchase price') }}</p>
                    <p >{{ __('message.closing price') }}</p>
                    <p  style="">{{ __('message.profit and loss') }}</p>
                </li>
                @foreach ($buySellReports as $buySellReport)

                <li class="flex between ft10 pointer" data-bs-toggle="modal" data-bs-target="#showModal{{ $buySellReport->id?? '' }}">
                    <p>{{ number_format(abs($buySellReport->amount), 2) }}</p>
                    <p> 
                        {{ number_format($buySellReport->opening_point ?? 0, 6) }}

                        @if ($buySellReport->direction == 'up')
                        <img width="10" src="{{ asset('frontend/assets/img/up1.png') }}" alt="">
                        @else
                        <img width="10" src="{{ asset('frontend/assets/img/down-1.png') }}" alt="">
                        @endif
                    </p> <!----> <!---->
                    <p>{{ number_format($buySellReport->closing_point ?? 0, 6) }}</p> 
                    <p class="green">
                        @if($buySellReport->profit > $buySellReport->amount)
                        <span style="color:#0ecb81">
                            {{ number_format(abs($buySellReport->profit-$buySellReport->amount),2) }} 
                        </span>
                        @else
                        <span class="red">
                            {{ number_format(abs($buySellReport->profit-$buySellReport->amount),2) }} 
                        </span>
                        @endif
                    </p>
                </li>
                  

                  <!-- Modal -->
                <div div class="modal fade" id="showModal{{ $buySellReport->id?? '' }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                    <div class="modal-content layui-layer layui-layer-page confirm-modal btn-text obuys" id="content-modal" type="page" times="6" showtime="0" contype="object" style="  z-index: 19891020; width: 100%; height: auto;top: 140px; left: auto ;">
                    <div class="layui-layer-title" style="@if ($buySellReport->direction == 'up') background-color: #4f986f!important; @else background-color: #c15a58 !important; @endif cursor: move;">{{ $buySellReport->product->name?? '' }}/USDT 
                    @if ($buySellReport->direction == 'up')
                    {{ __('message.buy up') }}
                    @else
                    {{ __('message.buy down') }}
                        
                    @endif
                    </div>
                    <div id="" class="layui-layer-content" style="height: 310px;"><div class="orderDetail layui-layer-wrap p-0" style="display: block;"><div><div class="mt20 orders-list"><p class="mt10">
                    <span>{{ __('message.profit and loss') }}</span>：
                    @if($buySellReport->profit > $buySellReport->amount)
                    <span class="green">
                        {{ number_format(abs($buySellReport->profit-$buySellReport->amount),2) }} 
                    </span>
                    @else
                    <span class="red">
                        {{ number_format(abs($buySellReport->profit-$buySellReport->amount),2) }} 
                    </span>
                    @endif
                </p> <p class="mt10"><span >{{ __('message.opening quantity') }}</span>：
                    <span>{{ number_format(abs($buySellReport->amount), 2) }} USDT</span></p> <p class="mt10"><span >{{ __('message.purchase price') }}</span>：
                    <span>

                    {{ number_format($buySellReport->opening_point ?? 0, 6) }}
                    @if ($buySellReport->direction == 'up')
                    <img width="10" src="{{ asset('frontend/assets/img/up1.png') }}" alt="">
                    @else
                    <img width="10" src="{{ asset('frontend/assets/img/down-1.png') }}" alt="">
                    @endif
                    </span></p> <p class="mt10"><span >{{ __('message.final price') }}</span>：
                    <span>{{ number_format($buySellReport->closing_point ?? 0, 6) }}</span></p> <p class="mt10"><span >{{ __('message.management fee') }}</span>：
                    <!----> <span>0.0</span> <!----></p> <p class="mt10"><span ></span>：
                    <span>{{ $buySellReport->created_at->format('d/m/y H:i:s') }}</span></p> <p class="mt10"><span ></span>：
                    <span>{{ $buySellReport->created_at->format('d/m/y H:i:s') }}</span></p></div></div></div></div><span class="layui-layer-setwin">

                    <span class=" pointer fa fa-fw fa-close cancelbtn " data-bs-dismiss="modal" style="color: rgb(61 60 71); font-size: 18px"></span>

                    </span>
                    <div class="layui-layer-btn layui-layer-btn-"><a class="layui-layer-btn0 cancelbtn" data-bs-dismiss="modal">ยกเลิก</a></div>
                    <span class="layui-layer-resize"></span>
                </div>
                </div>
                </div>

                <!-- end modal popup -->  
                @endforeach
            </ul> <!---->
            {{-- <div class="tc mt10">Load more</div> <!----> --}}
        </div>
        <div style="height: 160px;"></div>

    </div>
  <!-- Modal -->

</div>
@endsection
@push('scripts') 
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<script>
       
    // <!-- my tabs btn  -->
    function openTabs(evt, TabName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i < tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i < tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" tabs-active ", "");
      }
      document.getElementById(TabName).style.display = "block";
      evt.currentTarget.className += " tabs-active ";
  }


      // <!-- script modal popup -->
    // $('#show_orders').click(function() {
    //         $('#content-modal').show();
    //         $('#content-modal').css({display: 'block'}).appendTo(('.modal-fade')).fadeIn("slow");;

    //     });

    //     $('#content-modal .cancelbtn').click(function() {
    //         $('#content-modal').hide();
    //         $('#content-modal').css({display: 'none'}).appendTo(('.modal-fade')).hide("slow");;
    // }); 


    function goback() {
        window.history.go(-1);
    }

</script>
@endpush
@push('styles')
{{-- <link rel="stylesheet" href="{{ asset('frontend/assets/css/order-report.css') }}"> --}}
<link rel="stylesheet" href="{{ asset('frontend/assets/css/buysell.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/assets/css/layer.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/assets/css/common.css') }}">
<link rel="stylesheet" href="{{ asset('frontend/assets/css/style.css') }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
    .tabs-active {
    border-bottom: 2px solid #1f6bfd;
    }
    /* popup */
    .modal-fade {
        flex-grow: 1;
        -webkit-transition: all 300ms ease-in-out;
        -moz-transition: all 300ms ease-in-out;
        -o-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        transform: scale(0.3);
        opacity: 0.3;
    }
</style>
@endpush