@extends('layouts.frontend-member')
@section('title', __('message.my account'))
@section('content')
    <div class="page-content" style="background-color: #f37022eb;max-height: 100%; padding: 0px 0px 0px 0px;">
        <h5 class="py-2 text-bg-dark text-center mb-1" style="font-weight:bold;">
            {{ __('message.my account') }}
            @include('frontend.inc.change-language')
            <!-- top icon -->
            @include('frontend.inc.list-icon')
           
        </h5>
        <div class="profile-img mb-3 p-3 text-center rounded-3" style="margin-top:0px;">

            <div class="border-0">
                <div class="profile-img text-center rounded-3" style="width:100%;margin-left:0%;padding-top:0px;">
                    <img src="{{ asset(Auth::user()->member->profile_photo ?? '/assets/images/avatars/avatar.png') }}"
                        height="90" class="rounded-circle" style="margin:0 auto;margin-top:10px;margin-bottom: 10px;">
                    <h6 class="text-white fw-bolder" style="margin-top:5px;">
                        {{ __('message.name') }} : {{ auth()->user()->name }}
                    </h6>
                    <h6 class="text-white fw-bolder" style="margin-top:5px;">
                        <i class="bi bi-telephone"></i> : {{ auth()->user()->phone }}
                    </h6>
                    {{-- <button class="btn btn-info bg-light ">
                        Total assets :
                    </button> --}}
                    <h6 class="text-white fw-bolder" style="margin-top:5px;color:#000000!important; font-weight: bold;">
                        <i class="bi bi-cash-coin fa-lg"></i> : {{ number_format(auth()->user()->member->credit ?? 0, 2) }}
                        {{ $setting_->currency_name }}
                    </h6>
                </div>
            </div>
        </div>
        <div class="sub-content">
            <div class="card" style="padding: 0px 0px 280px 0px;overflow: hidden; border-radius: 35px 35px 0px 0px;">
                <div role="group" aria-label="Basic example" style="margin-top:5px;margin-top: 10px;margin-bottom: 15px;">
                    <a href="{{ route('member.deposit-money') }}" class="btn"
                        style="box-shadow: 0px 1px 5px 0px #424242;font-size: 1rem;font-weight: 600;border-radius: 30px;width:45%;color:white;background-color: #53a8c7;margin-left:12px; margin-top: 10px; padding: 12px;">
                        {{-- <i class="bi bi-coin"></i> --}}
                        {{ __('message.deposit') }}
                    </a>

                    <a href="{{ route('member.withdraw-money') }}" class="btn"
                        style="box-shadow: 0px 1px 5px 0px #424242;font-size: 1rem ;font-weight: 600;border-radius: 30px;width:45%;color:white;background-color: #b874a7;float:right;margin-right:12px;margin-top: 10px; padding: 12px">
                        {{-- <i class="bi bi-currency-exchange"></i> --}}
                        {{ __('message.withdraw') }}
                    </a>
                </div>
                <div class="mb-3 mt-2">
                    <a class="profile-item" href="{{ route('member.edit-profile') }}">
                        <div class="rounded-3">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center gap-3 fs-6">
                                    <div>
                                        <i class="bi bi-file-person-fill" style="color:gray;font-size: 22px;"></i>
                                    </div>
                                    <div class="flex-grow-1">{{ __('message.edit profile') }}</div>
                                    <div><i class="bi bi-chevron-right"></i></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="mb-3">
                    <a class="profile-item" href="{{ route('member.edit-bank-account') }}">
                        <div class="rounded-3">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center gap-3 fs-6">
                                    <div><i class="bi bi-bank" style="color:gray;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1">{{ __('message.bank account') }}</div>
                                    <div class="am-u-sm-4 state" style="font-size:15px;color:#d6d6d6">
                                        <!-- Incompleted    -->

                                    </div>
                                    <div><i class="bi bi-chevron-right"></i></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                    <!--  <div class="mb-3" style="box-shadow: 0px 0px 8px 0px #00324e12;">
                    <a class="profile-item" href="#">
                    <div class="rounded-3">
                    <div class="card-body py-2">
                    <div class="d-flex align-items-center gap-3 fs-6">
                    <div><i class="bi bi-bar-chart-fill" style="color:#015f7b;font-size: 22px;"></i></div>
                    <div class="flex-grow-1">{{ __('message.report') }}</div>
                    <div><i class="bi bi-chevron-right"></i></div>
                    </div>
                    </div>
                    </div>
                    </a>
                    </div> -->
                <div class="mb-3" style="box-shadow: 0px 0px 8px 0px #00324e12;">
                    <a href="#" class="profile-item" href="#" style="cursor: pointer;">
                        <div class="rounded-3">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center gap-3 fs-6">
                                    <div><i class="bi bi-geo-alt" style="color:gray;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1">
                                        {{ __('message.save location') }}</div>
                                    <div><i class="bi bi-chevron-right"></i></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="mb-3" style="box-shadow: 0px 0px 8px 0px #00324e12;">
                    <a href="#" class="profile-item" href="#" style="cursor: pointer;">
                        <div class="rounded-3">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center gap-3 fs-6">
                                    <div><i class="bi bi-wallet" style="color:gray;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1">
                                        {{ __('message.my wallet address') }}</div>
                                    <div><i class="bi bi-chevron-right"></i></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="mb-3" style="box-shadow: 0px 0px 8px 0px #00324e12;">
                    <a href="#" class="profile-item" href="#" style="cursor: pointer;">
                        <div class="rounded-3">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center gap-3 fs-6">
                                    <div><i class="bi bi-share" style="color:gray;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1">
                                        {{ __('message.i want to share') }}</div>
                                    <div><i class="bi bi-chevron-right"></i></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="mb-3" style="box-shadow: 0px 0px 8px 0px #00324e12;">
                    <a href="#" class="profile-item" href="#" style="cursor: pointer;">
                        <div class="rounded-3">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center gap-3 fs-6">
                                    <div><i class="bi bi-headset" style="color:gray;font-size: 23px;"></i></div>
                                    <div class="flex-grow-1">
                                        {{ __('message.online service') }}</div>
                                    <div><i class="bi bi-chevron-right"></i></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="mb-3" style="box-shadow: 0px 0px 8px 0px #00324e12;">
                    <a href="#" class="profile-item" href="#" style="cursor: pointer;"
                        class="btn btn-secondary dropdown-toggle shadow" href="#" role="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <div class="rounded-3">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center gap-3 fs-6">
                                    <div><i class="bi bi-translate" style="color:gray;font-size: 23px;"></i></div>
                                    <div class="flex-grow-1">
                                        {{ __('message.change language') }}</div>
                                    <div><i class="bi bi-chevron-right"></i></div>
                                </div>
                            </div>
                        </div>
                        <ul class="dropdown-menu fadeup rounded-lg shadow" aria-labelledby="dropdownMenuButton"
                            style="width: 5rem !important; border: 1.5px solid #f47b33; transform: translate3d(25px, 430px, 0px) !important;">
                            <li>
                                <a class="dropdown-item" href="/lang/en" class="dropdown-item active ">
                                    <img src="{{ asset('en.png') }}" style="width:20px;">
                                    English
                                </a>
                            </li>
                            {{-- <li><a class="dropdown-item" href="/lang/kh" class="dropdown-item">
                                <img src="{{ asset('kh.png') }}" style="width:20px;">
                                ខ្មែរ
                            </a></li> --}}
                            <li>
                                <a class="dropdown-item" href="/lang/th" class="dropdown-item">
                                    <img src="{{ asset('th.png') }}" style="width:20px;">
                                    ไทย
                                </a>
                            </li>
                        </ul>
                    </a>
                </div>
                <div class="mb-3" style="box-shadow: 0px 0px 8px 0px #00324e12;">
                    <a class="profile-item @if (request()->is('member/notification')) active @endif"
                        href="{{ route('member.notification') }}" style="text-decoration: none !important;"
                        style="cursor: pointer;">
                        <div class="rounded-3">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center gap-3 fs-6">
                                    <div>
                                        {{-- {{ Widget::run('Notification') }} --}}
                                        <i class="bi bi-bell" style="color:gray;font-size: 23px;"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        {{ __('message.notification') }}
                                    </div>
                                    <div><i class="bi bi-chevron-right"></i></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                {{-- <a class="mobile-bottom-nav__item  @if (request()->is('member/notification')) active @endif" href="{{ route('member.notification') }}" style="text-decoration: none !important;">
                    {{ Widget::run('Notification') }}
                    <div class="mobile-bottom-nav__item-content">
                        <i class="material-icons">notifications_none</i>
                        {{__('message.notification')}}
                    </div>
                </a> --}}
                <div class="mb-3" style="box-shadow: 0px 0px 8px 0px #00324e12;">
                    <div class="profile-item" href="#" style="cursor: pointer;">
                        <div class="rounded-3">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center gap-3 fs-6">
                                    <div><i class="bi bi-key-fill" style="color:gray;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1" data-bs-toggle="modal"
                                        data-bs-target="#exampleModalToggle1">
                                        {{ __('message.change password') }}</div>
                                    <div><i class="bi bi-chevron-right"></i></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mb-3" style="box-shadow: 0px 0px 8px 0px #00324e12;">
                    <a class="profile-item" href="javascript:;" id="logout" onclick="logOut()">
                        <!--  id="liveToastBtn" -->
                        <div class="rounded-3">
                            <div class="card-body py-2">
                                <div class="d-flex align-items-center gap-3 fs-6">
                                    <div><i class="bi bi-box-arrow-right"
                                            style="color:red;font-size:
                            25px;"></i></div>
                                    <div class="flex-grow-1" style="color:red" onclick="">
                                        {{ __('message.logout') }}
                                    </div>
                                    <form id="logout-form" action="{{ route('logout') }}" method="POST"
                                        style="display: none;">
                                        @csrf
                                    </form>
                                    <div><i class="bi bi-chevron-right"></i></div>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="modal fade" id="exampleModalToggle1" aria-hidden="true" aria-labelledby="exampleModalToggle1"
        tabindex="-1" style="width:80%;margin-left:10%;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header "
                    style="box-shadow: 0px 1px 3px 0px #030303; background-color:#53a8c7;color:white;">
                    <h1 class="modal-title fs-5 " style="color:white;font-size: 1rem !important; text-align: center;">
                        {{ __('message.new password') }}
                    </h1>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true"><i class="fal fa-times fa-lg text-danger"></i></span>
                    </button>
                    {{-- <button type="button" class="btn-close " data-bs-dismiss="modal" aria-label="Close"
                        style="color:white;background-image: url(/images/close.png);"></button> --}}
                </div>
                <div class="modal-body" x-init>
                    <form method="POST" class="mt-2" action="{{ route('member.change-password.store') }}">
                        @method('PUT')
                        {{ csrf_field() }}
                        <div class="input-group mb-3" id="show_hide_password">
                            <div class="form-floating flex-grow-1">
                                <input type="password" @class(['form-control', 'border-danger' => $errors->has('password')]) id="pwd" name="password"
                                    placeholder="{{ __('message.new password') }}" style="width:100%;" required>
                                <label for="pwd">{{ __('message.new password') }}</label>
                                @error('password')
                                    <span class="text-danger">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <!-- <span class="input-group-text bg-transparent rounded-start-0 rounded-3"><i
                                                                                                class="bi bi-eye-slash"></i></span> -->
                        </div>

                        <div class="mb-0 d-grid pt-3">
                            <button type="submit" class="btn rounded-3"
                                style="border-radius: 50px !important;box-shadow: 0px 2px 3px 0px #000000; background-color: #53a8c7; color: white">
                                <i class="bi bi-download"></i>
                                {{ __('message.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--End Modal Change password-->

    <div class="toast-container position-fixed top-0 end-0 p-3">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-body">
                Are you sure! you want to logout this accout?
                <form action="{{ route('logout') }}" method="POST" class="mt-2 pt-2 border-top text-end">
                    @csrf
                    <button type="button" class="btn px-3 btn-secondary btn-sm" data-bs-dismiss="toast">No</button>
                    <button type="submit" class="btn px-3 btn-danger btn-sm">Yes</button>
                </form>
            </div>
        </div>
    </div>
    @include('app.sweetAlert')
@endsection

@push('styles')
    <style>
        #gauge-chart {
            width: 100%;
        }

        #gauge-chart>canvas {
            position: relative !important;
        }

        .mb-3 {
            margin-bottom: 0px !important;
        }

        .canvas_div {

            /*display: flex;*/
            /*justify-content: center;*/
            width: 320px;
            height: 320px;

            transform: scale(0.5, 0.5);
        }

        #canvas {
            background: -webkit-linear-gradient(top, #000000e0 0%, #3bb4f2 100%);
            background: -ms-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
            background: -moz-linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
            background: linear-gradient(top, #0e83f5 0%, #21bdf6 100%);
            border-radius: 170px;
            box-shadow: 0px 2px 14px 1px #000000;

        }

        .dropdown-menu {
            transform: translate3d(20px, 428px, 0px) !important;
            -webkit-transition: all .25s ease;
            -moz-transition: all .25s ease;
            -ms-transition: all .25s ease;
            -o-transition: all .25s ease;
            transition: all .25s ease;
        }
    </style>
@endpush

@push('scripts')
    {{-- @vite('resources/js/echartjs.js') --}}

    <script type="text/javascript">
        function logOut() {
            $('#logout-form').submit();
        }
        window.onload = function() {
            var canvas = document.getElementById('canvas'),
                ctx = canvas.getContext('2d'),
                cWidth = canvas.width,
                cHeight = canvas.height,
                score = canvas.attributes['data-score'].value,
                stage = ['Miskin', 'Sedang', 'Bagus', 'Bagus sekali', 'Sangat bagus'],
                radius = 150,
                deg0 = Math.PI / 9,
                deg1 = Math.PI * 11 / 45;

            if (score < 400 || score > 900) {
                alert('Credit Score Range：400~900');
            } else {
                var dot = new Dot(),
                    dotSpeed = 0.03,
                    textSpeed = Math.round(dotSpeed * 100 / deg1),
                    angle = 0,
                    credit = 400;

                (function drawFrame() {

                    ctx.save();
                    ctx.clearRect(0, 0, cWidth, cHeight);
                    ctx.translate(cWidth / 2, cHeight / 2);
                    ctx.rotate(8 * deg0);

                    dot.x = radius * Math.cos(angle);
                    dot.y = radius * Math.sin(angle);

                    var aim = (score - 400) * deg1 / 100;
                    if (angle < aim) {
                        angle += dotSpeed;
                    }
                    dot.draw(ctx);

                    if (credit < score - textSpeed) {
                        credit += textSpeed;
                    } else if (credit >= score - textSpeed && credit < score) {
                        credit += 1;
                    }
                    text(credit);

                    ctx.save();
                    ctx.beginPath();
                    ctx.lineWidth = 3;
                    ctx.strokeStyle = 'rgba(255, 255, 255, .5)';
                    ctx.arc(0, 0, radius, 0, angle, false);
                    ctx.stroke();
                    ctx.restore();

                    window.requestAnimationFrame(drawFrame);

                    ctx.save(); //中间刻度层
                    ctx.beginPath();
                    ctx.strokeStyle = 'rgba(255, 255, 255, .2)';
                    ctx.lineWidth = 10;
                    ctx.arc(0, 0, 135, 0, 11 * deg0, false);
                    ctx.stroke();
                    ctx.restore();

                    ctx.save(); // 刻度线
                    for (var i = 0; i < 6; i++) {
                        ctx.beginPath();
                        ctx.lineWidth = 2;
                        ctx.strokeStyle = 'rgba(255, 255, 255, .3)';
                        ctx.moveTo(140, 0);
                        ctx.lineTo(130, 0);
                        ctx.stroke();
                        ctx.rotate(deg1);
                    }
                    ctx.restore();

                    ctx.save(); // 细分刻度线
                    for (i = 0; i < 25; i++) {
                        if (i % 5 !== 0) {
                            ctx.beginPath();
                            ctx.lineWidth = 2;
                            ctx.strokeStyle = 'rgba(255, 255, 255, .1)';
                            ctx.moveTo(140, 0);
                            ctx.lineTo(133, 0);
                            ctx.stroke();
                        }
                        ctx.rotate(deg1 / 5);
                    }
                    ctx.restore();

                    ctx.save(); //信用分数
                    ctx.rotate(Math.PI / 2);
                    for (i = 0; i < 6; i++) {
                        ctx.fillStyle = 'rgba(255, 255, 255, .4)';
                        ctx.font = '10px Microsoft yahei';
                        ctx.textAlign = 'center';
                        ctx.fillText(400 + 100 * i, 0, -115);
                        ctx.rotate(deg1);
                    }
                    ctx.restore();

                    ctx.save(); //分数段
                    ctx.rotate(Math.PI / 2 + deg0);
                    for (i = 0; i < 5; i++) {
                        ctx.fillStyle = 'rgba(255, 255, 255, .4)';
                        ctx.font = '10px Microsoft yahei';
                        ctx.textAlign = 'center';
                        ctx.fillText(stage[i], 5, -115);
                        ctx.rotate(deg1);
                    }
                    ctx.restore();

                    ctx.save(); //信用阶段及评估时间文字
                    ctx.rotate(10 * deg0);
                    ctx.fillStyle = '#fff';
                    ctx.font = '28px Microsoft yahei';
                    ctx.textAlign = 'center';
                    if (score < 500) {
                        ctx.fillText('Bad Credit', 0, 40);
                    } else if (score < 600 && score >= 500) {
                        ctx.fillText('Medium Credit', 0, 40);
                    } else if (score < 700 && score >= 600) {
                        ctx.fillText('Good Credit', 0, 40);
                    } else if (score < 800 && score >= 700) {
                        ctx.fillText('Very Good Credit', 0, 40);
                    } else if (score <= 900 && score >= 800) {
                        ctx.fillText('Super Good Credit', 0, 40);
                    }

                    ctx.fillStyle = '#80cbfa';
                    ctx.font = '14px Microsoft yahei';
                    //   ctx.fillText('评估时间：2016.11.06', 0, 60);

                    ctx.fillStyle = '#7ec5f9';
                    ctx.font = '14px Microsoft yahei';
                    ctx.fillText('', 0, -60);
                    ctx.restore();

                    // ctx.save(); //最外层轨道
                    ctx.beginPath();
                    ctx.strokeStyle = 'rgba(255, 255, 255, .4)';
                    ctx.lineWidth = 8;
                    ctx.arc(0, 0, radius, 0, 11 * deg0, false);
                    ctx.stroke();
                    ctx.restore();

                })();
            }

            function Dot() {
                this.x = 0;
                this.y = 0;
                this.draw = function(ctx) {
                    ctx.save();
                    ctx.beginPath();
                    ctx.fillStyle = 'rgba(255, 255, 255, .7)';
                    ctx.arc(this.x, this.y, 3, 0, Math.PI * 2, false);
                    ctx.fill();
                    ctx.restore();
                };
            }

            function text(process) {
                ctx.save();
                ctx.rotate(10 * deg0);
                ctx.fillStyle = '#fff';
                ctx.font = '80px Microsoft yahei';
                ctx.textAlign = 'center';
                ctx.textBaseLine = 'top';
                ctx.fillText(process, 0, 10);
                ctx.restore();
            }
        };
        // logout JS
        const toastTrigger = document.getElementById('liveToastBtn')
        const toastLiveExample = document.getElementById('liveToast')
        if (toastTrigger) {
            toastTrigger.addEventListener('click', () => {
                const toast = new bootstrap.Toast(toastLiveExample)
                toast.show()
            })
        }
    </script>
@endpush