@extends('layouts.frontend-master')
@section('title', 'Apply Loan')
@section('content')

    <div id="app">
        @if (!empty(auth()->user()))
            @php
                $member = auth()->user()->member ?? 0;
                $loan = \App\Models\Loan::where('member_id', $member->id ?? 0)
                    // ->where('is_member_information_completed', 0)
                    ->onlyTrashed()
                    ->orderBy('id', 'desc')
                    ->first();
            @endphp

            <div>
                <div class="dash--content  container--sidebar">
                    <header class="header-dashboard"></header>
                    <main class="main-dashboard">
                        <div class="d-flex justify-content-center flex-nowrap " style="color: rgb(0, 0, 0);">
                            <div class="Toastify"></div>
                            <div class="row">
                                <div class="col-12">
                                    <div class="container mb-3">
                                        <div class="d-flex justify-content-center ">
                                            <div class="d-flex justify-content-center">
                                                <div id="carouselExampleCaptions" class="carousel slide"
                                                    data-bs-ride="carousel">
                                                    <div class="carousel-indicators">
                                                        @foreach ($slides_ as $i => $slide)
                                                            <button type="button" data-bs-target="#carouselExampleCaptions"
                                                                data-bs-slide-to="{{ $i }}"
                                                                class="{{ $loop->first ? 'active' : '' }}"
                                                                aria-current="{{ $loop->first ? 'true' : 'false' }}"
                                                                aria-label="Slide {{ $i + 1 }}"></button>
                                                        @endforeach
                                                    </div>
                                                    <div class="carousel-inner">
                                                        @foreach ($slides_ as $slide)
                                                            <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                                                                <img src="{{ asset($slide->feature_image ?? '') }}"
                                                                    class="d-block w-100" alt=""
                                                                    style="border-radius: 0.5rem;">
                                                            </div>
                                                        @endforeach
                                                    </div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-center flex-nowrap" style="color: rgb(0, 0, 0);">
                                    <div class="row g-0 mx-auto">
                                        <div class=" col-md-6  mx-auto"
                                            style="background-color: rgb(237, 241, 255); padding: 1rem; border-top-left-radius: 1rem;">
                                            <p class=" lh-1 text-muted" style="font-size: 16px;">Loan Amount: {{ $settings_->where('key', 'currency')->first()->value ?? '' }}
                                                [[formatNumber(initAmount)]]
                                            </p>
                                            <div class="input-group mb-3"><select class="  fs-5 fw-semibold text-muted"
                                                    id="currency-select" form-select-focus-width="100"
                                                    style="transition: outline 0.25s; min-width: 90px; height: 48px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; border-color: rgb(222, 226, 230);">
                                                    <option value="{{ $settings_->where('key', 'currency')->first()->value ?? '' }}">{{ $settings_->where('key', 'currency')->first()->value ?? '' }}</option>

                                                </select>
                                                <input type="number" class="form-control fs-5 fw-semibold text-muted"
                                                    min="20000" max="1000000" value="20000" v-model="initAmount"
                                                    @input="inputRange">
                                            </div>
                                            <span class="range-slider__wrap">
                                                <input type="range" min="20000" max="1000000"
                                                    class="range-slider range-slider--danger" value="20000"
                                                    v-model="initAmount" @input="inputRange"></span>
                                            <div class="d-flex justify-content-between mb-0">
                                                <div class="mr-auto">
                                                    <p class=" lh-1 text-muted" style="font-size: 16px;">{{ $settings_->where('key', 'currency')->first()->value ?? '' }} 20,000
                                                    </p>
                                                </div>
                                                <div class="ml-auto">
                                                    <p class=" lh-1 text-muted" style="font-size: 16px;">{{ $settings_->where('key', 'currency')->first()->value ?? '' }} 1,000,000
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6 mx-auto"
                                            style="background-color: rgb(237, 241, 255); padding: 1rem; border-top-right-radius: 1rem;">
                                            <p class=" lh-1 text-muted" style="font-size: 16px !important;">Please
                                                choose a
                                                monthly
                                                payment options.</p>
                                            <div class="row d-flex justify-content-center monthss">
                                                 <div class="col-2" style="width:16% !important;"><button type="button"
                                                        :class="['btn btn-primary', activeMonth == 3 ? 'btn-danger' : '']"
                                                        @click="setMonth(3)">3 </button>
                                                </div>

                                                <div class="col-2" style="width:16% !important;"><button type="button"
                                                        :class="['btn btn-primary', activeMonth == 6 ? 'btn-danger' : '']"
                                                        @click="setMonth(6)">6 </button>
                                                </div>
                                                <div class="col-2" style="width:16% !important;"><button type="button"
                                                        :class="['btn btn-primary', activeMonth == 12 ? 'btn-danger' : '']"
                                                        @click="setMonth(12)">12</button>
                                                </div>
                                                <div class="col-2" style="width:16% !important;"><button type="button"
                                                        :class="['btn btn-primary', activeMonth == 24 ? 'btn-danger' : '']"
                                                        @click="setMonth(24)">24</button>
                                                </div>
                                                <div class="col-2" style="width:16% !important;"><button type="button"
                                                        :class="['btn btn-primary', activeMonth == 36 ? 'btn-danger' : '']"
                                                        @click="setMonth(36)">36</button>
                                                </div>
                                                <div class="col-2" style="width:16% !important;"><button type="button"
                                                        :class="['btn btn-primary', activeMonth == 48 ? 'btn-danger' : '']"
                                                        @click="setMonth(48)">48</button>
                                                </div>
                                                {{-- <div class="col-2" style="width:12.5% !important;"><button type="button"
                                                        :class="['btn btn-primary', activeMonth == 60 ? 'btn-danger' : '']"
                                                        @click="setMonth(60)">60</button>
                                                </div>
                                                <div class="col-2" style="width:12.5% !important;"><button type="button"
                                                        :class="['btn btn-primary', activeMonth == 84 ? 'btn-danger' : '']"
                                                        @click="setMonth(84)">84</button>
                                                </div>
                                                <div class="col-2" style="width:12.5% !important;"><button type="button"
                                                        :class="['btn btn-primary', activeMonth == 96 ? 'btn-danger' : '']"
                                                        @click="setMonth(96)">96</button>
                                                </div> --}}
                                            </div><br><span class="fs-5 fw-semibold text-muted">Payment option within [[activeMonth]]
                                                months.</span>
                                        </div>
                                        
                                        <div class="col-md-12  mx-auto" align="center"
                                            style="background-color: rgb(237, 241, 255); padding: 1rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem;">
                                            <div class=""
                                                style="background: rgb(248, 249, 250); width: 330px; border-radius: 1rem; padding: 0.5rem;">
                                                <div>
                                                    <p class=" lh-1 text-muted " style="font-size: 14px;">Interest
                                                        Rate<br>
                                                        <span class="fw-semibold text-left"> [[interest_rate]]
                                                            %</span><br>
                                                        <br>
                                                        <span class=" lh-1 text-muted ">Interest Amount</span><br>
                                                        <span class="lh-1 fw-semibold"> {{ $settings_->where('key', 'currency')->first()->value ?? '' }}
                                                            [[formatNumber(interestPerMonth)]]
                                                            &nbsp; <span class="lh-1 fw-normal">= (Loan:
                                                                [[formatNumber(initAmount)]] x
                                                                [[interest_rate]]%)</span></span><br><br>
                                                        <span class=" lh-1 text-muted">Monthly Repayment
                                                            Amount</span><br>
                                                        <span class="fw-semibold">{{ $settings_->where('key', 'currency')->first()->value ?? '' }}
                                                            [[formatNumber(initAmount/activeMonth)]]
                                                            <span class="fw-normal"> =
                                                                (Loan: [[formatNumber(initAmount)]] ÷ [[activeMonth]]
                                                                months)</span>
                                                        </span>
                                                        <br>
                                                        <br>
                                                        <span class=" lh-1 text-muted">Total Installment
                                                            Amount</span><br>
                                                        <span class="fw-semibold">
                                                            {{ $settings_->where('key', 'currency')->first()->value ?? '' }}
                                                            [[formatNumber(repayment)]]
                                                            <span class="fw-normal"> =
                                                                ([[formatNumber(initAmount/activeMonth)]] +
                                                                [[formatNumber(interestPerMonth)]])
                                                            </span>
                                                        </span>
                                                    </p>
                                                </div>
                                                <div style="display: flex; justify-content: center; align-items: center;">
                                                    <div class="form-check">
                                                        <input type="checkbox" id="isAgree"
                                                            class="form-check-input"><label title="" for="isAgree"
                                                            class="form-check-label">
                                                            <p class="lh-1 text-muted"
                                                                style="font-size: 14px;margin-top:7px;">Agree
                                                                <a href="#" data-bs-toggle="modal"
                                                                    data-bs-target="#aggrementPolocy">[Service and
                                                                    Policy
                                                                    Agreement]</a>
                                                            </p>
                                                        </label>
                                                    </div>
                                                </div>
                                                <div id="submitBTN">
                                                    <button type='button' class='btn btn-primary'
                                                        onclick='showAlert()'>APPLY NOW</button>
                                                </div>
                                                <p><br/>
                                                <b>Special Offer:</b><br/>
                                                    Home Loan Solution Online Offer - Lucky Reward for Borrowers!<br/>
                                                    Borrowers can receive a chance to win up to {{ $settings_->where('key', 'currency')->first()->value ?? '' }}10  - {{ $settings_->where('key', 'currency')->first()->value ?? '' }}  70,000 in the Grand Lucky Draw! You could win an iPhone 16 Pro Max (2025).
                                                    <br/><br/>
                                                    <b>How to Participate:</b><br/>
                                                    To qualify for the bonus, simply register and click to select a box. The offer will be sent directly to the borrower’s bank account immediately.<br/><br/>

                                                    Good luck!<br/><br/><br/>
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </main>

                </div>
            </div>

        @endif
        @if (empty(auth()->user()))
            <main class="main-landing">
                <div class="content-landing-primary">
                    <div class="row">
                        <div class="col-12" style="max-width: 870px; margin: auto">
                            <div class="container mb-3">
                                <div class="d-flex justify-content-center">
                                    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
                                        <div class="carousel-indicators">
                                            <button type="button" data-bs-target="#carouselExampleCaptions"
                                                data-bs-slide-to="0" class="active" aria-current="true"
                                                aria-label="Slide 1"></button>
                                            <button type="button" data-bs-target="#carouselExampleCaptions"
                                                data-bs-slide-to="1" aria-label="Slide 2"></button>
                                            <button type="button" data-bs-target="#carouselExampleCaptions"
                                                data-bs-slide-to="2" aria-label="Slide 3"></button>
                                        </div>
                                        <div class="carousel-inner">
                                            @foreach ($slides_ as $slide)
                                                <div class="carousel-item active">
                                                    <img src="{{ asset($slide->feature_image ?? '') }}"
                                                        class="d-block w-100" alt=""
                                                        style="border-radius: 0.5rem;">
                                                </div>
                                            @endforeach
                                        </div>
                                        <!-- <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                                                                              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="#carouselExampleCaptions"
                                                                              data-bs-slide="next">
                                                                              <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                                                              <span class="visually-hidden">Next</span>
                                                                            </button> -->
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-center flex-nowrap" style="color: rgb(0, 0, 0);">
                                <div class="row g-0 mx-auto">
                                    <div class=" col-md-6  mx-auto"
                                        style="background-color: rgb(237, 241, 255); padding: 1rem; border-top-left-radius: 1rem;">
                                        <p class=" lh-1 text-muted" style="font-size: 16px;">Loan Amount: {{ $settings_->where('key', 'currency')->first()->value ?? '' }}
                                            [[formatNumber(initAmount)]]
                                        </p>
                                        <div class="input-group mb-3"><select class="  fs-5 fw-semibold text-muted"
                                                id="currency-select" form-select-focus-width="100"
                                                style="transition: outline 0.25s; min-width: 90px; height: 48px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; border-color: rgb(222, 226, 230);">
                                                <option value="{{ $settings_->where('key', 'currency')->first()->value ?? '' }}">{{ $settings_->where('key', 'currency')->first()->value ?? '' }}</option>

                                            </select>
                                            <input type="number" class="form-control fs-5 fw-semibold text-muted"
                                                min="20000" max="1000000" value="20000" v-model="initAmount"
                                                @input="inputRange">
                                        </div>
                                        <span class="range-slider__wrap">
                                            <input type="range" min="20000" max="1000000"
                                                class="range-slider range-slider--danger" value="20000"
                                                v-model="initAmount" @input="inputRange"></span>
                                        <div class="d-flex justify-content-between mb-0">
                                            <div class="mr-auto">
                                                <p class=" lh-1 text-muted" style="font-size: 16px;">{{ $settings_->where('key', 'currency')->first()->value ?? '' }} 20,000</p>
                                            </div>
                                            <div class="ml-auto">
                                                <p class=" lh-1 text-muted" style="font-size: 16px;">{{ $settings_->where('key', 'currency')->first()->value ?? '' }} 1,000,000</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mx-auto"
                                        style="background-color: rgb(237, 241, 255); padding: 1rem; border-top-right-radius: 1rem;">
                                        <p class=" lh-1 text-muted" style="font-size: 16px !important;">Please choose a
                                            monthly
                                            payment option.</p>
                                        <div class="row d-flex justify-content-center">
                                            <div class="col-2"><button type="button"
                                                    :class="['btn btn-primary', activeMonth == 6 ? 'btn-danger' : '']"
                                                    @click="setMonth(6)">6</button>
                                            </div>
                                            <div class="col-2"><button type="button"
                                                    :class="['btn btn-primary', activeMonth == 12 ? 'btn-danger' : '']"
                                                    @click="setMonth(12)">12</button>
                                            </div>
                                            <div class="col-2"><button type="button"
                                                    :class="['btn btn-primary', activeMonth == 24 ? 'btn-danger' : '']"
                                                    @click="setMonth(24)">24</button>
                                            </div>
                                            <div class="col-2"><button type="button"
                                                    :class="['btn btn-primary', activeMonth == 36 ? 'btn-danger' : '']"
                                                    @click="setMonth(36)">36</button>
                                            </div>
                                            <div class="col-3"><button type="button"
                                                    :class="['btn btn-primary', activeMonth == 48 ? 'btn-danger' : '']"
                                                    @click="setMonth(48)">48</button>
                                            </div>
                                        </div><br><span class="fs-5 fw-semibold text-muted">Payment option within 6
                                            months.</span>
                                    </div>
                                    <div class="col-md-12  mx-auto" align="center"
                                        style="background-color: rgb(237, 241, 255); padding: 1rem; border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem;">
                                        <div class=""
                                            style="background: rgb(248, 249, 250); width: 330px; border-radius: 1rem; padding: 0.5rem;">
                                            <div>
                                                <p class=" lh-1 text-muted " style="font-size: 14px;">Interest
                                                    Rate<br>
                                                    <span class="fw-semibold text-left"> [[interest_rate]] %</span><br>
                                                    <br>
                                                    <span class=" lh-1 text-muted ">Interest Amount</span><br>
                                                    <span class="lh-1 fw-semibold"> {{ $settings_->where('key', 'currency')->first()->value ?? '' }} [[formatNumber(interestPerMonth)]]
                                                        &nbsp; <span class="lh-1 fw-normal">= (Loan:
                                                            [[formatNumber(initAmount)]] x
                                                            [[interest_rate]]%)</span></span><br><br>
                                                    <span class=" lh-1 text-muted">Monthly Repayment Amount</span><br>
                                                    <span class="fw-semibold">{{ $settings_->where('key', 'currency')->first()->value ?? '' }} [[formatNumber(repayment)]]
                                                        <span class="fw-normal"> =
                                                            (Loan: [[formatNumber(initAmount)]] ÷ [[activeMonth]]
                                                            months)</span>
                                                    </span>
                                                    <br>
                                                    <br>
                                                    <span class=" lh-1 text-muted">Total Installment
                                                        Amount</span><br>
                                                    <span class="fw-semibold">
                                                        {{ $settings_->where('key', 'currency')->first()->value ?? '' }}
                                                        [[formatNumber(initAmount)]]
                                                        <span class="fw-normal"> =
                                                            ([[formatNumber(repayment)]] +
                                                            [[formatNumber(interestPerMonth)]])
                                                        </span>
                                                    </span>
                                                </p>
                                            </div>
                                            <!--<div style="display: flex; justify-content: center; align-items: center;">
                                                                    <div class="form-check">
                                                                        <input type="checkbox" id="isAgree" class="form-check-input"><label
                                                                            title="" for="isAgree" class="form-check-label">
                                                                            <p class="lh-1 text-muted" style="font-size: 14px;">Agree <a
                                                                                    href="#" data-bs-toggle="modal"
                                                                                    data-bs-target="#aggrementPolocy">[Service and Policy
                                                                                    Agreement]</a></p>
                                                                        </label>
                                                                    </div>
                                                                </div>-->
                                            <a href="{{ route('signin') }}" class="btn btn-primary">APPLY NOW</a>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

            </main>
        @endif
        <!-- Modal  Apply loan-->
        <div class="modal fade" id="Apply_loan" tabindex="-1" aria-labelledby="Apply_loanLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <form method="POST" action="{{ route('member.loan', auth()->id() ?? 0) }}">
                    @csrf
                    <input type="hidden"name="amount" :value="initAmount">
                    <input type="hidden" id="interestRate" name="interest" :value="interest_rate">
                    <input type="hidden" id="loan_period" name="loan_period" :value="activeMonth">
                    <div class="modal-content">
                        <div class="modal-header">
                            <div class="modal-title h4"><svg aria-hidden="true" focusable="false" data-prefix="fas"
                                    data-icon="circle-question"
                                    class="svg-inline--fa fa-circle-question fa-1x text-success" role="img"
                                    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                                    <path fill="currentColor"
                                        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z">
                                    </path>
                                </svg>&nbsp; Confirm Your Loan Application</div><button type="button" class="btn-close"
                                aria-label="Close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row loan--confirm-container mt-0">
                                <div class="col-sm-12">
                                    <div class="d-flex justify-content-between">
                                        <div class="mr-auto ">
                                            <p class="fs-7 lh-1 fw-semibold text-muted">Loan Amount</p>
                                        </div>
                                        <div class="ml-auto ">
                                            <p class="fs-5 lh-1 fw-bold text-danger">[[formatNumber(initAmount)]] {{ $settings_->where('key', 'currency')->first()->value ?? '' }} </p>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="mr-auto ">
                                            <p class="fs-6 lh-1 fw-normal text-muted">Payment option within</p>
                                        </div>
                                        <div class="ml-auto ">
                                            <p class="fs-6 lh-1 fw-semibold text-muted">[[activeMonth]] months</p>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="mr-auto ">
                                            <p class="fs-6 lh-1 fw-normal text-muted">Interest Rate</p>
                                        </div>
                                        <div class="ml-auto ">
                                            <p class="fs-6 lh-1 fw-semibold text-muted">[[interest_rate]] %</p>
                                        </div>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <div class="mr-auto ">
                                            <p class="fs-6 lh-1 fw-normal text-muted">Monthly Repayment Amount</p>
                                        </div>
                                        <div class="ml-auto ">
                                            <p class="fs-6 lh-1 fw-bold text-danger">[[formatNumber(repayment)]] {{ $settings_->where('key', 'currency')->first()->value ?? '' }} </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer" style="display: flex; justify-content: center;"><button type="submit"
                                onclick="this.form.submit();this.disabled = true;" class="btn btn-primary">CONFIRM LOAN
                                APPLICATION</button></div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Modal  withdrawal-->
        <div class="modal fade" id="aggrementPolocy" tabindex="-1" aria-labelledby="aggrementPolocyLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <div class="modal-title h4"><svg aria-hidden="true" focusable="false" data-prefix="fas"
                                data-icon="book" class="svg-inline--fa fa-book fa-1x text-success" role="img"
                                xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
                                <path fill="currentColor"
                                    d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z">
                                </path>
                            </svg>&nbsp; Service and Policy Agreement</div>
                        <button type="button" class="btn-close" data-bs-dismiss="modal">
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="container">
                            <div>
                                <div class="row">
                                    <div class="col-sm-12">
                                        <p class="h3 fw-bold  lh-1 f text-center">SERVICE AND POLICY AGREEMENT</p>
                                        {{-- <p class="fs-5 lh-1 fw-bold text-center">With Global Financing.</p> --}}
                                        <br>
                                    </div>
                                    <p class="fs-6 lh-1 fw-normal text-left">1. Parties; Party A as the “Lender” and Party
                                        B as
                                        the “Borrower”.</p>
                                    <p class="fs-6 lh-1 fw-normal text-left">2. The Party A agrees loaning certain monies
                                        (the
                                        “Loan”) to the Party B, and the Party B repaying the Loan to the Party A, the
                                        Parties
                                        agree to keep, perform and fulfil the promises and conditions set out in this Loan
                                        Agreement.</p>
                                    <p class="fs-6 lh-1 fw-normal text-left">3. The Party B agrees and allows Party A to
                                        receive information related to the Loan Agreement, agreement and documents related
                                        to
                                        the Loan Agreement. Party A is allowed to disclose to any third party any
                                        information
                                        relating to the Party B and/or related in connection with the contract, Loan
                                        Agreement
                                        and/or other relevant documents at any when is Party A decision right and necessary?
                                        Without obtaining the consent of the Party B. Party B agrees that the foregoing
                                        information may be used, encrypted, transmitted and stored by Party A and its
                                        management
                                        company, its branches, subsidiaries and member companies’ other assets of Party A.
                                    </p>
                                    <p class="fs-6 lh-1 fw-normal text-left">4. Party B commits and confirms that all
                                        information, data, documents that Party B goods supplied to under the provisions of
                                        this
                                        contract are under the management of legal use, use and possession of the Party B;
                                        true;
                                        correct on all facets and no information is hidden and personal loan maximum
                                        approval
                                        limit is not more than 12 to 48 times of net income.</p>
                                    <p class="fs-6 lh-1 fw-normal text-left">5. When an online borrower has no collateral,
                                        the
                                        lender assumes the risk of the loan and the Party B must provide the Party A with
                                        their
                                        financial status to prove its ability to repay the debt in the future. Party B will
                                        withdraw the full loan amount.</p>
                                    <p class="fs-6 lh-1 fw-normal text-left">6. According to the qualification of each
                                        applicant and or setting a credit limit and or the interest rate received depend on
                                        the
                                        loan application document and or the terms and conditions within Party A, however,
                                        any
                                        such approval shall be at the discretion of the Party A.</p>
                                    <p class="fs-6 lh-1 fw-normal text-left">7. Regardless of any or all installments, the
                                        Party A has the right to collect interest during the default period, rate at the
                                        Party A
                                        deemed appropriate, but not exceeding the maximum rate as the Party A has the right
                                        to
                                        collect legally and you will still be charged a debt collection fee at the rate of
                                        payment schedule.</p>
                                    <p class="fs-6 lh-1 fw-normal text-left">8. Party B can know the preliminary approval
                                        results when submitting a loan application.</p>
                                    <p class="fs-6 lh-1 fw-normal text-left">9. If Party B has been approved for the loan
                                        and
                                        Party B wishes to cancel the contract through the online platform, Party B needs to
                                        pay
                                        a contract termination fee of 30% of the approved loan. If the Party B fails to
                                        comply
                                        with the conditions of this contract, the Party B shall be responsible for all
                                        losses
                                        suffered by the Party A due to such breach of contract. Includes all charges for
                                        warnings, default charges and damages. Both Parties have always read and understood
                                        the
                                        content of the contract and signed it accordingly, this Loan Agreement will have
                                        legal
                                        effect as an agreement between the two Parties.</p>
                                    <p class="fs-6 lh-1 fw-normal text-left">10. Total amount of the loan and installment
                                        repayment is not more than 24% per year. The Party A reserves the right to use the
                                        Party
                                        A internal rules and policies approving the credit line, or reject the can request
                                        including the approval of special interest rates however, if it is found that the
                                        Party
                                        B qualifications do not meet the criteria and conditions that the company set forth
                                        at
                                        any time and for any reason the Party B agrees to allow the Party have the right to
                                        change the interest rate includes the credit line usage fee that the Party B will
                                        have
                                        to pay to the Party A. The interest rate includes such fees shall not exceed the
                                        maximum
                                        rate required by law.</p>
                                    <p class="fs-6 lh-1 fw-normal text-left">11. The Party B will not make any claim
                                        against
                                        insurance of any claim for any loss of any nature which substance is due to Party A
                                        unilaterally terminating the contract according to the terms of this Agreement.</p>
                                    <p class="fs-6 lh-1 fw-normal text-left">12. Debt collection expense of the installment
                                        repayment by bank deposit, adhere payment schedule.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">I AGREE</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script')
    <script src="https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.min.js"></script>


    <script>
        const app = Vue.createApp({
            delimiters: ['[[', ']]'],
            data() {
                return {
                    initAmount: 20000,
                    month: 3,
                    activeMonth: 3,
                    interestPerMonth: 20000 * 0.005,
                    monthly_principal: (20000 / 3).toFixed(2),
                    repayment: ((20000 / 3) + (20000 * 0.5 / 100)).toFixed(2),
                    interest_rate: 0.5,
                    // totalAmount: 20000,
                }
            },
            methods: {
                inputRange(event) {
                    this.initAmount = event.target.value;
                    if (this.initAmount > 1000000) {
                        this.initAmount = 1000000;
                        jSuites.notification({
                            error: 1,
                            name: '',
                            message: "Loan amount should be between 20,000-1,000,000 {{ $settings_->where('key', 'currency')->first()->value ?? '' }}",
                        });
                    }
                    this.monthly_principal = (this.initAmount / this.month).toFixed(2);
                    this.interestPerMonth = this.initAmount * this.interest_rate / 100;
                    // this.totalAmount = this.repayment + this.interestPerMonth.toFixed(2);
                    this.repayment = ((event.target.value / this.month) + (event.target.value * this.interest_rate /
                        100)).toFixed(2);
                },

                setMonth(month) {
                    this.month = month;
                    this.activeMonth = month;
                    this.repayment = ((this.initAmount / this.month) + (this.initAmount * this.interest_rate /
                        100)).toFixed(2);
                    this.monthly_principal = (this.initAmount / this.month).toFixed(2);
                    // this.totalAmount = this.repayment + this.interestPerMonth.toFixed(2);
                },
                formatNumber(value) {
                    return new Intl.NumberFormat().format(value);
                }
            }
        })
        app.mount('#app')
    </script>
    <script>
        $(function() {
            $('.close').on('click', function() {
                $('#term').hide();
            });

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

            $('#usergreement').on('click', function() {
                $('#agreement').show();
            });
        });
    </script>
    <script src="https://jsuites.net/v4/jsuites.js"></script>
    <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" />

    <script type="text/javascript">
        $('#isAgree').change(function() {
            if ($("#isAgree").is(":checked") == true) {
                $('#submitBTN').html(
                    "<button type='button' class='btn btn-primary' data-bs-toggle='modal' data-bs-target='#Apply_loan'>APPLY NOW</button>"
                );
            } else {
                $('#submitBTN').html(
                    "<button type='button' class='btn btn-primary' onclick='showAlert();'>APPLY NOW</button>");
            }
        });

        function showAlert() {
            jSuites.notification({
                error: 1,
                name: 'Agreement Required',
                message: 'Please agree with our Service & Policy Agreement!!',
            });
        }
    </script>
