@extends('landing.layout')

@section('title', 'Credit')

@section('content')

<!--Title Area-->
<div class="container-fluid sacco-downloads-container">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <h2 class="sacco-downloads-title">Sacco Products</h2>
            <h5 class="sacco-downloads-title">Loan Products</h5>
        </div>
    </div>
</div>
<!--End Title Area-->
<!--Section Products-->
<section class="products">
    <style>
        /* Define custom colors for active buttons */
        
    
    </style>

    <div class="row justify-content-center">
        <div class="col-lg-12 col-md-12">
            <div class="card p-3 shadow">

                <nav>
                    <div class="nav nav-tabs mb-3" id="nav-tab" role="tablist">
                        <button class="nav-link active tab-button" id="nav-home-tab" data-bs-toggle="tab"
                        data-bs-target="#nav-normal" type="button" role="tab" aria-controls="nav-normal"
                        aria-selected="true"> Normal Loans</button>
                        <button class="nav-link tab-button" id="nav-home-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home"
                            aria-selected="true">Emergency Loans</button>
                        <button class="nav-link tab-button" id="nav-profile-tab" data-bs-toggle="tab"
                            data-bs-target="#nav-development" type="button" role="tab" aria-controls="nav-development"
                            aria-selected="false">Development Loan</button>
                        <button class="nav-link tab-button" id="nav-profile-tab" data-bs-toggle="tab"
                        data-bs-target="#nav-fee" type="button" role="tab" aria-controls="nav-fee"
                        aria-selected="false">School Fee Loan</button>
                        <button class="nav-link tab-button" id="nav-topup-tab" data-bs-toggle="tab"
                        data-bs-target="#nav-topup" type="button" role="tab" aria-controls="nav-topup"
                        aria-selected="false">Top-up Loan</button>
                        <button class="nav-link tab-button" id="nav-salary-tab" data-bs-toggle="tab"
                        data-bs-target="#nav-salary" type="button" role="tab" aria-controls="nav-salary"
                        aria-selected="false">Salary Advance Loan</button>

                    </div>
                </nav>
                <div class="tab-content p-3 border bg-light" id="nav-tabContent">
                    <div class="tab-pane fade active show" id="nav-normal" role="tabpanel" aria-labelledby="nav-normal-tab">
                         <!-- Section: Design Block -->
                    <section class="text-center text-lg-start">
                        <style>
                        .cascading-right {
                            margin-right: -50px;
                        }
                    
                        @media (max-width: 991.98px) {
                            .cascading-right {
                            margin-right: 0;
                            }
                        }
                        </style>
                    
                        <!-- Jumbotron -->
                        <div class="container py-4">
                        <div class="row g-0 align-items-center">
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <div class="card cascading-right" style="
                                background: hsla(0, 0%, 100%, 0.55);
                                backdrop-filter: blur(30px);
                                ">
                                <div class="card-body p-5 shadow-5">
                                    <h5 class="mb-3">Normal Loan</h5>
                                    <ol class="numbered-list">
                                        <li>Repayment period will be 24 months. However a Member only qualifies for a loan equivalent to three times of his deposits. </li>
                                        <li>The interest rate shall be 1% per month on declining balance or as shall be determined by the members throw an AGM.</li>
                                        <li>The total of all outstanding loans, including Development loans, Emergency, Salary Advance, Top-up Loan and School fees must not exceed three times of his deposits.</li>
                                    </ol>
                            
                                </div>
                            </div>
                            </div>
                    
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <img src="{{asset('assets/images/website/products/normalloan.jpg') }}" class="w-100 rounded-4 shadow-4"
                                alt=""/>
                            </div>
                        </div>
                        </div>
                        <!-- Jumbotron -->
                    </section>
                    <!-- Section: Design Block -->  
                        
                    </div>
                    <div class="tab-pane fade" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                         <!-- Section: Design Block -->
                    <section class="text-center text-lg-start">
                        <style>
                        .cascading-right {
                            margin-right: -50px;
                        }
                    
                        @media (max-width: 991.98px) {
                            .cascading-right {
                            margin-right: 0;
                            }
                        }
                        </style>
                    
                        <!-- Jumbotron -->
                        <div class="container py-4">
                        <div class="row g-0 align-items-center">
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <div class="card cascading-right" style="
                                background: hsla(0, 0%, 100%, 0.55);
                                backdrop-filter: blur(30px);
                                ">
                                <div class="card-body p-5 shadow-5">
                                    <h5 class="mb-3">Emergency Loan</h5>
                                    <ol class="numbered-list">
                                        <p>Emergency loans enable our members to pay for emergencies such as hospital bills or fire </p>
                                        <br>
                                        <li>Maximum repayment period is 12 months.</li>
                                        <li>Interest rate is 1% per month on reducing balance</li>
                                        <li>The total of all outstanding loans, including Development loans, Emergency, Salary Advance, Top-up Loan and School fees must not exceed three times of his deposits.</li>
                                        
                                    </ol>                            
                                </div>
                            </div>
                            </div>
                    
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <img src="{{asset('assets/images/website/products/emergency.jpg') }}" class="w-100 rounded-4 shadow-4"
                                alt="" />
                            </div>
                        </div>
                        </div>
                        <!-- Jumbotron -->
                    </section>
                    <!-- Section: Design Block -->  
                        
                    </div>
                    <div class="tab-pane fade" id="nav-development" role="tabpanel" aria-labelledby="nav-development-tab">
                         <!-- Section: Design Block -->
                    <section class="text-center text-lg-start">
                        <style>
                        .cascading-right {
                            margin-right: -50px;
                        }
                    
                        @media (max-width: 991.98px) {
                            .cascading-right {
                            margin-right: 0;
                            }
                        }
                        </style>
                    
                        <!-- Jumbotron -->
                        <div class="container py-4">
                        <div class="row g-0 align-items-center">
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <div class="card cascading-right" style="
                                background: hsla(0, 0%, 100%, 0.55);
                                backdrop-filter: blur(30px);
                                ">
                                <div class="card-body p-5 shadow-5">
                                    <h5 class="mb-3">Development Loan</h5>
                                    <ol class="numbered-list">
                                        <li>Repayment period will be 60 months. However a Member only qualifies for a loan equivalent to three times of his deposits. (Because of 2/3 rule a member may be allowed to repay his loans within a period of sixty months.)</li>
                                        <li>The interest rate shall be 1% per month on declining balance or as shall be determined by the members throw an AGM.</li>
                                        <li>The total of all outstanding loans, including Development loans, Emergency, Salary Advance, Top-up Loan and School fees must not exceed three times of his deposits.</li>
                                    </ol>
                            
                                </div>
                            </div>
                            </div>
                    
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <img src="{{asset('assets/images/website/products/development.jpg') }}" class="w-100 rounded-4 shadow-4"
                                alt="" />
                            </div>
                        </div>
                        </div>
                        <!-- Jumbotron -->
                    </section>
                    <!-- Section: Design Block -->  
                        
                    </div>
                    <div class="tab-pane fade" id="nav-fee" role="tabpanel" aria-labelledby="nav-fee-tab">
                        <!-- Section: Design Block -->
                    <section class="text-center text-lg-start">
                        <style>
                        .cascading-right {
                            margin-right: -50px;
                        }
                    
                        @media (max-width: 991.98px) {
                            .cascading-right {
                            margin-right: 0;
                            }
                        }
                        </style>
                    
                        <!-- Jumbotron -->
                        <div class="container py-4">
                        <div class="row g-0 align-items-center">
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <div class="card cascading-right" style="
                                background: hsla(0, 0%, 100%, 0.55);
                                backdrop-filter: blur(30px);
                                ">
                                <div class="card-body p-5 shadow-5">
                                    <h5 class="mb-3">School Fees Loan</h5>
                                    <ol class="numbered-list">
                                        <li>School fees loan shall be granted for school fees purpose.
                                            Repayment period shall be 6 months
                                            </li>
                                        <li>The interest rate shall be 7 % per month</li>
                                        <li>The total of all outstanding loans, including emergency and development loan, must not exceed three times an applicant’s deposit.</li>
                                        <li>All payments shall be done directly to the beneficiary institution.</li>
                                    </ol>
                            
                                </div>
                            </div>
                            </div>
                    
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <img src="{{asset('assets/images/website/products/school.jpg') }}" class="w-100 rounded-4 shadow-4"
                                alt="" />
                            </div>
                        </div>
                        </div>
                        <!-- Jumbotron -->
                    </section>
                    <!-- Section: Design Block -->                       
                    </div>
                    <div class="tab-pane fade" id="nav-topup" role="tabpanel" aria-labelledby="nav-topup-tab">
                        <!-- Section: Design Block -->
                    <section class="text-center text-lg-start">
                        <style>
                        .cascading-right {
                            margin-right: -50px;
                        }
                    
                        @media (max-width: 991.98px) {
                            .cascading-right {
                            margin-right: 0;
                            }
                        }
                        </style>
                    
                        <!-- Jumbotron -->
                        <div class="container py-4">
                        <div class="row g-0 align-items-center">
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <div class="card cascading-right" style="
                                background: hsla(0, 0%, 100%, 0.55);
                                backdrop-filter: blur(30px);
                                ">
                                <div class="card-body p-5 shadow-5">
                                    <h5 class="mb-3">Top-up Loan</h5>
                                    <ol class="numbered-list">
                                        <li>One must be having an existing Development loan or a normal loan to qualify for a top-up loan.</li>
                                        <li>Repayment period does not change and the terms of the original loan will still apply. </li>
                                        <li>The total of all outstanding loans, including Development loans, Emergency, Salary Advance, Top-up Loan and School fees must not exceed three times of his deposits.</li>
                                        
                                    </ol>
                            
                                </div>
                            </div>
                            </div>
                    
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <img src="{{asset('assets/images/website/products/handgivingcoin.jpg') }}" class="w-100 rounded-4 shadow-4"
                                alt="" />
                            </div>
                        </div>
                        </div>
                        <!-- Jumbotron -->
                    </section>
                    <!-- Section: Design Block -->                       
                    </div>
                    <div class="tab-pane fade" id="nav-salary" role="tabpanel" aria-labelledby="nav-salary-tab">
                        <!-- Section: Design Block -->
                    <section class="text-center text-lg-start">
                        <style>
                        .cascading-right {
                            margin-right: -50px;
                        }
                    
                        @media (max-width: 991.98px) {
                            .cascading-right {
                            margin-right: 0;
                            }
                        }
                        </style>
                    
                        <!-- Jumbotron -->
                        <div class="container py-4">
                        <div class="row g-0 align-items-center">
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <div class="card cascading-right" style="
                                background: hsla(0, 0%, 100%, 0.55);
                                backdrop-filter: blur(30px);
                                ">
                                <div class="card-body p-5 shadow-5">
                                    <h5 class="mb-3">Salary Advance</h5>
                                    <ol class="numbered-list">
                                        <li>Maximum of KES 50,000-Shares must be more than the 50K</li>
                                        <li>Repayment period is one month-Default amount is deducted directly from the shares and a transfer commission will apply.</li>
                                        <li>A commission will be 7% per month or as may be determined from time to time.</li>
                                        <li>Loan is secured by a member’s contribution and not the salary.</li>
                                        <li>Same day processing and requires no guarantor</li>
                                    </ol>
                                </div>
                            </div>
                            </div>
                    
                            <div class="col-lg-6 mb-5 mb-lg-0">
                            <img src="{{asset('assets/images/website/products/businessman.jpg') }}" class="w-100 rounded-4 shadow-4"
                                alt="" />
                            </div>
                        </div>
                        </div>
                        <!-- Jumbotron -->
                    </section>
                    <!-- Section: Design Block -->                       
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>    

