<!DOCTYPE html>

<?php

require 'vendor/autoload.php';

include 'app/Libraries/LocationInfo.php';



use Square\Environment;

use Ramsey\Uuid\Uuid;







// Pulled from the .env file and upper cased e.g. SANDBOX, PRODUCTION.

$upper_case_environment = strtoupper(getenv('ENVIRONMENT'));

$web_payment_sdk_url = $_ENV["ENVIRONMENT"] === Environment::PRODUCTION ? "https://web.squarecdn.com/v1/square.js" : "https://sandbox.web.squarecdn.com/v1/square.js";





?>

<html lang="en-US">

<head>

<script type="text/javascript" src="<?php echo $web_payment_sdk_url ?>"></script>

  <script type="text/javascript">

    window.applicationId =

      "<?php

        echo getenv('SQUARE_APPLICATION_ID');

        ?>";

    window.locationId =

      "<?php

        echo getenv('SQUARE_LOCATION_ID');

        ?>";

    window.currency =

      "<?php

        echo $location_info->getCurrency();

        ?>";

    window.country =

      "<?php

        echo $location_info->getCountry();

        ?>";

    window.idempotencyKey =

      "<?php

        echo Uuid::uuid4();

        ?>";

  </script>

  <!-- <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>public/square-stylesheets/style.css">

  <link rel="stylesheet" type="text/css" href="<?= base_url(); ?>public/square-stylesheets/sq-payment.css"> -->









    <title>Checkout - Golf Evolution</title>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <?php include 'member_layout/analyticscode.php' ?>

    <link rel="icon" href="<?= base_url()."/public"; ?>/assets/member_images/favicon.png" sizes="192x192" />

    <link rel="apple-touch-icon" href="<?= base_url()."/public"; ?>/assets/member_images/favicon.png" />

    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="<?= base_url()."/public"; ?>/assets/member_css/front-style.css">

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

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

    <script src="<?= base_url()."/public"; ?>/assets/member_js/ajax.js"></script>

    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>


    <input id="url" value="<?= base_url() ?>" type="hidden">



    <style typr="text/css">

  /* Styles for the loading spinner */

  .loading-spinner-overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(0, 0, 0, 0.5);

    z-index: 9999;

    display: flex;

    justify-content: center;

    align-items: center;

    visibility: hidden;

  }



  .loading-spinner {

    border: 8px solid #f3f3f3;

    border-top: 8px solid #3498db;

    border-radius: 50%;

    width: 60px;

    height: 60px;

    animation: spin 1s linear infinite;

  }



  @keyframes spin {

    0% {

      transform: rotate(0deg);

    }

    100% {

      transform: rotate(360deg);

    }

  }

</style>

</head>

<body class="checkout">



<?php include 'member_layout/header.php' ?>





<section class="pt-5 pb-3">

    <div class="container">

        <div class="row">

            <div class="col-lg-12">

                <h1 class="heading-border">Check Out</h1>

            </div>

        </div>



        <div class="row back-card">

            <div class="col-lg-12">

                <a href="<?=base_url()."view_cart/".md5(session()->get('logged_user')); ?>"><i class="arrow-left"></i> Back to Cart</a>

                <!-- <h4>Billing Address</h4> -->

            </div>

        </div>

    </div>

</section>



