<?php
$pageName  = "Confirm Transaction";
include($_SERVER['DOCUMENT_ROOT'] . "/user/layout/header.php");

require_once($_SERVER['DOCUMENT_ROOT'] . "/include/Transfer/Function.php");

if (!$_SESSION['is_dom_transfer']) {
    header("Location:./dashboard.php");
    exit;
}

if (isset($_POST['loan_submit'])) {
    $pin          = inputValidation($_POST['pin']);
    $oldPin       = inputValidation($row['acct_pin']);
    $user_id      = inputValidation($_POST['user_id']);
    $amount       = inputValidation($_POST['amount']);
    $account_name = inputValidation($_POST['account_name']);

    if ($pin !== $oldPin) {
        toast_alert('error', 'Incorrect PIN Code');
    } else if ($acct_amount < 0) {
        toast_alert('error', 'Insufficient Balance');
    } else {

        if (true) {
            $refrence_id      = uniqid();
            $trans_type       = "Loan";
            $transaction_type = "credit";
            $trans_status     = "processing";

            $sql = "INSERT INTO transactions (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) {
                $full_name    = $row['firstname'] . " " . $row['lastname'];
                $APP_NAME     = WEB_TITLE;
                $APP_URL      = WEB_URL;
                $SITE_ADDRESS = $page['url_address'];
                $user_email   = $row['acct_email'];
                $user_acctno  = $row['acct_no'];

                $message = $sendMail->LoanMsg($full_name, $amount, $user_acctno, $trans_type, $trans_status, $APP_NAME, $APP_URL, $SITE_ADDRESS);
                $subject = "Loan Notification" . "-" . $APP_NAME;
                $email_message->send_mail($user_email, $message, $subject);

                $_SESSION['dom_transfer'] = $refrence_id;
                $_SESSION['is_transfer']  = "transfer";
                header("Location:./success.php");
                exit;
            } else {
                toast_alert("error", "Sorry An Error Occurred, Contact Support");
            }
        }
    }
}

// TEMP TRANSACTION FETCH
$sql = "SELECT * FROM temp_trans WHERE user_id = :user_id ORDER BY trans_id DESC LIMIT 1";
$stmt = $conn->prepare($sql);
$stmt->execute(['user_id' => $user_id]);
$temp_trans = $stmt->fetch(PDO::FETCH_ASSOC);
?>

<!-- Main Content -->
<main class="pt-10 md:pt-14 pb-24 md:pb-8 min-h-screen lg:ml-80">
<div class="min-h-screen flex items-center justify-center p-4 relative z-10">

<style>
    @keyframes progress {
        from { width: 100%; }
        to   { width: 0%; }
    }
    @keyframes shake {
        0%, 100% { transform: rotate(0deg); }
        25%      { transform: rotate(-5deg); }
        75%      { transform: rotate(5deg); }
    }
    .animate-shake { animation: shake 0.5s ease-in-out; }
    .hover-lift {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .hover-lift:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
    }
</style>

