<?php
$pageName  = "Loan Request";
include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/header.php");
require_once($_SERVER['DOCUMENT_ROOT'] . "/include/Transfer/Function.php");

if (isset($_POST['loan-submit'])) {
    $amount       = $_POST['amount'];
    $account_name = $_POST['loan_remarks'];
    $loanlimit    = $page['loanlimit'];

    if (empty($amount)) {
        toast_alert("error", "Amount Required!");
    } elseif ($amount <= 0) {
        toast_alert("error", "Invalid Amount!");
    } elseif (empty($account_name)) {
        toast_alert("error", "Loan Description Required!");
    } elseif ($amount > $loanlimit) {
        toast_alert("error", "Loan Limit Exceeded!");
    } else {
        $refrence_id      = uniqid();
        $trans_type       = "Loan";
        $transaction_type = "credit";
        $trans_status     = "processing";
        $account_number   = "N/A";

        $sql = "INSERT INTO temp_trans (amount, refrence_id, user_id, account_name, trans_type, transaction_type, trans_status)
                VALUES (:amount, :refrence_id, :user_id, :account_name, :trans_type, :transaction_type, :trans_status)";
        $tranfered = $conn->prepare($sql);
        $tranfered->execute([
            'amount'           => $amount,
            'refrence_id'      => $refrence_id,
            'user_id'          => $user_id,
            'account_name'     => $account_name,
            'trans_type'       => $trans_type,
            'transaction_type' => $transaction_type,
            'trans_status'     => $trans_status
        ]);

        if (true) {
            $_SESSION['is_dom_code']     = "None";
            $_SESSION['is_dom_transfer'] = "Dom";
            $_SESSION['is_transfer']     = "None";
            header("Location:./loan-pin.php");
            exit;
        } else {
            toast_alert('error', 'Sorry An Error occurred, Try Again !');
        }
    }
}
?>
<!-- Main Content Area -->
<main class="pt-10 md:pt-14 pb-24 md:pb-8 min-h-screen lg:ml-80 bg-slate-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">

