@extends('layout.master')
@section('title', 'Ink Mortgage')
@section('content')
<main class="main">
    <style>
        .form-label {
            margin-bottom: 3px !important;
            font-weight: 500;
            color: #1150ae;
        }
    </style>

    <div class="page-title" data-aos="fade">
        <div class="headingx">
            <div class="container">
                <div class="row d-flex justify-content-center text-center">
                    <div class="col-lg-8">
                        <h1>Get Your FREE Refinance Analysis</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <section id="recent-posts" class="recent-posts section">
        <div class="container">
            <form action="{{route('submit-purchase-form')}}" method="post">
                @csrf
                <div class="row gy-5">
                    <div class="col-xl-4 col-md-6">
                        <div class="mb-4">
                            <label for="propertyforpurchase" class="form-label">Property to Purchase</label>
                            <select name="propertyforpurchase" class="form-select" aria-label="propertyforpurchase">
                                <option selected>Select Property to purchase:</option>
                                <option value="single_family">Single Family Home</option>
                                <option value="Condominium">Condominium</option>
                                <option value="Townhouse_Villa">Townhouse/Villa</option>
                                <option value="multi_family">Multi Family Home (1-4 unit)</option>
                            </select>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label for="noofbed" class="form-label">No. of Bedrooms</label>
                                    <input type="number" class="form-control" placeholder="No. of Bedrooms" name="noofbed">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-4">
                                    <label for="noofbath" class="form-label">No of Bathrooms</label>
                                    <input type="number" class="form-control" placeholder="No. of Bathrooms" name="noofbath">
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <label for="location" class="form-label">Location: City/County/Zip code</label>
                            <input type="text" class="form-control" placeholder="Location" name="location">
                        </div>
                        <div class="mb-4">
                            <label for="purposeofproperty" class="form-label">Purpose of Property</label>
                            <select name="purposeofproperty" class="form-select" aria-label="purposeofproperty">
                                <option value="">Select Purpose of property:</option>
                                <option value="primary">Primary Home</option>
                                <option value="Secondary">Secondary Home</option>
                                <option value="Investment">Investment</option>
                            </select>
                        </div>
                        <div class="mb-4">
                            <label for="purposeofproperty" class="form-label">Expected Date of Purchase</label>
                            <select name="purposeofproperty" class="form-select" aria-label="purposeofproperty">
                                <option value="">Select Expected Time of Purchase:</option>
                                <option value="3-Months">With in 3 Months</option>
                                <option value="6-Months">With in 6 Months</option>
                                <option value="a-Year">With in a Year</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6">
                        <div class="mb-4">
                            <label for="grossincome" class="form-label">Monthly Gross Income</label>
                            <input type="number" class="form-control" placeholder="Monthly Gross Income" name="grossincome">
                        </div>
                        <div class="mb-4">
                            <label for="downpayment" class="form-label">Available Down payment Percentage Amount</label>
                            <input type="number" class="form-control" placeholder="Available Down payment Percentage Amount" name="downpayment">
                        </div>
                        <div class="mb-4">
                            <label for="creditrating" class="form-label">Credit Rating</label>
                            <select name="creditrating" class="form-select" aria-label="creditrating">
                                <option value="">Select your credit score:</option>
                                <option value="Above_Average">Above Average</option>
                                <option value="Average">Average</option>
                                <option value="Below_Average">Below Average</option>
                                <option value="Need_Help">Not Sure? Need some Help</option>
                            </select>
                        </div>
                        <div class="mb-4">
                            <label for="tenure" class="form-label">Mortgage Tenure</label>
                            <select name="tenure" class="form-select" aria-label="tenure">
                                <option value="">Select your credit score:</option>
                                <option value="Above_Average">Above Average</option>
                                <option value="Average">Average</option>
                                <option value="Below_Average">Below Average</option>
                                <option value="Need_Help">Not Sure? Need some Help</option>
                            </select>
                        </div>
                        <div class="mb-4">
                            <label for="addinfo" class="form-label">Any Additional Information</label>
                            <input type="number" class="form-control" name="addinfo">
                        </div>
                    </div>
                    <div class="col-xl-4 col-md-6">
                        <div class="mb-4">
                            <label for="name" class="form-label">Your Name</label>
                            <input type="text" class="form-control" placeholder="Your Name" name="name">
                        </div>
                        <div class="mb-4">
                            <label for="phone" class="form-label">Your Phone Number?*</label>
                            <input type="text" class="form-control" placeholder="Your Number" name="phone" required>
                        </div>
                        <div class="mb-4">
                            <label for="email" class="form-label">Your Email Address?*</label>
                            <input type="email" class="form-control" placeholder="Your Email" name="email" required>
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </section>
    <!-- /Recent Posts Section -->
</main>
@endsection