<!--end section Products-->
<!-- Start Call To Action Area -->
<section class="newsletter-area section">
<div class="container">
    <div class="row ">
        <div class="col-lg-6 offset-lg-3 col-md-12 col-12">
            <div class="newsletter-title">
                <span>Sign Up</span>
                <h2>Delga Sacco</h2>
                <p>Fill in the form online, print and submit to us!</p>
            </div>
            <!-- Call To Action -->
            <div class="subscribe-text wow fadeInUp" data-wow-delay=".2s">
                <div class="button">
                    <a href="membership.html" class="btn">Join Us Today!</a>
                </div>                    
                
            </div>
            <!-- Call To Action -->
        </div>
    </div>
</div>
</section>
<!-- /End Call To Action Area -->
<!--FAQ SECTION--> 

<section class="faq">
<!--Title Area-->
<div class="container-fluid sacco-container">
<div class="row justify-content-center">
    <div class="col-lg-8">
        <h2 class="sacco-downloads-title">Frequently Asked Questions</h2>            
    </div>
</div>
</div>
<!--End Title Area-->

<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="container">
    <div class="row">
        
        <div class="col-lg-11 col-md-12">
            <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingOne">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                Am I eligible for a loan?
                </button>
            </h2>
            <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">
                    <ol>
                        <li>The general requirement is that one must have been a member of the Sacco for period of six months.</li>
                        <li>One must fulfill all requirements of a specific loan product.</li>
                    </ol>                       
                    
                </div>
            </div>
            </div>
            <div class="accordion-item">
            <h2 class="accordion-header" id="flush-headingTwo">
                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
                Does my share capital affect my loan eligibility?
                </button>
            </h2>
            <div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                <div class="accordion-body">A member is required to have the minimum share capital at the time of applying for a loan.</div>
            </div>
            </div>                
        </div>
    </div>
</div>
</div>
</section>
<!--End Section FAQ-->   

@endsection