<?php include('../includes/db_conx.php');

isset($_SESSION['detect_login']);
if (!isset($_SESSION['detect_login'])) {
    header("location: ../online/customer_login");
    exit();
} else {
    $id = $_SESSION['id'];
    // get all the varible from the database for personal information 
    include('../includes/cus-info.php');

    include('../includes/dash-header.php');
}
?>




<!-- header begin-->

<body>


    <style>
        .circle {
            width: 50px;
            height: 100px;
            border-radius: 50%;
            /* border: 5px solid #00cc66; */
            background: #d4f1ed;
            /* Green color */
            position: relative;
        }

        .circle-1 {
            width: 70%;
            height: 70%;
            background-color: #92ded4;
            /* Green color */
            position: absolute;
            top: 15%;
            left: 15%;
            border-radius: 50%;
            border: 2px solid #8ad7cd;
        }

        .circle-2 {
            width: 40%;
            height: 40%;
            background-color: #64cdbf;

            /* Lighter green color */
            position: absolute;
            top: 30%;
            left: 30%;
            border-radius: 50%;
        }

        .line {
            width: 2px;
            background-color: lightgrey;
        }

        .leader {
            font-size: 1.1rem;
        }

        .success_blue {
            background: #47689b !important;
        }

        .new_circle {
            width: 30px;
            height: 45px;
            border-radius: 50%;
            background: #c8c7c7;
        }
    </style>

    <br />
    <br />
    <br />

    <br />



    <div class="stepper d-flex flex-column mt-5 ml-2">

        <div class="d-flex mb-1">
            <div class="d-flex flex-column pr-4 align-items-center">
                <div class="new_circle success_blue ml-2  mr-2 mb-1"></div>
                <div class="line h-100 success_blue"></div>
            </div>
            <div>
                <p class="leader text-muted "><?= $p_name ?> Ordered a <?= $p_amount ?> transfer</p>
                <span class="badge badge-primary mb-4"><?= $p_date ?></span>
            </div>
        </div>

        <!-- end of a circle -->
        <div class="d-flex mb-1">
            <div class="d-flex flex-column pr-4 align-items-center">

                <!-- This is the green circle  -->
                <div class="circle  mb-1">
                    <div class="circle-1">
                        <div class="circle-2"></div>
                    </div>
                </div>
                <!-- This is the green circle  -->
                <?php
                // this code is to check the line linking to the next process
                if ($step_transfer > 0) {
                    echo '<div class="line h-100 success_blue"></div>';
                } else {
                    echo '<div class="line h-100 "></div>';
                }

                ?>


            </div>
            <div>
                <h3 class="text-dark">Waiting for Payment</h3>
                <p class="leader text-muted pb-3">We are waiting for the Money to reach our bank </p>
            </div>
        </div>



        <!-- this is where the programming will start from  -->

        <!-- end or a circle -->
        <div class="d-flex mb-1">
            <div class="d-flex flex-column pr-4 align-items-center">

                <?php
                if ($step_transfer > 0) {
                ?>
                    <!-- This is the green circle  -->
                    <div class="circle  mb-1">
                        <div class="circle-1">
                            <div class="circle-2"></div>
                        </div>
                    </div>
                    <!-- This is the green circle  -->
                    <!-- <div class="line h-100 success_blue"></div> -->
                <?php
                } else {
                ?>
                    <!-- This is the green circle  -->
                    <div class="new_circle  ml-2  mr-2 mb-1"></div>
                    <!-- This is the green circle  -->
                <?php } ?>


                <?php
                // this code is to check the line linking to the next process
                if ($step_transfer > 1) {
                    echo '<div class="line h-100 success_blue"></div>';
                } else {
                    echo '<div class="line h-100 "></div>';
                }

                ?>


            </div>
            <div>
                <p class="leader text-muted ">We Process The Payment</p>
                <span class="badge badge-primary mb-4"><?= $p_date ?></span>
            </div>
        </div>
        <!-- end of a circle  -->
        <div class="d-flex mb-1">
            <div class="d-flex flex-column pr-4 align-items-center">


                <?php
                if ($step_transfer > 1) {
                ?>
                    <!-- This is the green circle  -->
                    <div class="circle  mb-1">
                        <div class="circle-1">
                            <div class="circle-2"></div>
                        </div>
                    </div>
                    <!-- This is the green circle  -->
                    <!-- <div class="line h-100 success_blue"></div> -->
                <?php
                } else {
                ?>
                    <!-- This is the green circle  -->
                    <div class="new_circle  ml-2  mr-2 mb-1"></div>
                    <!-- This is the green circle  -->
                <?php } ?>


                <?php
                // this code is to check the line linking to the next process
                if ($step_transfer > 1) {
                    echo '<div class="line h-100 success_blue"></div>';
                } else {
                    echo '<div class="line h-100 "></div>';
                }

                ?>
            </div>
            <div>
                <p class="leader text-muted ">We Send The money to your account </p>
                <span class="badge badge-primary mb-4"><?= $p_date ?></span>
            </div>
        </div>
        <!-- end of a circle  -->

        <!-- this is where my programming will end ! -->





    </div>




    <?php
    include('../includes/dash_footer.php') ?>
</body>


<!-- -->

</html>


<script type="text/javascript">
    $('.preloader').fadeOut(1000);
</script>