@extends('layouts.frontend')

@section('title', 'Apply For A Loan')

@section('content')
    <div class="page-content py-0">
        <!--start banner slider-->
        <div class="banner-slider">
            @foreach ($slides as $slide)
                <div class="banner-item">
                    <a href="#">
                        <img src="{{ asset($slide->feature_image) }}" class="img-fluid rounded-3" alt="">
                    </a>
                </div>
            @endforeach
        </div>
        <!--end banner slider-->
        <!--start Loan Form-->

        <div class="card" style="padding:10px;">
            <div class="row" style="text-align: center;">
                <span style="width:20%;text-align: center;">
                    <img src="{{ asset('images/step1.png') }}" style="width:70px;">
                </span>
                <span style="width:15%;text-align: center;">
                    <img src="{{ asset('images/arrow.png') }}" style="width:20px;margin-top:30px;">
                </span>
                <span style="width:20%;text-align: center;">
                    <img src="{{ asset('images/step2.png') }}" style="width:70px;">
                </span>
                <span style="width:15%;text-align: center;">
                    <img src="{{ asset('images/arrow.png') }}" style="width:20px;margin-top:30px;">
                </span>
                <span style="width:15%;text-align: center;">
                    <img src="{{ asset('images/step3.png') }}" style="width:70px;">
                </span>

                <span style="width:25.33%;text-align: center;">
                    <span style="color:#000;font-size: 8px;text-align: center;">
                        Submit Application</span>
                </span>
                <span style="width:46.33%;text-align: center;">
                    <span style="color:#000;font-size: 8px;text-align: center;">Get Guota</span>
                </span>
                <span style="width:23.33%;text-align: center;">
                    <span style="color:#000;font-size: 7px;text-align: center;">Loan Now</span>
                </span>

                <hr />
            </div>
            <form class="loan-form" action="{{ route('member.loan', auth()->id()) }}" method="POST" x-data="loaning"
                x-init="$watch('amount', value => activeAmount(value))" x-effect="activeMonthly(monthly)" autocomplete="off">
                @csrf
                <div class="form-group">

                    <div class="input-group">
                        <input type="text" id="amount" class="form-control" min="150000" max="5000000"
                            x-mask="9999999" x-model="amount"
                            style="text-align:center;font-weight:bold;font-size:250%;color:#f60005;font-weight: 600;">
                        <span
                            class="input-group-text">{{ $settings_->where('key', 'currency')->first()->value ?? '' }}</span>
                    </div>
                    <label for="amount" class="form-label text-center d-block"><i class="bi bi-credit-card"></i>
                        Loan Amount</label>
                </div>
                <div class="features-section my-2">
                    <div class="row row-cols-2 row-cols-md-4 g-2">
                        <div class="col d-flex">
                            <div class="rounded-3 w-100">
                                <div class="card-body p-2">
                                    <div class="icon-wrapper text-center">
                                        <div class="noti-box mb-1 mx-auto text-bg-light h-auto w-auto rounded-3"
                                            x-text="amount">
                                            150000
                                        </div>
                                        <p class="fw-bold mb-0 text-dark" style="font-size:80%;color:#777">Amount To The
                                            Account</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col d-flex">
                            <div class="rounded-3 w-100">
                                <div class="card-body p-2">
                                    <div class="icon-wrapper text-center">
                                        <div class="noti-box mb-1 mx-auto text-bg-light h-auto w-auto rounded-3"
                                            x-text="monthly_principal" id="monthly_principal">
                                            11667
                                        </div>
                                        <p class="fw-bold mb-0 text-dark" style="font-size:80%;color:#777">Monthly Principal
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col d-flex">
                            <div class="rounded-3 w-100">
                                <div class="card-body p-2">
                                    <div class="icon-wrapper text-center">
                                        <div class="noti-box mb-1 mx-auto text-bg-light h-auto w-auto rounded-3"
                                            x-text="interest">
                                            750
                                        </div>
                                        <p class="fw-bold mb-0 text-dark" style="font-size:80%;color:#777">Monthly Interest
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col d-flex">
                            <div class="rounded-3 w-100">
                                <div class="card-body p-2">
                                    <div class="icon-wrapper text-center">
                                        <div class="noti-box mb-1 mx-auto text-bg-light h-auto w-auto rounded-3"
                                            x-text="monthly">
                                            6
                                        </div>
                                        <p class="fw-bold mb-0 text-dark" style="font-size:80%;color:#777">Loan Repayment
                                            Period</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border my-2"></div>
                <label for="" style="font-weight:bold;color:#000;"> &nbsp;Monthly Repayment</label>
                <p class="text-center mb-0 py-2" style="color:#000;"><span x-text="repayment"
                        style="font-weight:bold;">12367</span>
                    {{ $settings_->where('key', 'currency')->first()->value ?? '' }} (Principal plus interest 0.3% <span
                        x-text="interest">750</span> {{ $settings_->where('key', 'currency')->first()->value ?? '' }})</p>
                <div class="border my-2"></div>
                <div>

                    <input type="range" id="range" class="w-100" x-model="amount" step="1000" min="150000"
                        max="5000000" />
                    <div class="sjkd">
                        <div class="sjkd_line"></div>
                        <div class="sjkd_line"></div>
                        <div class="sjkd_line"></div>
                        <div class="sjkd_line"></div>
                        <div class="sjkd_line"></div>
                        <div class="sjkd_line"></div>
                        <div class="sjkd_line"></div>
                        <div class="sjkd_line"></div>
                        <div class="sjkd_line"></div>
                        <div class="clear"></div>
                    </div>
                    <label for="range" class="mb-2" style="font-weight:bold;color:#000;"><i
                            class=" bi bi-credit-card-2-back-fill"></i> Loan Amount</label>
                    <div class="d-flex justify-content-between">
                        <small style="color:black;font-weight: 500;">150,000</small>
                        <small style="color:black;font-weight: 500;">5,000,000</small>
                    </div>
                </div>
                <br>
                <label class="mb-2"><i class="bi bi-arrow-counterclockwise"></i> Loan Repayment</label>
                <div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group">
                    <input type="radio" class="btn-check" value="6" x-model="monthly" id="btnradio1">
                    <label class="btn btn-outline-success duration" for="btnradio1"
                        style="padding-top: 3px;">6months</label>

                    <input type="radio" class="btn-check" value="12" x-model="monthly" id="btnradio2">
                    <label class="btn btn-outline-success duration" for="btnradio2"
                        style="padding-top: 3px;">12months</label>

                    <input type="radio" class="btn-check" value="24" x-model="monthly" id="btnradio3"
                        autocomplete="off">
                    <label class="btn btn-outline-success duration" for="btnradio3"
                        style="padding-top: 3px;">24months</label>

                    <input type="radio" class="btn-check" value="36" x-model="monthly" id="btnradio4"
                        autocomplete="off">
                    <label class="btn btn-outline-success duration" for="btnradio4"
                        style="padding-top: 3px;">36months</label>

                    <input type="radio" class="btn-check" value="48" x-model="monthly" id="btnradio5"
                        autocomplete="off">
                    <label class="btn btn-outline-success duration" for="btnradio5"
                        style="padding-top: 3px;">48months</label>
                </div>
                <input type="hidden" name="data"
                    :value="JSON.stringify({ amount: amount, interest: interest, repayment: repayment, monthly: monthly })">
                <button type="button" class="btn btn-success w-100 rounded-pill my-3"
                    style="box-shadow:0px 1px 5px 0px #80c4db;--bs-btn-border-color:#80c4db;color:black !important;"
                    data-bs-toggle="modal" data-bs-target="#confirmLoan">Apply Immediately</button>

                <!-- <button type="submit" class="btn btn-success w-100 rounded-pill my-3" style="box-shadow:0px 1px 5px 0px #000000;--bs-btn-border-color:black;" onclick="return checkCredit();">Apply Immediately</button> -->
                <div class="mb-3 form-check text-center">
                    <input type="checkbox" class="form-check-input" id="agree"
                        style="font-size:20px;margin-left:5px;" checked>
                    <label class="form-check-label">
                        <small>Agree<span style="color:#fb6f00;" data-bs-toggle="modal"
                                data-bs-target="#staticBackdrop">《User Service Agreement》《Policy conditions》</span></small>
                    </label>
                </div>



                <p class="text-center">Loans are risky, borrowing needs to be cautious. Consume rationally and avoid
                    overdue.</p>
            </form>
        </div>
        <!--end Loan Form-->
    </div>

    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true" style="margin:0 auto;height:90%;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header modal-header--sticky" style="background-color:#f60005;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;
                        《User Service Agreement》
                    </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        style="color:white !important;background-color: red;box-shadow: 0px 1px 5px 0px #000000;"></button>
                </div>
                <div class="modal-body" x-init style="overflow: scroll;">

                    <p>Instalment Agreement</p>
                    <p>This agreement is entered into by and between the Lender and the Borrower (hereinafter referred to as
                        the "Parties"). The Parties agree to abide by the terms and conditions set forth in this agreement,
                        which is governed by the principles of equity, fairness, honesty, and reputation.</p>
                    <p>Article 1: Loan Form</p>
                    <p>To apply for a loan, the Borrower shall provide an secured ID card and complete the loan application
                        form.</p>
                    <p>Article 2: Premium Interest Rate</p>
                    <p>The interest rate, fees, and charges applicable to the loan shall not exceed 25% per annum.</p>
                    <p>Article 3: Loan Terms</p>
                    <p>During the loan tenure, the Borrower shall:</p>
                    <p>Pay interest on time.</p>
                    <p>Repay the principal amount on time.</p>
                    <p>If unable to repay the loan due to unforeseen circumstances, cooperate with the Lender to finalize
                        the payment.</p>
                    <p>Comply with all terms and conditions of this agreement.</p>
                    <p><br></p>
                    <p>Article 4: Loan Application</p>
                    <p><br></p>
                    <p>In the case of online borrowers without collateral, the Lender shall conduct a risk assessment based
                        on the Borrower's financial status. The Borrower shall provide proof of financial stability and
                        confirm their ability to repay the loan. If the loan cannot be repaid, the Borrower shall assist in
                        resolving the issue.</p>
                    <p><br></p>
                    <p>Article 5: Lending</p>
                    <p><br></p>
                    <p>Prior to granting a loan, the Lender shall review the following factors and make a decision based on
                        their assessment:</p>
                    <p><br></p>
                    <p>The Borrower's compliance with legal formalities and regulatory requirements.</p>
                    <p>The Borrower's payment history and financial position.</p>
                    <p>The Borrower's compliance with loan terms specified in this agreement.</p>
                    <p>Any adverse changes to the Borrower's business or financial position.</p>
                    <p>Article 6: Loan Use</p>
                    <p>The Borrower shall not use the loan for illegal activities. Failure to comply with this provision may
                        result in immediate repayment of the principal and interest, as well as legal consequences.</p>
                    <p>Article 7: Modification or Termination</p>
                    <p>Neither party shall modify or terminate this agreement without prior consent. If either party wishes
                        to terminate this agreement, they must notify the other party in writing and provide a reasonable
                        notice period.</p>
                    <p>Article 8: Dispute Resolution</p>
                    <p>The Parties agree to resolve disputes through negotiation. If negotiations fail, either party may
                        seek mediation through a local arbitration committee or bring the matter to a local court.</p>
                    <p>Article 9: Cancellation</p>
                    <p>If the Borrower cancels their loan, they shall pay a processing fee equal to 50% of the loan amount
                        as liquidation damage. The fee will be refunded after 10 working days.</p>
                    <p>Article 10: Effective Date</p>
                    <p>This agreement takes effect from the date of signing by both parties (including electronic
                        agreements). The text of this agreement has the same legal effect as a written document. Both
                        parties shall keep a copy of this agreement.<br></p>
                </div>
                <div class="d-grid modal-footer modal-footer--sticky"
                    style="margin:0 auto;width:100%;padding-top:0px; padding-bottom: 0px;display: inherit !important;box-shadow: 0px 1px 5px 0px #000000;">
                    <button class="btn btn-success rounded-3" data-bs-dismiss="modal" aria-label="Close"
                        style="width:100%;box-shadow: ;">Closure</button>
                </div>
            </div>
        </div>f
    </div>

    <div class="modal fade" id="confirmLoan" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" style="margin:0px auto;">
            <div class="modal-content">
                <div class="modal-header" style="background-color:#f60005;color:white;text-align: center;">
                    <h1 class="modal-title text-center" id="staticBackdropLabel"
                        style="color:white;font-size: 16px;text-align: center;">
                        Apply For A Loan
                    </h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        style="color:white !important;background-color: red;"></button>
                </div>
                <div class="modal-body" x-init>
                    <div class="am-popup-inner" style="color:black;">
                        <div class="am-popup-bd card" style="background: #ffffff;padding:10px;">
                            <div class="" style="font-size: 23px;font-weight: bold;text-align: center;">Loan Details
                                <div class="topline"></div>
                            </div>
                            <div class="rows col">
                                <div class="am-g">
                                    <div class="am-u-sm-12" style="text-align: center; padding: 10px 0;">
                                        <b class="f_number rll_number p_jkje"
                                            style="color:#f60005;font-size:30px;font-weight: bold;"
                                            id="loan_amount">xxx</b><span class="rll_symbol">
                                            {{ $settings_->where('key', 'currency')->first()->value ?? '' }}
                                        </span><br><span class="loan_title">Loan Amount</span>
                                        <div>
                                            <small><i class="fas fa-ticket-alt"></i>
                                                <sapn class="cop_text"></sapn>
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                <div class="am-g  col-xs-6" style="text-align: center;">
                                    <div class="col-xs-6" style="border-right:solid 1px #ececec;width:50%;float:left;">
                                        <b class="f_number jksj_number p_mqhk" id="repayment_amount">yyy</b>
                                        <span
                                            class="jksj_symbol">{{ $settings_->where('key', 'currency')->first()->value ?? '' }}
                                        </span>
                                        <br>
                                        <span class="loan_title">Repayment Amount
                                            <b>
                                                <small style="color: #bf2222" class="f_number p_del_cop"></small>
                                            </b>
                                        </span>
                                    </div>
                                    <div class="col-xs-6" style="width:50%;float:left;">
                                        <b class="f_number jksj_number p_jksj" id="monthly_amount"
                                            style="font-weight: bold;">xx</b>
                                        <span class="jksj_symbol" style="font-weight: bold;">Months</span>
                                        <br>
                                        <span class="loan_title">Loan Repayment</span>
                                    </div>
                                </div>
                            </div>
                            <div style="padding-top: 15px;font-weight: bold;color:rgba(0, 0, 0, 0.45)">
                                <hr />
                                <div class="col d-flex">
                                    <div class="col-xs-6" style="width:50%">Borrower</div>
                                    <div class="col-xs-6" style="width:50%;text-align:right;">
                                        {{ auth()->user()->member->id ?? '' }}</div>
                                </div>
                                <div class="col d-flex">
                                    <div class="col-xs-6" style="width:50%">Bank</div>
                                    <div class="col-xs-6" style="width:50%;text-align:right;">
                                        {{ auth()->user()->member->bank_name ?? '' }}</div>
                                </div>

                                <div class="col d-flex">
                                    <div class="col-xs-6" style="width:50%">Account</div>
                                    <div class="col-xs-6" style="width:50%;text-align:right;">