<?php
    include_once($_SERVER['DOCUMENT_ROOT'] . "/admin/inc/sessionStartGeneral.php");
?>


<?php
$pageTitle = "Fuel Rewards FAQ";
$pageDescription = "Frequently Asked Questions Fuel Rewards";
$pageKeywords = "Thayne, Wyoming, grocery, store, market, fresh foods, Wyoming, grocery, Valley Market Thayne, grocery store";

$theSiteParts = explode(".", $_SERVER['HTTP_HOST']);
$theSite = $theSiteParts[0];
?>
<?php
    include_once($_SERVER['DOCUMENT_ROOT'] . "/common/header.php");
?>

<?php require($_SERVER['DOCUMENT_ROOT'] . '/common/mainNav.php'); ?>

<style>
html,
body {
    height: 100% !important;
    width: 90% !important;
    /*display: contents !important;*/
    padding-left: 20px !important;
    margin: 100px;
}




li {
    list-style: none;
}


@media only screen and (max-width: 768px) {

    html,
    body {
        height: 100% !important;
        width: 100% !important;
        display: contents !important;
        padding-left: 5px !important;
        margin: 5px !important;
        padding-right: 5px !important;
        /* margin-left: 20px !important; */
    }


    .wrapper {
        max-width: 90% !important;
        /* margin: 10px auto 0 auto !important;
         */
        margin: auto;
        margin-left: 10px;
        display: block !important;
        padding: 5px !important;
    }

    /* 
    display:block;
    margin:auto; */
       

}


@media only screen and (min-width: 768px) {

    html,
    body {
        height: 100% !important;
        width: 90% !important;
        display: contents !important;
        padding-left: 10px !important;
        margin: 20px;
    }


    .row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 90%;
        /*  justify-content:center;
        text-align:center; */
    }

    .column {
        display: flex;
        flex-direction: column;
        flex-basis: 100%;
        flex: 1;
        align-item: center;
    }


    .column-2 {
        flex: 45%;
        max-width: 45%;
        max-height: 200px;
        padding: 0 4px;
        justify-content: space-between;
    }

    .column-2 img {
        margin-top: 8px;
        vertical-align: middle;
        width: 100%;
    }

    .wrapper {

        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-left: 50px;

    }

    /*  #hero-img {
        margin-left: 50px;
        height: 200px;
    } */

    #hero-img {
        margin-left: 10px !important;
        height: 200px;
        max-width: 800px !important;
        width: 800px !important;
        padding-right: 30px !important;
        margin-right: 30px !important;
    }

    #divRegisterLogin {
        height: 20px;
    }

    .aligner-center {
        display: flex;
        /* align-items: center; */
        /* min-height: 24em; */
        height: 20px;
        justify-content: center;
    }

    .aligner-item {
        flex: 1;
    }

    .aligner-item--top {
        align-self: flex-start;
    }

    .aligner-item--bottom {
        align-self: flex-end;
    }

    .aligner-item--fixed {
        flex: none;
        max-width: 50%;
    }


    .box {
        /* background-color: #444; */
        /* color: #fff; */
        border-radius: 5px;
        padding: 10px;
        /*font-size: 150%;*/
    }


    li {
        list-style: none;
    }

    #newToRewardsUl {
        margin-top: 0px !important;
        margin-right: 0px !important;
        margin-bottom: 9px !important;
        margin-left: 5px !important;
    }

    #divImgPerksExpireBy{
        /* position: absolute; */
        width: 75%;
        height: 75%;
    }

    #divImgPerksExpireBy img{
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

   /*  #imgPerksExpireBy{
        width:75% !important;
        position:absolute;
    } */

}
</style>

