<?php if (! $__env->hasRenderedOnce('000b9e8d-7800-4435-98c4-d73a9897ad75')): $__env->markAsRenderedOnce('000b9e8d-7800-4435-98c4-d73a9897ad75'); ?>
<link rel="stylesheet" href="<?php echo e(asset('vendor/core/plugins/fob-mortgage-calculator/css/mortgage-calculator.css?v=1.1.0')); ?>">
<?php endif; ?>

<?php
    $isRtl = BaseHelper::isRtlEnabled();

    $wrapperClasses = ['mortgage-calculator'];

    if ($isRtl) {
        $wrapperClasses[] = 'mortgage-calculator--rtl';
    }

    if ($style === 'compact') {
        $wrapperClasses[] = 'mortgage-calculator--compact';
    }

    if ($layout === 'vertical') {
        $wrapperClasses[] = 'mortgage-calculator--vertical';
    }

    if ($formStyle !== 'default') {
        $wrapperClasses[] = 'mortgage-calculator--style-' . $formStyle;
    }

    $wrapperClass = implode(' ', $wrapperClasses);

    $inlineStyles = ['--mc-primary: ' . $primaryColor];
    if (!empty($formMargin)) {
        $inlineStyles[] = 'margin: ' . e($formMargin);
    }
    if (!empty($formPadding)) {
        $inlineStyles[] = 'padding: ' . e($formPadding);
    }
    $inlineStyle = implode('; ', $inlineStyles);

    $containerClasses = ['mortgage-calculator-container'];

    if ($isRtl) {
        $containerClasses[] = 'mortgage-calculator-container--rtl';
    }

    if ($formSize !== 'full') {
        $containerClasses[] = 'mortgage-calculator-container--' . $formSize;
    }
    if ($formAlignment !== 'start') {
        $containerClasses[] = 'mortgage-calculator-container--align-' . $formAlignment;
    }
    $containerClass = implode(' ', $containerClasses);
?>

