@extends('layouts.app')

@section('title', 'Mortgage and Affordability Calculator - Frantyapp')

@section('content')
<div class="bg-black text-white py-16 border-b border-neutral-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center max-w-3xl">
        <span class="text-xs font-bold uppercase tracking-[0.3em] text-gray-400 block">Financial Advisory</span>
        <div class="w-12 h-[2px] bg-brand-blue mx-auto mt-2 mb-3"></div>
        <h1 class="font-serif-heading font-extrabold text-3xl sm:text-5xl mt-2">Mortgage and Rent Affordability Calculator</h1>
        <p class="text-gray-400 text-sm sm:text-base mt-2 font-light">Estimate monthly mortgage repayments, down payments, and total loan commitments.</p>
    </div>
</div>

<div x-data="{
    price: 50000000,
    downPercent: 20,
    interestRate: 18,
    loanYears: 15,
    get downPayment() { return (this.price * this.downPercent) / 100; },
    get loanAmount() { return this.price - this.downPayment; },
    get monthlyPayment() {
        let p = this.loanAmount;
        let r = (this.interestRate / 100) / 12;
        let n = this.loanYears * 12;
        if (r === 0) return p / n;
        return (p * r * Math.pow(1 + r, n)) / (Math.pow(1 + r, n) - 1);
    },
    get totalLoanPayment() { return this.monthlyPayment * this.loanYears * 12; },
    get totalInterest() { return this.totalLoanPayment - this.loanAmount; }
}" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
        
        <!-- Controls -->
        <div class="lg:col-span-7 border border-gray-200 p-8 bg-white space-y-8">
            <h3 class="font-serif-heading font-bold text-2xl text-black border-b border-gray-100 pb-3">Adjust Financing Terms</h3>

            <div class="space-y-2">
                <div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest text-gray-700">
                    <span>Property Purchase Price</span>
                    <span class="text-black text-lg font-serif-heading font-extrabold" x-text="'₦' + Number(price).toLocaleString()"></span>
                </div>
                <input type="range" x-model.number="price" min="5000000" max="500000000" step="5000000" class="w-full accent-black cursor-pointer">
                <div class="flex justify-between text-[10px] text-gray-400 font-semibold">
                    <span>₦5,000,000</span>
                    <span>₦500,000,000</span>
                </div>
            </div>

            <div class="space-y-2">
                <div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest text-gray-700">
                    <span>Down Payment</span>
                    <span class="text-black text-lg font-serif-heading font-extrabold" x-text="downPercent + '% (₦' + Number(downPayment).toLocaleString() + ')'"></span>
                </div>
                <input type="range" x-model.number="downPercent" min="10" max="50" step="5" class="w-full accent-black cursor-pointer">
            </div>

            <div class="space-y-2">
                <div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest text-gray-700">
                    <span>Annual Interest Rate</span>
                    <span class="text-black text-lg font-serif-heading font-extrabold" x-text="interestRate + '%'"></span>
                </div>
                <input type="range" x-model.number="interestRate" min="5" max="30" step="0.5" class="w-full accent-black cursor-pointer">
            </div>

            <div class="space-y-2">
                <div class="flex justify-between items-center text-xs font-bold uppercase tracking-widest text-gray-700">
                    <span>Loan Tenure</span>
                    <span class="text-black text-lg font-serif-heading font-extrabold" x-text="loanYears + ' Years'"></span>
                </div>
                <input type="range" x-model.number="loanYears" min="1" max="30" step="1" class="w-full accent-black cursor-pointer">
            </div>
        </div>

        <!-- Result Box -->
        <div class="lg:col-span-5">
            <div class="bg-black text-white p-8 border border-gray-800 space-y-6 sticky top-24">
                <span class="text-[10px] font-bold uppercase tracking-[0.2em] text-white bg-neutral-900 px-3 py-1 border border-neutral-800">Estimated Repayment</span>

                <div>
                    <span class="text-[10px] font-bold uppercase tracking-widest text-gray-400 block">Monthly Repayment</span>
                    <span class="font-serif-heading font-extrabold text-4xl text-white mt-1 block" x-text="'₦' + Math.round(monthlyPayment).toLocaleString()"></span>
                </div>

                <div class="space-y-3 pt-6 border-t border-neutral-800 text-xs font-light">
                    <div class="flex justify-between py-1 border-b border-neutral-900">
                        <span class="text-gray-400">Target Price:</span>
                        <span class="font-bold text-white" x-text="'₦' + Number(price).toLocaleString()"></span>
                    </div>
                    <div class="flex justify-between py-1 border-b border-neutral-900">
                        <span class="text-gray-400">Down Payment:</span>
                        <span class="font-bold text-white" x-text="'₦' + Math.round(downPayment).toLocaleString()"></span>
                    </div>
                    <div class="flex justify-between py-1 border-b border-neutral-900">
                        <span class="text-gray-400">Net Loan Amount:</span>
                        <span class="font-bold text-white" x-text="'₦' + Math.round(loanAmount).toLocaleString()"></span>
                    </div>
                    <div class="flex justify-between py-1 border-b border-neutral-900">
                        <span class="text-gray-400">Total Interest:</span>
                        <span class="font-bold text-gray-300" x-text="'₦' + Math.round(totalInterest).toLocaleString()"></span>
                    </div>
                    <div class="flex justify-between py-1 font-bold">
                        <span class="text-gray-300">Total Outlay:</span>
                        <span class="font-serif-heading text-sm text-white" x-text="'₦' + Math.round(totalLoanPayment).toLocaleString()"></span>
                    </div>
                </div>

                <div class="pt-4">
                    <a href="https://wa.me/2348031234567?text=Hello%20Frantyapp,%20I%20used%20your%20mortgage%20calculator." target="_blank" class="block w-full py-4 bg-white text-black font-bold text-xs uppercase tracking-[0.2em] text-center hover:bg-gray-200 transition-colors">
                        Pre-Qualify With Advisor
                    </a>
                </div>
            </div>
        </div>

    </div>
</div>
@endsection