<div class="wrapper">
    <div class="row" style="text-align:center; display:block; margin-left:5px;">
        <div class="column">
            <img src="/Kickstrap/img/ValleyMarket_FuelSiteGraphics_ShopAndEarn_Header.png"
                alt="Shop and Earn Header image" id="hero-img">
        </div>
    </div>

    <div class="box row">

    </div>

    <div class="box row">

        <div class="column">
            <h1 style="color:#f79e1e;">How It Works</h1>
            <p>
                Earn money towards free groceries every time you shop, up to $10 each month.
                Every $1 = 1 reward point and every qualifying prescription = 25 points.
            </p>
            <p>It’s easy to start earning money towards savings on your groceries.
                Reward points accumulate monthly, from the first day of the month to the last, you will earn one point
                for
                every dollar spent.
                Those points are converted to an in-store credit you can use towards your groceries starting on the
                first
                day of each month*.
                Wallet credits will be awarded based on points earned, see chart below. At the start of each month, you
                will
                receive
                an email with your wallet credit earned. </p>

            <p>
                Be sure to give us your current email address so you don’t miss out! To track your points, log into your
                account. <br>               
                * This excludes the purchase of prescriptions, fuel, money orders, gift cards etc.
            </p>
        </div>

    </div>


    <div class="row" style="text-align:center;">

        <div class="column-2" style="margin-right: 20px; margin-left: 20px;">
            <img id="imgPointsGraphic" name="imgPointsGraphic"
                src="/Kickstrap/img/ValleyMarket_FuelSiteGraphicsPointsGraphic_HRZ.jpg" alt="Points Graphic">
        </div>
        <div class="column-2">
            <span style="font-family: Consolas; font-size: 12px;"> Rewards Points Breakdown</span>
            <img id="imgPointsBdwn" name="imgPointsBdwn"
                src="/Kickstrap/img/ValleyMarket_FuelSiteGraphicsGroceryPointsGraphic.jpg" alt="Reward Points Breakdown">
            <span style="font-family: Consolas; font-size: 12px;">Maximum $10.00 wallet credit</span>
        </div>

    </div>

    <!--  <div class="box row aligner-center" style="text-align:center;" id="divRegisterLogin">
        <span><a name="registerBtn" id="registerBtn" href="/register.php" class="btn btn-primary"
                style="width:100px;">Register</a></span>
        <span><a name="loginBtn" id="loginBtn" href="/login.php" class="btn btn-primary" style="width:100px;">Log
                In</a></span>
    </div> -->

    <?php
    if($loggedIn === false){
    ?>
    <p id="aboutPointsButtons" style="text-align:center; margin-top:10px;">
        <span><a name="registerBtn" id="registerBtn" href="/register.php" class="btn btn-primary"
                style="width:100px; margin-right: 10px;">Register</a></span>
        <span><a name="loginBtn" id="loginBtn" href="/login.php" class="btn btn-primary" style="width:100px;">Log
                In</a></span>
    </p>
    <?php 
    } else {
    ?>
 <!--    <div class="box row aligner-center" style="text-align:center;" id="divRegisterLogin">
        <span><a name="registerBtn" id="registerBtn" href="/register.php" class="btn btn-primary"
                style="width:100px;">Register</a></span>
        <span><a name="loginBtn" id="loginBtn" href="/login.php" class="btn btn-primary" style="width:100px;">Log
                In</a></span>
    </div> -->
    <?php 
    }
    ?>

    <div class="box row">

    </div>

    <div class="row">
        <div class="column">
            <h1 style="color:#f79e1e;">Get Started</h1>

            <ul id="newToRewardsUl">
                <h4>New To Rewards?</h4>
                <i>Follow the steps below to start earning today.</i>
                <li> 1. Complete the registration form <b><a style="color:red;" href="/register.php">here</a></b>.
                </li>
                <li> 2. Shop for groceries at our store.</li>
                <li> 3. Provide your phone number every time you checkout to watch your points add up. </li>
                <li> 4. Track your points or update your account <b><a style="color:red;"
                            href="/account.php">here</a></b>.
                </li>
            </ul>
        </div>
        <!--<div class="sectionColumns">

                <ul>
                    <h4>Already a member?</h4>
                    <i>Follow these steps to switch to Fuel Rewards.</i>
                    <li> 1. Log into your account page here</li>
                    <li> 2. Under My Account, My Rewards, select Fuel under the dropdown. </li>
                    <li> 3. Shop for groceries at our store.</li>
                    <li>10. Provide your phone number every time you checkout to start earning points. </li>
                    <li> 5. Once you’ve earned 50 points, visit our fuel station to use your .05¢ discount. </li>
                    <li> 6. Be sure to use your credit before it expires, reference the chart below </li>
                </ul>
            </div>-->

    </div>

    <div class="row">
        <div class="column">
            <h1 style="color:#f79e1e;">Redeem</h1>
            <p>
                On the first of the month your points will be converted to an wallet credit attached to your rewards
                phone
                number.
                Wallet credits will be awarded based on points earned, see chart above. To redeem your wallet credit,
                provide your phone number at checkout and indicate you would like to use your credit.
                Your wallet credit must be redeemed by the end of the month in which the wallet credit was issued.
                Any unused wallet credit will expire at the end of the month.
            </p>
        </div>
    </div>

    <div class="row">
            <div class="column"  id="divImgPerksExpireBy">
                <img src="/Kickstrap/img/Perks-RenewGraphic-9-24.jpg" alt="Perks Points Expiration Schedule" id="imgPerksExpireBy">
            </div>
    </div>


</div>








<?php require($_SERVER['DOCUMENT_ROOT'] . '/common/footer.php'); ?>