<?php

include "../includes/member_auth.php";
include "../config/database.php";

if (!isset($_GET['id'])) {

    header("Location: dashboard.php");
    exit();

}

$id = (int)$_GET['id'];

/*
|--------------------------------------------------------------------------
| Get Active Plan
|--------------------------------------------------------------------------
*/

$stmt = $pdo->prepare("
    SELECT *
    FROM plans
    WHERE id = ?
    AND status = 'active'
");

$stmt->execute([$id]);

$plan = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$plan) {

    die("Plan not found.");

}

/*
|--------------------------------------------------------------------------
| Get Logged-in User
|--------------------------------------------------------------------------
*/

$stmt = $pdo->prepare("
    SELECT *
    FROM users
    WHERE id = ?
");

$stmt->execute([
    $_SESSION['user_id']
]);

$user = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$user) {

    die("User account not found.");

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
>

<title>Join Plan</title>

<link
    rel="stylesheet"
    href="../assets/css/admin.css"
>

<link
    rel="stylesheet"
    href="../assets/css/member.css"
>

<link
    rel="stylesheet"
    href="../assets/css/responsive.css"
>

<link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
>

</head>

<body>

<?php include "../includes/member_sidebar.php"; ?>

<div class="sidebar-overlay"></div>

<?php include "../includes/member_topbar.php"; ?>


<div class="main-content">

    <div class="join-card">

        <!-- PLAN HEADER -->

        <div class="plan-header">

            <h2>
                <?= htmlspecialchars($plan['plan_name']); ?>
            </h2>

            <p>
                <?= htmlspecialchars(
                    $plan['description'] ?? ''
                ); ?>
            </p>

        </div>


        <!-- PRICE -->

        <div class="summary-row">

            <span>
                💰 Price Per Hand
            </span>

            <strong>

                ₦<?= number_format(
                    $plan['amount'],
                    2
                ); ?>

            </strong>

        </div>


        <!-- WALLET -->

        <div class="summary-row">

            <span>
                👛 Wallet Balance
            </span>

            <strong>

                ₦<?= number_format(
                    $user['wallet_balance'],
                    2
                ); ?>

            </strong>

        </div>


        <br>


        <!-- JOIN FORM -->

        <form
            action="process_join_plan.php"
            method="POST"
        >

            <input
                type="hidden"
                name="plan_id"
                value="<?= (int)$plan['id']; ?>"
            >

            <input
                type="hidden"
                id="amount"
                value="<?= (float)$plan['amount']; ?>"
            >

            <input
                type="hidden"
                id="wallet"
                value="<?= (float)$user['wallet_balance']; ?>"
            >


            <!-- HANDS -->

            <label>
                Number of Hands
            </label>

            <div class="hands-box">

                <button
                    type="button"
                    id="minus"
                >
                    -
                </button>

                <input
                    type="number"
                    name="hands"
                    id="hands"
                    value="1"
                    min="1"
                    max="20"
                    readonly
                >

                <button
                    type="button"
                    id="plus"
                >
                    +
                </button>

            </div>


            <br>


            <!-- TOTAL -->

            <h3>

                Total:

                <span id="total">

                    ₦<?= number_format(
                        $plan['amount'],
                        2
                    ); ?>

                </span>

            </h3>


            <!-- BALANCE AFTER JOINING -->

            <div class="summary-row">

                <span>
                    💳 Balance After Joining
                </span>

                <strong id="remaining">

                    ₦<?= number_format(
                        $user['wallet_balance']
                        - $plan['amount'],
                        2
                    ); ?>

                </strong>

            </div>


            <br>


            <!-- JOIN BUTTON -->

            <button
                type="submit"
                class="fund-wallet-btn"
                id="joinButton"
            >

                <i class="fas fa-check-circle"></i>

                Join Plan

            </button>

        </form>

    </div>

</div>


<script src="../assets/js/admin.js"></script>

<script>

const amount =
    Number(
        document.getElementById("amount").value
    );

const wallet =
    Number(
        document.getElementById("wallet").value
    );

const hands =
    document.getElementById("hands");

const total =
    document.getElementById("total");

const remaining =
    document.getElementById("remaining");

const joinButton =
    document.getElementById("joinButton");


document.getElementById("plus").onclick = function () {

    if (Number(hands.value) < 20) {

        hands.value++;

        update();

    }

};


document.getElementById("minus").onclick = function () {

    if (Number(hands.value) > 1) {

        hands.value--;

        update();

    }

};


function update() {

    const totalPay =
        amount * Number(hands.value);

    const balanceLeft =
        wallet - totalPay;


    total.innerHTML =
        "₦" +
        totalPay.toLocaleString(
            'en-NG',
            {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }
        );


    remaining.innerHTML =
        "₦" +
        balanceLeft.toLocaleString(
            'en-NG',
            {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }
        );


    if (balanceLeft < 0) {

        remaining.style.color = "#dc3545";

        joinButton.disabled = true;

        joinButton.innerHTML =
            "Insufficient Wallet Balance";

        joinButton.style.opacity = ".7";

        joinButton.style.cursor =
            "not-allowed";

    } else {

        remaining.style.color = "#198754";

        joinButton.disabled = false;

        joinButton.innerHTML =
            '<i class="fas fa-check-circle"></i> Join Plan';

        joinButton.style.opacity = "1";

        joinButton.style.cursor =
            "pointer";

    }

}


/*
|--------------------------------------------------------------------------
| Run Once On Page Load
|--------------------------------------------------------------------------
*/

update();

</script>

</body>

</html>