<section class="checkout-inner mt-3">

    <div class="container">                        

        <div class="row">

            <div class="col-xl-8">
                 <div class="address-form mb-5" >

                <form id="member_address" >

                        <div class="row">

                            <div class="col-lg-12 d-flex align-items-center mb-3">
                               
                            </div>  

                            <!-- <input type="hidden" value="<?= $userdata[0]['id']; ?>" name="id" >                      -->

                            <div class="col-lg-6 mb-3">

                                <label for="first_name">First Name<span class="text-danger">*</span></label>

                                <input type="text" value="<?= $userdata[0]['name']; ?>" name="name" id="first_name" required>
                                <span id="first_name_span_message"> </span>
                            </div>

                            <div class="col-lg-6 mb-3">

                                <label for="last_name">Last Name<span class="text-danger">*</span></label>

                                <input type="text" value="<?= $userdata[0]['last_name']; ?>" name="last_name" id="last_name" required>
                                <span id="last_name_span_message"> </span>
                            </div>                            

                       

                            <div class="col-lg-12 mb-3">

                                <label for="address">Street Address<span class="text-danger">*</span></label>

                                <input type="text" value="<?= $userdata[0]['address']; ?>" name="address" id="address" required>
                             <span id="address_span_message"> </span>
                            </div>                                           

                            <div class="col-lg-4 mb-3">

                                <label for="state">Province<span class="text-danger">*</span></label>
                                <input type="hidden" id="state_value" value="<?= $userdata[0]['state']; ?>" >
                                <input type="text" name="state" id="state" value="<?= $userdata[0]['state']; ?>" required>
                                <select name="canada_state" id="state2"  required>
                                </select>
                                <span id="state_span_message"> </span> <span id="state2_span_message"> </span>
                            </div>

                            <div class="col-lg-4 mb-3">

                            <label for="city">City<span class="text-danger">*</span></label>
                            
                            <input type="text" value="<?= $userdata[0]['city']; ?>" name="city" id="city" required>
                            <span id="city_span_message"> </span>
                            </div>

                            <div class="col-lg-4">

                                <label for="country">Country<span class="text-danger">*</span></label>
                        
                                <select name="country" id="country" class="js-example-basic-single" required>

                                <?php if ($userdata[0]['country'] == "") { ?>
                                <option value="Canada"> Canada </option>                     
                                <?php }
                                else { ?>
                                <option value="<?= $userdata[0]['country']?>"> <?= $userdata[0]['country']?> </option>  
                                <?php }?>
                                <?php foreach ($country as $key => $value) { ?>
                                    <option value="<?= $value['name']?>"> <?= $value['name']?> </option>  
                                <?php } ?>
                                </select>
                                <span id="country_span_message"> </span>
                            </div>

                            <div class="col-lg-4 mb-3">

                                <label for="zipcode">Postal Code<span class="text-danger">*</span></label>

                                <input type="text" name="pincode" id="pincode" value="<?= $userdata[0]['pincode']; ?>" required>
                                <span id="pincode_span_message"> </span>
                                   
                            
                            </div>  

                        </div>

                        <!-- <div class="row form-button">

                            <div class="col-lg-2 col-4">

                                <button>Cancel</button> 

                            </div>

                            <div class="col-lg-3 col-4">

                                <input type="button" class="submit" value="Save">

                            </div>

                            <div class="col-lg-7 col-4"></div>

                        </div>                       -->

                    </form>

                </div>

              
                


                <!-- Loading spinner HTML markup -->

                <div class="loading-spinner-overlay" id="loading-spinner-overlay">

                <div class="loading-spinner"></div>

                </div>

                
</div>            

            <div class="col-xl-4 order-summary-main mb-5">

                <div class="order-summary">                    

                    <div class="row order1">

                        <div class="col-lg-12 col-12">

                            <h4>Order Summary</h4>

                        </div>

                    </div>  

                    <?php foreach ($packageArray as $row) { ?>                  

                    <div class="row evo">

                        <div class="col-lg-8 col-8"><div class="product-name"><?php echo $row['package_name']." ($".number_format($row['cost'], 2, '.', '')." x ".$row['count'].")"; ?></div></div>

                        <div class="col-lg-4 col-4 text-end"><div class="product-price"><span class="price-symbol">$</span><?php $number = $row['cost'] * $row['count'];echo number_format($number, 2, '.', ''); ?></div></div>

                    </div>

                   <?php } ?>

                    <div class="row item1">

                        <div class="col-lg-6 col-6"><p>Items (<?= $item_count; ?>) : </p></div>

                        <div class="col-lg-6 col-6 text-end"><p><span class="price-symbol">$</span><?php echo number_format($amount, 2, '.', ''); ?></p></div>

                    </div>
