<?php

session_start();

require_once __DIR__ . '/config/database.php';


/* =========================================================
   REGISTRATION SETTINGS
========================================================= */

$setting = [
    'registration_fee' => 0,
    'bank_name' => '',
    'account_number' => '',
    'account_name' => ''
];


try {

    $settingQuery =
        $pdo->query(
            "
            SELECT
                registration_fee,
                bank_name,
                account_number,
                account_name
            FROM settings
            LIMIT 1
            "
        );

    $settingRow =
        $settingQuery->fetch(
            PDO::FETCH_ASSOC
        );


    if ($settingRow) {

        $setting =
            array_merge(
                $setting,
                $settingRow
            );

    }

} catch (PDOException $e) {

    /* Keep registration page available */

}

?>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>
        Create Account | Complete Bliss Solutions
    </title>


    <!-- FONTS -->
    <link
        href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap"
        rel="stylesheet"
    >


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


    <!-- REGISTER CSS -->
    <link
        rel="stylesheet"
        href="assets/css/register.css?v=<?= filemtime(__DIR__ . '/assets/css/register.css') ?>"
    >

</head>


<body>


<div class="cbx-register-page">


    <!-- =====================================================
         LEFT VISUAL
    ====================================================== -->

    <section class="cbx-register-visual">


        <div class="cbx-register-bg">

            <img
                src="public-site/assets/images/how-it-works.png"
                alt=""
            >

        </div>


        <div class="cbx-register-overlay"></div>



        <!-- LOGO -->

        <div class="cbx-register-brand">

            <a href="index.php">

                <img
                    src="public-site/assets/images/logo.png"
                    alt="Complete Bliss Solutions"
                >

            </a>

        </div>



        <!-- CONTENT -->

        <div class="cbx-register-visual-content">


            <div class="cbx-register-visual-badge">

                <i class="fa-solid fa-sparkles"></i>

                <span>
                    BECOME A COMPLETE BLISS MEMBER
                </span>

            </div>


            <h1>

                Start your journey

                <span>
                    towards your goals.
                </span>

            </h1>


            <p>
                Create your account, explore available schemes
                and keep your contribution journey organised
                from one convenient dashboard.
            </p>



            <div class="cbx-register-benefits">


                <div>

                    <span>
                        <i class="fa-solid fa-user-check"></i>
                    </span>

                    <div>

                        <strong>
                            Create Your Account
                        </strong>

                        <small>
                            Get your personal Complete Bliss profile.
                        </small>

                    </div>

                </div>


                <div>

                    <span>
                        <i class="fa-solid fa-layer-group"></i>
                    </span>

                    <div>

                        <strong>
                            Choose Your Schemes
                        </strong>

                        <small>
                            Join goals that fit your plans.
                        </small>

                    </div>

                </div>


                <div>

                    <span>
                        <i class="fa-solid fa-chart-line"></i>
                    </span>

                    <div>

                        <strong>
                            Track Your Progress
                        </strong>

                        <small>
                            Follow contributions from your dashboard.
                        </small>

                    </div>

                </div>


            </div>


        </div>



        <div class="cbx-register-visual-bottom">

            <i class="fa-solid fa-shield-halved"></i>

            <span>
                Clear records. Clear progress.
            </span>

        </div>


    </section>



    <!-- =====================================================
         FORM SIDE
    ====================================================== -->

    <section class="cbx-register-form-side">


        <!-- MOBILE HEADER -->

        <div class="cbx-register-mobile-header">


            <a href="index.php">

                <img
                    src="public-site/assets/images/logo.png"
                    alt="Complete Bliss Solutions"
                >

            </a>


            <a
                href="index.php"
                class="cbx-register-home-mobile"
            >

                <i class="fa-solid fa-arrow-left"></i>

                Home

            </a>


        </div>



        <div class="cbx-register-form-wrap">


            <a
                href="index.php"
                class="cbx-register-back"
            >

                <i class="fa-solid fa-arrow-left"></i>

                Back to Website

            </a>



            <!-- =============================================
                 HEADING
            ============================================== -->

            <div class="cbx-register-heading">


                <div class="cbx-register-icon">

                    <i class="fa-solid fa-user-plus"></i>

                </div>


                <span>
                    MEMBER REGISTRATION
                </span>


                <h2>
                    Create your account
                </h2>


                <p>
                    Enter your information below to become
                    a Complete Bliss member.
                </p>


            </div>



            <!-- =============================================
                 FORM
            ============================================== -->

            <form
                method="POST"
                action="auth/register_process.php"
                enctype="multipart/form-data"
                class="cbx-register-form"
            >


                <!-- =========================================
                     PERSONAL DETAILS
                ========================================== -->

                <div class="cbx-form-section">


                    <div class="cbx-section-heading">

                        <div>

                            <i class="fa-solid fa-user"></i>

                        </div>


                        <span>

                            <strong>
                                Personal Information
                            </strong>

                            <small>
                                Tell us a little about yourself.
                            </small>

                        </span>

                    </div>



                    <div class="cbx-form-row">


                        <!-- FULL NAME -->

                        <div class="cbx-form-group">

                            <label for="fullname">
                                Full Name
                            </label>


                            <div class="cbx-input-wrap">


                                <div class="cbx-input-icon">

                                    <i class="fa-solid fa-user"></i>

                                </div>


                                <input
                                    type="text"
                                    id="fullname"
                                    name="fullname"
                                    placeholder="Enter your full name"
                                    value="<?= htmlspecialchars($_SESSION['old']['fullname'] ?? '') ?>"
                                    autocomplete="name"
                                    required
                                >


                            </div>

                        </div>



                        <!-- PHONE -->

                        <div class="cbx-form-group">

                            <label for="phone">
                                Phone Number
                            </label>


                            <div class="cbx-input-wrap">


                                <div class="cbx-input-icon">

                                    <i class="fa-solid fa-phone"></i>

                                </div>


                                <input
                                    type="tel"
                                    id="phone"
                                    name="phone"
                                    placeholder="Enter your phone number"
                                    value="<?= htmlspecialchars($_SESSION['old']['phone'] ?? '') ?>"
                                    autocomplete="tel"
                                    required
                                >


                            </div>

                        </div>


                    </div>



                    <!-- EMAIL -->

                    <div class="cbx-form-group">


                        <label for="email">

                            Email Address

                            <small>
                                Optional
                            </small>

                        </label>


                        <div class="cbx-input-wrap">


                            <div class="cbx-input-icon">

                                <i class="fa-solid fa-envelope"></i>

                            </div>


                            <input
                                type="email"
                                id="email"
                                name="email"
                                placeholder="Enter your email address"
                                value="<?= htmlspecialchars($_SESSION['old']['email'] ?? '') ?>"
                                autocomplete="email"
                            >


                        </div>


                    </div>


                </div>



                <!-- =========================================
                     REGISTRATION PAYMENT
                ========================================== -->

                <div class="cbx-payment-box">


                    <div class="cbx-payment-heading">


                        <div class="cbx-payment-heading-icon">

                            <i class="fa-solid fa-building-columns"></i>

                        </div>


                        <div>

                            <span>
                                REGISTRATION PAYMENT
                            </span>

                            <h3>
                                Payment Instructions
                            </h3>

                        </div>


                    </div>


                    <p class="cbx-payment-note">
                        Pay the registration fee into the account
                        below, then upload your payment receipt
                        before submitting your registration.
                    </p>



                    <div class="cbx-payment-grid">


                        <!-- FEE -->

                        <div class="cbx-payment-item">


                            <span>
                                Registration Fee
                            </span>


                            <strong class="cbx-payment-fee">

                                ₦<?= number_format(
                                    (float) $setting['registration_fee'],
                                    2
                                ) ?>

                            </strong>


                        </div>



                        <!-- BANK -->

                        <div class="cbx-payment-item">


                            <span>
                                Bank
                            </span>


                            <strong>

                                <?= htmlspecialchars(
                                    $setting['bank_name']
                                ) ?>

                            </strong>


                        </div>



                        <!-- ACCOUNT NUMBER -->

                        <div class="cbx-payment-item cbx-payment-account">


                            <span>
                                Account Number
                            </span>


                            <div>


                                <strong id="accountNumber">

                                    <?= htmlspecialchars(
                                        $setting['account_number']
                                    ) ?>

                                </strong>


                                <button
                                    type="button"
                                    class="copy-account"
                                    id="copyAccount"
                                    aria-label="Copy account number"
                                >

                                    <i class="fa-regular fa-copy"></i>

                                </button>


                            </div>


                        </div>



                        <!-- ACCOUNT NAME -->

                        <div class="cbx-payment-item">


                            <span>
                                Account Name
                            </span>


                            <strong>

                                <?= htmlspecialchars(
                                    $setting['account_name']
                                ) ?>

                            </strong>


                        </div>


                    </div>



                    <div class="cbx-payment-warning">


                        <i class="fa-solid fa-circle-info"></i>


                        <span>
                            Please confirm the account details
                            carefully before making payment.
                        </span>


                    </div>


                </div>



                <!-- =========================================
                     SECURITY
                ========================================== -->

                <div class="cbx-form-section">


                    <div class="cbx-section-heading">


                        <div>

                            <i class="fa-solid fa-lock"></i>

                        </div>


                        <span>

                            <strong>
                                Secure Your Account
                            </strong>

                            <small>
                                Create a password for your account.
                            </small>

                        </span>


                    </div>



                    <div class="cbx-form-row">


                        <!-- PASSWORD -->

                        <div class="cbx-form-group">


                            <label for="password">
                                Password
                            </label>


                            <div class="cbx-input-wrap">


                                <div class="cbx-input-icon">

                                    <i class="fa-solid fa-lock"></i>

                                </div>


                                <input
                                    type="password"
                                    id="password"
                                    name="password"
                                    placeholder="Create password"
                                    autocomplete="new-password"
                                    required
                                >


                                <button
                                    type="button"
                                    class="cbx-password-toggle"
                                    data-target="password"
                                    aria-label="Show password"
                                >

                                    <i class="fa-solid fa-eye"></i>

                                </button>


                            </div>


                        </div>



                        <!-- CONFIRM -->

                        <div class="cbx-form-group">


                            <label for="confirmPassword">
                                Confirm Password
                            </label>


                            <div class="cbx-input-wrap">


                                <div class="cbx-input-icon">

                                    <i class="fa-solid fa-lock"></i>

                                </div>


                                <input
                                    type="password"
                                    id="confirmPassword"
                                    name="confirm_password"
                                    placeholder="Confirm password"
                                    autocomplete="new-password"
                                    required
                                >


                                <button
                                    type="button"
                                    class="cbx-password-toggle"
                                    data-target="confirmPassword"
                                    aria-label="Show password"
                                >

                                    <i class="fa-solid fa-eye"></i>

                                </button>


                            </div>


                        </div>


                    </div>


                </div>



                <!-- =========================================
                     PAYMENT RECEIPT
                ========================================== -->

                <div class="cbx-form-section">


                    <div class="cbx-section-heading">


                        <div>

                            <i class="fa-solid fa-receipt"></i>

                        </div>


                        <span>

                            <strong>
                                Payment Receipt
                            </strong>

                            <small>
                                Upload proof of your registration payment.
                            </small>

                        </span>


                    </div>



                    <div class="cbx-upload-wrap">


                        <input
                            type="file"
                            id="receipt"
                            name="receipt"
                            accept=".jpg,.jpeg,.png,.pdf"
                            required
                        >


                        <label for="receipt">


                            <div class="cbx-upload-icon">

                                <i class="fa-solid fa-cloud-arrow-up"></i>

                            </div>


                            <div>

                                <strong>
                                    Choose Payment Receipt
                                </strong>

                                <span id="receiptFileName">
                                    JPG, PNG or PDF
                                </span>

                            </div>


                            <div class="cbx-upload-button">

                                Browse

                            </div>


                        </label>


                    </div>


                </div>



                <!-- =========================================
                     TERMS
                ========================================== -->

                <label class="cbx-register-terms">


                    <input
                        type="checkbox"
                        required
                    >


                    <span class="cbx-register-checkbox"></span>


