@extends('layouts.frontend-master')
@push('style')
@endpush
@php
    $user = auth()->user()->member;
    $loan = \App\Models\Loan::where('member_id', Auth::user()->member->id)
        ->orderBy('id', 'desc')
        ->first();
@endphp
@section('title', 'Information')
@push('style')
<style>
    body {
        background-color: #f8f9fa;
    }
    .icon-box {
        text-align: center;
        padding: 20px;
    }
    .icon-box i {
        font-size: 30px;
        color: #007bff;
    }
    .logout-btn {
        display: block;
        margin: 20px auto;
        width: 120px;
        padding: 10px;
        text-align: center;
        border: 2px solid red;
        color: red;
        border-radius: 10px;
        font-weight: bold;
        background: transparent;
    }
    .logout-btn:hover {
        background-color: red;
        color: white;
    }

    .progress-container {
            position: relative;
            width: 120px;
            height: 120px;
        }
        svg {
            transform: rotate(0deg); /* Reverts progress to start from the top */
        }
        .progress-circle {
            fill: none;
            stroke-width: 10;
            stroke-linecap: round; /* Makes edges smooth */
            transition: stroke-dasharray 0.5s ease-in-out;
        }
        .progress-background {
            stroke: #e0e0e0;
        }
        .progress-bar {
            stroke: url(#gradient); /* Apply the gradient */
            stroke-dasharray: 283; /* Full circle circumference */
            stroke-dashoffset: 75; /* Adjust to match percentage */
        }
        .progress-value {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 22px;
            font-weight: bold;
            color: black;
        }
        .progress-label {
            margin-top: 15px;
            font-size: 14px;
            color: #555;
            font-weight: bold;
        }
</style>
@endpush
@section('content')

    <div class="flex flex-col space-y-2 my-4 max-w-lg mx-auto" style="padding-left: 30px;">
        {{-- <div class="relative">
            <div class="arco-progress arco-progress-type-circle arco-progress-size-large arco-progress-status-normal">
                <div role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0.5"
                    class="arco-progress-circle-wrapper" style="width: 80px; height: 80px">
                    <svg viewBox="0 0 80 80" class="arco-progress-circle-svg">
                        <defs>
                            <lineargradient id="arco-progress-circle-linear-gradient-2" x1="0" y1="1"
                                x2="0" y2="0">
                                <stop offset="0%" stop-color="rgb(var(--red-6))"></stop>
                                <stop offset="100%" stop-color="rgb(var(--success-6))"></stop>
                            </lineargradient>
                        </defs>
                        <circle class="arco-progress-circle-bg" fill="none" cx="40" cy="40" r="36"
                            stroke-width="8"></circle>
                        <circle class="arco-progress-circle-bar" fill="none" cx="40" cy="40" r="36"
                            stroke-width="8"
                            style="
                stroke: url('#arco-progress-circle-linear-gradient-2');
                stroke-dasharray: 226.195;
                stroke-dashoffset: 113.097;
              ">
                        </circle>
                    </svg><!--v-if-->
                </div>
            </div>
            <span
                class="absolute inset-0 flex items-center justify-cente text-2xl font-bold" style="padding-left: 50px;">{{ auth()->user()->member->credit_score ?? 500 }}</span>
        </div>
        <p class="text-sm mb-2" style="padding-left:30px;">Credit Score</p>
        <p class="font-bold text-lg"style="padding-left:40px;">{{ auth()->user()->phone ?? 000 }}</p> --}}

        <div>
            <div class="progress-container">
                <svg width="120" height="120" viewBox="0 0 100 100">
                    <!-- Background Circle -->
                    <circle class="progress-circle progress-background" cx="50" cy="50" r="45" />
                    <!-- Progress Circle -->
                    <circle class="progress-circle progress-bar" cx="50" cy="50" r="45" 
                        stroke-dasharray="283" stroke-dashoffset="75" />
                    <!-- Gradient Definition -->
                    <defs>
                        <linearGradient id="gradient" x1="1" y1="0" x2="0" y2="1">
                            <stop offset="0%" stop-color="#007bff"/>
                            <stop offset="100%" stop-color="#0056b3"/>
                        </linearGradient>
                    </defs>
                </svg>
                <div class="progress-value">{{ auth()->user()->member->credit_score ?? 500 }}</div>
            </div>
            <div class="progress-label" style="padding-left: 20px;">{{ auth()->user()->phone ?? 000 }}</div>
        </div>
    </div>
    <div class="flex flex-col space-y-2 my-4 max-w-lg mx-auto">
        {{-- <div class="cursor-pointer rounded-full bg-primary-linear py-2 text-white px-4 text-xl font-medium relative">
            Personal Information<a class="absolute inset-0" href="{{ route('personal-info') }}"></a>
        </div>
        <div class="cursor-pointer rounded-full bg-primary-linear py-2 text-white px-4 text-xl font-medium relative">
            Indentify Information<a class="absolute inset-0" href="{{ route('identity.info') }}"></a>
        </div>
        <div class="cursor-pointer rounded-full bg-primary-linear py-2 text-white px-4 text-xl font-medium relative">
            Beneficiary Information<a class="absolute inset-0" href="{{ route('bank.info') }}"></a>
        </div>
        <div class="cursor-pointer rounded-full bg-primary-linear py-2 text-white px-4 text-xl font-medium relative">
            Signature<a class="absolute inset-0" href="{{ route('signature') }}"></a>
        </div>
        <div class="cursor-pointer rounded-full bg-primary-linear py-2 text-white px-4 text-xl font-medium relative">
            My Loan Application<a class="absolute inset-0" href="{{ route('loan-application') }}"></a>
        </div>
        <div class="cursor-pointer rounded-full bg-primary-linear py-2 text-white px-4 text-xl font-medium relative">
            Payment Schedule<a class="absolute inset-0" href="{{ route('repayment') }}"></a>
        </div>
        <div class="cursor-pointer rounded-full bg-primary-linear py-2 text-white px-4 text-xl font-medium relative">
            Transactions<a class="absolute inset-0" href="{{ route('transaction') }}"></a>
        </div>
        <div class="cursor-pointer rounded-full bg-primary-linear py-2 text-white px-4 text-xl font-medium relative">
            About Us<a class="absolute inset-0" href="{{ route('about') }}"></a>
        </div>
        <div id="term-btn"
            class="cursor-pointer rounded-full bg-primary-linear py-2 text-white px-4 text-xl font-medium relative">
            Terms and Condition<!---->
        </div> --}}

        <div class="w-full max-w-md p-6  shadow-lg rounded-lg">
            <!-- Icon Grid -->
            <div class="grid grid-cols-3 gap-6 text-center text-blue-600">
                <div class="flex flex-col items-center mb-4" style="padding:20px;cursor: pointer;" onclick="window.location.href=window.location.href='{{ route('account') }}'" >
                    <i class="fa-regular fa-address-card" style="color:rgb(81, 81, 222);font-size:3rem;"></i>
                    <p class="mt-4 text-sm font-medium px-4">Personal Information</p>
                </div>
                <div class="flex flex-col items-center mb-4" style="padding:20px;cursor: pointer;" onclick="window.location.href='{{ route('loan-application') }}'">
                    <i class="fa-regular fa-envelope-open"style="color:rgb(81, 81, 222);font-size:3rem;"></i>
                    <p class="mt-4 text-sm font-medium">Loan Applications</p>
                </div>
                <div class="flex flex-col items-center mb-4" style="padding:20px;cursor: pointer;" onclick="window.location.href='{{ route('repayment') }}'">
                    <i class="fa-regular fa-calendar-check"style="color:rgb(81, 81, 222);font-size:3rem;"></i>
                    <p class="mt-4 text-sm font-medium">Repayment Period</p>
                </div>
                <div class="flex flex-col items-center mb-4" style="padding:20px;cursor: pointer;" onclick="window.location.href='{{ route('transaction') }}'">
                    <i class="fa-regular fa-credit-card"style="color:rgb(81, 81, 222);font-size:3rem;"></i>
                    <p class="mt-4 text-sm font-medium px-4">My Transaction</p>
                </div>
                <div class="flex flex-col items-center mb-4" style="padding:20px;cursor: pointer;" onclick="window.location.href='{{ route('setup') }}'">
                    <i class="fas fa-sliders-h text-3xl" style="color:rgb(81, 81, 222);font-size:3rem;"></i>
                    <p class="mt-4 text-sm font-medium">Set Up</p>
                </div>
                <div class="flex flex-col items-center mb-4" style="padding:20px;cursor: pointer;" onclick="window.location.href='{{ route('about') }}'">
                    <i class="fas fa-ellipsis-h text-3xl"style="color:rgb(81, 81, 222);font-size:3rem;"></i>
                    <p class="mt-4 text-sm font-medium">About Us</p>
                </div>
            </div>
    
            
        </div>
    </div>
    <div class="flex justify-center w-full">
        <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: block;">
            @csrf
            <button
                class="arco-btn arco-btn-outline arco-btn-shape-square arco-btn-size-medium arco-btn-status-danger rounded-full px-20"
                type="submit">
                <!--v-if-->Logout
            </button>
        </form>
    </div>
    <div class="arco-modal-container" style="z-index: 1001;display:none;" id="term">
        <div class="arco-modal-mask" style=""></div>
        <div class="arco-modal-wrapper arco-modal-wrapper-align-center">
            <div class="arco-modal" style="width: auto;">
                <div class="arco-modal-header">
                    <div class="arco-modal-title arco-modal-title-align-center"><!--v-if-->Term &amp; Conditions</div>
                    <div tabindex="-1" role="button" aria-label="Close" class="arco-modal-close-btn close"><span
                            class="arco-icon-hover"><svg viewBox="0 0 48 48" fill="none"
                                xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="arco-icon arco-icon-close"
                                stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter">
                                <path d="M9.857 9.858 24 24m0 0 14.142 14.142M24 24 38.142 9.858M24 24 9.857 38.142"></path>
                            </svg></span></div>
                </div>
                <div class="arco-modal-body">
                    <div class="prose">
                        <div>
                            <p> “Installment Agreement”, the Lender and the Borrower agree to and jointly abide by this
                                Agreement. Adhering to the principles of equity, voluntary, honesty and reputation, there is
                                no consensus, this small loan agreement is signed and ensures compliance and performance by
                                the parties. </p>
                            <p> Article 1<br>Loan Form: Use an unsecured ID card to request a loan. </p>
                            <p>Article 2<br>Premium interest rate:</p>
                            <p> Interest rates, fines, service charges or any fees. Total not more than 25% per year. </p>
                            <p> Article 3<br> During the loan tenure, the borrower has to:<br> (1) Pay interest at the same
                                time.<br> (2) To give capital on time.<br> (3) If it is not possible to borrow money from
                                the account due to the borrower's problem, the borrower should cooperate with the lender to
                                finalize the payment.<br> (4) comply with all the terms of the contract.<br></p>
                            <p> Article 4<br> (1) In case the borrower borrows online without using collateral, the lender
                                is at risk of lending. The borrower must have a loan guarantee to check the liquidity of the
                                borrower"s personal loan minimum repayment. Must be verified for financial liquidity The
                                borrower is required to guarantee the loan amount 8%-15% of the approved loan amount in the
                                account of the lender. <br> (2) In case the borrower borrows online without using
                                collateral, the lender is at risk of lending. The borrower must purchas a loan insurance to
                                protect the risks of both parties. The amount of insurance is 8%-15% of the loan amount.<br>
                                (3) After signing this contract, both the borrower and the lender must comply with all
                                requirements of the contract. If either party breaches the contract, the other party has the
                                right to sue in court. The party not complying with this will have to pay a fine of 50
                                percent of the installment amount if it does not object. <br> (4) In the event that the
                                credit transfer cannot be resolved due to the problems of the borrower, the lender has the
                                right to request the borrower to assist in handling it. After completing this operation, the
                                lender has to transfer the funds. <br> (5) The borrower shall repay the loan principal and
                                interest within the period specified in the contract. If the borrower wants to apply for
                                loan extension, he/she has to disburse it 5 days before the contract period.<br> (6) If
                                theborrower does not repay on time on the stipulated repayment date, penalty interest will
                                be calculated after three days at 0.3% per day.<br></p>
                            <p> Article 5<br> Lending: Before granting a loan, the lender has the right to consider the
                                following matters and take a decision to grant the loan as a result of the review:<br> (1)
                                The Borrower has entered into this Agreement Completion of legal formalities (if any)
                                relating to the loan under the Act, such as regulatory delivery of government permits,
                                approvals, registrations and relevant laws;<br> (2) whether the Borrower has paid the costs
                                associated with this Agreement (if any);<br> (3) whether the borrower has complied with the
                                loan terms specified in this Agreement;<br> (4) whether the business and financial position
                                of the borrower has changed adversely;<br> (5) If the Borrower breaches the terms specified
                                in this Agreement. </p>
                            <p> Article 6<br> (1) The borrower cannot use the loan for illegal activities. Otherwise, the
                                Lender reserves the right to require the Borrower to repay the principal and interest
                                promptly and the legal consequences shall be borne by the Borrower.<br> (2) The borrower
                                shall repay the principal and interest within the period specified in the contract. For the
                                overdue portion, the lender is entitled to recover the loan and collect 5% of the total
                                amount due. </p>
                            <p> Article 7<br> Modification or termination of contract: In all of the above provisions,
                                neither party is permitted to modify or terminate the contract without permission. When
                                either party wishes to bring to the fore such facts in accordance with the provisions of the
                                law, he must notify the other party in writing in time for the settlement. After this
                                Agreement is modified or terminated, the Borrower shall repay 30% to the principal and
                                interest in accordance with the terms of this Agreement. </p>
                            <p> Article 8<br> Dispute Resolution: Both parties agree to amend the terms of this Agreement
                                through negotiation. If the negotiations do not agree, you can ask the local arbitration
                                committee to mediate or bring the matter to a local court. </p>
                            <p> Article 9<br> The lender assumes the credit risk of the borrower. Due to the "new corona
                                pandemic", the central office requires borrowers to purchase personal accident insurance. If
                                the borrower is unable to repay the loan on time due to force mature, the lender may ask the
                                insurance company to assist in the payment of the borrower's loan and the loan should be
                                transferred to the borrower's account. Borrowing is specified in the internal contract. Half
                                an hour after the purchase, if the borrower signs the contract but does not comply with the
                                terms, the company considers it a serious fraud and will take the credit dispute to the
                                people's court. The anti-contract king is also presented. After purchase, if the lender does
                                not lend on time, the borrower has the right to sue directly in the local court. </p>
                            <p> Article 10<br> This short loan agreement takes effect from the date of its signing by both
                                parties (including the electronic agreement). The text of the contract has the same legal
                                effect. The lender and borrower keep a copy of the contract. </p>
                        </div>
                    </div>
                </div>
                <div class="arco-modal-footer"><!--v-if--><button
                        class="arco-btn close arco-btn-primary arco-btn-shape-square arco-btn-size-medium arco-btn-status-normal"
                        type="button"><!--v-if-->Ok</button></div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script>
        $(function() {
            $('.close').on('click', function() {
                $('#term').hide();
            });

            $('#term-btn').on('click', function() {
                $('#term').show();
            });
        });
    </script>
@endpush