@extends('layouts.frontend-member')
@section('title', __('message.my account'))
@section('content')

    <div class="container-fluid " style="padding:0px;width:100vw;">
        <div class="no_header">
            <div class="fl allhg txtl">
                <i class="bi bi-arrow-left fcc fw pointer" onclick="goback()" style="font-size: 24px;"></i>
            </div>

            <div class="fl allhg" id="centerbox" style="width:80%;text-align:center;line-height:50px;">
                <span class="fcc fzmmm">กองทุน</span>
            </div>

            <a href="#">
                <div class="fr allhg txtr" style="line-height:50px;width:10%;">
                    <svg t="1656750606237" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                        p-id="4326" width="20" height="20">
                        <path
                            d="M914.9 158.4H183.5c-15.2 0-27.6-12.4-27.6-27.6v-4.1c0-15.2 12.4-27.6 27.6-27.6h731.4c15.2 0 27.6 12.4 27.6 27.6v4.1c0.1 15.2-12.3 27.6-27.6 27.6zM914.9 819.9H183.5c-15.2 0-27.6-12.4-27.6-27.6v-4.1c0-15.2 12.4-27.6 27.6-27.6h731.4c15.2 0 27.6 12.4 27.6 27.6v4.1c0.1 15.2-12.3 27.6-27.6 27.6zM574.7 489.2H176.6c-11.4 0-20.7-9.3-20.7-20.7v-18.1c0-11.4 9.3-20.7 20.7-20.7h398.1c11.4 0 20.7 9.3 20.7 20.7v18.1c0 11.4-9.3 20.7-20.7 20.7z"
                            fill="#00b897" p-id="4327"></path>
                    </svg>
                </div>
            </a>
        </div>

        <div class="oreimgbox">

            <div class="fl col-8 pl20 pt20">
                <!--<p class="fe6im ti12 f12">รางวัลจากการขุดทันที</p>-->
                <p class="fe6im ti12 f12">จำนวนเงินลงทุนทั้งหมด ：</p>
                <p class="fe6im ti12 f12">รายได้รวมสะสม：</p>
            </div>
            <div class="fr  col-4">
                <img src="{{ asset('fronts/home/Static/img/imxmoney.png') }}" class="d-block"
                    style="width:170px;float: right;">
            </div>
        </div>
        {{-- Tabs --}}
        <div class="oplist">
            <div class="listbox  pointer" id="zlbtn" onclick="Allfun()">
                <span class="fzmm fcc" id="zlbtn_span" style="color: rgb(112, 122, 138);">กองทุนทั้งหมด</span>
            </div>

            <div class="emptybox"></div>
            <div class="listbox hsborder pointer" id="myorebtn" onclick="myFun()">
                <span class="fzmm fcy " id="myorebtn_span" style="color: rgb(0, 184, 151);">กองทุนของฉัน</span>
            </div>
        </div>

        <!--List my fun-->
        <div id="myorebox"
            style="width: 100%; min-height: 600px; padding: 10px 0px; background: rgb(255, 255, 255); display: block;">
            <div class="orebox">
                <div style="width:100%;height:120px;line-height:120px;text-align:center;">
                    <span class="fzmm fcc">ไม่มีการบันทึกในขณะนี้</span>
                </div>
            </div>

            <div class="btmbox"></div>
        </div>



    </div>
@endsection

@push('scripts')
    <script>
        function Allfun() {
            window.location = "{{ asset('/member/funds') }}";
        }
    </script>
    <script>
        function myFun() {
            window.location = "{{ asset('/member/my-funds') }}";
        }
    </script>
    {{-- back --}}
    <script>
        function goback() {
            window.history.go(-1);
        }
    </script>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="{{ asset('fronts/assets/layer.js') }}"></script>
    <script type="text/javascript" src="{{ asset('fronts/assets/layui.js') }}"></script>
@endpush

@push('styles')
    <style>
        ::-webkit-input-placeholder {
            color: #b5b5b5;
            font-size: 12px;
        }

        ::-moz-placeholder {
            color: #b5b5b5;
            font-size: 12px;
        }

        input:focus {
            background: #ebecf0;
            outline: 1px solid #ebecf0;
        }

        a:hover,
        a:link,
        a:visited,
        a:active {
            color: #000000;
            text-decoration: none;
        }

        .no_header {
            position: fixed;
            z-index: 9999;
            background: #121420;
            padding: 0px 10px;
            top: 0px;
        }

        .txtl {
            line-height: 50px;
            width: 10%;
        }

        .oreimgbox {
            width: 100%;
            height: 150px;
            margin-top: 50px;
        }

        .oplist {
            width: 100% !important;
            height: 50px !important;
            background: #fff;
            padding: 0px 15px;
            border-radius: 30px 30px 0 0;
        }

        .listbox {
            height: 50px;
            line-height: 50px;
            float: left;
        }

        .emptybox {
            width: 30px;
            height: 50px;
            float: left;
        }

        .hsborder {
            border-bottom: 3px solid #00b897;
        }

        .btmbox {
            width: 100% !important;
            height: 60px !important;
            background: #fff !important;
        }

        .orebox {
            width: 100%;
            margin: 0px auto;
            background: #f7f9fc;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
            padding: 10px;
        }

        .progress-bar {
            color: #000;
            background: linear-gradient(to right, #f77062, #fe5196) !important;
        }

        .progress {
            height: 0.9rem;
            background-color: #f5f5f5 !important;
            border-radius: .5rem;
        }

        .obbox {
            width: 33.33%;
            height: 80px;
            float: left;
        }

        .obbox_h {
            width: 100%;
            height: 40px;
            line-height: 40px;
        }
    </style>
@endpush