App Error</ti" alt="Image" style="height: 500px; object-fit: cover; width: 100%;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee27104.jpg" alt="Image" style="height: 500px; object-fit: cover; width: 100%;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee27d08.jpg" alt="Image" style="height: 500px; object-fit: cover; width: 100%;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee216a8.jpg" alt="Image" style="height: 500px; object-fit: cover; width: 100%;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee1622d.jpg" alt="Image" style="height: 500px; object-fit: cover; width: 100%;">
</div>
</div>
<button id="prevImageBtn" class="position-absolute start-0 top-50 translate-middle-y" style="z-index: 10; margin-left: 10px; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.3); color: #fff; cursor: pointer; transition: all 0.3s ease; " onclick="previousImage()">
<i class="bi bi-chevron-left" style="font-size: 20px;"></i>
</button>
<button id="nextImageBtn" class="position-absolute end-0 top-50 translate-middle-y" style="z-index: 10; margin-right: 10px; border-radius: 50%; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.3); color: #fff; cursor: pointer; transition: all 0.3s ease; " onclick="nextImage()">
<i class="bi bi-chevron-right" style="font-size: 20px;"></i>
</button>
</div>
<div class="swiper property-gallary mt-3">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fd6337aa.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee2c32d.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee0a6e8.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee1886a.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee23af1.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee0172f.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee03db8.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee06a6c.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee12dcc.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee1bdd9.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee1e1b6.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee25677.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee2642f.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee2937b.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>App Error</ti" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee27104.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee27d08.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee216a8.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
<div class="swiper-slide">
<img src="https://portal.mcars.ph/upload/car/car-6a756fee1622d.jpg" alt="Image" style="height: 100px; object-fit: cover; width: 100%; cursor: pointer;">
</div>
</div>
</div>
</div>
<style>
/* Car Image Navigation Buttons */
#prevImageBtn, #nextImageBtn {
background-color: rgba(0, 0, 0, 0.6) !important;
border: 1px solid rgba(0, 0, 0, 0.3) !important;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
color: #fff !important;
padding: 0 !important;
}
#prevImageBtn:hover, #nextImageBtn:hover {
background-color: rgba(0, 0, 0, 0.8) !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
#prevImageBtn:active, #nextImageBtn:active {
transform: scale(0.95);
}
/* Swiper slide styling */
.property-gallary2 .swiper-slide {
display: none !important;
}
.property-gallary2 .swiper-slide.active,
.property-gallary2 .swiper-slide[style*="display: block"] {
display: block !important;
}
@media (min-width: 769px) {
.property-gallary2 .swiper-slide img {
height: 500px !important;
object-fit: cover !important;
}
.property-gallary .swiper-slide img {
height: 100px !important;
}
}
@media (max-width: 768px) {
.property-gallary2 .swiper-slide img {
height: 300px !important;
object-fit: contain !important;
}
.property-gallary .swiper-slide img {
height: 60px !important;
}
#prevImageBtn, #nextImageBtn {
transform: scale(0.8);
}
}
</style>
<br>
</div>
<div class="col-md-7">
<div class="post-property">
<div class="">
<div class="flex flex-col mb-3">
<h4 class="font-black">SUBARU WRX STI 2.5 2015 (SEDAN)</h4>
<h4 class="" style="color:#E80401;">UNIT SRP: ₱1,250,000 ONLY</h4>
</div>
</div>
<div class="listing-info">
<div class="d-flex flex-wrap align-items-center gap-2 py-3">
<div class="d-flex align-items-center gap-2 border py-1 px-3 rounded-xl justify-content-center">
<i class="icon-Vector-22 text-danger"></i>
<span class="">Transmission:</span>
<span class="fw-bold" style="color:black">Manual</span>
</div>
<div class="d-flex align-items-center gap-2 border py-1 px-3 rounded-xl justify-content-center">
<i class="icon-dashboard-2 text-danger"></i>
<span class="fw-bold">Mileage:</span>
<span class="fw-bold" style="color:black">0 miles</span>
</div>
<div class="d-flex align-items-center gap-2 border py-1 px-3 rounded-xl justify-content-center">
<i class="icon-Format-color-fill text-danger"></i>
<span class="fw-bold">Color:</span>
<span class="fw-bold" style="color:black">WHITE</span>
</div>
<div class="d-flex align-items-center gap-2 border py-1 px-3 rounded-xl justify-content-center second-row-item">
<i class="icon-Group5 text-danger"></i>
<span class="fw-bold">Fuel type:</span>
<span class="fw-bold" style="color:black">Gas</span>
</div>
<div class="d-flex align-items-center gap-2 border py-1 px-3 rounded-xl justify-content-center second-row-item">
<i class="fa-solid fa-qrcode text-danger"></i>
<span class="fw-bold" style="color:black">Plate Ends in: 1</span>
</div>
<div class="d-flex align-items-center gap-2 border py-1 px-3 rounded-xl justify-content-center second-row-item">
<i class="fa-solid fa-location-dot text-danger"></i>
<span class="fw-bold">Location:</span>
<span class="fw-bold" style="color:black">Malabon</span>
</div>
</div>
</div>
</div>
<div class="payment-terms pb-5">
<h6 class="term-label py-2">
Payment Terms
<span class="badge bg-success text-white fw-bold ms-2">Cash</span>
</h6>
<div class="term-items px-2 pb-3">
<div class="term-item flex gap-2">
<div class="flex justify-center items-center ">
<img src=" assets/images/details/invoice-02.png " class=" w-5 h-5" alt="">
</div>
<span class="term-label">Unit Price:</span>
<span class="term-value" style="color:black;">₱1,250,000</span>
</div>
<div class="term-item flex gap-2">
<div class="flex justify-center items-center ">
<img src=" assets/images/details/payment-02.png " class=" w-5 h-5" alt="">
</div>
<span class="term-label">Payment Method:</span>
<span class="term-value" style="color:black;">Cash Payment Only</span>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modalInquireNow" tabindex="-1" aria-labelledby="modalInquireNowLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header bg-danger text-white position-relative">
<div class="w-100">
<div class="d-flex justify-content-between align-items-center mb-2 mb-md-0">
<h5 class="modal-title text-white m-0" id="modalInquireNowLabel">Application Inquiry </h5>
</div>
</div>
<button type="button" class="btn-close btn-close-white position-absolute end-0 top-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-4">
<div id="inquiryFormContainer">
<!-- Car Details Section (Right on desktop, top on mobile) -->
<div class="car-details-section">
<h5 class="fw-bold mb-3">SUBARU WRX STI 2.5 2015 (Sedan)</h5>
<div class="col-12 d-lg-none">
<img src="https://portal.mcars.ph/upload/car/car-6a756fd6337aa.jpg" class="img-fluid rounded mb-3" alt="SUBARU WRX STI 2.5 2015 (Sedan)" style="width: 100%; object-fit: cover; max-height: 300px;">
</div>
<div class="mb-3">
<h6 class="text-danger mb-2">Payment Details:</h6>
<div class="details-list">
<p class="mb-2 d-flex justify-content-between">
<span class="fw-bold">Unit Price:</span>
<strong>₱1,250,000</strong>
</p>
<p class="mb-0 d-flex justify-content-between">
<span class="fw-bold">Payment Type:</span>
<strong>Cash</strong>
</p>
</div>
</div>
<div class="mb-0 freebies-card">
<style>
/* Freebies responsive styles */
.freebies-card .freebies-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
}
.freebies-card .countdown-timer {
min-width: 150px;
}
.freebies-list {
margin-top: 0.75rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.freebie-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
border-radius: 0.6rem;
background: #f8f9fa;
border: 1px solid #ececec;
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease;
font-size: 0.95rem;
}
.freebie-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
/* visually-hidden checkbox (keeps it accessible) */
.freebie-checkbox {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
.custom-checkbox {
width: 22px;
height: 22px;
min-width: 22px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ddd;
transition: background .12s ease, transform .12s ease;
}
.freebie-checkbox:checked + .custom-checkbox {
background: #E80401;
}
.custom-checkbox svg {
width: 12px;
height: 10px;
opacity: 0;
transform: scale(.85);
transition: opacity .12s ease, transform .12s ease;
display:block;
}
.freebie-checkbox:checked + .custom-checkbox svg {
opacity: 1;
transform: scale(1);
}
/* Select All row style */
.select-all-row {
display: flex;
align-items: center;
gap: .75rem;
padding: .6rem .75rem;
background: #fff3f3;
border: 1px solid rgba(232,4,1,0.08);
border-radius: .6rem;
margin-bottom: .5rem;
}
/* Mobile adjustments */
@media (max-width: 767px) {
.freebies-card .freebies-header {
flex-direction: column;
align-items: stretch;
gap: .5rem;
}
.freebies-card .countdown-timer {
width: 100%;
text-align: center;
padding: .6rem .75rem;
border-radius: .6rem;
}
.freebies-list {
grid-template-columns: 1fr;
gap: .5rem;
}
.custom-checkbox {
width: 26px;
height: 26px;
min-width: 26px;
border-radius: 6px;
}
.freebie-item {
padding: .7rem .9rem;
font-size: 1rem;
}
.select-all-row {
padding: .7rem .9rem;
}
}
</style>
<div class="freebies-header">
<h6 class="text-success m-0">Freebies: <span class="text-danger">*</span></h6>
<div class="countdown-timer" id="countdownTimerFreebies" style="gap:8px; font-size:0.9rem; background: linear-gradient(135deg,#ff6b35 0%,#f7931e 50%,#fbb040 100%);">
<i class="bi bi-fire text-warning"></i>
<span class="countdown-text" style="margin:0;">Limited Time Offer:</span>
<strong id="countdownDisplayFreebies">15:00</strong>
</div>
</div>
<div class="details-list freebies-list" id="freebiesList" role="group" aria-label="Freebies options">
<label class="select-all-row" title="Toggle Select All Freebies">
<input type="checkbox" id="selectAllFreebies" class="freebie-checkbox" />
<span class="custom-checkbox" aria-hidden="true">
<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L4.2 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="freebie-text fw-bold">Select All Freebies</span>
</label>
<label class="freebie-item" title="Free Delivery">
<input type="checkbox" class="freebie-checkbox" name="freebies" value="Free Delivery" />
<span class="custom-checkbox" aria-hidden="true">
<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L4.2 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="freebie-text">Free Delivery</span>
</label>
<label class="freebie-item" title="Free Carwash">
<input type="checkbox" class="freebie-checkbox" name="freebies" value="Free Carwash" />
<span class="custom-checkbox" aria-hidden="true">
<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L4.2 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="freebie-text">Free Carwash</span>
</label>
<label class="freebie-item" title="Free Detailing">
<input type="checkbox" class="freebie-checkbox" name="freebies" value="Free Detailing" />
<span class="custom-checkbox" aria-hidden="true">
<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L4.2 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="freebie-text">Free Detailing</span>
</label>
<label class="freebie-item" title="Free 1 sack of rice">
<input type="checkbox" class="freebie-checkbox" name="freebies" value="Free 1 sack of rice" />
<span class="custom-checkbox" aria-hidden="true">
<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L4.2 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="freebie-text">Free 1 sack of rice</span>
</label>
<label class="freebie-item" title="Free Watch">
<input type="checkbox" class="freebie-checkbox" name="freebies" value="Free Watch" />
<span class="custom-checkbox" aria-hidden="true">
<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5L4.2 8L11 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>
<span class="freebie-text">Free Watch</span>
</label>
</div>
<div class="limited-offer-note mt-3">
<p class="mb-0" style="color:#666; font-weight:500; text-align:center;">
Don't miss this exclusive offer! Get these premium freebies with your car purchase today.
</p>
</div>
<div id="freebieError" class="text-danger small mt-2" style="display:none;"></div>
</div>
</div>
<div class="form-section">
<form id="inquiryForm">
<input type="hidden" name="csrf_token" value="f901806820db7e6002034dfdf72d6925bfd2bef403e73debc4ebcd1a0f9e2bd5"> <input type="hidden" name="car_id" value="CAR93007069">
<input type="hidden" name="refcode" value="">
<div class="row g-2">
<div class="col-12 d-none d-lg-block">
<img src="https://portal.mcars.ph/upload/car/car-6a756fd6337aa.jpg" class="img-fluid rounded mb-3" alt="SUBARU WRX STI 2.5 2015 (Sedan)" style="width: 100%; object-fit: cover; max-height: 300px;">
</div>
<div class="col-12">
<div class="form-floating">
<input type="text" class="form-control" id="firstname" name="firstname" placeholder="First Name" required>
<label for="firstname">First Name</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last Name" required>
<label for="lastname">Last Name</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address" required>
<label for="email">Email Address</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<input type="text" name="contact" id="contact" value="09" class="form-control" pattern="09[0-9]{9}" maxlength="11" minlength="11" title="Please enter a valid 11-digit mobile number starting with 09 (e.g., 09123456789)" oninput="this.value = this.value.replace(/[^0-9]/g, ''); if(this.value.length >= 2 && !this.value.startsWith('09')) { this.value = '09' + this.value.slice(2); }" required>
<label for="contact">Contact Number (09XXXXXXXXX)</label>
</div>
</div>
<div class="col-12">
<div class="form-floating">
<input type="text" class="form-control" name="full_address" id="full_address" placeholder="Complete Address" minlength="20" title="Please enter a valid full address" oninput="validateAddress(this)" required>
<label for="full_address">Complete Address</label>
</div>
</div>
</div>
<div id = "responseApplication" class = "mt-4"></div>
<div class="mt-4">
<button type="submit" class="btn btn-danger btn-lg w-100 rounded-pill">
<i class="bi bi-send-fill me-2"></i>Submit Application
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
.countdown-timer {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #fbb040 100%);
padding: 1rem 1.5rem;
border-radius: 0.875rem;
font-size: 0.95rem;
white-space: nowrap;
animation: premium-pulse 2.5s ease-in-out infinite;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow:
0 8px 32px rgba(255, 107, 53, 0.3),
0 0 20px rgba(255, 177, 64, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
min-width: fit-content;
gap: 0.75rem;
position: relative;
overflow: hidden;
}
.countdown-text {
color: #fff;
font-weight: 600;
letter-spacing: 0.02em;
}
#countdownDisplay {
color: #ffc107;
font-size: 1.15rem;
font-weight: 900;
letter-spacing: 0.08em;
font-variant-numeric: tabular-nums;
min-width: 60px;
text-align: center;
}
.countdown-timer .bi-fire {
font-size: 1rem;
animation: bounce 1s ease-in-out infinite;
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 2px 8px rgba(232, 4, 1, 0.1), 0 0 0 0 rgba(255, 193, 7, 0.3);
}
50% {
box-shadow: 0 2px 12px rgba(232, 4, 1, 0.15), 0 0 0 6px rgba(255, 193, 7, 0);
}
}
.countdown-timer.warning {
background: linear-gradient(135deg, rgba(255, 107, 107, 0.2), rgba(232, 4, 1, 0.15));
border-color: rgba(255, 107, 107, 0.5);
box-shadow: 0 2px 12px rgba(255, 107, 107, 0.15);
}
.countdown-timer.warning #countdownDisplay {
color: #ff6b6b;
animation: blink 0.6s ease-in-out infinite;
}
.countdown-timer.warning .bi-fire {
animation: shake 0.5s ease-in-out infinite;
color: #ff6b6b;
}
@keyframes blink {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0.5; }
}
@keyframes shake {
0%, 100% { transform: translateX(0) rotate(0deg); }
25% { transform: translateX(-2px) rotate(-5deg); }
75% { transform: translateX(2px) rotate(5deg); }
}
@media (max-width: 768px) {
.countdown-timer {
font-size: 0.75rem;
padding: 0.6rem 0.9rem;
margin-top: 0.8rem;
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #fbb040 100%);
border: 2px solid rgba(255, 255, 255, 0.3);
width: 100%;
border-radius: 0.75rem;
box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3), 0 0 20px rgba(255, 177, 64, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
justify-content: center;
gap: 0.5rem;
}
#countdownDisplay {
font-size: 1.2rem;
letter-spacing: 0.1em;
font-weight: 900;
}
.countdown-text {
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.02em;
}
.countdown-timer .bi-fire {
font-size: 1.1rem;
}
.modal-header {
flex-direction: column;
align-items: stretch;
padding: 1rem;
gap: 0;
}
.modal-header > div {
width: 100%;
}
.modal-header .btn-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
}
.countdown-timer {
width: 100%;
margin-top: 0.8rem !important;
}
.countdown-timer.warning {
background: linear-gradient(135deg, #ff4757 0%, #ff6348 50%, #ff6b6b 100%);
border-color: rgba(255, 255, 255, 0.4);
box-shadow: 0 8px 32px rgba(255, 71, 87, 0.5), 0 0 20px rgba(255, 107, 107, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.countdown-timer.warning .bi-fire {
animation: shake 0.5s ease-in-out infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-2px); }
75% { transform: translateX(2px); }
}
}
@media (max-width: 576px) {
.countdown-timer {
font-size: 0.7rem;
padding: 0.5rem 0.8rem;
margin-top: 0.6rem;
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #fbb040 100%);
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(255, 107, 53, 0.3), 0 0 20px rgba(255, 177, 64, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
#countdownDisplay {
font-size: 1.1rem;
}
.countdown-text {
font-size: 0.7rem;
}
.countdown-timer .bi-fire {
font-size: 1rem;
margin-right: 0.3rem !important;
}
.modal-header {
padding: 0.8rem;
}
.modal-header > div {
margin-bottom: 0.8rem;
}
}
@media (min-width: 769px) {
.modal-header {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
}
.modal-header > div {
display: flex;
align-items: center;
gap: 1.5rem;
flex: 1;
}
.modal-title {
flex-shrink: 0;
}
.countdown-timer {
margin-left: auto;
margin-top: 0;
}
}
/* Custom styles for the inquiry form */
.form-floating > .form-control {
padding: 1rem 0.75rem;
height: calc(3.5rem + 2px);
line-height: 1.25;
border-radius: 0.5rem;
}
.form-floating > label {
padding: 1rem 0.75rem;
}
.form-floating > .form-control:focus {
border-color: #dc3545;
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}
.form-floating > .form-control:not(:placeholder-shown) ~ label {
transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem);
color: #6c757d;
}
.form-floating > textarea.form-control {
height: 100px;
}
.form-text {
font-size: 12px;
color: #6c757d;
display: inline-block;
width: 110px;
line-height: 1;
text-align: right;
padding-right: 8px;
white-space: nowrap;
overflow: visible;
margin: 0;
}
@media (min-width: 768px) {
.form-text {
font-size: 0.50rem;
white-space: nowrap !important;
}
}
@media (max-width: 767px) {
.form-text {
white-space: normal;
font-size: 0.50rem;
line-height: 1;
display: block;
}
}
/* Responsive adjustments */
@media (max-width: 768px) {
.form-floating > .form-control {
height: calc(3rem + 2px);
}
.form-floating > label {
font-size: 0.9rem;
}
}
/* Modal Layout Styles */
#inquiryFormContainer {
width: 100%;
display: block;
}
.form-section {
width: 100%;
}
.form-section form {
width: 100%;
}
.form-section .row {
margin-left: 0;
margin-right: 0;
}
/* Desktop: Two-column grid layout */
@media (min-width: 992px) {
#inquiryFormContainer {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 2rem;
align-items: start;
}
.form-section {
order: 1;
min-width: 0;
overflow: hidden;
}
.form-section form {
width: 100%;
}
.form-section .row {
width: 100%;
}
.car-details-section {
order: 2;
padding: 1.5rem;
background-color: #f9f9f9;
border-radius: 0.5rem;
border: 1px solid #e9ecef;
max-height: 700px;
overflow-y: auto;
min-width: 0;
}
.car-image-container {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.car-image-container img {
width: 100%;
height: auto;
max-width: 100%;
}
}
/* Tablet: Adjust column ratio */
@media (min-width: 768px) and (max-width: 991px) {
#inquiryFormContainer {
display: block;
}
.car-details-section {
order: -1;
margin-bottom: 2rem;
}
.form-section {
order: 0;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #e9ecef;
}
}
/* Mobile: Stacked layout with form at bottom */
@media (max-width: 767px) {
#inquiryFormContainer {
display: flex;
flex-direction: column;
}
.car-details-section {
order: 1;
margin-bottom: 2rem;
margin-top: 0;
padding-top: 0;
border-top: none;
}
.form-section {
order: 2;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #e9ecef;
}
}
/* Additional details list styling */
.details-list {
font-size: 0.95rem;
color: #666;
}
.details-list strong {
color: #333;
}
.details-list p {
margin: 0.5rem 0;
}
.freebies-list {
margin-top: 1rem;
}
.car-image-container {
width: 100%;
overflow: hidden;
border-radius: 0.5rem;
max-width: 100%;
}
.car-image-container img {
width: 100%;
height: auto;
display: block;
max-width: 100%;
}
/* Custom checkbox styling for freebies */
.freebie-item {
cursor: pointer;
user-select: none;
}
.freebie-checkbox {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.custom-checkbox {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
background: #ddd;
border-radius: 4px;
flex: 0 0 20px;
transition: background 0.12s ease, transform 0.12s ease;
}
.custom-checkbox svg {
width: 12px;
height: 10px;
opacity: 0;
transform: scale(0.85);
transition: opacity 0.12s ease, transform 0.12s ease;
display: block;
}
.freebie-checkbox:checked + .custom-checkbox {
background: #E80401;
}
.freebie-checkbox:checked + .custom-checkbox svg {
opacity: 1;
transform: scale(1);
}
</style>
<!-- JavaScript for Address Validation -->
<script>
function validateAddress(textarea) {
const submitBtn = document.querySelector('#inquiryForm button[type="submit"]');
if (textarea.value.length < 20) {
textarea.setCustomValidity('Please enter at least 20 characters');
} else {
textarea.setCustomValidity('');
}
}
// Car Image Gallery Variables
window.carImages = ["car-6a756fd6337aa.jpg","car-6a756fee2c32d.jpg","car-6a756fee0a6e8.jpg","car-6a756fee1886a.jpg","car-6a756fee23af1.jpg","car-6a756fee0172f.jpg","car-6a756fee03db8.jpg","car-6a756fee06a6c.jpg","car-6a756fee12dcc.jpg","car-6a756fee1bdd9.jpg","car-6a756fee1e1b6.jpg","car-6a756fee25677.jpg","car-6a756fee2642f.jpg","car-6a756fee2937b.jpg","<!DOCTYPE html>\r\n <html lang=\"en\">\r\n <head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>App Error<\/ti","car-6a756fee27104.jpg","car-6a756fee27d08.jpg","car-6a756fee216a8.jpg","car-6a756fee1622d.jpg"];
window.currentImageIndex = 0;
window.carImageBaseUrl = 'https://portal.mcars.ph/upload/car/';
// Car Image Gallery Functions
function previousImage() {
if (window.carImages.length <= 1) return;
window.currentImageIndex = (window.currentImageIndex - 1 + window.carImages.length) % window.carImages.length;
updateMainImage();
}
function nextImage() {
if (window.carImages.length <= 1) return;
window.currentImageIndex = (window.currentImageIndex + 1) % window.carImages.length;
updateMainImage();
}
function goToImage(index) {
if (index >= 0 && index < window.carImages.length) {
window.currentImageIndex = index;
updateMainImage();
}
}
function updateMainImage() {
const slides = document.querySelectorAll('.property-gallary2 .swiper-slide');
const thumbnails = document.querySelectorAll('.property-gallary .swiper-slide');
if (slides.length > 0) {
slides.forEach((slide, index) => {
const img = slide.querySelector('img');
if (index === window.currentImageIndex) {
slide.style.display = 'block';
slide.style.opacity = '1';
slide.style.visibility = 'visible';
if (img) {
img.style.display = 'block';
}
} else {
slide.style.display = 'none';
slide.style.opacity = '0';
slide.style.visibility = 'hidden';
if (img) {
img.style.display = 'none';
}
}
});
}
if (thumbnails.length > 0) {
thumbnails.forEach((thumb, index) => {
if (index === window.currentImageIndex) {
thumb.style.borderColor = '#0d6efd';
thumb.style.borderWidth = '2px';
} else {
thumb.style.borderColor = 'transparent';
}
});
}
}
// Keyboard navigation for images
document.addEventListener('keydown', function(e) {
if (e.key === 'ArrowLeft') {
previousImage();
} else if (e.key === 'ArrowRight') {
nextImage();
}
});
// Select All Freebies Functionality
document.addEventListener('DOMContentLoaded', function() {
// Initialize image gallery
if (window.carImages && window.carImages.length > 0) {
updateMainImage();
}
const selectAllCheckbox = document.getElementById('selectAllFreebies');
const freebieCheckboxes = document.querySelectorAll('input[name="freebies"]');
if (selectAllCheckbox) {
selectAllCheckbox.addEventListener('change', function() {
freebieCheckboxes.forEach(checkbox => {
checkbox.checked = this.checked;
});
});
// Update "Select All" checkbox state when individual checkboxes change
freebieCheckboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
const allChecked = Array.from(freebieCheckboxes).every(cb => cb.checked);
const anyChecked = Array.from(freebieCheckboxes).some(cb => cb.checked);
selectAllCheckbox.checked = allChecked;
// Clear error when at least one is selected
if (anyChecked) {
const freebieError = document.getElementById('freebieError');
if (freebieError) {
freebieError.style.display = 'none';
}
}
});
});
}
});
$("#inquiryForm").on('submit', function(e) {
e.preventDefault();
const form = $(this);
const submitBtn = form.find('button[type="submit"]');
const address = document.getElementById('full_address');
const freebieError = document.getElementById('freebieError');
const freebieCheckboxes = document.querySelectorAll('input[name="freebies"]:checked');
// Validate address
if (address.value.length < 20) {
address.setCustomValidity('Please enter at least 20 characters');
address.reportValidity();
return false;
}
// Validate freebies - at least one must be selected
if (freebieCheckboxes.length === 0) {
freebieError.textContent = 'Please select all freebies';
freebieError.style.display = 'block';
document.getElementById('freebiesList').scrollIntoView({ behavior: 'smooth', block: 'center' });
return false;
}
// Clear freebie error if validation passed
freebieError.style.display = 'none';
submitBtn.prop('disabled', true)
.html('<i class="spinner-border spinner-border-sm me-2"></i>Processing...');
$.ajax({
url: 'api/buyer/inquire.php',
type: 'POST',
data: form.serialize(),
success: function(response) {
if (response) {
$('#responseApplication').html(response);
}
},
error: function() {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'An error occurred! Please try again.'
});
},
complete: function() {
submitBtn.prop('disabled', false)
.html('<i class="bi bi-send-fill me-2"></i>Submit Application');
}
});
});
// Countdown Timer Functionality
function initializeCountdownTimer() {
const COUNTDOWN_DURATION = 15 * 60; // 15 minutes in seconds
const countdownDisplay = document.getElementById('countdownDisplayFreebies');
const countdownTimer = document.getElementById('countdownTimerFreebies');
const inquiryModal = document.getElementById('modalInquireNow');
const STORAGE_KEY = 'countdownTimer_endTime';
const STARTED_KEY = 'countdownTimer_started';
let countdownInterval;
let timeRemaining = COUNTDOWN_DURATION;
let countdownStarted = false;
// Function to format time as MM:SS
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}
// Function to get remaining time from storage
function getStoredTimeRemaining() {
const storedEndTime = localStorage.getItem(STORAGE_KEY);
if (!storedEndTime) {
return null;
}
const endTime = parseInt(storedEndTime);
const now = Math.floor(Date.now() / 1000);
const remaining = endTime - now;
// If time has expired, return null
if (remaining <= 0) {
localStorage.removeItem(STORAGE_KEY);
localStorage.removeItem(STARTED_KEY);
return null;
}
return remaining;
}
// Function to save countdown end time to storage
function saveCountdownEndTime(duration) {
const now = Math.floor(Date.now() / 1000);
const endTime = now + duration;
localStorage.setItem(STORAGE_KEY, endTime.toString());
localStorage.setItem(STARTED_KEY, 'true');
}
// Check if countdown was already started
function isCountdownStarted() {
return localStorage.getItem(STARTED_KEY) === 'true';
}
// Function to update countdown display
function updateCountdown() {
if (countdownDisplay) {
countdownDisplay.textContent = formatTime(timeRemaining);
}
// Add warning class when less than 5 minutes (300 seconds)
if (timeRemaining <= 300) {
if (countdownTimer) {
countdownTimer.classList.add('warning');
}
} else {
if (countdownTimer) {
countdownTimer.classList.remove('warning');
}
}
// When countdown reaches 0, close modal
if (timeRemaining <= 0) {
clearInterval(countdownInterval);
localStorage.removeItem(STORAGE_KEY);
localStorage.removeItem(STARTED_KEY);
countdownStarted = false;
if (inquiryModal) {
const modal = bootstrap.Modal.getInstance(inquiryModal);
if (modal) {
modal.hide();
}
}
// Show expiration message
if (countdownDisplay) {
countdownDisplay.textContent = '00:00';
Swal.fire({
icon: 'warning',
title: 'Time Expired',
text: 'Your limited time offer has expired. Please open the form again to get a new 15-minute window.'
});
}
return;
}
timeRemaining--;
}
// Initialize on page load - check if countdown is already running
function initializeOnLoad() {
const storedTime = getStoredTimeRemaining();
const wasStarted = isCountdownStarted();
if (storedTime !== null && wasStarted) {
// Countdown is already running from a previous session
timeRemaining = storedTime;
countdownStarted = true;
// Display the remaining time immediately
updateCountdown();
// If modal is open, start the interval
if (inquiryModal && inquiryModal.classList.contains('show')) {
if (countdownInterval) clearInterval(countdownInterval);
countdownInterval = setInterval(updateCountdown, 1000);
}
} else {
// No active countdown, clean up storage
timeRemaining = COUNTDOWN_DURATION;
countdownStarted = false;
localStorage.removeItem(STORAGE_KEY);
localStorage.removeItem(STARTED_KEY);
}
}
// Start countdown when modal is shown
if (inquiryModal) {
inquiryModal.addEventListener('show.bs.modal', function() {
// If countdown was never started, start it now
if (!countdownStarted) {
timeRemaining = COUNTDOWN_DURATION;
saveCountdownEndTime(COUNTDOWN_DURATION);
countdownStarted = true;
} else {
// Use the stored time remaining
const storedTime = getStoredTimeRemaining();
if (storedTime !== null) {
timeRemaining = storedTime;
}
}
// Clear any existing interval
if (countdownInterval) {
clearInterval(countdownInterval);
}
// Initial update
updateCountdown();
// Start countdown
countdownInterval = setInterval(updateCountdown, 1000);
});
// Stop countdown when modal is hidden
inquiryModal.addEventListener('hide.bs.modal', function() {
if (countdownInterval) {
clearInterval(countdownInterval);
}
// Note: We keep the stored time so it continues on page reload
});
}
// Initialize on page load
initializeOnLoad();
}
// Initialize countdown when page loads
initializeCountdownTimer();
</script>
<!-- Agent Card Section -->
<div class="agent-card-section">
</div>
</div>
<div class="mt-4">
<h5 class="mb-3">Basic Requirements</h5>
<div class="grid md:grid-cols-1 sm:grid-cols-1 gap-4 mobile-responsive mb-5" style="max-width: 600px;">
<div class="grid grid-cols-2 gap-3 mobile-responsive-valid-id">
<div class="p-3 rounded-lg flex gap-3 justify-start items-center" style="background-color:#E80401; color:white;">
<i class="fa-solid fa-address-card text-2xl"></i> 2 valid IDs
</div>
<div class="p-3 rounded-lg flex gap-3 justify-start items-center" style="background-color:#E80401; color:white;">
<i class="fa-solid fa-receipt text-2xl"></i> Proof of Billing
</div>
<div class="p-3 rounded-lg flex gap-3 justify-start items-center" style="background-color:#E80401; color:white;">
<i class="fa-solid fa-wallet text-2xl"></i> Proof of income
</div>
<div class="p-3 rounded-lg flex gap-3 justify-start items-center" style="background-color:#E80401; color:white;">
<i class="fa-solid fa-money-bill text-2xl"></i> Initial cashout
</div>
</div>
<div class="flex flex-col gap-2">
<div class="border-[#E80401] p-3 rounded-lg flex justfiy-start items-center gap-3 border border-danger" style="color:#E80401">
<i class="fa-solid fa-circle-check"></i>
<p>One Day Process</p>
</div>
<div class="border border-[#E80401] p-3 rounded-lg flex justfiy-start items-center gap-3 border-danger" style="color:#E80401">
<i class="fa-solid fa-circle-check"></i>
<p>Same Day Release</p>
</div>
<div class="border border-[#E80401] p-3 rounded-lg flex justfiy-start items-center gap-3 border-danger" style="color:#E80401">
<i class="fa-solid fa-circle-check"></i>
<p>No Need Bank Approval</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div><style>
.floating-menu {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
}
.menu-button {
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
cursor: pointer;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s;
}
.menu-button:hover {
transform: scale(1.1);
}
.icons8-speech-bubble {
display: inline-block;
width: 164px;
height: 164px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.37);
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwLDAsMjU2LDI1NiIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgZmlsbC1ydWxlPSJub256ZXJvIj48ZyBmaWxsPSIjZGMyNjI2IiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgc3Ryb2tlLWxpbmVqb2luPSJtaXRlciIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtZGFzaGFycmF5PSIiIHN0cm9rZS1kYXNob2Zmc2V0PSIwIiBmb250LWZhbWlseT0ibm9uZSIgZm9udC13ZWlnaHQ9Im5vbmUiIGZvbnQtc2l6ZT0ibm9uZSIgdGV4dC1hbmNob3I9Im5vbmUiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTogbm9ybWFsIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjA3NDEyLDI1Ni4wNzQxMikgcm90YXRlKC05MCkgc2NhbGUoNCw0KSI+PHBhdGggZD0iTTMyLDZjLTkuNTkwMzcsMC4wMTM2OSAtMTguMzk0NDgsNS4zMDU3MiAtMjIuOTA2MTYsMTMuNzY4NTljLTQuNTExNjgsOC40NjI4NyAtMy45OTgyNCwxOC43MjIyMiAxLjMzNTg0LDI2LjY5MjM1bC0yLjQyOTY5LDExLjUzOTA2bDEyLjU5Mzc1LC0yLjY1MjM0YzMuNTUwOTIsMS43Mzk5OSA3LjQ1MTk0LDIuNjQ3MTIgMTEuNDA2MjUsMi42NTIzNGMxNC4zNTk0LDAgMjYsLTExLjY0MDYgMjYsLTI2YzAsLTE0LjM1OTQgLTExLjY0MDYsLTI2IC0yNiwtMjZ6Ij48L3BhdGg+PC9nPjwvZz48L3N2Zz4=') 50% 50% no-repeat;
background-size: 123%;
pointer-events: none;
}
.menu-items {
position: absolute;
bottom: 70px;
right: 0;
visibility: hidden;
opacity: 0;
display: flex;
flex-direction: column;
gap: 10px;
transform: translateY(20px);
transition: all 0.3s ease-in-out;
}
.menu-item {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
transition: all 0.2s ease-in-out;
transform: scale(0.8);
position: relative;
}
.menu-item:hover {
transform: scale(1.1);
}
.menu-open .menu-items {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.menu-open .menu-item {
transform: scale(1);
transition-delay: calc(0.05s * var(--i));
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Page Loading Logic
const pageLoader = document.getElementById('pageLoader');
const inquiryModal = document.getElementById('modalInquireNow');
let hasShownPopup = false; // Track if popup has been shown
if (pageLoader) {
// Function to show popup
const showPopup = () => {
// Check if inquiry modal is not open before showing agent popup
if (!hasShownPopup && !inquiryModal.classList.contains('show')) {
pageLoader.style.display = 'flex';
// Force reflow
pageLoader.offsetHeight;
pageLoader.style.opacity = '1';
pageLoader.style.pointerEvents = 'auto';
hasShownPopup = true;
}
};
// Function to hide popup
window.hideAgentPopup = () => {
pageLoader.style.opacity = '0';
pageLoader.style.pointerEvents = 'none';
setTimeout(() => {
pageLoader.style.display = 'none';
}, 800); // Match transition duration
};
// Show popup after 5 seconds on initial load
setTimeout(showPopup, 5000);
}
// Floating Menu Logic
const menuButton = document.getElementById('floatingMenuButton');
const floatingMenu = document.querySelector('.floating-menu');
const menuItems = floatingMenu.querySelector('.menu-items');
menuButton.addEventListener('click', function(e) {
e.stopPropagation();
floatingMenu.classList.toggle('menu-open');
});
if (menuItems) {
menuItems.addEventListener('click', function(e) {
e.stopPropagation();
});
}
document.addEventListener('click', function() {
if (floatingMenu.classList.contains('menu-open')) {
floatingMenu.classList.remove('menu-open');
}
});
// Prevent agent popup when inquiry modal is opened
inquiryModal.addEventListener('show.bs.modal', function () {
hasShownPopup = true; // Prevent agent popup from showing
if (pageLoader) {
hideAgentPopup(); // Hide agent popup if it's showing
}
// Set a flag indicating modal is about to open
window.modalAboutToOpen = true;
});
inquiryModal.addEventListener('hidden.bs.modal', function () {
// Clear the flag when modal is closed
window.modalAboutToOpen = false;
});
// Global Countdown Timer Functionality - REMOVED
// Limited Time Offer Card Functions - REMOVED
});
</script>
<script>
function calculateMonthlyPayment() {
const totalPrice = parseFloat(document.getElementById("totalPrice").value) || 0;
const downPayment = parseFloat(document.getElementById("initial_down_payment").value) || 0;
const months = parseInt(document.getElementById("rental_period_months").value) || 0;
const interestRate = parseFloat(document.getElementById("interest_rate").value) || 0;
if (downPayment >= totalPrice || months <= 0 || interestRate < 0) {
document.getElementById("amortization").innerHTML = `<div class="alert alert-warning">Please enter valid inputs.</div>`;
// Reset displays
//document.getElementById("displayDownPayment").textContent = '--';
//document.getElementById("displayMonths").textContent = '--';
//document.getElementById("displayMonthlyPayment").textContent = '--';
//document.getElementById("displayTotalPayable").textContent = '--';
return;
}
const loanAmount = totalPrice - downPayment;
const monthlyRate = interestRate / 100 / 12;
let monthlyPayment = 0;
if (monthlyRate === 0) {
monthlyPayment = loanAmount / months;
} else {
const factor = Math.pow(1 + monthlyRate, months);
monthlyPayment = loanAmount * monthlyRate * factor / (factor - 1);
}
const totalPayable = monthlyPayment * months + downPayment;
// Update the payment terms display
// document.getElementById("displayDownPayment").textContent = downPayment.toLocaleString('en-PH', {
// style: 'currency',
// currency: 'PHP'
// });
// document.getElementById("displayMonths").textContent = months;
// document.getElementById("displayMonthlyPayment").textContent = monthlyPayment.toLocaleString('en-PH', {
// style: 'currency',
// currency: 'PHP'
// });
// document.getElementById("displayTotalPayable").textContent = totalPayable.toLocaleString('en-PH', {
// style: 'currency',
// currency: 'PHP'
// });
// Update the calculation summary
document.getElementById("amortization").innerHTML = `
<div class="alert alert-info mt-4">
<strong>Total Price:</strong> ${totalPrice.toLocaleString('en-PH', { style: 'currency', currency: 'PHP' })}<br>
<strong>Down Payment:</strong> ${downPayment.toLocaleString('en-PH', { style: 'currency', currency: 'PHP' })}<br>
<strong>Loan Amount:</strong> ${loanAmount.toLocaleString('en-PH', { style: 'currency', currency: 'PHP' })}<br>
<strong>Monthly Payment:</strong> ${monthlyPayment.toLocaleString('en-PH', { style: 'currency', currency: 'PHP' })}<br>
<strong>Total Payable (Including Down Payment):</strong> ${totalPayable.toLocaleString('en-PH', { style: 'currency', currency: 'PHP' })}
</div>
`;
}
// Only add event listeners if the elements exist
const initialDownPayment = document.getElementById("initial_down_payment");
const rentalPeriodMonths = document.getElementById("rental_period_months");
const interestRate = document.getElementById("interest_rate");
if (initialDownPayment && rentalPeriodMonths && interestRate) {
initialDownPayment.addEventListener("input", calculateMonthlyPayment);
rentalPeriodMonths.addEventListener("input", calculateMonthlyPayment);
interestRate.addEventListener("input", calculateMonthlyPayment);
}
</script>
<!-- Footer -->
<footer id="footer" class="clearfix bg-footer2 pd-t81 re-hi">
<div class="themesflat-container">
<div class="row footer-top">
<div class="col-lg-6 col-md-12 col-12 pd-r80 ">
<h2 class="title-footer-top" style="font-size: 2rem;">
Do you Have <span class="red-title">something</span> to sell?
</h2>
</div>
<div class="col-lg-6 col-md-12 col-12 t-al-right pt-20">
<a href="https://www.m.me/McarsPhMain/" target="_blank" class="btn-sell">Sell your car today</a>
</div>
</div>
<div class="row footer-main">
<div class="col-lg-4 col-md-6 col-12">
<div class="widget widget-info">
<img src="https://shop.mcars.ph/assets/logo/white.png" alt="Logo Footer">
<ul>
<li>
<i class="icon-Vector1"></i>
<p>Mcars PH, #95 Yanga St, Maysilo, Malabon</p>
</li>
<li>
<i class="icon-Group-1"></i>
<p>support@mcars.ph</p>
</li>
<li>
<i class="icon-Group-11"></i>
<p>09554223366</p>
</li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="widget widget-menu pl-60">
<h3>Quick Links</h3>
<ul class="box-menu">
<li><a href="home">Home</a></li>
<li><a href="cars">Car List</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6 col-12">
<div class="widget widget-menu pl-60">
<h3>Find Us</h3>
<div onclick="openMapModal()"
style="cursor:pointer;border-radius:10px;overflow:hidden;max-width:100%;position:relative;">
<iframe src="https://www.google.com/maps?q=Mcars+PH+95+Yanga+St+Maysilo+Malabon&output=embed&z=14"
width="100%"
height="180"
style="border:0;pointer-events:none;"
loading="lazy">
</iframe>
<div style="position:absolute;inset:0;background:rgba(0,0,0,0.08);"></div>
</div>
<div style="margin-top:8px;font-size:0.78rem;color:rgba(255,255,255,0.6);text-align:center;">
<i class="icon-Vector1" style="color:#ef4444;"></i> Mcars PH, #95 Yanga St, Maysilo, Malabon </div>
</div>
</div>
</div>
<!-- Map Modal -->
<div class="modal fade" id="mapModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content" style="border-radius:16px;overflow:hidden;">
<div class="modal-header border-0 pb-0" style="padding:20px 24px 0;">
<h5 class="modal-title fw-bold">Mcars PH Location</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body" style="padding:16px 24px 24px;">
<div style="border-radius:12px;overflow:hidden;margin-bottom:14px;">
<iframe id="mapIframe"
width="100%"
height="400"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<div style="margin-bottom:12px;">
<div class="input-group">
<input type="text" id="originAddress" class="form-control form-control-sm"
placeholder="Enter your address or location..."
style="border-radius:8px 0 0 8px;font-size:0.85rem;"
onkeydown="if(event.key==='Enter'){event.preventDefault();getDirections();}">
<button class="btn btn-danger btn-sm fw-semibold d-inline-flex align-items-center gap-1"
style="border-radius:0 8px 8px 0;"
onclick="getDirections()">
<i class="icon-Vector1"></i> Get Directions
</button>
</div>
</div>
<div class="d-flex flex-wrap gap-2">
<span class="text-muted small">
<i class="icon-Vector1"></i> Mcars PH, #95 Yanga St, Maysilo, Malabon </span>
</div>
</div>
</div>
</div>
</div>
<script>
function openMapModal() {
const iframe = document.getElementById('mapIframe');
iframe.src = 'https://www.google.com/maps?q=Mcars+PH+95+Yanga+St+Maysilo+Malabon&output=embed&z=15';
const modal = new bootstrap.Modal(document.getElementById('mapModal'));
modal.show();
}
function getDirections() {
const origin = document.getElementById('originAddress').value.trim();
if (!origin) { document.getElementById('originAddress').focus(); return; }
window.open('https://www.google.com/maps/dir/?api=1&origin=' + encodeURIComponent(origin) + '&destination=Mcars+PH+95+Yanga+St+Maysilo+Malabon', '_blank');
}
document.getElementById('mapModal')?.addEventListener('hidden.bs.modal', function () {
document.getElementById('mapIframe').src = '';
});
</script>
<div class="row footer-bottom small">
<div class="col-12 col-md-6 col-lg-6 col-xl-4 col-xxl-4">
<p class="coppy-right">© 2026 MCARS PH All Rights Reserved</p>
</div>
<div class="col-12 col-md-6 col-lg-6 col-xl-4 col-xxl-4">
<ul class="social-icon">
<li>
<a href="https://www.facebook.com/McarsPhMain/" target="_blank"><i class="icon-6"></i></a>
</li>
</ul>
</div>
<div class="col-md-12 col-lg-12 col-xl-4 col-xxl-4">
<ul class="bottom-bar-menu">
<li><a href="privacy-policy">Privacy Policy</a></li>
<li><a href="terms-agreement">Terms Agreement</a></li>
</ul>
</div>
</div>
</div>
</footer><!-- /#footer -->
</div>
<!-- /Page -->
</div>
<!-- /Wrapper -->
<!-- Javascript -->
<script src="https://shop.mcars.ph/assets/js/bootstrap.min.js"></script>
<script src="https://shop.mcars.ph/assets/js/jquery.nice-select.min.js"></script>
<script src="https://shop.mcars.ph/assets/js/swiper-bundle.min.js"></script>
<script src="https://shop.mcars.ph/assets/js/swiper.js"></script>
<script src="https://shop.mcars.ph/assets/js/jquery-countTo.js"></script>
<script src="https://shop.mcars.ph/assets/js/nouislider.min.js"></script>
<script src="https://shop.mcars.ph/assets/js/price-ranger.js"></script>
<script src="https://shop.mcars.ph/assets/js/magnific-popup.min.js"></script>
<script src="https://shop.mcars.ph/assets/js/wow.min.js"></script>
<script src="https://shop.mcars.ph/assets/js/main.js"></script>
<script src="https://shop.mcars.ph/assets/js/app.js"></script>
</body>
</html> 