@extends('frontend.layouts.app')
@section('title')
    Product Campare
@endsection
@section('content')
<div class="inrPageLayout__wr">
    <div class="inrPageTitleSec__wr">
        <div class="container">
            <div class="row row-gap-4 align-items-center">
                <div class="col">
                    <div class="inrPageTitleBlock">
                        <h2 class="inrPageTitle mb-0">Residential Resale</h2>
                    </div>
                </div>
                <div class="col-auto">
                    <div class="btnBlock">
                        <a href="#" class="btn btn-light rounded-pill" role="button">
                            <span class="btnTitle">BACK</span>
                        </a>
                        {{-- <a href="#" class="btn btn-light rounded-pill" role="button">
                            <span class="btnTitle">GENERATE PRAPOSAL</span>
                        </a> --}}
                        <a href="#" class="btn btn-light rounded-pill" role="button" data-bs-toggle="modal" data-bs-target="#genOfferModal">
                            <span class="btnTitle">GENERATE OFFER</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="compBlockBoxSec__wr pb-lg-80px pb-5">
        <div class="container">
            <div class="row gx-xl-32px row-gap-xl-32px row-gap-4">
                @foreach ($products as $index => $product)
                    <div class="col">
                        <div class="compBoxBlock">
                            <div class="compBoxBlockHead">
                                <div class="compBankBLock">
                                    <div class="compBankBLockBox">
                                        {{-- <span>{{ chr(65 + $index) }}</span> --}}
                                        <img src="{{uploaded_asset($product->bank->image)}}" loading="lazy" class="img-fluid" alt="bank-logo" width="50" height="50" onerror="this.onerror=null; this.src='{{asset('assets/frontend/images/placeholder.png')}}';">

                                    </div>
                                    <span class="compBankBLockTitle">{{$product->bank->name}}</span>
                                </div>
                            </div>
                            <div class="compBoxBlockBody">
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Fix Rate</span>
                                    <span class="compBlockColData">{!! $product->interest_rate_desc !!}</span>
                                </div>
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Follow on Rate</span>
                                    <span class="compBlockColData">{!! $product->follow_on_rate_details !!}</span>
                                </div>
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Islamic / Conventional</span>
                                    <span class="compBlockColData">{!! $product->mortgage_types_display !!}</span>
                                </div>
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Loan To Value</span>
                                    <span class="compBlockColData">{{  is_null($product->loan_to_value) ? '0%' :  $product->loan_to_value .'%'  }}</span>
                                </div>
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Pre-approval Fee</span>
                                    <span class="compBlockColData">{!! $product->bank_pre_approval_application_fee_int !!}</span>
                                </div>
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Processing Fees</span>
                                    <span class="compBlockColData">{!! $product->bank_processing_fee_desc !!}</span>
                                </div>
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Valuation Fee</span>
                                    <span class="compBlockColData">{!!   $product->property_valuation_fee_desc  !!}</span>
                                </div>
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Life Insurance</span>
                                    <span class="compBlockColData">{!! $product->life_insurance !!}</span>
                                </div>
                                
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Repayment Schedule</span>
                                    <span class="compBlockColData text-danger">Monthly</span>
                                </div>
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Insurance</span>
                                    <span class="compBlockColData">{!! $product->property_insurance !!}</span>
                                </div>
                                <div class="compBlockDataRow">
                                    <span class="compBlockDataColHead">Early Settlement Fee</span>
                                    <span class="compBlockColData">{!! $product->early_settelment_fee !!}</span>
                                </div>
                            </div>
                            <div class="compBoxBlockFoot w-100">
                                <div class="btnBlock w-100 d-flex align-items-center justify-content-center">
                                    <a href="#" class="btn btn-primary rounded-pill" role="button">
                                        <span class="btnTitle">LEARN MORE</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

@include('frontend.partials.offer_generate_modal')

@endsection

@section('script')
<script>

    $(document).ready(function(){
        $('.resaleCardReadBtn__wr').click(function() {
            // alert("Hello! I am an alert box!!");
            // $(this).closest('.resaleCardBlock__wr').children('.resaleCardBlockBody__wr').children().children().children().children('.expand__wr').addClass('xixg');
            var rows = $(this).closest('.resaleCardBlock__wr').children('.resaleCardBlockBody__wr').children().children().children().children('.expand__wr');
            if (rows.first().is(':visible')) {
                rows.hide();
                $(this).text('Read more');
                $('html, body').animate({
                    scrollTop: $(this).offset().top
                }, 1500); // Increased duration to 1500ms
            } else {
                rows.show();
                $(this).text('Read less');
                $('html, body').animate({
                    scrollTop: rows.last().offset().top
                }, 1500); // Increased duration to 1500ms
            }
        });

        $("[name='tenor_in_month']").on("input", function() {
            let max = 300;
            let value = $(this).val();
            if (value > max) {
                $('.modal-content').attr("action", 'javascript:void(0)');
                $('#submit_btn').prop("disabled", true);

                $("#tenor-warning").show(); // Show warning
            } else {
                $('.modal-content').attr("action", '{{ route('proposal.generate') }}')
                $('#submit_btn').prop("disabled", false);
                $("#tenor-warning").hide(); // Hide warning
            }
        });

        $("[name='loan_amount']").on('keyup paste', function(){
            let loan_value = $(this).val();
            let ltv_value = ($("[name='ltv']").val().trim() === "") ? 0 : $("[name='ltv']").val().replace(/\D/g, '');
            let total = (ltv_value > 0) ? loan_value / ltv_value * 100 : 0;
            $("[name='epv']").val(total.toFixed(0));
        })
        $("[name='epv']").on('keyup paste', function(){
            let epv = $(this).val();
            let ltv_value = ($("[name='ltv']").val().trim() === "") ? 0 : $("[name='ltv']").val().replace(/\D/g, '');
            let total = epv * ltv_value / 100;
            $("[name='loan_amount']").val(total.toFixed(0));
        })
    });

    $('#offer_modal').on('hidden.bs.modal', function () {
        $(this).find('input, textarea, select')
        .not("[name='ltv']")
        .val('');
    });
</script>
@endsection