@extends('layouts.frontend-member')
@section('title', 'คำสั่งซื้อ')
@section('content')
    <div id="app" data-v-app="">
        <div class="van-config-provider">
            <div class="van-nav-bar van-hairline--bottom">
                <div class="van-nav-bar__content">
                    <div class="van-nav-bar__left van-haptics-feedback" onclick="goback()"><i
                            class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow"><!----><!----><!----></i><!---->
                    </div>
                    <div class="van-nav-bar__title van-ellipsis">คำสั่งซื้อ</div><!---->
                </div>
            </div>
            <div class="van-tabs van-tabs--line">
                <div class="van-tabs__wrap">
                    <div role="tablist" class="van-tabs__nav van-tabs__nav--line" aria-orientation="horizontal"><!---->
                        <div onclick="openTabs(event, 'taball')" role="tab"
                            class="tablinks van-tab van-tab--line van-tab--active " tabindex="0" aria-selected="true"
                            aria-controls="van-tab-3">
                            <span class="van-tab__text van-tab__text--ellipsis">ทั้งหมด</span>
                        </div>
                        <div onclick="openTabs(event, 'tabpendding')" role="tab" class="tablinks van-tab van-tab--line"
                            tabindex="-1" aria-selected="false" aria-controls="van-tab-4">
                            <span class="van-tab__text van-tab__text--ellipsis">รอดำเนินการ</span>
                        </div>
                        <div onclick="openTabs(event, 'tabfunish')" role="tab" class="tablinks van-tab van-tab--line"
                            tabindex="-1" aria-selected="false" aria-controls="van-tab-5">
                            <span class="van-tab__text van-tab__text--ellipsis">เสร็จสิ้น</span>
                        </div>
                        {{-- <div class="van-tabs__line"
                            style="transform: translateX(78.5px) translateX(-50%); transition-duration: 0.3s;"></div> --}}
                    </div>
                </div><!---->
                <div class="van-tabs__content"><!----><!----><!----></div>
            </div>

            <div id="taball" class="van-pull-refresh tabcontent">
                <div class="van-pull-refresh__track" style="transition-duration: 300ms;">
                    <div class="van-pull-refresh__head"></div>
                    <div role="feed" class="van-list" aria-busy="false">
                        @foreach ($buySellReports as $buySellReport)
                            <a href="{{ route('member.my-order-report-detail', $buySellReport) }}" class="border-b border-b-gray-600 px-2 py-4 flex flex-col">
                                <div class="flex flex-row items-center justify-between">
                                    <div class="text-sm">{{ $buySellReport->product->name ?? '' }} <i
                                            class="van-badge__wrapper van-icon van-icon-chart-trending-o"><!----><!----><!----></i>
                                    </div><i
                                        class="van-badge__wrapper van-icon van-icon-arrow pl-2 text-gray-400"><!----><!----><!----></i>
                                </div>
                                <div class="flex flex-row justify-between">
                                    <div class="flex flex-row items-center justify-between">
                                        @if ($buySellReport->direction == 'up')
                                            <div class="text-xs rounded-sm bg-green-500">ขึ้น</div>
                                        @else
                                            <div class="text-xs rounded-sm bg-red-500">ลง</div>
                                        @endif

                                    </div>
                                    <div class="flex flex-row items-center justify-between py-2">
                                        <div>
                                            <div class="text-xs text-gray-400">ราคาซื้อ: 64808.29</div>
                                            <div class="text-xs text-gray-400" style="display: none;">ราคา:
                                                {{ number_format($buySellReport->product->current_price ?? 0, 6) }}
                                            </div>

                                            <div class="text-xs text-gray-400">
                                                ราคา: {{ number_format($buySellReport->closing_point ?? 0, 6) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col items-center justify-center">
                                        <div class="text-sm text-gray-400">มูลค่าการซื้อขาย
                                            {{ number_format(abs($buySellReport->amount), 2) }}฿</div>
                                        <div class="text-sm text-gray-400">วันครบกำหนด
                                            {{ $buySellReport->seconds ?? '' }} s
                                        </div>
                                    </div>
                                </div>
                            </a>
                        @endforeach

                        {{-- <div class="van-list__finished-text">ไม่มีอีกแล้ว</div><!---->
                        <div class="van-list__placeholder"></div> --}}
                    </div>
                </div>
            </div>

            <div id="tabpendding" class="van-pull-refresh tabcontent">
                <div class="van-pull-refresh__track" style="transition-duration: 300ms;">
                    <div class="van-pull-refresh__head"></div>
                    @foreach ($buySellReports as $buySellReport)
                        @if ($buySellReport->status == 0)
                            <a href="{{ route('member.my-order-report-detail', $buySellReport) }}" class="border-b border-b-gray-600 px-2 py-4 flex flex-col">
                                <div class="flex flex-row items-center justify-between">
                                    <div class="text-sm">{{ $buySellReport->product->name ?? '' }} <i
                                            class="van-badge__wrapper van-icon van-icon-chart-trending-o"><!----><!----><!----></i>
                                    </div><i
                                        class="van-badge__wrapper van-icon van-icon-arrow pl-2 text-gray-400"><!----><!----><!----></i>
                                </div>
                                <div class="flex flex-row justify-between">
                                    <div class="flex flex-row items-center justify-between">
                                        @if ($buySellReport->direction == 'up')
                                            <div class="text-xs rounded-sm bg-green-500">ขึ้น</div>
                                        @else
                                            <div class="text-xs rounded-sm bg-red-500">
                                            ลง
                                        </div>
                                        @endif

                                    </div>
                                    <div class="flex flex-row items-center justify-between py-2">
                                        <div>
                                            <div class="text-xs text-gray-400">ราคาซื้อ: {{ $buySellReport->opening_point }}
                                            </div>
                                            <div class="text-xs text-gray-400" style="display: none;">ราคา:
                                                {{ number_format($buySellReport->product->current_price ?? 0, 6) }}
                                            </div>

                                            <div class="text-xs text-gray-400">
                                                ราคา: {{ number_format($buySellReport->closing_point ?? 0, 6) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col items-center justify-center">
                                        <div class="text-sm text-gray-400">มูลค่าการซื้อขาย
                                            {{ number_format(abs($buySellReport->amount), 2) }}฿</div>
                                        <div class="text-sm text-gray-400">วันครบกำหนด
                                            {{ $buySellReport->seconds ?? '' }} s
                                        </div>
                                    </div>
                                </div>
                            </a>
                            {{-- <div role="feed" class="van-list" aria-busy="false"><!---->
                                <div class="van-list__finished-text">
                                    ไม่มีอีกแล้ว
                                </div><!---->
                                <div class="van-list__placeholder"></div>
                            </div> --}}
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
        <div id="tabfunish" class="van-pull-refresh tabcontent">
            <div class="van-pull-refresh__track" style="transition-duration: 300ms;">
                <div class="van-pull-refresh__head"></div>
                <div role="feed" class="van-list" aria-busy="false">
                    @foreach ($buySellReports as $buySellReport)
                        @if ($buySellReport->status == 1)
                            <a href="{{ route('member.my-order-report-detail', $buySellReport) }}" class="border-b border-b-gray-600 px-2 py-4 flex flex-col">
                                <div class="flex flex-row items-center justify-between">
                                    <div class="text-sm">{{ $buySellReport->product->name ?? '' }} <i
                                            class="van-badge__wrapper van-icon van-icon-chart-trending-o"><!----><!----><!----></i>
                                    </div><i
                                        class="van-badge__wrapper van-icon van-icon-arrow pl-2 text-gray-400"><!----><!----><!----></i>
                                </div>
                                <div class="flex flex-row justify-between">
                                    <div class="flex flex-row items-center justify-between">
                                        @if ($buySellReport->direction == 'up')
                                            <div class="text-xs rounded-sm bg-green-500">ขึ้น</div>
                                        @else
                                            <div class="text-xs rounded-sm bg-red-500">ลง</div>
                                        @endif

                                    </div>
                                    <div class="flex flex-row items-center justify-between py-2">
                                        <div>
                                            <div class="text-xs text-gray-400">ราคาซื้อ:
                                                {{ $buySellReport->opening_point }}
                                            </div>
                                            <div class="text-xs text-gray-400" style="display: none;">ราคา:
                                                {{ number_format($buySellReport->product->current_price ?? 0, 6) }}
                                            </div>

                                            <div class="text-xs text-gray-400">
                                                ราคา: {{ number_format($buySellReport->closing_point ?? 0, 6) }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="flex flex-col items-center justify-center">
                                        <div class="text-sm text-gray-400">มูลค่าการซื้อขาย
                                            {{ number_format(abs($buySellReport->amount), 2) }}฿</div>
                                        <div class="text-sm text-gray-400">วันครบกำหนด
                                            {{ $buySellReport->seconds ?? '' }} s
                                        </div>
                                    </div>
                                </div>
                            </a>
                        {{-- @else
                            <div role="feed" class="van-list" aria-busy="false"><!---->
                                <div class="van-list__finished-text">
                                    ไม่มีอีกแล้ว
                                </div><!---->
                                <div class="van-list__placeholder"></div>
                            </div> --}}
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
    </div>
@endsection

@push('scripts')
    <script>
        function goback() {
            window.history.go(-1);
        }
    </script>
    <!-- my tabs btn  -->
    <script>
        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(" van-tab--active", "");
            }
            document.getElementById(TabName).style.display = "block";
            evt.currentTarget.className += " van-tab--active";
        }
    </script>
@endpush
@push('styles')
<link rel="stylesheet" href="{{ asset('frontend/assets/custom.css') }}" />
    
    <style>
        .van-tab--active {
            border-bottom: 2px solid var(--van-primary-color);
        }
        .van-tabbar-item{
    background: rgb(69 18 114) !important;
    }
    .van-notice-bar{
        background: rgb(69 18 114) !important;
    }
    .van-nav-bar {
        background: rgb(69 18 114) !important;
    }
    </style>
@endpush