<div class="w-full max-w-md mx-auto"
     x-cloak
     x-data="{
         pin: ''
     }">

    <!-- PIN Verification Card -->
    <div class="bg-white border border-[#E0E5E5] rounded-xl p-8 md:p-10 space-y-8">

        <!-- Header -->
        <div class="text-center space-y-4">
            <div class="relative inline-block">
                <div class="w-16 h-16 rounded-xl bg-[#DFE5E5] flex items-center justify-center mx-auto">
                    <i data-lucide="lock-keyhole" class="w-8 h-8 text-[#49786B]"></i>
                </div>
            </div>
            <div>
                <h2 class="text-xl font-semibold text-[#0D1B23]">Confirm Transaction</h2>
                <p class="text-sm text-[#7A7A7A] mt-1">
                    Enter your 4-digit PIN to authorize this loan request
                </p>
            </div>
        </div>

        <!-- Transaction Summary Alert -->
        <div x-data="{ show: true }"
             x-show="show"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="opacity-0 translate-y-2"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0">
            <div class="border border-[#49786B]/30 rounded-xl overflow-hidden hover-lift">
                <div class="flex items-start p-4 gap-4">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-[#49786B] to-[#3a6055] flex items-center justify-center shadow-lg relative">
                            <div class="absolute inset-0 bg-[#49786B]/20 rounded-xl animate-pulse"></div>
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-white relative z-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
                            </svg>
                        </div>
                    </div>
                    <div class="flex-1 min-w-0">
                        <h4 class="text-sm font-bold text-[#0D1B23] mb-1">Loan Amount</h4>
                        <p class="text-lg font-bold text-[#49786B] leading-tight">
                            <?= $currency ?><?= number_format((float) ($temp_trans['amount'] ?? 0), 2, '.', ',') ?>
                        </p>
                        <p class="text-xs text-[#4A4A4A] mt-1 truncate" title="<?= htmlspecialchars($temp_trans['account_name'] ?? 'N/A') ?>">
                            <?= htmlspecialchars($temp_trans['account_name'] ?? 'N/A') ?>
                        </p>
                    </div>
                </div>
                <div class="h-1 bg-[#49786B]/10">
                    <div class="h-full bg-gradient-to-r from-[#49786B] to-[#6a9e8f]" style="width: 100%;"></div>
                </div>
            </div>
        </div>

        <!-- PIN Form -->
        <form method="POST" class="space-y-6">

            <!-- PIN Code Input -->
            <div class="space-y-2">
                <label class="block text-sm font-semibold text-[#4A4A4A] text-center">
                    Enter PIN Code
                </label>
                <input
                    type="password"
                    name="pin"
                    x-model="pin"
                    @input="pin = pin.replace(/\D/g, '').slice(0, 4)"
                    maxlength="4"
                    inputmode="numeric"
                    pattern="[0-9]*"
                    placeholder="••••"
                    autocomplete="off"
                    autofocus
                    required
                    class="field-input w-full text-center text-2xl font-bold tracking-[0.4em] rounded-xl py-4 px-4 border border-[#E0E5E5] outline-none focus:border-[#49786B] focus:ring-2 focus:ring-[#49786B]/10">
            </div>

            <!-- Hidden fields -->
            <input type="hidden" name="amount" value="<?= htmlspecialchars($temp_trans['amount'] ?? '') ?>">
            <input type="hidden" name="account_name" value="<?= htmlspecialchars($temp_trans['account_name'] ?? '') ?>">
            <input type="hidden" name="user_id" value="<?= htmlspecialchars($temp_trans['user_id'] ?? $user_id) ?>">

            <!-- Info Banner -->
            <div class="bg-[#49786B]/5 border border-[#49786B]/20 rounded-xl p-4">
                <div class="flex items-start space-x-3">
                    <i data-lucide="info" class="w-5 h-5 text-[#49786B] flex-shrink-0 mt-0.5"></i>
                    <p class="text-xs text-[#4A4A4A]">
                        This is your transaction PIN. Never share it with anyone — our staff will never ask for your PIN.
                    </p>
                </div>
            </div>

            <!-- Submit Button -->
            <button
                type="submit"
                name="loan_submit"
                :disabled="pin.length < 4"
                class="w-full py-4 rounded-xl font-semibold text-white text-sm flex items-center justify-center space-x-2 bg-primary-500 hover:bg-primary-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed group">
                <i data-lucide="check-circle" class="w-5 h-5"></i>
                <span>Confirm Transaction</span>
                <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i>
            </button>

            <p class="text-xs text-center text-[#7A7A7A]">
                <i data-lucide="lock" class="w-3 h-3 inline mr-1"></i>
                Your security is protected with end-to-end encryption
            </p>
        </form>

        <!-- Footer -->
        <div class="pt-6 border-t border-[#E0E5E5]">
            <div class="flex items-center justify-between text-xs text-[#7A7A7A]">
                <a href="./loan-request.php" class="text-[#49786B] inline-flex items-center space-x-1 group hover:underline">
                    <i data-lucide="arrow-left" class="w-4 h-4 group-hover:-translate-x-1 transition-transform"></i>
                    <span>Back</span>
                </a>
                <span>Secure Connection</span>
            </div>
        </div>

    </div>
</div>
</div>
</main>

<script>
document.addEventListener('DOMContentLoaded', function () {
    lucide.createIcons();
});
</script>

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