@extends("front.instarefi-layout")

@section("content")
<style>
    input[type="email"],
    input[type="password"],
    input[type="text"],
    input[type="number"],
    select {
        height: 35px !important;
        border-radius: 100px !important;
        font-family: var(--font-family);
        font-weight: 200;
    }

    select,
    select option {
        font-family: var(--font-family) !important;
        font-weight: 200 !important;
    }
    #overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw; /* Full screen width */
        height: 100vh; /* Full screen height */
        background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1050; /* Ensure it appears above other elements */
    }
</style>
@php
$sessionData = session()->all();
@endphp
<div class="px-4 px-lg-5 py-4 footer-position">
    <div class="container-fluid">
        <div class="row g-4">
            <div class="col-lg-12 right-wrap">
                <form method="post" name="leadForm" id="leadForm" class="row g-3">
                    @csrf
                    <!-- Row 1 -->
                    <input type="hidden" name="quote_type" value="{{session('quote_type')}}" />
                    <input type="hidden" name="zipcode" value="{{session('zipcode')}}" />
                    <input type="hidden" name="propTypeRefinance" value="{{session('propTypeRefinance')}}" />
                    <div class="col-md-4">
                        <label for="occupancy" class="form-label">Occupancy</label>
                        <select class="form-select" id="occupancy" name="rfhowPropUsed">
                            <option value="">Occupancy</option>
                            @php
                            $rfhowPropUsed = strtolower(session('rfhowPropUsed', ''));
                            $occupancy_value = null;

                            if (str_contains($rfhowPropUsed, 'primary')) {
                            $occupancy_value = 'primary';
                            } elseif (str_contains($rfhowPropUsed, 'second')) {
                            $occupancy_value = 'secondary';
                            } elseif (str_contains($rfhowPropUsed, 'investment')) {
                            $occupancy_value = 'investment';
                            }
                            @endphp

                            @foreach (getOccupancyOptions() as $occupancy)
                            @if(strtolower($occupancy_value)==strtolower($occupancy))
                            <option value="{{ $occupancy }}" selected>{{ ucfirst($occupancy) }}</option>
                            @else
                            <option value="{{ $occupancy }}">{{ ucfirst($occupancy) }}</option>
                            @endif
                            @endforeach
                        </select>

                    </div>
                    <div class="col-md-4">
                        <label for="property_type" class="form-label">Property Type</label>
                        <select class="form-select" name="property_type" id="property_type" required>
                            <option value="">Property Type</option>
                            @php
                            $propTypeRefinance = strtolower(session('propTypeRefinance', ''));
                            $property_value = null;

                            if (str_contains($propTypeRefinance, 'single')) {
                            $property_value = 'Single Family Residence';
                            } elseif (str_contains($propTypeRefinance, 'townhome')) {
                            $property_value = 'Townhome (PUD)';
                            } elseif (str_contains($propTypeRefinance, 'investment')) {
                            $property_value = 'investment';
                            }
                            @endphp
                            @foreach (getPropertyTypeOptions() as $property_type)
                            @if(strtolower($property_value)===strtolower($property_type))
                            <option value="{{ $property_type }}" selected>{{ ucfirst($propTypeRefinance) }}</option>
                            @else
                            <option value="{{$property_type}}">{{$property_type}}</option>
                            @endif
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label for="estimated_value" class="form-label">Estimated Property Value</label>
                        <input type="text" class="form-control comma-format" id="estimate_property_value" name="estimate_property_value" placeholder="Enter value" value="{{ number_format(session('estimate_property_value'), 0, '.', ',') }}">
                    </div>

                    <!-- Row 2 -->
                    @if(strtolower(session('quote_type')) == "purchase") 
                    <div class="col-md-4">
                        <label for="down_payment" class="form-label">Down Payment</label>
                        <select id="downpayment-type" class="form-control normal-input-btn gotham_medium" name="downpaymentType" onchange="toggleDownpaymentInput('#leadFormSubmit')">
                            <option value="">Select Type</option>
                            <option value="percentage" @if(strtolower(session('downpaymentType'))=='percentage' ) selected @endif>Percentage (%)</option>
                            <option value="amount" @if(strtolower(session('downpaymentType'))=='amount' ) selected @endif>Fixed Amount</option>
                        </select>
                    </div>
                    <div class="col-md-4" id="downpayment-input">
                        <label for="downpayment_value" class="form-label">Down Payment Value</label>
                        <input type="text" name="downpaymentValue" id="downpayment-value" class="form-control normal-input-btn gotham_medium" placeholder="Enter downpayment" oninput="handleDownpaymentInput(this)" value="{{ number_format(session('downpaymentValue'), 0, '.', ',') }}">
                        <span class="errormsg" id="error_downpayment"></span>
                    </div>
                    @endif
                    <div class="col-md-4">
                        <label for="loan_amount" class="form-label">Loan Amount</label>
                        <input type="text" class="form-control" id="current_loan_balance" name="current_loan_balance" placeholder="Enter amount" value="{{ number_format(session('current_loan_balance'), 0, '.', ',') }}" disabled>
                    </div>

                    <!-- Row 3 -->
                    <div class="col-md-4">
                        <label for="credit_score" class="form-label">Credit Score</label>
                        <input type="number" class="form-control" id="rfCreditScore" name="rfCreditScore" placeholder="Enter score" value="{{session('rfCreditScore')}}">
                    </div>
                    <div class="col-md-4">
                        <label for="loan_program" class="form-label">Loan Program</label>
                        <select class="form-control normal-input-btn gotham_medium" name="loan_program" id="loan_program" aria-label="Default select example" required>
                            <option value="">Loan Program</option>
                            <option value="FHA" @if(strtolower(session('loan_program'))=='fha' ) selected @endif>FHA</option>
                            <option value="VA" @if(strtolower(session('loan_program'))=='va' ) selected @endif>VA</option>
                            <option value="Conventional" @if(strtolower(session('loan_program'))=='conventional' ) selected @endif>Conventional</option>
                            <option value="Other" @if(strtolower(session('loan_program'))=='other' ) selected @endif>Other</option>
                        </select>

                    </div>
                    <div class="col-md-4">
                        <button type="submit" class="btn btn-primary" name="lead-form-submit" id="leadFormSubmit">Submit</button>
                    </div>
                </form>

            </div>
        </div>
        <div class="row g-4">
            <div class="col-lg-12 right-wrap">

                <div class="h-100 alert-property-boxes">
                    <div class="accordion" id="accordionExample">
                        @if(!empty($propertiesWithAlerts))
                        <h4 class="pt-5">{{$propertiesWithAlerts[0]['property_name']}}</h3>
                            <div class="accordion-item">
                                <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                    <div class="accordion-body">
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item">
                                                <a class="nav-link active" id="nav-payment-tab" data-bs-toggle="tab" href="#nav-payment" role="tab" aria-controls="nav-payment" aria-selected="true">Loan Options
                                                    @if($alertcount > 0)
                                                    <span class="badge bg-danger rounded-circle">{{$alertcount}}</span>
                                                    @endif
                                                </a>
                                            </li>
                                        </ul>
                                        <div class="tab-content mt-2 lead-opportunities" id="nav-tabContent">
                                            <div class="tab-pane fade show active" id="nav-payment" role="tabpanel" aria-labelledby="nav-payment-tab">
                                                <div class="table-responsive" id="tbl-holder">
                                                    <table class="table table-bordered text-center align-middle" style="">
                                                        <thead class="table-primary">
                                                            <tr>
                                                                <th>Proposed Loan Terms</th>
                                                                <th>Proposed Loan Details</th>
                                                                <th>Cost/Credit</th>
                                                                <th></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody class="fw-light">
                                                            @if($alertcount > 0)
                                                            @foreach ($propertiesWithAlerts as $property)

                                                            @if($property['alerts']['alert_type'] == 'lead_alerts')
                                                            <tr>
                                                                <td>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Loan Rate</span>
                                                                        <span class="text-primary">{{number_format($property['alerts']['other_info']->mdata->proposed_interest_rate,3)}}%</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Loan Term</span>
                                                                        <span class="text-primary">{{monthToYear($property['alerts']['other_info']->mdata->proposed_term)}}</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Loan Type</span>
                                                                        <span class="text-primary">{{$property['alerts']['other_info']->api_response->lender_price->mortgageType}}</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Monthy PMI</span>
                                                                        <span class="text-primary">${{ number_format($property['alerts']['other_info']->api_response->lender_price->mi, 2, '.', ',') }}</span>
                                                                    </div>
                                                                </td>
                                                                <td class="align-top">
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Monthly Payment (P&I)</span>
                                                                        <span class="text-primary">${{number_format(($property['alerts']['other_info']->future_monthly_payment ??
                                                                            0), 2)}}</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>Interest To Be Paid</span>
                                                                        <span class="text-primary">${{number_format(($property['alerts']['other_info']->interest_to_be_paid_for_new_loan ??
                                                                            0), 2)}}</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between">
                                                                        <span>APR</span>
                                                                        <span class="text-success">{{number_format(($property['alerts']['other_info']->annual_purchase_rate ??
                                                                            0), 3)}}%</span>
                                                                    </div>
                                                                </td>

                                                                <td>
                                                                    <div>${{number_format((round($property['alerts']['other_info']->mdata->cost_or_credit) ??
                                                                        0), 2)}}</div>
                                                                </td>
                                                                <td>
                                                                    <button class="btn btn-outline-primary btn-sm view-more-info" data-id="{{$property['alerts']['id']}}" data-bs-toggle="modal" data-bs-target="#leadsViewMoreModal">Get More Info</button>
                                                                    <a href="https://app.instamortgage.com/app/signup/p/instamortgage" target="_blank" class="btn btn-outline-primary btn-sm view-more-info">Apply Now</a>

                                                                </td>
                                                            </tr>
                                                            @endif

                                                            @endforeach
                                                            <tr>
                                                                <td colspan="4">
                                                                    <div class="terms-conditions">
                                                                        <div class="terms-title">Terms & Conditions</div>
                                                                        <p>InstaRefi is a registered trademark of InstaMortgage Inc. NMLS 1035734. Advertised offer is subject to change. The cost mentioned here only covers the lender fee and discount points and doesn’t cover 3rd party fees. A negative number denotes a lender credit towards third-party closing costs. . This is not a commitment to lend. All loans are subject to credit and property approval. You must meet eligibility requirements as established by Government and/or Lender guidelines to qualify for this offer.</p>
                                                                    </div>
                                                                </td>
                                                            </tr>
                                                            @else
                                                            <tr>
                                                                <td colspan="5"><span class="text-secondary">There are no opportunities found at this time.</span></td>
                                                            </tr>
                                                            @endif

                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            @else
                            <h5 class="text-secondary text-center mt-5">
                                <p>If you want to check more details or more opportunity options, please sign up today!</p>
                                <p>For sign up click <a class="text-info" href="{{ route('register') }}">here</a></p>
                            </h5>
                            @endif
                    </div>

                    {{-- end new design --}}


                </div>


            </div>
        </div>
    </div>