@endpush
@push('styles')
    <style type="text/css">
        :root,
        :host {
            --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Solid";
            --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Regular";
            --fa-font-light: normal 300 1em/1 "Font Awesome 6 Light";
            --fa-font-thin: normal 100 1em/1 "Font Awesome 6 Thin";
            --fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";
            --fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 6 Sharp";
            --fa-font-sharp-regular: normal 400 1em/1 "Font Awesome 6 Sharp";
            --fa-font-sharp-light: normal 300 1em/1 "Font Awesome 6 Sharp";
            --fa-font-sharp-thin: normal 100 1em/1 "Font Awesome 6 Sharp";
            --fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
        }

        svg:not(:root).svg-inline--fa,
        svg:not(:host).svg-inline--fa {
            overflow: visible;
            box-sizing: content-box;
        }

        .svg-inline--fa {
            display: var(--fa-display, inline-block);
            height: 1em;
            overflow: visible;
            vertical-align: -0.125em;
        }

        .svg-inline--fa.fa-2xs {
            vertical-align: 0.1em;
        }

        .svg-inline--fa.fa-xs {
            vertical-align: 0em;
        }

        .svg-inline--fa.fa-sm {
            vertical-align: -0.0714285705em;
        }

        .svg-inline--fa.fa-lg {
            vertical-align: -0.2em;
        }

        .svg-inline--fa.fa-xl {
            vertical-align: -0.25em;
        }

        .svg-inline--fa.fa-2xl {
            vertical-align: -0.3125em;
        }

        .svg-inline--fa.fa-pull-left {
            margin-right: var(--fa-pull-margin, 0.3em);
            width: auto;
        }

        .svg-inline--fa.fa-pull-right {
            margin-left: var(--fa-pull-margin, 0.3em);
            width: auto;
        }

        .svg-inline--fa.fa-li {
            width: var(--fa-li-width, 2em);
            top: 0.25em;
        }

        .svg-inline--fa.fa-fw {
            width: var(--fa-fw-width, 1.25em);
        }

        .fa-layers svg.svg-inline--fa {
            bottom: 0;
            left: 0;
            margin: auto;
            position: absolute;
            right: 0;
            top: 0;
        }

        .fa-layers-counter,
        .fa-layers-text {
            display: inline-block;
            position: absolute;
            text-align: center;
        }

        .fa-layers {
            display: inline-block;
            height: 1em;
            position: relative;
            text-align: center;
            vertical-align: -0.125em;
            width: 1em;
        }

        .fa-layers svg.svg-inline--fa {
            -webkit-transform-origin: center center;
            transform-origin: center center;
        }

        .fa-layers-text {
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            -webkit-transform-origin: center center;
            transform-origin: center center;
        }

        .fa-layers-counter {
            background-color: var(--fa-counter-background-color, #ff253a);
            border-radius: var(--fa-counter-border-radius, 1em);
            box-sizing: border-box;
            color: var(--fa-inverse, #fff);
            line-height: var(--fa-counter-line-height, 1);
            max-width: var(--fa-counter-max-width, 5em);
            min-width: var(--fa-counter-min-width, 1.5em);
            overflow: hidden;
            padding: var(--fa-counter-padding, 0.25em 0.5em);
            right: var(--fa-right, 0);
            text-overflow: ellipsis;
            top: var(--fa-top, 0);
            -webkit-transform: scale(var(--fa-counter-scale, 0.25));
            transform: scale(var(--fa-counter-scale, 0.25));
            -webkit-transform-origin: top right;
            transform-origin: top right;
        }

        .fa-layers-bottom-right {
            bottom: var(--fa-bottom, 0);
            right: var(--fa-right, 0);
            top: auto;
            -webkit-transform: scale(var(--fa-layers-scale, 0.25));
            transform: scale(var(--fa-layers-scale, 0.25));
            -webkit-transform-origin: bottom right;
            transform-origin: bottom right;
        }

        .fa-layers-bottom-left {
            bottom: var(--fa-bottom, 0);
            left: var(--fa-left, 0);
            right: auto;
            top: auto;
            -webkit-transform: scale(var(--fa-layers-scale, 0.25));
            transform: scale(var(--fa-layers-scale, 0.25));
            -webkit-transform-origin: bottom left;
            transform-origin: bottom left;
        }

        .fa-layers-top-right {
            top: var(--fa-top, 0);
            right: var(--fa-right, 0);
            -webkit-transform: scale(var(--fa-layers-scale, 0.25));
            transform: scale(var(--fa-layers-scale, 0.25));
            -webkit-transform-origin: top right;
            transform-origin: top right;
        }

        .fa-layers-top-left {
            left: var(--fa-left, 0);
            right: auto;
            top: var(--fa-top, 0);
            -webkit-transform: scale(var(--fa-layers-scale, 0.25));
            transform: scale(var(--fa-layers-scale, 0.25));
            -webkit-transform-origin: top left;
            transform-origin: top left;
        }

        .fa-1x {
            font-size: 1em;
        }

        .fa-2x {
            font-size: 2em;
        }

        .fa-3x {
            font-size: 3em;
        }

        .fa-4x {
            font-size: 4em;
        }

        .fa-5x {
            font-size: 5em;
        }

        .fa-6x {
            font-size: 6em;
        }

        .fa-7x {
            font-size: 7em;
        }

        .fa-8x {
            font-size: 8em;
        }

        .fa-9x {
            font-size: 9em;
        }

        .fa-10x {
            font-size: 10em;
        }

        .fa-2xs {
            font-size: 0.625em;
            line-height: 0.1em;
            vertical-align: 0.225em;
        }

        .fa-xs {
            font-size: 0.75em;
            line-height: 0.0833333337em;
            vertical-align: 0.125em;
        }

        .fa-sm {
            font-size: 0.875em;
            line-height: 0.0714285718em;
            vertical-align: 0.0535714295em;
        }

        .fa-lg {
            font-size: 1.25em;
            line-height: 0.05em;
            vertical-align: -0.075em;
        }

        .fa-xl {
            font-size: 1.5em;
            line-height: 0.0416666682em;
            vertical-align: -0.125em;
        }

        .fa-2xl {
            font-size: 2em;
            line-height: 0.03125em;
            vertical-align: -0.1875em;
        }

        .fa-fw {
            text-align: center;
            width: 1.25em;
        }

        .fa-ul {
            list-style-type: none;
            margin-left: var(--fa-li-margin, 2.5em);
            padding-left: 0;
        }

        .fa-ul>li {
            position: relative;
        }

        .fa-li {
            left: calc(var(--fa-li-width, 2em) * -1);
            position: absolute;
            text-align: center;
            width: var(--fa-li-width, 2em);
            line-height: inherit;
        }

        .fa-border {
            border-color: var(--fa-border-color, #eee);
            border-radius: var(--fa-border-radius, 0.1em);
            border-style: var(--fa-border-style, solid);
            border-width: var(--fa-border-width, 0.08em);
            padding: var(--fa-border-padding, 0.2em 0.25em 0.15em);
        }

        .fa-pull-left {
            float: left;
            margin-right: var(--fa-pull-margin, 0.3em);
        }

        .fa-pull-right {
            float: right;
            margin-left: var(--fa-pull-margin, 0.3em);
        }

        .fa-beat {
            -webkit-animation-name: fa-beat;
            animation-name: fa-beat;
            -webkit-animation-delay: var(--fa-animation-delay, 0s);
            animation-delay: var(--fa-animation-delay, 0s);
            -webkit-animation-direction: var(--fa-animation-direction, normal);
            animation-direction: var(--fa-animation-direction, normal);
            -webkit-animation-duration: var(--fa-animation-duration, 1s);
            animation-duration: var(--fa-animation-duration, 1s);
            -webkit-animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            -webkit-animation-timing-function: var(--fa-animation-timing,
                    ease-in-out);
            animation-timing-function: var(--fa-animation-timing, ease-in-out);
        }

        .fa-bounce {
            -webkit-animation-name: fa-bounce;
            animation-name: fa-bounce;
            -webkit-animation-delay: var(--fa-animation-delay, 0s);
            animation-delay: var(--fa-animation-delay, 0s);
            -webkit-animation-direction: var(--fa-animation-direction, normal);
            animation-direction: var(--fa-animation-direction, normal);
            -webkit-animation-duration: var(--fa-animation-duration, 1s);
            animation-duration: var(--fa-animation-duration, 1s);
            -webkit-animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            -webkit-animation-timing-function: var(--fa-animation-timing,
                    cubic-bezier(0.28, 0.84, 0.42, 1));
            animation-timing-function: var(--fa-animation-timing,
                    cubic-bezier(0.28, 0.84, 0.42, 1));
        }

        .fa-fade {
            -webkit-animation-name: fa-fade;
            animation-name: fa-fade;
            -webkit-animation-delay: var(--fa-animation-delay, 0s);
            animation-delay: var(--fa-animation-delay, 0s);
            -webkit-animation-direction: var(--fa-animation-direction, normal);
            animation-direction: var(--fa-animation-direction, normal);
            -webkit-animation-duration: var(--fa-animation-duration, 1s);
            animation-duration: var(--fa-animation-duration, 1s);
            -webkit-animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            -webkit-animation-timing-function: var(--fa-animation-timing,
                    cubic-bezier(0.4, 0, 0.6, 1));
            animation-timing-function: var(--fa-animation-timing,
                    cubic-bezier(0.4, 0, 0.6, 1));
        }

        .fa-beat-fade {
            -webkit-animation-name: fa-beat-fade;
            animation-name: fa-beat-fade;
            -webkit-animation-delay: var(--fa-animation-delay, 0s);
            animation-delay: var(--fa-animation-delay, 0s);
            -webkit-animation-direction: var(--fa-animation-direction, normal);
            animation-direction: var(--fa-animation-direction, normal);
            -webkit-animation-duration: var(--fa-animation-duration, 1s);
            animation-duration: var(--fa-animation-duration, 1s);
            -webkit-animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            -webkit-animation-timing-function: var(--fa-animation-timing,
                    cubic-bezier(0.4, 0, 0.6, 1));
            animation-timing-function: var(--fa-animation-timing,
                    cubic-bezier(0.4, 0, 0.6, 1));
        }

        .fa-flip {
            -webkit-animation-name: fa-flip;
            animation-name: fa-flip;
            -webkit-animation-delay: var(--fa-animation-delay, 0s);
            animation-delay: var(--fa-animation-delay, 0s);
            -webkit-animation-direction: var(--fa-animation-direction, normal);
            animation-direction: var(--fa-animation-direction, normal);
            -webkit-animation-duration: var(--fa-animation-duration, 1s);
            animation-duration: var(--fa-animation-duration, 1s);
            -webkit-animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            -webkit-animation-timing-function: var(--fa-animation-timing,
                    ease-in-out);
            animation-timing-function: var(--fa-animation-timing, ease-in-out);
        }

        .fa-shake {
            -webkit-animation-name: fa-shake;
            animation-name: fa-shake;
            -webkit-animation-delay: var(--fa-animation-delay, 0s);
            animation-delay: var(--fa-animation-delay, 0s);
            -webkit-animation-direction: var(--fa-animation-direction, normal);
            animation-direction: var(--fa-animation-direction, normal);
            -webkit-animation-duration: var(--fa-animation-duration, 1s);
            animation-duration: var(--fa-animation-duration, 1s);
            -webkit-animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            -webkit-animation-timing-function: var(--fa-animation-timing, linear);
            animation-timing-function: var(--fa-animation-timing, linear);
        }

        .fa-spin {
            -webkit-animation-name: fa-spin;
            animation-name: fa-spin;
            -webkit-animation-delay: var(--fa-animation-delay, 0s);
            animation-delay: var(--fa-animation-delay, 0s);
            -webkit-animation-direction: var(--fa-animation-direction, normal);
            animation-direction: var(--fa-animation-direction, normal);
            -webkit-animation-duration: var(--fa-animation-duration, 2s);
            animation-duration: var(--fa-animation-duration, 2s);
            -webkit-animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            -webkit-animation-timing-function: var(--fa-animation-timing, linear);
            animation-timing-function: var(--fa-animation-timing, linear);
        }

        .fa-spin-reverse {
            --fa-animation-direction: reverse;
        }

        .fa-pulse,
        .fa-spin-pulse {
            -webkit-animation-name: fa-spin;
            animation-name: fa-spin;
            -webkit-animation-direction: var(--fa-animation-direction, normal);
            animation-direction: var(--fa-animation-direction, normal);
            -webkit-animation-duration: var(--fa-animation-duration, 1s);
            animation-duration: var(--fa-animation-duration, 1s);
            -webkit-animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            animation-iteration-count: var(--fa-animation-iteration-count,
                    infinite);
            -webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
            animation-timing-function: var(--fa-animation-timing, steps(8));
        }

        @media (prefers-reduced-motion: reduce) {

            .fa-beat,
            .fa-bounce,
            .fa-fade,
            .fa-beat-fade,
            .fa-flip,
            .fa-pulse,
            .fa-shake,
            .fa-spin,
            .fa-spin-pulse {
                -webkit-animation-delay: -1ms;
                animation-delay: -1ms;
                -webkit-animation-duration: 1ms;
                animation-duration: 1ms;
                -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
                -webkit-transition-delay: 0s;
                transition-delay: 0s;
                -webkit-transition-duration: 0s;
                transition-duration: 0s;
            }
        }

        @-webkit-keyframes fa-beat {

            0%,
            90% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            45% {
                -webkit-transform: scale(var(--fa-beat-scale, 1.25));
                transform: scale(var(--fa-beat-scale, 1.25));
            }
        }

        @keyframes fa-beat {

            0%,
            90% {
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            45% {
                -webkit-transform: scale(var(--fa-beat-scale, 1.25));
                transform: scale(var(--fa-beat-scale, 1.25));
            }
        }

        @-webkit-keyframes fa-bounce {
            0% {
                -webkit-transform: scale(1, 1) translateY(0);
                transform: scale(1, 1) translateY(0);
            }

            10% {
                -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1),
                        var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
                transform: scale(var(--fa-bounce-start-scale-x, 1.1),
                        var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
            }

            30% {
                -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9),
                        var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
                transform: scale(var(--fa-bounce-jump-scale-x, 0.9),
                        var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
            }

            50% {
                -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05),
                        var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
                transform: scale(var(--fa-bounce-land-scale-x, 1.05),
                        var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
            }

            57% {
                -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
                transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
            }

            64% {
                -webkit-transform: scale(1, 1) translateY(0);
                transform: scale(1, 1) translateY(0);
            }

            100% {
                -webkit-transform: scale(1, 1) translateY(0);
                transform: scale(1, 1) translateY(0);
            }
        }

        @keyframes fa-bounce {
            0% {
                -webkit-transform: scale(1, 1) translateY(0);
                transform: scale(1, 1) translateY(0);
            }

            10% {
                -webkit-transform: scale(var(--fa-bounce-start-scale-x, 1.1),
                        var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
                transform: scale(var(--fa-bounce-start-scale-x, 1.1),
                        var(--fa-bounce-start-scale-y, 0.9)) translateY(0);
            }

            30% {
                -webkit-transform: scale(var(--fa-bounce-jump-scale-x, 0.9),
                        var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
                transform: scale(var(--fa-bounce-jump-scale-x, 0.9),
                        var(--fa-bounce-jump-scale-y, 1.1)) translateY(var(--fa-bounce-height, -0.5em));
            }

            50% {
                -webkit-transform: scale(var(--fa-bounce-land-scale-x, 1.05),
                        var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
                transform: scale(var(--fa-bounce-land-scale-x, 1.05),
                        var(--fa-bounce-land-scale-y, 0.95)) translateY(0);
            }

            57% {
                -webkit-transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
                transform: scale(1, 1) translateY(var(--fa-bounce-rebound, -0.125em));
            }

            64% {
                -webkit-transform: scale(1, 1) translateY(0);
                transform: scale(1, 1) translateY(0);
            }

            100% {
                -webkit-transform: scale(1, 1) translateY(0);
                transform: scale(1, 1) translateY(0);
            }
        }

        @-webkit-keyframes fa-fade {
            50% {
                opacity: var(--fa-fade-opacity, 0.4);
            }
        }

        @keyframes fa-fade {
            50% {
                opacity: var(--fa-fade-opacity, 0.4);
            }
        }

        @-webkit-keyframes fa-beat-fade {

            0%,
            100% {
                opacity: var(--fa-beat-fade-opacity, 0.4);
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            50% {
                opacity: 1;
                -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
                transform: scale(var(--fa-beat-fade-scale, 1.125));
            }
        }

        @keyframes fa-beat-fade {

            0%,
            100% {
                opacity: var(--fa-beat-fade-opacity, 0.4);
                -webkit-transform: scale(1);
                transform: scale(1);
            }

            50% {
                opacity: 1;
                -webkit-transform: scale(var(--fa-beat-fade-scale, 1.125));
                transform: scale(var(--fa-beat-fade-scale, 1.125));
            }
        }

        @-webkit-keyframes fa-flip {
            50% {
                -webkit-transform: rotate3d(var(--fa-flip-x, 0),
                        var(--fa-flip-y, 1),
                        var(--fa-flip-z, 0),
                        var(--fa-flip-angle, -180deg));
                transform: rotate3d(var(--fa-flip-x, 0),
                        var(--fa-flip-y, 1),
                        var(--fa-flip-z, 0),
                        var(--fa-flip-angle, -180deg));
            }
        }

        @keyframes fa-flip {
            50% {
                -webkit-transform: rotate3d(var(--fa-flip-x, 0),
                        var(--fa-flip-y, 1),
                        var(--fa-flip-z, 0),
                        var(--fa-flip-angle, -180deg));
                transform: rotate3d(var(--fa-flip-x, 0),
                        var(--fa-flip-y, 1),
                        var(--fa-flip-z, 0),
                        var(--fa-flip-angle, -180deg));
            }
        }

        @-webkit-keyframes fa-shake {
            0% {
                -webkit-transform: rotate(-15deg);
                transform: rotate(-15deg);
            }

            4% {
                -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
            }

            8%,
            24% {
                -webkit-transform: rotate(-18deg);
                transform: rotate(-18deg);
            }

            12%,
            28% {
                -webkit-transform: rotate(18deg);
                transform: rotate(18deg);
            }

            16% {
                -webkit-transform: rotate(-22deg);
                transform: rotate(-22deg);
            }

            20% {
                -webkit-transform: rotate(22deg);
                transform: rotate(22deg);
            }

            32% {
                -webkit-transform: rotate(-12deg);
                transform: rotate(-12deg);
            }

            36% {
                -webkit-transform: rotate(12deg);
                transform: rotate(12deg);
            }

            40%,
            100% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
        }

        @keyframes fa-shake {
            0% {
                -webkit-transform: rotate(-15deg);
                transform: rotate(-15deg);
            }

            4% {
                -webkit-transform: rotate(15deg);
                transform: rotate(15deg);
            }

            8%,
            24% {
                -webkit-transform: rotate(-18deg);
                transform: rotate(-18deg);
            }

            12%,
            28% {
                -webkit-transform: rotate(18deg);
                transform: rotate(18deg);
            }

            16% {
                -webkit-transform: rotate(-22deg);
                transform: rotate(-22deg);
            }

            20% {
                -webkit-transform: rotate(22deg);
                transform: rotate(22deg);
            }

            32% {
                -webkit-transform: rotate(-12deg);
                transform: rotate(-12deg);
            }

            36% {
                -webkit-transform: rotate(12deg);
                transform: rotate(12deg);
            }

            40%,
            100% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
        }

        @-webkit-keyframes fa-spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes fa-spin {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        .fa-rotate-90 {
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        .fa-rotate-180 {
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        .fa-rotate-270 {
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
        }

        .fa-flip-horizontal {
            -webkit-transform: scale(-1, 1);
            transform: scale(-1, 1);
        }

        .fa-flip-vertical {
            -webkit-transform: scale(1, -1);
            transform: scale(1, -1);
        }

        .fa-flip-both,
        .fa-flip-horizontal.fa-flip-vertical {
            -webkit-transform: scale(-1, -1);
            transform: scale(-1, -1);
        }

        .fa-rotate-by {
            -webkit-transform: rotate(var(--fa-rotate-angle, 0));
            transform: rotate(var(--fa-rotate-angle, 0));
        }

        .fa-stack {
            display: inline-block;
            vertical-align: middle;
            height: 2em;
            position: relative;
            width: 2.5em;
        }

        .fa-stack-1x,
        .fa-stack-2x {
            bottom: 0;
            left: 0;
            margin: auto;
            position: absolute;
            right: 0;
            top: 0;
            z-index: var(--fa-stack-z-index, auto);
        }

        .svg-inline--fa.fa-stack-1x {
            height: 1em;
            width: 1.25em;
        }

        .svg-inline--fa.fa-stack-2x {
            height: 2em;
            width: 2.5em;
        }

        .fa-inverse {
            color: var(--fa-inverse, #fff);
        }

        .sr-only,
        .fa-sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        .sr-only-focusable:not(:focus),
        .fa-sr-only-focusable:not(:focus) {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }

        .svg-inline--fa .fa-primary {
            fill: var(--fa-primary-color, currentColor);
            opacity: var(--fa-primary-opacity, 1);
        }

        .svg-inline--fa .fa-secondary {
            fill: var(--fa-secondary-color, currentColor);
            opacity: var(--fa-secondary-opacity, 0.4);
        }

        .svg-inline--fa.fa-swap-opacity .fa-primary {
            opacity: var(--fa-secondary-opacity, 0.4);
        }

        .svg-inline--fa.fa-swap-opacity .fa-secondary {
            opacity: var(--fa-primary-opacity, 1);
        }

        .svg-inline--fa mask .fa-primary,
        .svg-inline--fa mask .fa-secondary {
            fill: black;
        }

        .fad.fa-inverse,
        .fa-duotone.fa-inverse {
            color: var(--fa-inverse, #fff);
        }
    </style>
    <style type="text/css">
        .lf-progress {
            -webkit-appearance: none;
            -moz-apperance: none;
            width: 100%;
            /* margin: 0 10px; */
            height: 4px;
            border-radius: 3px;
            cursor: pointer;
        }

        .lf-progress:focus {
            outline: none;
            border: none;
        }

        .lf-progress::-moz-range-track {
            cursor: pointer;
            background: none;
            border: none;
            outline: none;
        }

        .lf-progress::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            height: 13px;
            width: 13px;
            border: 0;
            border-radius: 50%;
            background: #0fccce;
            cursor: pointer;
        }

        .lf-progress::-moz-range-thumb {
            -moz-appearance: none !important;
            height: 13px;
            width: 13px;
            border: 0;
            border-radius: 50%;
            background: #0fccce;
            cursor: pointer;
        }

        .lf-progress::-ms-track {
            width: 100%;
            height: 3px;
            cursor: pointer;
            background: transparent;
            border-color: transparent;
            color: transparent;
        }

        .lf-progress::-ms-fill-lower {
            background: #ccc;
            border-radius: 3px;
        }

        .lf-progress::-ms-fill-upper {
            background: #ccc;
            border-radius: 3px;
        }

        .lf-progress::-ms-thumb {
            border: 0;
            height: 15px;
            width: 15px;
            border-radius: 50%;
            background: #0fccce;
            cursor: pointer;
        }

        .lf-progress:focus::-ms-fill-lower {
            background: #ccc;
        }

        .lf-progress:focus::-ms-fill-upper {
            background: #ccc;
        }

        .lf-player-container :focus {
            outline: 0;
        }

        .lf-popover {
            position: relative;
        }

        .lf-popover-content {
            display: inline-block;
            position: absolute;
            opacity: 1;
            visibility: visible;
            transform: translate(0, -10px);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
        }

        .lf-popover-content.hidden {
            opacity: 0;
            visibility: hidden;
            transform: translate(0, 0px);
        }

        .lf-player-btn-container {
            root@server2: /var/www/html/production# cd /var/www/html/production/financialcorporation display: flex;
            align-items: center;
        }

        .lf-player-btn {
            cursor: pointer;
            fill: #999;
            width: 14px;
        }

        .lf-player-btn.active {
            fill: #555;
        }

        .lf-popover {
            position: relative;
        }

        .lf-popover-content {
            display: inline-block;
            position: absolute;
            background-color: #ffffff;
            opacity: 1;

            transform: translate(0, -10px);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
            padding: 10px;
        }

        .lf-popover-content.hidden {
            opacity: 0;
            visibility: hidden;
            transform: translate(0, 0px);
        }

        .lf-arrow {
            position: absolute;
            z-index: -1;
            content: "";
            bottom: -9px;
            border-style: solid;
            border-width: 10px 10px 0px 10px;
        }

        .lf-left-align,
        .lf-left-align .lfarrow {
            left: 0;
            right: unset;
        }

        .lf-right-align,
        .lf-right-align .lf-arrow {
            right: 0;
            left: unset;
        }

        .lf-text-input {
            border: 1px #ccc solid;
            border-radius: 5px;
            padding: 3px;
            width: 60px;
            margin: 0;
        }

        .lf-color-picker {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 90px;
        }

        .lf-color-selectors {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .lf-color-component {
            display: flex;
            flex-direction: row;
            font-size: 12px;
            align-items: center;
            justify-content: center;
        }

        .lf-color-component strong {
            width: 40px;
        }

        .lf-color-component input[type="range"] {
            margin: 0 0 0 10px;
        }

        .lf-color-component input[type="number"] {
            width: 50px;
            margin: 0 0 0 10px;
        }

        .lf-color-preview {
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding-left: 5px;
        }

        .lf-preview {
            height: 60px;
            width: 60px;
        }

        .lf-popover-snapshot {
            width: 150px;
        }

        .lf-popover-snapshot h5 {
            margin: 5px 0 10px 0;
            font-size: 0.75rem;
        }

        .lf-popover-snapshot a {
            display: block;
            text-decoration: none;
        }

        .lf-popover-snapshot a:before {
            content: "⥼";
            margin-right: 5px;
        }

        .lf-popover-snapshot .lf-note {
            display: block;
            margin-top: 10px;
            color: #999;
        }

        .lf-player-controls>div {
            margin-right: 5px;
            margin-left: 5px;
        }

        .lf-player-controls>div:first-child {
            margin-left: 0px;
        }

        .lf-player-controls>div:last-child {
            margin-right: 0px;
        }
    </style>
    <style type="text/css">
        .lf-progress {
            -webkit-appearance: none;
            -moz-apperance: none;
            width: 100%;
            /* margin: 0 10px; */
            height: 4px;
            border-radius: 3px;
            cursor: pointer;
        }

        .lf-progress:focus {
            outline: none;
            border: none;
        }

        .lf-progress::-moz-range-track {
            cursor: pointer;
            background: none;
            border: none;
            outline: none;
        }

        .lf-progress::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            height: 13px;
            width: 13px;
            border: 0;
            border-radius: 50%;
            background: #0fccce;
            cursor: pointer;
        }

        .lf-progress::-moz-range-thumb {
            -moz-appearance: none !important;
            height: 13px;
            width: 13px;
            border: 0;
            border-radius: 50%;
            background: #0fccce;
            cursor: pointer;
        }

        .lf-progress::-ms-track {
            width: 100%;
            height: 3px;
            cursor: pointer;
            background: transparent;
            border-color: transparent;
            color: transparent;
        }

        .lf-progress::-ms-fill-lower {
            background: #ccc;
            border-radius: 3px;
        }

        .lf-progress::-ms-fill-upper {
            background: #ccc;
            border-radius: 3px;
        }

        .lf-progress::-ms-thumb {
            border: 0;
            height: 15px;
            width: 15px;
            border-radius: 50%;
            background: #0fccce;
            cursor: pointer;
        }

        .lf-progress:focus::-ms-fill-lower {
            background: #ccc;
        }

        .lf-progress:focus::-ms-fill-upper {
            background: #ccc;
        }

        .lf-player-container :focus {
            outline: 0;
        }

        .lf-popover {
            position: relative;
        }

        .lf-popover-content {
            display: inline-block;
            position: absolute;
            opacity: 1;
            visibility: visible;
            transform: translate(0, -10px);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
        }

        .lf-popover-content.hidden {
            opacity: 0;
            visibility: hidden;
            transform: translate(0, 0px);
        }

        .lf-player-btn-container {
            display: flex;
            align-items: center;
        }

        .lf-player-btn {
            cursor: pointer;
            fill: #999;
            width: 14px;
        }

        .lf-player-btn.active {
            fill: #555;
        }

        .lf-popover {
            position: relative;
        }

        .lf-popover-content {
            display: inline-block;
            position: absolute;
            background-color: #ffffff;
            opacity: 1;

            transform: translate(0, -10px);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            transition: all 0.3s cubic-bezier(0.75, -0.02, 0.2, 0.97);
            padding: 10px;
        }

        .lf-popover-content.hidden {
            opacity: 0;
            visibility: hidden;
            transform: translate(0, 0px);
        }

        .lf-arrow {
            position: absolute;
            z-index: -1;
            content: '';
            bottom: -9px;
            border-style: solid;
            border-width: 10px 10px 0px 10px;
        }

        .lf-left-align,
        .lf-left-align .lfarrow {
            left: 0;
            right: unset;
        }

        .lf-right-align,
        .lf-right-align .lf-arrow {
            right: 0;
            left: unset;
        }

        .lf-text-input {
            border: 1px #ccc solid;
            border-radius: 5px;
            padding: 3px;
            width: 60px;
            margin: 0;
        }

        .lf-color-picker {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 90px;
        }

        .lf-color-selectors {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .lf-color-component {
            display: flex;
            flex-direction: row;
            font-size: 12px;
            align-items: center;
            justify-content: center;
        }

        .lf-color-component strong {
            width: 40px;
        }

        .lf-color-component input[type='range'] {
            margin: 0 0 0 10px;
        }

        .lf-color-component input[type='number'] {
            width: 50px;
            margin: 0 0 0 10px;
        }

        .lf-color-preview {
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding-left: 5px;
        }

        .lf-preview {
            height: 60px;
            width: 60px;
        }

        .lf-popover-snapshot {
            width: 150px;
        }

        .lf-popover-snapshot h5 {
            margin: 5px 0 10px 0;
            font-size: 0.75rem;
        }

        .lf-popover-snapshot a {
            display: block;
            text-decoration: none;
        }

        .lf-popover-snapshot a:before {
            content: '⥼';
            margin-right: 5px;
        }

        .lf-popover-snapshot .lf-note {
            display: block;
            margin-top: 10px;
            color: #999;
        }

        .lf-player-controls>div {
            margin-right: 5px;
            margin-left: 5px;
        }

        .lf-player-controls>div:first-child {
            margin-left: 0px;
        }

        .lf-player-controls>div:last-child {
            margin-right: 0px;
        }
    </style>
@endpush