@extends('layouts.frontend')
@section('title', 'Profile')
@section('content')
    <h1 class="text-light text-center digit txt-account">Account</h1>
    <div class="card device-desk-account my-4" style="padding-top: 0;height: 140vh">
        <!-- <div class="container-sm"> -->
        <!-- <div class="box-register">REGISTER ACCOUNT</div> -->
       <!--  <div class="canvas_div" style="height:220px;margin-top:-50px !important;margin:0 auto;">
                <canvas id="canvas" width="310px" height="310px"
                    data-score="{{ auth()->user()->member->credit_score ?? 500 }}"></canvas>
            </div> -->
        
        <div class="row justify-content-xs-center">
            <div class="col-xs-12 col-sm-12 text-center">
                {{-- <span class="text-center text-uppercase">Credit Score</span> --}}
                <div class="col" >
                    {{-- <img src="{{ asset('fronts/assets/icons/accounts/points.png') }}" alt="" width="130px"> --}}
                    <div id="gauge-chart" style="display: flex; justify-content: center;"></div>
                    
                </div>
            </div>
            <div class="header-account" style="margin-bottom:20px;margin-top:-50px;">
                <button class=" btn-light m-2 mt-3 cutom-account-number">Account : {{ Auth::user()->phone ?? '' }}</button>
            </div>
            <div class="col-xs-12 col-sm-12 text-center"  style="margin-top: -12px">
                <div class="row g-0">
                    <div class="col">
                        <a href="{{ route('information') }}" class="link-account">
                            <img src="{{ asset('fronts/assets/icons/accounts/info.png') }}" alt="" width="70px">
                            <br>
                            <span style="font-size: 15px;">Information</span>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ route('loan-application') }}" class="link-account">
                            <img src="{{ asset('fronts/assets/icons/accounts/loan-app.png') }}" alt=""
                                width="70px">
                            <br>
                            <span style="white-space: nowrap; margin-right: 5px;font-size: 15px;">Loan Application</span>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ route('repayment') }}" class="link-account">
                            <img src="{{ asset('fronts/assets/icons/accounts/repament.png') }}" alt=""
                                width="70px">
                            <br>
                            <span style="white-space: nowrap;font-size: 15px;">Repayment Period</span>
                        </a>
                    </div>
                </div>
                <div class="row g-0 mt-2">
                    <div class="col">
                        <a href="{{ route('transaction') }}" class="link-account">
                            <img src="{{ asset('fronts/assets/icons/accounts/transation.png') }}" alt=""
                                width="70px">
                            <br>
                            <span style="font-size: 15px;">Transaction</span>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#" class="link-account" data-bs-toggle="modal"
                            data-bs-target="#ChangepassModalToggle1">
                            <img src="{{ asset('fronts/assets/icons/accounts/forgotpass.png') }}" alt=""
                                width="70px">
                            <br>
                            <span style="white-space: nowrap;font-size: 15px;">Change Password</span>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ route('about') }}" class="link-account">
                            <img src="{{ asset('fronts/assets/icons/accounts/about-us.png') }}" alt=""
                                width="70px">
                            <br>
                            <span style="font-size: 15px;">About Us</span>
                        </a>
                    </div>
                </div>
                {{-- <div class="row g-0 mt-2">
                    <div class="col">
                        <a href="#" class="link-account">
                         
                            <i class="fa fa-headset fa-3x" style="color: rgb(122 103 190)"></i>
                            <br>
                            <span>Contact</span>
                        </a>
                    </div>
                    <div class="col">
                        <a href="#" class="link-account">
                            <i class="fa fa-key fa-3x" style="color: rgb(122 103 190)"></i>
                            <br>
                            <span>Change Password</span>
                        </a>
                    </div>
                    <div class="col">
                        <a href="{{ route('about') }}" class="link-account">
                            <i class="fa fa-right-left fa-3x" style="color: rgb(122 103 190)"></i>
                            <br>
                            <span>Refund</span>
                        </a>
                    </div>
                </div> --}}

            </div>
        </div>
        <div class="btn-submit text-center" >
            <div class="card-body py-2">
                <!--  id="liveToastBtn" -->
                <div class="rounded-3">
                    <a class="profile-item" href="javascript:;" id="logout" onclick="$('#logout-form').submit();">
                    <button class="btn btn-light cutom-exit">Exit</button>
                        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                            @csrf
                        </form>
                    </a>
                </div>
            </div>
        </div>
        {{-- <a href="/login.html" class="btn btn-light m-4 cutom-exit " >Exit</a> --}}
        <!-- </div> -->
    </div>

    </div>
    <div class="modal fade" id="ChangepassModalToggle1" aria-hidden="true" aria-labelledby="ChangepassModalToggle1"
        tabindex="-1" style="width:80%;margin-left:10%;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header " style="background: #013674"
                    style="box-shadow: 0px 1px 3px 0px #030303; background-color:#1f7ba7;color:white;">
                    <h1 class="modal-title fs-5 " style="color:white;font-size: 1rem !important; text-align: center;">
                        Enter A New Password
                    </h1>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" style="border-radius: 50em;"><i
                            class="fa fa-x text-danger"></i></button>
                </div>
                <div class="modal-body" x-init>
                    <form method="POST" class="mt-2" action="{{ route('change-password') }}">
                        @csrf
                        <input name="_method" type="hidden" value="PUT">
                        <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="Enter A New Password" style="width:100%;" required>
                                <label for="pwd">Enter A 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="input-group mb-3" id="show_hide_password" style="margin-top:10px;">
                            <div class="form-floating flex-grow-1">
                                <input type="password" @class([
                                    'form-control',
                                    'border-danger' => $errors->has('conform_password'),
                                ]) id="pwd"
                                    name="confirm_password" placeholder="Confirm Password" style="width:100%;" required>
                                <label for="pwd">Confirm Password</label>
                                @error('conform_password')
                                    <span class="text-danger">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="mb-0 d-grid pt-3">
                            <button type="submit" class="btn btn-ecomm rounded-3 text-light"
                                style="border-radius: 50px !important;box-shadow: 0px 2px 3px 0px #000000; background:#013674; "
                                onclick="return checkConfirmPassword();">Confirm</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;
        }

        .card {
            box-shadow: rgb(100 100 111) 0px 7px 29px 0px;
            margin-bottom: 10px;
        }

        /* .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') --}}
      {{-- echarts --}}
    {{-- @vite('resources/js/echartjs.js') --}}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script>
        var chartDom = document.getElementById('gauge-chart');
        var myChart = echarts.init(chartDom, null, {
            width: 295,
            height: 295
        });
        var option;

        option = {
            tooltip: {
                formatter: '{a} <br/>{b} : {c}%',
                type:"Line"
            },
            series: [{
                name: 'Credit',
                type: 'gauge',
                data: [0,100,200,300,400, 500, 600, 700, 800, 900,1000],
                max: 1000,
                axisLine: {
                    lineStyle: {
                        width: 20,
                        color: [
                            [0.2, '#f50000'],
                            [0.4, '#d18219'],
                            [0.6, '#cdbb16'], 
                            [0.8, '#35c106'], 
                            [1, '#1f9a4a']
                        ]
                    }
                },

                axisTick: {
                    distance: -30,
                    length: 8,
                    lineStyle: {
                        color: 'green',
                        width: 2                    }
                },
                splitLine: {
                    distance: -30,
                    length: 30,
                    lineStyle: {
                        color: '#fff',
                        width: 4
                    }
                },
                axisLabel: {
                    color: 'auto',
                    distance: 40,
                    fontSize: 12
                },
                detail: {
                    valueAnimation: true,
                    formatter: "{value}",
                    color: 'rgb(248,128,31)',
                    fontSize: 20,
                },
                data: [{
                    value: @json(auth()->user()->member->credit_score ?? 0),
                    name: 'Credit'
                }],
            }]
        };
        option && myChart.setOption(option);


        // const toastTrigger = document.getElementById('liveToastBtn')
        // const toastLiveExample = document.getElementById('liveToast')
        // if (toastTrigger) {
        //     toastTrigger.addEventListener('click', () => {
        //         const toast = new bootstrap.Toast(toastLiveExample)
        //         toast.show()
        //     })
        // }

        function checkConfirmPassword() {
            var pass = document.querySelector('input[name="password"]').value;
            var confirm = document.querySelector('input[name="confirm_password"]').value;
            if (pass != '' && confirm != '' && pass != confirm) {
                // alert("Password & Confirm Password doesn't match")
                jSuites.notification({
                    error: 1,
                    name: '',
                    message: "Password & Confirm Password doesn't match",
                });
                return false
            }
            return true;
        }

        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 = 0;

                (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 - 0) * 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(0 + 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