</div><!-- About End -->
<!-- Full-screen Spinner -->
<div id="overlay" class="d-none">
    <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div>
<!-- Modal -->
<div class="modal opportunities fade" id="leadsViewMoreModal" tabindex="-1" aria-labelledby="leadsViewMoreModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <p>If you want to check more details or more opportunity options, please fill up the form!</p>
                <!-- Close Icon -->
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-left" id="leadsViewMoreModalContent">
                <!-- Modal Content -->
                <div class="response_message d-none">Success!</div>
                <form id="leadUserDetailsForm" novalidate>
                    @csrf
                    <input type="hidden" value="" id="alert_id" name="alert_id" />
                    <div class="mb-3">
                        <label for="userName" class="form-label">Name</label>
                        <input type="text" class="form-control" id="userName" name="userName" required>
                        <div class="invalid-feedback">Please enter your name.</div>
                    </div>
                    <div class="mb-3">
                        <label for="userEmail" class="form-label">Email</label>
                        <input type="email" class="form-control" id="userEmail" name="userEmail" required>
                        <div class="invalid-feedback">Please enter a valid email address.</div>
                    </div>
                    <div class="mb-3">
                        <label for="contactDetails" class="form-label">Mobile</label>
                        <input type="tel" class="form-control phone_us" id="contactDetails" name="contactDetails" required>
                        <div class="invalid-feedback">Please provide a valid US mobile number. Format: (123) 456-7890.</div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary-small" id="submitBtn">Submit</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
            <!-- Full-screen Spinner -->
            <div id="modalSpinnerOverlay" class="d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<!-- jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js" integrity="sha512-pHVGpX7F/27yZ0ISY+VVjyULApbDlD0/X0rgGbTqCE7WFW5MezNTWG/dnhtbBuICzsd0WQPgpE4REBLv+UqChw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Pass Laravel Routes & CSRF Token as Global JS Variables -->
<script>
    var APP_URLS = {
        saveLeads: "{{ route('save-leads') }}",
        getLeadsAlerts: "{{ route('leads-opportunity-alerts') }}",
        calculateLoanAmount: "{{ route('calculate.loan.amount') }}",
    };
    var CSRF_TOKEN = "{{ csrf_token() }}";
</script>
<script src="{{ url('assets/js/leads-form.js')}}"></script>
@endpush