<?php if($pst != 0){ ?>  
                    <div class="row item2">

                        <div class="col-lg-6 col-6"><p>PST  : </p></div>

                        <div class="col-lg-6 col-6 text-end"><p><span class="price-symbol">$</span><?php $number = $amount * $pst / 100; echo number_format($number, 2, '.', '');?></p></div>

                    </div>
<?php } ?>
                    <div class="row item3">

                        <div class="col-lg-6 col-6"><p>GST  : </p></div>

                        <div class="col-lg-6 col-6 text-end"><p><span class="price-symbol">$</span><?php $number = $amount * $gst / 100 ; echo number_format($number, 2, '.', '');?></p></div>

                    </div>

                    <div class="row order2">

                        <div class="col-lg-6 col-6"><h5>Order Total : </h5></div>

                        <div class="col-lg-6 col-6 text-end"><div class="product-total"><span class="price-symbol">$</span><?php $number =$amount + (($amount * ($gst + $pst) ) / 100); echo number_format($number, 2, '.', '');?></div></div>

                    </div>

                    <div class="row order-button">

                        <div class="col-lg-12">

                            <!-- <p>By placing your order, you agree to our company privacy policy and condition of use.</p> -->

                            <!-- <button id="card-button" type="button">Proceed to Pay</button> -->

                            <!-- <input id="card-button" type="submit" value="Proceed to Pay"> -->

                        </div>

                    </div>



                </div>

            </div>
            
            <div class="col-xl-8">
                <div class="address-form remember-section mb-5">                    
                        <label class="rember-label" for="rememberMe">By placing your order, you agree to our company privacy policy and condition of use.
                            <input type="checkbox" id="rememberMe">
                            <span class="checkmark"></span>
                        </label>
                </div>
            </div>

            <h4 class="payment-title col-xl-8">Payment Method</h4>

<div class="wrapper col-xl-8 mb-4">          

<div class="credit-card">                  

<form class="payment-form" id="fast-checkout">

    <div class="row">

        <div class="col-lg-12 ">

            <!-- Add Payment Method Code-->

            <input type="hidden" value="<?= $amount; ?>" name="amount" id="amount">

            <input type="hidden" value="<?= $order_id; ?>" name="order_id" id="order_id">

            <input type="hidden" value="" name="address_id" id="address_id">

            <div id="card-container"></div>

            <span id="payment-flow-message"></span>

            <div class="text-end" style="margin-top:-45px;" id="payment-button"> <button id="card-button" type="button">Proceed to Pay</button></div>
        
        </div>

    </div>




<!-- <div class="google-pay">

    <div class="row google-pay-content align-items-center">

        <div class="col-lg-10 d-flex align-items-center">                           

            <span>Google Pay</span>                                                                                    

        </div>

        <div id="google-pay-button" alt="google-pay" type="button"></div>

        <div class="col-lg-2 text-end">

            <img src="<?= base_url()."/public"; ?>/assets/member_images/g-pay.png"  alt="" width="64" height="58"/>

        </div>            

    </div>

</div> -->



</form>    
</div> 

</div>  

        </div>





    </div>

</section>







<?php include 'member_layout/footer.php' ?>

  <!-- <script type="text/javascript" src="<?= base_url(); ?>public/square-js/sq-ach.js"></script>

  <script type="text/javascript" src="<?= base_url(); ?>public/square-js/sq-apple-pay.js"></script>

  <script type="text/javascript" src="<?= base_url(); ?>public/square-js/sq-google-pay.js"></script> -->

  <script type="text/javascript" src="<?= base_url(); ?>public/square-js/sq-card-pay.js"></script>

  <script type="text/javascript" src="<?= base_url(); ?>public/square-js/sq-payment-flow.js"></script>

  <!-- <script>
    $(document).ready(function() {
        $("#card-button").removeAttr('disabled');
        $('.js-example-basic-single').select2();
        $("#fast-checkout").css('display','none');  
        $(".payment-title").css('display','none');
    });

    $('#card-button').click(function() {
    //    $('#card-button').prop("disabled", true);
    //    $('#loading-spinner-overlay').css('visibility', 'visible');
       $('#card-button').prop("disabled", true);
      $('#loading-spinner-overlay').css('visibility', 'visible');
    });

   
    $('#rememberMe').click(function() {
        if ($(this).is(':checked')) {
            ValidateForm();
        }else {  
            $("#fast-checkout").css('display','none');
            $(".payment-title").css('display','none');
        }
        
    });

    function ValidateForm() {
    var formInvalid = false;
    $('#member_address input').each(function() {
    if ($(this).val() === '') {
        var id = $(this).attr('id');
        var input_id = id+'_span_message';
    
        $('#'+input_id+'').html('input required').css('color','red');
        formInvalid = true;
    }
    });

    if (formInvalid)
    { $('#rememberMe').prop('checked', false);}
    else{   $("#fast-checkout").css('display','block');  $(".payment-title").css('display','block');}
   
    }

    $('#first_name').keyup(function() {$('#first_name_span_message').html(''); if($('#first_name').val().length == 0){uncheck()  }});
    $('#last_name').keyup(function() {$('#last_name_span_message').html(''); if($('#last_name').val().length == 0){uncheck()  }});
    $('#address').keyup(function() {$('#address_span_message').html(''); if($('#address').val().length == 0){uncheck()  } });
    $('#state').keyup(function() {$('#state_span_message').html(''); if($('#state').val().length == 0){uncheck()  }});
    $('#city').keyup(function() { $('#city_span_message').html('');if($('#city').val().length == 0){uncheck()  }});
    $('#country').keyup(function() {$('#country_span_message').html(''); if($('#country').val().length == 0){uncheck()  }});
    $('#pincode').keyup(function() {$('#pincode_span_message').html(''); if($('#pincode').val().length == 0){uncheck()  }});

    function uncheck(){    $('#rememberMe').prop('checked', false);  $(".payment-title").css('display','none'); $("#fast-checkout").css('display','none');  }