<div class="<?php echo e($containerClass); ?>">
<div class="<?php echo e($wrapperClass); ?>" id="<?php echo e($uniqueId); ?>" data-calculator style="<?php echo e($inlineStyle); ?>">
    <?php if($formTitle || $formDescription): ?>
    <div class="mortgage-calculator__header">
        <?php if($formTitle): ?>
        <h3 class="mortgage-calculator__title"><?php echo e($formTitle); ?></h3>
        <?php endif; ?>
        <?php if($formDescription): ?>
        <p class="mortgage-calculator__description"><?php echo e($formDescription); ?></p>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    
    <div class="mortgage-calculator__tabs">
        <button type="button" class="mortgage-calculator__tab mortgage-calculator__tab--active" data-method="decreasing">
            <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.methods.decreasing_balance')); ?>

        </button>
        <button type="button" class="mortgage-calculator__tab" data-method="fixed">
            <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.methods.fixed_payment')); ?>

        </button>
    </div>

    <div class="mortgage-calculator__body">
        
        <form class="mortgage-calculator__form" novalidate>
            <input type="hidden" name="calculation_method" value="decreasing">

            
            <div class="mortgage-calculator__field">
                <label for="<?php echo e($uniqueId); ?>-price" class="mortgage-calculator__label">
                    <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.fields.property_price')); ?>

                </label>
                <div class="mortgage-calculator__input-wrapper">
                    <input type="text"
                           class="mortgage-calculator__input"
                           id="<?php echo e($uniqueId); ?>-price"
                           name="property_price"
                           value="<?php echo e($defaultPrice); ?>"
                           placeholder="<?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.placeholders.property_price')); ?>"
                           inputmode="numeric"
                           data-calculate
                           data-format-number
                           <?php if($priceFrom === 'property'): ?> data-price-from="property" <?php endif; ?>>
                    <span class="mortgage-calculator__input-suffix"><?php echo e($currency); ?></span>
                </div>
            </div>

            
            <?php
                // Calculate initial slider value based on down payment type
                $initialSliderValue = $defaultDownPaymentType === 'percent'
                    ? 100 - $defaultDownPaymentValue
                    : 80; // Default to 80% when using fixed amount (will be recalculated by JS)
            ?>
            <div class="mortgage-calculator__field">
                <label for="<?php echo e($uniqueId); ?>-loan-percent" class="mortgage-calculator__label">
                    <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.fields.loan_amount')); ?>

                </label>
                <p class="mortgage-calculator__field-hint">
                    <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.help.loan_amount_hint')); ?>

                </p>
                <div class="mortgage-calculator__slider-group">
                    <div class="mortgage-calculator__slider-wrapper">
                        <input type="range"
                               class="mortgage-calculator__slider"
                               id="<?php echo e($uniqueId); ?>-loan-percent"
                               name="loan_percent"
                               value="<?php echo e($initialSliderValue); ?>"
                               min="0"
                               max="100"
                               step="1"
                               data-calculate>
                        <div class="mortgage-calculator__slider-labels">
                            <span class="mortgage-calculator__slider-value" data-loan-percent><?php echo e($initialSliderValue); ?>%</span>
                            <span>100%</span>
                        </div>
                    </div>
                </div>
                <div class="mortgage-calculator__input-wrapper">
                    <input type="text"
                           class="mortgage-calculator__input"
                           id="<?php echo e($uniqueId); ?>-loan-amount"
                           name="loan_amount"
                           value=""
                           placeholder="<?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.placeholders.loan_amount')); ?>"
                           inputmode="numeric"
                           data-calculate
                           data-format-number>
                    <span class="mortgage-calculator__input-suffix"><?php echo e($currency); ?></span>
                </div>
            </div>

            
            <div class="mortgage-calculator__field">
                <label for="<?php echo e($uniqueId); ?>-term" class="mortgage-calculator__label">
                    <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.fields.loan_term')); ?>

                </label>
                <div class="mortgage-calculator__input-wrapper">
                    <select class="mortgage-calculator__input mortgage-calculator__input--select"
                            id="<?php echo e($uniqueId); ?>-term"
                            name="loan_term_months"
                            data-calculate>
                        <?php $__currentLoopData = $termOptions; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $years => $label): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($years * 12); ?>" <?php if((int) $years === (int) $defaultTerm): echo 'selected'; endif; ?>><?php echo e($label); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                </div>
            </div>

            
            <div class="mortgage-calculator__field">
                <label for="<?php echo e($uniqueId); ?>-rate" class="mortgage-calculator__label">
                    <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.fields.interest_rate')); ?>

                </label>
                <div class="mortgage-calculator__input-wrapper">
                    <input type="number"
                           class="mortgage-calculator__input"
                           id="<?php echo e($uniqueId); ?>-rate"
                           name="interest_rate"
                           value="<?php echo e($defaultRate); ?>"
                           min="0"
                           max="50"
                           step="0.01"
                           placeholder="<?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.placeholders.interest_rate')); ?>"
                           data-calculate>
                    <span class="mortgage-calculator__input-suffix">%/<?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.year')); ?></span>
                </div>
            </div>

            
            <div class="mortgage-calculator__field">
                <label for="<?php echo e($uniqueId); ?>-date" class="mortgage-calculator__label">
                    <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.fields.disbursement_date')); ?>

                </label>
                <div class="mortgage-calculator__input-wrapper">
                    <input type="date"
                           class="mortgage-calculator__input mortgage-calculator__input--date"
                           id="<?php echo e($uniqueId); ?>-date"
                           name="disbursement_date"
                           value="<?php echo e(date('Y-m-d')); ?>">
                </div>
            </div>

            
            <div class="mortgage-calculator__error" data-error role="alert" style="display: none;"></div>
        </form>

        
        <div class="mortgage-calculator__results-panel" data-results>
            <div class="mortgage-calculator__results-icon">
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="8" y="16" width="40" height="32" rx="4" fill="#4A5568"/>
                    <rect x="12" y="20" width="32" height="4" fill="#718096"/>
                    <rect x="12" y="28" width="32" height="4" fill="#718096"/>
                    <rect x="12" y="36" width="20" height="4" fill="#718096"/>
                    <circle cx="48" cy="40" r="14" fill="#F6E05E"/>
                    <text x="48" y="45" text-anchor="middle" font-size="16" font-weight="bold" fill="#744210"><?php echo e($currency); ?></text>
                </svg>
            </div>

            <div class="mortgage-calculator__results-content">
                
                <div class="mortgage-calculator__empty-state" data-empty-state>
                    <h4 class="mortgage-calculator__empty-state-title">
                        <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.results.empty_state_title')); ?>

                    </h4>
                    <p class="mortgage-calculator__empty-state-message">
                        <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.results.empty_state_message')); ?>

                    </p>
                </div>

                
                <div class="mortgage-calculator__results-display" data-results-display style="display: none;">
                    <div class="mortgage-calculator__result-label">
                        <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.results.monthly_payment')); ?>

                    </div>
                    
                    <div class="mortgage-calculator__result-range" data-result-range>
                        <div class="mortgage-calculator__result-item">
                            <span class="mortgage-calculator__result-sub"><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.results.from')); ?></span>
                            <strong class="mortgage-calculator__result-value" data-result="monthly-min">0 <?php echo e($currency); ?></strong>
                        </div>
                        <div class="mortgage-calculator__result-item">
                            <span class="mortgage-calculator__result-sub"><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.results.to')); ?></span>
                            <strong class="mortgage-calculator__result-value" data-result="monthly-max">0 <?php echo e($currency); ?></strong>
                        </div>
                    </div>
                    
                    <div class="mortgage-calculator__result-single" data-result-single style="display: none;">
                        <strong class="mortgage-calculator__result-value mortgage-calculator__result-value--large" data-result="monthly-fixed">0 <?php echo e($currency); ?></strong>
                    </div>

                    <div class="mortgage-calculator__result-total">
                        <span class="mortgage-calculator__result-label"><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.results.total_interest')); ?></span>
                        <strong class="mortgage-calculator__result-value mortgage-calculator__result-value--large" data-result="total-interest">0 <?php echo e($currency); ?></strong>
                    </div>

                    <button type="button" class="mortgage-calculator__details-btn" data-toggle-details>
                        <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.results.view_details')); ?>

                    </button>
                </div>
            </div>
        </div>
    </div>

    
    <div class="mortgage-calculator__modal" data-modal>
    <div class="mortgage-calculator__modal-backdrop" data-modal-close></div>
    <div class="mortgage-calculator__modal-content">
        <div class="mortgage-calculator__modal-header">
            <h4 class="mortgage-calculator__modal-title"><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.title')); ?></h4>
            <button type="button" class="mortgage-calculator__modal-close" data-modal-close>&times;</button>
        </div>
        <div class="mortgage-calculator__modal-body">
            
            <div class="mortgage-calculator__modal-stats">
                <div class="mortgage-calculator__modal-stat">
                    <span class="mortgage-calculator__modal-stat-label"><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.loan_amount')); ?></span>
                    <strong class="mortgage-calculator__modal-stat-value" data-stat="loan-amount">0 <?php echo e($currency); ?></strong>
                </div>
                <div class="mortgage-calculator__modal-stat">
                    <span class="mortgage-calculator__modal-stat-label"><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.total_interest')); ?></span>
                    <strong class="mortgage-calculator__modal-stat-value mortgage-calculator__modal-stat-value--interest" data-stat="total-interest">0 <?php echo e($currency); ?></strong>
                </div>
                <div class="mortgage-calculator__modal-stat">
                    <span class="mortgage-calculator__modal-stat-label"><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.results.total_paid')); ?></span>
                    <strong class="mortgage-calculator__modal-stat-value" data-stat="total-paid">0 <?php echo e($currency); ?></strong>
                </div>
            </div>

            
            <div class="mortgage-calculator__modal-tabs">
                <button type="button" class="mortgage-calculator__modal-tab mortgage-calculator__modal-tab--active" data-view="chart">
                    <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.chart')); ?>

                </button>
                <button type="button" class="mortgage-calculator__modal-tab" data-view="table">
                    <?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.table')); ?>

                </button>
            </div>

            
            <div class="mortgage-calculator__modal-chart" data-chart-container>
                <canvas data-chart-canvas height="300"></canvas>
            </div>

            
            <div class="mortgage-calculator__modal-table" data-table-container style="display: none;">
                <div class="mortgage-calculator__table-wrapper">
                    <table class="mortgage-calculator__table">
                        <thead>
                            <tr>
                                <th><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.period')); ?></th>
                                <th><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.payment')); ?></th>
                                <th><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.principal')); ?></th>
                                <th><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.interest')); ?></th>
                                <th><?php echo e(trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.balance')); ?></th>
                            </tr>
                        </thead>
                        <tbody data-schedule-body></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

<script>
    window.mortgageCalculatorConfig = window.mortgageCalculatorConfig || {};
    window.mortgageCalculatorConfig[<?php echo json_encode($uniqueId); ?>] = <?php echo json_encode([
        'currency' => $currency,
        'numberFormatStyle' => $numberFormatStyle ?? 'western',
        'primaryColor' => $primaryColor,
        'showExtraCosts' => $showExtraCosts,
        'defaultDownPaymentType' => $defaultDownPaymentType,
        'defaultDownPaymentValue' => $defaultDownPaymentValue,
        'translations' => [
            'percentHelp' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.help.down_payment_percent'),
            'amountHelp' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.help.down_payment_amount'),
            'principal' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.principal'),
            'interest' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.interest'),
            'year' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.year'),
            'period' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.amortization.period'),
            'errorPropertyPrice' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.errors.property_price_required'),
            'errorLoanAmount' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.errors.loan_amount_required'),
            'errorLoanExceedsPrice' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.errors.loan_amount_exceeds_price'),
            'errorLoanTerm' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.errors.loan_term_required'),
            'errorInterestRate' => trans('plugins/fob-mortgage-calculator::fob-mortgage-calculator.errors.interest_rate_negative'),
        ],
    ]); ?>;
</script>

<?php if (! $__env->hasRenderedOnce('0a2e0559-bc1d-4697-8ccc-03dafd1b7ce1')): $__env->markAsRenderedOnce('0a2e0559-bc1d-4697-8ccc-03dafd1b7ce1'); ?>
<script src="<?php echo e(asset('vendor/core/plugins/fob-mortgage-calculator/js/mortgage-calculator.js?v=1.1.0')); ?>"></script>
<?php endif; ?>

<?php /**PATH /home/agriwurd/capitalpropertiesandresidence.com/platform/plugins/fob-mortgage-calculator/resources/views/shortcodes/calculator.blade.php ENDPATH**/ ?>