<div x-data="{
    amount: '',
    remarks: '',
    loanLimit: <?= (float) $page['loanlimit'] ?>,

    formatAmount(val) {
        if (!val) return '0.00';
        return parseFloat(val).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    },

    setAmount(val) {
        this.amount = val;
    },

    get remainingLimit() {
        const amt = parseFloat(this.amount) || 0;
        return this.loanLimit - amt;
    },

    get isOverLimit() {
        return (parseFloat(this.amount) || 0) > this.loanLimit;
    }
}">

    <!-- Header Section -->
    <div class="bg-white/95 backdrop-blur-xl border-b border-slate-200 sticky top-0 z-40 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto py-6">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
                <!-- Title & Breadcrumbs -->
                <div>
                    <div class="flex items-center space-x-3 mb-2">
                        <div class="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center border border-primary-200">
                            <i data-lucide="hand-coins" class="w-5 h-5 text-primary-500"></i>
                        </div>
                        <h1 class="text-2xl md:text-3xl font-bold text-slate-900">Loan Request</h1>
                    </div>
                    <nav class="flex items-center space-x-2 text-sm">
                        <a href="<?= $web_url ?>/user/dashboard.php" class="text-slate-500 hover:text-primary-600 transition-colors">Dashboard</a>
                        <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
                        <a href="<?= $web_url ?>/user/loan.php" class="text-slate-500 hover:text-primary-600 transition-colors">My Loan</a>
                        <i data-lucide="chevron-right" class="w-4 h-4 text-slate-300"></i>
                        <span class="text-slate-700 font-medium">New Request</span>
                    </nav>
                </div>

                <!-- Back Button -->
                <div class="flex items-center space-x-3">
                    <a href="javascript:history.go(-1)"
                       class="px-5 py-2.5 rounded-xl flex items-center space-x-2 bg-transparent border-[1.5px] border-primary-300 text-primary-600 font-semibold hover:bg-primary-50 hover:border-primary-500 hover:text-primary-700 transition-all">
                        <i data-lucide="arrow-left" class="w-4 h-4"></i>
                        <span>Go Back</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto py-8">

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

            <!-- LEFT: Loan Form -->
            <div class="lg:col-span-2">

                <!-- Loan Limit Card -->
                <div class="rounded-2xl p-6 md:p-8 mb-6 shadow-lg bg-gradient-to-br from-primary-500 to-primary-700 text-white">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-white/70 text-sm font-medium mb-1">Your Loan Limit</p>
                            <h2 class="text-3xl md:text-4xl font-bold">
                                <?= $currency ?><?= number_format($page['loanlimit'], 2, '.', ',') ?>
                            </h2>
                            <p class="text-white/70 text-xs mt-2">
                                Remaining: <span class="font-semibold text-white" x-text="'<?= $currency ?>' + formatAmount(remainingLimit)"></span>
                            </p>
                        </div>
                        <div class="w-16 h-16 rounded-2xl bg-white/15 flex items-center justify-center border border-white/20">
                            <i data-lucide="shield-check" class="w-8 h-8 text-white"></i>
                        </div>
                    </div>
                </div>

                <!-- Form Card -->
                <div class="bg-white/95 backdrop-blur-xl border border-slate-200 rounded-2xl p-6 md:p-8">
                    <div class="mb-6">
                        <h3 class="text-xl font-bold text-slate-900 mb-1">Loan Application</h3>
                        <p class="text-sm text-slate-500">Fill in the details below to submit your loan request.</p>
                    </div>

                    <form method="POST" id="loanForm">

                        <!-- Amount Input -->
                        <div class="mb-6">
                            <label class="block text-sm font-semibold text-slate-700 mb-3">
                                Loan Amount <span class="text-red-500">*</span>
                            </label>

                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
                                    <span class="text-xl font-bold text-slate-500"><?= $currency ?></span>
                                </div>
                                <input
                                    type="number"
                                    step="0.01"
                                    min="0"
                                    name="amount"
                                    x-model="amount"
                                    placeholder="0.00"
                                    required
                                    class="w-full pl-14 pr-4 py-4 rounded-xl text-3xl font-bold tracking-tight bg-white border border-slate-200 text-slate-900 focus:bg-white focus:ring-2 focus:ring-primary-100 focus:outline-none transition-all"
                                    :class="isOverLimit ? 'border-red-400 focus:border-red-400' : 'focus:border-primary-500'">
                            </div>

                            <p x-show="isOverLimit" x-cloak class="mt-2 text-sm text-red-500 flex items-center space-x-1">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                <span>Amount exceeds your loan limit</span>
                            </p>

                            <!-- Quick Amount Buttons -->
                            <div class="mt-4">
                                <p class="text-xs text-slate-500 mb-2 font-medium">Quick Select</p>
                                <div class="grid grid-cols-4 gap-2">
                                    <?php
                                    $limit = (float) $page['loanlimit'];
                                    $presets = [
                                        ['label' => '25%',  'value' => round($limit * 0.25, 2)],
                                        ['label' => '50%',  'value' => round($limit * 0.50, 2)],
                                        ['label' => '75%',  'value' => round($limit * 0.75, 2)],
                                        ['label' => 'Max',  'value' => round($limit, 2)],
                                    ];
                                    foreach ($presets as $preset): ?>
                                        <button
                                            type="button"
                                            @click="setAmount('<?= $preset['value'] ?>')"
                                            :class="amount == '<?= $preset['value'] ?>' ? 'bg-primary-500 text-white border-primary-500' : 'bg-white text-primary-600 border-slate-200 hover:bg-primary-50 hover:border-primary-500 hover:-translate-y-px'"
                                            class="px-3 py-2 rounded-lg text-sm border font-semibold transition-all">
                                            <?= $preset['label'] ?>
                                        </button>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </div>

                        <!-- Purpose / Narration -->
                        <div class="mb-6">
                            <label class="block text-sm font-semibold text-slate-700 mb-3">
                                Purpose / Narration <span class="text-red-500">*</span>
                            </label>
                            <textarea
                                name="loan_remarks"
                                id="loan_remarks"
                                x-model="remarks"
                                rows="5"
                                required
                                placeholder="Tell us what this loan is for (e.g., home renovation, business expansion, education...)"
                                class="w-full px-4 py-3 rounded-xl text-sm resize-none bg-white border border-slate-200 text-slate-900 placeholder-slate-400 focus:bg-white focus:border-primary-500 focus:ring-2 focus:ring-primary-100 focus:outline-none transition-all"></textarea>
                            <p class="mt-2 text-xs text-slate-500">
                                <span x-text="remarks.length"></span> characters
                            </p>
                        </div>

                        <!-- Info Notice -->
                        <div class="rounded-xl p-4 mb-6 flex items-start space-x-3 bg-gradient-to-br from-primary-50 to-primary-50/40 border border-primary-200/60">
                            <div class="w-8 h-8 rounded-lg bg-primary-50 flex items-center justify-center flex-shrink-0 border border-primary-200">
                                <i data-lucide="info" class="w-4 h-4 text-primary-500"></i>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-slate-900 mb-1">Before you proceed</p>
                                <p class="text-xs text-slate-600 leading-relaxed">
                                    Your loan request will be reviewed. You'll be asked to confirm with your transaction PIN on the next step.
                                </p>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="grid grid-cols-2 gap-3">
                            <a href="<?= $web_url ?>/user/loan.php"
                               class="px-5 py-3 rounded-xl text-sm text-center flex items-center justify-center space-x-2 bg-transparent border-[1.5px] border-primary-300 text-primary-600 font-semibold hover:bg-primary-50 hover:border-primary-500 hover:text-primary-700 transition-all">
                                <i data-lucide="x" class="w-4 h-4"></i>
                                <span>Cancel</span>
                            </a>
                            <button
                                type="submit"
                                name="loan-submit"
                                :disabled="isOverLimit || !amount || !remarks"
                                class="px-5 py-3 rounded-xl text-sm flex items-center justify-center space-x-2 bg-gradient-to-br from-primary-500 to-primary-700 text-white font-semibold shadow-md hover:shadow-lg hover:-translate-y-0.5 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0">
                                <span>Proceed</span>
                                <i data-lucide="arrow-right" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <!-- RIGHT: Info Sidebar -->
            <div class="lg:col-span-1 space-y-6">

                <!-- How It Works -->
                <div class="bg-white/95 backdrop-blur-xl border border-slate-200 rounded-2xl p-6">
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center border border-primary-200">
                            <i data-lucide="list-checks" class="w-5 h-5 text-primary-500"></i>
                        </div>
                        <h3 class="text-lg font-bold text-slate-900">How It Works</h3>
                    </div>

                    <div class="space-y-1">
                        <div class="flex items-start gap-3 py-3">
                            <div class="w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center flex-shrink-0">
                                <span class="text-xs font-bold text-primary-600">1</span>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-slate-900">Fill the form</p>
                                <p class="text-xs text-slate-500">Enter your loan amount and purpose.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3 py-3">
                            <div class="w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center flex-shrink-0">
                                <span class="text-xs font-bold text-primary-600">2</span>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-slate-900">Confirm with PIN</p>
                                <p class="text-xs text-slate-500">Verify the request using your transaction PIN.</p>
                            </div>
                        </div>
                        <div class="flex items-start gap-3 py-3">
                            <div class="w-8 h-8 rounded-lg bg-primary-100 flex items-center justify-center flex-shrink-0">
                                <span class="text-xs font-bold text-primary-600">3</span>
                            </div>
                            <div>
                                <p class="text-sm font-semibold text-slate-900">Get reviewed</p>
                                <p class="text-xs text-slate-500">We'll process and update you on the status.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Benefits -->
                <div class="bg-white/95 backdrop-blur-xl border border-slate-200 rounded-2xl p-6">
                    <div class="flex items-center space-x-3 mb-4">
                        <div class="w-10 h-10 rounded-xl bg-amber-50 flex items-center justify-center border border-amber-200">
                            <i data-lucide="sparkles" class="w-5 h-5 text-amber-600"></i>
                        </div>
                        <h3 class="text-lg font-bold text-slate-900">Why Choose Us</h3>
                    </div>

                    <div class="space-y-3">
                        <div class="flex items-center space-x-3">
                            <i data-lucide="check-circle-2" class="w-4 h-4 text-primary-500 flex-shrink-0"></i>
                            <p class="text-sm text-slate-700">Competitive interest rates</p>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i data-lucide="check-circle-2" class="w-4 h-4 text-primary-500 flex-shrink-0"></i>
                            <p class="text-sm text-slate-700">Fast approval process</p>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i data-lucide="check-circle-2" class="w-4 h-4 text-primary-500 flex-shrink-0"></i>
                            <p class="text-sm text-slate-700">Flexible repayment terms</p>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i data-lucide="check-circle-2" class="w-4 h-4 text-primary-500 flex-shrink-0"></i>
                            <p class="text-sm text-slate-700">Secure and transparent</p>
                        </div>
                    </div>
                </div>

                <!-- Need Help -->
                <div class="bg-white/95 backdrop-blur-xl border border-slate-200 rounded-2xl p-6">
                    <div class="flex items-center space-x-3 mb-3">
                        <div class="w-10 h-10 rounded-xl bg-primary-50 flex items-center justify-center border border-primary-200">
                            <i data-lucide="life-buoy" class="w-5 h-5 text-primary-500"></i>
                        </div>
                        <h3 class="text-lg font-bold text-slate-900">Need Help?</h3>
                    </div>
                    <p class="text-sm text-slate-500 mb-4">
                        Questions about your loan application? Our support team is ready to help.
                    </p>
                    <a href="<?= $web_url ?>/user/support.php"
                       class="w-full px-4 py-2.5 rounded-xl text-sm flex items-center justify-center space-x-2 bg-transparent border-[1.5px] border-primary-300 text-primary-600 font-semibold hover:bg-primary-50 hover:border-primary-500 hover:text-primary-700 transition-all">
                        <i data-lucide="message-circle" class="w-4 h-4"></i>
                        <span>Contact Support</span>
                    </a>
                </div>

            </div>
        </div>

    </div>

</div>

<script>
    lucide.createIcons();
    document.addEventListener('alpine:init', () => {
        Alpine.effect(() => {
            setTimeout(() => lucide.createIcons(), 0);
        });
    });
</script>

    </div>
</main>

<?php
include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/footer.php");
?>