185 lines
7.7 KiB
PHP
Executable File
185 lines
7.7 KiB
PHP
Executable File
<?php
|
|
/**
|
|
* Mortgage widget template.
|
|
*
|
|
* @version 1.0.0
|
|
*/
|
|
|
|
if ( ! defined( 'ABSPATH' ) ) {
|
|
exit; // Exit if accessed directly
|
|
}
|
|
|
|
global $property;
|
|
|
|
$currency = opalestate_currency_symbol();
|
|
|
|
wp_enqueue_script( 'opalestate-mortgage-calculator', OPALESTATE_PLUGIN_URL . 'assets/js/mortgage.js', [ 'jquery' ], OPALESTATE_VERSION, true );
|
|
wp_enqueue_style( 'opalestate-mortgage-calculator', OPALESTATE_PLUGIN_URL . 'assets/mortgage.css', [], OPALESTATE_VERSION );
|
|
|
|
$deposit_color = apply_filters( 'opalestate_deposit_color', '#2f73e9' );
|
|
|
|
wp_localize_script( 'opalestate-scripts', 'opalestate_mortgage',
|
|
[
|
|
'ajax_url' => admin_url( 'admin-ajax.php' ),
|
|
'currency' => esc_attr__( $currency ),
|
|
'deposit_color' => $deposit_color,
|
|
]
|
|
);
|
|
|
|
$max_price = intval( $property && $property->get_price() ) ? $property->get_price() : opalestate_options( 'search_max_price', 10000000 );
|
|
$max_price = str_replace( ",", "", $max_price );
|
|
$max_price = str_replace( ".", "", $max_price );
|
|
|
|
$start_price = $max_price;
|
|
|
|
$max_price = $max_price + ( $max_price * 20 / 100 );
|
|
|
|
|
|
$rate_start = 10;
|
|
$interest_rate_start = $rate_start / 100;
|
|
$years_start = 2;
|
|
$deposit_start = $max_price / 2;
|
|
$loan_amount = $max_price - $deposit_start;
|
|
$interest_rate_month = $interest_rate_start / 12;
|
|
$number_of_payments_month = $years_start * 12;
|
|
$monthly = round( ( $loan_amount * $interest_rate_month ) / ( 1 - pow( 1 + $interest_rate_month, -$number_of_payments_month ) ), 2 );
|
|
|
|
$total = $deposit_start + ( $monthly * $number_of_payments_month );
|
|
$price_percent = $loan_amount / $total * 100;
|
|
$deposit_percent = $deposit_start / $total * 100;
|
|
|
|
$data_sale_price = [
|
|
'id' => 'sale_price',
|
|
'decimals' => opalestate_get_price_decimals(),
|
|
'unit' => $currency,
|
|
'ranger_min' => 0,
|
|
'ranger_max' => $max_price,
|
|
'input_min' => 0,
|
|
'input_max' => $max_price,
|
|
'mode' => 1,
|
|
'start' => $start_price,
|
|
];
|
|
|
|
$data_deposit = [
|
|
'id' => 'deposit',
|
|
'decimals' => opalestate_get_price_decimals(),
|
|
'unit' => $currency,
|
|
'ranger_min' => 0,
|
|
'ranger_max' => $max_price,
|
|
'input_min' => 0,
|
|
'input_max' => $max_price,
|
|
'mode' => 1,
|
|
'start' => $deposit_start,
|
|
];
|
|
|
|
$data_interest_rate = [
|
|
'id' => 'interest_rate',
|
|
'decimals' => 2,
|
|
'unit' => '%',
|
|
'ranger_min' => 0,
|
|
'ranger_max' => 100,
|
|
'input_min' => 0,
|
|
'input_max' => 100,
|
|
'mode' => 1,
|
|
'start' => $rate_start,
|
|
'step' => 0.05,
|
|
];
|
|
|
|
$data_years = [
|
|
'id' => 'years',
|
|
'decimals' => 1,
|
|
'ranger_min' => 0,
|
|
'ranger_max' => 30,
|
|
'input_min' => 0,
|
|
'input_max' => 30,
|
|
'mode' => 1,
|
|
'start' => $years_start,
|
|
'step' => 0.5,
|
|
];
|
|
|
|
if ( opalestate_options( 'currency_position', 'before' ) == 'before' ) {
|
|
$data_sale_price['unit_position'] = 'prefix';
|
|
$data_deposit['unit_position'] = 'prefix';
|
|
}
|
|
|
|
?>
|
|
<div class="opalestate-box-content box-mortgage">
|
|
<h4 class="outbox-title"><?php esc_html_e( 'Mortgage Payment Calculator', 'opalestate-pro' ); ?></h4>
|
|
<div class="opalestate-box">
|
|
|
|
<div class="opalestate-mortgage-widget-wrap">
|
|
<form class="opalestate-mortgage-form">
|
|
<div class="opalestate-mortgage-chart-container">
|
|
<div class="opalestate-mortgage-chart">
|
|
<div class="opalestate-mortgage-chart-svg">
|
|
<svg viewBox="0 0 64 64" class="pie">
|
|
<circle r="25%" cx="50%" cy="50%" style="stroke-dasharray: <?php echo esc_attr( $price_percent ); ?> 100">
|
|
</circle>
|
|
<circle r="25%" cx="50%" cy="50%"
|
|
style="stroke-dasharray: <?php echo esc_attr( $deposit_percent ); ?> 100; stroke: <?php echo esc_attr( $deposit_color ); ?>; stroke-dashoffset:
|
|
-<?php echo esc_attr( $price_percent ); ?>; animation-delay: 0.25s">
|
|
</circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="opalestate-mortgage-chart-desc">
|
|
<div class="opalestate-mortgage-chart-results">
|
|
<div class="opalestate-mortgage-output">
|
|
<div class='opalestate-mortgage-output-item opalestate-monthly'>
|
|
<label> <?php esc_html_e( 'Your payment', 'opalestate-pro' ); ?></label>
|
|
<span class="opalestate-monthly-value">
|
|
<?php echo esc_html( $currency ); ?><?php echo esc_html( $monthly ); ?>
|
|
</span> /
|
|
<small><?php esc_html_e( 'month', 'opalestate-pro' ); ?></small>
|
|
</div>
|
|
<div class='opalestate-mortgage-output-item opalestate-loan-amount'>
|
|
<label><?php esc_html_e( 'Loan Amount', 'opalestate-pro' ); ?></label>
|
|
<span class="opalestate-loan-amount-value">
|
|
<?php echo esc_html( $currency ); ?><?php echo esc_html( $loan_amount ); ?>
|
|
</span>
|
|
</div>
|
|
<div class="opalestate-mortgage-chart-notice">
|
|
<ul>
|
|
<li><span style="background-color:#02ce76;"></span><?php esc_html_e( 'Your price', 'opalestate-pro' ); ?></li>
|
|
<li><span style="background-color:<?php echo esc_attr( $deposit_color ); ?>;"></span><?php esc_html_e( 'Your deposit', 'opalestate-pro' ); ?></li>
|
|
<li><span style="background-color:#f06;"></span><?php esc_html_e( 'Your interest', 'opalestate-pro' ); ?></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="opalestate-mortgage-form-inputs">
|
|
<div class="form-group opalestate-mortgage-item">
|
|
<div class="opalestate-mortgage-label">
|
|
<?php opalesate_property_slide_ranger_template( esc_html__( 'Sale Price', 'opalestate-pro' ), $data_sale_price ); ?>
|
|
</div>
|
|
</div>
|
|
<div class="form-group opalestate-mortgage-item">
|
|
<div class="opalestate-mortgage-label">
|
|
<?php opalesate_property_slide_ranger_template( esc_html__( 'Deposit', 'opalestate-pro' ), $data_deposit ); ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group opalestate-mortgage-item">
|
|
<div class="opalestate-mortgage-label">
|
|
<?php opalesate_property_slide_ranger_template( esc_html__( 'Annual Interest', 'opalestate-pro' ), $data_interest_rate ); ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group opalestate-mortgage-item">
|
|
<div class="opalestate-mortgage-label">
|
|
<?php opalesate_property_slide_ranger_template( esc_html__( 'Years', 'opalestate-pro' ), $data_years ); ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mortgage-notes">
|
|
<span><?php esc_html_e( 'All calculation are based on tentative and estimated figure and shall not replace any financial advice', 'opalestate-pro' ); ?></span>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|