@extends('layouts.frontend')

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

@section('content')
    <div class="page-content py-0" style="margin-bottom:50px;">
        <!--start banner slider-->
        <!-- <div class="banner-slider1">
            @foreach($slides as $slide)
                <div class="banner-item">
                    <a href="#">
                        <img src="{{ asset($slide->feature_image) }}" class="img-fluid rounded-2"
                        alt="" > 
                    </a>
                </div>
            @endforeach
        </div> -->
       <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
            <div class="carousel-inner">
                @foreach($slides as $index => $slide)
                <div class="carousel-item @if($index==0) active @endif">
                  <img class="d-block w-100" src="{{ asset($slide->feature_image) }}" alt="First slide">
                </div>
                @endforeach
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>

        <!--end banner slider-->
        <!--start Loan Form-->
        
        <div class="card" style="padding:0px 10px 10px 10px;">
            <div class="row" style="text-align: center;margin-bottom: 0px;margin-bottom: 1px solid #ccc;">
                <span style="width:20%;text-align: center;">
                    <img src="{{asset('images/step1.png')}}" style="width:50px;">
                </span>
                <span style="width:20%;text-align: center;">
                    <img src="{{asset('images/arrow.png')}}" style="width:20px;margin-top:20px;">
                </span>
                <span style="width:20%;text-align: center;">
                    <img src="{{asset('images/step2.png')}}" style="width:50px;">
                </span>
                <span style="width:20%;text-align: center;">
                    <img src="{{asset('images/arrow.png')}}" style="width:20px;margin-top:20px;">
                </span>
                <span style="width:20%;text-align: center;">
                    <img src="{{asset('images/step3.png')}}" style="width:50px;">
                </span>

                <span style="width:28.33%;text-align: center;">
                    <span style="color:#1f7ba7;font-size: 8px;text-align: center;">Submit Application</span>
                </span>
                <span style="width:40.33%;text-align: center;">
                    <span style="color:#1f7ba7;font-size: 8px;text-align: center;">Get Guota</span>
                </span>
                <span style="width:23.33%;text-align: center;">
                    <span style="color:#1f7ba7;font-size: 7px;text-align: center;">Loan Now</span>
                </span>
            </div>
            <form 
                class="loan-form" 
                action="{{route('member.loan',auth()->id()??1)}}"
                method="POST"
                x-data="loaning" 
                x-init="$watch('amount', value => activeAmount(value))" 
                x-effect="activeMonthly(monthly)" 
                autocomplete="off">
                @csrf
                <div class="form-group">
                    <!-- <input type="hidden" name="interest_rate" value="0.0010"/> -->
                    <div class="input-group">
                        <input type="text" id="amount" class="form-control text-dark" min="80,000" max="5000000" x-mask="9999999" x-model="amount" style="text-align:center;font-weight:bold;font-size:150%;color:#1f7ba7;font-weight: 600; border-style: solid; border-color: #1f7ba7;padding:0px;">
                        <span class="input-group-text border-info  text-white" style="background-color:#1f7ba7;">
                                <!-- {{ $settings_->where('key', 'currency')->first()->value ?? '' }} -->
                                Edit
                        </span>
                    </div>
                    <label for="amount" class="text-center d-block" style="font-size: 11px;"><i class="bi bi-credit-card" style="margin-left:-10%;"></i> 
                    Loan Amount</label>
                </div>
                <div>
                    <input type="range" id="range" class="win10-thumb w-100" x-model="amount" step="10000" min="100,000" 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;margin-top:-10px;">80,000</small>
                        {{-- <small style="color:black;font-weight: 500;margin-top:-10px;">1,676,000</small>
                        <small style="color:black;font-weight: 500;margin-top:-10px;">3,377,000</small> --}}
                        <small style="color:black;font-weight: 500;margin-top:-10px;">5,000,000</small>
                    </div>
                </div>

                <div class="features-section my-2">
                    <div class="row row-cols-2 row-cols-md-4 g-2">
                        <div class="col d-flex" style="margin-top:0px;">
                            <div class="rounded-3 w-100">
                                <div class="card-body p-2" style="padding: 0px !important">
                                    <div class="icon-wrapper text-center">
                                        <div class="noti-box mb-1 mx-auto h-auto w-auto rounded-3" x-text="amount" style="background-color:  #1f7ba7;">
                                            80,000
                                        </div>
                                        <p class="fw-bold mb-0 text-dark" style="font-size:70%;color:#777">Amount To The Account</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col d-flex" style="margin-top:0px;">
                            <div class="rounded-3 w-100">
                                <div class="card-body p-2" style="padding: 0px !important">
                                    <div class="icon-wrapper text-center">
                                        <div class="noti-box mb-1 mx-auto h-auto w-auto rounded-3" x-text="monthly_principal" id="monthly_principal" style="background-color:  #1f7ba7;">
                                            11667
                                        </div>
                                        <p class="fw-bold mb-0 text-dark" style="font-size:70%;color:#777">Monthly Principal</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col d-flex" style="margin-top:0px;">
                            <div class="rounded-3 w-100">
                                <div class="card-body p-2" style="padding: 0px !important">
                                    <div class="icon-wrapper text-center">
                                        <div class="noti-box mb-1 mx-auto h-auto w-auto rounded-3" x-text="interest" style="background-color:  #1f7ba7;">
                                            800
                                        </div>
                                        <p class="fw-bold mb-0 text-dark" style="font-size:70%;color:#777">Monthly Interest</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col d-flex" style="margin-top:0px;">
                            <div class="rounded-3 w-100">
                                <div class="card-body p-2" style="padding: 0px !important">
                                    <div class="icon-wrapper text-center">
                                        <div class="noti-box mb-1 mx-auto  h-auto w-auto rounded-3" x-text="monthly" style="background-color:  #1f7ba7;">
                                            6
                                        </div>
                                        <p class="fw-bold mb-0 text-dark" style="font-size:70%;color:#777">Loan Repayment Period</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="border" style="margin:0px;"></div>
                <!-- <label for="" style="font-weight:bold;color:#000;"> &nbsp;Monthly Repayment</label> -->
                <p class="text-center mb-0 py-2" style="color:#000;font-size: 12px;"><span x-text="repayment" style="font-weight:bold;">12367</span> {{ $settings_->where('key', 'currency')->first()->value ?? '' }} (Principal plus interest <span id="interest_rate"></span>% <span x-text="interest">800</span> {{ $settings_->where('key', 'currency')->first()->value ?? '' }})</p>
                <div class="border" style="margin:0px;"></div>
                
                <label class="mb-2" style="font-size:10px !important;"><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-info 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-info 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-info 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-info 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-info 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, interest_rate:interest_rate})">

                <div class="form-check text-center" style="padding-left: 2px;margin-top:10px;" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
                    <input type="checkbox" class="form-check-input" id="agree" style="font-size:20px;margin-left:5px;" checked>
                    <label class="form-check-label">
                        <small>Content <span style="color:#fb6f00;" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Agreement <span style="font-weight:bold">Please Go over the protocol</span></small>
                    </label>
                </div>

                <button type="button" class="btn btn-primary w-100 rounded-pill my-3" style="box-shadow:0px 1px 5px 0px #000000;--bs-btn-border-color: #006abc !important;margin-top: 4px !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> -->
                
                <!-- <p class="text-center">Loans are risky, borrowing needs to be cautious. Consume rationally and avoid overdue.</p> -->
                
            </form>
             <div>   
                @foreach($images as $image)
                    <img src="{{asset($image->feature_image)}}" style="width:100%;margin-top:8px;">
                @endforeach
            </div>  

        </div>
        <!--end Loan Form-->

        <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:#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;
                         Agreement
                    </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 style="overflow: scroll;">
                        <h6>Loan Agreement</h6>

                        1. Conditions and Contracts:
                        <br/><br/>
                        (1) After the borrower receives the loan balance, it is not applicable to illegal things / gambling / drug bad behavior, etc.
                        <br/><br/>
                        (2) The proof of matter must be completed within 1 day. , if the borrower fails to buy insurance certification within the specified time.
                        Companies must submit documents for lawyers to intervene in the preliminary investigation. and will contact the guarantor in advance for investigation.
                        <br/><br/>
                        (3) After the new borrower is approved, it must have a guaranteed reserve fund or purchase credit insurance from the company.
                        In order to check whether the new customer can pay off the debt after getting the loan amount.
                        (For borrowers who have paid installments with the company, no mortgage or credit insurance is required.)
                        <br/><br/>
                        (4) After signing the contract If the company finds any abnormal behavior or blacklist.
                        The company will have the right to suspend the borrower's loan. and within 3 days to check and find a solution to the internal problem,
                        Otherwise, the company has the right to refuse this contract.
                        <br/><br/>
                        (5) Results from bank approval, if it is not convenient for each borrower to use the securities as collateral for the loan.
                        The company will be exposed to the risk of making loans to borrowers.<br/>
                        Therefore, the financial liquidity of the "borrower" needs to be checked.
                        Lenders must submit a loan amount deposit, which is approximately 5% - 10% of the loan amount.
                        <br/>
                        (depending on the credit department again) to create a credit history that demonstrates the lender's ability to pay off the loan.
                        <br/><br/>
                        (6) The Borrower undertakes that, if the Borrower agrees to the Agreement, if the Borrower fails to comply with the contract, for whatever reason,
                        The lender has the right to terminate the contract and require the borrower to pay principal and interest.
                        Borrowers are required to pay damages in various court costs including attorney fees and litigation.
                        If the borrower cancels the contract must pay 30% - 50% of the loan amount. paid to the lender.
                </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>
    @include('frontend.inc.agreement')

    <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:#1f7ba7;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;background-color: red; background-image: url(/images/deletes.png);" ></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:0px;">
                            <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:#1f7ba7;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">zz</b>
                                            <span class="jksj_symbol">Months</span>
                                            <br>
                                            <span class="loan_title">Loan Repayment</span>
                                        </div>
                                    </div>
                                </div>
                                {{-- <div style="padding: 15px 10px;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;">