@extends('layouts.frontend')
@section('title', 'Profile')
@section('content')
    <div class="page-content card " style="margin-bottom:50px; border-radius: 10px">
        <h3 class="py-2 text-bg-dark text-center mb-0" style="font-weight:bold;">Account</h3>
        <img src="{{asset('profile-bk.jpg')}}" style="width:100%;">
        <div class="profile-img mb-3 p-3 text-center rounded-3 bg-light" style="margin-top:0px;padding:0.5em !important">

            <div class="border-0">
                <div class="card profile-img text-center rounded-3 text-bg-dark"
                    style="background-color:#006abc !important;width:80%;margin-left:10%;padding-top:0px;box-shadow: rgb(38, 57, 77) 0px 20px 25px -10px;">
                    <h6 class="text-white fw-bolder" style="margin-top:5px;">
                        Account: {{ auth()->user()->phone }}
                    </h6>
                </div>
            </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>
        <div style="box-shadow: 0px 0px 8px 0px #00000036;">
            <div class="card-body shadow-2 px-2">
                {{-- <div class="mb-3" style="box-shadow: 0px 0px 8px 0px #00324e12;">
                <a class="profile-item" href="https://admin.gtrpay001.com/pay/collection?mchId=19387420&mchk=OWJlYWIwY2IxZjJlNGYwZDg0NWFiNDhmNmNkY2MxYzY=&passageId=10202&countryCode=PHP">
                    <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-currency-dollar" style="color:#00324e;font-size: 22px;"></i> -->
                                </div>
                                <div class="flex-grow-1" style="font-weight:bold;">Deposit Method</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="{{ route('information') }}">
                        <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:#006abc;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1">Information</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="{{ route('loan-application') }}">
                        <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-currency-dollar" style="color:#006abc;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1">Loan Application</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="{{ route('repayment') }}">
                        <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-circle-fill" style="color:#006abc;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1">My refund</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="{{ route('transaction') }}">
                        <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:#006abc;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1">Transactions</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;">
                    <div class="profile-item" href="{{ route('change-password') }}" 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:#006abc;font-size: 22px;"></i></div>
                                    <div class="flex-grow-1" data-bs-toggle="modal" data-bs-target="#exampleModalToggle1">
                                        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="{{ route('contact') }}">
                        <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-earmark-person" style="color:#006abc; font-size: 22px;"></i>
                                    </div>
                                    <div class="flex-grow-1">Contact</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="">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 class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
    aria-labelledby="staticBackdropLabel" aria-hidden="true" style="width:80%;margin-left:10%;">
    <div class="modal-dialog modal-dialog-centered" style="margin:0px;">
        <div class="modal-content">
            <div class="modal-header" style="background-color:#1f7ba7;color:white;">
                <h1 class="modal-title text-center" id="staticBackdropLabel" style="color:white;font-size: 16px;text-align: center;">
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                     Enter A New Password
                </h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" style="color:white;background-color: red; background-image: url(/images/deletes.png);" ></button>
            </div>
            <div class="modal-body" x-init>
                <form method="POST" class="mt-4" 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>                    </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-dark btn-ecomm rounded-3" style="border-radius: 50px !important;box-shadow: 0px 2px 9px 0px #000000;" onclick="return checkConfirmPassword();">Confirm</button>
                    </div>
                </form>
            </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:#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-close " data-bs-dismiss="modal" aria-label="Close" style="color:white;background-color: red; background-image: url(/images/deletes.png);"></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-dark btn-ecomm rounded-3" style="border-radius: 50px !important;box-shadow: 0px 2px 3px 0px #000000;" 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') --}}

    <script type="text/javascript">
        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 = 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