<?php
session_start();
require './inn/connect.php';
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Distinct Buzz</title>
    <link rel="shortcut icon" href="images/favicon.png" />
    <!-- css -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.min.css"
        rel="stylesheet" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css"
        integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous" />

    <!-- font-awesome -->

    <link rel="stylesheet" type="text/css"
        href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <!-- Custom Css  -->
    <link href="css/style_home.css" rel="stylesheet" />
</head>

<body>
    <!-- Navbar  -->
    <div class="container-fluid">
        <div class="row">
            <div class="container">
                <div class="row mainHeader">
                    <nav class="col-md-12 navbar navbar-expand-lg navbar-light bg-light1">
                        <a class="navbar-brand p-0" href="./index.html">
                            <img src="images/logo.svg" alt="logo" class="logo_main" />
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                            aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarNavDropdown">
                            <ul class="navbar-nav ml-auto">
                                <!-- <li class="nav-item">
                                    <a class="nav-link active" href="./index.html">Home <span
                                            class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item ">
                                    <a class="nav-link" href="#">About Us</a>
                                </li>

                                <li class="nav-item">
                                    <a class="nav-link" href="#">Why Us?</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">How It Works? </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Contact Us </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">Sign In </a>
                                </li> -->
                                <li class="nav-item btnbg">
                                    <a class="nav-link btn myBTN" href="/login" target="_blank">
                                        Log In
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

    <!-- Banner -->
    <div class="container-fluid mainBannerBox" style="margin-bottom:0px;">
        <div class="row">
            <div class="container bannerTextBox" style="">
                <div class="row align-items-center">
                    <div class="col-12 col-sm-12 col-md-7">
                        <h1 class="bannerHead" style="text-align:left;">
                            <span class="font-bold">Welcome To StandPoint Rewards – Voice out your Opinions!</span>
                        </h1>
                        <ul class="pointul-banner">
                            <li>Your Voice DESERVES TO BE HEARD! MAKE THE DIFFERNCE
                                FOR A BETTER TOMORROW…</li>
                            <li>We will send you surveys that match your profile. Surveys are sent in form of email
                                invitations.</li>
                            <li>Earn rewards in form of industry reports, gift vouchers or a charity in your
                                name.</li>
                        </ul>
                    </div>
                    <div class="col-12 col-sm-12 col-md-5 text-left">
                    <img src="./images/distinctbuzz.png" alt="distinctbuzz" class="banner-img img-fluid">
                        <!-- <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
                            <div class="carousel-inner">
                                <div class="carousel-item active h5">
                                    Your Voice DESERVES TO BE HEARD! MAKE THE DIFFERNCE
                                    FOR A BETTER TOMORROW…
                                </div>
                                <div class="carousel-item h5">
                                    We will send you surveys that match your profile. Surveys are sent in form of email
                                    invitations.
                                </div>
                                <div class="carousel-item h5">
                                    Earn rewards in form of industry reports, gift vouchers or a charity in your name.
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
                <!-- <h1 class="bannerHead fontMw">Sample Management Platform for Market Research Projects </h1>
                <p class="bannerPara"> A Quality Driven Platform That Manages Simple To Sophisticated Surveys Without
                    Compromise. </p>
                <div class="mt-30">
                    <a href="#" class="btn myBTN"> Log In </a>
                    <a href="#" class="btn myBTN bnrSignup"> Sign Up </a>
                </div> -->
            </div>
        </div>
    </div>
 
    <div class="page-detail-section mb-5">
        <div class="container page-wrapper">

            <section class="wpb_row vc_row-fluid">
                <div class="container">
                    <div class="vc_row">
                        <div class="wpb_column vc_column_container vc_col-sm-12">
                            <div class="vc_column-inner">
                                <div class="wpb_wrapper">
                                    <div class="wpb_text_column wpb_content_element">
                                        <div class="wpb_wrapper">
                                            <h4 class="mt-3">

                                            </h4>
                                            <h3 class="text-center mt-5 mb-5" style="color:#642a62">Become a Panel
                                                Member Now!</h3>


                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="wpb_row vc_row-fluid">
                <div class="container">
                    <div class="vc_row">
                        <div class="wpb_column vc_column_container vc_col-sm-12">
                            <div class="vc_column-inner">
                                <div class="wpb_wrapper">
                                    <div role="form" class="" id="" lang="en-US" dir="ltr">
                                        <div class="screen-reader-response">
                                            <?php if (!empty($_SESSION['success_msg'])) { ?>
                                                <div class="alert alert-success" role="alert">
                                                    <?= $_SESSION['success_msg'] ?>
                                                </div>
                                            <?php } ?>


                                        </div>
                                        <form action="" method="post" class="needs-validation" novalidate="novalidate">
                                            <div class="row">
                                                <div class="col-md-6 mb-2">
                                                    <input type="text" name="name" value="" size="40"
                                                        class="form-control  " required aria-invalid="false"
                                                        placeholder="First Name" />
                                                </div>
                                                <div class="col-md-6 mb-2  mb-2">
                                                    <span class="form-control-wrap text-612"><input type="text"
                                                            name="last_name" value="" size="40" class="form-control  "
                                                            required aria-invalid="false"
                                                            placeholder="Last Name" /></span>
                                                </div>
                                                <div class="col-md-6 mb-2  mb-2">
                                                    <span class="form-control-wrap menu-673">
                                                        <select name="gender" class="form-control" required
                                                            aria-invalid="false">
                                                            <option value="">
                                                                Select Gender
                                                            </option>
                                                            <option value="Male">Male</option>
                                                            <option value="Female">Female</option>
                                                            <option value="Transgender">Transgender</option>
                                                        </select></span>
                                                </div>
                                                <div class="col-md-6 mb-2">
                                                    <span class="form-control-wrap date-423">
                                                        <!-- <input type="date" name="dob_date" value="" size="40"
                                                            class="form-control " required placeholder="DOB MM/DD/YY"
                                                            id="dobdate" /> -->
                                                        <!-- <input placeholder="DOB DD/MM/YYYY" class="form-control datepicker" type="text" name="dob_date"
                                                            onfocus="(this.type='date')" onblur="(this.type='text')"
                                                            id="date" /> -->
                                                        <input placeholder="DOB YYYY/MM/DD"
                                                            class="form-control datepicker" type="text" name="dob_date"
                                                            id="date" />
                                                    </span>
                                                </div>
                                                <div class="col-md-6 mb-2  mb-2 test">
                                                    <label class="pslem" style="display: none">Email Already Exists
                                                        Please Enter Another
                                                        Email.</label><span class="form-control-wrap"><input
                                                            type="email" id="PersonalEmail" name="email" value=""
                                                            size="40" class="form-control " required
                                                            aria-invalid="false" placeholder="Personal Email" /></span>
                                                </div>
                                                <!-- <div class="col-md-6 mb-2  mb-2 test1">
                                                    <label class="bslem" style="display: none">Email Already Exists
                                                        Please Enter Another
                                                        Email</label><span class="form-control-wrap email-408"><input
                                                            type="email" name="business_email" value="" size="40"
                                                            class="form-control " aria-invalid="false"
                                                            placeholder="Business Email" /></span>
                                                </div> -->

                                                <div class="col-md-6 mb-2">
                                                    <span class="form-control-wrap Country">
                                                        <select id="country-select" name="country" class="form-control"
                                                            required>
                                                            <option value="">
                                                                Select Country
                                                            </option>
                                                        </select></span>
                                                </div>
                                                <div class="col-md-6 mb-2 test3">
                                                    <label class="phn" style="display: none">Phone Number Already Exists
                                                        Please Enter Another
                                                        Phone Number</label><span class="form-control-wrap tel-417">
                                                        <input type="tel" id="tel-1" name="phone" value="" size="40"
                                                            class="form-control " required
                                                            placeholder="Phone Number" /></span>
                                                </div>

                                                <div class="col-md-6 mb-2">
                                                    <span class="form-control-wrap text-204"><input type="text"
                                                            name="zipcode" value="" size="40" class="form-control  "
                                                            required aria-invalid="false"
                                                            placeholder="Zip Code" /></span>
                                                </div>
                                            </div>
                                            <div class="row">


                                                <!-- <div class="col-md-6 mb-2">
                                                    <span class="form-control-wrap text-51221">
                                                        <input type="text" name="state" value="" size="40"
                                                            class="form-control  " required aria-invalid="false"
                                                            placeholder="State" /></span>
                                                </div>
                                                <div class="col-md-6 mb-2">
                                                    <span class="form-control-wrap text-512">
                                                        <input type="text" name="city" value="" size="40"
                                                            class="form-control" required aria-invalid="false"
                                                            placeholder="City" /></span>
                                                </div> -->


                                            </div>
                                            <div class="row">
                                                <div class="col-md-12 mb-2">
                                                    <label>For validation purposes, please share an URL to
                                                        your Social media profile or Business page.
                                                    </label>
                                                </div>
                                                <div class="col-md-6 mb-2">
                                                    <span class="form-control-wrap FacebookProfileURL"><input
                                                            type="text" name="fb_url" value="" size="40"
                                                            class="form-control   " aria-invalid="false"
                                                            placeholder="Facebook Profile URL" /></span>
                                                </div>
                                                <div class="col-md-6 mb-2">
                                                    <span class="form-control-wrap InstagramProfileURL"><input
                                                            type="text" name="in_url" value="" size="40"
                                                            class="form-control   " aria-invalid="false"
                                                            placeholder="Instagram Profile URL" /></span>
                                                </div>
                                                <div class="col-md-6 mb-2">
                                                    <span class="form-control-wrap TwitterProfileURL"><input type="text"
                                                            name="tw_url" value="" size="40" class="form-control   "
                                                            aria-invalid="false"
                                                            placeholder="Twitter Profile URL" /></span>
                                                </div>
                                                <div class="col-md-6 mb-2">
                                                    <span class="form-control-wrap LinkedInProfileURL"><input
                                                            type="text" name="ln_url" value="" size="40"
                                                            class="form-control   " aria-invalid="false"
                                                            placeholder="LinkedIn Profile URL" /></span>
                                                </div>
                                            </div>



                                            <p><br /></p>
                                            <div class="row">
                                                <div class="col-md-12 mb-2">
                                                    <label id="verifyemail" class="pointer">Click on the Link to Verify
                                                        Your Personal
                                                        Email</label><br />
                                                    <div class="row">
                                                        <div class="col-md-6 mb-2">
                                                            <span class="form-control-wrap text-126">
                                                                <input type="text" name="emailotp" value="" size="40"
                                                                    class="form-control " id="otpverify"
                                                                    aria-invalid="false" placeholder="OTP" />
                                                                <input type="hidden" id="verifytoken" name="verifytoken"
                                                                    value="" />
                                                            </span>
                                                        </div>
                                                    </div>
                                                    <img id="otpload" src="./assets/images/lines-white.gif"
                                                        style="display:none;">
                                                    <button type="button" id="verifybtn" class="btn-info btn width-auto"
                                                        style="display: none">Verify Now</button>
                                                    <label id="verifybtnmsg" class="text-info"
                                                        style="display: none">Please Enter the OTP
                                                        Received On your Personal
                                                        Email</label>
                                                </div>
                                            </div>
                                            <div id="acceptance1_area" class="row">
                                                <div class="col-md-12 mb-2" id="14275">
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="acceptance1"
                                                            name="acceptance-18" value="1">
                                                        <label class="form-check-label" for="acceptance1">I confirm
                                                            that I am 18 years of age or older.</label>
                                                    </div>

                                                </div>
                                            </div>

                                            <div id="acceptance2_area" class="row">
                                                <div class="col-md-12 mb-2" id="14275">
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="acceptance2"
                                                            name="acceptance-14" value="1">
                                                        <label class="form-check-label" for="acceptance2">If
                                                            you are between the age group of 14 - 17
                                                            and want to register. Please share your
                                                            parent/ local guardian details for
                                                            consent.</label>
                                                    </div>

                                                </div>
                                                <div id="acceptance2_area_inner" style="display: none">
                                                    <div class="col-md-12 mb-2">
                                                        <span class="form-control-wrap ParentLocalGuardianName">
                                                            <input type="text" name="parentname" value="" size="40"
                                                                class="form-control " id="plgn" aria-invalid="false"
                                                                placeholder="Parent Local Guardian Name" /></span>
                                                    </div>
                                                    <div class="col-md-12 mb-2">
                                                        <span class="form-control-wrap tel-51phone">
                                                            <input type="tel" name="parentphone" value="" size="40"
                                                                class="form-control   " id="phn" aria-invalid="false"
                                                                placeholder="Phone" style="" /></span>
                                                    </div>
                                                    <div class="col-md-12 mb-2">
                                                        <span class="form-control-wrap email-944"><input type="email"
                                                                name="parentemail" value="" size="40"
                                                                class="form-control  " id="eml" aria-invalid="false"
                                                                placeholder="Email" style="" /></span>
                                                    </div>
                                                </div>


                                            </div>

                                            <div class="row">
                                                <div class="col-md-12 mb-2" id="14275">
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="acceptance3"
                                                            name="acceptance-3" value="1">
                                                        <label class="form-check-label" for="acceptance3">I would like
                                                            to be a
                                                            member of Distinct
                                                            Buzz Panel and participate in Market
                                                            Research surveys when they become
                                                            available.</label>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-md-12 mb-2" id="14275">
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input" id="acceptance4"
                                                            name="acceptance-4" value="1" required>
                                                        <label class="form-check-label" for="acceptance4">By checking
                                                            this box,
                                                            you are confirming
                                                            that you have read and agree to our Terms of
                                                            Use, <a href="privacy-policy.php" target="_blank">Privacy
                                                                Policy</a>, and
                                                            consent to the collection, processing, and
                                                            retention of your data in accordance with
                                                            our <a href="privacy-policy.php" target="_blank">Privacy
                                                                Policy</a>. Your
                                                            identity and the opinions you provide are
                                                            always kept completely confidential as
                                                            stated in our
                                                            <a href="privacy-policy.php" target="_blank">Privacy
                                                                Policy</a></label>
                                                    </div>

                                                </div>
                                            </div>


                                            <div class="contact-mess">
                                                <span class="form-control-wrap ParentLocalGuardianName"><input
                                                        type="text" name="ParentLocalGuardianName" value="" size="40"
                                                        class="form-control " id="plgn" aria-invalid="false"
                                                        placeholder="Parent Local Guardian Name"
                                                        style="display: none" /></span>
                                            </div>
                                            <div class="contact-mess">
                                                <span class="form-control-wrap tel-51phone"><input type="tel"
                                                        name="tel-51phone" value="" size="40" class="form-control  "
                                                        id="phn" aria-invalid="false" placeholder="Phone"
                                                        style="display: none" /></span>
                                            </div>
                                            <div class="contact-mess">
                                                <span class="form-control-wrap email-944"><input type="email"
                                                        name="email-944" value="" size="40" class="form-control  "
                                                        id="eml" aria-invalid="false" placeholder="Email"
                                                        style="display: none" /></span>
                                            </div>


                                            <p>
                                                <span class="form-control-wrap dynamichidden-881"><input type="hidden"
                                                        name="dynamichidden-881" value="6b0c1110" size="40"
                                                        class="form-control " aria-invalid="false" /></span>
                                            </p>

                                            <div class="row mb-3">
                                                <div class="col-md-2 mb-2">
                                                    Input this code:<br />
                                                    <img src="captcha.php" alt="CAPTCHA" class="mb-1">
                                                    <input type="text" name="captcha" class="form-control"
                                                        placeholder="Enter the code" required>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div id="formrespo" class="col-md-3">

                                                </div>
                                            </div>
                                            <div class="row d-flex justify-content-around">
                                                <div class="col-md-3">
                                                    <input type="submit" value="SUBMIT"
                                                        class="form-control btn-primary btn" id="jbtn" />
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="vc_empty_space" style="height: 32px">
                                        <span class="vc_empty_space_inner"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="wpb_row vc_row-fluid">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="featuremain">

                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <!-- Footer  -->
    <div class="container-fluid footerWrap">
        <div class="row">
            <div class="col-md-12">
                <hr class="mb-0" />
                <p class="text-center">© Copyright 2024 by Distinct Buzz</p>
            </div>
        </div>
    </div>
    <?php
    $stmt = "SELECT * FROM country ";
    $stmt = $conn->prepare($stmt);
    $stmt->execute();
    $countrydata = $stmt->fetchAll();
    $countarray = [];
    foreach ($countrydata as $corty) {
        $countarray[] = ['code' => $corty['iso'], 'name' => $corty['nicename'], 'phonecode' => $corty['phonecode']];
    }
    ?>
    <script>
        const countries = <?php echo json_encode($countarray); ?>;
        //console.log(countries);
    </script>
    <!-- js-bundal -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/libphonenumber-js@1.9.46/bundle/libphonenumber-min.js"></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
    <script>

        $('.datepicker').datepicker({
            format: 'yyyy/mm/dd',
        });

    </script>
    <script src="assets/js/custom.js"></script>
</body>

</html>