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

            <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;">
                        {{ auth()->user()->phone }}
                        <!-- <i class="bi bi-cash-coin fa-lg"></i> :  -->
                        <span style="font-size: 12px;">
                            ({{__('message.accumulated points')}}: {{ number_format(auth()->user()->member->credit ?? 0, 2) }}
                            {{ $setting_->currency_name }})
                        </span>
                    </h6>
                    <div style="padding:15px;border-top-right-radius: 20px;border-top-left-radius: 20px;background-color: #0000004f;color:white">
                        {{__('message.account balance')}}

                        {{ number_format(auth()->user()->member->credit ?? 0, 2) }}
                            {{ $setting_->currency_name }})
                    </div>
                </div>
            </div>
        </div>
        <div class="sub-content">
            <div class="card" style="padding: 0px 0px 280px 0px;overflow: hidden;">
                <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: 5px;width:45%;background: linear-gradient(90deg,#78420F,#E5CC8A);margin-left:12px; margin-top: 10px; padding: 12px;border:none;color:black;">
                        {{-- <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: 10px;width:45%;color:#794310;background-image: linear-gradient(0deg,#794310,#E4CA89) 10 10;float:right;margin-right:12px;margin-top: 10px; padding: 12px;color:linear-gradient(0deg,#78420F 0%,#E5CC8A 100%)">
                        {{-- <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 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 st>
                                        {{ 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;">
                    <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="#exampleModalToggle2">
                                        {{ __('message.withdrawal 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 @if (request()->is('member/transaction')) active @endif"
                        href="{{ route('member.transactions') }}" 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><i class="bi bi-journal-medical" style="color:gray;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1">
                                        {{ __('message.transaction history') }}
                                    </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="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: linear-gradient(90deg,#78420F,#E5CC8A); color: white">
                                <i class="bi bi-download"></i>
                                {{ __('message.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--End Modal Change password-->
    <div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggle2"
        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.withdrawal 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-withdrawal-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('withdrawal_password')]) id="withdrawal_password" name="withdrawal_password"
                                    placeholder="{{ __('message.withdrawal password') }}" style="width:100%;" required value="{{Auth::user()->member->withdrawal_password??''}}" @if(Auth::user()->member->withdrawal_password??false) readonly @endif>
                                <label for="pwd">{{ __('message.withdrawal 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: linear-gradient(90deg,#78420F,#E5CC8A); color: white" @if(Auth::user()->member->withdrawal_password??false) disabled @endif>
                                <i class="bi bi-download"></i>
                                {{ __('message.save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!--End Modal Change withdrawal 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;

        }
    </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