<span>

    I agree to the

    <a
        href="terms.php"
        target="_blank"
    >
        Terms & Conditions
    </a>

    and

    <a
        href="privacy.php"
        target="_blank"
    >
        Privacy Policy
    </a>

    of Complete Bliss.

</span>


                </label>



                <!-- =========================================
                     SUBMIT
                ========================================== -->

                <button
                    type="submit"
                    class="cbx-register-btn"
                >

                    <span>
                        Create My Account
                    </span>

                    <i class="fa-solid fa-arrow-right"></i>

                </button>



                <!-- =========================================
                     LOGIN
                ========================================== -->

                <div class="cbx-register-login">


                    <span>
                        Already a member?
                    </span>


                    <a href="login.php">

                        Sign In

                        <i class="fa-solid fa-arrow-right"></i>

                    </a>


                </div>


            </form>



            <div class="cbx-register-footer">


                <i class="fa-solid fa-shield-halved"></i>

                <span>
                    Secure member registration
                </span>


                <span class="cbx-register-dot"></span>


                <a href="index.php#contact">
                    Need help?
                </a>


            </div>


        </div>


    </section>


</div>



<!-- =========================================================
     SWEETALERT
========================================================= -->

<script
    src="https://cdn.jsdelivr.net/npm/sweetalert2@11">
</script>


<script
    src="assets/js/register.js?v=<?= filemtime(__DIR__ . '/assets/js/register.js') ?>">
</script>



<!-- =========================================================
     REGISTRATION ERROR
========================================================= -->

<?php if (isset($_SESSION['error'])): ?>


<script>

document.addEventListener(
    "DOMContentLoaded",
    function () {

        Swal.fire({

            icon:
                "error",

            title:
                "Registration Failed",

            text:
                <?= json_encode($_SESSION['error']); ?>,

            confirmButtonText:
                "Try Again",

            confirmButtonColor:
                "#2563eb"

        });

    }
);

</script>


<?php

unset($_SESSION['error']);

endif;

?>


<?php
unset($_SESSION['old']);
?>


</body>

</html>