</script> -->

<script>
    $(document).ready(function() {
       
        $('#card-button').prop("disabled", true);
        $('#card-button').css("background-color", "gray");
        $('.js-example-basic-single').select2();
        var state_value = $('#state_value').val();
        if(state_value == ''){ $('#state_value').val('Enter Province'); }
        var country = $("#country").val();
        if(country == 'Canada')
        {
            $('#state').attr('required', false);
            $('#state').val($('#state_value').val());
            $('#state2').attr('required', true);
            $('#state_span_message').hide(); 
        } else{
            $('#state2').attr('required', false);
            $('#state').attr('required', true);
            $('#state2_span_message').hide();
        }
    });

    $('#country').change(function() {
        var country = $("#country").val();
        $('#rememberMe').prop('checked', false);
        if(country == 'Canada')
        {
            $('#state').attr('required', false);
             $('#state').val($('#state_value').val());
            $('#state2').attr('required', true);
            $('#state_span_message').hide();
            $('#state2_span_message').show();
        } else{
            $('#state2').attr('required', false);
            $('#state2').val($('#state_value').val());
            $('#state').attr('required', true);
            $('#state').val('');
            $('#state2_span_message').hide();
            $('#state_span_message').show();
        }
    });

    $('#card-button').click(function() {
    //    $('#card-button').prop("disabled", true);
         // $('#loading-spinner-overlay').css('visibility', 'visible');
    
    });

   
    $('#rememberMe').click(function() {
        if ($(this).is(':checked')) {
            ValidateForm();
        }else {  
            $('#card-button').prop("disabled", true);
            $('#card-button').css("background-color", "gray");
        }
        
    });

    function ValidateForm() {
    var formInvalid = false;
    $('#member_address input,select').each(function() {
       // alert($(this).val());
    if ($(this).val() === '') {
        var id = $(this).attr('id');
        var input_id = id+'_span_message';
        $('#'+input_id+'').html('input required').css('color','red');
        formInvalid = true;
    }
    });

    if (formInvalid)
    { 
        $('#rememberMe').prop('checked', false);
        $(window).scrollTop($('#member_address').offset().top);
    } else {   
        $("#card-button").removeAttr('disabled');   
        $('#card-button').css("background-color", "#00B4D5"); 
    }
   
    }

    $('#first_name').keyup(function() {$('#first_name_span_message').html(''); if($('#first_name').val().length == 0){uncheck()  }});
    $('#last_name').keyup(function() {$('#last_name_span_message').html(''); if($('#last_name').val().length == 0){uncheck()  }});
    $('#address').keyup(function() {$('#address_span_message').html(''); if($('#address').val().length == 0){uncheck()  } });
    $('#state').keyup(function() {$('#state_span_message').html(''); if($('#state').val().length == 0){uncheck()  }});
    $('#state2').change(function() {$('#state2_span_message').html(''); if($('#state2').val().length == 0){uncheck()  }});
    $('#city').keyup(function() { $('#city_span_message').html('');if($('#city').val().length == 0){uncheck()  }});
    $('#country').keyup(function() {$('#country_span_message').html(''); if($('#country').val().length == 0){uncheck()  }});
    $('#pincode').keyup(function() {$('#pincode_span_message').html(''); if($('#pincode').val().length == 0){uncheck()  }});
    

    function uncheck(){    $('#rememberMe').prop('checked', false);    $('#card-button').prop("disabled", true);  $('#card-button').css("background-color", "gray");  }
</script>
</body>

</html>

